/* AThetaLife • Button Fixpack (contrast + consistency)
   Uses token variables from tokens.css. No local :root overrides. */

/* ---- Base .btn ---- */
.btn {
  /* default to primary tokens */
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --fg: var(--btn-primary-text);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.05rem;
  border-radius: var(--btn-radius, 12px);
  border: 1px solid transparent;
  background: var(--bg);
  color: var(--fg);
  font-weight: var(--btn-font-w, 600);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.08));
  transition:
    background var(--dur-2, .18s) var(--ease-std, cubic-bezier(.2,.65,.3,1)),
    border-color var(--dur-2, .18s) var(--ease-std, cubic-bezier(.2,.65,.3,1)),
    transform var(--dur-2, .18s) var(--ease-std, cubic-bezier(.2,.65,.3,1)),
    box-shadow var(--dur-2, .18s) var(--ease-std, cubic-bezier(.2,.65,.3,1)),
    color var(--dur-2, .18s) var(--ease-std, cubic-bezier(.2,.65,.3,1));
}

.btn:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-primary-ring);
}

/* Disabled / aria-disabled */
.btn:where(:disabled, [aria-disabled="true"]) {
  opacity: .6;
  pointer-events: none;
  filter: saturate(.9);
}

/* ---- Variants (token-driven) ---- */
.btn-primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --fg: var(--btn-primary-text);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-primary-bg);
}
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-primary-ring);
}

/* Outline/ghost helpers (tokenized) */
.btn-outline {
  background: transparent;
  color: var(--brand, #4b3f72);
  border-color: var(--brand, #4b3f72);
  box-shadow: none;
}
.btn-outline:hover {
  background: color-mix(in oklab, var(--brand, #4b3f72), white 90%);
}
@supports not (background: color-mix(in oklab, white, black)) {
  .btn-outline:hover { background: rgba(75,63,114,.08); }
}

.btn-outline:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-primary-ring);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--brand, #4b3f72);
}
.btn-ghost:hover {
  background: color-mix(in oklab, var(--brand, #4b3f72), white 90%);
}
@supports not (background: color-mix(in oklab, white, black)) {
  .btn-ghost:hover { background: rgba(75,63,114,.08); }
}

/* Size helpers */
.btn-sm { padding: .55rem .8rem; font-size: .95rem; border-radius: 10px; }
.btn-lg { padding: .9rem 1.2rem; font-size: 1.05rem; }

/* Prefer HTML to use <a class="btn btn-primary">…</a>.
   If you can't change HTML yet, the rule below styles that CTA minimally. */
a[href="#how-it-works"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.1rem;
  border-radius: var(--btn-radius, 12px);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: var(--btn-font-w, 600);
  border: 1px solid var(--btn-primary-bg);
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.08));
}
a[href="#how-it-works"]:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}
a[href="#how-it-works"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-primary-ring);
}

/* ---- Reduced motion respect ---- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  a[href="#how-it-works"] {
    transition: none;
    transform: none;
  }
}

/* === Global, responsive page gutters (load LAST) === */
:root {
  /* Feel free to map these to your tokens if you have them */
  --page-gutter-min: 16px;          /* phones */
  --page-gutter-max: 48px;          /* desktops */
  --page-gutter: clamp(var(--page-gutter-min), 4vw, var(--page-gutter-max));
}

/* Ensure sizing behaves as expected */
*, *::before, *::after { box-sizing: border-box; }

/* Apply gutters to the whole document */
html, body {
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left, 0px));
  /* Right side also respects safe area */
  padding-right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
}

/* Keep common wrappers away from the edges too (defensive) */
main, header, footer, .container, .content, .page, .timeline-page {
  padding-inline: var(--page-gutter);
}

/* --- Timeline-specific nudge (so labels/years never touch edges) --- */
.timeline, .timeline-header, .year-grid, .milestones, .you-are-here {
  padding-inline: var(--page-gutter);
}

/* If any section truly needs full-bleed, add .full-bleed to it */
.full-bleed {
  padding-inline: 0 !important;
  margin-inline: calc(50% - 50vw); /* extend to viewport edges */
}

/* Long words or narrow devices shouldn’t overflow */
:where(p, h1, h2, h3, h4, h5, h6, .label, .badge, .milestone-text) {
  overflow-wrap: anywhere;   /* modern */
  word-break: normal;        /* better readability */
}

/* ==== TEMP: Hide all skip links sitewide (easy to revert) ==== */
/* Matches your standard .skip-link and common href targets used in skip links */
a.skip-link,
a[href="#main"],
a[href="#content"],
a[href="#primary"],
a[href^="#main-content"] {
  display: none !important;
}

/* === Shrink homepage hourglass to ~40% of old size === */
.home .hero .hero-hourglass {
  max-width: 224px;      /* 40% of 560px */
  margin-inline: auto;
}

.home .hero .hero-hourglass img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   AThetaLife • Hourglass sizing fix (v2025-11-18)
   Force hero hourglass to a smaller, responsive size
   ========================================= */

.home .hero-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home .hourglass-figure {
  margin: 0;
  /* 40% of the hero width, with an upper bound */
  max-width: 40%;
  max-width: min(40%, 320px);
}

.home .hourglass-svg {
  display: block;
  width: 100%;   /* Fill the figure’s width */
  height: auto;  /* Maintain aspect ratio */
}

/* === Home CTA band – lighten the background for better contrast === */
.home .cta-band {
  /* Soft, ~10% tint instead of solid brand block */
  background: color-mix(in srgb, var(--brand) 10%, var(--bg) 90%);
  color: var(--ink);
}

/* Ensure the CTA button still pops */
.home .cta-band .btn.btn-primary {
  background: var(--brand);
  color: #ffffff !important;  /* white text on brand button in CTA band */
}

/* ==============================================
   AThetaLife — Timeline refinements
   ============================================== */

/* 1) Bring the header (and Back to Calculator) closer to the timeline */
.timeline-main .timeline-header-section {
  margin-bottom: var(--space-3);  /* was larger in timeline.css */
}

.timeline-main .timeline-actions {
  margin-bottom: var(--space-2);  /* reduce the gap above the timeline */
}

/* 2) Unified timeline action buttons:
      - Back to Calculator (in .timeline-actions)
      - "You Are Here" chip (under the timeline)
      - Save Notes (primary button in notes panel)
*/

/* Back to Calculator — reuse btn token system but change colors */
.timeline-main .timeline-actions .btn {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --fg: #e6e6e6;          /* light gray text */
}

/* Save Notes — keep it primary, but shift text to light gray */
.timeline-main .year-notes-actions .btn.btn-primary {
  --fg: #e6e6e6;          /* light gray text */
}

/* "You Are Here" chip under the rail */
.timeline-main .you-are-here .flag {
  background: var(--btn-primary-bg);
  color: #e6e6e6;         /* light gray text */
  border-radius: var(--btn-radius, 12px);
  padding: 0.55rem 1.1rem;
  font-weight: 600;
}

/* Shared hover treatment for all three */
.timeline-main .timeline-actions .btn:hover,
.timeline-main .year-notes-actions .btn.btn-primary:hover,
.timeline-main .you-are-here .flag:hover {
  background: var(--btn-primary-bg-hover);
}

/* Keep the current-year rail label clearly visible */
.timeline-year--current .timeline-year-label {
  color: #ffffff;
}
/* ==========================================
   AThetaLife — Improve contrast for:
   • You Are Here chip
   • Save Notes button
   ========================================== */

/* Option B (stronger): Force white text for clarity */
.you-are-here .flag,
.year-notes-actions .btn.btn-primary {
  color: #ffffff !important;
}

/* Option A (softer brightness): lighten background ~60% */
.you-are-here .flag,
.year-notes-actions .btn.btn-primary {
  background: color-mix(in srgb, var(--btn-primary-bg) 40%, #ffffff 60%) !important;
}

/* Hover state – slightly darker for feedback */
.you-are-here .flag:hover,
.year-notes-actions .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--btn-primary-bg-hover) 50%, #ffffff 50%) !important;
}
/* =========================================
   AThetaLife • Global header + nav styling
   Match homepage styling on all pages
   ========================================= */

.site-header {
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-1);
}

.site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}

.site-logo .theta-mark {
  font-size: 1.4rem;
}

.site-title {
  font-size: var(--fs-500);
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
}

.site-nav a {
  font-weight: 500;
  color: var(--ink);
}

.site-nav a:hover {
  color: var(--brand);
}

/* Primary nav CTA (Sign in) */
.btn-nav-primary {
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-bg);
}

.btn-nav-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}
/* =========================================
   AThetaLife — Global site-title serif font
   ========================================= */

.site-logo .site-title {
  font-family: "Bookman Old Style", Bookman, "URW Bookman", serif;
  font-weight: 700;
  font-size: 1.45rem;     /* ensures uniform size across all pages */
  letter-spacing: 0.5px;  /* optional visual polish */
  margin: 0;
}
/* =========================================
   AThetaLife — Global Header Background + Border
   Match CTA band tint, add dark brown border
   ========================================= */

.site-header {
  background: color-mix(in srgb, var(--brand) 10%, var(--bg) 90%); /* light brown tint */
  border-bottom: 1px solid #5a3d2a;  /* dark brown 1-point line */
  padding: var(--space-3) var(--space-4);
  box-shadow: none;  /* cleaner look now that border is present */
}
.site-header .site-title,
.site-header .site-nav a {
  color: var(--ink);   /* ensures contrast on brown background */
}

.btn-nav-primary {
  background: var(--brand);
  color: #ffffff;
}

/* =========================================
   AThetaLife — Header/Footer brand shell polish
   - Match footer to header
   - Subtle gradient
   - Dark brown separators in nav
   - Title drop-shadow
   ========================================= */

:root{
  /* Light brown tint used for header/footer */
  --shell-bg: color-mix(in srgb, var(--brand) 10%, var(--bg) 90%);
  /* Dark brown border/separator */
  --shell-border: #5a3d2a;
}

/* Header */
.site-header{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--shell-bg) 92%, #ffffff 8%),
    var(--shell-bg)
  );
  border-bottom: 1px solid var(--shell-border);
  box-shadow: none;
}

/* Footer (match header) */
.site-footer{
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--shell-bg) 92%, #ffffff 8%),
    var(--shell-bg)
  );
  border-top: 1px solid var(--shell-border);
}

/* Ensure footer text stays readable */
.site-footer,
.site-footer a{
  color: var(--ink);
}

/* Title drop-shadow for better legibility */
.site-logo .site-title{
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.18);
}

/* Dark brown separators between nav links (desktop) */
.site-nav a{
  position: relative;
}

.site-nav a + a{
  padding-left: calc(var(--space-4) + 12px);
}

.site-nav a + a::before{
  content: "";
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.2em;
  background: color-mix(in srgb, var(--shell-border) 80%, transparent 20%);
}

/* Don’t draw a separator before the Sign in pill */
.site-nav .btn-nav-primary + a::before,
.site-nav a + .btn-nav-primary::before{
  content: none;
}

/* Keep the Sign in pill looking intentional on the tinted shell */
.btn-nav-primary{
  border-color: color-mix(in srgb, var(--shell-border) 35%, transparent 65%);
}

/* =========================================
   Header buttons — force white text for contrast
   ========================================= */

.site-header .btn,
.site-header .btn-primary,
.site-header .btn-nav-primary {
  color: #ffffff !important;
}
/* =========================================
   Footer navigation — spacing + readability
   ========================================= */

.site-footer .footer-nav {
  display: flex;
  gap: 2.5rem;          /* wider separation between links */
  text-align: center
} 
 
.site-footer .footer-nav a {
  font-size: 16pt;      /* requested size */
  font-weight: 500;
}

/* =========================================
   Timeline range display — size + centering
   ========================================= */

.timeline-range {
  font-size: 16pt;
  text-align: center;
  margin: var(--space-3) auto var(--space-4);
  max-width: 100%;
}
/* =========================================
   Footer navigation — center links
   ========================================= */

.site-footer .footer-nav {
  display: flex;
  justify-content: center;   /* center the group */
  align-items: center;
  gap: 2.5rem;               /* keeps your widened spacing */
  text-align: center;
}

body.page-id-268 .wp-block-site-title,
body.page-id-268 .wp-block-site-title a,
body.page-id-268 .wp-block-site-tagline{
  font-family: Georgia, "Times New Roman", serif !important;
}

body.page-id-XX .wp-block-site-tagline{
  margin-bottom: .4rem !important;
}

/* =========================================
   Nav: "Your Timeline" as brown/brass button
   Requires menu item class: nav-timeline-button
   ========================================= */

.nav-timeline-button a{
  /* deep brown base with slight gradient */
  background: linear-gradient(180deg, #6a4a35, #4a3224);
  color: #f7f2e8 !important;               /* warm off-white */
  padding: 0.55rem 0.95rem;
  border-radius: 999px;

  /* brass edge + subtle depth */
  border: 1px solid rgba(205, 170, 110, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 22px rgba(0, 0, 0, 0.20);

  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;

  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.nav-timeline-button a:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 14px 26px rgba(0, 0, 0, 0.26);
}

.nav-timeline-button a:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Optional: show it's the active page without screaming */
.nav-timeline-button.current-menu-item a,
.nav-timeline-button.current_page_item a{
  outline: 2px solid rgba(205, 170, 110, 0.55);
  outline-offset: 2px;
}

/* =========================================
   Reduce vertical gap between tagline
   and page title on Timeline page
   ========================================= */

body.page .wp-block-site-tagline{
  margin-bottom: var(--space-2) !important;  /* tighten below tagline */
}

body.page h1.wp-block-post-title,
body.page h1.wp-block-heading{
  margin-top: 0 !important;   /* remove top spacing */
}

/* =========================================
   TIMELINE PAGE: remove big theme gap
   between header tagline and page content
   Replace PAGECLASS with the real body class
   e.g. body.page-your-timeline
   ========================================= */

body.page-your-timeline main.wp-block-group{
  margin-top: 0 !important;              /* removes the huge default gap */
  padding-top: var(--space-2) !important; /* keeps a small, intentional gap */
}

/* Tighten title spacing (optional but usually needed) */
body.page-your-timeline h1.wp-block-heading,
body.page-your-timeline h1.wp-block-post-title{
  margin-top: 0 !important;
}

/* =========================================
   TIMELINE PAGE: remove large theme spacing
   between header tagline and page content
   ========================================= */

/* Remove top margin from main content wrapper */
body.page-your-timeline .wp-site-blocks{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove block spacing above the page title */
body.page-your-timeline .wp-block-post-title{
  margin-top: 0 !important;
}

/* Ensure tagline does not push content down */
body.page-your-timeline .wp-block-site-tagline{
  margin-bottom: var(--space-2) !important;
}

/* =========================================
   TIMELINE PAGE — remove 4 tokens of
   theme spacing between header and content
   ========================================= */

body.page-your-timeline .wp-site-blocks > main{
  margin-top: calc(var(--space-8) * -1) !important;  /* pulls content up */
}

/* =========================================
   Your Timeline page — remove excess gap
   between Site Header (tagline) and Timeline
   ========================================= */

/* A) Pull up the MAIN area (theme often gives it a big margin-top) */
body.page-your-timeline main.wp-block-group{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* B) Reduce bottom spacing in the HEADER template-part wrapper */
body.page-your-timeline header.wp-block-template-part .wp-block-group{
  padding-bottom: var(--space-2) !important; /* try space-1 if needed */
  margin-bottom: 0 !important;
}

/* C) If the theme uses block-gap to create separation, tighten it here */
body.page-your-timeline .wp-site-blocks{
  --wp--style--block-gap: var(--space-2);
}

body.page-your-timeline h1{ outline: 3px solid lime !important; }

/* === TEMP DIAGNOSTIC: show which element owns the gap === */
body.page-your-timeline header.wp-block-template-part { outline: 3px solid red !important; }
body.page-your-timeline .wp-site-blocks > main       { outline: 3px solid blue !important; }
body.page-your-timeline .timeline-main               { outline: 3px solid lime !important; }

/* TEMP GLOBAL TEST — should be obvious on every page */
html { outline: 6px solid magenta !important; }