/* ============================================================
   Shared v2 chrome: header dropdown menus + mobile submenu.
   Loaded by the home, review, and archive templates.
   ============================================================ */
.navdrop{position:relative;display:inline-flex}
.navdrop > a{display:inline-flex;align-items:center;gap:6px}
.ncaret{opacity:.45;transition:transform .18s}
.navdrop:hover .ncaret,.navdrop:focus-within .ncaret{transform:rotate(180deg);opacity:1;color:var(--red)}
.drop{
  position:absolute;top:calc(100% + 6px);left:0;min-width:240px;z-index:90;
  background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--sh-2);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
/* The panels are absolutely positioned and only *visibility*-hidden when
   closed, so they still contribute to document width. Left-anchored, the
   trailing menus pushed every page ~76px past the viewport at 1024px.
   Anchoring the last two to the right keeps them inside at every width
   where the desktop nav is shown. */
.nav > .navdrop:nth-last-child(-n+2) .drop{left:auto;right:0}
/* Hover bridge so the pointer can travel from link to panel. */
.navdrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.navdrop:hover .drop,.navdrop:focus-within .drop,.navdrop.open .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:9px 12px;border-radius:8px;font-size:13.6px;font-weight:500;white-space:nowrap}
.drop a:hover{background:var(--cream)}
.drop a:first-child{font-weight:600}
/* mobile submenu entries */
.mobile-menu a.sub{padding:8px 12px 8px 26px;font-size:13.4px;font-weight:400;color:var(--muted)}
.mobile-menu a.sub:hover{color:#000}
.mobile-menu li{margin-bottom:6px}
@media (max-width:860px){
  .drop{display:none}
}

/* Breathing room between nav items now that carets are attached. */
.nav{display:flex;gap:10px;margin-left:8px}
.navdrop > a{padding:9px 13px}
.navdrop > a .ncaret{margin-left:1px}

/* Base mobile-menu rules live HERE so no template can forget them — the
   shared header always outputs the panel markup. */
.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;padding:14px 0 18px}
.mobile-menu.is-open{display:block}
.mobile-menu ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:2px}
.mobile-menu ul > li > a{display:flex;justify-content:space-between;padding:11px 12px;border-radius:9px;font-weight:600}
.mobile-menu a:hover{background:var(--cream)}
.mobile-menu form{padding:0 12px}
.mobile-menu input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:14px}

/* Theme footer add-ons injected via wp_footer on every page: with Kadence's
   CSS dequeued they render as unstyled flow elements below the footer,
   creating a blank strip. Kill them on all v2 templates. */
.kadence-scroll-to-top,#kt-scroll-up,#kt-scroll-up-reader{display:none!important}

/* ==== search popover (header search icon) ==== */
.search-pop{display:none;border-top:1px solid var(--line);background:#fff;padding:14px 0}
.search-pop.is-open{display:block}
.search-pop form{display:flex;align-items:center;gap:12px}
.search-pop form svg{color:var(--muted-2);flex:0 0 auto}
.search-pop input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;padding:8px 0}
.search-pop input:focus{outline:none}

/* ==== scroll to top (v2-styled, driven by the theme's Customizer setting) ==== */
.v2-scrolltop{position:fixed;z-index:85;width:44px;height:44px;display:grid;place-items:center;background:var(--red);color:#fff;border:0;border-radius:12px;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,background .16s,visibility .2s}
.v2-scrolltop.is-show{opacity:1;visibility:visible;transform:none}
.v2-scrolltop:hover{background:#000}

/* ============================================================
   CHROME BASE — the full util-bar / header / footer styling.
   This file is the single source of truth for everything
   ChromeV2 renders; page stylesheets may duplicate these rules
   but MUST NOT be relied on for them. Added after the search
   and hub pages shipped without header/footer styles because
   these rules only lived in the older per-page stylesheets.
   ============================================================ */
.util{background:#000;color:rgba(255,255,255,.68);font-size:12.5px}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px}
.util__tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.1);color:var(--cream);padding:3px 7px;border-radius:4px}
.util__pick{display:flex;align-items:center;gap:8px}
.util__pick b{color:#fff;font-weight:600}
.util__right{display:flex;gap:18px}
.util__right a:hover{color:#fff}
.hdr{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.2s}
.hdr.is-stuck{border-color:var(--line);box-shadow:0 8px 24px -20px rgba(0,0,0,.5)}
.hdr__in{display:flex;align-items:center;gap:20px;height:var(--hdr)}
.brand{font-family:var(--display);font-weight:800;font-size:17.5px;letter-spacing:-.035em;font-variation-settings:'wdth' 98;white-space:nowrap;display:flex;align-items:center;gap:9px}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--red);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}
.nav > a{padding:9px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.nav > a:hover{background:var(--cream)}
.nav > a.on{background:#000;color:#fff}
.count{font-family:var(--mono);font-size:10.5px;font-weight:600;background:#000;color:#fff;border-radius:20px;padding:2px 7px}
.nav > a.on .count{background:var(--red)}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);cursor:pointer;color:var(--muted)}
.icon-btn:hover{border-color:var(--red);color:#000}
.menu-btn{display:none}
.ftr{background:#000;color:#fff;padding:54px 0 0}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px}
.ftr__brand .brand{font-size:18px;color:#fff;margin-bottom:14px}
.ftr__brand p{color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.6;margin:0 0 18px;max-width:38ch}
.ftr__brand .owner b{display:block;margin-bottom:6px}
.ftr__brand .owner p{margin-bottom:12px}
.ftr h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:15px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr ul a{color:rgba(255,255,255,.78);font-size:13.4px}
.ftr ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr__bar{border-top:1px solid rgba(255,255,255,.13);padding:17px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.5)}
@media (max-width:1060px){
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{display:none}
  .menu-btn{display:grid}
}
@media (max-width:640px){
  .ftr__grid{grid-template-columns:1fr}
}

/* Design tokens the chrome depends on — duplicated here on purpose so the
   chrome never breaks if a page stylesheet forgets to define them. */
:root{
  --paper:#F9F9FB; --cream:#ffedde; --red:#ff3f3f;
  --line:rgba(0,0,0,.13); --line-soft:rgba(0,0,0,.08);
  --muted:rgba(0,0,0,.62); --muted-2:rgba(0,0,0,.45);
  --r:14px; --r-sm:9px;
  --display:'Archivo', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --wrap:1200px; --hdr:66px;
}

/* ============================================================
   HEADER COMPRESSION — lives here (not in page stylesheets) so
   every template gets it. The brand is white-space:nowrap, so
   without these rules the header row overflows the viewport on
   narrow screens; min-width:0 + overflow:hidden guarantees the
   brand shrinks instead of pushing the row wide.
   ============================================================ */
.brand{flex:0 1 auto;min-width:0;overflow:hidden}
.util__pick{min-width:0}
@media (max-width:860px){
  .hdr__in{gap:12px}
  .util__pick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:640px){
  .hdr__in{gap:10px}
  .brand{font-size:15px;gap:7px}
  .brand .mark{width:23px;height:23px;font-size:12px;border-radius:6px}
  .hdr__right{gap:8px}
  .hdr__right .btn--primary{padding:8px 12px;font-size:13px}
  .util__in{gap:10px}
}
@media (max-width:400px){
  .hdr__right .btn--primary{padding:8px 10px;font-size:12.5px}
  .icon-btn{width:34px;height:34px}
}

/* ============================================================
   QA hardening (site-wide, applies to every v2 template).
   ============================================================ */

/* iOS zooms the viewport when a focused input is under 16px. Applied only
   at touch widths so desktop density is unchanged. Scoped under `body` to
   outrank the per-page rules that set 13-15px on search fields and selects
   (this file loads after them, but specificity has to win outright). */
@media (max-width:782px){
  body input:not([type=hidden]):not([type=range]),
  body select:not([multiple]),
  body textarea:not([hidden]){ font-size:16px }
}

/* Comfortable thumb targets for the controls people actually tap:
   buttons, filter chips, sortable table headers, pagination and the
   mobile menu. Inline prose links are deliberately excluded. */
@media (max-width:782px){
  .btn, .chip, .mbtn,
  .rfilter button, .locbtns button, .filter button,
  [data-deal-filter], .page-numbers,
  .mobile-menu a, .icon-btn{
    min-height:44px;
  }
  .btn, .chip, .mbtn, .rfilter button, .locbtns button, .filter button{
    display:inline-flex; align-items:center;
  }
  .icon-btn{ width:44px }
  /* sortable headers are tapped to re-sort */
  #full thead th, .rr__head > div{ padding-block:14px }
}

/* Slim legal bar above the copyright row — same muted scale as .ftr__bar.
   Links get real padding so they are comfortable tap targets on touch. */
.ftr__legal{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;padding:14px 0 2px;font-size:12.5px}
.ftr__legal a{color:rgba(255,255,255,.62);text-decoration:none;display:inline-block;padding:6px 0}
.ftr__legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr__legal span{color:rgba(255,255,255,.28)}
.ftr__bar a{color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.ftr__bar a:hover{color:#fff;text-decoration-color:#fff}

/* ===== hover visibility on dark sections =====
   Every template ships `.btn--primary:hover{background:#000}` — correct on
   white sections, invisible on black ones (the button merges with the hero).
   Inside any dark container the hover flips WHITE instead: unmistakable on
   black, still five-colour. `:not(:disabled)` matches the advisor's higher-
   specificity rule so this wins everywhere it applies. */
.hero .btn--primary:hover:not(:disabled),
.rhero .btn--primary:hover:not(:disabled),
.ghero .btn--primary:hover:not(:disabled),
.ahero .btn--primary:hover:not(:disabled),
.chero .btn--primary:hover:not(:disabled),
.util .btn--primary:hover:not(:disabled),
.ftr .btn--primary:hover:not(:disabled),
.news .btn--primary:hover:not(:disabled),
.sidecta .btn--primary:hover:not(:disabled),
.prov--win .btn--primary:hover:not(:disabled),
.third .btn--primary:hover:not(:disabled),
.stickybar .btn--primary:hover:not(:disabled),
.fastest .btn--primary:hover:not(:disabled),
.winner .btn--primary:hover:not(:disabled),
.mcard .btn--primary:hover:not(:disabled){background:#fff;color:#000}

/* The dark-hero ghost button brightens more decisively on hover. */
.btn--ghostlight:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);color:#fff}

/* ===== author card =====
   Closes reviews and guides. Only renders once the owner has filled in a real
   reviewer name AND bio (Settings -> Reviewer), so this is never an empty
   trust badge. Five-colour, matching the .scard treatment. */
.authorbox{display:flex;gap:18px;align-items:flex-start;margin:34px 0 0;padding:22px 24px;
  background:#F9F9FB;border:1px solid rgba(0,0,0,.09);border-radius:14px}
.authorbox__img{flex:0 0 auto;width:72px;height:72px;border-radius:50%;object-fit:cover;
  background:#ffedde;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.authorbox__body{min-width:0}
.authorbox__name{margin:0 0 6px;font-family:Archivo,system-ui,sans-serif;font-weight:800;
  font-size:16px;letter-spacing:-.01em;color:#000}
.authorbox__name a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,0,0,.25)}
.authorbox__name a:hover{text-decoration-color:#ff3f3f}
.authorbox__role{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:#ffedde;color:#000;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;vertical-align:2px}
.authorbox__bio{margin:0;font-size:14.5px;line-height:1.62;color:rgba(0,0,0,.72)}
@media (max-width:560px){
  .authorbox{flex-direction:column;gap:14px;padding:20px}
  .authorbox__img{width:56px;height:56px}
}


/* ===== scroll progress bar =====
   Sitewide reading indicator, emitted by ChromeV2::util_bar() so every template
   gets exactly one. Brand red rather than the teal/purple of the reference
   snippet, which sits outside the five-colour system.
   z-index 95 is deliberate: above the sticky header (70) and the scroll-to-top
   button (85), but BELOW the coupon modal (9999) and .modal (100) so a 3px line
   can never draw across a dialog. width is driven from v2-chrome.js. */
.rpbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:95;
  background:#ff3f3f;box-shadow:0 0 10px rgba(255,63,63,.5);
  pointer-events:none;will-change:width;transition:width .1s linear}
/* A hairline of cream at the leading edge keeps it legible on the black
   utility bar as well as on white. */
.rpbar::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:#ffedde}
.rpbar[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.rpbar{transition:none}}