/* ============================================================================
   Arizona Language Center — site-wide layout override
   Loaded last on every page (just before </head>).

   Desktop and tablet (721px and up): content runs the full width of the
   screen with a side gutter that grows with the screen (--gutter), and
   sections read from the left.
   Phones (720px and below): untouched, so each page keeps its own centered
   mobile layout.

   Small components keep their own centering on purpose: button labels,
   calendar day boxes, payment option tiles, number/check badges.
   ============================================================================ */
@media (min-width: 721px) {

  /* 1. Full width ---------------------------------------------------------- */
  /* Side gutter is a percentage of the page width, same on both sides
     (6% = ~46px on a tablet, ~99px on a 1650px laptop). */
  :root { --gutter: 6%; }
  .wrap {
    max-width: none !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }
  .narrow,
  .wrap.narrow { max-width: none !important; }

  /* 2. Centered sections and headings read from the left ------------------- */
  .hero,
  .endcta .wrap, .secondary .wrap, .reviews .wrap,
  p.body.center, .st-center, .logistics-title,
  .tuition, .scarcity, .proof, .final, .assess, .feecard, .confirm,
  .cohort-full-banner, .logos, .indiv-strip, .district-strip,
  .consult-alt, .path-note, .msg-sub, .msg-pull,
  .programs h2, .programs .sub,
  .quote h2, .quote .q-sub, .quote .q-eyebrow,
  .review-h, .review-sub, .review-toggle-wrap,
  .result .level-eyebrow, .result .level-rank, .result .level-name,
  .result .level-tag, .result .level-dots, .result .confirm-note,
  .capture h3, .capture .csub, .capture-reassure,
  .cta-block, .ds-alt, .help, .gate-escape, .doubt-remover,
  .notready h2, .notready .nr-sub, .nr-fine, .nr-err, .nr-done,
  .done, .alt, .err, .nf-error, .testi,
  [style*="text-align:center"] {
    text-align: left !important;
  }

  /* 3. Blocks that were centered with auto margins sit on the left --------- */
  .hero h1, .hero .sub, .hero p,
  p.body.center, .tuition p.body,
  .reviews-embed, .reviews-h, .review-sub,
  .result .level-tag, .endcta p, .final p, .assess h2, .assess p,
  .secondary p, .quote h2, .quote .q-sub, .quote .formwrap,
  .msg-sub, .msg-pull, .hold-line, .ds-alt-sub, .done p, .cta-lead,
  .capture .csub, .path-note, .unlock-list, .native-form, .notready, .lede,
  .badge, .check-badge, .done .badge, .nr-done .nr-badge,
  [style*="margin:14px auto"] {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* 4. Button rows and card rows start on the left ------------------------- */
  .pay-select, .endcta .cta-row, .secondary .cta-row, .result-actions,
  .path, .logo-row, .flow {
    justify-content: flex-start !important;
  }
}

/* ============================================================================
   Sonoran Professional: shared component rules (all screen sizes).
   Colors themselves live in each page's :root.
   ============================================================================ */

/* Buttons: 6px radius (style guide: 6-8px) */
.btn, .nav-cta, .go, .submit, .nr-submit, .fee-btn, .cf-actions a,
.ds-actions a, .pricecard .btn, .tier .btn { border-radius: 6px !important; }

/* Primary buttons sitting on a terracotta band flip to Paper with Canyon
   text, so the button never disappears into the band */
.final .btn-accent, .assess .btn-accent, .cf-band .cf-primary, .logistics .btn-accent {
  background: var(--paper) !important; color: var(--canyon) !important;
}
.final .btn-accent:hover, .assess .btn-accent:hover, .cf-band .cf-primary:hover, .logistics .btn-accent:hover {
  background: var(--sand) !important;
}

/* Inline links in body copy: Turquoise (link depth for contrast), underlined */
main p a:not([class]), main li a:not([class]) {
  color: var(--link); text-decoration: underline; text-underline-offset: 2px;
}
main p a:not([class]):hover, main li a:not([class]):hover { color: var(--espresso); }

/* Hard color rule: no turquoise on terracotta. Links on terracotta and
   espresso bands use Paper instead */
.final a:not([class]), .endcta a:not([class]), .assess a:not([class]),
.cf-band a:not([class]), .logistics a:not([class]) { color: var(--paper) !important; }

/* Eyebrow labels: 0.08em tracking */
.eyebrow, .reviews-eyebrow { letter-spacing: .08em; }

/* Secondary buttons on neutral backgrounds: hover shifts to Turquoise
   (bands keep their own Paper hover, so turquoise never meets terracotta) */
main .btn-ghost:hover {
  background: transparent !important; border-color: var(--turquoise) !important; color: var(--link) !important;
}
.final .btn-ghost:hover, .endcta .btn-ghost:hover, .assess .btn-ghost:hover,
.cf-band .cf-secondary:hover, .ds-inner .btn-ghost:hover, .lm-card .btn-ghost:hover {
  background: rgba(250,246,239,.12) !important; border-color: var(--paper) !important; color: var(--paper) !important;
}

/* Forms: Paper inputs, Sand-darkened borders, Espresso text, Turquoise focus.
   :where() keeps this at zero specificity so page styles still win */
:where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea) {
  background-color: var(--paper); border-color: var(--line); color: var(--espresso);
}
:where(input, select, textarea):focus-visible { outline: 2px solid var(--turquoise); outline-offset: 1px; }

/* Contrast (WCAG AA): small Canyon text on Sand panels reads at 4.3:1,
   just under 4.5. Those labels use the deeper lead (5.8:1) */
.cohort-live, .mod .mlabel, .mod .mnum, .lrow .lnum, .level .lvl, .level .dots,
.path .tag, .tier .tname, .pprice, .fs legend, p.trust, .flow .node.mid,
.includes .h {
  color: var(--canyon-deep) !important;
}
/* Copper badges carry Espresso text (Paper on Copper is 2.1:1) */
.cf-chip { color: var(--espresso) !important; }
/* Small labels on terracotta use Paper, not Sand */
.cf-level { color: var(--paper) !important; }

/* Horizon rule above the footer: 2px Canyon line with one short Copper
   segment (style guide motif 2). One per section break, never stacked */
footer { position: relative; border-top: 2px solid var(--canyon) !important; }
footer::before {
  content: ""; position: absolute; top: -2px; left: 24px;
  width: 56px; height: 2px; background: var(--copper);
}
@media (min-width: 721px) { footer::before { left: var(--gutter); } }

/* Headings on light backgrounds are Espresso. The lead color shows up in
   the eyebrow label above them (style guide: "Espresso headings with a
   lead-color rule/detail"). Headings on terracotta and espresso bands keep
   their own Paper color */
.phase h3, .guarantee h2.st, .fitcard h3, .fit-col h3,
.col.before h3, .col.after h3, .policy h2 {
  color: var(--espresso) !important;
}

/* Data reads in Inter, not the serif: dates, times, schedule rows, step
   numbers, calendar days, table headers, form section titles. Fraunces
   stays for headings and display moments (titles, big prices, stats,
   pull quotes). Style guide: "Do not set body text in the serif." */
.logistics-value, .cf-meta .m .v, .intro-meta .m .mn, .detail .dval,
.pricelist .v, .ds-tier strong, .cohort-full-banner strong,
.priceside .mini strong, .prow .pprice, .cal-m, .cal-d b, .compare th,
.fs legend, .step .snum, .step .num, .pstep .pn, .lrow .lnum, .flow .node {
  font-family: "Inter", "Manrope", system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.compare th, .fs legend, .step .snum, .step .num, .pstep .pn, .lrow .lnum {
  font-weight: 600 !important;
}

/* Footer fine print: inline phone and privacy links (footers set links to
   block elsewhere) */
footer .fine a { display: inline !important; padding: 0 !important; color: inherit !important;
  text-decoration: underline; text-underline-offset: 2px; }
footer .fine a:hover { color: var(--paper) !important; }