/* ============================================
   LSAT City Pages — city-styles.css
   Extends homepage-styles.css for city-specific
   layout additions. Uses the same CSS variables
   defined by lsat-color-customizer.php.

   body.lsat-city-page is added alongside
   body.lsat-homepage so all homepage styles apply.
   This file only adds what is new or different.
   ============================================ */

/* ============================================
   HERO — compact height for city pages
   Homepage hero is 100vh; city pages have a
   shorter title so we scale it down to ~65vh.
   ============================================ */

body.lsat-city-page .lsat-hero {
  min-height: 65vh;
}

@media ( max-width: 768px ) {
  body.lsat-city-page .lsat-hero {
    min-height: auto;
  }
}

/* ============================================
   CITY CONTENT SECTION
   Unique introductory text section placed
   between the hero and the intro video.
   ============================================ */

.lsat-city-content {
  padding: var(--section-padding) 0;
  background-color: var(--bg-primary);
  border-top: 1px solid var(--section-divider);
  border-bottom: 1px solid var(--section-divider);
}

.lsat-city-content__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.lsat-city-content__paragraph {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

.lsat-city-content__paragraph:last-child {
  margin-bottom: 0;
}

/* ============================================
   CITY FAQ HEADING OVERRIDE
   The FAQ section on city pages shows a
   city-specific H2. Keep it consistent with
   the homepage FAQ heading style.
   ============================================ */

.lsat-city-page .lsat-faq__header .lsat-section__title .highlight {
  /* inherits --accent-ember from homepage-styles.css */
}

/* ============================================
   FOOTER CITY LINKS
   Small grey city links shown below the map
   in the footer of every page.
   ============================================ */

.lsat-footer__cities {
  padding: 28px 0 0;
  border-top: 1px solid rgba( 255, 255, 255, 0.07 );
  margin-top: 28px;
}

.lsat-footer__cities-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba( 255, 255, 255, 0.35 );
  margin: 0 0 12px;
}

.lsat-footer__cities-all {
  color: var( --accent-ember );
  text-decoration: none;
  opacity: 0.8;
}

.lsat-footer__cities-all:hover {
  opacity: 1;
}

.lsat-footer__cities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.lsat-footer__city-link {
  font-size: 0.72rem;
  color: rgba( 255, 255, 255, 0.3 );
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.lsat-footer__city-link:hover {
  color: rgba( 255, 255, 255, 0.65 );
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media ( max-width: 768px ) {
  .lsat-city-content {
    padding: calc( var(--section-padding) * 0.7 ) 0;
  }

  .lsat-city-content__paragraph {
    font-size: 1rem;
    text-align: left;
  }
}