/* ===========================================================
   PREP LIKE NOAH — PAGE CHROME STYLES
   -----------------------------------------------------------
   Styling for <pln-nav>, <pln-masthead> and <pln-foot>
   (assets/chrome.js). It lives apart from pln-base.css so the
   home page can take the shared bar WITHOUT the base sheet's
   body rules, which would fight its Tailwind layout.

   Any page using the chrome elements loads this; pln-base.css
   imports it, so the interior pages get it for free.
   =========================================================== */

/* The components name their own faces. pln-base.css defines --disp/--body,
   but the home page deliberately does not load it, so without a fallback the
   nav there inherited Tailwind's default stack and rendered at a different
   weight from every other page. A shared component that depends on the host
   page for its type is not shared. */
:root {
  --chrome-disp: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --chrome-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nav-h: 64px;
}
@media (min-width: 768px) { :root { --nav-h: 72px; } }

/* ——— the hosts ———
   A custom element is display:inline until told otherwise. That matters for
   the footer: pln-base makes <body> a flex column and pins the footer down
   with margin-top:auto, but the auto margin was on .site-foot INSIDE the
   host, so the flex child was an inline <pln-foot> and the footer floated up
   the page with background below it. The host carries the layout; the inner
   element just paints. */
pln-nav, pln-masthead, pln-foot { display: block; }
/* The home page does not load pln-base, so the chrome carries its own. */
pln-nav button, pln-nav [role="button"] { cursor: pointer; }
pln-foot { margin-top: auto; }
pln-masthead { background: var(--page); }

/* ——— top bar ——— */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(27,50,59,.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(44,32,16,.18);
}
.topbar .wrap { position: relative; display: flex; align-items: center; justify-content: center; height: var(--nav-h); }
.topbar-links { display: flex; align-items: center; gap: 40px; font-family: var(--chrome-body); }
.topbar-links a {
  position: relative; display: inline-block; padding: 6px 0;
  color: rgba(255,255,255,.85); font-size: .95rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; transition: color .2s ease;
}
.topbar-links a:hover, .topbar-links a:focus-visible, .topbar-links a.is-active { color: #fff; }
.topbar-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--rust); transition: width .25s ease;
}
.topbar-links a:hover::after, .topbar-links a.is-active::after { width: 100%; }
.burger { display: none; position: absolute; right: 24px; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; border-radius: 6px; }
.burger svg { width: 26px; height: 26px; }
.topbar-mobile {
  box-sizing: border-box; font-family: var(--chrome-body); color: #fff;
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(340px, calc(100% - 32px)); max-width: none;
  height: 100vh; height: 100dvh; max-height: none;
  border: 0; padding: 20px 24px max(24px, env(safe-area-inset-bottom));
  background: #132429; text-align: left; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -12px 0 40px rgba(0,0,0,.25);
}
.topbar-mobile[open] { animation: mobile-menu-in .22s ease-out; }
.topbar-mobile::backdrop { background: rgba(13,26,32,.6); }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: 20px; font-weight: 700; }
.mobile-menu-close { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: #fff; font: inherit; font-size: 28px; cursor: pointer; }
.topbar-mobile a:focus-visible, .mobile-menu-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes mobile-menu-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .topbar-mobile[open] { animation: none; } }
.topbar-mobile a {
  display: block; padding: 14px 0; color: rgba(255,255,255,.9); font-weight: 600;
  font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1);
}
.topbar-mobile a:last-child { border-bottom: none; }
@media (max-width: 767px) { .topbar-links { display: none; } .burger { display: block; } }

/* ——— masthead ———
   THE page heading. One spec, used by every interior page: Gear, ReadyScore,
   Resources and the three planners. Centred, one h1 scale, one standfirst
   size, and the masthead owns the space beneath itself so the next section
   never has to guess.

   This was five different headings before, each with its own alignment, sub
   size and padding, which is why no two pages lined up. If a page needs
   something different, change it HERE and accept it everywhere, or it starts
   over again. */
.masthead {
  background: var(--page);
  padding: 72px 0 40px;
  text-align: center;
}
.masthead h1 {
  font-family: var(--chrome-disp); font-weight: 600;
  font-size: clamp(38px, 5.2vw, 56px); line-height: 1.06;
  letter-spacing: .005em; text-transform: uppercase; color: var(--head);
  margin: 0; text-wrap: balance;
}
/* ReadyScore, and only ReadyScore, carries a shield above the title and the
   accent on READY. Both are opt-in attributes on the element, so no other
   page picks them up and the heading spec itself does not fork. */
.masthead__ico {
  display: block; width: 52px; height: 52px; margin: 0 auto 14px;
  color: var(--rust); font-size: 42px; line-height: 1;
}
.masthead__accent { color: var(--rust); }

/* The standfirst, and the affiliate line, are the same thing wearing two
   names: one sentence under the title. Same size, same measure, same space. */
/* A tool page is narrower than the rest of the site, so its heading follows
   the tool column instead of the site wrap. One edge per page. */
.tl-page-head .wrap { max-width: var(--tool-outer); }
/* A tool page puts a back link above its heading, so the masthead does not
   also need to clear the nav. 72px there plus the link's own space left a
   bare strip across the top of every planner. */
.tl-page-head .masthead { padding-top: 26px; }
/* A tool page slips the privacy line between the heading and the form, so the
   masthead stops owning the gap below itself and that line owns it instead.
   Both firing is what gave a wide gap above it and a narrow one below. */
.tl-page-head .masthead { padding-bottom: 0; }   /* host carries the class, header carries .masthead */

.masthead p,
.masthead .disclosure {
  font-family: var(--chrome-body); font-size: 20px; line-height: 1.35; color: var(--muted);
  margin: 22px auto 0; max-width: 42rem;
}

/* ——— footer ——— */
.site-foot { font-family: var(--chrome-body); background: #2f4d5a; color: rgba(255,255,255,.82); padding: 30px 0; font-size: 16px; flex: none; }
.site-foot .wrap { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.site-foot a { color: #d4e3ea; font-weight: 600; }