/*
 * subdivisions.css — Mantle Realty Child Theme
 *
 * Purpose: styles for subdivision CPT single pages.
 * Loaded by functions.php on: is_singular('subdivision')
 * Depends on: tokens.css, base.css, components.css.
 *
 * Subdivision single pages display:
 *   - The Elementor-built CPT template (template-subdivision-cpt.json)
 *   - The subdivision-local-guide-snippet content (.mantle-local-guide)
 *   - School facts shortcodes (.mtl-school-facts, etc.) — also styled in schools.css
 *     but schools.css only loads on is_singular('schools'); duplicate the
 *     essential overrides here so they also apply on subdivision pages.
 *
 * Elementor template section classes (template-subdivision-cpt.json):
 *   .subdivision-hero    — hero banner with breadcrumb, heading, CTA nav buttons
 *   .subdivision-body    — main 2-col: post content + map/schools sidebar
 *   .subdivision-cta     — agent pitch / contact CTA strip
 *   .subdivision-footer  — embedded global footer template
 *
 * Contains:
 *   1. Template section layout   (.subdivision-*)
 *   2. Local Guide section       (.mantle-local-guide)
 *   3. School facts on subdivision pages (lightweight repeat of key overrides)
 *   4. Responsive
 */

/* ============================================================
   1. TEMPLATE SECTION LAYOUT
   Structural styles for each Elementor section in
   template-subdivision-cpt.json. Elementor handles
   colours/typography inline; these set spacing context.
   ============================================================ */

/* Hero: full-width banner with breadcrumb, subdivision heading, CTA nav */
.subdivision-hero {
  position: relative;
}

/* Body: 2-column content + sidebar (Elementor flex handles the columns) */
.subdivision-body {
  background-color: var(--mantle-bg, #0e0e0e);
}

/* CTA: centred agent pitch strip */
.subdivision-cta {
  background-color: var(--mantle-surface, #1a1a1a);
  text-align: center;
}

/* Footer: embedded global footer template */
.subdivision-footer {
  /* inherits footer styles from base.css / Elementor footer template */
}

/* ============================================================
   2. SUBDIVISION LOCAL GUIDE SECTION
   <section class="mantle-local-guide"> rendered by the
   subdivision-local-guide-snippet Code Snippet.
   ============================================================ */

.mantle-local-guide {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 20px;
  background-color: #151515;
  color: #cfcfcf;
}

.mantle-local-guide h2 {
  font-family: 'Gotham Black', 'Gotham', 'Montserrat', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 .85rem;
  line-height: 1.25;
}

/* First h2 gets a bit more top spacing to separate sections */
.mantle-local-guide h2 + p + h2,
.mantle-local-guide p + h2 {
  margin-top: 2rem;
}

.mantle-local-guide p {
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 1rem;
  color: #cfcfcf;
}

.mantle-local-guide p:last-child {
  margin-bottom: 0;
}

.mantle-local-guide a {
  color: var(--mantle-light-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.mantle-local-guide a:hover,
.mantle-local-guide a:focus-visible {
  color: var(--mantle-orange);
}

/* ============================================================
   3. SCHOOL FACTS ON SUBDIVISION PAGES
   The [mtl_schools], [mtl_feeder_schools], [mtl_school_facts]
   shortcodes can appear on subdivision singles.
   These are lighter versions of the full overrides in schools.css;
   they target only the colours/backgrounds needed to match the
   dark Mantle theme. Loaded separately because schools.css only
   loads on is_singular('schools').
   ============================================================ */

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

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

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

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

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

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

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

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

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

/* Schools list */
.mtl-schools {
  margin: 1.25rem 0;
}

.mtl-schools p {
  color: #cfcfcf;
  margin: .5rem 0;
}

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

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

/* Feeder schools */
.mtl-feeder-schools {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
}

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

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

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

/* ============================================================
   4. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .mantle-local-guide {
    padding: 40px 16px;
  }
}

@media (max-width: 767px) {
  .mantle-local-guide {
    padding: 32px 12px;
  }

  .mantle-local-guide h2 {
    font-size: 1.25rem;
  }

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

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