/* =========================================================================
   theme.css - base, tokens, buttons, utilities, motion, lessons-baked-in
   References theme.json presets via short aliases.
   Brand: violet family = structure/identity; blue accent = action/emphasis ONLY.
   ========================================================================= */

:root {
  --brand-dark: var(--wp--preset--color--brand-dark);
  --brand: var(--wp--preset--color--brand);
  --brand-light: var(--wp--preset--color--brand-light);
  --accent: var(--wp--preset--color--accent);
  --accent-light: var(--wp--preset--color--accent-light);
  --ink: var(--wp--preset--color--ink);
  --grey: var(--wp--preset--color--grey);
  --line: var(--wp--preset--color--line);
  --off: var(--wp--preset--color--off-white);
  --white: var(--wp--preset--color--white);
  --success: var(--wp--preset--color--success);
  --cyan: var(--wp--preset--color--data-cyan);
  --r-sm: var(--wp--custom--radius--sm);    /* 12px - buttons */
  --r: var(--wp--custom--radius--md);       /* 16px - cards */
  --r-lg: var(--wp--custom--radius--lg);    /* 18px - large cards/panels */
  --shadow-card: var(--wp--custom--shadow--card);
  --shadow-lift: var(--wp--custom--shadow--lift);
  --shadow-glow: var(--wp--custom--shadow--glow);
  --t-fast: var(--wp--custom--transition--fast);
  --t-base: var(--wp--custom--transition--base);
  --ease: cubic-bezier(.22,1,.36,1); /* raw easing for JS-driven transitions */
  --ls-label: var(--wp--custom--letter-spacing--label);
  --ls-btn: var(--wp--custom--letter-spacing--button);
  --grad-text: var(--wp--custom--gradient--text);
  --grad-cta: var(--wp--custom--gradient--cta);
  --head: var(--wp--preset--font-family--heading);
  --body: var(--wp--preset--font-family--body);
}

/* LESSON: overflow-x: clip (NOT hidden) - 'hidden' silently kills position:sticky */
html { overflow-x: clip; }
body { overflow-x: clip; margin: 0; color: var(--ink); font-family: var(--body); line-height: 1.7; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }

/* Layout containers (widened per Dave 16 Jul: better use of desktop space) */
.container { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.container.narrow, .narrow { max-width: 820px; }

/* LESSON: WP flow layout injects block-gap margins in TWO places and both show
   as thin white gaps between full-bleed sections:
   1. between #main's top-level blocks (section vs section), and
   2. at the ROOT between template-level blocks (.wp-site-blocks > * + *),
      i.e. between <main> and the footer template part.
   Kill both; sections own their spacing via padding. (Overlapping elements like
   the trust pill re-apply their negative margin with an #main-scoped rule.
   body prefix outranks core's rule regardless of stylesheet order.) */
#main > * { margin-block-start: 0; margin-block-end: 0; }
body .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* Section rhythm */
.section { padding-block: clamp(56px, 8vw, 110px); }
.section-white { background: var(--white); }
.section-off { background: var(--off); }
.section-dark { background: var(--brand-dark); color: var(--white); }

/* Eyebrow + headings (violet = structure) */
.eyebrow { font-family: var(--head); font-size: 12px; font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--brand); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.eyebrow.center { justify-content: center; }
.eyebrow-line { width: 28px; height: 2px; background: var(--grad-cta); display: inline-block; }
.section-dark .eyebrow { color: var(--brand-light); }
.section-title { font-family: var(--head); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4vw, 2.75rem); color: var(--ink); margin: 0 0 18px; }
.section-title.on-dark { color: var(--white); }
.section-title.center { text-align: center; }
.section-sub, .section-body { font-size: var(--wp--preset--font-size--md); color: var(--grey); line-height: 1.75; }
.section-sub.center { text-align: center; max-width: 680px; margin-inline: auto; }
.section-dark .section-sub, .section-dark .section-body { color: rgba(255,255,255,0.75); }

/* Signature gradient text (the brand's key move - hero emphasis line, key figures) */
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; display: inline-block; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { color: var(--brand); background: none; }
}

/* Buttons (one spec, reused; treatment from the approved galway-hero design). */
.btn, .wp-block-button__link { font-family: var(--body); font-size: 15px; font-weight: 600;
  letter-spacing: var(--ls-btn); text-decoration: none; border-radius: var(--r-sm);
  padding: 14px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; border: 0; line-height: 1.2; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background var(--t-base), color var(--t-base), border-color var(--t-base); }
.btn-primary { background: var(--grad-cta); color: #fff;
  box-shadow: 0 16px 30px -12px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -12px rgba(124,58,237,.72); }
.btn-primary:hover::after { left: 130%; }
.btn-secondary { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.4); }
.btn-secondary:hover { transform: translateY(-3px); border-color: var(--accent-light); color: var(--accent-light); }
.btn-ghost { background: #fff; color: var(--brand); border: 1.5px solid #E0D8F5; box-shadow: var(--wp--custom--shadow--card); }
.btn-ghost svg { width: 17px; height: 17px; color: var(--brand); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 14px 26px -14px rgba(124,58,237,.4); }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }

/* Links on dark surfaces: white with a violet underline (blue-on-indigo fails
   contrast and looks muddy). Buttons excluded. */
.section-dark a:not(.btn), .texture-dark a:not(.btn), .bgsec--dark a:not(.btn),
.cta-section a:not(.btn), .side-cta a:not(.btn), .exit-modal a:not(.btn) {
  color: #fff; text-decoration: underline; text-decoration-color: var(--brand-light);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.section-dark a:not(.btn):hover, .texture-dark a:not(.btn):hover, .bgsec--dark a:not(.btn):hover,
.cta-section a:not(.btn):hover, .side-cta a:not(.btn):hover, .exit-modal a:not(.btn):hover {
  color: var(--brand-light); text-decoration-color: #fff; }

/* Check list (green = semantic positive) */
.check-list { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .check { color: var(--success); font-weight: 800; flex: 0 0 auto; }

/* Card grids + image uniformity (LESSON: aspect-ratio on the CONTAINER) */
.card-grid > li, .card-grid .wp-block-post-template > li { list-style: none; }
.card-img, .card-grid .wp-block-post-featured-image {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r);
  margin: 0 0 16px; background: var(--line);
}
.card-img a, .card-img img, .card-grid .wp-block-post-featured-image a, .card-grid .wp-block-post-featured-image img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}

/* Motion: reveal (works with plain JS IntersectionObserver in site.js; GSAP optional) */
.reveal, .reveal-left, .reveal-right { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal.in, .reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .05s; } .reveal.d2 { transition-delay: .15s; }
.reveal.d3 { transition-delay: .25s; } .reveal.d4 { transition-delay: .35s; }
/* FAILSAFE: if JS never runs, show everything (no stuck-invisible content) */
.no-js .reveal, .no-js .reveal-left, .no-js .reveal-right { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* GSAP layer (motion.js): elements it claims get .g-own so the CSS transition
   never fights the tween; the scroll-progress bar is created by motion.js. */
.g-own { transition: none !important; }
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--grad-cta);
  transform-origin: left center; transform: scaleX(0); z-index: 2000; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }
/* ScrollSmoother shell (created by motion.js on fine-pointer desktop only).
   Fixed UI (nav/menus/bars) is re-parented to <body> so it stays truly fixed. */
#smooth-wrapper { position: fixed; inset: 0; overflow: hidden; top: var(--wp-admin--admin-bar--height, 0px); }
#smooth-content { min-height: 100vh; width: 100%; overflow: visible; }
/* Magnetic buttons: GSAP owns transform; keep the other hover transitions alive.
   !important: later-loading component rules (.nav-cta) re-add transform otherwise. */
.magnet { transition-property: box-shadow, background-color, color, border-color, filter !important; }

/* Accessibility utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand-dark); color: #fff; padding: 10px 16px; z-index: 100001; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }