/* =============================================================================
   BTND Custom Theme Overrides — Tailscale-inspired refinements
   Phase 1: Design tokens, background tone & button shape
   
   Strategy: This file is loaded AFTER screen.css and overrides only what we
   intentionally change. Never modify screen.css directly — it gets rebuilt by
   gulp and changes would be lost.
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   Core CSS custom properties that cascade through the entire theme.
   Changing these here propagates everywhere automatically.
   ============================================================================= */

:root {

    /* -------------------------------------------------------------------------
       1.1 Background & Surface Palette
       
       Tailscale's warmth comes from a single decision: off-white instead of
       white. We use a 3-level surface system:
       
       --btnd-bg-base      The page canvas. Replaces pure white with warm off-white.
       --btnd-bg-surface   Card/component surface — slightly warmer than base.
       --btnd-bg-sunken    Recessed areas (code blocks, CTA strip, sidebar).
       
       Note: --background-color is injected inline in default.hbs from the Ghost
       admin "Site background color" setting. We set our warm default here as a
       fallback, and users can still override it from Ghost admin.
       ------------------------------------------------------------------------- */
    --btnd-bg-base:     #f7f6f2;
    --btnd-bg-surface:  #ffffff;
    --btnd-bg-sunken:   #f0efe9;

    /* -------------------------------------------------------------------------
       1.2 Border & Separator Tokens
       
       Tailscale uses very subtle, warm-tinted borders — barely visible against
       the off-white canvas. We refine the existing theme tokens here.
       ------------------------------------------------------------------------- */
    --color-border:       rgb(0 0 0 / 0.07);
    --color-dark-border:  rgb(0 0 0 / 0.45);
    --btnd-border:        1px solid var(--color-border);
    --btnd-border-hover:  1px solid rgb(0 0 0 / 0.14);

    /* -------------------------------------------------------------------------
       1.3 Typography Tokens
       
       Tighter letter-spacing on large headings (Tailscale hallmark).
       We don't change font families — Inter/Garamond/JetBrains are excellent.
       ------------------------------------------------------------------------- */
    --btnd-heading-tracking-hero:   -0.036em;   /* Page titles, hero headings */
    --btnd-heading-tracking-large:  -0.026em;   /* Section headings h2/h3 */
    --btnd-heading-tracking-card:   -0.018em;   /* Card titles */
    --btnd-body-tracking:           -0.006em;   /* Body text — barely perceptible but cleaner */

    /* -------------------------------------------------------------------------
       1.4 Shape Tokens
       
       Tailscale uses 8–10px border-radius on buttons and cards.
       The current theme uses 100px (full pill) for buttons.
       We centralise the new values here.
       ------------------------------------------------------------------------- */
    --btnd-radius-btn:    10px;    /* Buttons — Tailscale-style softened rect */
    --btnd-radius-card:   12px;    /* Post cards */
    --btnd-radius-input:  10px;    /* Form inputs */
    --btnd-radius-tag:    6px;     /* Tag/category pills */

    /* -------------------------------------------------------------------------
       1.5 Spacing & Rhythm
       
       We open up a few key vertical rhythms to give the layout more air,
       matching Tailscale's generous whitespace.
       ------------------------------------------------------------------------- */
    --btnd-nav-height:      80px;    /* Tighten slightly from 100px for refinement */
    --btnd-card-padding:    24px;    /* Internal card padding */
    --btnd-section-gap:     80px;    /* Gap between major page sections */

    /* -------------------------------------------------------------------------
       1.6 Shadow Tokens
       
       Tailscale cards have a very soft, barely-there elevation shadow.
       This replaces border-only card treatment with a more refined feel.
       ------------------------------------------------------------------------- */
    --btnd-shadow-card: 
        0 1px 2px rgb(0 0 0 / 0.04),
        0 4px 12px rgb(0 0 0 / 0.04);
    --btnd-shadow-card-hover: 
        0 2px 4px rgb(0 0 0 / 0.06),
        0 8px 24px rgb(0 0 0 / 0.07);
}

/* Light-text context overrides (used when nav/footer has a dark accent color) */
:root.has-light-text,
:is(.gh-navigation, .gh-footer).has-accent-color {
    --color-border:      rgb(255 255 255 / 0.12);
    --color-dark-border: rgb(255 255 255 / 0.45);
}


/* =============================================================================
   2. BACKGROUND & BODY TONE
   
   Apply the warm off-white to the page. We override the `background-color`
   property on body. The inline :root { --background-color } style in default.hbs
   still takes precedence for Ghost admin color customization — so users who
   explicitly set a custom background color in Ghost admin will see their choice.
   We're only setting the *default* here.
   ============================================================================= */

body {
    /* Use the admin-controlled variable as primary, fall back to our warm default */
    background-color: var(--background-color, var(--btnd-bg-base));
    /* Subtle refinement: slightly tighter body text tracking */
    letter-spacing: var(--btnd-body-tracking);
}


/* =============================================================================
   3. BUTTONS
   
   Change from full-pill (100px) to the Tailscale-style softened rounded rect.
   We target .gh-button globally, then handle the form's embedded button
   separately (the search/subscribe pill form stays pill-shaped — that's
   a distinct UI pattern and pill works well there).
   ============================================================================= */

/* Primary action button */
.gh-button {
    border-radius: var(--btnd-radius-btn);
    /* Slightly more padding to compensate for the shape change */
    padding: 0.85em 1.6em;
    /* Marginally tighter tracking for a crisper label feel */
    letter-spacing: -0.008em;
    /* Smooth transition for hover states */
    transition: opacity 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.gh-button:hover {
    opacity: 1;                           /* Override the theme's blanket opacity: 0.95 */
    transform: translateY(-1px);          /* Subtle lift on hover */
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

.gh-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Navigation Subscribe/Account button */
.gh-navigation-members .gh-button {
    border-radius: var(--btnd-radius-btn);
}

/* The search/email form's internal submit button — keep slightly rounded
   but harmonise with the new token. The outer form stays pill-shaped. */
.gh-form .gh-button {
    border-radius: calc(var(--btnd-radius-btn) - 2px);
}

/* Share button on article pages */
.gh-button-share {
    border-radius: var(--btnd-radius-btn);
}

/* Font-specific overrides: the theme forces border-radius: 0 on buttons when
   serif/mono titles are active. We restore our rounded rect in those cases. */
:is(.has-serif-title, .has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"])
:is(.gh-button),
body[class*=" gh-font-heading"]:not(.gh-font-heading-fira-sans):not(.gh-font-heading-inter):not(.gh-font-heading-manrope):not(.gh-font-heading-noto-sans):not(.gh-font-heading-nunito):not(.gh-font-heading-poppins):not(.gh-font-heading-roboto):not(.gh-font-heading-space-grotesk)
.gh-button {
    border-radius: var(--btnd-radius-btn);
}


/* =============================================================================
   4. NAVIGATION REFINEMENT
   
   Tighten the height slightly (80px vs 100px) and add a hairline bottom border
   to gently separate the nav from the content — Tailscale-style.
   ============================================================================= */

.gh-navigation {
    height: var(--btnd-nav-height);
    border-bottom: var(--btnd-border);
    /* Smooth transition for any hover/active states */
    transition: border-color 0.2s ease;
}

/* Remove the border when the nav has an accent-color background */
.gh-navigation.has-accent-color {
    border-bottom-color: transparent;
}

/* The inner container height follows the navigation height token */
.gh-navigation-inner {
    height: 100%;
}

/* Nav links: slightly tighter tracking = more refined at 15px */
.gh-navigation .nav a {
    letter-spacing: -0.008em;
}

/* Nav logo: tighten tracking */
.gh-navigation-logo {
    letter-spacing: -0.02em;
}


/* =============================================================================
   5. POST CARDS
   
   The theme has two feed layouts that need completely different treatments:
   
   LIST layout  — horizontal row: [image | title + excerpt + meta]
                  Keep the original separator-line approach. DO NOT apply card
                  surfaces here — it creates the "big white box" problem. Only
                  the thumbnail image gets rounded corners.
   
   GRID layout  — vertical stack: [image on top, text below]
                  This is where white surface + border + shadow makes sense.
   ============================================================================= */

/* ------------------------------------------------------------------
   5a. SHARED — applies to all card layouts
   ------------------------------------------------------------------ */

.gh-card-title {
    letter-spacing: var(--btnd-heading-tracking-card);
    line-height: 1.25;
}

.gh-card-link:hover .gh-card-title {
    opacity: 0.75;
}

.gh-card-tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 8px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ghost-accent-color);
    background-color: color-mix(in srgb, var(--ghost-accent-color) 10%, transparent);
    border-radius: var(--btnd-radius-tag);
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   5b. LIST LAYOUT — clean horizontal rows, no dividers
   ------------------------------------------------------------------ */

.gh-container.is-list .gh-card {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    transform: none !important;
    transition: none;
}

/* Remove the ::before hairline between list items from screen.css */
.gh-container.is-list .gh-card + .gh-card::before,
.home-template .gh-container.is-list .gh-card:first-child::before {
    display: none;
}

/* Thumbnail: rounded corners only */
.gh-container.is-list .gh-card-image {
    border-radius: var(--btnd-radius-card);
    overflow: hidden;
}

/* Subtle image fade on hover — no transform/lift on rows */
.gh-container.is-list .gh-card-link:hover .gh-card-image img {
    opacity: 0.88;
    transition: opacity 0.2s ease;
}

.gh-container.is-list .gh-card:not(.no-image) .gh-card-wrapper {
    padding: 6px 0;
}

/* No divider between excerpt and meta — just spacing */
.gh-container.is-list .gh-card-meta:not(:empty) {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
}

/* ------------------------------------------------------------------
   5c. GRID LAYOUT — vertical card with image on top
   ------------------------------------------------------------------ */

.gh-container.is-grid .gh-card {
    background-color: var(--btnd-bg-surface);
    border: var(--btnd-border);
    border-radius: var(--btnd-radius-card);
    overflow: hidden;
    box-shadow: var(--btnd-shadow-card);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        transform 0.18s ease;
}

.gh-container.is-grid .gh-card:hover {
    box-shadow: var(--btnd-shadow-card-hover);
    border-color: rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

.gh-container.is-grid .gh-card-link {
    gap: 0;
}

.gh-container.is-grid .gh-card-image {
    border-radius: 0;
}

.gh-container.is-grid .gh-card-wrapper {
    padding: 20px var(--btnd-card-padding) var(--btnd-card-padding);
}

.gh-container.is-grid .gh-card::before,
.gh-container.is-grid .gh-card::after {
    display: none;
}

.gh-container.is-grid .gh-card-meta:not(:empty) {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

/* ------------------------------------------------------------------
   5d. HEADER CARDS (Magazine / Highlight hero areas)
   ------------------------------------------------------------------ */

.gh-header .gh-card,
.gh-featured .gh-card {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
}

.gh-header .gh-card:hover,
.gh-featured .gh-card:hover {
    transform: none;
    box-shadow: none;
}


/* =============================================================================
   6. HEADING TYPOGRAPHY
   
   Apply Tailscale-style tight tracking to headings throughout the site.
   We're only adjusting letter-spacing — not size, weight, or font-family.
   ============================================================================= */

/* Article/post page title */
.gh-article-title {
    letter-spacing: var(--btnd-heading-tracking-hero);
}

/* Page/index section headings */
.gh-container-title {
    letter-spacing: var(--btnd-heading-tracking-large);
}

/* Header landing/search title */
.gh-header-title {
    letter-spacing: var(--btnd-heading-tracking-hero);
}

/* CTA heading */
.gh-cta-title {
    letter-spacing: var(--btnd-heading-tracking-hero);
}

/* Footer signup heading */
.gh-footer-signup-header {
    letter-spacing: var(--btnd-heading-tracking-large);
}


/* =============================================================================
   7. CTA STRIP
   
   The CTA section (appears between header and post list on Magazine/Highlight
   layouts) gets a warm sunken background and slightly more padding to breathe.
   ============================================================================= */

.gh-cta-inner {
    background-color: var(--btnd-bg-sunken);
    border-radius: var(--btnd-radius-card);
    /* Slightly more breathing room */
    padding: clamp(56px, 4vw + 32px, 96px) clamp(40px, 3vw + 24px, 80px);
}


/* =============================================================================
   8. FOOTER
   
   More breathing room in the footer bar, and slightly softer border.
   ============================================================================= */

.gh-footer-bar {
    border-block-color: var(--color-border);
}

/* Footer logo tracking */
.gh-footer-logo {
    letter-spacing: var(--btnd-heading-tracking-large);
}


/* =============================================================================
   9. DARK-ACCENT NAV & FOOTER
   When the admin sets an accent-color nav/footer, ensure cards on that
   background don't pick up any surface treatment.
   ============================================================================= */

.gh-navigation.has-accent-color .gh-card,
.gh-footer.has-accent-color .gh-card {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none !important;
}


/* =============================================================================
   10. ARTICLE PAGE REFINEMENTS
   
   Post body content: slightly tighter line-length and improved link style.
   ============================================================================= */

.gh-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: var(--color-mid-gray);
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.gh-content a:hover {
    opacity: 1;   /* Override theme default */
    text-decoration-color: currentColor;
}


/* =============================================================================
   11. FORM INPUTS
   
   Harmonise input radius with the new button token.
   The outer search/email form keeps its pill shape (it's intentional UI),
   but we can refine the border treatment.
   ============================================================================= */

.gh-form {
    background-color: var(--btnd-bg-sunken);
    border: var(--btnd-border);
}

.gh-form:hover {
    background-color: var(--btnd-bg-sunken);
    border-color: rgb(0 0 0 / 0.14);
}


/* =============================================================================
   12. SUBTLE TRANSITION POLISH
   
   Apply smooth color transitions to links and interactive elements globally.
   Small detail, big perceived quality improvement.
   ============================================================================= */

a {
    transition: opacity 0.12s ease, color 0.12s ease;
}

a:hover {
    opacity: 0.75;  /* Slightly more visible than the theme's 0.8 */
}

/* Tags & category links: don't fade with opacity — use color */
.gh-article-tag {
    transition: color 0.12s ease;
}

.gh-article-tag:hover {
    opacity: 1;
    color: var(--ghost-accent-color);
}


/* =============================================================================
   13. RESPONSIVE ADJUSTMENTS
   
   Ensure the card treatment degrades gracefully on mobile.
   On very small screens, cards lose the hover shadow/lift (no hover on touch)
   but keep their surface/border treatment.
   ============================================================================= */

@media (max-width: 767px) {
    .gh-card:hover {
        transform: none;  /* Disable lift on touch devices */
        box-shadow: var(--btnd-shadow-card);
    }

    :root {
        --btnd-nav-height: 64px;  /* Tighter mobile nav */
        --btnd-card-padding: 16px;
    }
}

@media (hover: none) {
    /* Touch devices: remove hover states that don't apply */
    .gh-card:hover {
        transform: none;
        box-shadow: var(--btnd-shadow-card);
        border-color: var(--color-border);
    }

    .gh-button:hover {
        transform: none;
        box-shadow: none;
    }
}