/*
Theme Name: Wellorious
Theme URI: https://wellorious.com
Author: Wellorious
Author URI: https://wellorious.com
Description: Custom full-site-editing theme for the Wellorious MVP, an evidence-based healthy living brand. Built per WEL-WEB-005 v2.1.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: wellorious
*/

:root {
    --wellorious-navy: #0A192F;
    --wellorious-forest: #1B4332;
    --wellorious-gold: #D4AF37;
    --wellorious-cream: #F8F6F0;

    /* WEL-VIS-001 Checkpoint 1 — spacing scale (mirrors theme.json spacingSizes) */
    --wl-space-xs: 0.5rem;
    --wl-space-sm: 1rem;
    --wl-space-md: 1.75rem;
    --wl-space-lg: 3rem;
    --wl-space-xl: 5rem;
    --wl-space-2xl: 7.5rem;

    /* hairline border color used across cards/callouts/header separation */
    --wl-hairline: rgba(10, 25, 47, 0.10);
    --wl-muted-text: rgba(10, 25, 47, 0.62);
}

a {
    transition: opacity 0.15s ease-in-out;
}

a:hover {
    opacity: 0.8;
}

:focus-visible {
    outline: 3px solid #D4AF37 !important;
    outline-offset: 2px !important;
}

.wp-block-button__link,
button,
input[type=submit] {
    min-height: 48px;
    min-width: 48px;
}

/* =========================================================
   WEL-VIS-001 — Checkpoint 1: Design Foundation
   Self-hosted editorial typography, refined type scale,
   spacing tokens, buttons, cards, callouts, eyebrow labels,
   header/footer treatment. Presentational only — no content,
   template, or architecture changes.
   ========================================================= */

/* --- Self-hosted variable webfonts (no third-party CDN) --- */
@font-face {
    font-family: 'Fraunces Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('assets/fonts/fraunces-variable.woff2') format('woff2-variations'),
         url('assets/fonts/fraunces-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('assets/fonts/inter-variable.woff2') format('woff2-variations'),
         url('assets/fonts/inter-variable.woff2') format('woff2');
}

/* --- Typography refinement --- */
/* theme.json sets the base font-family/size/heading tokens; the rules
   below add the editorial touches theme.json can't express (letter
   spacing, eyebrow labels, differentiated heading/body color). */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    letter-spacing: -0.01em;
}

body,
p,
li {
    color: var(--wellorious-navy);
}

/* Body copy reads at slightly reduced contrast vs. headings so the
   two are visually distinct even though both derive from navy. */
.wp-block-post-content p,
.entry-content p,
main p {
    color: rgba(10, 25, 47, 0.88);
}

/* --- Eyebrow label ---
   Small, letter-spaced tag used above headings on articles, the
   product page, and archive headers (wired in at Checkpoint 2/3).
   Add the "wl-eyebrow" class to a paragraph block to use it. */
.wl-eyebrow {
    display: inline-block;
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wellorious-forest);
    margin: 0 0 var(--wl-space-xs) 0;
}

/* --- Metadata / caption text ---
   Article bylines, dates, reading time, image captions. */
.wl-meta {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-size: 0.9rem;
    color: var(--wl-muted-text);
    letter-spacing: 0.01em;
}

/* --- Card component ---
   Base reusable card for Foundation cards, two-path cards, article
   cards. Restrained: hairline border, no heavy shadow, modest radius. */
.wl-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--wl-hairline);
    border-radius: 10px;
    padding: var(--wl-space-md);
    transition: border-color 0.15s ease-in-out;
}

.wl-card:hover {
    border-color: rgba(10, 25, 47, 0.22);
}

.wl-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wl-space-md);
}

/* --- Callout / trust box ---
   For evidence sections, anti-hype disclosures, article asides. */
.wl-callout {
    background: var(--wellorious-cream);
    border-left: 4px solid var(--wellorious-forest);
    border-radius: 4px;
    padding: var(--wl-space-md);
}

.wl-callout p:last-child {
    margin-bottom: 0;
}

/* A rare, deliberate gold accent — reserved for a single use per page
   (e.g. the product page price/CTA area), never a default callout. */
.wl-callout.wl-callout--accent {
    border-left-color: var(--wellorious-gold);
}

/* --- Buttons ---
   Colors are already set correctly per-block (navy fill / navy
   outline); this adds the typographic polish theme.json can't. */
.wp-block-button__link {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: opacity 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.wp-block-button__link:hover {
    opacity: 0.85;
}

.wp-block-button__link:active {
    transform: translateY(1px);
}

/* --- Header treatment ---
   A hairline bottom border gives the header a defined edge against
   an all-white page — previously it had none. */
header.wp-block-group {
    border-bottom: 1px solid var(--wl-hairline);
}

header.wp-block-group .wp-block-navigation a {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-weight: 500;
    letter-spacing: 0.01em;
}

header.wp-block-group .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces Variable', serif);
    letter-spacing: -0.01em;
}

/* --- Footer treatment --- */
footer.wp-block-group {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
}

footer.wp-block-group a {
    opacity: 0.9;
}

/* =========================================================
   WEL-VIS-001 — Checkpoint 2: Foundation Visual System
   Reusable Foundation card component: photo + icon + name +
   subtitle + existing description. Built on the Checkpoint 1
   .wl-card foundation. Not yet wired into any live page —
   that's Checkpoint 3. Presentational only.
   ========================================================= */

.wl-foundation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wl-space-md);
}

/* WP core injects a global block-gap margin-top on every child but the first
   (".is-layout-constrained > *:not(:first-child)"). That fights this grid's own
   gap and pushes card 2+ down within their row, misaligning them against card 1. */
.wl-foundation-grid > .wl-foundation-card {
    margin-top: 0 !important;
}

.wl-foundation-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--wl-hairline);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wl-foundation-card:hover,
.wl-foundation-card:focus-visible {
    border-color: rgba(10, 25, 47, 0.22);
}

.wl-foundation-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wellorious-cream);
}

.wl-foundation-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    transition: transform 0.4s ease;
}

.wl-foundation-card:hover .wl-foundation-card__media img {
    transform: scale(1.03);
}

.wl-foundation-card__body {
    padding: var(--wl-space-md);
}

.wl-foundation-card__icon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: var(--wl-space-xs);
}

.wl-foundation-card__name {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces Variable', serif);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--wellorious-navy);
    margin: 0 0 2px 0;
}

.wl-foundation-card__subtitle {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--wellorious-forest);
    margin: 0 0 var(--wl-space-xs) 0;
}

.wl-foundation-card__desc {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(10, 25, 47, 0.75);
    margin: 0;
}

@media (max-width: 600px) {
    .wl-foundation-card__name {
        font-size: 1.25rem;
    }
}

/* --- Responsive container / mobile type scale ---
   Explicit mobile sizing per WEL-VIS-001 §11/§14 — not left to a
   blind proportional shrink of the desktop scale. */
@media (max-width: 600px) {
    h1, .wp-block-post-title {
        font-size: 2.25rem !important;
        line-height: 1.15 !important;
    }
    h2 {
        font-size: 1.625rem !important;
        line-height: 1.2 !important;
    }
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    :root {
        --wl-space-lg: 2rem;
        --wl-space-xl: 3rem;
        --wl-space-2xl: 4rem;
    }
    .wl-card {
        padding: var(--wl-space-sm);
    }
}


/* =========================================================
   WEL-VIS-001 — Checkpoint 3: Homepage + Start Here Redesign
   Hero split, values row, two-path component, trust section,
   reset card, who-this-is-for layout, footer polish.
   Presentational only — no content, template, or architecture
   changes beyond what's needed to host these components.
   ========================================================= */

/* --- Hero --- */
.wl-hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    gap: 0;
}

.wl-hero__content {
    padding: 4.5rem 3rem 4.5rem clamp(1.5rem, 4vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wl-hero__eyebrow {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wellorious-forest);
    margin: 0 0 var(--wl-space-sm) 0;
}

.wl-hero__content h1 {
    font-size: clamp(2.25rem, 3.2vw + 1.4rem, 3.25rem);
    line-height: 1.12;
    margin: 0 0 var(--wl-space-sm) 0;
}

.wl-hero__content > p {
    max-width: 34rem;
    margin: 0 0 var(--wl-space-md) 0;
}

.wl-hero__media {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: var(--wellorious-cream);
}

.wl-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 22%;
}

@media (max-width: 782px) {
    .wl-hero {
        grid-template-columns: 1fr;
    }
    .wl-hero__content {
        padding: 3rem 1.5rem 2rem 1.5rem;
    }
    .wl-hero__media {
        min-height: 280px;
    }
}

/* --- What Wellorious Stands For: icon-led values row --- */
.wl-values-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wl-space-lg);
}

/* Same WP block-gap margin-top fight as .wl-foundation-grid above -- neutralize it
   so all four value items line up on the same row instead of items 2-4 sagging down. */
.wl-values-row > * {
    margin-top: 0 !important;
}

.wl-value__icon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: var(--wl-space-xs);
}

.wl-value__title {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces Variable', serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--wellorious-navy);
    margin: 0 0 4px 0;
}

.wl-value__desc {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(10, 25, 47, 0.75);
    margin: 0;
}

@media (max-width: 782px) {
    .wl-values-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wl-space-md);
    }
}

/* --- Who This Is For: two-column editorial layout --- */
.wl-who-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--wl-space-xl);
    align-items: center;
}

.wl-who-grid__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 10px;
    background: var(--wellorious-cream);
}

.wl-who-grid__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.wl-who-grid__text > p:first-of-type {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--wellorious-navy);
}

@media (max-width: 782px) {
    .wl-who-grid {
        grid-template-columns: 1fr;
        gap: var(--wl-space-md);
    }
    .wl-who-grid__media {
        aspect-ratio: 4 / 3;
    }
}

/* --- Two-path component (How to Start / Where to Begin) --- */
.wl-two-path-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wl-space-md);
}

/* Same WP block-gap margin-top fight as the other custom grids above --
   neutralize it so both path cards (used on the homepage How to Start
   section AND Start Here Where To Start section) share the same top edge. */
.wl-two-path-grid > .wl-two-path {
    margin-top: 0 !important;
}

.wl-two-path {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--wl-hairline);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out;
}

.wl-two-path:hover {
    border-color: rgba(10, 25, 47, 0.22);
}

.wl-two-path__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wellorious-cream);
}

.wl-two-path__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}

.wl-two-path__icon-wrap {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wellorious-cream);
}

.wl-two-path__icon-wrap img {
    width: 56px;
    height: 56px;
}

.wl-two-path__body {
    padding: var(--wl-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wl-two-path__label {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wellorious-forest);
    margin: 0 0 6px 0;
}

.wl-two-path__title {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces Variable', serif);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--wellorious-navy);
    margin: 0 0 8px 0;
}

.wl-two-path__desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(10, 25, 47, 0.8);
    margin: 0 0 var(--wl-space-sm) 0;
    flex: 1;
}

@media (max-width: 782px) {
    .wl-two-path-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Trust / Evidence section --- */
.wl-trust {
    background: var(--wellorious-cream);
    border-radius: 12px;
    padding: clamp(1.75rem, 3vw, 3rem);
}

.wl-trust h3 {
    margin-top: var(--wl-space-md);
}

.wl-does-not-promise {
    list-style: none;
    margin: var(--wl-space-sm) 0 var(--wl-space-md) 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.5rem;
}

.wl-does-not-promise li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.wl-does-not-promise li::before {
    content: "\2715";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wellorious-navy);
    opacity: 0.55;
    font-size: 0.8rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    .wl-does-not-promise {
        grid-template-columns: 1fr;
    }
}

/* --- Reset (14-Day) supporting card --- */
.wl-reset-card {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: var(--wl-space-md);
    align-items: center;
    border: 1px solid var(--wl-hairline);
    border-radius: 10px;
    padding: var(--wl-space-md);
    background: #FFFFFF;
}

.wl-reset-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: var(--wellorious-navy);
}

.wl-reset-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-reset-card__body h2 {
    margin: 0 0 6px 0;
}

.wl-reset-card__body p {
    margin: 0;
}

@media (max-width: 600px) {
    .wl-reset-card {
        grid-template-columns: 1fr;
    }
    .wl-reset-card__media {
        max-width: 160px;
    }
}

/* --- Footer polish --- */
.wl-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wl-footer-brand figure {
    margin: 0;
}

.wl-footer-brand img {
    width: 22px;
    height: 18px;
    display: block;
}

.wl-footer-brand p {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces Variable', serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    margin: 0;
    color: inherit;
}

/* --- Start Here page: opening + transition module --- */
.wl-start-intro {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--wellorious-navy);
}

.wl-start-transition {
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
}

/* --- Outline-button fix (two-path cards) ---
   WordPress only generates a per-instance override stylesheet (the
   `.is-style-outline--2` selector, without :where()) for the FIRST
   is-style-outline button block it encounters on the page; that
   instance-specific rule loads late enough in <head> to beat the
   later global "elements" default-button-color rule even though both
   are :where()-wrapped (equal specificity, later source order wins).
   Every subsequent is-style-outline instance -- here, the two-path
   cards' buttons -- has no such override and falls back to the
   generic theme.json outline rule, which loses that same cascade
   race and renders solid gold instead of outline. Scoped, minimal
   override restoring the intended outline treatment for those two
   buttons only. */
.wl-two-path .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--wellorious-navy);
    color: var(--wellorious-navy);
}


/* ==========================================================================
   WEL-VIS-004 Checkpoint 4 — Resource Page + 14-Day Metabolic Reset
   Product Page redesign. Built on the locked palette/spacing tokens above.
   ========================================================================== */

/* Shared editorial hero for the Resource and Product single templates */
.wl-page-hero {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding: var(--wl-space-xl) 0 var(--wl-space-lg) 0;
}

.wl-page-hero__cover {
    position: relative;
}

.wl-page-hero__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 24px 48px -20px rgba(10, 25, 47, 0.35);
}

.wl-page-hero__content .wl-eyebrow {
    margin-bottom: var(--wl-space-xs);
}

.wl-page-hero__content h1 {
    margin: 0.25rem 0 0 0;
}

.wl-page-hero__dek {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.6;
    color: var(--wl-muted-text);
    max-width: 42rem;
    margin: var(--wl-space-sm) 0 0 0;
}

/* Price + purchase CTA — the one place Warm Gold is used as a structural
   accent rather than decoration */
.wl-price-cta {
    display: flex;
    align-items: center;
    gap: var(--wl-space-md);
    flex-wrap: wrap;
    margin-top: var(--wl-space-md);
    padding-top: var(--wl-space-md);
    border-top: 2px solid var(--wellorious-gold);
}

.wl-price-cta__price {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: clamp(2.25rem, 4vw, 2.75rem);
    line-height: 1;
    color: var(--wellorious-navy);
}

.wl-price-cta__note {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--wl-muted-text);
    margin-top: 0.3rem;
}

.wl-price-cta__action {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Resource page — "What's Inside" shift list using the Foundation icon system */
.wl-shift-list {
    list-style: none;
    margin: var(--wl-space-md) 0;
    padding: 0;
}

.wl-shift-row {
    display: flex;
    align-items: flex-start;
    gap: var(--wl-space-sm);
    padding: var(--wl-space-sm) 0;
    border-bottom: 1px solid var(--wl-hairline);
}

.wl-shift-row:first-child { padding-top: 0; }
.wl-shift-row:last-child { border-bottom: none; padding-bottom: 0; }

.wl-shift-row__icon {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.wl-shift-row__icon img,
.wl-shift-row__icon svg {
    width: 100%;
    height: 100%;
}

.wl-shift-row__text { flex: 1; }

.wl-shift-row__text p {
    margin: 0;
    color: var(--wl-muted-text);
}

.wl-shift-row__text strong {
    display: block;
    color: var(--wellorious-navy);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* Resource page — email capture as a value exchange, not a bottom-of-page form.
   Deliberately a single-column stack, not a side-by-side grid: the embedded
   Fluent Forms markup below needs its original full content width to lay out
   its own responsive columns correctly, so we never narrow its container. */
.wl-value-exchange {
    background: var(--wellorious-cream);
    border-radius: 12px;
    padding: clamp(2rem, 4vw, 3rem);
    margin: var(--wl-space-xl) 0;
}

.wl-value-exchange__cover {
    width: 132px;
    margin: 0 0 var(--wl-space-md) 0;
}

.wl-value-exchange__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 14px 28px -14px rgba(10, 25, 47, 0.3);
}

.wl-value-exchange__body h3 {
    margin-top: 0;
}

.wl-value-exchange__body > p {
    color: var(--wl-muted-text);
}

/* Product page — "What You Get" redesigned into meaningful groups */
.wl-get-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wl-space-lg);
    margin: var(--wl-space-lg) 0;
}

.wl-get-group__title {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: 1.125rem;
    color: var(--wellorious-forest);
    margin: 0 0 var(--wl-space-sm) 0;
    padding-bottom: var(--wl-space-xs);
    border-bottom: 2px solid var(--wellorious-forest);
}

.wl-get-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl-get-group__list li {
    position: relative;
    padding-left: 1.35rem;
    margin: 0 0 0.6rem 0;
    color: var(--wl-muted-text);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.wl-get-group__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wellorious-gold);
}

/* Product page — Read / Act / Reflect / Repeat rhythm */
.wl-rhythm {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wl-space-sm);
    margin: var(--wl-space-lg) 0;
    text-align: center;
}

.wl-rhythm__step {
    padding: var(--wl-space-md) var(--wl-space-sm);
    position: relative;
}

.wl-rhythm__step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wellorious-gold);
    font-size: 1.25rem;
    line-height: 1;
}

.wl-rhythm__label {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: 1.0625rem;
    color: var(--wellorious-navy);
    margin: 0 0 0.35rem 0;
}

.wl-rhythm__desc {
    font-size: 0.8125rem;
    color: var(--wl-muted-text);
    margin: 0;
}

@media (max-width: 782px) {
    .wl-page-hero {
        grid-template-columns: 1fr;
        padding: var(--wl-space-lg) 0;
        text-align: left;
    }
    .wl-page-hero__cover {
        max-width: 280px;
        margin: 0 auto var(--wl-space-sm) auto;
    }
    .wl-get-groups {
        grid-template-columns: 1fr 1fr;
    }
    .wl-rhythm {
        grid-template-columns: 1fr 1fr;
    }
    .wl-rhythm__step:nth-child(2)::after {
        content: "";
    }
}

@media (max-width: 600px) {
    .wl-get-groups {
        grid-template-columns: 1fr;
    }
    .wl-rhythm {
        grid-template-columns: 1fr;
    }
    .wl-rhythm__step:not(:last-child)::after {
        content: "\2193";
        right: auto;
        left: 50%;
        top: auto;
        bottom: -0.6rem;
        transform: translateX(-50%);
    }
    .wl-price-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==========================================================================
   WEL-VIS-005 — Checkpoint 5: Article Template + Foundation Archive
   ========================================================================== */

/* --- Article hero: text-only fallback when no featured image is set --- */
.wl-article-hero:not(:has(.wl-page-hero__cover img)) {
    grid-template-columns: 1fr;
}
.wl-article-hero:not(:has(.wl-page-hero__cover img)) .wl-page-hero__cover {
    display: none;
}
.wl-page-hero__cover.wp-block-post-featured-image {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}
.wl-page-hero__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Meta row (byline · date · reading time) --- */
.wl-meta.wp-block-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: var(--wl-space-sm) 0 0 0;
}
.wl-meta.wp-block-group > * {
    margin: 0;
}
.wl-meta.wp-block-group > *:not(:last-child)::after {
    content: "·";
    margin: 0 0.5rem;
    color: var(--wl-muted-text);
}

/* --- Article body: comfortable editorial reading rhythm --- */
.wl-article-body {
    font-size: 1.0625rem;
    line-height: 1.7;
}
.wl-article-body > p {
    margin: 0 0 1.4em 0;
}
.wl-article-body h2 {
    margin: var(--wl-space-lg) 0 var(--wl-space-sm) 0;
}
.wl-article-body h3 {
    margin: var(--wl-space-md) 0 var(--wl-space-xs) 0;
}
.wl-article-body ul,
.wl-article-body ol {
    margin: 0 0 1.4em 0;
    padding-left: 1.4em;
}
.wl-article-body li {
    margin-bottom: 0.5em;
}

/* --- Pull quote: one genuinely existing sentence, surfaced visually --- */
.wl-pullquote {
    border: none;
    margin: var(--wl-space-lg) 0;
    padding: 0 0 0 var(--wl-space-md);
    border-left: 3px solid var(--wellorious-gold);
}
.wl-pullquote p {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-style: italic;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    line-height: 1.4;
    color: var(--wellorious-navy);
    margin: 0;
}

/* --- Takeaway: reuses the existing .wl-callout--accent gold variant --- */
.wl-takeaway .wl-eyebrow {
    color: var(--wellorious-forest);
    margin-bottom: var(--wl-space-xs);
}

/* --- Evidence & Sources: renders the article's own citation register --- */
.wl-sources {
    background: var(--wellorious-cream);
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    margin: var(--wl-space-xl) 0 var(--wl-space-lg) 0;
}
.wl-sources h2 {
    margin-top: 0;
    font-size: 1.25rem;
}
.wl-sources__list {
    list-style: none;
    margin: var(--wl-space-sm) 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wl-space-sm);
}
.wl-sources__item {
    padding-top: var(--wl-space-sm);
    border-top: 1px solid var(--wl-hairline);
}
.wl-sources__item:first-child {
    padding-top: 0;
    border-top: none;
}
.wl-sources__claim {
    display: block;
    color: var(--wl-muted-text);
    font-size: 0.95rem;
    margin-bottom: 0.3em;
}
.wl-sources__cite a {
    font-weight: 600;
    color: var(--wellorious-navy);
}

/* --- Related content: template-level, dynamic post-terms links --- */
.wl-related {
    margin: var(--wl-space-xl) 0 0 0;
    padding-top: var(--wl-space-lg);
    border-top: 1px solid var(--wl-hairline);
}
.wl-related__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wl-space-sm);
    margin-top: var(--wl-space-sm);
}
.wl-related__card {
    flex: 1 1 220px;
}
.wl-related__card .wp-block-post-terms {
    font-family: var(--wp--preset--font-family--heading, 'Fraunces', serif);
    font-size: 1.125rem;
}
.wl-related__card .wp-block-post-terms a {
    color: var(--wellorious-navy);
    text-decoration: none;
}

/* --- Foundation archive hero --- */
.wl-archive-hero {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--wl-space-xl) auto;
    padding: var(--wl-space-lg) 0 0 0;
}
.wl-archive-hero__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--wl-space-sm) auto;
    display: block;
}
.wl-archive-hero .wl-eyebrow {
    display: block;
}
.wl-archive-hero h1 {
    margin: 0 0 var(--wl-space-sm) 0;
}
.wl-archive-hero__desc {
    color: var(--wl-muted-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0;
}
.wl-archive-topics {
    text-align: center;
    margin: 0 0 var(--wl-space-xl) 0;
}
.wl-archive-topics .wl-eyebrow {
    display: block;
    justify-content: center;
}
.wl-archive-section-heading {
    margin: 0 0 var(--wl-space-md) 0;
}

/* --- Article cards (Foundation archive listing) --- */
.wl-article-card {
    display: block;
}
.wl-article-card .wp-block-post-featured-image {
    margin: 0 0 var(--wl-space-sm) 0;
    border-radius: 6px;
    overflow: hidden;
}
.wl-article-card .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
}
.wl-article-card .wl-eyebrow {
    margin-bottom: var(--wl-space-xs);
}
.wl-article-card .wp-block-post-title {
    font-size: 1.375rem;
    margin: 0 0 0.4em 0;
}
.wl-article-card .wp-block-post-title a {
    color: var(--wellorious-navy);
    text-decoration: none;
}
.wl-article-card .wp-block-post-excerpt {
    color: var(--wl-muted-text);
    font-size: 0.975rem;
    line-height: 1.6;
    margin: 0 0 var(--wl-space-xs) 0;
}
.wl-article-card .wp-block-post-date {
    font-size: 0.85rem;
    color: var(--wl-muted-text);
}
.wl-archive-grid {
    display: flex;
    flex-direction: column;
    gap: var(--wl-space-md);
}

/* --- Empty-state for a Foundation with no published articles yet --- */
.wl-archive-empty {
    background: var(--wellorious-cream);
    border-radius: 12px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
}
.wl-archive-empty p {
    color: var(--wl-muted-text);
    margin: 0 0 var(--wl-space-sm) 0;
}
.wl-archive-empty p:last-child {
    margin-bottom: 0;
}

@media (max-width: 782px) {
    .wl-pullquote p { font-size: 1.25rem; }
    .wl-related__grid { flex-direction: column; }
}

@media (max-width: 600px) {
    .wl-archive-hero { padding-top: var(--wl-space-md); }
    .wl-meta.wp-block-group { font-size: 0.85rem; }
}


/* =========================================================
   WEL-VIS-006A -- Payhip & Fluent Forms CTA polish
   Restyles Payhip's default green "Buy Now" button and Fluent
   Forms' default blue submit button (form #2, resource page) to
   match the site's own pill-shaped button system (Inter Variable,
   9999px radius, locked palette). Scoped to these two plugin-
   rendered elements only -- does not touch their markup, class
   names, data attributes, form fields, or checkout/submission
   behaviour. Native wp-admin (Fluent Forms Styler) and any Payhip
   dashboard config were both unreachable in this session (no
   active login), so this is the documented CSS-override fallback
   per authorization.
   ========================================================= */

/* --- Payhip "Buy Now" button: green preset -> Wellorious gold --- */
a.payhip-buy-button.payhip-green-styled-button {
    background-color: var(--wellorious-gold) !important;
    background-image: none !important;
    color: var(--wellorious-navy) !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    letter-spacing: 0.01em !important;
    padding: 0.875rem 1.625rem !important;
    min-height: 48px;
    box-sizing: border-box;
    transition: opacity 0.15s ease-in-out, transform 0.1s ease-in-out;
}

a.payhip-buy-button.payhip-green-styled-button:hover {
    opacity: 0.85;
    background-color: var(--wellorious-gold) !important;
    background-image: none !important;
    color: var(--wellorious-navy) !important;
}

a.payhip-buy-button.payhip-green-styled-button:active {
    transform: translateY(1px);
}

/* --- Fluent Forms "Send Me the Free Guide" submit button (form #2): blue default -> Wellorious navy --- */
#fluentform_2 .ff-btn-submit {
    background-color: var(--wellorious-navy) !important;
    border-color: var(--wellorious-navy) !important;
    color: #FFFFFF !important;
    border-radius: 9999px !important;
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    letter-spacing: 0.01em !important;
    padding: 0.875rem 1.625rem !important;
    min-height: 48px;
    box-sizing: border-box;
    transition: opacity 0.15s ease-in-out, transform 0.1s ease-in-out;
}

#fluentform_2 .ff-btn-submit:hover {
    opacity: 0.85;
}

#fluentform_2 .ff-btn-submit:active {
    transform: translateY(1px);
}


/* --- Resource/product page taxonomy line (WEL-VIS-006A P2-1, optional): quiet metadata treatment ---
   Targets WordPress's own stable core wp:post-terms block classes
   (already used sitewide for this exact purpose); no template,
   taxonomy, or markup change. Restyles the raw black hyperlink
   list into the same quiet metadata language already used for
   article bylines/dates (.wl-meta) elsewhere on the site. */
.taxonomy-foundation.wp-block-post-terms,
.taxonomy-content_type.wp-block-post-terms {
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-size: 0.9rem;
    color: var(--wl-muted-text);
    letter-spacing: 0.01em;
    margin: 0 0 var(--wl-space-xs) 0;
}

.taxonomy-foundation.wp-block-post-terms a,
.taxonomy-content_type.wp-block-post-terms a {
    color: var(--wl-muted-text);
    text-decoration: none;
    border-bottom: 1px solid var(--wl-hairline);
}

.taxonomy-foundation.wp-block-post-terms a:hover,
.taxonomy-content_type.wp-block-post-terms a:hover {
    color: var(--wellorious-navy);
    border-bottom-color: var(--wellorious-navy);
}


/* ===== WEL-WEB-009 -- Header/footer hover-reveal navigation ===== */

/* Footer nav text-color fix: the global body/p/li color:navy rule cascades
   into the footer nav via WP core .wp-block-navigation-item__content color:inherit
   rule, making footer nav links render navy-on-navy (invisible). Scoping cream back in. */
footer .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: var(--wellorious-cream) !important;
}
footer .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    color: var(--wellorious-gold) !important;
}

@media (hover: hover) and (pointer: fine) {
    header .wp-block-navigation__responsive-container-content {
        opacity: 0;
        transition: opacity 0.18s ease;
        pointer-events: none;
    }
    header:hover .wp-block-navigation__responsive-container-content,
    header:focus-within .wp-block-navigation__responsive-container-content {
        opacity: 1;
        pointer-events: auto;
    }

    footer .wp-block-navigation__container {
        opacity: 0;
        transition: opacity 0.18s ease;
        pointer-events: none;
    }
    footer:hover .wp-block-navigation__container,
    footer:focus-within .wp-block-navigation__container {
        opacity: 1;
        pointer-events: auto;
    }
}

header .wp-block-navigation-item__content,
footer .wp-block-navigation-item__content {
    white-space: nowrap;
}


/* ===== WEL-WEB-009 -- Related Topics: dot list -> rounded pill buttons ===== */
/* Shared [wellorious_foundation_topics] shortcode output, identical on all
   five Foundation archives (Nourish/Move/Build/Recover/Repeat). Plain <ul><li>
   markup with no existing styling of its own -- pure CSS conversion, matching
   the site's existing outline-pill language (transparent fill, navy border/text). */
ul.wellorious-related-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--wl-space-xs) var(--wl-space-sm);
}

ul.wellorious-related-topics li {
    margin: 0;
    padding: 0;
}

ul.wellorious-related-topics li a {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: 1.5px solid var(--wellorious-navy);
    border-radius: 9999px;
    color: var(--wellorious-navy);
    font-family: var(--wp--preset--font-family--body, 'Inter Variable', sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

ul.wellorious-related-topics li a:hover,
ul.wellorious-related-topics li a:focus-visible {
    background-color: var(--wellorious-navy);
    color: #FFFFFF;
}