/* ─────────────────────────────────────────────────────────────────
   Albatross Music — brand tokens
   Colours sampled directly from the live site screenshots
   (albatrossmusic.com.au). Use these for the student/parent front end
   so it sits seamlessly alongside the marketing site.
   ───────────────────────────────────────────────────────────────── */

:root {
    /* Backgrounds — darkest to lightest */
    --am-ink:          #040d1a;  /* page background, footer */
    --am-navy-deep:    #061226;  /* alternating section band */
    --am-navy:         #08162e;  /* cards / panels */
    --am-navy-raised:  #0d2755;  /* hero gradient base */
    --am-navy-hero:    #0e254c;  /* hero mid-tone */

    /* Gold — primary call to action */
    --am-gold:         #c8a84b;  /* button fill, active nav */
    --am-gold-bright:  #e3c468;  /* rules, eyebrow text, hover */
    --am-gold-mid:     #d8b85c;

    /* Accent blue — italic display headings, links */
    --am-blue:         #8ab4f8;
    --am-blue-soft:    #7296d2;

    /* Text */
    --am-white:        #ffffff;
    --am-text:         #dadcdf;  /* body copy on dark */
    --am-muted:        rgba(218,220,223,.62);
    --am-line:         rgba(138,180,248,.16);

    /* Status (kept legible against the dark ground) */
    --am-green:        #4ade80;
    --am-red:          #f87171;
    --am-amber:        #fbbf24;
}

/* ── Base ─────────────────────────────────────────────────────── */
body.am {
    margin: 0;
    background: var(--am-ink);
    color: var(--am-text);
    font: 16px/1.65 "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.am a { color: var(--am-blue); text-decoration: none; }
.am a:hover { color: var(--am-gold-bright); }

/* Display headings: upright white line + italic blue line, as on the site. */
.am h1, .am h2 { font-weight: 500; color: var(--am-white); letter-spacing: -.5px; margin: 0 0 18px; }
.am h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.08; }
.am h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.am .accent { display: block; font-style: italic; color: var(--am-blue); font-weight: 300; }

/* Small gold label above a heading. */
.am .eyebrow {
    font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--am-gold-bright); margin: 0 0 14px;
}

/* Left gold rule used beside hero copy. */
.am .rule-left { border-left: 2px solid var(--am-gold-bright); padding-left: 26px; }

/* ── Layout ───────────────────────────────────────────────────── */
.am .band        { padding: 92px 24px; }
.am .band-deep   { background: var(--am-navy-deep); }
.am .band-hero   { background: linear-gradient(150deg, var(--am-navy-raised) 0%, var(--am-navy-hero) 45%, var(--am-ink) 100%); }
.am .container   { max-width: 1180px; margin: 0 auto; }
.am .grid        { display: grid; gap: 22px; }
.am .grid-3      { grid-template-columns: repeat(3, 1fr); }
.am .grid-2      { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .am .grid-3, .am .grid-2 { grid-template-columns: 1fr; } }

/* ── Components ───────────────────────────────────────────────── */
.am .panel {
    background: var(--am-navy);
    border: 1px solid var(--am-line);
    padding: 28px;
}
.am .panel-num { font-size: 40px; font-weight: 300; color: rgba(255,255,255,.10); line-height: 1; }
.am .panel h3 { color: var(--am-white); font-size: 18px; font-weight: 500; margin: 10px 0 8px; }
.am .panel p  { color: var(--am-muted); font-size: 14.5px; font-style: italic; margin: 0; }

.am .btn {
    display: inline-block; padding: 14px 30px; border: 0; cursor: pointer;
    font: inherit; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
    background: var(--am-gold); color: var(--am-ink); transition: background .18s;
}
.am .btn:hover { background: var(--am-gold-bright); color: var(--am-ink); }
.am .btn-ghost {
    background: transparent; color: var(--am-gold-bright);
    border: 1px solid var(--am-gold);
}
.am .btn-ghost:hover { background: rgba(200,168,75,.12); color: var(--am-gold-bright); }

/* Forms — matching the contact page treatment. */
.am label {
    display: block; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--am-muted); margin: 0 0 8px;
}
.am input[type=text], .am input[type=email], .am input[type=tel],
.am input[type=password], .am input[type=date], .am input[type=time],
.am select, .am textarea {
    width: 100%; padding: 14px 16px; font: inherit; font-size: 15px;
    background: var(--am-navy-deep); color: var(--am-white);
    border: 1px solid var(--am-line); border-radius: 0;
}
.am input:focus, .am select:focus, .am textarea:focus {
    outline: none; border-color: var(--am-gold); background: #08182f;
}
.am .field { margin-bottom: 22px; }

/* Info tile with gold left edge (phone / location / response time). */
.am .tile {
    background: var(--am-navy); border-left: 2px solid var(--am-gold);
    padding: 20px 24px; margin-bottom: 2px;
}
.am .tile .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--am-gold-bright); }
.am .tile .v { color: var(--am-white); font-size: 17px; margin-top: 6px; }

/* Header / footer */
.am .site-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 34px; background: transparent;
}
.am .site-nav a {
    color: var(--am-text); margin: 0 14px; font-size: 14px;
    font-variant: small-caps; letter-spacing: .05em;
}
.am .site-nav a.active, .am .site-nav a:hover { color: var(--am-gold-bright); }
.am .site-foot {
    background: var(--am-ink); border-top: 1px solid var(--am-line);
    padding: 60px 34px 30px; color: var(--am-muted); font-size: 13px;
}

/* Status pills for the portal (credits, bookings, attendance). */
.am .pill {
    display: inline-block; padding: 4px 12px; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase;
    border: 1px solid currentColor;
}
.am .pill-ok    { color: var(--am-green); }
.am .pill-warn  { color: var(--am-amber); }
.am .pill-off   { color: var(--am-red); }

/* Flash notices — matches the existing flash() output on public pages. */
.am .notice {
    padding: 13px 18px; margin: 0 0 26px;
    background: var(--am-navy); border-left: 3px solid var(--am-blue);
    color: var(--am-white); font-size: 14.5px;
}
.am .notice-success { border-left-color: var(--am-green); }
.am .notice-error   { border-left-color: var(--am-red); }

/* Public form card */
.am .form-card {
    max-width: 560px; background: var(--am-navy);
    border: 1px solid var(--am-line); padding: 34px;
}
.am .form-card h2 { font-size: 24px; margin-bottom: 6px; }
.am .muted { color: var(--am-muted); font-size: 14px; }
.am .summary-row {
    display: flex; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px solid var(--am-line);
}
.am .summary-row.total { border-bottom: 0; font-size: 19px; color: var(--am-white); padding-top: 18px; }