/* ==========================================================================
   Duesmart Credit — senior-friendly navigation and marketing-page layer.

   Navigation follows the Rodney Smith / Janice Smith mega-menu pattern:
   one brand, one Member Sign In button, one labelled Menu button, and a
   single full-width panel that shows every destination at once.

   SCOPE RULES (important):
   - Everything here targets the shared header/breadcrumb or the signed-out
     marketing page (#ccLogin.cc-sales-page).
   - Nothing here targets #ccApp, .cc-view, .cc-tabs, .cc-dialog or any other
     authenticated Command Center surface. The signed-in workspace keeps the
     styling it already has.
   - Loaded AFTER credit-command-center.css so these rules win where they
     intentionally override the old header.
   ========================================================================== */

:root {
  --cc-s-ink: #ffffff;
  --cc-s-gold: #ffd100;
  --cc-s-green: #00c44f;
  --cc-s-panel: #050a06;
  --cc-s-card: #111a15;
  --cc-s-line: rgba(255, 255, 255, .22);
  --cc-s-focus: #ffd100;
  --cc-s-tap: 44px;
  --cc-s-measure: 65ch;
}

/* --------------------------------------------------------------------------
   1. Highly visible keyboard focus (header, breadcrumb, marketing page only)
   -------------------------------------------------------------------------- */
.cc-header :focus-visible,
.cc-breadcrumb :focus-visible,
#ccLogin :focus-visible {
  outline: 4px solid var(--cc-s-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Anchor targets are never left underneath the sticky header. */
#ccLogin [id],
#ccLogin .cc-anchor {
  scroll-margin-top: 96px;
}

.cc-anchor {
  display: block;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Header bar: brand · Member Sign In · Menu
   -------------------------------------------------------------------------- */
.cc-header .cc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding-block: 12px;
}

.cc-header .cc-brand {
  min-width: 44px;
  min-height: 48px;
  padding-right: 6px;
}

.cc-nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cc-header-signin,
.cc-header-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 20px;
  border: 2px solid var(--cc-s-gold);
  border-radius: 12px;
  background: var(--cc-s-gold);
  color: #000;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.cc-header-signin:hover,
.cc-header-signout:hover {
  border-color: #fff;
  background: #fff;
  color: #000;
}

.cc-header-signout {
  border-color: var(--cc-s-line);
  background: transparent;
  color: var(--cc-s-ink);
}

.cc-header-signout:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Menu button — a word plus the three bars, never a bare icon
   -------------------------------------------------------------------------- */
.cc-burger {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 104px;
  min-height: 50px;
  padding: 11px 17px;
  border: 2px solid var(--cc-s-gold);
  border-radius: 12px;
  background: transparent;
  color: var(--cc-s-ink);
  font-size: 1.06rem;
  font-weight: 900;
  cursor: pointer;
}

.cc-burger-bars {
  display: grid;
  gap: 5px;
}

.cc-burger-bars > span {
  display: block;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--cc-s-gold);
  transition: transform .25s, opacity .25s;
}

.cc-header.is-menu-open .cc-burger {
  background: var(--cc-s-gold);
  color: #000;
}

.cc-header.is-menu-open .cc-burger-bars > span { background: #000; }
.cc-header.is-menu-open .cc-burger-bars > span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.cc-header.is-menu-open .cc-burger-bars > span:nth-child(2) { opacity: 0; }
.cc-header.is-menu-open .cc-burger-bars > span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   4. The mega menu panel
   -------------------------------------------------------------------------- */
.cc-mega {
  display: none;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 2px solid var(--cc-s-gold);
  background: var(--cc-s-panel);
}

.cc-header.is-menu-open .cc-mega { display: block; }

.cc-mega-inner {
  display: grid;
  gap: 26px;
  padding: 22px 0 30px;
}

.cc-mega-title {
  margin: 0 0 12px;
  color: var(--cc-s-gold);
  font-size: 1.05rem;
  font-weight: 900;
}

.cc-mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* Rodney layout: three even columns once there is room. */
@media (min-width: 861px) {
  .cc-mega-grid { grid-template-columns: repeat(3, 1fr); }
}

.cc-mega-grid a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 14px 16px;
  border: 1px solid var(--cc-s-line);
  border-radius: 14px;
  background: var(--cc-s-card);
  color: var(--cc-s-ink);
  text-decoration: none;
}

.cc-mega-grid a > span:last-child {
  display: grid;
  gap: 2px;
}

.cc-mega-grid strong {
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.25;
}

.cc-mega-grid small {
  color: #dfe9e2;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.4;
}

.cc-mega-grid .ic {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
}

.cc-mega-grid a:hover {
  border-color: var(--cc-s-gold);
  background: #141e10;
}

.cc-mega-grid a:hover strong,
.cc-mega-grid a:hover small {
  color: var(--cc-s-gold);
}

/* Current page: border + colour + a bold "You are here" line, never colour alone. */
.cc-mega-grid a[aria-current="page"] {
  border: 2px solid var(--cc-s-gold);
  background: rgba(255, 209, 0, .12);
}

.cc-mega-grid a[aria-current="page"] strong { color: var(--cc-s-gold); }

.cc-mega-grid a[aria-current="page"] small {
  color: var(--cc-s-gold);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   5. Language & Voice group inside the panel
   -------------------------------------------------------------------------- */
.cc-mega-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: end;
}

.cc-lang-field {
  display: grid;
  gap: 6px;
  color: var(--cc-s-ink);
  font-size: 1rem;
  font-weight: 800;
}

.cc-lang-field select {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 2px solid var(--cc-s-green);
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.cc-mega-lang .cc-translate-button,
.cc-mega-voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 12px 18px;
  border: 2px solid var(--cc-s-gold);
  border-radius: 12px;
  background: var(--cc-s-gold);
  color: #000;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cc-mega-voice {
  border-color: var(--cc-s-green);
  background: #009b3a;
  color: #fff;
}

.cc-mega-voice:hover {
  border-color: #fff;
  background: #00b846;
}

#ccTranslationNote {
  margin: 12px 0 0;
  max-width: var(--cc-s-measure);
  color: var(--cc-s-ink);
  font-size: .97rem;
  font-weight: 500;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. Breadcrumb (replaces the old "You are in:" card)
   -------------------------------------------------------------------------- */
.cc-breadcrumb {
  border-bottom: 1px solid rgba(255, 209, 0, .28);
  background: #050d07;
}

.cc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  font-size: 1rem;
}

.cc-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.cc-breadcrumb li + li::before {
  content: "›";
  color: var(--cc-s-gold);
  font-weight: 900;
}

.cc-breadcrumb a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cc-breadcrumb a:hover { color: var(--cc-s-gold); }

.cc-breadcrumb [aria-current="page"] {
  color: var(--cc-s-gold);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   7. Marketing page typography (signed-out page only)
   -------------------------------------------------------------------------- */
#ccLogin.cc-sales-page {
  font-size: 19px;
  line-height: 1.6;
}

#ccLogin.cc-sales-page p,
#ccLogin.cc-sales-page li,
#ccLogin.cc-sales-page summary,
#ccLogin.cc-sales-page label,
#ccLogin.cc-sales-page small {
  line-height: 1.6;
}

#ccLogin.cc-sales-page p,
#ccLogin.cc-sales-page li {
  max-width: var(--cc-s-measure);
  overflow-wrap: anywhere;
}

#ccLogin.cc-sales-page .cc-eyebrow {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}

#ccLogin.cc-sales-page h1 {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.2;
}

#ccLogin.cc-sales-page h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.25;
}

#ccLogin.cc-sales-page h3 {
  font-size: 1.2rem;
  line-height: 1.3;
}

#ccLogin.cc-sales-page a { text-underline-offset: 4px; }

/* The headline sits at the top of the hero, not floated to the middle. */
#ccLogin.cc-sales-page .cc-sales-hero,
#ccLogin.cc-sales-page .cc-sales-price-section,
#ccLogin.cc-sales-page .cc-sales-member {
  align-items: start;
}

/* Large, permanent form labels — never placeholder-only. */
#ccLogin.cc-sales-page .cc-login-form label {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

#ccLogin.cc-sales-page .cc-login-form input {
  min-height: 52px;
  margin-bottom: 18px;
  font-size: 1.05rem;
}

#ccLogin.cc-sales-page .cc-button {
  min-height: 52px;
  font-size: 1.02rem;
}

/* Standalone legal/support links keep a full-size tap target. */
#ccLogin.cc-sales-page .cc-sales-footer nav a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 1rem;
}

#ccLogin.cc-sales-page .cc-sales-footer nav a:hover {
  background: rgba(255, 255, 255, .1);
}

/* --------------------------------------------------------------------------
   8. "What would you like to do?" chooser
   -------------------------------------------------------------------------- */
.cc-chooser {
  padding: 22px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--cc-s-line);
  background: var(--cc-s-card);
}

.cc-chooser-title {
  margin: 0 0 14px;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
}

.cc-chooser-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.cc-chooser-option {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 16px 20px;
  border: 2px solid var(--cc-s-gold);
  border-radius: 14px;
  background: #000;
  color: #fff;
  text-decoration: none;
}

.cc-chooser-option strong {
  font-size: 1.1rem;
  font-weight: 900;
}

.cc-chooser-option span {
  color: var(--cc-s-gold);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cc-chooser-option:hover {
  border-color: #fff;
  background: #0d1a12;
}

/* --------------------------------------------------------------------------
   9. Floating voice button must never cover the sticky enrol bar,
      form fields or legal text. Higher specificity than the runtime
      <style> block injected by duesmart-voice.js.
   -------------------------------------------------------------------------- */
body[data-voice-experience] #ds-ecosystem-voice-wrap { z-index: 105; }

/* Nothing floats over the open menu. */
body.cc-menu-open #ds-ecosystem-voice-wrap,
body.cc-menu-open .cc-sales-mobile-cta { display: none !important; }

@media (max-width: 760px) {
  body[data-voice-experience] #ds-ecosystem-voice-wrap {
    right: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

/* On short or narrow screens the button collapses to the microphone alone so
   it cannot sit on top of links, form fields or legal text. The accessible
   name is kept on the button's aria-label. */
/* The microphone keeps its words on every screen, in the signed-out page AND
   in the signed-in workspace. It used to collapse to a bare 56px circle here,
   which left a control labelled only by an icon plus an aria-label - no help
   at all to a sighted person who has not learned that a microphone means
   "voice help". It grows to a labelled pill instead. */
@media (max-width: 900px), (max-height: 620px) {
  body[data-voice-experience] #ds-ecosystem-voice-btn {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 56px;
    padding: 0 20px;
    gap: 10px;
    justify-content: center;
    border-radius: 999px;
  }

  body[data-voice-experience] #ds-ecosystem-voice-btn > span {
    display: inline;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
  }
  body[data-voice-experience] #ds-ecosystem-voice-btn > svg { margin: 0; }
  body[data-voice-experience] #ds-ecosystem-voice-hint { max-width: min(268px, calc(100vw - 32px)); }
}

/* Reserve room under the sticky enrol bar and respect device safe areas. */
@media (max-width: 760px) {
  #ccLogin.cc-sales-page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  #ccLogin.cc-sales-page .cc-sales-mobile-cta {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    font-size: 1.05rem;
  }
}

/* --------------------------------------------------------------------------
   10. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cc-header { position: static; }

  /* The wordmark stays visible — it answers "where am I?". */
  .cc-brand > span:last-child { display: inline; }

  .cc-mega { max-height: none; }
  .cc-mega-inner { gap: 22px; }

  /* One column: a single vertical list with generous spacing. */
  .cc-mega-grid,
  .cc-mega-lang-grid { grid-template-columns: 1fr; }

  .cc-mega-grid a { min-height: 72px; }
}

@media (max-width: 560px) {
  #ccLogin.cc-sales-page { font-size: 18px; }
  .cc-chooser-options { grid-template-columns: 1fr; }

  .cc-header .cc-header-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .cc-nav-actions { display: contents; }

  .cc-burger { min-height: 54px; }

  .cc-header-signin,
  .cc-header-signout {
    flex: 1 1 100%;
    min-height: 56px;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   11. No horizontal scrolling, including at 200% zoom
   -------------------------------------------------------------------------- */
html, body { overflow-x: clip; /* not `hidden`: hidden makes the root a scroll container,
     which stops native in-page anchors from scrolling the document at all.
     `clip` prevents the same horizontal overflow without that side effect. */ }

#ccLogin.cc-sales-page img,
#ccLogin.cc-sales-page table { max-width: 100%; }

/* --------------------------------------------------------------------------
   12. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cc-burger-bars > span,
  .cc-mega,
  .cc-mega-grid a,
  .cc-chooser-option {
    transition: none !important;
    animation: none !important;
  }

  html { scroll-behavior: auto; }
}