/*
 * schools.css — Mantle Realty Child Theme
 *
 * Purpose: styles for the schools CPT single page.
 * Loaded by functions.php on: is_singular('schools')
 * Depends on: tokens.css, base.css, components.css.
 *
 * The Mantle School Facts Manager plugin outputs inline CSS via
 * wp_add_inline_style('wp-block-library', …). Because our stylesheet
 * is enqueued later in the cascade, these rules win on equal specificity
 * and flip the colour scheme from the plugin's default light theme
 * (#f8f9fa / #0066cc) to the Mantle dark theme.
 *
 * Contains:
 *   1. School hero / header    (.school-page-hero)
 *   2. School facts panel      (.mtl-school-facts, .mtl-school-fact*)
 *   3. Schools list            (.mtl-schools)
 *   4. Feeder schools list     (.mtl-feeder-schools)
 *   5. Sports section          (.mtl-school-sports, .mtl-ss-grid, .mtl-ss-card)
 *   6. Responsive
 */

/* ============================================================
   1. SCHOOL PAGE HERO
   Wrapper for the hero section on a single school page.
   Add class "school-page-hero" to the top Elementor section
   that contains the school name and header.
   ============================================================ */

.school-page-hero {
  position: relative;
  padding: 64px 20px 48px;
  background-color: var(--mantle-bg);
  color: var(--mantle-text);
  text-align: center;
}

.school-page-hero h1 {
  font-family: 'Gotham Black', 'Gotham', 'Montserrat', Arial, sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 .5rem;
  line-height: 1.2;
}

.school-page-hero__type {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mantle-orange);
  margin: 0 0 .35rem;
}

.school-page-hero__district {
  font-size: .95rem;
  color: #cfcfcf;
  margin: 0;
}

/* ============================================================
   2. SCHOOL FACTS PANEL
   [mtl_school_facts] shortcode — outer wrapper and fact rows.
   Overrides the plugin's inline light-theme (#f8f9fa) default.
   ============================================================ */

.mtl-school-facts {
  background: var(--mantle-surface) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: var(--mantle-radius-md) !important;
  padding: 1.25rem !important;
  margin: 1.5rem 0 !important;
}

.mtl-school-facts-title {
  font-family: 'Gotham Black', 'Gotham', 'Montserrat', Arial, sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--mantle-orange) !important;
  margin: 0 0 1rem !important;
}

.mtl-school-facts-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mtl-school-fact {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: .5rem !important;
  padding: .7rem 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  color: var(--mantle-text) !important;
}

.mtl-school-fact:last-child {
  border-bottom: none !important;
}

.mtl-school-fact-label {
  font-weight: 600 !important;
  color: #cfcfcf !important;
  flex-shrink: 0 !important;
  min-width: 140px !important;
}

.mtl-school-fact-value {
  flex: 1 !important;
  text-align: right !important;
  color: #ffffff !important;
}

.mtl-school-fact-value a {
  color: var(--mantle-light-blue) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.mtl-school-fact-value a:hover,
.mtl-school-fact-value a:focus-visible {
  color: var(--mantle-orange) !important;
  text-decoration: underline !important;
}

/* ============================================================
   3. SCHOOLS LIST
   [mtl_schools], [mtl_elementary_school], etc.
   ============================================================ */

.mtl-schools {
  margin: 1.5rem 0 !important;
}

.mtl-schools p {
  margin: .6rem 0 !important;
  color: #cfcfcf !important;
}

.mtl-schools a {
  color: var(--mantle-light-blue) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.mtl-schools a:hover,
.mtl-schools a:focus-visible {
  color: var(--mantle-orange) !important;
  text-decoration: underline !important;
}

/* School card (layout=cards) */
.mtl-card.mtl-school {
  background: var(--mantle-surface) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: var(--mantle-radius-sm) !important;
  padding: .85rem 1rem !important;
  margin-bottom: .75rem !important;
}

.mtl-card.mtl-school .mtl-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 .25rem !important;
}

.mtl-card.mtl-school .mtl-title a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.mtl-card.mtl-school .mtl-title a:hover {
  color: var(--mantle-orange) !important;
}

.mtl-card.mtl-school .mtl-label {
  font-size: .8rem !important;
  color: #999 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* ============================================================
   4. FEEDER SCHOOLS LIST
   [mtl_feeder_schools] shortcode — bullet list of linked schools.
   ============================================================ */

.mtl-feeder-schools {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.25rem 0 !important;
}

.mtl-feeder-schools li {
  padding: .6rem 0 .6rem 1.5rem !important;
  position: relative !important;
  border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
  color: #cfcfcf !important;
}

.mtl-feeder-schools li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--mantle-orange) !important;
  font-weight: 700 !important;
}

.mtl-feeder-schools li:last-child {
  border-bottom: none !important;
}

.mtl-feeder-schools a {
  color: var(--mantle-light-blue) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.mtl-feeder-schools a:hover,
.mtl-feeder-schools a:focus-visible {
  color: var(--mantle-orange) !important;
  text-decoration: underline !important;
}

/* ============================================================
   5. SPORTS SECTION
   [mtl_school_sports] shortcode — grid of sport cards.
   ============================================================ */

.mtl-school-sports {
  margin: 2rem 0 !important;
}

.mtl-school-sports-title {
  font-family: 'Gotham Black', 'Gotham', 'Montserrat', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 .5rem !important;
}

.mtl-school-sports-count {
  font-size: .9rem !important;
  color: #999 !important;
  text-align: center !important;
  margin: 0 0 1rem !important;
}

/* Sports grid */
.mtl-ss-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 14px !important;
}

/* Sport card */
.mtl-ss-card {
  background: var(--mantle-surface) !important;
  border: 2px solid rgba(255, 255, 255, .08) !important;
  border-radius: var(--mantle-radius-md) !important;
  padding: 1rem .75rem !important;
  text-align: center !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.mtl-ss-card:hover {
  border-color: var(--mantle-blue) !important;
  box-shadow: 0 4px 12px rgba(10, 118, 182, .25) !important;
}

.mtl-sport-icon {
  font-size: 2rem !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: .4rem !important;
}

.mtl-ss-name {
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-top: .35rem !important;
  line-height: 1.3 !important;
}

.mtl-ss-link {
  display: inline-block !important;
  margin-top: .5rem !important;
  font-size: .8rem !important;
  color: var(--mantle-light-blue) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.mtl-ss-link:hover,
.mtl-ss-link:focus-visible {
  color: var(--mantle-orange) !important;
  text-decoration: underline !important;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .school-page-hero {
    padding: 48px 16px 36px;
  }
}

@media (max-width: 768px) {
  .school-page-hero {
    padding: 40px 12px 28px;
  }

  .mtl-school-fact {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .mtl-school-fact-value {
    text-align: left !important;
  }

  .mtl-ss-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  }
}