/*
  Public application form, themed to match the club's marketing site
  (americanflightschools.com). Self-contained by design: no CDN, no framework, and the two brand
  webfonts served from this origin rather than from Google. The page collects a legal signature, so
  everything it needs comes from a host we control.

  Light-only, deliberately — see the note on the palette below.
*/

/* ---------- Brand fonts ---------- */

/*
  Montserrat and Inter, matching the marketing site. Both are variable fonts, so one file covers every
  weight the header and body ask for — Google serves the same file for each numeric weight it
  advertises, which is why there are two files here and not seven.

  font-display: swap keeps text visible while they load; the header is preloaded in _Layout.cshtml.
*/
@font-face {
    font-display: swap;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/montserrat-variable.woff2") format("woff2-variations");
}

@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/inter-variable.woff2") format("woff2-variations");
}

:root {
    /*
      The club's palette, lifted from the marketing site's theme stylesheet so this form reads as part
      of the same site. The first six are that site's own values, verbatim.
    */
    --brand-navy: #19114F;
    --brand-blue: #4669B2;
    --brand-blue-light: #8FA9D8;
    --brand-red: #A95656;
    --brand-hairline: #ECEEF2;
    --brand-hover: #F3F5F9;

    /* Added to the marketing site's palette with the search panel and the cart button's hover, which are
       the only things on either site wearing it. The member login used to, and is now brand blue. */
    --brand-green: #16855F;
    --brand-green-dark: #0F6B4C;

    /* The search panel's ground: a shade off --brand-footer, and the marketing theme's own value. */
    --brand-search: #141042;

    /* Footer, matching the marketing site's: deep navy behind the white logo. */
    --brand-footer: #0d0a2e;
    --brand-footer-text: #a7aecb;
    --brand-footer-dim: #7f85a3;

    --font-heading: "Montserrat",  "Segoe UI",  Roboto,  "Helvetica Neue",  Arial,  sans-serif;
    --font-body: "Inter",  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  Roboto,  "Helvetica Neue",  Arial,  sans-serif;

    /*
      There is no dark mode. The marketing site is light-only, and a form that flipped to a dark theme
      on half its visitors would not match the site it is part of — which is the whole point of these
      colours. Everything below therefore has exactly one value, and prefers-color-scheme is not
      consulted anywhere in this file.
    */
    --bg: #F8F9FB;
    --surface: #ffffff;
    --surface-alt: var(--brand-hover);
    --border: var(--brand-hairline);

    /* A step darker than the hairline: input edges need to read as edges against white. */
    --border-strong: #C3CCE0;

    --text: var(--brand-navy);

    /* The brand's light blue is too pale for body-sized secondary text on white; this is the same hue
       darkened to stay legible. */
    --text-muted: #6B7395;

    --accent: var(--brand-blue);
    --accent-text: #ffffff;
    --accent-soft: #EEF2FA;

    /* No error or success colour exists in the brand, so these are chosen to sit beside it: the red is
       kept clearly distinct from the --brand-red used by the header's call to action, which is a button
       and not a warning. */
    --danger: #B3261E;
    --danger-soft: #FDECEA;
    --success: #1C6B3C;
    --success-soft: #E7F5EC;

    --radius: 6px;
    --shadow: 0 1px 2px rgb(25 17 79 / 6%),  0 4px 12px rgb(25 17 79 / 5%);

    /* Ink the signature pad draws with, on screen and in the exported PNG alike — see signature-pad.js. */
    --signature-ink: #101820;

    /* Left bar marking a required input. Kept as its own variable so the width is stated once and
       the padding compensation below cannot drift from it. */
    --required-bar: 4px;
}

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

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

/*
  Matching the marketing site's own body rule: Inter, brand navy on #F8F9FB, line-height 1.5.

  A column at least as tall as the viewport, which is what holds the footer down: main takes the slack
  (see .site-main), so a short page — the confirmation, an error — puts the footer at the bottom of the
  screen instead of leaving a band of background under it. Not position: fixed, so a long form still
  scrolls the footer off the bottom as it always did. dvh rather than vh because on mobile vh is the
  viewport with the browser's chrome retracted, which is a screenful and a bit while it is showing.
*/

body {
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    font: 16px/1.5 var(--font-body);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Its link colours too. */

a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover { color: var(--brand-navy); }

img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Headings in Montserrat, as on the marketing site; body copy stays in Inter. */

.page-title, .section-title, .progress__label, .review-section__head h2 { font-family: var(--font-heading); }

.page-title { font-weight: 800; }

.wrap {
    margin: 0 auto;
    max-width: 62rem;
    padding: 0 1.25rem;
    width: 100%;
}

/* Read by a screen reader, absent from the page. Clipped rather than display:none, which would take it
   out of the accessibility tree along with everything else. */

.sr-only {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---------- Brand header ---------- */

/*
  A reproduction of the marketing site's header. Class names and metrics are taken from that site's
  theme stylesheet so the two can be diffed when either changes; see Views/Shared/Page/_SiteHeader.cshtml
  for the markup and for what deliberately differs.

  Sticky, as on the original — worth more here than there, because these pages are long forms and the
  header is the applicant's way back out.
*/

/* White, literally — the same declaration the marketing site uses. */

.afs-header {
    background: #ffffff;
    box-shadow: 0 1px 0 var(--brand-hairline);
    position: sticky;
    top: 0;
    z-index: 100;
}

.afs-navrow {
    align-items: center;
    display: flex;
    gap: 18px;
    margin: 0 auto;
    max-width: 1440px;
    padding: 14px 56px;
    position: relative;
}

.afs-logo {
    align-items: center;
    display: flex;
    flex-shrink: 0;
}

.afs-logo__link {
    align-items: center;
    display: flex;
}

/* Height-constrained, width auto: the source image is 649x365 and must not be distorted. */

.afs-logo__img {
    height: 74px;
    width: auto;
}

.afs-nav { margin-left: auto; }

.afs-menu {
    align-items: center;
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.afs-menu li { position: relative; }

.afs-menu > li { padding: 8px 0; }

.afs-menu > li > a {
    align-items: center;
    color: var(--brand-navy);
    display: inline-flex;
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 600;
    gap: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.afs-menu > li.menu-item-has-children > a::after {
    content: "\25BE";
    font-size: 11px;
    line-height: 1;
}

/* Submenus: hidden but laid out, so opening them costs no reflow and they can be transitioned. */

.afs-menu .sub-menu {
    background: #ffffff;
    border: 1px solid var(--brand-hairline);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgb(20 16 66 / 18%);
    left: 50%;
    list-style: none;
    margin: 14px 0 0;
    min-width: 260px;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translateX(-50%) translateY(8px);
    transition: opacity .16s ease, transform .16s ease;
    visibility: hidden;
    z-index: 40;
}

/* Bridges the gap between the trigger and the panel so the pointer can cross without closing it. */

.afs-menu .sub-menu::after {
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    right: 0;
    top: -24px;
}

.afs-menu .sub-menu::before {
    background: #ffffff;
    border-left: 1px solid var(--brand-hairline);
    border-top: 1px solid var(--brand-hairline);
    content: "";
    height: 14px;
    left: 50%;
    position: absolute;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
}

/* focus-within as well as hover, so the menu is reachable by keyboard. */

.afs-menu > li:hover > .sub-menu,
.afs-menu > li:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.afs-menu .sub-menu a {
    border-radius: 6px;
    color: var(--brand-navy);
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.afs-menu .sub-menu a:hover { background: var(--brand-hover); }

/*
  Levels three and four — the specialty courses, and the pages each club and airfield has. An entry that
  opens another panel says so with a chevron and gets it beside itself rather than below.
*/

.afs-menu .sub-menu li.menu-item-has-children > a {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.afs-menu .sub-menu li.menu-item-has-children > a::after {
    border-right: 2px solid;
    border-top: 2px solid;
    content: "";
    flex: 0 0 auto;
    height: 6px;
    opacity: .55;
    transform: rotate(45deg);
    width: 6px;
}

/*
  Opening to the LEFT, which is where this differs from the marketing site: theirs opens to the right and
  flips with script when a panel would run off the screen. The menu is right-aligned, so left is the side
  with room at every width the full row is shown at — and a rule that is always right beats one that is
  usually right and needs JavaScript to correct itself.
*/

.afs-menu .sub-menu .sub-menu {
    left: auto;
    margin: 0 8px 0 0;
    min-width: 240px;
    right: 100%;
    top: -10px;
    transform: translateX(-6px);
}

/* No arrow on a panel that opens sideways; the bridge moves to the gap it actually has to cross. */

.afs-menu .sub-menu .sub-menu::before { display: none; }

.afs-menu .sub-menu .sub-menu::after {
    height: auto;
    inset: 0 -16px 0 auto;
    width: 16px;
}

.afs-menu .sub-menu li:hover > .sub-menu,
.afs-menu .sub-menu li:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

/*
  Search, which searches the marketing site rather than this one. The toggle is a checkbox and a label,
  as the burger is, so the header still runs no JavaScript.
*/

.afs-search-item {
    align-items: center;
    display: flex;
}

.afs-search-toggle-input {
    height: 1px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
}

.afs-search-toggle {
    align-items: center;
    color: var(--brand-navy);
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.afs-search-toggle:hover { color: var(--brand-green); }

/* :has on the header rather than a sibling selector, because the panel is not the checkbox's sibling. */

.afs-search-panel {
    background: var(--brand-search);
    box-shadow: 0 18px 40px rgb(20 16 66 / 28%);
    display: none;
    left: 0;
    padding: 22px 20px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 90;
}

.afs-header:has(#afs-search-toggle:checked) .afs-search-panel { display: block; }

.afs-search-panel form {
    display: flex;
    gap: 10px;
    margin: 0 auto;
    max-width: 640px;
}

.afs-search-panel input[type="search"] {
    background: #ffffff;
    border: 0;
    border-radius: 6px;
    color: var(--brand-navy);
    flex: 1;
    font-family: var(--font-body);
    font-size: 16px;
    height: 52px;
    padding: 0 18px;
}

.afs-search-panel button {
    background: var(--brand-green);
    border: 0;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    height: 52px;
    letter-spacing: .5px;
    padding: 0 26px;
}

.afs-search-panel button:hover { background: var(--brand-green-dark); }

/*
  Member login: Aviatize's sign-in, not ours. Outlined rather than filled, so it reads as the second
  action beside the call to action rather than competing with it.

  Brand blue, matching the marketing site's own rule for it. It was green until that site restyled it.
*/

.afs-member-item {
    align-items: center;
    display: flex;
}

.afs-member-login {
    align-items: center;
    background: transparent;
    border: 2px solid var(--brand-blue);
    border-radius: 6px;
    color: var(--brand-blue);
    display: inline-flex;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: .4px;
    line-height: 1;
    margin-left: 6px;
    min-height: 44px;
    padding: 0 18px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
    white-space: nowrap;
}

/*
  Both rules are scoped through .afs-member-item to outrank `.afs-menu > li > a`, which paints every
  top-level menu link navy. Without it the label and its icon sat navy inside a blue outline; the icon
  follows the label because the svg's stroke is currentColor. The hover keeps a class more than the
  resting rule so it still wins.
*/

.afs-member-item > .afs-member-login { color: var(--brand-blue); }

/* Fills rather than darkening, which is why this one takes no brightness filter in the hover below. */

.afs-member-item > .afs-member-login:hover,
.afs-member-item > .afs-member-login:focus {
    background: var(--brand-blue);
    color: #fff;
}

.afs-member-login svg { flex: 0 0 auto; }

/*
  Cart: the marketing shop's basket, sitting between the search and the login as it does over there. A
  link and an icon only — this site cannot read that site's basket, so there is no count badge to style.
  42px square, matching the search toggle beside it.
*/

.afs-cart-item {
    align-items: center;
    display: flex;
}

.afs-cart-link {
    align-items: center;
    color: var(--brand-navy);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    text-decoration: none;
    width: 42px;
}

/* Scoped through .afs-cart-item for the same reason the member login is: `.afs-menu > li > a` wins otherwise. */

.afs-cart-item > .afs-cart-link:hover { color: var(--brand-green); }

.afs-cta {
    background: var(--brand-red);
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    padding: 13px 22px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    white-space: nowrap;
}

/*
  The marketing site now darkens a button on hover rather than brightening it, over a shallower shadow.
  It gives every button it has the same treatment, so .btn--primary below carries these values too.
*/

.afs-cta:hover {
    box-shadow: 0 10px 22px rgb(20 16 66 / 18%);
    color: #fff;
    filter: brightness(.93);
    transform: translateY(-2px);
}

.afs-cta:active {
    box-shadow: 0 4px 10px rgb(20 16 66 / 14%);
    transform: translateY(0);
}

.afs-member-item > .afs-member-login:hover,
.afs-member-item > .afs-member-login:focus {
    box-shadow: 0 10px 22px rgb(20 16 66 / 18%);
    transform: translateY(-2px);
}

.afs-member-item > .afs-member-login:active {
    box-shadow: 0 4px 10px rgb(20 16 66 / 14%);
    transform: translateY(0);
}

/* The colour change carries the hover on its own where motion is unwelcome. */

@media (prefers-reduced-motion: reduce) {
    .afs-cta:hover,
    .afs-cta:active,
    .afs-member-item > .afs-member-login:hover,
    .afs-member-item > .afs-member-login:focus,
    .afs-member-item > .afs-member-login:active {
        box-shadow: none;
        transform: none;
    }
}

.afs-gradient {
    background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-blue) 55%, var(--brand-blue-light) 100%);
    height: 3px;
}

/* Mobile drawer, toggled by a checkbox so the header needs no JavaScript at all. */

/* left:0 rather than a bare position:absolute: at its static position the box sits at the end of the
   row, where a pixel past the padding is a pixel of horizontal scrollbar. */

.afs-nav-toggle-input {
    height: 1px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
}

.afs-burger {
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 5px;
    margin-left: 6px;
    padding: 6px;
}

.afs-burger span {
    background: var(--brand-navy);
    display: block;
    height: 2px;
    transition: transform .2s ease, opacity .2s ease;
    width: 26px;
}

#afs-nav-toggle:checked ~ .afs-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

#afs-nav-toggle:checked ~ .afs-burger span:nth-child(2) { opacity: 0; }

#afs-nav-toggle:checked ~ .afs-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The last of the room, given up by the buttons before the drawer takes over below. Held all the way to
   1560 rather than 1440, so the reduced size is already in force at every width that still shows the row. */

@media (max-width: 1560px) {
    .afs-member-login, .afs-cta {
        font-size: 12.5px;
        letter-spacing: .3px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .afs-member-login { gap: 6px; }
}

/*
  1440, not the marketing site's 1024: this row carries the same menu plus a cart and a login button, and
  measured against its own content it needs about 1435px. Below that on the marketing site the call to
  action hangs off the right edge and the page picks up a horizontal scrollbar. The drawer starts early
  enough here that neither can happen — a form page that scrolls sideways is worse than a burger menu at
  a width where a laptop would still show the full row.

  Re-measure this number when anything joins or leaves the row. It was 1400 until the cart button arrived.
*/

@media (max-width: 1440px) {
    .afs-navrow { padding: 14px 20px; }

    .afs-logo__img { height: 56px; }

    .afs-burger { display: flex; }

    .afs-nav {
        background: #ffffff;
        border-top: 1px solid var(--brand-hairline);
        box-shadow: 0 18px 44px rgb(20 16 66 / 14%);
        display: none;
        left: 0;
        margin-left: 0;
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
    }

    /* :has on the header rather than a sibling selector, because the nav precedes the checkbox. */
    .afs-header:has(#afs-nav-toggle:checked) .afs-nav { display: block; }

    .afs-menu {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 8px 16px 16px;
    }

    .afs-menu > li {
        border-bottom: 1px solid var(--brand-hairline);
        padding: 8px 2px;
    }

    .afs-menu > li > a { font-size: 16px; }

    /* Submenus become plain nested lists: there is no hover on a touch screen. */
    .afs-menu .sub-menu {
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 4px 0 4px 6px;
        min-width: auto;
        opacity: 1;
        padding: 0 0 4px;
        pointer-events: auto;
        position: static;
        transform: none;
        visibility: visible;
    }

    .afs-menu .sub-menu::before, .afs-menu .sub-menu::after { display: none; }

    /* Levels three and four indent again rather than flying out sideways, which needs a pointer. */
    .afs-menu .sub-menu .sub-menu {
        left: auto;
        margin: 2px 0 2px 12px;
        top: auto;
        transform: none;
    }

    .afs-menu .sub-menu li.menu-item-has-children > a::after { display: none; }

    /*
      Hidden, as the marketing site hides it at its own drawer breakpoint: the row here is the logo, the
      cart and the burger, and the call to action was the thing crowding them. Member login stays because
      it lives inside the menu and so folds into the drawer instead of fighting for the row.
    */
    .afs-cta { display: none; }

    /* Both buttons go full width in the drawer, and the login gets its word back. */
    .afs-member-item, .afs-search-item { width: 100%; }

    .afs-member-login {
        justify-content: center;
        margin: 10px 0 4px;
        min-height: 48px;
        width: 100%;
    }

    .afs-member-login span { display: inline; }
}

@media (max-width: 600px) {
    .afs-navrow {
        gap: 10px;
        padding: 12px 16px;
    }

    .afs-logo__img { height: 46px; }
}

/* ---------- Footer ---------- */

/* flex-grow takes the slack in the column above, which is what puts the footer on the fold when the
   content is shorter than the screen. flex-basis stays auto so a tall page is laid out as before. */

.site-main {
    flex: 1 0 auto;
    padding-block: 2rem 3rem;
}

/*
  The marketing site's footer, reproduced: deep navy, white logo, muted blue-grey text, and its four
  columns. Class names and metrics are that theme's own so the two can be diffed when either changes —
  see Views/Shared/Layouts/_Layout.cshtml for the markup.
*/

.afs-footer {
    background: var(--brand-footer);
    padding: 64px 56px 32px;
}

.afs-fgrid {
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    display: grid;
    gap: 40px;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    margin: 0 auto;
    max-width: 1180px;
    padding-bottom: 48px;
}

/* The white logo variant, which is what this navy was designed to sit behind. */

.afs-fbrand img {
    height: 104px;
    margin-bottom: 24px;
    width: auto;
}

.afs-fbrand p {
    color: var(--brand-footer-text);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 300px;
}

.afs-fhead {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 18px;
}

.afs-fcol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.afs-fcol a {
    color: var(--brand-footer-text);
    font-family: var(--font-body);
    font-size: 14.5px;
    text-decoration: none;
}

.afs-fcol a:hover { color: #ffffff; }

.afs-social {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.afs-social a {
    align-items: center;
    color: var(--brand-footer-text);
    display: flex;
    font-size: 14.5px;
    gap: 11px;
    text-decoration: none;
}

.afs-social a:hover { color: #ffffff; }

.afs-social .ico {
    align-items: center;
    background: rgb(255 255 255 / 8%);
    border-radius: 50%;
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

/* currentColor on the glyph, so the icon lifts to white with the label it sits beside. */

.afs-social .ico svg { fill: currentColor; }

.afs-fbottom {
    align-items: center;
    color: var(--brand-footer-dim);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    margin: 24px auto 0;
    max-width: 1180px;
}

.afs-fbottom .afs-legal {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.afs-fbottom .afs-legal a {
    color: var(--brand-footer-dim);
    text-decoration: none;
}

.afs-fbottom .afs-legal a:hover { color: #ffffff; }

.afs-footer .afs-cta {
    font-size: 13px;
    padding: 12px 20px;
}

/* The marketing site's own footer breakpoint. It is not the header's: four columns of links fit long
   after the nav row stops fitting, and the two have no reason to move together. */

@media (max-width: 1024px) {
    .afs-footer { padding: 48px 28px 32px; }

    .afs-fgrid {
        gap: 34px;
        grid-template-columns: 1fr;
    }

    .afs-fbrand p { max-width: none; }

    .afs-fbottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
}

@media (max-width: 600px) {
    .afs-footer { padding: 40px 20px 28px; }

    .afs-fbrand img { height: 84px; }

    .afs-fbottom .afs-legal {
        flex-wrap: wrap;
        gap: 12px 20px;
    }
}

/* ---------- Cards and headings ---------- */

/* 10px radius, matching the header's submenu panel — the only card-like surface the brand defines. */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 1.75rem;
}

.card + .card { margin-top: 1.25rem; }

/*
  The root's index of forms. auto-fit rather than a fixed three, so adding a fourth form is a card in
  the markup and nothing here; the cards drop to two and then to one as the viewport narrows.
*/

.form-cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

/*
  Column layout with the lede pushed apart from the button, so cards of unequal text still line their
  buttons up along the bottom instead of leaving them wherever the copy happened to end.
*/

.form-card {
    display: flex;
    flex-direction: column;
}

/* The grid's own gap does the spacing. Without this the stacking margin every .card carries applies
   to the second and third card as well, dropping them 1.25rem below the first for no reason. */

.form-cards .card + .card { margin-top: 0; }

.form-card__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 .4rem;
}

.form-card__lede {
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

/* margin-top:auto is what lines the buttons up along the bottom of unequal cards; align-self centres
   the button across the card and keeps it from stretching to the full width as a flex child otherwise
   would.

   min-width makes all three cards' buttons one size instead of each one shrinking to its own label:
   "Sign Up" is a third the length of "Apply for membership", and three buttons of three widths in a
   row of matching cards reads as an accident. CSS cannot measure the widest of the three, so the
   width is stated as the character count of the longest label - keep it in step if a label changes.
   The min() caps it at the card's own width, so a card narrower than that shrinks its button rather
   than overflowing it - all three are still the same size, just the card's size instead.
   The buttons are all one line of the same font at the same padding, so their heights already match. */

.form-card__go {
    align-self: center;
    margin-top: auto;
    min-width: min(22ch, 100%);
}

.page-title {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 .4rem;
}

.page-lede {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.section-title {
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 2rem 0 .85rem;
    padding-bottom: .4rem;
}

.section-title:first-child { margin-top: 0; }

/* ---------- Progress ---------- */

.progress { margin-bottom: 1.5rem; }

.progress__label {
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem;
    gap: .5rem 1rem;
    justify-content: space-between;
    letter-spacing: .04em;
    margin: 0 0 .6rem;
    text-transform: uppercase;
}

.progress__reference {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}

.progress__steps {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.progress__step {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex: 1 1 6rem;
    font-size: .74rem;
    gap: .45rem;
    min-width: 0;
    padding: .45rem .6rem;
}

.progress__number {
    background: var(--surface-alt);
    border-radius: 50%;
    color: var(--text-muted);
    display: grid;
    flex: none;
    font-size: .68rem;
    font-weight: 700;
    height: 1.3rem;
    place-items: center;
    width: 1.3rem;
}

.progress__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress__step.is-current {
    background: var(--accent-soft);
    border-color: var(--accent);
    font-weight: 600;
}

.progress__step.is-current .progress__number {
    background: var(--accent);
    color: var(--accent-text);
}

.progress__step.is-done .progress__number {
    background: var(--success-soft);
    color: var(--success);
}

.progress__step.is-todo { color: var(--text-muted); }

/* ---------- Fields ---------- */

.field-grid {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.field-grid--wide { grid-template-columns: 1fr; }

.field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.field__label {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
}

.field__hint {
    color: var(--text-muted);
    font-size: .74rem;
}

.field__error {
    color: var(--danger);
    font-size: .78rem;
}

.field__error:empty { display: none; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="file"], select, textarea {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    padding: .5rem .6rem;
    width: 100%;
}

/*
  File inputs get the same box as every other field so the required bar below lines up against
  something. The browser's own button inside them is restyled to match .btn--ghost, because its default
  is the one control on the page that still looks like the operating system rather than the site.
*/

input[type="file"] {
    cursor: pointer;
    padding: .4rem .5rem;
}

input[type="file"]::file-selector-button {
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    margin-right: .7rem;
    padding: .3rem .7rem;
}

input[type="file"]::file-selector-button:hover { border-color: var(--accent); }

/*
  Required fields are marked by an accent bar down the left edge rather than an asterisk in the label.

  Selected on [data-val-required], which ASP.NET's input tag helper emits for any property carrying
  [Required]. That means the mark is derived from the view model rather than hand-applied per input,
  so a field cannot end up looking optional because somebody forgot to add a class to its markup.

  The padding is reduced by the extra border width so text in a required field lines up with text in
  an optional one sitting next to it in the same grid row.
*/

input[data-val-required]:not([type="radio"]):not([type="checkbox"]),
input[required]:not([type="radio"]):not([type="checkbox"]),
select[data-val-required], select[required],
textarea[data-val-required], textarea[required] {
    border-left: var(--required-bar) solid var(--accent);
    padding-left: calc(.6rem - (var(--required-bar) - 1px));
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, canvas:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

input.input-invalid, select.input-invalid { border-color: var(--danger); }

/* Checkbox / radio lists ------------------------------------------------- */

.check-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.check-list--columns {
    display: grid;
    gap: .5rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.check {
    align-items: flex-start;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    gap: .6rem;
    padding: .55rem .7rem;
}

.check:hover { border-color: var(--border-strong); }

.check input {
    accent-color: var(--accent);
    flex: none;
    height: 1.05rem;
    margin: .15rem 0 0;
    width: 1.05rem;
}

.check__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.check__title { font-size: .92rem; }

.check__note {
    color: var(--text-muted);
    font-size: .76rem;
}

.check--nested { margin-left: 1.75rem; }

/*
    A list with nothing to tick: the documents to bring in, listed on the confirmation page. Same shape
    as the input lists above so it reads as the same kind of thing, but marked with an arrow rather than
    a box — a box invites ticking, and what has actually been handed over is established at the club,
    not on this page.
*/

.check--static { cursor: default; }

.check--static:hover { border-color: var(--border); }

/* The glyph is in the stylesheet because it is decoration: the span carries aria-hidden, and a screen
   reader is read the item's own text without a stray ">" in front of it. */

.check__arrow {
    color: var(--accent);
    flex: none;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.4;
    margin: .1rem 0 0;
    text-align: center;
    width: 1.05rem;
}

.check__arrow::before { content: ">"; }

.check--choice {
    background: var(--surface);
    padding: .9rem 1rem;
}

.check--choice .check__title { font-weight: 600; }

/* ---------- Reveal (slide-down) ---------- */

/*
  A block that slides open when an earlier answer makes it relevant.

  The open state is the DEFAULT here (height auto, no class), and .is-collapsed is what closes it. That
  way the server renders the closed class only when it means it, and a browser with scripting disabled
  shows the block rather than hiding content it can never reveal.

  The height itself is animated from a pixel value set by form-behaviour.js, not from a CSS keyword:
  height cannot transition to or from `auto`, and the grid 0fr/1fr alternative proved unreliable when
  the content's size changes in the same frame as the class does — which is exactly what happens here,
  since choosing an option both opens the block and swaps which items inside it are shown.

  visibility, not just overflow, is what takes collapsed content out of the tab order — otherwise a
  keyboard user tabs into fields that are not on screen.
*/

.reveal {
    overflow: hidden;
    transition: height .28s ease;
}

.reveal.is-collapsed {
    height: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; }
}

/* ---------- Buttons ---------- */

.btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    gap: .4rem;
    justify-content: center;
    padding: .6rem 1.2rem;
    text-decoration: none;
}

/*
  Buttons take the header CTA's shape — Montserrat 700, the same lift on hover — because that is the
  only button the marketing site has and it is what an applicant will have just clicked to get here.
  Primary actions on the form use the brand blue rather than the CTA's red: red is the marketing site's
  "book a flight" colour, and borrowing it for "Continue" would make every page look like an advert.
*/

.btn {
    font-family: var(--font-heading);
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-text);
}

/*
  color is restated on hover because a .btn--primary is sometimes an <a> - "Start my application" and
  the wizard's Back link - and the global `a:hover` rule above would otherwise repaint its label navy
  against the blue fill, so the same button looked different depending on whether it submitted a form
  or followed a link. .afs-cta:hover does the same for the header's call to action.
*/

.btn--primary:hover,
.btn--primary:focus {
    box-shadow: 0 10px 22px rgb(20 16 66 / 18%);
    color: var(--accent-text);
    filter: brightness(.93);
    transform: translateY(-2px);
}

.btn--primary:active {
    box-shadow: 0 4px 10px rgb(20 16 66 / 14%);
    transform: translateY(0);
}

/* As above: the fill change is enough on its own. */

@media (prefers-reduced-motion: reduce) {
    .btn--primary:hover,
    .btn--primary:focus,
    .btn--primary:active {
        box-shadow: none;
        transform: none;
    }
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--ghost:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.btn--small {
    font-size: .82rem;
    font-weight: 500;
    padding: .35rem .7rem;
}

.btn[disabled] {
    cursor: not-allowed;
    opacity: .55;
}

.step-nav {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
}

/* ---------- Messages ---------- */

.alert {
    border: 1px solid;
    border-radius: var(--radius);
    font-size: .9rem;
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
}

.alert--error {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.alert--success {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

/* Neither a failure nor a confirmation: what the deactivation form says the Submit button is going to do.
   The accent, so it reads as part of the form rather than as something that has gone wrong. */

.alert--notice {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
}

.alert ul {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
}

/* ---------- Legal text ---------- */

.legal {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .86rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
}

.legal h3 {
    font-size: .92rem;
    margin: 1.2rem 0 .4rem;
}

.legal h3:first-child { margin-top: 0; }

.legal p { margin: 0 0 .7rem; }

.legal ol, .legal ul {
    margin: 0 0 .7rem;
    padding-left: 1.4rem;
}

.legal li { margin-bottom: .45rem; }

.legal--tall { max-height: 34rem; }

/* ---------- Signature pad ---------- */

.signature {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.signature__frame {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    /* Fixed height so the captured PNG has a predictable aspect ratio in the generated form. */
    height: 9rem;
    overflow: hidden;
    position: relative;
}

.signature__canvas {
    cursor: crosshair;
    display: block;
    height: 100%;
    touch-action: none;
    width: 100%;
}

.signature__baseline {
    border-bottom: 1px dashed var(--border);
    bottom: 2.1rem;
    left: 1.5rem;
    pointer-events: none;
    position: absolute;
    right: 1.5rem;
}

.signature__hint {
    bottom: .6rem;
    color: var(--text-muted);
    font-size: .76rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: center;
}

.signature__frame.has-signature .signature__hint,
.signature__frame.has-signature .signature__baseline { display: none; }

.signature__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.signature__signed {
    color: var(--text-muted);
    font-size: .76rem;
}

.signature__image {
    background: #ffffff;
    border-bottom: 1px solid var(--border-strong);
    height: auto;
    max-width: 100%;
    padding: .35rem .5rem;
}

/* ---------- Review ---------- */

/* position: relative for the Edit link, which is laid over the summary row rather than inside it —
   see the note in Review.cshtml. */

.review-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
}

/*
  The whole header band is the summary, so the click target is the width of the section rather than the
  few words of the heading. padding-right leaves the Edit link its corner.
*/

.review-section__head {
    align-items: center;
    background: var(--surface-alt);
    cursor: pointer;
    display: flex;
    gap: .5rem;
    /* Both lines are needed to drop the native marker: the standard property, and Safari's own. */
    list-style: none;
    padding: .75rem 4.5rem .75rem 1rem;

    user-select: none;
}

.review-section__head::-webkit-details-marker { display: none; }

/* Its own marker instead, rotating a quarter turn when the section opens. */

.review-section__head::before {
    color: var(--text-muted);
    content: "\25B8";
    flex-shrink: 0;
    font-size: .8rem;
    line-height: 1;
    transition: transform .15s ease;
}

.review-section__panel[open] > .review-section__head::before { transform: rotate(90deg); }

/* The band reads as a header only while there is something under it. */

.review-section__panel[open] > .review-section__head { border-bottom: 1px solid var(--border); }

.review-section__head h2 {
    font-size: .98rem;
    margin: 0;
}

.review-section__edit {
    font-size: .9rem;
    position: absolute;
    right: 1rem;
    top: .75rem;
}

@media (prefers-reduced-motion: reduce) {
    .review-section__head::before { transition: none; }
}

.review-list {
    display: grid;
    gap: .1rem .75rem;
    grid-template-columns: minmax(9rem, 15rem) 1fr;
    margin: 0;
    padding: 1rem;
}

.review-list dt {
    color: var(--text-muted);
    font-size: .8rem;
    padding-block: .3rem;
}

.review-list dd {
    font-size: .9rem;
    margin: 0;
    overflow-wrap: anywhere;
    padding-block: .3rem;
}

.review-list dd.is-blank {
    color: var(--text-muted);
    font-style: italic;
}

.review-signature { padding: 0 1rem 1rem; }

@media (max-width: 34rem) {
    .review-list { grid-template-columns: 1fr; }

    .review-list dt { padding-bottom: 0; }
}

/* ---------- Fee options ---------- */

.fee-amount {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.total-line {
    border-top: 1px solid var(--border);
    display: flex;
    font-weight: 700;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: .85rem;
}

/* ---------- Home ---------- */

.checklist {
    margin: 0;
    padding-left: 1.25rem;
}

.checklist li { margin-bottom: .4rem; }

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