/* ═══════════════════════════════════════════════════════════════════════════
   chrome.css: header, navigation, mobile drawer, announcement bar, 404.

   Fresh rules for fresh markup (templates/partials/header.html), measured
   against the live Themify header on 2026-11-10 at 1440px and 375px:
     header 101px + 1px rule, 90px once scrolled (desktop); 90/83px on phones
     content box 1160px centred (94% under 1260px, 90% under 760px)
     links Inter 18px/600 #333, padding 9px 14.4px; yellow Solutions button
     mega panel 1160px wide, 24px padding, five columns, 2.5% gap
     phones: 300px drawer from the right, page shifts left, blurred overlay
   The live header's border and shadow come from styles/site.css section 2
   (#headerwrap), which still applies because the id is kept. Nothing here
   depends on Themify's stylesheet. Everything is namespaced .pvh-*, and the
   rules that compete with base.css/site.css bare-element rules (button, ul,
   li) are written with enough specificity to win.
   ═══════════════════════════════════════════════════════════════════════════ */

.pvh-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pvh-skip {
  position: absolute; left: 8px; top: -100px; z-index: 100000;
  background: #fff; color: #1b3851; padding: 10px 16px; border-radius: 8px;
  font: 600 16px/1.2 "Inter", Arial, sans-serif; box-shadow: 0 4px 12px rgba(16, 24, 40, .18);
}
.pvh-skip:focus { top: 8px; }

/* ── header bar ──────────────────────────────────────────────────────────── */
body { position: relative; left: 0; transition: left .2s ease-in-out; }

#headerwrap.pvh {
  position: sticky; top: 0; left: 0; z-index: 999;
  min-height: 55px; background-color: #fff; color: #000;
  font-family: "Inter", Arial, sans-serif; font-size: 18px; line-height: 1.4em;
  transition: background-color .3s ease-in-out;
}
/* Themify's frosted glass when scrolled: on a pseudo element, because
   backdrop-filter on the header itself would capture the fixed drawer. */
#headerwrap.pvh::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.pvh-scrolled #headerwrap.pvh { background-color: hsla(0, 0%, 100%, .9); }
.pvh-scrolled #headerwrap.pvh::before { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

.pvh .pvh-inner {
  position: relative; z-index: 1; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: space-between;
  width: 1160px; max-width: 100%; margin: 0 auto; padding: 18px 0;
  transition: padding .3s ease-in-out;
}
.pvh-scrolled .pvh .pvh-inner { padding-block: 12px; }

.pvh .pvh-logo {
  display: block; flex: 0 0 auto; margin: 10.25px 15px 5px -10px;
  font-size: 30.6px; line-height: 1.2em; letter-spacing: -.04em; color: #3772a3; text-decoration: none;
  height: 49.8px;   /* the live line box: 40px image on a 36.7px line */
}
.pvh .pvh-logo img { display: inline; width: 200px; height: auto; max-width: 100%; vertical-align: baseline; border: 0; }

.pvh ul, .pvh li { list-style: none; margin: 0; padding: 0; line-height: inherit; }

/* button reset: base.css gives every <button> the theme's red pill */
.pvh button {
  -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0;
  box-shadow: none; color: inherit; font: inherit; font-weight: inherit; margin: 0; padding: 0;
  transform: none; width: auto; cursor: pointer; text-align: left; letter-spacing: inherit;
}
.pvh button:hover { background: none; box-shadow: none; color: inherit; transform: none; }

.pvh-burger, .pvh-close { display: none; }

/* ── desktop navigation ─────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .pvh .pvh-drawer { display: block; margin-left: auto; }
  .pvh .pvh-menu { display: flex; align-items: center; gap: 5px; margin-top: 9px; }
  .pvh .pvh-item { position: static; }

  .pvh .pvh-link {
    position: relative; display: block; box-sizing: border-box;
    padding: 9px 14.4px; border-radius: 8px;
    font-family: "Inter", Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 25.2px;
    color: #333; text-decoration: none; white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
  }
  .pvh .pvh-link::before {
    content: ""; position: absolute; left: .8em; right: .8em; bottom: 4px; height: 2px;
    border-radius: 2px; background: #3772a3; pointer-events: none;
    transform: scaleX(0); transform-origin: left center; transition: transform .2s ease;
  }
  .pvh .pvh-item:not(.pvh-cta):hover > .pvh-link,
  .pvh .pvh-link:focus-visible,
  .pvh .pvh-has-mega:focus-within > .pvh-link,
  .pvh .pvh-has-mega.is-open > .pvh-link {
    color: #265782; background-color: rgba(55, 114, 163, .07);
  }
  .pvh .pvh-item:not(.pvh-cta):hover > .pvh-link::before,
  .pvh .pvh-link:focus-visible::before,
  .pvh .pvh-has-mega:focus-within > .pvh-link::before,
  .pvh .pvh-has-mega.is-open > .pvh-link::before { transform: scaleX(1); }
  /* Live marks no current item (the menu holds custom links), so neither do we:
     aria-current is set for assistive tech only. */

  .pvh .pvh-link:focus-visible { outline: 2px solid #3772a3; outline-offset: 3px; }

  /* Solutions: the house yellow CTA. Hover lightens the FILL only; the 3px
     #FFDC03 border stays (AGENTS.md "Yellow CTA styling"). */
  .pvh .pvh-cta { margin-left: 10px; }
  .pvh .pvh-cta > .pvh-link {
    display: inline-block; padding: 9px 18px; border: 3px solid #FFDC03; border-radius: 10px;
    background: #FFDC03; color: #333; font-weight: 700;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .pvh .pvh-cta > .pvh-link::before { display: none; }
  .pvh .pvh-cta > .pvh-link:hover,
  .pvh .pvh-cta > .pvh-link:focus-visible {
    background: #FFF14D; border-color: #FFDC03; color: #222;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 24, 40, .14);
  }
  .pvh .pvh-cta > .pvh-link:active { color: #222; transform: translateY(0); box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }

  /* "New!" badge (data-badge on the link; was .nav-new in Appearance > Menus) */
  .pvh .pvh-badged { position: relative; }
  .pvh .pvh-link[data-badge]::after {
    content: attr(data-badge); position: absolute; top: -10px; left: 50%;
    transform: translateX(-10%) rotate(13deg); padding: 4px 10px;
    font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .3px; text-transform: uppercase;
    color: #333; background: #FFDC03; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 5;
  }

  .pvh .pvh-arrow, .pvh .pvh-col-toggle { display: none; }

  /* mega panel: spans the header content box, opens on hover, focus or click */
  .pvh .pvh-mega {
    position: absolute; left: 0; top: 73.1px; z-index: 20; box-sizing: border-box;
    width: 100%; max-height: 80vh; overflow: hidden auto;
    padding: 24px; background: #fff; border: 1px solid rgba(55, 114, 163, .14); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(27, 56, 81, .12), 0 3px 8px rgba(27, 56, 81, .05);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s, top .3s ease-in-out;
  }
  .pvh-scrolled .pvh .pvh-mega { top: 67.1px; }
  .pvh .pvh-has-mega:hover > .pvh-mega,
  .pvh .pvh-has-mega:focus-within > .pvh-mega,
  .pvh .pvh-has-mega.is-open > .pvh-mega {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .pvh .pvh-has-mega.is-closed > .pvh-mega { opacity: 0; visibility: hidden; pointer-events: none; }
  /* hover bridge, so the pointer can travel from the button to the panel */
  .pvh .pvh-has-mega:hover > .pvh-top::after {
    content: ""; position: absolute; left: -40px; right: -40px; top: 100%; height: 14px;
  }

  .pvh .pvh-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 2.5%; }
  .pvh .pvh-col { min-width: 0; line-height: 1.7em; }
  .pvh .pvh-col-head {
    display: block; margin: 0 0 10px; padding: 0 8px 10px;
    font-size: 13px; font-weight: 700; line-height: 20.8px; letter-spacing: .5px; text-transform: uppercase;
    color: #4b5563; border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(#FFDC03, #FFDC03) no-repeat 8px 100% / 28px 2px;
  }
  .pvh .pvh-col-head .pvh-icon { color: #3772a3; margin-right: 9px; margin-left: 4px; }
  .pvh .pvh-links a {
    display: block; padding: 8px; border-radius: 8px;
    font-size: 14.4px; font-weight: 400; line-height: 20.16px; color: #333; text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
  }
  .pvh .pvh-links a:hover, .pvh .pvh-links a:focus-visible { color: #265782; background-color: rgba(55, 114, 163, .08); }
  .pvh .pvh-links a:focus-visible { outline: 2px solid #3772a3; outline-offset: 3px; }
}

.pvh .pvh-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; overflow: visible; }

@media (min-width: 901px) and (max-width: 1100px) {
  .pvh .pvh-link { font-size: 16px; }
  .pvh .pvh-item:not(.pvh-cta):not(.pvh-has-mega) > .pvh-link { padding-inline: .65em; }
  .pvh .pvh-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
}
@media (max-width: 1260px) { .pvh .pvh-inner { max-width: 94%; } }

/* ── phones and tablets: drawer ─────────────────────────────────────────── */
@media (max-width: 900px) {
  #headerwrap.pvh { font-size: 16px; }
  .pvh .pvh-inner { padding: 16px 0; }
  .pvh-scrolled .pvh .pvh-inner { padding-block: 12px; }
  .pvh .pvh-inner { position: static; }       /* burger is placed against #headerwrap, like live */
  .pvh .pvh-logo { margin: 5px 10px 5px 0; font-size: 24px; height: 47.9px; position: relative; z-index: 1; }

  .pvh .pvh-burger {
    display: block; position: absolute; right: 4%; top: 27px; transform: translateY(-50%); z-index: 2;
    margin: 0 0 0 10px; padding: 10px 9px 11px; border-radius: 100%; line-height: 1em; color: #000;
  }
  .pvh .pvh-burger:hover { background: hsl(0 0% 78% / .25); }
  .pvh-burger-lines {
    display: block; position: relative; box-sizing: border-box; width: 22px; height: 18px; border-bottom: 2px solid;
  }
  .pvh-burger-lines::before, .pvh-burger-lines::after {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; border-top: 2px solid;
  }
  .pvh-burger-lines::after { top: 50%; }

  .pvh .pvh-drawer {
    position: fixed; top: 0; right: -300px; z-index: 11111; box-sizing: border-box;
    width: 300px; height: 100%; overflow-y: auto; padding: 60px 25px 25px;
    background: #fff; color: #000; text-align: left; visibility: hidden;
    transition: right .2s ease-in-out, visibility 0s linear .2s;
  }
  .pvh-open .pvh .pvh-drawer {
    right: 0; visibility: visible; box-shadow: -6px 0 20px 5px rgb(0 0 0 / .1);
    transition: right .2s ease-in-out, visibility 0s;
  }
  .pvh-open body, body.pvh-open { left: -300px; }
  .pvh-open, .pvh-open body { overflow-x: hidden; }

  .pvh .pvh-close {
    display: block; position: absolute; right: 10px; top: 10px; box-sizing: content-box;
    width: 20px; height: 20px; padding: 9px; border-radius: 100%; color: #000;
    transition: transform .3s ease-in-out;
  }
  .pvh .pvh-close:hover { background: hsl(0 0% 78% / .25); }
  .pvh .pvh-close::before, .pvh .pvh-close::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 56%;
    background: currentColor; transform: translate(-50%, -50%) rotate(45deg); transition: transform .25s;
  }
  .pvh .pvh-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .pvh .pvh-close:hover::after { transform: translate(-50%, -50%) rotate(45deg); }
  .pvh .pvh-close:hover::before { transform: translate(-50%, -50%) rotate(135deg); }

  .pvh .pvh-nav { margin: 1em 0 1.5em; }
  .pvh .pvh-item { display: block; position: relative; }
  .pvh .pvh-link, .pvh .pvh-col-toggle, .pvh .pvh-links a {
    position: relative; display: block; box-sizing: border-box; width: 100%;
    padding: .6em 0; margin: 0; border-radius: 8px;
    font-weight: 400; line-height: 1.5em; color: inherit; text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
  }
  .pvh .pvh-link { font-size: 16px; }
  .pvh .pvh-top, .pvh .pvh-col-toggle { padding-right: 40px; }
  .pvh .pvh-link:hover, .pvh .pvh-col-toggle:hover, .pvh .pvh-links a:hover { color: #87aac7; }
  .pvh .pvh-link:focus-visible, .pvh .pvh-col-toggle:focus-visible, .pvh .pvh-links a:focus-visible,
  .pvh .pvh-link:active, .pvh .pvh-links a:active {
    color: #265782; background-color: rgba(55, 114, 163, .08);
    outline: 2px solid #3772a3; outline-offset: 3px;
  }
  .pvh .pvh-link[data-badge]::after {
    content: attr(data-badge); display: inline-block; margin-left: 10px; padding: 3px 9px;
    font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .3px; text-transform: uppercase;
    vertical-align: middle; color: #333; background: #FFDC03; border-radius: 999px;
  }

  .pvh .pvh-mega, .pvh .pvh-links { display: none; margin: 0 0 0 1em; }
  .pvh .pvh-has-mega.is-open > .pvh-mega,
  .pvh .pvh-col.is-open > .pvh-links { display: block; }
  .pvh .pvh-col-head { display: none; }
  .pvh .pvh-col-toggle, .pvh .pvh-links a { font-size: .8em; }
  .pvh .pvh-col-toggle .pvh-icon { margin-right: 5px; }

  /* chevron circle; turns into a yellow X when open (styles/site.css section 4) */
  .pvh .pvh-arrow {
    position: absolute; right: 0; top: 50%; margin-top: -18px; width: 36px; height: 36px;
    border-radius: 100%; background: rgba(55, 114, 163, .08); color: #3772a3; transition: transform .3s;
  }
  .pvh .pvh-arrow::before, .pvh .pvh-arrow::after {
    content: ""; position: absolute; top: 50%; left: 12px; width: 8px; height: 2px;
    border-radius: 10px; background: currentColor; transform: rotate(45deg); transition: transform .3s ease-in-out;
  }
  .pvh .pvh-arrow::after { left: 17px; transform: rotate(-45deg); }
  .pvh [aria-expanded="true"] > .pvh-arrow { background: #FFDC03; color: #333; transform: rotate(180deg); }
  .pvh [aria-expanded="true"] > .pvh-arrow::before,
  .pvh [aria-expanded="true"] > .pvh-arrow::after { left: 10px; width: 15px; }
}
@media (max-width: 760px) { .pvh .pvh-inner { max-width: 90%; } }
@media (max-width: 680px) { .pvh .pvh-burger { right: 5%; } }
@media (max-width: 600px) { .pvh-open .pvh .pvh-burger { display: none; } }

.pvh-overlay {
  position: fixed; inset: 0; z-index: 998; display: none;
  background-color: hsl(0 0% 81% / .7); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
}
.pvh-open .pvh-overlay { display: block; }
.pvh-overlay[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body, .pvh *, .pvh *::before, .pvh *::after { transition: none !important; }
  .pvh .pvh-cta > .pvh-link:hover, .pvh .pvh-mega { transform: none !important; }
}
@media print {
  #headerwrap.pvh, .pvh-overlay, .pv-banner, .pvh-skip { display: none !important; }
}

/* ── announcement bar (site/data/banner.json) ──────────────────────────── */
.pv-banner {
  position: relative; box-sizing: border-box; padding: 10px 56px; text-align: center;
  background: var(--pvb-bg, #3772a3); color: var(--pvb-fg, #fff);
  font: 400 16px/1.4 "Inter", Arial, sans-serif;
}
.pv-banner[hidden] { display: none; }
.pv-banner a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pv-banner .pv-banner-inner > :last-child { margin-bottom: 0; }
.pv-banner .pv-banner-close {
  -webkit-appearance: none; appearance: none; position: absolute; right: 12px; top: 50%; margin-top: -16px;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 100%; background: rgba(255, 255, 255, .15);
  color: inherit; cursor: pointer; box-shadow: none; transform: none;
}
.pv-banner .pv-banner-close:hover { background: rgba(255, 255, 255, .3); transform: none; box-shadow: none; }
.pv-banner .pv-banner-close::before, .pv-banner .pv-banner-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.pv-banner .pv-banner-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 768px) { .pv-banner { font-size: 14px; padding: 8px 48px 8px 16px; } }

/* ── page frame: the live Builder row around a snippet (templates/page.html) ── */
.pv-frame { box-sizing: border-box; padding-top: var(--pvf-t, 0); padding-bottom: var(--pvf-b, 0);
  margin-top: var(--pvf-tn, 0); margin-bottom: var(--pvf-bn, 0); }
.pv-frame--boxed { width: 1160px; max-width: 100%; margin-left: auto; margin-right: auto; }
@media (max-width: 1260px) { .pv-frame--boxed { max-width: 94%; } }
@media (max-width: 760px) { .pv-frame--boxed { max-width: 90%; } }
@media (max-width: 600px) { .pv-frame { padding-top: var(--pvf-tm, 0); padding-bottom: var(--pvf-bm, 0);
  margin-top: var(--pvf-tmn, 0); margin-bottom: var(--pvf-bmn, 0); } }

/* ── footer wrapper: the snippet supplies its own band and spacing ────────── */
.pv-footer-wrap { clear: both; margin: 0; padding: 0; }

/* ── 404 (templates/404.html) ───────────────────────────────────────────── */
.pv404-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 3.2%;
  width: 1160px; max-width: 100%; margin: 0 auto; padding: 50px 0 0; box-sizing: border-box;
}
.pv404-text { flex: 0 0 50.5%; min-width: 0; }
.pv404-text h1 { margin: 0 0 .5em; }
.pv404-text p { margin: 0 0 21px; }
.pv404-btn {
  display: inline-flex; align-items: center; padding: 11.25px 22.5px; border-radius: 12px;
  background: #3772a3; color: #fff; font-size: 18px; line-height: 24.3px; text-decoration: none;
  transition: background-color .3s ease;
}
.pv404-btn:hover, .pv404-btn:focus-visible { background: #265782; color: #fff; }
.pv404-art { flex: 0 0 46.2%; height: 301px; }
.pv404-art svg { display: block; width: 100% !important; height: 100% !important; }
.pv404-game { width: 1160px; max-width: 100%; margin: 0 auto; padding: 80px 0 60px; box-sizing: border-box; }
.pv404-game h2 { text-align: center; margin: 0 0 20px; }
.pv404-game #excel-snake-game { margin-left: auto; margin-right: auto; }
@media (max-width: 1260px) { .pv404-hero, .pv404-game { max-width: 94%; } }
@media (max-width: 760px) { .pv404-hero, .pv404-game { max-width: 90%; } }
@media (max-width: 680px) {
  .pv404-hero { display: block; padding-top: 40px; }
  .pv404-art { display: none; }
  .pv404-game { padding-top: 50px; }
}