/* site.css — the static SEO pages (hub, cities, school profiles, FAQ, for-schools)
   and the crawlable header/footer shared with the cinematic homepage.
   Plain CSS, no build step, no framework. Fast is the feature here. */

:root {
  --ink: #12203a;
  --ink-soft: #41506b;
  --ink-faint: #6b788f;
  --sky: #24528f;
  --sky-deep: #16305c;
  --sun: #d9852f;
  --paper: #ffffff;
  --paper-warm: #f7f4ef;
  --paper-cool: #eef2f7;
  --rule: #dde3ec;
  --measure: 42rem;
  --shell: 52rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------------------------------------------------------------- header */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.brand {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--sky-deep);
  text-decoration: none;
}

.brand span {
  color: var(--sun);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  margin-left: auto;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.9rem;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--sky);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ typography */
main {
  flex: 1 0 auto;
  padding: 2.5rem 0 4rem;
}

h1,
h2,
h3 {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sky-deep);
}

h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  margin: 0 0 0.6rem;
}

h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
  margin: 2.6rem 0 0.8rem;
}

h3 {
  font-size: 1.1rem;
  margin: 1.8rem 0 0.5rem;
}

p,
li {
  max-width: var(--measure);
}

a {
  color: var(--sky);
}

.lede {
  font-size: 1.18rem;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
}

.breadcrumbs {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.83rem;
  color: var(--ink-faint);
  margin: 0 0 1.4rem;
}

.breadcrumbs a {
  color: var(--ink-faint);
}

.breadcrumbs span {
  padding: 0 0.35rem;
}

/* ----------------------------------------------------------------- lists */
.plain-list {
  padding-left: 1.15rem;
}

.plain-list li {
  margin-bottom: 0.5rem;
}

.school-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 1rem;
}

.school-card {
  max-width: none;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
}

.school-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.06rem;
}

.school-card h3 a {
  text-decoration: none;
}

.school-card h3 a:hover {
  text-decoration: underline;
}

.school-card p {
  margin: 0.3rem 0;
  max-width: none;
}

.school-card__meta {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.school-card__meta a {
  color: var(--ink-faint);
}

.flag {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  background: var(--paper-warm);
  color: var(--sun);
  border: 1px solid #ecd9c0;
  vertical-align: 0.12em;
}

/* ----------------------------------------------------------------- facts */
.facts {
  margin: 1.5rem 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
}

.facts dt {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: 0 0 11rem;
}

.facts dd {
  margin: 0;
  flex: 1 1 14rem;
}

/* -------------------------------------------------------------- callouts */
.note {
  max-width: var(--measure);
  background: var(--paper-cool);
  border-left: 3px solid var(--sky);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
}

.note p {
  margin: 0;
}

.cta-block {
  max-width: var(--measure);
  margin: 2.5rem 0 0;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--sky-deep);
  color: #eaf1fa;
}

.cta-block h2 {
  color: #fff;
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}

.cta-block p {
  margin: 0 0 1rem;
  color: #cfdcee;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.btn {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.65rem 1.15rem;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--sun);
  color: #21150a;
}

.btn--ghost {
  border-color: #6d86ab;
  color: #eaf1fa;
}

.faq-list {
  margin: 1.5rem 0 0;
}

.faq-list h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.4rem;
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
  padding: 2.25rem 0 2.75rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.site-footer h2 {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}

.footer-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.9rem;
}

.footer-links li {
  margin-bottom: 0.3rem;
}

.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-honesty {
  max-width: 34rem;
}

.footer-honesty p {
  margin: 0 0 0.8rem;
  max-width: none;
}

.footer-legal {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.83rem;
  color: var(--ink-faint);
}

.footer-legal p {
  margin: 0;
  max-width: none;
}

/* -------------------------------------------------- homepage static core
   The pre-JS content the crawler (and a no-JS visitor) sees. main.js removes
   #seo-core once the cinematic experience has taken over the viewport. */
#seo-core {
  padding: 3.5rem 0 3rem;
}

#seo-core .eyebrow {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sun);
  margin: 0 0 0.6rem;
}

.home-header {
  position: relative;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================= directory
   /flight-schools/ and the 53 state pages. Same ink, same paper, same rules as
   the rest of the site — the directory is not allowed to look like a different
   product. Everything here degrades to readable text with CSS or JS switched
   off, because the accordion is the no-JS path. */

.search {
  max-width: none;
  margin: 2rem 0;
  padding: 1.35rem 1.4rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper-warm);
}

.search h2 {
  margin-top: 0;
}

.search__label {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.search__input {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}

.search__input:focus {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
}

.search__status {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0.75rem 0 0;
  min-height: 1.2em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.chip {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--sky);
  color: var(--sky);
}

.chip[aria-pressed='true'] {
  background: var(--sky-deep);
  border-color: var(--sky-deep);
  color: #fff;
}

.results-head {
  margin: 1.75rem 0 0.35rem;
  font-size: 1.05rem;
  color: var(--sky-deep);
}

.note-inline {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.88rem;
  color: var(--ink-faint);
  max-width: var(--measure);
  margin: 0.35rem 0 0;
}

.note--quiet {
  background: transparent;
  border-left-color: var(--rule);
  font-size: 0.9rem;
  color: var(--ink-faint);
  padding: 0.5rem 0 0.5rem 1rem;
  border-radius: 0;
}

/* ------------------------------------------------------------ the two tiers */
.badge {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: 0.14em;
}

.badge--verified {
  background: #e6efe6;
  border: 1px solid #cadfca;
  color: #2f6b3a;
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0.5rem 0;
}

.badges li {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--paper-cool);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}

.school-card--verified {
  border-left: 3px solid var(--sky);
}

.school-card--listed {
  background: var(--paper);
  border-style: dashed;
}

.school-card__cta {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.88rem;
  margin-top: 0.55rem;
}

/* ---------------------------------------------------------- accordion tree */
.tree {
  margin: 1.25rem 0 2rem;
}

.tree__country > summary,
.tree__state > summary {
  cursor: pointer;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.tree__country > summary {
  font-size: 1.15rem;
  color: var(--sky-deep);
  border-bottom-width: 2px;
}

.tree__name {
  font-weight: 600;
}

.tree__count {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.tree__states {
  list-style: none;
  padding: 0 0 0 0.25rem;
  margin: 0;
}

.tree__cities {
  list-style: none;
  padding: 0.5rem 0 0.9rem 1rem;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.2rem 1rem;
}

.tree__cities li {
  font-size: 0.94rem;
}

.tree__all {
  grid-column: 1 / -1;
  font-weight: 600;
  padding-bottom: 0.25rem;
}

.plain-list--columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.15rem 1rem;
  list-style: none;
  padding: 0;
}