/*!
Theme Name: amy-theme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Custom theme for Amy Daniels, fantasy author — Dark Theme
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: amy-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
*/

/* ============================================================
   SELF-HOSTED FONTS
   Downloaded from Google Fonts CDN and served locally.
   Benefits: GDPR compliance (no IP leakage to Google), full
   reliability (no external CDN dependency), 1-year browser
   cache via .htaccess, zero third-party network requests.
   Files live in assets/fonts/.
   ============================================================ */

@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/im-fell-english-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/im-fell-english-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   CSS CUSTOM PROPERTIES — Dark Theme
   All values from colors.txt [DARK] section + shared vars
   ============================================================ */

:root {
  /* Typography */
  --font-display: 'IM Fell English', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;

  /* Colors — Dark Theme (from colors.txt [DARK]) */
  --color-background: #0F1520;
  --color-header: #0F1520;
  --color-card: #1D2951;
  --color-card-2: #243060;
  --color-accent: #2E5A47;        /* darkened for WCAG AA contrast on button text */
  --color-accent-hover: #4E8B6E; /* clearly lighter hover — visible difference from base */
  --color-accent-2: #D8BFD8;
  --color-text: #E8ECF4;
  --color-text-muted: #B8A8C0;
  --color-text-on-dark: #E8ECF4;
  --color-link-hover: #4E8A6E;

  /* Spacing scale — reduced ~15% from original to open up the layout */
  --space-xs: 7px;
  --space-s: 14px;
  --space-m: 20px;
  --space-l: 40px;
  --space-xl: 68px;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 60px;

  /* Responsive section padding — mobile default, overridden at each breakpoint */
  --section-padding: 16px;

  /* Decorative — same across all themes */
  --color-stars: #F5A623;
}

@media (min-width: 768px) {
  :root { --section-padding: 24px; } /* tablet */
}

@media (min-width: 1024px) {
  :root { --section-padding: 32px; } /* desktop */
}

/* ============================================================
   CSS RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ============================================================
   BASE STYLES
   ============================================================ */

html {
  scroll-behavior: smooth;
  /* Offset anchor scrolling so sticky header doesn't overlap target */
  scroll-padding-top: var(--nav-height);
}

/* Respect user motion preferences — WCAG 2.1 SC 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    /* !important needed to override animation declarations at any specificity */
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background-color: var(--color-background);
  background-image: radial-gradient(
    ellipse at 50% 40%,
    rgba(30, 110, 100, 0.12) 0%,
    rgba(15, 21, 32, 0) 60%
  );
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75; /* increased from 1.6 — more comfortable reading rhythm */
}

/*
 * Subtle noise texture layered over the page background.
 * Applied to <main> only so the header and footer are unaffected.
 * SVG feTurbulence generates seamless fractal noise; opacity on the rect
 * keeps it dreamlike rather than distracting. background-attachment:fixed
 * makes the grain feel like a static lens layer as the page scrolls.
 */
#main-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  line-height: 1.2;
}

p {
  margin-bottom: 0;
}

/* ============================================================
   ACCESSIBILITY — SKIP LINK
   Visually hidden until focused; links keyboard users past nav
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 12px 24px;
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  z-index: 9999;
  overflow: visible;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(15, 21, 32, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 236, 244, 0.08);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.25);
  height: var(--nav-height);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.site-header.scrolled {
  background-color: rgba(15, 21, 32, 0.8);
  border-bottom-color: rgba(232, 236, 244, 0.25);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: 1440px;
  padding: 0 var(--space-xl);
  margin: 0 auto;
}

.site-logo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-logo:hover {
  color: var(--color-link-hover);
}

.primary-nav {
  position: relative;
  display: flex;
  align-items: center;
}

/* Nav menu list */
.nav-list {
  display: none;
  flex-direction: column;
  position: absolute;
  top: var(--nav-height);
  right: 0;
  background: var(--color-header);
  padding: var(--space-m);
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  list-style: none;
  margin: 0;
}

.nav-list.is-open {
  display: flex;
}

.nav-list li {
  list-style: none;
}

.nav-list a {
  display: block;
  font-family: var(--font-body);
  font-size: 1.5rem; /* 24px */
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-xs) 0;
  letter-spacing: 0.08em; /* polished editorial spacing */
  transition: color 0.2s ease;
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--color-link-hover);
}

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0;
}

/* Hamburger toggle — mobile only */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.nav-toggle:hover .hamburger-line,
.nav-toggle:focus .hamburger-line {
  background-color: var(--color-link-hover);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sub-360px: extra-small phones (WCAG 1.4.10 reflow) */
@media (max-width: 360px) {
  .nav-list a {
    font-size: 1.25rem; /* down from 1.5rem — fits narrow viewports */
  }

  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .hero-tagline {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }

  .btn-buy {
    font-size: 0.875rem;
    padding: 10px 16px;
  }
}

/* Desktop nav: horizontal layout */
@media (min-width: 768px) {
  .nav-list {
    display: flex;
    flex-direction: row;
    align-items: center; /* vertically centres links with the Amy Daniels logo */
    position: static;
    padding: 0;
    gap: var(--space-l); /* 48px — matches Figma */
    background: none;
    box-shadow: none;
    min-width: unset;
  }

  .nav-list a {
    padding: 0;
  }

  .nav-toggle {
    display: none;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-background);
  border-top: 1px solid rgba(232, 236, 244, 0.15);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-m) var(--space-m);
}

.footer-bottom {
  text-align: center;
  padding: var(--space-s) var(--space-m);
  border-top: 1px solid rgba(232, 236, 244, 0.15);
}

.footer-bottom p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.footer-nav {
  margin: 0;
  align-self: flex-start;
}

.footer-domain {
  font-family: var(--font-body);
  font-size: 1.5rem; /* 24px — matches Figma */
  color: var(--color-text);
}

.footer-social {
  display: flex;
  gap: var(--space-xs); /* 8px — matches Figma */
  align-items: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  color: var(--color-text);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.social-icon:hover,
.social-icon:focus {
  color: var(--color-link-hover);
  background-color: rgba(255, 255, 255, 0.08);
}

.social-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.social-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Footer nav */
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 16px gap */
  margin: 0;
  padding: 0;
}

.footer-nav-list li {
  list-style: none;
}

.footer-nav-list a {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.12em;
  transition: color 0.2s ease;
}

.footer-nav-list a:hover,
.footer-nav-list a:focus {
  color: var(--color-link-hover);
}

.footer-nav-list a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Tablet + desktop footer: two-column layout */
@media (min-width: 600px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-l) var(--space-m);
  }

  .footer-nav-list {
    align-items: flex-start;
  }
}

/* ============================================================
   LANDING PAGE — HERO
   ============================================================ */

.landing-page {
  width: 100%;
}

.hero-section {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--nav-height));  /* fallback */
  min-height: calc(100svh - var(--nav-height)); /* full viewport on desktop */
  background-color: var(--color-background);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Dark overlay so text is legible over the hero image */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 21, 32, 0.55);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l); /* 48px */
  max-width: var(--max-width);
  width: 100%;
  padding: var(--space-m) var(--space-m) var(--space-xl);
  text-align: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 24px */
  width: 100%;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem); /* 64px on desktop — matches Figma */
  font-style: normal;
  color: var(--color-text);
  line-height: 1.1;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.5rem); /* 24px on desktop */
  color: var(--color-text); /* white — matches hero title, client request */
  max-width: 860px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Hero book covers */
.hero-books {
  display: flex;
  flex-direction: row; /* row on all screen sizes */
  flex-wrap: wrap;     /* wraps on very small screens if needed */
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-s); /* tighter gap on mobile */
}

.hero-book-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: var(--color-text);
}

.hero-book-cover {
  width: clamp(90px, 25vw, 150px); /* scales with viewport: 90px mobile → 150px desktop */
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.6); /* matches Figma */
  display: block;
}

.hero-book-title {
  font-family: var(--font-display);
  font-size: 1.54rem; /* scaled to match cover reduction */
  font-style: normal;
  color: var(--color-text);
  text-align: center;
  width: 150px; /* matches cover width */
  padding-top: var(--space-xs);
  line-height: 1.2;
}

/* Scroll-down arrow */
.hero-scroll-arrow {
  position: absolute;
  bottom: var(--space-l); /* increased from --space-m (24px) to --space-l (48px) for more breathing room */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-text);
  transition: color 0.2s ease, transform 0.2s ease;
}

.hero-scroll-arrow:hover {
  color: var(--color-link-hover);
  transform: translateX(-50%) translateY(4px);
}

.hero-scroll-arrow:active {
  color: var(--color-link-hover);
  transform: translateX(-50%) translateY(2px);
}

/* Reset mouse-click focus so colour fades back to default via transition */
.hero-scroll-arrow:focus:not(:focus-visible):not(:hover) {
  color: var(--color-text);
  transform: translateX(-50%);
  outline: none;
}

/* Keyboard focus — keep outline ring for accessibility */
.hero-scroll-arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 50%;
}

.hero-scroll-arrow svg {
  width: 32px;
  height: 32px;
}

/* Mobile hero: reduce height so background image isn't over-cropped */
@media (max-width: 1023px) {
  .hero-section {
    min-height: 60vh;
    min-height: 60svh;
  }
}

/* Mobile hero: extra bottom padding to keep book covers clear of scroll arrow */
@media (max-width: 767px) {
  .hero-content {
    padding-bottom: calc(var(--space-xl) + 48px); /* arrow height + breathing room */
  }
}

/* Mobile hero: 4 books per row, smaller covers to reduce vertical height */
@media (max-width: 767px) {
  .hero-books {
    justify-content: center;
    width: 100%;
    flex-wrap: nowrap; /* all 4 in one row */
    gap: var(--space-xs);
  }
  .hero-book-link {
    flex: 1 1 0;
    max-width: 90px;
    position: relative; /* contains the visually-hidden title span */
  }
  .hero-book-cover {
    width: 100%;
    max-width: none;
  }
  .hero-book-title {
    /* Visually hidden — keeps title in accessibility tree as the link's
       discernible name for screen readers, but hides it visually since
       the covers are too cramped to show text at this size. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Desktop hero: full-size book row */
@media (min-width: 768px) {
  .hero-books {
    flex-wrap: nowrap;
    gap: var(--space-m); /* 24px — matches Figma */
  }
}

@media (min-width: 1280px) {
  .hero-title {
    font-size: 4rem; /* 64px */
  }

  .hero-tagline {
    font-size: 1.5rem; /* 24px */
  }
}

/* ============================================================
   LANDING PAGE — DECORATIVE SEPARATOR LINES
   ============================================================ */

/* Shared line style */
.section-divider {
  width: calc(100% - (var(--space-m) * 2));
  max-width: var(--max-width);
  margin: 0 auto;
  height: 1px;
  background: rgba(232, 236, 244, 0.2);
  border: none;
  display: block;
}

/*
 * First divider — between hero and reviews.
 * Figma node 274:179: explicit h-[96px] container, w-[1200px].
 * 47px top + 1px line + 47px bottom ≈ 96px total,
 * then the reviews-section's 80px padding-top stacks after,
 * giving 176px hero→Reviews-title gap — matching Figma exactly.
 */
.divider-wrap--hero {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 47px 0 0;
  box-sizing: border-box;
}

/*
 * Second divider — between reviews and contact.
 * Figma node 274:202: h-[160px] container.
 * The reviews-section bottom padding (80px) + hr (1px) + contact-section
 * top padding (80px) already approximates 160px, so no wrapper needed.
 */

/* ============================================================
   LANDING PAGE — REVIEWS
   ============================================================ */

.reviews-section {
  padding: var(--section-padding) var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem); /* 64px on desktop — matches Figma */
  font-style: normal;
  color: var(--color-text);
  text-align: center;
  line-height: 1;
}

.reviews-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: 100%;
  max-width: var(--max-width);
}

.review-card {
  background-color: var(--color-card); /* #1D2951 */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); /* matches Figma */
  border-radius: 8px;
  padding: var(--space-l); /* 40px all sides */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-s); /* matches Figma */
  min-height: 272px; /* matches Figma */
  position: relative;
  overflow: hidden;
}

.review-quote {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;
}

.review-quote-end { white-space: nowrap; }

.review-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: auto; /* push stars + source to bottom of card */
  color: var(--color-stars);
  font-size: 1.5rem; /* 24px — matches Figma star size */
  line-height: 1;
}

.review-source {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px — matches Figma Body/Small */
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-xs); /* small gap between stars and source line */
}

/* Desktop reviews: three-column row */
@media (min-width: 1024px) {
  .reviews-grid {
    flex-direction: row;
    gap: var(--space-m);
    justify-content: space-between;
    align-items: stretch; /* all cards grow to match the tallest */
  }

  .review-card {
    flex: 1;       /* fluid — fills available space equally */
    min-width: 0;  /* prevents flex overflow */
    max-width: 384px; /* caps at Figma size on wide screens */
  }
}

@media (min-width: 1280px) {
  .section-title {
    font-size: 4rem;
  }
}

/* ============================================================
   LANDING PAGE — CONTACT SECTION
   ============================================================ */

.contact-section {
  padding: var(--section-padding) var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}

/* Pin the heading to the same width as the card so both start/stop at the same x */
.contact-section .section-title {
  max-width: 792px;
  width: 100%;
  text-align: center;
}

.contact-box {
  background-color: var(--color-card); /* #1D2951 — matches Figma */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 48px; /* equal on all four sides */
  width: 100%;
  max-width: 792px;
  position: relative;
  overflow: hidden;
}

/* WPForms styling to match Figma HD dark theme
   Note: !important is required throughout — WPForms injects its own stylesheet
   that overrides theme styles on input backgrounds, label colours, and buttons. */
.contact-box .wpforms-container,
.contact-box .wpforms-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Stack fields with consistent gap */
.contact-box .wpforms-field-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: 0;
}

/* Baseline: everything inside the form inherits the site body font */
.contact-box .wpforms-container,
.contact-box .wpforms-container * {
  font-family: var(--font-body) !important;
}

/* Each field row: no individual card — spacing only */
.contact-box .wpforms-field {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Labels — body font, above the input */
.contact-box .wpforms-field-label {
  font-family: var(--font-body) !important;
  font-size: 1.25rem !important;
  color: var(--color-text) !important;
  font-style: normal !important;
  font-weight: normal !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Required asterisk — accent green ties the form into the site palette */
.contact-box .wpforms-required-label {
  color: var(--color-accent) !important;
  font-size: 0.85rem !important;
}

/* Inputs and textarea — transparent so field bg shows through */
.contact-box input[type="text"],
.contact-box input[type="email"],
.contact-box textarea {
  background-color: var(--color-card-2) !important;
  border: 1px solid rgba(232, 236, 244, 0.15) !important;
  border-radius: 4px !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.contact-box input[type="text"]:focus,
.contact-box input[type="email"]:focus,
.contact-box textarea:focus {
  border-color: rgba(77, 138, 110, 0.7) !important;
  box-shadow: none !important;
}

/* Placeholder text colour */
.contact-box input::placeholder,
.contact-box textarea::placeholder {
  color: rgba(232, 236, 244, 0.35) !important;
}

.contact-box textarea {
  min-height: 160px !important;
  resize: vertical !important;
}

/* Character counter and helper text — white body font */
.contact-box .wpforms-field-description,
.contact-box .wpforms-field-sublabel,
.contact-box .wpforms-field-limit-text {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
  font-size: 0.85rem !important;
}

/* Validation errors */
.contact-box .wpforms-error {
  color: #f08080 !important;
  font-size: 0.85rem !important;
  margin-top: 4px !important;
}

/* ── Submit button — pill shape matching .btn-buy ── */
.contact-box .wpforms-submit-container {
  text-align: center;
  padding-top: var(--space-s); /* small gap between last field and button */
}

.contact-box .wpforms-submit {
  background-color: var(--color-accent) !important; /* same green as .btn-buy */
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  border: none !important;
  border-radius: 50px !important; /* pill — matches .btn-buy */
  padding: 12px 64px !important;
  cursor: pointer !important;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.2s ease !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

.contact-box .wpforms-submit:hover {
  background-color: var(--color-accent-hover) !important;
  transition: background-color 0.2s ease !important; /* ensure transition fires on both enter AND exit */
}

.contact-box .wpforms-submit:active {
  background-color: var(--color-accent-hover) !important;
  transition: background-color 0.2s ease !important;
}

/* Reset lingering focus ring after click (same pattern as .btn-buy) */
.contact-box .wpforms-submit:focus:not(:focus-visible):not(:hover) {
  background-color: var(--color-accent) !important;
  outline: none !important;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important;
}

.contact-box .wpforms-submit:focus-visible {
  outline: 2px solid var(--color-accent-hover) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-page {
  padding: var(--section-padding) var(--space-m);
}

.about-inner {
  max-width: var(--max-width); /* 1200px — matches books page */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-padding);
}

.about-name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem); /* 64px — matches Figma */
  font-style: normal;
  color: var(--color-text);
  text-align: center;
  line-height: 1.1;
}

.about-photo {
  width: 100%;
  display: flex;
  justify-content: center;
}

.author-photo {
  width: clamp(160px, 40vw, 280px);
  height: clamp(160px, 40vw, 280px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Side-by-side row containing bio (left) and awards (right) */
.about-cards-row {
  background-color: var(--color-card); /* #1D2951 — matches book-series container */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  width: 100%;
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .about-cards-row {
    flex-direction: row;
    align-items: stretch;
  }
}


.bio-card {
  background-color: var(--color-card-2); /* #243060 — matches Figma */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); /* matches Figma */
  border-radius: 8px;
  padding: var(--space-l); /* 32px — matches Figma */
  flex: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 16px — matches Figma */
  position: relative;
  overflow: hidden;
}

.bio-label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-style: normal;
  color: var(--color-text);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid rgba(232, 236, 244, 0.15); /* matches awards divider */
  line-height: 1.2;
  text-align: center;
}

.bio-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.5rem); /* 16px mobile → 24px desktop — matches Figma */
  color: var(--color-text-muted);
  line-height: 1.6;
}

.bio-text p {
  margin-bottom: var(--space-s);
}

.bio-text p:last-child {
  margin-bottom: 0;
}

.shipping-address {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(232, 236, 244, 0.15);
  text-align: center;
}

.shipping-address-label {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.shipping-address-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--color-text-muted);
  font-style: normal; /* override browser default italic on <address> */
  line-height: 1.6;
}

/* ============================================================
   ABOUT PAGE — AWARDS CARD
   Matches the bio card style exactly: same bg, shadow, padding,
   and font choices. Only renders when awards have been added.
   ============================================================ */

.awards-card {
  background-color: var(--color-card-2); /* #243060 — matches bio card */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); /* matches Figma */
  border-radius: 8px;
  padding: var(--space-l); /* 32px — matches bio card */
  flex: 2;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 16px — matches bio card gap */
  box-sizing: border-box;
  position: relative;
}


.awards-label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-style: normal;
  color: var(--color-text);
  line-height: 1.2;
  text-align: center;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid rgba(232, 236, 244, 0.15); /* same subtle rule as .series-heading */
}

/* List of award rows */
.awards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 24px between each award */
}

/* Awards expand toggle — mirrors the awards-list layout inside series-extra */
.awards-card .series-extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* Divider connecting the last visible award to the first hidden one */
.awards-card .series-extra .award-item:first-child {
  border-top: 1px solid rgba(232, 236, 244, 0.15);
  padding-top: var(--space-m);
}

/*
 * Phantom gap correction for awards button.
 * .awards-card has gap: var(--space-s). When .series-extra is collapsed it still
 * consumes a gap on each side (2 × 14px = 28px above the button). The card's
 * bottom padding is var(--space-l) = 40px. To equalise both sides we add
 * calc(var(--space-l) - 2 * var(--space-s)) = 12px, bringing the visual space
 * above to 28px + 12px = 40px — matching the padding below.
 */
.awards-card .series-expand-btn {
  margin-top: calc(var(--space-l) - 2 * var(--space-s));
}

.awards-card .series-extra.is-open + .series-expand-btn {
  margin-top: 0;
}

/* Single award — image centered above title and description */
.award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
}

/* Divider between awards */
.award-item + .award-item {
  border-top: 1px solid rgba(232, 236, 244, 0.15);
  padding-top: var(--space-m);
  margin-top: var(--space-s);
}

/* Award image link — subtle hover effect when URL is set */
.award-image-link {
  display: block;
  border-radius: 50%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.award-image-link:hover {
  transform: scale(1.08);
  outline: none;
}

.award-image-link:focus-visible {
  transform: scale(1.08);
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Badge */
.award-image-wrap {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
}

.award-image,
.award-image-wrap img {
  /* !important overrides WordPress inline width/height attributes on <img> tags */
  width: 70px !important;
  height: 70px !important;
  max-width: 70px;
  max-height: 70px;
  object-fit: contain;
  display: block;
}

/* Title — sits beside badge, wraps naturally */
.award-title {
  flex: 0 1 auto;
  overflow-wrap: break-word;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.3;
  align-self: center;
}

/* Description — full width row below badge + title */
.award-description {
  flex: 0 0 100%;
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  padding-top: var(--space-xs);
  text-align: center;
}

/* Narrow screens: shrink badge slightly */
@media (max-width: 400px) {
  .award-image-wrap {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
  }
  .award-image,
  .award-image-wrap img {
    /* !important overrides WordPress inline width/height on <img> — same reason as above */
    width: 50px !important;
    height: 50px !important;
    max-width: 50px;
    max-height: 50px;
  }
  .award-title {
    font-size: 1.1rem;
  }

  /* Shrink book covers on very small phones */
  .book-cover-wrap {
    max-width: 180px;
  }
  .book-cover-wrap img {
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .book-cover-wrap {
    max-width: 200px;
  }
  .book-cover-wrap img {
    max-width: 200px;
  }
}

/* ============================================================
   BOOKS PAGE
   ============================================================ */

.books-page {
  padding: var(--space-l) var(--space-m);
}

.books-inner {
  max-width: var(--max-width); /* 1200px */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}

.books-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem); /* 64px — matches Figma */
  font-style: normal;
  color: var(--color-text);
  text-align: center;
  line-height: 1.1;
  width: 100%;
}

/* Series navigation pills — only rendered when 2+ series exist. */
.series-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  padding: var(--space-s) var(--space-m);
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
  border-radius: 50px;
  background-color: rgba(15, 21, 32, 0.85);
  backdrop-filter: blur(8px);
}

.series-nav a {
  background: var(--color-card);
  color: var(--color-text);
  border-radius: 50px;
  padding: 8px 20px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.series-nav a:hover {
  background-color: var(--color-accent);
}

/* Series banner image — optional, sits above the series heading. */
.series-banner {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: var(--space-m);
}

/* Series description — short blurb beneath the series heading. */
.series-description {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-text-muted);
  line-height: 1.6;
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-m);
}

/*
 * Series heading — sits inside the top of each .book-series card.
 * Styled like the page title but lives within the dark card context.
 * Multiple series cards are separated by the 80px gap in .books-inner.
 */
.series-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-style: normal;
  color: var(--color-text);
  text-align: center;
  line-height: 1.1;
  width: 100%;
  padding-bottom: var(--space-m); /* breathing room before first book card */
  border-bottom: 1px solid rgba(232, 236, 244, 0.15); /* subtle divider under series name */
}

/* Book series container — the colored bg rectangle from Figma node 274:67 */
.book-series {
  background-color: var(--color-card); /* #1D2951 — matches Figma */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); /* matches Figma */
  border-radius: 8px;
  width: 100%;
  padding: var(--section-padding) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* gap between cards on mobile */
}

/* Individual book card */
.book-card {
  background-color: var(--color-card-2); /* #243060 — matches Figma */
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-m);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/*
 * Left group — wraps cover + info together so they share the same height.
 * align-items: stretch makes .book-info grow to match the cover image height,
 * which lets justify-content: space-between push the buttons flush with the
 * cover's bottom edge.
 */
.book-card-left {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-shrink: 0;
}

.book-cover-wrap {
  display: flex;
  align-items: flex-start; /* image sits at top; wrap can be taller than image */
  flex-shrink: 0;
}

.book-cover {
  width: clamp(140px, 20vw, 220px); /* fluid: 140px mobile → 220px desktop */
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border-radius: 2px;
  box-shadow:
    1px 2px 4px  rgba(0, 0, 0, 0.30),
    2px 5px 14px rgba(0, 0, 0, 0.15);
}

.book-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
}

/* Tablet/mobile book card: pin title to top and buttons to cover bottom,
   and add breathing room between the cover edge and the text. */
@media (max-width: 1023px) {
  .book-info {
    justify-content: space-between;
    padding: var(--space-s) var(--space-s) 0 var(--space-m);
  }
}

/* Mobile/tablet — full vertical stack: cover → title → buttons → description */
@media (max-width: 1199px) {
  .book-card {
    padding: var(--space-m);
    gap: var(--space-m);
  }

  .book-card-left {
    flex-direction: column;
    align-items: center;
  }

  .book-cover-wrap {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }

  .book-cover-wrap img {
    width: 100%;
    height: auto;
    max-width: 260px;
    max-height: 50vh;
    object-fit: cover;
  }

  .book-info {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: var(--space-s) 0 0 0;
    justify-content: flex-start;
    gap: var(--space-m);
  }

  .book-title {
    text-align: center;
    font-size: 1.75rem;
  }

  .book-buttons {
    justify-content: center;
    flex-wrap: nowrap;
  }

  .book-buttons .btn-buy {
    flex: 1;
    min-width: 0;
  }

  .book-description {
    text-align: center;
    font-size: 0.95rem;
  }
}

.book-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-style: normal;
  color: var(--color-text);
  text-align: center;
  line-height: 1.2;
}

.book-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
}

.book-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}


.book-description p {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px */
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}

/* Desktop book cards: horizontal layout — [cover + info] | description */
@media (min-width: 1200px) {
  .book-series {
    padding: var(--section-padding) var(--space-xl);
    gap: 32px;
  }

  .book-card {
    flex-direction: row;  /* left-group + description side by side */
    align-items: flex-start;
    padding: var(--space-m);
    min-height: 340px; /* matches Figma card height */
    gap: 0;
  }

  /* Left group holds cover + info together — fixed width locks the
     description column's left edge identically on every card. */
  .book-card-left {
    flex: 0 0 596px; /* 216px cover + 380px info */
    width: 596px;
    align-items: stretch;
  }

  /* Cover wrap gets a fixed width so it never bleeds into the info column */
  .book-cover-wrap {
    flex: 0 0 216px;
    width: 216px;
  }

  .book-cover {
    width: 216px; /* matches Figma exactly */
  }

  .book-info {
    flex: 0 0 380px; /* wider column — fits side-by-side buttons & reduces title wrapping */
    padding: var(--space-m);
    align-items: center;
    justify-content: space-between; /* title at top, buttons level with cover bottom */
  }

  .book-title {
    text-align: center;
  }

  .book-buttons {
    flex-wrap: nowrap;
    justify-content: flex-start; /* buttons anchor left — single button stays left with empty space on right */
    width: 100%;
  }

  .book-buttons .btn-buy {
    flex: 0 0 calc(50% - calc(var(--space-s) / 2)); /* exactly half the row minus half the gap */
    min-width: 0;
  }

  .book-description {
    flex: 1;
    padding: var(--space-m);
  }

  .book-description p {
    text-align: left; /* left-align without heading above */
  }
}

/* Expand toggle — "Show all N books" per series */
.series-extra {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Once open, JS clears the inline maxHeight — this prevents the base
   max-height:0 from snapping the section shut after the transition ends. */
.series-extra.is-open {
  max-height: none;
}

/*
 * Negative margin-top cancels the phantom flex gap that .series-extra creates
 * even when collapsed (max-height:0). The flex container adds one gap before
 * .series-extra and one after it, so the button ends up with 2× gap above it.
 * Subtracting one gap restores equal spacing above and below the button.
 * When .series-extra is open the negative margin is reset to 0.
 */
.series-expand-btn {
  display: block;
  margin: calc(-1 * var(--space-m)) auto 0;
  background: transparent;
  border: 1px solid rgba(232, 236, 244, 0.25);
  border-radius: 50px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 8px 24px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Desktop gap is 32px, so the negative margin must match. */
@media (min-width: 1200px) {
  .series-expand-btn {
    margin-top: -32px;
  }
}

/* Once the section is open, the gap is correct — remove the correction. */
.series-extra.is-open + .series-expand-btn {
  margin-top: 0;
}

.series-expand-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* ============================================================
   BUTTONS — Buy on Amazon / Buy on Audible
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px — matches Figma */
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}

.btn-buy {
  background-color: var(--color-accent);
  color: var(--color-text-on-dark);
  border-radius: 50px; /* standard pill */
  padding: 12px 28px;
  min-height: 50px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15); /* matches Figma */
  text-align: center;
  transition: background-color 0.2s ease;
}

.btn-buy:hover {
  background-color: var(--color-accent-hover);
}

/* Brief visual press feedback — fades back via transition on .btn */
.btn-buy:active {
  background-color: var(--color-accent-hover);
}

/*
 * After a mouse click the browser keeps :focus on the button, which would
 * leave it stuck in the hover colour. :focus:not(:focus-visible) targets
 * mouse-click focus only and resets it back to the default state so the
 * transition can animate it smoothly back to --color-accent.
 * :focus-visible (keyboard Tab) is left untouched for accessibility.
 */
.btn-buy:focus:not(:focus-visible):not(:hover) {
  background-color: var(--color-accent);
  outline: none;
}

/* Keyboard focus — keep a visible outline for accessibility */
.btn-buy:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 3px;
}


/* ============================================================
   SCROLL FADE-IN
   Elements with .fade-in start hidden and slide up into place
   when they enter the viewport (driven by theme.js).
   .is-visible is added by the Intersection Observer.
   prefers-reduced-motion: elements are shown immediately, no animation.
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger review cards slightly */
.review-card:nth-child(2).fade-in { transition-delay: 0.1s; }
.review-card:nth-child(3).fade-in { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   BOOK COVER HOVER
   Gentle scale + soft shadow on hover — signals interactivity.
   Applied to both books-page covers and hero covers.
   ============================================================ */

/* Hero covers — scale + subtle inner radial golden glow only */
.hero-book-link {
  position: relative;
}

.hero-book-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 215, 80, 0.22) 0%,
    rgba(255, 215, 80, 0.08) 35%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.hero-book-link:hover::after {
  opacity: 1;
}

.hero-book-cover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-book-link:hover .hero-book-cover {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.hero-book-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   HERO TEXT SHADOW
   Very subtle shadow behind the title and tagline to lift them
   off the background image and improve legibility.
   ============================================================ */

.hero-title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.hero-tagline {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   SCREEN READER UTILITIES (WordPress compat)
   !important throughout prevents layout overrides from
   high-specificity theme or plugin rules collapsing the element.
   ============================================================ */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  left: 5px;
  padding: 15px 23px 14px;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* WordPress alignment utilities */
.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* Prevent WordPress adding margin to last paragraph */
.entry-content > *:last-child {
  margin-bottom: 0;
}

/* ============================================================
   404 PAGE
   ============================================================ */

.error-404-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-xl) var(--space-m);
}

.error-404-inner {
  text-align: center;
  max-width: 520px;
}

.error-404-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  margin: 0 0 var(--space-m);
}

.error-404-code {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.5;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.error-404-divider {
  display: block;
  width: 1px;
  height: clamp(1.8rem, 6vw, 3.2rem);
  background: rgba(232, 236, 244, 0.2);
  flex-shrink: 0;
}

.error-404-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2.8rem);
  color: var(--color-text);
  margin: 0;
  line-height: 1.1;
}

.error-404-message {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-l);
}