/* CheckMyTotalLoss — shared site navigation. Pairs with nav.js.
   Self-contained palette, so it is safe to drop onto any page. */

:root {
  --cmtl-nav-h: 64px;                 /* mobile header height  */
  --cmtl-ink:    #0f1117;
  --cmtl-paper:  #f5f3ef;
  --cmtl-white:  #ffffff;
  --cmtl-accent: #d4460f;
  --cmtl-mid:    #6b7280;
  --cmtl-border: #e2ddd6;
}
/* 1024px is the mobile/desktop boundary. Below it the inline links plus the
   CTA cannot both fit without halving the 32px link spacing, and the CTA is
   the one thing that must never clip, so narrower windows keep the drawer. */
@media (min-width: 1024px) {
  :root { --cmtl-nav-h: 83px; }       /* desktop header height */
}

/* The wrapper itself is the sticky element. A sticky child only sticks within
   its parent's box, so making .cmtl-header sticky inside a header-height
   wrapper would let it scroll away. The min-height also reserves space before
   nav.js injects, so nothing shifts (no CLS). */
#site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--cmtl-nav-h);
}

/* Anchor targets clear the sticky header when jumped to. */
section[id], div[id].cmtl-anchor {
  scroll-margin-top: calc(var(--cmtl-nav-h) + 12px);
}

/* Header */
.cmtl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--cmtl-nav-h);
  padding: 0 18px;
  padding-left:  max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  background: var(--cmtl-paper);
  border-bottom: 1px solid var(--cmtl-border);
  box-sizing: border-box;
  transition: box-shadow .2s ease;
}
.cmtl-header.is-scrolled {
  box-shadow: 0 2px 10px rgba(15, 17, 23, .08);
}
@media (min-width: 1024px) {
  .cmtl-header { padding: 0 40px; gap: 32px; }
}

/* Wordmark */
.cmtl-brand {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cmtl-ink);
  text-decoration: none;
  letter-spacing: -0.5px;
  white-space: nowrap;
  line-height: 1;
}
.cmtl-brand span { color: var(--cmtl-accent); }
@media (min-width: 1024px) { .cmtl-brand { font-size: 1.4rem; } }

/* Hamburger (mobile only) */
.cmtl-burger {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: -10px;               /* optical alignment with page gutter */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cmtl-burger:focus-visible { outline: 2px solid var(--cmtl-accent); outline-offset: 2px; }
.cmtl-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cmtl-ink);
  border-radius: 2px;
}
@media (min-width: 1024px) { .cmtl-burger { display: none; } }

/* Desktop inline links */
.cmtl-header .cmtl-links {
  /* High specificity: neutralises any bare `nav {}` rule on the host page. */
  display: none;
  position: static;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
@media (min-width: 1024px) { .cmtl-header .cmtl-links { display: flex; } }

/* Just above the breakpoint there is not quite room for 32px link spacing plus
   the CTA, and the bar spills into the 40px gutter. Tighten only this range. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .cmtl-header .cmtl-links { gap: 20px; }
  .cmtl-header { gap: 24px; }
}

.cmtl-header .cmtl-links a {
  color: var(--cmtl-mid);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s;
}
.cmtl-header .cmtl-links a:hover { color: var(--cmtl-ink); }
.cmtl-header .cmtl-links a.is-active {
  color: var(--cmtl-ink);
  font-weight: 700;
  border-bottom-color: var(--cmtl-accent);
}

/* Primary CTA — always visible at every width */
.cmtl-header .cmtl-cta {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--cmtl-ink);
  color: var(--cmtl-white);
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1;
  border-bottom: 0;
}
.cmtl-header .cmtl-cta:hover { color: var(--cmtl-white); }
@media (min-width: 1024px) {
  .cmtl-header .cmtl-cta { margin-left: 0; font-size: .875rem; padding: 10px 22px; }
}

/* Very narrow phones (iPhone SE): shorten the CTA rather than let it clip. */
@media (max-width: 359px) {
  .cmtl-cta-word { display: none; }
  .cmtl-brand { font-size: 1rem; }
}

/* Overlay */
.cmtl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, .5);
  opacity: 0;
  visibility: hidden;
  z-index: 1001;
  transition: opacity .25s ease, visibility .25s ease;
}
.cmtl-overlay.is-open { opacity: 1; visibility: visible; }

/* Drawer */
.cmtl-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: min(85vw, 360px);
  /* 100dvh, not 100vh: iOS Safari's bottom toolbar overlaps 100vh content. */
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cmtl-white);
  box-shadow: 2px 0 24px rgba(15, 17, 23, .18);
  transform: translateX(-100%);
  transition: transform .25s ease;
  overscroll-behavior: contain;
  padding-left: env(safe-area-inset-left);
  box-sizing: border-box;
}
.cmtl-drawer.is-open { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .cmtl-drawer, .cmtl-overlay { transition: none; }
}

/* Drawer header (X) */
.cmtl-drawer-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cmtl-nav-h);
  padding: 0 8px 0 20px;
  border-bottom: 1px solid var(--cmtl-border);
}
.cmtl-drawer-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.1rem;
  color: var(--cmtl-ink);
}
.cmtl-drawer-title span { color: var(--cmtl-accent); }

.cmtl-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--cmtl-ink);
  -webkit-tap-highlight-color: transparent;
}
.cmtl-close:focus-visible { outline: 2px solid var(--cmtl-accent); outline-offset: -2px; }
.cmtl-close svg { width: 20px; height: 20px; display: block; }

/* Scrollable item list.
   Bottom padding keeps the final row clear of the iOS Safari toolbar. */
.cmtl-items {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

.cmtl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 20px;
  color: var(--cmtl-ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--cmtl-border);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.cmtl-item:active { background: var(--cmtl-paper); }
.cmtl-item:focus-visible { outline: 2px solid var(--cmtl-accent); outline-offset: -2px; }

.cmtl-item .cmtl-chev {
  flex: 0 0 auto;
  color: var(--cmtl-mid);
  font-size: 1.15rem;
  line-height: 1;
}

/* The money link */
.cmtl-item.cmtl-item-cta {
  color: var(--cmtl-accent);
  font-weight: 700;
  background: #fdf1ec;
}
.cmtl-item.cmtl-item-cta .cmtl-chev { color: var(--cmtl-accent); }

/* Current page */
.cmtl-item.is-active {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--cmtl-accent);
  background: var(--cmtl-paper);
}

/* Stop background scroll while the drawer is open (set by nav.js). */
body.cmtl-locked { overflow: hidden; }

/* The `hidden` attribute must win over the display rules above, otherwise a
   closed drawer stays in the layout and its links remain keyboard-reachable
   while sitting off-screen. */
.cmtl-drawer[hidden],
.cmtl-overlay[hidden] { display: none; }