/* ============================================================
   CARL DESIGN SYSTEM — CHROME (nav + drawer + footer)
   Desktop nav + mobile slide-out drawer; dual footer with
   desktop columns / mobile accordions. Themed .theme-carl / .theme-compass.
   ============================================================ */

/* ---------------- NAV (desktop) ---------------- */
.carl-nav { display: flex; align-items: center; gap: 1.5rem; padding: .5rem clamp(1.25rem, 4vw, 2rem); background: #fff; border-bottom: 1px solid var(--carl-border); position: relative; font-family: var(--carl-font); }
.carl-nav__logo { display: inline-flex; align-items: center; text-decoration: none; }
.carl-nav__logo img { height: 56px; width: auto; display: block; }
.carl-nav__logo--carl img { height: 74px; }
.carl-nav__logo--compass img { height: 58px; }
.carl-nav__list { display: flex; align-items: center; gap: .15rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.carl-nav__item { position: relative; }
.carl-nav__link { display: inline-flex; align-items: center; gap: .35em; font: 500 .88rem/1 var(--carl-font); color: var(--carl-text); text-decoration: none; padding: .6rem .75rem; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
.carl-nav__link:hover { color: var(--brand-deep); background: color-mix(in srgb, var(--brand) 12%, #fff); }
.carl-nav__link--caret::after { content: "▾"; font-size: .7em; opacity: .55; margin-left: .1em; }

.carl-nav__dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 340px; background: #fff; border: 1px solid var(--carl-border); border-radius: var(--carl-radius); box-shadow: var(--carl-shadow-heavy); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 50; }
.carl-nav__item:hover > .carl-nav__dropdown,
.carl-nav__item:focus-within > .carl-nav__dropdown,
.carl-nav__item--open > .carl-nav__dropdown { opacity: 1; visibility: visible; transform: none; }
.carl-nav__product { display: flex; gap: .8rem; padding: .7rem; border-radius: 10px; text-decoration: none; transition: background .15s; }
.carl-nav__product:hover { background: color-mix(in srgb, var(--brand) 12%, #fff); }
.carl-nav__product-icon { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; background: var(--carl-navy); }
.carl-nav__product-icon img { width: 24px; height: 24px; }
.carl-nav__product-name { font: 600 .95rem/1.2 var(--carl-font); color: var(--carl-navy); display: flex; align-items: center; gap: .45rem; }
.carl-nav__product-desc { font: 400 .82rem/1.4 var(--carl-font); color: var(--carl-text-muted); margin-top: 3px; }
.carl-nav__here { font: 600 .6rem/1 var(--carl-font); text-transform: uppercase; letter-spacing: .04em; color: var(--brand-deep); background: color-mix(in srgb, var(--brand) 18%, #fff); padding: .25em .5em; border-radius: 999px; }
.carl-nav__dropdown-extra { display: block; padding: .6rem .75rem; font: 600 .9rem/1.25 var(--carl-font); color: var(--carl-text); text-decoration: none; border-radius: 9px; }
.carl-nav__dropdown-extra small { display: block; font: 400 .76rem/1.35 var(--carl-font); color: var(--carl-text-muted); margin-top: 2px; }
.carl-nav__dropdown-extra:hover { background: color-mix(in srgb, var(--brand) 12%, #fff); }
/* simple text-link dropdown (Resources / About) — right-aligned to stay on-screen */
.carl-nav__dropdown--links { min-width: 250px; left: auto; right: 0; }
.carl-nav__droplink { display: block; padding: .6rem .75rem; border-radius: 9px; font: 600 .9rem/1.25 var(--carl-font); color: var(--carl-text); text-decoration: none; transition: background .15s, color .15s; }
.carl-nav__droplink:hover { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand-deep); }
.carl-nav__droplink small { display: block; font: 400 .76rem/1.35 var(--carl-font); color: var(--carl-text-muted); margin-top: 2px; }
.carl-nav__cta { margin-left: .6rem; padding-block: .82em; }

/* clean 3-line hamburger */
.carl-nav__toggle { display: none; margin-left: auto; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; padding: 0; }
.carl-nav__toggle span { display: block; height: 2.5px; width: 26px; background: var(--carl-navy); border-radius: 2px; }

@media (max-width: 940px) {
  .carl-nav__list, .carl-nav__cta { display: none; }
  .carl-nav__toggle { display: flex; }
  .carl-nav__logo--carl img { height: 68px; }
  .carl-nav__logo--compass img { height: 56px; }
}

/* ---------------- DRAWER (mobile off-canvas) ---------------- */
.carl-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.carl-drawer.is-open { visibility: visible; }
.carl-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,25,48,.45); opacity: 0; transition: opacity .25s; }
.carl-drawer.is-open .carl-drawer__backdrop { opacity: 1; }
.carl-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px); background: #fff; box-shadow: -8px 0 30px rgba(0,25,48,.18); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; padding: 1rem 1.25rem 1.5rem; overflow-y: auto; }
.carl-drawer.is-open .carl-drawer__panel { transform: none; }
.carl-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.carl-drawer__head img { height: 40px; width: auto; }
.carl-drawer__close { width: 38px; height: 38px; border: 1px solid var(--carl-border); border-radius: 999px; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--carl-navy); flex: 0 0 auto; }
.carl-drawer__link, .carl-drawer__acc-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem .2rem; font: 500 1.05rem/1 var(--carl-font); color: var(--carl-navy); text-decoration: none; border: 0; border-bottom: 1px solid var(--carl-border); background: none; cursor: pointer; text-align: left; }
.carl-drawer__acc-btn svg { transition: transform .2s; flex: 0 0 auto; color: var(--carl-text-muted); }
.carl-drawer__acc.is-open > .carl-drawer__acc-btn svg { transform: rotate(180deg); }
.carl-drawer__sub { display: none; flex-direction: column; padding: .15rem 0 .6rem .55rem; }
.carl-drawer__acc.is-open > .carl-drawer__sub { display: flex; }
.carl-drawer__sub a { padding: .55rem .2rem; font: 500 .95rem/1.2 var(--carl-font); color: var(--carl-text-muted); text-decoration: none; }
.carl-drawer__sub a:hover { color: var(--brand-deep); }
.carl-drawer__here { font: 600 .58rem/1 var(--carl-font); text-transform: uppercase; letter-spacing: .04em; color: var(--brand-deep); background: color-mix(in srgb, var(--brand) 18%, #fff); padding: .25em .5em; border-radius: 999px; }
.carl-drawer__cta { margin-top: 1.25rem; }
.carl-drawer__cta .carl-btn { width: 100%; justify-content: center; }

/* ---------------- FOOTER (dual) ---------------- */
.carl-footer { background: var(--gradient-navy); color: rgba(255,255,255,.7); font-family: var(--carl-font); }
.carl-footer__inner { max-width: 1600px; margin: 0 auto; padding: clamp(2.8rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem); display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr 1.3fr; gap: clamp(2.25rem,4.5vw,5rem); align-items: end; }
.carl-footer__col ul a { white-space: nowrap; }
/* Company has one fewer link — lift it so its heading lines up with the CARL/Compass headings */
.carl-footer__col--legal { margin-bottom: 2.45rem; }
/* brand stays anchored at the top (prominent logo); being the tallest column, its bottom
   lands on the same line as the CARL/Compass last links */
.carl-footer__brand { display: flex; flex-direction: column; align-items: flex-start; align-self: start; }
.carl-footer__brand-logo { height: 120px; width: auto; margin: 5px 0 calc(1.25rem - 5px); display: block; }   /* bigger than header; nudged 5px down */
.carl-footer__blurb { font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.55); max-width: 60ch; margin: 0; }
.carl-footer__col h2 { font: 700 .72rem/1 var(--carl-font); text-transform: uppercase; letter-spacing: .12em; margin: .3rem 0 1.2rem; display: flex; align-items: center; justify-content: space-between; }
.carl-footer__col--carl h2 { color: var(--accent-teal); }
.carl-footer__col--compass h2 { color: var(--accent-lime); }
.carl-footer__col--legal h2 { color: rgba(255,255,255,.5); }
.carl-footer__col-chevron { display: none; transition: transform .2s; }
.carl-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.carl-footer__col a { color: rgba(255,255,255,.68); text-decoration: none; font-size: .9rem; transition: color .15s; }
.carl-footer__col a:hover { color: #fff; }

/* footer CTA stack — two product CTAs (CARL + Compass), theme each for its brand button */
.carl-footer__ctas { display: flex; flex-direction: column; gap: .75rem; }
.carl-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .95rem 1.05rem; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.carl-footer__cta--carl    { border-color: color-mix(in srgb, var(--accent-teal) 28%, transparent); }
.carl-footer__cta--compass { border-color: color-mix(in srgb, var(--accent-lime) 28%, transparent); }
.carl-footer__cta-title { font: 700 .88rem/1.25 var(--carl-font); color: #fff; margin: 0; }
.carl-footer__cta-text { font: 400 .84rem/1.5 var(--carl-font); color: rgba(255,255,255,.6); margin: 0; }
.carl-footer__cta .carl-btn { width: 100%; justify-content: center; }

.carl-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.carl-footer__bottom-inner { max-width: 1600px; margin: 0 auto; padding: 1.3rem clamp(1.5rem,4vw,3.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .82rem; color: rgba(255,255,255,.45); }
.carl-footer__bottom-left { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.carl-footer__legal { display: flex; gap: 1.1rem; }
.carl-footer__legal a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .82rem; transition: color .15s; }
.carl-footer__legal a:hover { color: #fff; }
.carl-footer__flag { display: inline-flex; align-items: center; gap: .45rem; }
.carl-footer__flag svg { width: 16px; height: 16px; color: #fff; flex: 0 0 auto; }

/* FOOTER tablet: brand + CTA span full width, links in a 3-up row */
@media (max-width: 1080px) {
  .carl-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
  .carl-footer__brand { grid-column: 1 / -1; }
  .carl-footer__cta { grid-column: 1 / -1; align-self: stretch; }
}

/* FOOTER mobile: stack + accordions */
@media (max-width: 760px) {
  .carl-footer__inner { grid-template-columns: 1fr; gap: 0; }
  .carl-footer__brand { margin-bottom: 1.25rem; align-items: center; text-align: center; }
  .carl-footer__brand-logo { height: 78px; margin-inline: auto; }
  .carl-footer__blurb { max-width: none; text-align: center; }
  .carl-footer__col { border-top: 1px solid rgba(255,255,255,.1); }
  .carl-footer__col h2 { margin: 0; padding: 1.1rem 0; cursor: pointer; }
  .carl-footer__col-chevron { display: block; }
  .carl-footer__col.is-open .carl-footer__col-chevron { transform: rotate(180deg); }
  .carl-footer__col ul { display: none; padding-bottom: 1.15rem; }
  .carl-footer__col.is-open ul { display: flex; }
  .carl-footer__bottom-inner { flex-direction: column; text-align: center; gap: .75rem; }
  .carl-footer__bottom-left { flex-direction: column; gap: .5rem; }
}