/* wildacu.life — "Rooted in Wellness"
/* ------------------------------------------------------------

Layered over Source's screen.css (loaded after it from
partials/wildacu/head.hbs), so upstream updates merge cleanly.

Palette: the five colours asked for (blue, green, yellow, orange,
brown) in earthy tones, on a warm paper background. Look inspired by
paper-toned, calm writing themes: serif headings, pill forms
and soft rounded images.

Design settings this expects (Ghost Admin → Settings → Design):
  Site background color  #f6f1e7
  Title font             Elegant serif   (now Fraunces)
  Body font              Modern sans-serif (now Hanken Grotesk)
  Accent color (Brand)   #5f7d4e         (sage green, used for buttons)
*/

:root {
    --wa-paper: #f6f1e7;
    --wa-paper-deep: #ede5d6;
    --wa-bark: #2f2419;      /* text */
    --wa-brown: #7a5536;
    --wa-green: #5f7d4e;
    --wa-blue: #4f7f9a;
    --wa-yellow: #d9a93a;
    --wa-orange: #cf7a3c;
    --wa-radius: 20px;
    --wa-roots: linear-gradient(90deg,
        var(--wa-blue) 0 20%, var(--wa-green) 20% 40%, var(--wa-yellow) 40% 60%,
        var(--wa-orange) 60% 80%, var(--wa-brown) 80% 100%);

    --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-serif: Fraunces, Georgia, Times, serif;

    /* Warm brown ink instead of Source's near-black */
    --color-darker-gray: var(--wa-bark);
    --color-secondary-text: rgb(47 36 25 / 0.64);
    --color-lighter-gray: rgb(122 85 54 / 0.07);
    --color-border: rgb(47 36 25 / 0.1);
    --color-dark-border: rgb(47 36 25 / 0.5);
}

body {
    font-size: 1.7rem;
}

::selection {
    background-color: rgb(217 169 58 / 0.35);
}

/* Headings: Fraunces, a bit bolder than Source's serif setting */
.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) {
    font-weight: 620;
    letter-spacing: -0.015em;
}

/* Five-colour band (static on most pages, reading progress on posts)
/* ---------------------------------------------------------- */

.wa-band {
    position: fixed;
    inset: 0 0 auto;
    z-index: 4000001;
    height: 4px;
    pointer-events: none;
}

.wa-band-fill {
    height: 100%;
    background: var(--wa-roots);
    background-size: 100vw 100%;
    transform-origin: left;
}

.wa-reading .wa-band {
    background-color: rgb(47 36 25 / 0.06);
}

.wa-reading .wa-band-fill {
    transform: scaleX(0);
}

/* Header & landing hero
/* ---------------------------------------------------------- */

.gh-navigation {
    padding-top: 4px; /* clear the band */
}

.gh-header.is-classic {
    padding-block: clamp(72px, 9vw, 140px);
}

.gh-header.is-classic .gh-header-inner {
    gap: 40px;
    max-width: 860px;
}

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header.is-classic .gh-header-title {
    font-size: clamp(4rem, 3.2vw + 2.8rem, 7rem);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.wa-form-note {
    margin-top: -20px;
    font-size: 1.5rem;
    color: var(--color-secondary-text);
}

.gh-header.is-classic.has-image .wa-form-note {
    color: rgb(255 255 255 / 0.85);
}

/* Pill forms and buttons (Source squares them off with a serif title font) */
:root :is(.gh-button, .gh-form, .gh-form-input) {
    border-radius: 100px !important;
}

.gh-form {
    background-color: #fff;
    box-shadow: 0 1px 2px rgb(47 36 25 / 0.06), 0 8px 24px -12px rgb(47 36 25 / 0.18);
}

.gh-form:hover {
    background-color: #fff;
}

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form-input {
    padding-inline: 26px;
}

.gh-form-input::placeholder {
    color: rgb(47 36 25 / 0.45);
}

/* Cards and images: soft rounded corners
/* ---------------------------------------------------------- */

.gh-card-image,
.gh-feature-image,
.gh-article-image img,
.gh-content :is(.kg-image-card img, .kg-gallery-image img, .kg-video-card, .kg-embed-card iframe),
.kg-bookmark-container,
.kg-product-card-container,
.kg-callout-card,
.gh-cta-inner {
    overflow: hidden;
    border-radius: var(--wa-radius);
}

.gh-content .kg-image-card:not(.kg-width-full) img,
.gh-content .kg-gallery-image img {
    border-radius: calc(var(--wa-radius) * 0.75);
}

.kg-width-full :is(img, .kg-video-card) {
    border-radius: 0 !important;
}

/* Primary tags cycle through the palette */
.gh-card-tag,
.gh-article-tag {
    color: var(--wa-green) !important;
    font-weight: 600;
}

.gh-feed .gh-card:nth-child(5n + 2) .gh-card-tag { color: var(--wa-blue) !important; }
.gh-feed .gh-card:nth-child(5n + 3) .gh-card-tag { color: #a77c16 !important; } /* yellow, darkened to stay readable on paper */
.gh-feed .gh-card:nth-child(5n + 4) .gh-card-tag { color: #b2612a !important; } /* orange, darkened */
.gh-feed .gh-card:nth-child(5n + 5) .gh-card-tag { color: var(--wa-brown) !important; }

/* Post content
/* ---------------------------------------------------------- */

.gh-content a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--wa-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.gh-content a:hover {
    opacity: 1;
    text-decoration-color: var(--wa-green);
}

.gh-content > blockquote:not([class]) {
    border-left-color: var(--wa-orange);
}

.gh-content > hr {
    height: 4px;
    max-width: 120px;
    margin-inline: auto;
    border: 0;
    border-radius: 4px;
    background: var(--wa-roots);
}

/* Footer: a slightly deeper paper so it reads as the ground */
.gh-footer:not(.has-accent-color) {
    background-color: var(--wa-paper-deep);
    margin-top: clamp(64px, 8vw, 120px);
    padding-top: 1px;
}