/* Whyso — base layer (after tokens) */

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-fg-default);
  background: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--r-sm); }

/* ─── Typography ──────────────────────────────────────────
 * Scoped to content contexts only (Fortico sections, post content,
 * blog archive). This prevents heading/font rules from bleeding into
 * WP admin sidebars, modals, or other editor chrome.
 */
.fs h1, .fs h2, .fs h3, .fs h4, .fs h5, .fs h6,
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6,
.blog-archive h1, .blog-archive h2, .blog-archive h3, .blog-archive h4 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--sp-300);
  color: inherit;
}
.fs h1, .post-content h1, .blog-archive h1 { font-size: var(--fs-900); }
.fs h2, .post-content h2, .blog-archive h2 { font-size: var(--fs-900); }
.fs h3, .post-content h3, .blog-archive h3 { font-size: var(--fs-700); }
.fs h4, .post-content h4, .blog-archive h4 { font-size: var(--fs-500); }

.fs p { margin: 0 0 var(--sp-300); }
.fs p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--surface-fg-muted, var(--color-fg-muted));
  margin: 0 0 var(--sp-300);
}

.lead { font-size: var(--fs-500); color: var(--surface-fg-muted, var(--color-fg-muted)); }

/* ─── Surface system ─────────────────────────────────────── */
.fs[data-surface="cream"] {
  --surface-bg:        var(--color-cream);
  --surface-fg:        var(--color-black);
  --surface-fg-muted:  var(--color-grey);
  --surface-card-bg:   #ffffff;
  --surface-divider:   rgb(27 28 38 / 0.08);
}
.fs[data-surface="dark"] {
  --surface-bg:        var(--color-black);
  --surface-fg:        var(--color-cream);
  --surface-fg-muted:  rgb(244 239 228 / 0.65);
  --surface-card-bg:   rgb(255 255 255 / 0.03);
  --surface-divider:   rgb(244 239 228 / 0.12);
}
.fs[data-surface="white"] {
  --surface-bg:        #ffffff;
  --surface-fg:        var(--color-black);
  --surface-fg-muted:  var(--color-grey);
  --surface-card-bg:   var(--color-cream);
  --surface-divider:   rgb(27 28 38 / 0.08);
}

.fs {
  background: var(--surface-bg);
  color: var(--surface-fg);
  padding-block: var(--sp-800);
}
.fs h1, .fs h2, .fs h3, .fs h4, .fs h5, .fs h6 { color: var(--surface-fg); }
.fs p { color: inherit; }
.fs .lead, .fs .eyebrow { color: var(--surface-fg-muted); }

.fs__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─── Layouts ────────────────────────────────────────────── */
.fs[data-layout="split-60-40"] .fs__inner {
  display: grid;
  gap: var(--sp-700);
  align-items: center;
}
@media (min-width: 900px) {
  .fs[data-layout="split-60-40"] .fs__inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}

.fs[data-layout="50-50"] .fs__inner {
  display: grid;
  gap: var(--sp-600);
}
@media (min-width: 900px) {
  .fs[data-layout="50-50"] .fs__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-700);
    align-items: start;
  }
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-200); align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-100);
  padding: var(--sp-200) var(--sp-400);
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-300);
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn::after { content: " →"; transition: transform var(--t-fast); }
.btn:hover::after { transform: translateX(2px); }

.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: #e63629; }

.btn--ghost {
  background: transparent;
  color: var(--surface-fg, var(--color-fg-default));
  border-color: var(--surface-divider, rgb(27 28 38 / 0.15));
}
.btn--ghost:hover {
  background: var(--surface-fg);
  color: var(--surface-bg);
  border-color: var(--surface-fg);
}

.btn--text { color: var(--surface-fg, var(--color-fg-default)); padding-inline: 0; border: 0; }
.btn--text:hover { color: var(--color-primary); }

/* ─── Site header ────────────────────────────────────────── */
.site-header {
  background: var(--color-cream);
  padding-block: var(--sp-300);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-400);
}
.site-header__logo { display: inline-flex; }
.site-header__logo .whyso-logo { height: 32px; width: auto; color: var(--color-black); }
@media (min-width: 700px) {
  .site-header__logo .whyso-logo { height: 50px; }
}

.site-header__nav { display: none; }
@media (min-width: 900px) {
  .site-header__nav { display: block; flex: 1; margin-left: var(--sp-500); }
}
.site-header__menu,
.site-header__cta-menu {
  display: flex;
  gap: var(--sp-400);
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}
.site-header__menu a {
  font-size: var(--fs-300);
  color: var(--color-black);
  transition: color var(--t-fast);
}
.site-header__menu a:hover { color: var(--color-red); }
.site-header__menu .current-menu-item > a { color: var(--color-red); }

.site-header__ctas { display: flex; gap: var(--sp-200); align-items: center; }
.site-header__cta-menu { gap: var(--sp-200); }

/* Header pills: smaller than default .btn */
.site-header__ctas .btn,
.site-header__cta-menu li > a {
  padding: var(--sp-100) var(--sp-300);
  font-size: var(--fs-200);
}
.site-header__cta-menu li > a:not(.btn) {
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
}

/* ─── Site footer ────────────────────────────────────────── */
.site-footer {
  background: var(--color-black);
  color: var(--color-cream);
  padding-block: var(--sp-700) var(--sp-400);
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--color-red); }
.site-footer__top {
  display: grid;
  gap: var(--sp-600);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-600);
  border-bottom: 1px solid rgb(244 239 228 / 0.12);
}
@media (min-width: 800px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-700); }
}
.site-footer__brand .whyso-logo { height: 36px; width: auto; color: var(--color-cream); margin-bottom: var(--sp-300); }
@media (min-width: 700px) {
  .site-footer__brand .whyso-logo { height: 50px; }
}
.site-footer__tagline { color: rgb(244 239 228 / 0.7); max-width: 36ch; }
.site-footer__col h5 {
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgb(244 239 228 / 0.5);
  margin-bottom: var(--sp-200);
}
.site-footer__menu { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-100); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200) var(--sp-300);
  padding-top: var(--sp-300);
  font-size: var(--fs-100);
  color: rgb(244 239 228 / 0.5);
  align-items: center;
}

/* Legals — pipe-separated inline list */
.site-footer__legals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200);
  align-items: center;
}
.site-footer__legals li { display: flex; align-items: center; }
.site-footer__legals li + li::before {
  content: "|";
  margin-right: var(--sp-200);
  opacity: 0.5;
  color: inherit;
}

/* ─── Gravity Forms — Orbital theme overrides ────────────── *
 * GF 2.5+: parent = .gform_wrapper.gform-theme--orbital,
 * style via --gf-ctrl-* custom properties on the wrapper.
 */
.gform_wrapper.gform-theme--orbital {
  --gf-ctrl-radius: var(--r-pill);
  --gf-ctrl-border-color-default: var(--surface-divider, rgb(27 28 38 / 0.15));
  --gf-ctrl-border-color-focus: var(--color-primary);
  --gf-ctrl-bg-color-default: var(--surface-card-bg, #ffffff);
  --gf-ctrl-color: var(--color-fg-default);
  --gf-ctrl-padding-y: var(--sp-200);
  --gf-ctrl-padding-x: var(--sp-300);
  --gf-ctrl-font-size: var(--fs-300);
  --gf-ctrl-font-family: var(--ff-body);
  --gf-ctrl-btn-bg-color-primary: var(--color-primary);
  --gf-ctrl-btn-color-primary: var(--color-on-primary);
  --gf-ctrl-btn-bg-color-hover-primary: #e63629;
  --gf-ctrl-btn-radius: var(--r-pill);
  --gf-ctrl-btn-font-family: var(--ff-display);
  --gf-ctrl-btn-font-weight: var(--fw-medium);
}

/* ─── 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;
  top: var(--sp-200);
  left: var(--sp-200);
  padding: var(--sp-200) var(--sp-300);
  background: var(--color-black);
  color: var(--color-cream);
  border-radius: var(--r-md);
  transform: translateY(-150%);
  transition: transform var(--t-base);
  z-index: 1000;
}
.skip-link:focus { transform: translateY(0); }

/* ─── Blog (matches whyso.uk pattern) ────────────────────── */

.blog-archive { padding-block: var(--sp-800); }
.blog-archive__header {
  max-width: 60ch;
  margin-bottom: var(--sp-700);
}
.blog-archive__title {
  font-size: var(--fs-900);
  margin-bottom: var(--sp-300);
}
.blog-archive__description {
  font-size: var(--fs-400);
  color: var(--color-fg-muted);
}

.blog-grid { display: grid; gap: var(--sp-500); }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  position: relative; /* for overlay link */
  display: flex; flex-direction: column;
  background: #ffffff;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.blog-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* No visual styling — purely a click-area for the whole card. */
}

.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-cream);
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.blog-card:hover .blog-card__media img { transform: scale(1.03); }

/* Letter avatar fallback when no featured image */
.blog-card__letter {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-cream);
  background: var(--color-black);
  user-select: none;
}
.blog-card__letter[data-tone="red"]    { background: var(--color-red);    color: #ffffff; }
.blog-card__letter[data-tone="purple"] { background: var(--color-purple); color: #ffffff; }
.blog-card__letter[data-tone="blue"]   { background: var(--color-blue);   color: #ffffff; }
.blog-card__letter[data-tone="black"]  { background: var(--color-black);  color: var(--color-cream); }

.blog-card__body {
  position: relative;
  padding: var(--sp-400);
  display: flex; flex-direction: column;
  gap: var(--sp-200);
  flex: 1;
}
.blog-card__category {
  position: relative; /* lift above overlay so it's independently clickable */
  z-index: 2;
  display: inline-flex;
  padding: var(--sp-100) var(--sp-300);
  border-radius: var(--r-pill);
  background: var(--color-cream);
  color: var(--color-black);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  align-self: flex-start;
  transition: background var(--t-fast), color var(--t-fast);
}
.blog-card__category:hover { background: var(--color-red); color: #ffffff; }

.blog-card__meta {
  display: flex;
  gap: var(--sp-100);
  font-size: var(--fs-100);
  color: var(--color-fg-muted);
}
.blog-card__title {
  font-size: var(--fs-500);
  margin: 0;
  line-height: 1.25;
  color: inherit;
  transition: color var(--t-fast);
}
.blog-card:hover .blog-card__title { color: var(--color-red); }

.blog-card__excerpt {
  font-size: var(--fs-300);
  color: var(--color-fg-muted);
  margin: 0;
  flex: 1;
}
.blog-card__read {
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-300);
  color: var(--color-red);
  margin-top: var(--sp-100);
}

/* Single post */
.single-post { background: var(--color-cream); }

.post-hero { padding-block: var(--sp-700) var(--sp-400); }
.post-hero__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-300);
}
.post-hero__category {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--sp-100) var(--sp-300);
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--color-black);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.post-hero__category:hover { background: var(--color-red); color: #ffffff; }
.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-100) var(--sp-300);
  font-size: var(--fs-200);
  color: var(--color-fg-muted);
}
.post-hero__title { font-size: var(--fs-900); margin: 0; }

.post-featured {
  max-width: 1080px;
  margin: 0 auto var(--sp-500);
  padding-inline: var(--container-pad);
}
.post-featured img { border-radius: var(--r-lg); width: 100%; height: auto; }

.post-content {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--sp-400) var(--container-pad) var(--sp-700);
  font-size: var(--fs-400);
  line-height: 1.7;
  color: var(--color-fg-default);
}
.post-content > p { margin-bottom: var(--sp-300); }
.post-content h2 {
  font-size: var(--fs-700);
  margin-top: var(--sp-700);
  margin-bottom: var(--sp-300);
}
.post-content h3 {
  font-size: var(--fs-500);
  margin-top: var(--sp-500);
  margin-bottom: var(--sp-200);
}
.post-content img {
  border-radius: var(--r-lg);
  margin-block: var(--sp-400);
  width: 100%; height: auto;
}
.post-content blockquote {
  border-left: 3px solid var(--color-red);
  padding-left: var(--sp-400);
  margin: var(--sp-500) 0;
  font-size: var(--fs-500);
  font-style: italic;
  color: var(--color-fg-default);
}
.post-content ul,
.post-content ol {
  padding-left: 0;
  list-style: none;
  margin-block: var(--sp-400);
}
.post-content ul li,
.post-content ol li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: var(--sp-200);
}
.post-content ul li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-red);
}
.post-content ol { counter-reset: ol-counter; }
.post-content ol li { counter-increment: ol-counter; }
.post-content ol li::before {
  content: counter(ol-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-red);
  font-weight: var(--fw-bold);
}
.post-content a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: opacity var(--t-fast);
}
.post-content a:hover { opacity: 0.7; }
/* Don't underline image links */
.post-content a:has(img) {
  text-decoration: none;
  display: inline-block;
}

.post-foot { padding-block: var(--sp-500); border-top: 1px solid rgb(27 28 38 / 0.08); }
.post-foot__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  gap: var(--sp-400);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .post-foot__inner { grid-template-columns: 1fr 1fr; } }
.post-foot__group h5 {
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--sp-200);
}
.post-foot__cats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-100); }
.post-foot__cats a {
  display: inline-flex;
  padding: var(--sp-100) var(--sp-300);
  border-radius: var(--r-pill);
  background: #ffffff;
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.post-foot__cats a:hover { background: var(--color-red); color: #ffffff; }

.post-nav { padding-block: var(--sp-500); }
.post-nav__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-300);
  flex-wrap: wrap;
}

.pagination {
  display: flex; gap: var(--sp-200); justify-content: center;
  margin-top: var(--sp-700);
}
.pagination .page-numbers {
  padding: var(--sp-200) var(--sp-300);
  border-radius: var(--r-pill);
  border: 1px solid var(--surface-divider, rgb(27 28 38 / 0.1));
}
.pagination .current { background: var(--color-black); color: var(--color-cream); border-color: var(--color-black); }

/* Fortico section blocks used INLINE in blog posts — reduce vertical padding
 * and reset container padding so they sit cleanly inside the prose column.
 * (FAQ is the main use case.) */
.post-content .fs {
  padding-block: var(--sp-400);
  margin-block: var(--sp-500);
}
.post-content .fs > .fs__container {
  padding-inline: 0;
}
/* TLDR card has no .fs wrapper — but reset list-marker behaviour from
 * post-content's prose styling so its own list markup wins. */
.post-content .tldr-card { margin-block: var(--sp-500); }

/* ─── Scroll animations ──────────────────────────────────── */

/* Default state — hidden until they enter the viewport */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-anim="fade"]      { transform: none; }
[data-anim="fade-right"] { transform: translateX(-32px); }
[data-anim="fade-left"]  { transform: translateX(32px); }
[data-anim="zoom-in"]    { transform: scale(0.96); }

/* Active state — applied by IntersectionObserver in main.js */
[data-anim].is-in {
  opacity: 1;
  transform: none;
}

/* Stagger children of a container as they come in */
[data-anim-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-anim-stagger].is-in > * {
  opacity: 1;
  transform: none;
}
[data-anim-stagger].is-in > *:nth-child(1) { transition-delay:  60ms; }
[data-anim-stagger].is-in > *:nth-child(2) { transition-delay: 160ms; }
[data-anim-stagger].is-in > *:nth-child(3) { transition-delay: 260ms; }
[data-anim-stagger].is-in > *:nth-child(4) { transition-delay: 360ms; }
[data-anim-stagger].is-in > *:nth-child(5) { transition-delay: 460ms; }
[data-anim-stagger].is-in > *:nth-child(6) { transition-delay: 560ms; }
[data-anim-stagger].is-in > *:nth-child(7) { transition-delay: 660ms; }
[data-anim-stagger].is-in > *:nth-child(n+8) { transition-delay: 760ms; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Block editor: animations rely on IntersectionObserver running in main.js,
 * which doesn't execute inside Gutenberg's iframe. Show everything immediately
 * in the editor canvas so blocks render visibly without needing user interaction. */
.editor-styles-wrapper [data-anim],
.editor-styles-wrapper [data-anim-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}