/* site-nav.css: the public menu's look (CL-1535). One file for the static
   pages AND the React app (PublicMarketingNav imports it). The markup comes
   from site-nav.js; every class here starts "sn-" so a page's own CSS cannot
   collide with it, and every property the bar depends on is set here rather
   than inherited, because the pages it lands on each carry their own resets.

   Canonical spec (unchanged from the old header): bar #0D1C33, 1px
   rgba(201,162,39,.2) bottom, min-height 65 | mark 34px | name Playfair 18/700
   white, gold "&" | tagline 9px/600, 1.4 tracking, uppercase, #C9A227 | links
   12px/600 uppercase rgba(255,255,255,.85) | Plan button gold gradient, navy text
   (white on gold is 2.3:1; CL-1535 look, Oct 7 2026).

   Widths: the full bar (brand + five menus + two buttons) needs ~1150px. Below
   1180 the menus fold into the phone menu (the burger), Book a Call stays to
   720, and the Plan button never leaves. */

.sn {
  --sn-navy: #0D1C33;
  --sn-navy2: #1E3A5F;
  --sn-gold: #C9A227;
  --sn-gold2: #D4AF37;
  --sn-ink: #1b2433;
  --sn-muted: #5d6878;
  --sn-line: #e3e6ec;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Source Sans 3 (the current release of Source Sans Pro, the body face on
     most pages); measured Oct 7 2026: 21 of 26 static pages set their body in it. */
  font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.3;
  text-align: left;
}
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn a { text-decoration: none; }
.sn ul { list-style: none; margin: 0; padding: 0; }

.sn-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 65px;
  padding: 13px 28px;
  background: var(--sn-navy);
  border-bottom: 1px solid rgba(201,162,39,.2);
}

/* ---- brand ---- */
.sn-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: #fff; }
.sn-mark { height: 34px; width: auto; display: block; margin: 0; }
.sn-brandtext { display: flex; flex-direction: column; line-height: 1.15; }
.sn-word { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.sn-word b { color: var(--sn-gold); font-weight: 700; }
.sn-tag { font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sn-gold); white-space: nowrap; margin-top: 2px; }

/* ---- the five menus ---- */
.sn-menus { margin-left: auto; display: none; }
.sn-menus ul { display: flex; align-items: center; gap: 22px; }
.sn-menu { position: relative; margin: 0; padding: 0; }
.sn-top {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; margin: 0; padding: 6px 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .5px; text-transform: uppercase;
  color: rgba(255,255,255,.85); white-space: nowrap;
}
button.sn-top::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid var(--sn-gold); border-bottom: 1.5px solid var(--sn-gold);
  transform: rotate(45deg);
}
.sn-top:hover, .sn-menu.open .sn-top { color: var(--sn-gold); }
.sn-top:focus-visible, .sn-plan:focus-visible, .sn-call:focus-visible, .sn-item:focus-visible, .sn-burger:focus-visible, .sn-brand:focus-visible {
  outline: 2px solid var(--sn-gold); outline-offset: 3px; border-radius: 4px;
}

/* The drop sits 14px below its button; the padding bridges the gap so the
   pointer can travel from button to panel without the hover dropping. */
.sn-drop {
  position: absolute; top: 100%; left: -16px; z-index: 2;
  padding-top: 14px; display: none; width: 310px;
}
.sn-drop::before {
  content: ""; position: absolute; inset: 14px 0 0 0; z-index: -1;
  background: #fff; border-radius: 10px; box-shadow: 0 14px 40px rgba(13,28,51,.28);
}
.sn-menu:last-child .sn-drop { left: auto; right: -16px; }
.sn-menu.open .sn-drop { display: grid; padding: 22px 8px 8px; }
@media (hover: hover) {
  .sn-menu:hover .sn-drop, .sn-menu:focus-within .sn-drop { display: grid; padding: 22px 8px 8px; }
}
.sn-item { display: grid; gap: 2px; padding: 9px 10px; border-radius: 7px; color: var(--sn-ink); }
.sn-item strong { font-size: 14px; font-weight: 700; color: var(--sn-ink); }
.sn-item span { font-size: 12.5px; color: var(--sn-muted); font-weight: 400; }
.sn-item:hover { background: #f3f0e4; }
.sn-feature { background: #faf6e8; border: 1px solid rgba(201,162,39,.35); margin-bottom: 2px; }

/* ---- buttons ---- */
.sn-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.sn-call {
  display: none;
  color: var(--sn-gold); border: 1px solid rgba(201,162,39,.6); border-radius: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
.sn-call:hover { background: rgba(201,162,39,.12); }
.sn-plan {
  /* navy on gold: the site's one gold-button standard (site-look.css) */
  background: linear-gradient(135deg, var(--sn-gold), var(--sn-gold2)); color: var(--sn-navy);
  border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap;
}
.sn-plan:hover { filter: brightness(1.06); color: var(--sn-navy); }
.sn-short { display: none; }

/* ---- phone menu (a <details>, works with no script) ---- */
.sn-phone { position: static; }
.sn-burger {
  list-style: none; cursor: pointer; width: 40px; height: 38px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28); display: grid; align-content: center; justify-items: center; gap: 4px;
}
.sn-burger::-webkit-details-marker { display: none; }
.sn-burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.sn-phone[open] .sn-burger { border-color: var(--sn-gold); }
.sn-sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 65px); overflow-y: auto;
  background: #fff; padding: 14px; display: grid; gap: 10px;
  box-shadow: 0 18px 40px rgba(13,28,51,.25); border-top: 1px solid rgba(201,162,39,.25);
}
.sn-plancard { background: var(--sn-navy); color: #fff; border-radius: 12px; padding: 14px; display: grid; gap: 6px; }
.sn-plancard strong { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; color: #fff; }
.sn-plancard span { font-size: 13.5px; color: rgba(255,255,255,.82); }
.sn-plancard a {
  justify-self: start; margin-top: 4px; background: linear-gradient(135deg, var(--sn-gold), var(--sn-gold2)); color: var(--sn-navy);
  border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.sn-acc { border: 1px solid var(--sn-line); border-radius: 10px; background: #fff; }
.sn-acc summary {
  list-style: none; cursor: pointer; padding: 12px 14px; font-size: 15px; font-weight: 700; color: var(--sn-ink);
  display: flex; justify-content: space-between; align-items: center;
}
.sn-acc summary::-webkit-details-marker { display: none; }
.sn-acc summary::after { content: "+"; color: #806719; font-size: 18px; line-height: 1; }
.sn-acc[open] summary::after { content: "\2013"; }
.sn-acc a { display: block; padding: 10px 16px; font-size: 15px; color: var(--sn-ink); border-top: 1px solid var(--sn-line); }
.sn-acc-link { display: block; padding: 12px 14px; border: 1px solid var(--sn-line); border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--sn-ink); }
.sn-sheet-call { display: block; text-align: center; padding: 11px; border: 1px solid var(--sn-line); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--sn-navy2); }

/* ---- widths ---- */
@media (min-width: 720px) {
  .sn-call { display: inline-block; }
}
@media (min-width: 1180px) {
  .sn-menus { display: block; }
  .sn-actions { margin-left: 8px; }
  .sn-phone { display: none; }
}
@media (min-width: 1180px) and (max-width: 1320px) {
  .sn-bar { padding: 13px 18px; }
  .sn-menus ul { gap: 16px; }
  .sn-top { font-size: 11.5px; letter-spacing: .3px; }
}
@media (max-width: 640px) {
  .sn-bar { padding: 10px 12px; gap: 10px; min-height: 58px; }
  .sn-tag { display: none; }
  .sn-mark { height: 28px; }
  .sn-long { display: none; }
  .sn-short { display: inline; }
  .sn-plan { padding: 8px 12px; font-size: 12px; }
  .sn-actions { gap: 8px; }
}
@media (max-width: 400px) {
  .sn-word { font-size: 15px; }
  .sn-brand { gap: 7px; }
}
/* 360px phones: brand + Get the Plan + burger ran 4px over (measured). */
@media (max-width: 380px) {
  .sn-bar { gap: 8px; }
  .sn-actions { gap: 6px; }
  .sn-plan { padding: 8px 10px; font-size: 11.5px; }
  .sn-burger { width: 36px; }
}
@media (max-width: 340px) {
  .sn-bar { padding: 10px 8px; gap: 6px; }
  .sn-mark { display: none; }
}

/* bare bar (paid-ad pages): the Plan keeps its full name a little longer */
.sn-bare .sn-actions { margin-left: auto; }
@media (max-width: 640px) and (min-width: 420px) {
  .sn-bare .sn-long { display: inline; }
  .sn-bare .sn-short { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sn * { transition: none !important; } }
/* A printed page (the recap leave-behind, a deck saved as PDF) carries no menu. */
@media print { .sn { display: none !important; } }