/* ============================================================
   Planfocus — site.css
   Shared design tokens + global chrome (nav, footer, base type).
   Brand aligned with AdviceStudio sister site (Fraunces + Inter Tight,
   navy/teal palette). Teal confirmed from Builder content: #2BDEC6 ~ #29dec7.
   Page-specific styles live inline in each page; component classes in
   components.css.
   ============================================================ */

/* ---- Fonts (Google Fonts) — AdviceStudio brand: Fraunces + Inter Tight ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Inter+Tight:wght@400;500;600;700&display=swap');

/* ---- Design tokens ---- */
:root {
  /* brand palette */
  --navy: #244554;
  --navy-deep: #1a3340;
  --teal: #29dec7;
  --teal-ink: #0f766e;
  --coral: #ff6665;          /* from content rgba(255,102,101,1) */

  /* neutrals — live site uses navy #244554 for both headings and body text */
  --ink: #244554;
  --body: #3b4b54;
  --muted: #7b7c7c;          /* from content rgba(123,124,124,1) */
  --line: #e2e8f0;           /* from content #e2e8f0 */
  --bg: #ffffff;
  --bg-alt: #f6f9f9;

  /* type — AdviceStudio brand: Fraunces (headings) + Inter Tight (body) */
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 12px;
  --shadow: 0 6px 24px rgba(36, 69, 84, 0.08);
}

/* ---- Base ---- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Decorative elements (e.g. the blog hero graphic) intentionally bleed off
     the right viewport edge; clip that overflow so it doesn't create a
     horizontal scrollbar. Vertical scrolling is unaffected. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 600; }

p { margin: 0 0 1rem; }

a { color: var(--teal-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--coral); color: #fff; }
.btn--primary:hover { background: #ef5453; }
.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--connect { background: var(--coral); color: #fff; padding: .55rem 1.5rem; border-radius: 8px; font-weight: 700; }
.btn--connect:hover { background: #ef5453; }

.site-nav__cta-group { display: flex; align-items: center; gap: .9rem; }
.site-nav__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: #cfe3e8; background: rgba(255,255,255,0.08);
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav__social:hover { color: #fff; background: rgba(255,255,255,0.16); }

/* ---- Global nav — floating bar that sticks/expands on scroll (live behaviour) ---- */
.site-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.25rem var(--gutter) 0;   /* top gap makes it "float" at rest */
  background: transparent;
  transition: padding .25s ease;
}
.site-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--navy);
  border-radius: 14px;                /* fully rounded while floating */
  box-shadow: 0 10px 30px rgba(26, 51, 64, 0.22);
  transition: border-radius .25s ease, max-width .25s ease, box-shadow .25s ease;
}
/* Stuck state: full-width top bar once the user scrolls */
.site-nav-wrap.is-stuck {
  padding: 0;
}
.site-nav-wrap.is-stuck .site-nav {
  max-width: none;
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(26, 51, 64, 0.18);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 66px;
  padding-inline: 1.5rem;
  position: relative;
}
.site-nav__logo { display: inline-flex; align-items: center; }
.site-nav__logo img { display: block; height: 34px; width: auto; }

/* Bare header for ABM offer/landing pages: logo only, no menu, no CTA
   competing with the page's own offer. Centered rather than left-aligned
   since there's no nav to balance against on the right. */
.site-nav--bare .site-nav__inner { justify-content: center; }
.site-nav__links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
/* Centered between the logo and the Health Check button rather than just
   left-anchored after the logo. A 3-column grid (not absolute positioning)
   so the center column is squeezed by the real logo/button widths instead
   of overlapping them once the viewport gets narrow. */
@media (min-width: 861px) {
  .site-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: initial; }
  .site-nav__logo { grid-column: 1; justify-self: start; }
  .site-nav__toggle { grid-column: 2; }
  .site-nav__links { grid-column: 2; justify-self: center; flex-wrap: wrap; row-gap: .35rem; }
  .site-nav__cta-group { grid-column: 3; justify-self: end; }
}
.site-nav__links a { color: #e6edf0; font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; }
.site-nav__links a:hover { color: #fff; text-decoration: none; }
.site-nav__links a[aria-current="page"] { color: var(--teal); border-bottom-color: var(--teal); }
.site-nav__toggle { display: none; color: #fff; }

@media (max-width: 860px) {
  .site-nav__links {
    position: absolute;
    inset: 66px 0 auto;
    flex-direction: column;
    background: var(--navy);
    margin: 0;
    padding: 1rem 1.5rem;
    border-radius: 0 0 14px 14px;
    display: none;
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__cta-group { display: none; }
  .site-nav__toggle {
    display: inline-flex;
    background: none;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
  }
}

/* ---- Global footer ---- */
.site-footer {
  background: var(--navy-deep);
  color: #cdd8de;
  padding-block: 3rem;
}
.site-footer a { color: #cdd8de; }
.site-footer a:hover { color: var(--teal); }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}