/* ==========================================================================
   Zigillo brand layer for the blog theme
   --------------------------------------------------------------------------
   Loaded by default.hbs AFTER built/screen.css, so these rules win over
   Casper without forking its stylesheet. It only overrides design tokens and
   the handful of components whose look must match www.zigillo.com.

   Token values come from the Presentation site
   (src/frontend/Presentation/app/globals.css): teal #0fa184, ink #1d1b26,
   paper #f6f3ed, lime #d9f277, Poppins headings + DM Sans body, 10-12px
   radius on controls and 20px on surfaces.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Poppins:wght@500;600&display=swap");

:root {
    /* Zigillo palette, same values as the Presentation site */
    --zigillo-teal: #0fa184;
    --zigillo-ink: #1d1b26;
    --zigillo-paper: #f6f3ed;
    --zigillo-lime: #d9f277;
    --zigillo-body-text: #55515b;

    /* Casper colour tokens */
    --color-darkgrey: var(--zigillo-ink);
    --color-midgrey: var(--zigillo-body-text);
    --color-secondary-text: #8b8680;
    --color-border: #e2ddd3;
    --color-lightgrey: #ece7dd;
    --color-wash: #e2f3ef;
    --color-darkmode: var(--zigillo-ink);

    /* Casper font tokens: the site pairs Poppins titles with DM Sans body */
    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --gh-font-heading: "Poppins", "DM Sans", sans-serif;
    --gh-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Fallback only: Ghost injects the accent from Ghost Admin > Brand,
       which must be #0FA184 so this file and Portal stay consistent. */
    --ghost-accent-color: #0fa184;
}

body {
    background: var(--zigillo-paper);
    color: var(--zigillo-ink);
    font-family: var(--font-sans);
}

::selection {
    color: var(--zigillo-ink);
    background: var(--zigillo-lime);
}

/* Global focus ring, aligned with the site */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(15, 161, 132, 0.4);
    outline-offset: 3px;
}

/* --- Site header ------------------------------------------------------- */

/* The site nav is 84px tall on paper, not a white 88px bar */
.gh-head {
    height: 84px;
    background-color: var(--zigillo-paper);
}

/* The logo is an image uploaded in Ghost Admin > Brand: the site renders it
   at a fixed 126px width */
.gh-head-logo img {
    width: 126px;
    height: auto;
    max-height: none;
}

/* Text-only fallback keeps the wordmark lowercase and geometric */
.gh-head-logo {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.gh-head-link {
    font-size: 1.3rem;
    font-weight: 600;
}

.gh-head-link:hover {
    color: var(--zigillo-teal);
}

/* Primary nav CTA mirrors .site-menu__pricing: lime pill, ink label */
.gh-head-button {
    height: 42px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--zigillo-ink);
    background: var(--zigillo-lime);
    box-shadow:
        0 0 0 1px rgba(29, 27, 38, 0.06),
        0 4px 12px rgba(29, 27, 38, 0.08);
    transition:
        transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

.gh-head-button:hover {
    color: var(--zigillo-ink);
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(29, 27, 38, 0.08),
        0 8px 18px rgba(29, 27, 38, 0.12);
}

.gh-head-button:active {
    transform: scale(0.97);
}

/* --- Feed and article surfaces ---------------------------------------- */

/* Rounded images as on the site's sections */
:is(.post-card-image-link, .gh-article-image, .gh-content .kg-image-card img, .gh-content img) {
    border-radius: 20px;
    overflow: hidden;
}

.post-card-image-link {
    /* overflow: hidden already clips the image, radius must sit on the link */
    border-radius: 20px;
}

.post-card-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.gh-article-title {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Body copy uses the same neutral grey as the site paragraphs */
.gh-content > p {
    color: var(--zigillo-body-text);
}

/* --- Footer ------------------------------------------------------------ */

/* Casper's compiled footer is pure black: keep the ink surface instead */
.site-footer {
    background: var(--zigillo-ink);
}

.site-footer a:hover {
    color: var(--zigillo-lime);
}