/* ============================================================
   GTTS brand theme — GoToTrafficSchool (sitedata "gtts")
   Loaded AFTER /css/v2/member-v2.css by the V2 masters, and only
   on deployments whose sitedata key has a matching
   /css/v2/brand-<key>.css file. Other brands keep the default
   (brand-neutral) member-v2 palette untouched.

   Palette source: www.gototrafficschool.com landing page tokens
   (site.css: --navy #0f4f8c, --navy-deep #173c62, --navy-ink
   #1e466c, --sky #eaf4fb, --copy #14212f, --muted #5f7082).
   Layout/components follow Figma "New Websites" 12014-16908.
   Fonts: Roboto (content) + Plus Jakarta Sans (header/footer chrome).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;700;800&display=swap');

/* ---------- design tokens (override member-v2 defaults) ---------- */
body.mv2 {
    --mv2-bg:          #f4f7fa;
    --mv2-ink:         #14212f;   /* landing --copy */
    --mv2-ink-2:       #3e4b59;
    --mv2-ink-3:       #5f7082;   /* landing --muted */
    --mv2-border:      #c9d7e4;
    --mv2-border-soft: #dde7ef;   /* landing --line, opaque */
    --mv2-primary:     #0f4f8c;   /* landing --navy: primary actions, links, progress */
    --mv2-primary-dk:  #0c4175;
    --mv2-primary-soft:#eaf4fb;   /* landing --sky */
    --mv2-brand:       #1e466c;   /* landing --navy-ink: secondary buttons, accents */
    --mv2-navy-band:   #173c62;   /* landing --navy-deep: referral banner */
    --mv2-navy-deep:   #173c62;
    --mv2-radius:      10px;
    --mv2-radius-lg:   12px;
    /* landing cards are border-led, not shadow-led */
    --mv2-shadow:      0 1px 2px rgba(15, 79, 140, .05);
    --mv2-shadow-sm:   0 1px 2px rgba(15, 79, 140, .05);
    --mv2-font:        'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --mv2-font-display:'Plus Jakarta Sans', 'Roboto', system-ui, sans-serif;
}

/* ---------- header / nav ---------- */
/* Landing-page-style chrome: one clean full-bleed white bar (no inner boxed
   card), sticky at the top, with a full-bleed bottom hairline.
   The white band and the hairline are both painted as clipped box-shadows so
   no master markup changes and nothing adds scrollable overflow: shadow 1 is
   the band, shadow 2 is the same spread offset 1px down — the 1px strip that
   peeks out below the band is the hairline. The clip allows generous room
   above (covers the shell's top padding while sticky) and exactly 1px below. */
body.mv2 .mv2-header {
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 15px 6px;
    gap: 26px;
    box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax var(--mv2-border-soft);
    clip-path: inset(-120px -100vmax -1px -100vmax);
    position: sticky;
    top: 0;
    z-index: 60;
    /* Breathing room for pages that open with a card instead of a .mv2-page-head
       (quiz, exam, security questions), where the content otherwise sits flush
       against the bar and reads as overlapping it. Set on the header rather than
       the following sibling because several pages open MainContent with a
       <script> block, which would swallow a sibling rule. Collapses against the
       page-head/hero's own top margin, so spacing never doubles up. */
    margin-bottom: 26px;
}
/* The GTTS mark is a stacked two-line lockup, so it needs more height than a
   single-line wordmark to read at the same visual weight. Source is the
   official 4096px site asset downscaled to 643x224 (4x the rendered height). */
body.mv2 .mv2-logo img { max-height: 58px; }
@media (max-width: 900px) { body.mv2 .mv2-logo img { max-height: 46px; } }
body.mv2 .mv2-nav { gap: 8px; }
body.mv2 .mv2-nav a {
    font-family: var(--mv2-font-display);
    font-weight: 700;
    color: var(--mv2-ink-2);
    border-radius: 10px;
    padding: 9px 16px;
}
body.mv2 .mv2-nav a:hover { background: var(--mv2-primary-soft); color: var(--mv2-primary); }
body.mv2 .mv2-nav li.active a,
body.mv2 .mv2-nav a.active { background: var(--mv2-primary-soft); color: var(--mv2-primary); }
body.mv2 .mv2-header-right { gap: 18px; }
body.mv2 .mv2-phone {
    font-family: var(--mv2-font-display);
    font-weight: 400;
    font-size: 15.5px;
    color: var(--mv2-ink);
    padding-right: 18px;
    border-right: 1px solid var(--mv2-border-soft);
}
body.mv2 .mv2-phone i, body.mv2 .mv2-phone .mv2-phone-ico { color: var(--mv2-primary); }
body.mv2 .mv2-signout {
    background: var(--mv2-primary);
    border-radius: 10px;
    font-family: var(--mv2-font-display);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
}
body.mv2 .mv2-signout:hover { background: var(--mv2-navy-deep); }
@media (max-width: 900px) {
    /* wrapped two-row header would eat the small screen if it stayed stuck */
    body.mv2 .mv2-header { position: static; }
    body.mv2 .mv2-phone { border-right: 0; padding-right: 0; }
}

/* ---------- footer ---------- */
body.mv2 .mv2-footer {
    background: #0b0d10;
    color: #e2e8f0;
    font-family: var(--mv2-font-display);
    font-size: 15px;
    padding: 26px 24px;
}

/* ---------- shared components ---------- */
/* "Edit" / card-head links are navy */
body.mv2 .mv2-card-head a { color: var(--mv2-primary); }

/* segmented tabs (Edit Profile / Change my Password): inactive label is a
   clear muted gray — it was reading as a blue link (client feedback) */
body.mv2 .mv2-tabs a { color: var(--mv2-ink-3); }
body.mv2 .mv2-tabs a:hover { color: var(--mv2-ink); }
body.mv2 .mv2-tabs a.active { color: var(--mv2-ink); }

/* Important-information banner → soft yellow notice (Figma) */
body.mv2 .mv2-alert {
    background: #f9f4e7;
    border: 1px solid #e6d7a8;
    border-radius: 10px;
    box-shadow: none;
    align-items: center;
}
body.mv2 .mv2-alert .mv2-alert-ico {
    width: 26px; height: 26px;
    border-radius: 999px;
    background: #e6c84a;
    color: #fff;
}
body.mv2 .mv2-alert .mv2-alert-ico svg { width: 14px; height: 14px; }
body.mv2 .mv2-alert .mv2-imp-more,
body.mv2 .mv2-alert a { color: var(--mv2-primary); }
body.mv2 .mv2-alert.mv2-alert-danger { background: #fdf5f5; border-color: #f4c7c7; align-items: flex-start; }
body.mv2 .mv2-alert.mv2-alert-danger .mv2-alert-ico { background: #d64545; color: #fff; }

/* progress ring / bar tracks: neutral track, navy fill */
body.mv2 .mv2-ring .mv2-ring-bg { stroke: #dbe6f0; }
body.mv2 .mv2-progress-bar { background: #e6eef5; border: 1px solid #d3dfe9; }

/* profile card: navy avatar, soft-sky chip CTA */
body.mv2 .mv2-profile-avatar { background: var(--mv2-brand); }
body.mv2 .mv2-profile-cta a,
body.mv2 .mv2-viewall {
    background: var(--mv2-primary-soft);
    border-color: transparent;
    color: var(--mv2-primary);
    border-radius: 8px;
}
body.mv2 .mv2-profile-cta a:hover,
body.mv2 .mv2-viewall:hover { background: #dcecf8; }

/* upgrade / add-on cards: plain bordered cards with navy CTAs */
body.mv2 .mv2-upcard,
body.mv2 .mv2-upcard.accent { border-top: 1px solid var(--mv2-border-soft); }
body.mv2 .mv2-upcard .mv2-upcard-media,
body.mv2 .mv2-upcard.accent .mv2-upcard-media { background: #f1f5f9; }
body.mv2 .mv2-upcard-foot a,
body.mv2 .mv2-upcard-foot .btn,
body.mv2 .mv2-upcard.accent .mv2-upcard-foot a,
body.mv2 .mv2-upcard.accent .mv2-upcard-foot .btn { background: var(--mv2-brand); border-radius: 8px; }
body.mv2 .mv2-upcard-foot a:hover,
body.mv2 .mv2-upcard.accent .mv2-upcard-foot a:hover { background: var(--mv2-navy-deep); }
body.mv2 .mv2-upcard .mv2-feat li svg { color: #44a84e; }

/* balance bar */
body.mv2 .mv2-balance { border-radius: 14px; border-color: var(--mv2-border-soft); }
body.mv2 .mv2-balance .mv2-balance-ico { background: var(--mv2-primary-soft); color: var(--mv2-primary); border-radius: 12px; }
body.mv2 .mv2-balance .mv2-balance-txt .k { color: var(--mv2-ink-3); font-family: var(--mv2-font-display); }
body.mv2 .mv2-balance-row .mv2-balance-big { font-family: var(--mv2-font-display); color: var(--mv2-ink); }
body.mv2 .mv2-balance .mv2-btn { background: var(--mv2-primary); border-radius: 10px; font-family: var(--mv2-font-display); font-weight: 700; }
body.mv2 .mv2-balance .mv2-btn:hover { background: var(--mv2-navy-deep); }

/* referral banner: deep navy band, white outline button w/ navy text */
body.mv2 .mv2-refer { background: var(--mv2-navy-band); border-radius: 10px; }
body.mv2 .mv2-refer .mv2-refer-ico { background: rgba(255, 255, 255, .21); border-radius: 999px; }

/* lesson chrome: navy accents instead of DETG orange */
body.mv2 .mv2-lesson-avatar { background: var(--mv2-primary-soft); color: var(--mv2-brand); }
body.mv2 .mv2-ef-prepcard { background: #f0f6fb; }

/* referral how-it-works / copy button: navy instead of near-black */
body.mv2 .mv2-raf-step-ico { background: var(--mv2-brand); box-shadow: 0 6px 18px -6px rgba(30, 70, 108, .5); }
body.mv2 .mv2-raf-copy { background: var(--mv2-brand); }
body.mv2 .mv2-raf-copy:hover { background: var(--mv2-navy-deep); }
body.mv2 .mv2-raf-step-num { box-shadow: 0 4px 10px -3px rgba(15, 79, 140, .5); }

/* upload page: recolor the hardcoded cyan icon/spinner to GTTS navy */
body.mv2 .mv2-upl-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2'/%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3C/svg%3E");
}
body.mv2 .mv2-upl-btn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2'/%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3C/svg%3E");
}
body.mv2 .mv2-upl-spinner { border-color: rgba(15, 79, 140, .3); border-top-color: var(--mv2-primary); }

/* ---------- dashboard (TrafficSchoolMain) ---------- */
/* welcome hero (markup is brand-gated in TrafficSchoolMain.aspx.cs) */
.mv2-dash-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin: 26px 4px 20px; }
.mv2-dash-hero h1 { margin: 0 0 4px; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--mv2-ink); }
.mv2-dash-hero p { margin: 0; color: var(--mv2-ink-3); font-size: 14px; }
.mv2-days-pill {
    background: #f1e1a7;
    color: #8b6a00;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: 8px;
    flex: 0 0 auto;
}

/* Figma leads with course progress; profile card is the narrow column */
body.mv2 .mv2-dash-top { grid-template-columns: 1fr minmax(300px, 360px); }
body.mv2 .mv2-dash-top > .mv2-card:first-child { order: 2; }
@media (max-width: 980px) {
    body.mv2 .mv2-dash-top { grid-template-columns: 1fr; }
    body.mv2 .mv2-dash-top > .mv2-card:first-child { order: 2; }
}