/* oa-nav-extras.css — branch dropdown + status widget, injected into the
   existing nav.topnav by oa-nav-extras.js. All classes namespaced under
   oa- to avoid colliding with page-specific styles (my-cases uses .badge
   for case-status pills, etc.).

   2026-05-24 founder restructure: removed separate .oa-branch-crest circle
   (was redundant with the dropdown icon and pushed mobile content off the
   right edge). Branch icon now lives ENLARGED inside the dropdown button.
   Status widget moved out of the right-cluster to its own left-side slot
   right after the brand-link so it doesn't get crowded. */

nav.topnav.oa-has-extras { padding-top: 4px; padding-bottom: 4px; min-height: 68px; }

/* Right-side cluster — now only the dropdown */
.oa-nav-x { display: flex; align-items: center; gap: 12px; margin-left: 14px; }

/* ---- branch dropdown ----
   Option 3 (2026-05-24): hidden at ALL widths. Branch picker now lives
   exclusively in the hamburger menu. The .oa-dd nodes are still injected
   so existing JS hooks (selectBranch updates oaBranchDDIcon/Label) don't
   need rewrites — they just write to hidden elements that mirror state. */
.oa-dd { position: relative; display: none; }
.oa-dd-btn {
  display: flex; align-items: center; gap: 10px;
  background: #22384f; color: #fff; border: 1px solid #3a536e;
  border-radius: 8px; font-size: 13px; padding: 4px 12px 4px 6px;
  cursor: pointer; font-family: inherit; min-height: 60px;
}
.oa-dd-btn:hover { background: #2a4660; }
.oa-dd-caret { font-size: 11px; opacity: .8; }
/* The icon inside the button — sized large (48px) so it does the visual
   job the standalone crest used to do. Circular gold-bordered frame
   echoes the prior crest treatment so vets see continuity. */
.oa-dd-btn .oa-dd-img,
.oa-dd-btn .oa-dd-flag {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold, #c69c1e);
  object-fit: contain;
  display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.oa-dd-flag { object-fit: cover; }
.oa-dd-emoji { line-height: 1; padding: 0 4px; }
.oa-dd-list {
  display: none; position: absolute; top: calc(100% + 5px); left: 0;
  background: #fff; color: #222; border: 1px solid #d0c8b3;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  min-width: 236px; overflow: hidden; z-index: 200;
}
.oa-dd-list.open { display: block; }
.oa-dd-opt { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; font-size: 14px; }
.oa-dd-opt:hover { background: #f3eedb; }

/* Anchor for below-nav floating elements (branch badge + status pill). */
nav.topnav.oa-has-extras { position: relative; }

/* ---- branch badge (below nav, left side, founder restored 2026-05-24) ----
   ~56px circular crest with gold border. Hidden until a branch is selected.
   Click opens the hamburger menu (which has the branch picker). */
.oa-branch-badge {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 22px;
  /* 2026-05-25 — bumped 56 -> 70px universally (was scoped to data-page=home
     which only matched index.html; founder uses analyze.html as "home"). */
  width: 70px; height: 70px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold, #c89636);
  object-fit: contain;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.30);
  z-index: 60;
  transition: transform .15s ease;
}
.oa-branch-badge.on { display: block; }
.oa-branch-badge.oa-branch-badge-flag { object-fit: cover; }
/* 2026-05-25 — bumped hover scale from 1.06 to 2.0 so vets can actually read
   the wreath/emblem detail (founder ask: "you can't see it on the normal
   page without making it larger with a hover over"). transform-origin keeps
   the badge anchored to its top-left corner so it grows down-and-right into
   the body instead of bumping the nav. z-index promoted above the status
   pill so the enlarged badge isn't clipped on the right. On mobile :active
   provides the same enlarge during tap-and-hold (mobile browsers also fire
   :hover on first tap, which doubles as the mobile reveal). */
.oa-branch-badge { transform-origin: top left; }
.oa-branch-badge:hover,
.oa-branch-badge:active,
.oa-branch-badge:focus {
  transform: scale(2);
  z-index: 220;
  box-shadow: 0 6px 22px rgba(0,0,0,.42);
}

/* ---- status widget (now RIGHT side, below nav) ----
   Branch badge took the left slot. Status pill anchored top-right under nav. */
.oa-status-w {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  position: absolute; top: calc(100% + 8px); right: 22px;
  background: #1d3461; color: #fff;
  padding: 4px 12px; border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  z-index: 60;
}
.oa-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #888; }
.oa-status-dot.oa-green  { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.oa-status-dot.oa-yellow { background: #f1c40f; box-shadow: 0 0 6px #f1c40f; }
.oa-status-dot.oa-red    { background: #e74c3c; box-shadow: 0 0 6px #e74c3c; }
.oa-status-label { color: #cdd8e4; }
.oa-status-pop {
  /* Pop opens DOWN-LEFT-of-pill since the widget is right-anchored now. */
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; color: #222; border: 1px solid #d0c8b3;
  border-radius: 8px; padding: 12px 14px; width: 262px;
  box-shadow: 0 8px 26px rgba(0,0,0,.3); z-index: 210; font-size: 12px;
}
.oa-status-pop.open { display: block; }
.oa-status-pop h4 { margin: 0 0 8px; font-size: 12px; color: var(--navy, #1d3461); }
.oa-svc-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.oa-svc-row .oa-d { width: 9px; height: 9px; border-radius: 50%; background: #888; }
.oa-status-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid #d0c8b3; color: #888; font-size: 11px; font-style: italic; }

/* ---- mobile (<=768px) ---- */
@media (max-width: 768px) {
  .oa-nav-x { gap: 6px; margin-left: 8px; }
  /* .oa-dd is hidden at ALL widths now (see base rule above) */
  .oa-dd-btn { min-height: 44px; font-size: 11px; padding: 3px 8px 3px 4px; gap: 6px; border-radius: 6px; }
  .oa-dd-btn .oa-dd-img, .oa-dd-btn .oa-dd-flag {
    width: 36px !important; height: 36px !important; border-width: 1.5px;
  }
  .oa-dd-caret { font-size: 9px; }
  .oa-dd-list { min-width: 200px; }
  /* Mobile: shrink branch badge + status; both still below-nav, opposite sides */
  /* 2026-05-25 — bumped 38 -> 48px universally (was scoped to home). */
  .oa-branch-badge { width: 48px; height: 48px; left: 12px; top: calc(100% + 4px); }
  /* Status label stays visible on mobile (founder ask 2026-05-25) but
     smaller. Was hidden entirely. */
  .oa-status-label { display: inline; font-size: 9.5px; letter-spacing: .2px; }
  .oa-status-dot { width: 9px; height: 9px; }
  .oa-status-w { right: 12px; gap: 4px; padding: 3px 8px; font-size: 9.5px; }
  /* Shrink brand on mobile so the nav fits brand + status + medals + dropdown */
  nav.topnav .brand-tag { display: none; }
  nav.topnav .brand-wordmark { font-size: 14px; letter-spacing: 0; }
  nav.topnav .brand-mark svg { width: 36px; height: 36px; }
}
@media (max-width: 480px) {
  /* Tightest layout — iPhone SE and small Androids */
  .oa-nav-x { gap: 4px; margin-left: 4px; }
  .oa-dd-btn { font-size: 10.5px; padding: 3px 6px 3px 3px; min-height: 38px; }
  .oa-dd-btn .oa-dd-img, .oa-dd-btn .oa-dd-flag { width: 30px !important; height: 30px !important; }
  .oa-status-w { margin-left: 4px; }
}

/* ---- branch picker inside hamburger menu (Option 3) ----
   Rendered at the TOP of .menu-list by oa-nav-extras.js. The only branch
   picker UI — the nav .oa-dd is hidden at all widths. Compact rows so 8
   branches don't dominate the menu. Theming matches existing .menu-list a:
   light grey-blue text (#cbd4e2) on the dark navy menu panel; gold section
   head; subtle gold hover; navy+gold selected state. */
.oa-menu-branch { padding: 0 18px 10px; margin: -4px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.oa-menu-branch .section-head {
  display: block; margin: 12px 0 8px;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  font-weight: 800; color: var(--gold, #c89636);
}
.oa-menu-branch-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.oa-menu-branch-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; color: #cbd4e2; font-family: inherit;
  text-align: left; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.oa-menu-branch-opt img {
  width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain;
  border-radius: 50%; background: #fff; border: 1px solid #c89636;
}
.oa-menu-branch-opt img.oa-dd-flag { object-fit: cover; }
.oa-menu-branch-opt:hover { background: rgba(200,150,54,0.10); color: #fff; }
.oa-menu-branch-opt.selected { background: rgba(200,150,54,0.18); color: #fff; border-color: var(--gold, #c89636); }
.oa-menu-branch-opt.selected:hover { background: rgba(200,150,54,0.28); }

/* 2026-05-27 — divider above "Prefer not to say" + smaller/dimmer styling
   for the opt-out itself. Pairs with the branch-gate modal de-promotion;
   keeps the option available but stops promoting it. Spans the full
   2-col grid. */
.oa-menu-branch-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.18) 70%, transparent);
  margin: 6px 0 2px;
}
.oa-menu-branch-opt-private {
  grid-column: 1 / -1;
  font-size: 9px;
  color: #8a93a3;
  font-weight: 500;
  padding: 2px 6px;
  gap: 5px;
}
.oa-menu-branch-opt-private img { width: 11px; height: 11px; flex: 0 0 11px; }