/*
Theme Name:   Soul 2 Path Child
Theme URI:    https://soul2path.com.au
Description:  Soul 2 Path child theme for the soulpath parent. All design tokens live in this file and in the Customizer palette — single source of truth for the whole site.
Author:       Branwell Pty Ltd
Author URI:   https://soul2path.com.au
Template:     soulpath
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  soul2path-child
Tags:         custom-colors, custom-logo, custom-menu, featured-images, threaded-comments
*/

/* ============================================================
   NON-COLOR DESIGN TOKENS
   ============================================================
   Color tokens are output dynamically by s2p_output_palette_css()
   from the Customizer. Everything else lives here, never hardcoded.
   ============================================================ */
:root {
    /* ─── Typography ─── */
    --font-display:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ─── Heading scale ───
       2026 industry standard (sources: SEOSherpa, AccessiblyApp, WeAreTonic):
         H1 (page title, once per page):  32–48px (2.0–3.0rem)
         H2 (major sections):              24–32px (1.5–2.0rem)
         H3 (subsections):                 18–22px (1.125–1.375rem)
         H4–H6 (minor details):            ≥16px body floor

       Using clamp() so each heading scales fluidly between mobile and
       desktop without hard breakpoints. Mid-value (vw) sets the slope. */
    --fs-h1:          clamp(2rem, 4vw, 3rem);          /* 32–48px */
    --fs-h2:          clamp(1.5rem, 2.6vw, 2rem);      /* 24–32px */
    --fs-h3:          clamp(1.125rem, 1.6vw, 1.375rem);/* 18–22px */
    --fs-h4:          1.125rem;                         /* 18px    */
    --fs-h5:          1rem;                             /* 16px — body floor */
    --fs-h6:          1rem;                             /* 16px — body floor */
    --fs-body:        1rem;                             /* 16px */
    --fs-small:       0.875rem;                         /* 14px */
    --fs-eyebrow:     0.75rem;                          /* 12px */

    --lh-display:     1.2;
    --lh-body:        1.6;
    --lh-tight:       1.3;

    /* ─── Spacing ─── */
    --space-xs:       0.5rem;     /*  8px */
    --space-sm:       1rem;       /* 16px */
    --space-md:       1.5rem;     /* 24px */
    --space-lg:       2.5rem;     /* 40px */
    --space-xl:       4rem;       /* 64px */
    --space-2xl:      6rem;       /* 96px */

    /* ─── Radius ─── */
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      12px;
    --radius-pill:    999px;

    /* ─── Transitions ─── */
    --transition-fast:  150ms ease;
    --transition:       200ms ease;
    --transition-slow:  300ms ease;

    /* ─── Z-index scale ─── */
    --z-base:         1;
    --z-dropdown:     100;
    --z-sticky:       200;
    --z-overlay:      500;
    --z-modal:        1000;
}

/* ============================================================
   RESET / BASE — cross-browser
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* iOS Safari: tap highlight is an unwanted blue flash on links/buttons */
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    /* font-size: 0 deliberately collapses any anonymous text-nodes that
       appear as flex children of body — specifically the whitespace
       between </div>#page and the <script> tags injected by wp_footer().
       Without this, those whitespace nodes render as a ~30px tall flex
       item showing the body background colour below the footer.
       Real content gets its font size back via #page itself below. */
    font-size: 0;
    font-family: var(--font-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* iOS Safari: prevent rubber-band overscroll showing the bg color */
    overscroll-behavior-y: none;
    /* Flex column on body itself, not on #page.
       WordPress's wp_footer() outputs <script> tags AFTER </div>#page but
       INSIDE </body>. Body as the flex container means #page grows to fill
       available space and trailing scripts/whitespace can't add gap below. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Restore real font size on the page wrapper — body's font-size: 0
   above was only to collapse whitespace text-nodes; real content
   needs proper sizing. */
#page,
.site {
    font-size: var(--fs-body);
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Belt-and-braces: force every <script> tag (inline, module, src) to be
   absolutely invisible. The HTML spec says <script> is display: none by
   default but some browsers leak display for <script type="module"> blocks,
   and inline scripts can leave layout-affecting line-boxes in flex
   containers. */
script,
script[type="module"],
script[type="application/json"] {
    display: none !important;
}

img {
    /* IE10+/old Safari: stop images stretching when intrinsic size is used */
    height: auto;
}

input, button, textarea, select {
    font: inherit;
    /* iOS Safari: native form styling defaults override ours */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* iOS Safari: remove the rounded button look on <button> and inputs */
    -webkit-border-radius: 0;
    border-radius: 0;
}

/* iOS Safari auto-zooms when an input is focused and font-size < 16px.
   Make sure all form fields meet the threshold. */
input, textarea, select {
    font-size: max(16px, var(--fs-body));
}

button {
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    /* Safari: button text alignment defaults to center */
    text-align: inherit;
}

/* iOS Safari: tel: and mailto: links inherit a default blue */
a[href^="tel:"],
a[href^="mailto:"] {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
    /* overflow-wrap lets long unbreakable strings (URLs, hash codes) wrap
       to prevent horizontal overflow on narrow viewports. We deliberately
       DO NOT set hyphens: auto here — it caused regular English words like
       "obligation" to break mid-word as "obliga-tion" inside narrow mobile
       content areas, which looked broken rather than typographically refined.
       If a specific block (e.g. legal copy in a sidebar) ever needs auto
       hyphenation, scope it locally there instead of globally. */
    overflow-wrap: break-word;
}

/* ============================================================
   HEADINGS — use the display font, keep weight + line-height consistent
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-display);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-sm) 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* The section heading rhythm: italic em on a new line under the main h2.
   Scoped to .section h2 deliberately — components like the shared
   section-header partial don't want this and should not get it by
   accident from a blanket `h2 em` rule. */
.section h2 em {
    font-style: italic;
    display: block;
    color: inherit;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-accent);
}

/* On dark surfaces, plain text links inherit the surface text color
   (so they're white on the dark band, not the default link color).
   Buttons styled with their own classes (.btn, .hero__cta) are exempt
   and must declare their own color explicitly. */
.site-header a:not(.btn):not(.hero__cta),
.site-footer a:not(.btn):not(.hero__cta),
.top-strip a:not(.btn):not(.hero__cta),
.hero a:not(.btn):not(.hero__cta) {
    color: inherit;
}

/* ============================================================
   LAYOUT — Zone B content sections
   See DESIGN-SYSTEM.md §3 for the two-zone rule.
   ============================================================ */

/* .container — 10px gutter wrapper for content sections.
   The body color (or whatever fills the gutter) shows through
   on the left/right of every .section > .container. */
.container {
    width: 100%;
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
    box-sizing: border-box;
}

/* .section — transparent shell. The visible background lives on
   the inner .container so the 10px gutter on either side reveals
   whatever's behind (typically the body color). */
.section {
    padding: 0;
    background: transparent;
}

.section > .container {
    background: var(--color-bg);
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.section--bg      > .container { background: var(--color-bg-soft); }
.section--accent  > .container { background: var(--color-accent-soft); }
.section--primary > .container {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}
.section--primary > .container h1,
.section--primary > .container h2,
.section--primary > .container h3,
.section--primary > .container h4 {
    color: var(--color-text-on-primary);
}

/* ============================================================
   CONTENT WIDTH SYSTEM
   2026 industry-standard responsive content widths, centred in the
   viewport. Use inside .section > .container or directly in .site-main.

   ┌──────────────────────────────────────────────────────────────────┐
   │  TYPE              │ MAX-WIDTH │ USE CASE                        │
   ├──────────────────────────────────────────────────────────────────┤
   │  --reading         │  720px    │ Long-form prose (~75ch optimum) │
   │  --standard        │ 1280px    │ Standard desktop layouts        │
   │  --wide            │ 1440px    │ Widescreen / image-heavy        │
   │  --full            │  100%     │ Edge-to-edge sections           │
   └──────────────────────────────────────────────────────────────────┘

   Why these numbers:
   - 720px reading width = ~75 characters of body text at 18px Poppins.
     Eye-tracking research caps comfortable reading at 60-75 chars/line.
   - 1280px standard = comfortable on 1366×768 laptops (~40px gutter)
     up to 1920×1080 monitors (~320px gutter for breathing room).
     Industry standard since Bootstrap's 1200px grid; bumped slightly
     up to reflect 2026 monitor sizes.
   - 1440px wide = premium "feels balanced on a 2K monitor" width.
     Used by Stripe, Apple, Notion, Linear. Cap for ultrawide so content
     doesn't become unreadable on 2560px+ displays.

   All variants stay centred via margin: 0 auto, with responsive side
   gutters so content doesn't kiss the screen edges on mid-size devices.
   ============================================================ */

.section__inner {
    /* DEFAULT: reading width for prose */
    max-width: 720px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Standard desktop container — cards, grids, profile pages.
   This is what most pages should use unless they're long-form prose. */
.section__inner--standard {
    max-width: 1280px;
}

/* Wide container — widescreen layouts, image galleries, full editorials.
   Caps at 1440px so content stays comfortable on 2K+ displays. */
.section__inner--wide {
    max-width: 1440px;
}

/* Full-bleed — edge to edge, no max width, no padding.
   Use for card grids or sections that should breathe to the viewport. */
.section__inner--full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Responsive side gutters — content should never kiss the screen edge */
@media (max-width: 640px) {
    .section__inner,
    .section__inner--standard,
    .section__inner--wide {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================
   ENTRY CONTENT — typography for WP-edited pages and posts.
   Works with both Classic Editor (single .entry-content wrap) and
   Gutenberg (.entry-content with .wp-block-* descendants).

   Wrap your post/page templates in:
       <article class="entry">
           <header class="entry-header">...</header>
           <div class="entry-content">
               <?php the_content(); ?>
           </div>
       </article>

   The .entry-content rules below give you sensible defaults for every
   element the editor can output: paragraphs, lists, blockquotes, images,
   tables, headings, code blocks, etc.

   All measurements are palette-aware via CSS variables; nothing hardcoded.
   ============================================================ */

.entry {
    max-width: 720px;          /* article body width — ~75 characters of body copy */
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* For page templates that need standard-desktop width (1280px) — e.g.
   blog index, archives, reader directory, team page. */
.entry--wide {
    max-width: 1280px;
}

/* For full widescreen layouts (1440px max) — image galleries, editorials. */
.entry--xwide {
    max-width: 1440px;
}

/* Header block — page/post title, optional meta */
.entry-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.entry-title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-display);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-sm) 0;
}

.entry-meta {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin: 0;
}

.entry-meta a {
    color: var(--color-primary);
    text-decoration: none;
}
.entry-meta a:hover {
    text-decoration: underline;
}

/* ─── The content itself ───
   Sensible rhythm for any element the editor outputs. */

.entry-content {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
}

/* Paragraphs */
.entry-content p {
    margin: 0 0 var(--space-md) 0;
}

/* Headings inside content — smaller than the entry-title since
   that's H1 territory; in-content H2-H6 step down from there */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--font-display);
    color: var(--color-text-strong);
    line-height: var(--lh-display);
    margin: var(--space-lg) 0 var(--space-sm) 0;
}

.entry-content h2 { font-size: var(--fs-h2); }
.entry-content h3 { font-size: var(--fs-h3); }
.entry-content h4 { font-size: var(--fs-h4); }
.entry-content h5 { font-size: var(--fs-h5); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body); font-weight: 700; }
.entry-content h6 { font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body); font-weight: 700; }

/* First heading shouldn't have giant top margin (it sits below the entry-header) */
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child {
    margin-top: 0;
}

/* Links inside content — palette primary, underlined */
.entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.entry-content a:hover {
    color: var(--color-primary-dark);
}

/* Strong / em — body emphasis uses weight 600 (not 700/800) so it
   reads as emphasized without dominating. Same colour as body text. */
.entry-content strong { font-weight: 600; }
.entry-content em     { font-style: italic; }

/* Lists */
.entry-content ul,
.entry-content ol {
    margin: 0 0 var(--space-md) 0;
    padding-left: 1.5em;
}

.entry-content li {
    margin-bottom: var(--space-xs);
    line-height: var(--lh-body);
}

.entry-content li > ul,
.entry-content li > ol {
    margin: var(--space-xs) 0 0 0;
}

/* Blockquote */
.entry-content blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid var(--color-primary);
    background: var(--color-bg-soft);
    font-style: italic;
    color: var(--color-text-strong);
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote cite {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    font-style: normal;
}
.entry-content blockquote cite::before {
    content: "— ";
}

/* Inline code + code blocks */
.entry-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
}

.entry-content pre {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-x: auto;
    margin: 0 0 var(--space-md) 0;
}
.entry-content pre code {
    background: transparent;
    border: none;
    padding: 0;
}

/* Tables */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-md) 0;
    font-size: var(--fs-small);
}

.entry-content th,
.entry-content td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.entry-content th {
    background: var(--color-bg-soft);
    font-weight: 700;
    color: var(--color-text-strong);
}

/* Horizontal rules */
.entry-content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-lg) 0;
}

/* Images — block, max-width:100%, with rhythm */
.entry-content img {
    height: auto;
    margin: var(--space-md) 0;
    border-radius: var(--radius-sm);
}

.entry-content figure {
    margin: var(--space-lg) 0;
}

.entry-content figcaption {
    margin-top: var(--space-sm);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* Classic Editor's [caption] shortcode output */
.entry-content .wp-caption {
    margin: var(--space-lg) 0;
    max-width: 100%;
}
.entry-content .wp-caption-text {
    margin-top: var(--space-sm);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* Classic Editor's image alignment classes */
.entry-content .alignleft  { float: left;  margin: 0 var(--space-md) var(--space-md) 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0 0 var(--space-md) var(--space-md); max-width: 50%; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignnone  { margin: var(--space-md) 0; }

/* Clear floats after blocks */
.entry-content::after {
    content: '';
    display: table;
    clear: both;
}

/* Gutenberg's wp-block-image alignment */
.entry-content .wp-block-image { margin: var(--space-md) 0; }
.entry-content .wp-block-image.alignwide  { max-width: 1100px; margin-left: 50%; transform: translateX(-50%); }
.entry-content .wp-block-image.alignfull  { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.entry-content .wp-block-image figcaption { margin-top: var(--space-sm); }

/* Mobile padding adjustment */
@media (max-width: 640px) {
    .entry,
    .entry--wide,
    .entry--xwide {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ─── Single-post extras (used by single.php) ─── */

/* Category eyebrow above the post title */
.entry-category {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.entry-category a {
    color: inherit;
    text-decoration: none;
}
.entry-category a:hover {
    text-decoration: underline;
}

/* Featured image at the top of a post */
.entry-featured-image {
    margin: 0 0 var(--space-lg) 0;
}

.entry-featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
}

/* Tags footer at the bottom of a post */
.entry-tags {
    margin: var(--space-lg) 0 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.entry-tag {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    text-decoration: none;
    transition: all var(--transition);
}

.entry-tag:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Previous / next post navigation */
.post-navigation {
    max-width: 720px;
    margin: var(--space-2xl) auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.post-navigation__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.post-navigation a {
    display: block;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: all var(--transition);
}

.post-navigation a:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-soft);
}

.post-navigation__prev {
    text-align: left;
}
.post-navigation__next {
    text-align: right;
    grid-column: 2;
}

.post-navigation__label {
    display: block;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.post-navigation__title {
    display: block;
    font-weight: 700;
    color: var(--color-text-strong);
    font-size: var(--fs-small);
}

@media (max-width: 640px) {
    .post-navigation {
        padding: 0 16px;
    }
    .post-navigation__inner {
        grid-template-columns: 1fr;
    }
    .post-navigation__next {
        grid-column: 1;
        text-align: left;
    }
}

/* Page break navigation (when content has <!--nextpage--> splits) */
.page-links {
    margin: var(--space-lg) 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-small);
}

.page-links__title {
    font-weight: 700;
    color: var(--color-text-muted);
}

.page-links a,
.page-links > span:not(.page-links__title) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
}

.page-links a:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-primary);
}

.page-links > span:not(.page-links__title) {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

/* ─── Post list (blog index, archives, search) ─── */

.post-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-2xl) 0;
    display: grid;
    gap: var(--space-xl);
}

.post-list__item {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
    align-items: start;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.post-list__item:last-child {
    border-bottom: none;
}

.post-list__thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.post-list__thumb img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.post-list__thumb:hover img {
    transform: scale(1.04);
}

.post-list__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-display);
    margin: 0 0 var(--space-sm) 0;
}

.post-list__title a {
    color: var(--color-text-strong);
    text-decoration: none;
}
.post-list__title a:hover {
    color: var(--color-primary);
}

.post-list__excerpt {
    color: var(--color-text);
    margin: var(--space-sm) 0 var(--space-md) 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.post-list__more {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-small);
}
.post-list__more:hover {
    text-decoration: underline;
}

/* Mobile — stack image on top of text */
@media (max-width: 640px) {
    .post-list__item {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

/* WordPress's the_posts_pagination output */
.pagination,
.posts-navigation {
    margin: var(--space-2xl) 0;
}

.pagination .nav-links,
.posts-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
}

.pagination .page-numbers,
.posts-navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition);
}

.pagination .page-numbers:hover,
.posts-navigation a:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

/* ─── 404 page ───
   Friendly "page not found" with an animated GIF backdrop behind a
   huge "404" then a "Look like you're lost" message + home CTA.
   The GIF is uploaded to /wp-content/uploads/2026/05/404.gif —
   change the URL below if you move it. */

.page-404 {
    /* Sit inside the content flow, generous breathing room top + bottom */
    padding: var(--space-2xl) 0;
    background: var(--color-bg);
    flex: 1 0 auto;       /* fill .site-main if there's empty space */
}

.page-404__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    box-sizing: border-box;
}

/* GIF hero block — the GIF sizes itself; the "404" sits absolutely at
   the TOP, overlapping the upper portion of the animation so the character
   reads clearly underneath it. */
.page-404__hero {
    position: relative;
    background-image: url('/wp-content/uploads/2026/05/404.gif');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    /* Aspect ratio of the GIF — adjust if the GIF is a different shape.
       Most "lost caveman" gifs are roughly 16:9 or 2:1; using 2:1 here
       so the block isn't taller than needed. */
    aspect-ratio: 2 / 1;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* The huge "404" numeral — absolutely positioned at the top of the
   hero block so the GIF character below it isn't obscured. */
.page-404 .page-404__hero .page-404__big,
h1.page-404__big {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    /* Smaller than before — it's now competing for space at the top
       rather than centred over a 400px block. */
    font-size: clamp(56px, 9vw, 96px);
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
    /* Subtle text-shadow lifts the digits off the busy animated bg */
    text-shadow: 0 4px 12px var(--color-shadow);
    /* Pointer-events: none so the GIF area underneath is still hover-able
       and the numeral doesn't intercept clicks */
    pointer-events: none;
}

/* Content under the hero — pull up slightly so it sits closer to the GIF */
.page-404__body {
    margin-top: calc(var(--space-lg) * -1);
    position: relative;
    z-index: 1;
}

.page-404__heading {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 40px);
    line-height: var(--lh-display);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-sm) 0;
}

.page-404__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    max-width: 480px;
    margin: 0 auto var(--space-lg);
}

/* CTA button — uses the palette primary; same shape as other pill buttons */
.page-404__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-small);
    letter-spacing: 0.03em;
    text-decoration: none;
    border: 2px solid var(--color-primary);
    -webkit-transition: background var(--transition), color var(--transition);
    transition: background var(--transition), color var(--transition);
    touch-action: manipulation;
}

.page-404__cta:hover,
.page-404__cta:focus {
    background: transparent;
    color: var(--color-primary);
}

/* Responsive scaling */
@media (max-width: 640px) {
    .page-404 {
        padding: var(--space-lg) 0;
    }
    .page-404__inner {
        padding: 0 16px;
    }
    .page-404__hero {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .page-404__body {
        margin-top: 0;
    }
}

/* ============================================================
   SECTION HEADER PATTERN
   eyebrow / h2 / lead — the rhythm signature
   ============================================================ */
.eyebrow {
    display: block;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm) 0;
}

.section__lead {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-lg) 0;
    max-width: 720px;
    font-size: var(--fs-body);
}

/* ============================================================
   PAGE BODY — sticky footer flex container
   iOS Safari has the 100vh bar-jump issue. Use 100dvh with 100vh
   as the fallback (dvh = dynamic viewport height, accounts for
   the URL bar's expand/collapse). 100dvh is supported in Safari 15.4+
   ============================================================ */
/* ============================================================
   PAGE WRAPPER — flex item inside body, grows to fill available space.
   The flex column container is <body> (see above) so trailing script
   tags from wp_footer() don't add a white gap below the footer.
   #page itself is still a flex column so .site-main can push the
   footer to its bottom.
   ============================================================ */
.site {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* Fill all available vertical space inside body */
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: 100%;
}

.site-main {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    background: var(--color-bg);
    /* Vertical breathing room between header and footer bookends:
       - Top: 32px desktop (20px mobile) — separates content from dark header
       - Bottom: 96px desktop (56px mobile) — generous landing zone before footer
       Bottom is heavier than top by design — eye expects more room before a
       heavy footer than below a header. */
    padding-top: 32px;
    padding-bottom: 96px;
}

@media (max-width: 768px) {
    .site-main {
        padding-top: 20px;
        padding-bottom: 56px;
    }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-muted   { color: var(--color-text-muted); }
.text-strong  { color: var(--color-text-strong); }
.text-on-dark { color: var(--color-text-on-primary); }

.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mb-sm { margin-bottom: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-md { margin-bottom: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }