/* ═══════════════════════════════════════════════════════════════════════════
   Gaonhae — COMPONENTS
   Shared, reusable blocks. Requires tokens.css + base.css.

   RULE: no literal colours, sizes or spaces in this file — only var(--…).
   Anything a second page might need belongs here, not in a page's <style>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Site nav (templates/includes/site_nav.html) ─────────────────────────────
   THE navbar for every page. `position: fixed`, not sticky, because the homepage
   and branch heroes are full-bleed `100vh` blocks designed to sit UNDERNEATH the
   nav — sticky would occupy layout space and push them down. Pages whose first
   block is not such a hero offset themselves with `.page-hero` padding below.   */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border-strong);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    /* min-width: 0 so the flex children may shrink; without it the logo's intrinsic
       width keeps the row wider than a 320px viewport. */
    min-width: 0;
}

/* Actions column: CTA + hamburger. Never collapses — the CTA and the way to reach
   the menu both stay on screen at every width. */
.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-shrink: 0;
}

.site-nav__toggle {
    display: none;
    /* shown by the responsive block below */
    background: none;
    border: 0;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--brand-blue-ink);
    line-height: 0;
}

.site-nav__toggle .site-nav__icon-close,
.site-nav__toggle[aria-expanded="true"] .site-nav__icon-open {
    display: none;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__icon-close {
    display: block;
}

.site-nav__wordmark {
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-heavy);
    color: var(--brand-blue);
    /* No `white-space: nowrap` — that is what pushed the nav past a 320px
       viewport and made the whole page scroll sideways. */
    min-width: 0;
}

.site-nav__logo img {
    height: 44px;
    width: auto;
    flex-shrink: 0;
}

.site-nav__wordmark b {
    color: var(--brand-red);
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}

/* `:not(.btn)` is load-bearing. Without it this rule (specificity 0,1,1) beats `.btn--primary`
   (0,1,0), so the nav CTA rendered --ink-muted text on its own --brand-blue-ink fill: 1.07:1,
   an effectively invisible "Book a free trial" button on /about and /contact. Same guard the
   `.page-section a:not(.btn)` rule below already uses. */
.site-nav__links a:not(.btn) {
    color: var(--ink-muted);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
}

.site-nav__links a:not(.btn):hover {
    color: var(--brand-blue-ink);
}

/* ── Buttons ───────────────────────────────────────────────────────────────  */
.btn {
    display: inline-block;
    font-weight: var(--weight-bold);
    text-align: center;
    border: 0;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn--primary {
    background: var(--brand-blue);
    color: var(--on-dark);
}

.btn--primary:hover {
    filter: brightness(1.1);
}

.btn--on-dark {
    background: var(--surface);
    color: var(--brand-blue-ink);
    padding: var(--space-4) var(--space-8);
    font-weight: var(--weight-heavy);
}

.btn--wa {
    background: var(--whatsapp-green);
    color: var(--on-dark);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.btn--quiet {
    background: var(--surface-alt);
    color: var(--brand-blue-ink);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

/* ── Page hero (inverted band under the nav) ───────────────────────────────  */
.page-hero {
    background: var(--brand-blue-deep);
    color: var(--on-dark);
    padding: var(--space-18) 0 var(--space-16);
}

.page-hero h1 {
    font-size: var(--text-h1);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-3);
}

.page-hero p {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    max-width: 62ch;
    color: var(--on-dark-muted);
}

/* ── Sections ──────────────────────────────────────────────────────────────  */
.page-section {
    padding: var(--space-16) 0;
}

.page-section--alt {
    background: var(--surface-alt);
}

.page-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-black);
    color: var(--ink-strong);
    margin-bottom: var(--space-3);
}

.page-section p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--ink-muted);
    max-width: var(--measure);
    margin-bottom: var(--space-4);
}

.page-section a:not(.btn) {
    color: var(--brand-blue-ink);
    font-weight: var(--weight-medium);
}

.page-section a:not(.btn):hover {
    text-decoration: underline;
}

/* ── Card grid ─────────────────────────────────────────────────────────────
   `minmax(0, …)` on the min side is deliberate: `minmax(240px, 1fr)` refuses to
   go below 240px, which overflows a 320px viewport once container padding is
   taken off. `min()` lets the track shrink on very small screens.             */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.card-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6);
    min-width: 0;
}

.card h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-heavy);
    color: var(--ink-strong);
    margin-bottom: var(--space-2);
}

.card p {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin: 0;
}

.card--link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card--link:hover,
.card--link:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.card__meta {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--ink-muted);
}

.card__cta {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--brand-blue-ink);
    margin-top: var(--space-1);
}

.card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* ── Credential list (masters, etc.) ───────────────────────────────────────  */
.cred-list {
    padding-left: var(--space-5);
    list-style: disc;
}

.cred-list li {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--ink-muted);
    margin-bottom: var(--space-1);
}

.card__eyebrow {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--brand-blue-ink);
    margin-bottom: var(--space-3);
}

/* ── Closing CTA band ──────────────────────────────────────────────────────  */
.page-cta {
    background: var(--brand-blue-deep);
    color: var(--on-dark);
    padding: var(--space-14) 0;
    text-align: center;
}

.page-cta h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-black);
    margin-bottom: var(--space-3);
}

.page-cta p {
    color: var(--on-dark-muted);
    margin-bottom: var(--space-6);
}

/* ── Site footer (templates/includes/site_footer.html) ─────────────────────
   Deliberately the same `.footer` / `.footer-links` / `.copyright` class names
   and the same appearance as www/style.css, so the shared include renders
   identically on pages that load style.css (homepage, branch) and on pages that
   only load the theme sheets (about, contact). Values come from tokens, but that alone did NOT
   stop them drifting: style.css moved to --brand-blue-deep and this copy stayed on --brand-blue,
   which left /about and /contact with an 11-failure footer (white on 3.91:1) while the homepage
   footer passed. Change both, or neither.                                       */
.footer {
    background-color: var(--brand-blue-deep);
    color: var(--on-dark);
    padding: var(--space-14) 0 var(--space-5);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
    padding: 0 var(--space-5);
}

.footer-links a {
    color: var(--on-dark);
    font-weight: var(--weight-medium);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--brand-gold);
}

.copyright {
    text-align: center;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--on-dark-muted);
    font-size: var(--text-sm);
}

/* ── Responsive ────────────────────────────────────────────────────────────  */
@media (max-width: 768px) {
    .site-nav__links a:not(.btn) {
        display: none;
    }
}

@media (max-width: 420px) {

    /* Below this the logo image plus the CTA is all that fits on one row. */
    .site-nav__wordmark {
        display: none;
    }

    .site-nav__links .btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
}