/* chrome.css -- the shared header, footer, nav, utility bar, cookie row
 * and exit modal, lifted out of the inline <style> that every interior
 * page carries its own copy of.
 *
 * WHY THIS FILE EXISTS: browse / reviews / sitemap / lp-index carried only
 * fragments of that block, so `header.site .container` never became a flex
 * row and their 32-link nav stacked vertically -- 139px, 206px, 310px of
 * header against 76.9px everywhere else. Extracted by selector, so only
 * chrome rules are here; those pages keep their own typography.
 *
 * Source: pricing.html style blocks 0, 3, 4, 5, 6, 8, 9, in order. Several of the later blocks
 * deliberately override the first, so DO NOT reorder them.
 */
/* ---- from pricing.html block 0 ---- */
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.utility .phone svg{color:var(--gold)}
header.site .container{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:20px}
nav.primary{display:flex;gap:22px;align-items:center}
nav.primary > a,nav.primary .dropdown > a{font-size:.9rem;color:var(--ink-soft);text-decoration:none;padding:6px 0;position:relative;display:inline-block;cursor:pointer}
nav.primary > a:hover,nav.primary .dropdown > a:hover{color:var(--gold-deep)}
nav.primary .dropdown{position:relative}
nav.primary .dropdown-menu{display:none;position:absolute;top:100%;left:-20px;background:#fff;min-width:240px;padding:12px 0;box-shadow:0 20px 40px -12px rgba(28,35,56,.18);border:1px solid var(--line);z-index:100}
nav.primary .dropdown:hover .dropdown-menu,nav.primary .dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px 20px;font-size:.88rem;color:var(--ink-soft);text-decoration:none}
.dropdown-menu a:hover{background:var(--ivory);color:var(--ink)}
.btn-nav{background:var(--gold);color:var(--cream)!important;padding:9px 18px!important;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;text-decoration:none!important;border-radius:999px}
.btn-nav:hover{background:var(--gold-deep)!important;color:var(--cream)!important}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);padding:8px 12px;border-radius:4px;cursor:pointer}
@media (max-width:1024px){
nav.primary{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;align-items:stretch;padding:16px 28px 28px;border-bottom:1px solid var(--line);gap:0}
nav.primary.open{display:flex}
nav.primary > a,nav.primary .dropdown > a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
nav.primary .dropdown-menu{position:static;box-shadow:none;border:none;padding:8px 0 8px 16px;min-width:auto}
.nav-toggle{display:inline-flex}
}
@media (max-width:640px){
header.site .container{gap:12px}
.brand{gap:10px}
.brand-mark{width:36px;height:36px}
.brand-name{font-size:1.05rem;white-space:nowrap}
.brand-tag{font-size:.6rem;letter-spacing:.2em}
.btn-nav{display:none}
}
footer.site{background:var(--ink);color:rgba(244,236,223,.7);padding:36px 0 20px;font-size:.86rem;margin-top:0}
footer.site .container{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
@media (max-width:780px){
footer.site .container{grid-template-columns:1fr 1fr;gap:18px}
}
@media (max-width:520px){
footer.site .container{grid-template-columns:1fr;gap:14px}
}
/* Sticky chrome is 136px on a phone. Without this,every in-page anchor lands underneath it and the reader sees nothing happen. Generous on purpose: the header condenses on scroll,so a jump settles with LESS chrome than this reserves. */[id]{scroll-margin-block-start:9rem}

/* ---- from pricing.html block 3 ---- */
/* VC-MOBILEBAR-V1 */
.vc-util{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1C2338;color:#F4ECDF;padding:8px 16px;font-size:.85rem}
.vc-util a{color:#F4ECDF;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.vc-util-num{font-weight:700}
/* Matched to the Cremations of Dallas strip: a quiet underlined action,not a second filled button competing with the phone number. */.vc-util-dot{width:8px;height:8px;border-radius:50%;background:#B08F5B;flex:none;display:inline-block}
@media (max-width:1024px){
.vc-cookie{bottom:calc(50px + env(safe-area-inset-bottom,0px))!important}
}

/* ---- from pricing.html block 4 :: VC-HDR-FIT-V1 ---- */
/* __VC-HDR-FIT-V1__ — the header is a nowrap flex row and at phone widths its items
   overshoot the container,pushing button.nav-toggle off the right edge where
   body{overflow-x:hidden}
clips it. Measured 2026-08-21 at a 375px layout
   viewport: 1.1 of the button's 44 pixels were visible,so the menu was
   unreachable on every phone.

   The rule that was supposed to prevent this targets `header.site .btn.gold`,a class no header on this site has carried for some time. It matched nothing
   and failed silently.

   These four declarations together return the toggle to fully visible while
   KEEPING the Start Arrangements button,which is deliberate: that page is in
   neither the mobile menu nor the bottom toolbar,so hiding its header button
   would leave a phone with no route to it at all.

   Do not raise the gap or the padding back without re-measuring the toggle at
   375px. The margin here is about 16px. */
@media (max-width: 640px){body header.site > .container{ padding-left:16px; padding-right:16px; gap:8px; }
  body header.site .brand{ min-inline-size:0; }
  body header.site .brand-tag{ display:none; }
  body header.site .btn-nav{ padding-left:10px; padding-right:10px;
                             font-size:.82rem; white-space:nowrap; }}

/* ---- from pricing.html block 5 :: VC-NAV-CTA-V1 ---- */
/* __VC-NAV-CTA-V1__ — /start-arrangements.html was reachable on a phone ONLY through
   the header button. That button is also the item the header-fit fix had to
   fight to keep on screen,so the page had exactly one mobile route and it was
   the fragile one. This adds a second,inside the menu itself.

   Hidden by default and shown only in the OPEN mobile panel: at desktop widths
   the header button is already visible a few pixels away,and two identical
   calls to action side by side is worse than one.

   Selectors are body-prefixed to outrank the per-page inline `nav.primary a`
   rule,the same technique the header-fit block uses. Gold on ink measures
   5.1:1,above the 4.5:1 AA floor for normal text. */
body header.site nav.primary > a.nav-cta{display:none;}
/* No media query,for the same reason as __VC-NAV-OPEN-V1__: .open is only
   ever set by the toggle,and the toggle only appears when the nav is hidden.
   Guarding this at 960 hid the CTA on the 206 pages whose menu opens as wide
   as 1024 - measured at 990px on /pricing.html,where the panel opened with 8
   links and Start Arrangements inside it computed 0x0. */
body header.site nav.primary.open > a.nav-cta{display:inline-flex; justify-content:center; align-items:center;
  margin:0 0 4px; padding:12px 18px; border-radius:999px;
  background:var(--gold,#B08F5B); color:var(--ink,#1C2338);
  font-size:.8rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;}
body header.site nav.primary.open > a.nav-cta::after{content:none;}

/* ---- from pricing.html block 6 :: VC-NAV-OPEN-V1 ---- */
/* __VC-NAV-OPEN-V1__ — pressing the hamburger sets .open on nav.primary,and on 177 of
   the 385 pages nothing in any stylesheet responded to that class: 97 Spanish
   pages and 80 English ones had no rule for it at all,so the button toggled
   state and the panel stayed display:none. Measured on the deployed site.

   NO MEDIA QUERY,on purpose. The class is only ever set by the toggle,and
   the toggle is now only ever visible when the nav is already hidden (see
   nav-4.js),so this cannot fire at a width where the full nav is showing.
   Guarding it with a breakpoint would just reintroduce the mismatch: the pages
   hide their nav at 1024,960,900 and 860 and there is no single number that
   is right for all of them.

   Specificity (0,4,3) beats every existing `nav.primary{display:none}
` at
   (0,1,1). Verified first that no page hides it with !important. */
body header.site nav.primary.open{/* align-items EXPLICITLY, because the base rule is nav.primary{align-items:
     center} and neither .open rule overrode it. Measured on the deployed site
     at 375px: the English panel stretched its CTA to 319px and the Spanish one
     centred the same control at 170px. Same component, two widths, and the
     narrower one is a smaller tap target for no reason. */
  display:flex; flex-direction:column; align-items:stretch;
  position:absolute; top:100%; left:0; right:0; z-index:60;
  background:var(--cream,#FBF6EC);
  padding:24px 28px; gap:16px;
  border-bottom:1px solid var(--line,rgba(28,35,56,.12));
  max-height:calc(100vh - 100%); overflow-y:auto;}

/* ---- from pricing.html block 8 :: VC-UTILBAR-FIT-V1 ---- */
/* __VC-UTILBAR-FIT-V1__ — at phone widths the top utility bar compressed .vc-util-phone
   from its natural 123px down to 95px and,because the number is nowrap,the
   glyphs were painted 18px outside the box and 8px into the Español link.
   Measured on the deployed homepage at a 375px layout viewport.

   The cause is `.vc-util-phone{min-width:0}
`,which removes the automatic
   minimum that normally stops a flex item shrinking below its own content.

   The utility CTA is hidden below 30rem to make the room this needs. It is the
   fourth route to /start-arrangements — the header button,the mobile menu and
   the bottom toolbar all still carry it — and it was occupying 40% of a 375px
   bar while the phone number was the item being squashed.

   Do not restore min-width:0 here without re-measuring the phone's scrollWidth
   against its offsetWidth at 375px. */
@media (max-width: 30rem){body .vc-util{ gap:6px !important; }
  body .vc-util .vc-util-phone{ min-inline-size:max-content !important; flex:0 0 auto !important; }
  body .vc-util .vc-util-lang{ flex:0 0 auto !important; }
  body .vc-util .vc-util-cta{ display:none !important; }}

/* ---- from pricing.html block 9 :: VL-DROPDOWN-FIX-V3 ---- */
/* __VL-DROPDOWN-FIX-V3__ collapse on desktop,EXPAND INSIDE THE OPEN PANEL */
nav.primary .dropdown{position:relative}
nav.primary .dropdown-menu{display:none;position:absolute;top:100%;left:-20px;background:#fff;min-width:240px;padding:12px 0;box-shadow:0 20px 40px -12px rgba(28,35,56,.18);border:1px solid var(--line);z-index:100}
nav.primary .dropdown:hover .dropdown-menu,nav.primary .dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px 20px;font-size:.88rem;color:var(--ink-soft);text-decoration:none}
.dropdown-menu a:hover{background:var(--ivory);color:var(--ink)}
/* THE PANEL IS THE MENU. Keyed on .open,NOT on a viewport width.
   v2 used @media (max-width:1024px) and that was wrong: this site has a
   961-1024px dead band where the nav is still a DESKTOP ROW while that
   query already matches,so the submenu expanded inline and the header
   grew back to 933px with the panel CLOSED. .open exists only while the
   hamburger panel is genuinely open,so it cannot drift with a
   breakpoint. Hover has no effect on touch; this is what makes the 20
   Resources links reachable from a phone. */
nav.primary.open .dropdown{width:100%}
nav.primary.open .dropdown-menu{display:block;position:static;box-shadow:none;border:none;padding:8px 0 8px 16px;min-width:auto;background:transparent}
nav.primary.open .dropdown-menu a{padding:10px 0;font-size:.95rem}