/* ============================================================================
   dc-fieldnotes.css  —  "FIELD NOTES" SKIN  (ADDITIVE OVERRIDE LAYER)
   ----------------------------------------------------------------------------
   the-doggos-ux-enhancer · "The Desi Carnivore" landing page reskin.
   Rendered by shortcode [doggos_desi_carnivore]  ( render_desi_carnivore() ).

   WHAT THIS IS
   ------------
   A self-contained, additive override stylesheet that reskins the Desi
   Carnivore landing page to the approved "Field Notes" look — matching the
   already-shipped subscription skin (doggos-subscription-box/assets/css/
   subscription-fieldnotes.css): bone paper + faint ruled grid, Fraunces
   display headlines with a lime underline accent, JetBrains-Mono "FIG. 0X"
   mono eyebrow labels, hard OFFSET shadows (never blur), 1.5px solid ink
   hairlines, rationed lime (#aac527) as the single CTA colour, and
   specimen-style feature cards.

   HOW IT LOADS
   ------------
   Enqueued AFTER assets/css/doggos-ux.css (handle 'doggos-ux-css' is listed
   as a dependency of this sheet's handle 'doggos-ux-dc-fieldnotes'), so these
   rules win the cascade against the base `.dc-*` rules. This file does NOT
   modify doggos-ux.css — it overrides it.

   The base sheet's hero/bottom-cta are dark green gradients with white text;
   the feature cards are white with soft blurred drop shadows; the CTA button
   is a green gradient pill with `color:#fff !important`. To beat those, every
   rule here is scoped under `.doggos-desi-carnivore-landing` and `!important`
   is used ONLY on VISUAL props (color/background/border/box-shadow/
   font-family/border-radius), never on layout (display/grid/position/width/
   flex) — those are left to the base sheet so the flex hero centring and the
   auto-fit features grid keep working.

   SCOPE SAFETY
   ------------
   Every selector is prefixed with `.doggos-desi-carnivore-landing`, so this
   sheet only touches the Desi Carnivore section. It does NOT restyle the
   global trust-strip, the site header, or the dfc side cart (none of those
   live inside this wrapper). The base `float` card animation + reduced-motion
   guard are preserved.

   TOKENS are defined once, scoped to the wrapper, below.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (scoped — do not leak to the rest of the site)
   Fonts (Fraunces, JetBrains Mono) are already self-hosted site-wide by the
   theme. Token names mirror subscription-fieldnotes.css for consistency.
--------------------------------------------------------------------------- */
.doggos-desi-carnivore-landing {
    --fn-ink:        #2a2a36;
    --fn-ink-soft:   #55525e;
    --fn-ink-mute:   #8a8794;
    --fn-bone:       #faf6ee;
    --fn-cream:      #fdfaf3;
    --fn-ivory:      #f8f0e3;
    --fn-moss:       #20202a;
    --fn-lime:       #aac527;
    --fn-sage:       #95ab22;
    --fn-lime-ink:   #3a4410;
    --fn-rust:       #8e5a2f;
    --fn-turmeric:   #d4a83a;

    --fn-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fn-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --fn-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --fn-rule: rgba(42, 42, 54, 0.18);          /* ink hairline (translucent) */
    --fn-grid: rgba(42, 42, 54, 0.035);         /* ruled paper line */

    --fn-ease: cubic-bezier(.22, 1, .36, 1);
    --fn-snap: cubic-bezier(.5, 1.4, .5, 1);

    color: var(--fn-ink) !important;
    font-family: var(--fn-body) !important;
}

/* ---------------------------------------------------------------------------
   2. PAGE WRAPPER — bone paper + faint ruled grid (mirrors the sub skin)
--------------------------------------------------------------------------- */
.doggos-desi-carnivore-landing {
    background-color: var(--fn-bone) !important;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 31px,
            var(--fn-grid) 31px,
            var(--fn-grid) 32px
        ) !important;
}

/* ===========================================================================
   3. HERO  (.dc-hero) — paper hero on bone, ink type, lime underline accent
   The base hero is a dark-green gradient with white text + 3 decorative
   layers (gradient / pattern / glow). We flip it to light paper: neutralise
   the dark bg layers, keep the centred flex layout untouched.
=========================================================================== */
.doggos-desi-carnivore-landing .dc-hero {
    background: transparent !important;
    border-bottom: 1.5px solid var(--fn-ink) !important;
}
/* Dark gradient base layer -> transparent so bone paper shows through */
.doggos-desi-carnivore-landing .dc-hero-bg {
    background: transparent !important;
}
/* Coloured radial washes -> quiet lime tint */
.doggos-desi-carnivore-landing .dc-hero-gradient {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(170, 197, 39, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(142, 90, 47, 0.05) 0%, transparent 55%) !important;
}
/* SVG plus-pattern: recolour the white fill to faint ink (kept as accent) */
.doggos-desi-carnivore-landing .dc-hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232a2a36' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}
/* Blurred green glow -> quiet lime so the paper stays clean */
.doggos-desi-carnivore-landing .dc-hero-glow {
    background: radial-gradient(circle, rgba(170, 197, 39, 0.16) 0%, transparent 70%) !important;
}

/* Eyebrow badge -> JetBrains-Mono "FIG."-style cream chip, ink hairline,
   hard offset shadow, lime dot. (Base = translucent white glass pill.) */
.doggos-desi-carnivore-landing .dc-badge {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.doggos-desi-carnivore-landing .dc-badge-text {
    color: var(--fn-rust) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
}

/* Hero headline -> big Fraunces ink with a lime underline accent.
   Markup is a flat <h1 class="dc-title">{title}</h1> with no inner span, so
   the lime accent is drawn as a thick lime underline via border-bottom on the
   text itself (kept inline-block-free: border under the full line reads as a
   ruled accent, matching the sub skin's underline language). */
.doggos-desi-carnivore-landing .dc-title {
    color: var(--fn-ink) !important;
    font-family: var(--fn-disp) !important;
    font-weight: 560 !important;
    letter-spacing: -0.02em !important;
    background-image: linear-gradient(var(--fn-lime), var(--fn-lime)) !important;
    background-repeat: no-repeat !important;
    background-position: 0 92% !important;
    background-size: 100% 0.14em !important;
}
.doggos-desi-carnivore-landing .dc-subtitle {
    color: var(--fn-ink-soft) !important;
    font-family: var(--fn-body) !important;
}
.doggos-desi-carnivore-landing .dc-cta-hint {
    color: var(--fn-ink-mute) !important;
    font-family: var(--fn-mono) !important;
    letter-spacing: 0.02em !important;
}

/* ===========================================================================
   4. PRIMARY BUTTON  (.dc-cta-button) — lime fill, ink text, 4px hard offset
   The base button forces `color:#fff !important` on the link AND on :hover,
   plus a green gradient + blurred glow shadow. We override colour with
   !important (required to beat the base !important) and replace the shadow.
=========================================================================== */
.doggos-desi-carnivore-landing .dc-cta-button {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
    transition: transform 0.15s var(--fn-snap), box-shadow 0.15s var(--fn-snap) !important;
}
.doggos-desi-carnivore-landing .dc-cta-button:hover,
.doggos-desi-carnivore-landing .dc-cta-button:focus-visible {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;          /* beats base :hover color:#fff !important */
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
/* mono arrow/rocket icon inherits ink-on-lime */
.doggos-desi-carnivore-landing .dc-cta-icon {
    color: var(--fn-lime-ink) !important;
}

/* ===========================================================================
   5. FEATURES SECTION  (.dc-features) — paper band, mono eyebrow, specimen
   cards. Base band is a light green->white gradient; header is dark-green.
=========================================================================== */
.doggos-desi-carnivore-landing .dc-features {
    background: transparent !important;
    border-bottom: 1.5px solid var(--fn-ink) !important;
    position: relative;
}
/* "FIG. 0X" chapter marker above the features header (decorative, additive) */
.doggos-desi-carnivore-landing .dc-features-header::before {
    content: 'FIG. 01 — THE FIELD KIT';
    display: block;
    font-family: var(--fn-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fn-rust);
    margin-bottom: 14px;
}
.doggos-desi-carnivore-landing .dc-features-header h2 {
    color: var(--fn-ink) !important;
    font-family: var(--fn-disp) !important;
    font-weight: 560 !important;
    letter-spacing: -0.02em !important;
}
.doggos-desi-carnivore-landing .dc-features-header p {
    color: var(--fn-ink-soft) !important;
    font-family: var(--fn-body) !important;
}

/* --- Specimen feature cards: cream/bone, ink hairline, hard 6px offset --- */
.doggos-desi-carnivore-landing .dc-feature-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
.doggos-desi-carnivore-landing .dc-feature-card:hover {
    border-color: var(--fn-ink) !important;
    background: var(--fn-cream) !important;
    box-shadow: 8px 8px 0 var(--fn-ink) !important;
}
/* Every other card gets a faint lime wash so the grid reads as a specimen
   sheet (alternating, like the sub skin's highlight cards). */
.doggos-desi-carnivore-landing .dc-feature-card:nth-child(3n + 2) {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 88%) !important;
}
.doggos-desi-carnivore-landing .dc-feature-card h3 {
    color: var(--fn-ink) !important;
    font-family: var(--fn-disp) !important;
    font-weight: 560 !important;
    letter-spacing: -0.01em !important;
}
.doggos-desi-carnivore-landing .dc-feature-card p {
    color: var(--fn-ink-soft) !important;
    font-family: var(--fn-body) !important;
}
/* Emoji icon sits in a small mono "specimen tag" frame */
.doggos-desi-carnivore-landing .dc-feature-icon {
    display: inline-block;
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 12px !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
    line-height: 1 !important;
    padding: 10px 12px !important;
}

/* ===========================================================================
   6. BOTTOM CTA  (.dc-bottom-cta) — full-bleed lime band (matches sub final)
   Base is a dark-green gradient with white text. We flip it to the approved
   lime end-card, with the primary button inverting to an ink fill so it
   stays legible on lime.
=========================================================================== */
.doggos-desi-carnivore-landing .dc-bottom-cta {
    background: var(--fn-lime) !important;
    border-top: 1.5px solid var(--fn-ink) !important;
    color: var(--fn-lime-ink) !important;
    position: relative;
}
.doggos-desi-carnivore-landing .dc-bottom-content::before {
    content: 'FIG. 02 — END CARD';
    display: block;
    font-family: var(--fn-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fn-lime-ink);
    opacity: 0.8;
    margin-bottom: 14px;
}
.doggos-desi-carnivore-landing .dc-bottom-cta h2 {
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-disp) !important;
    font-weight: 560 !important;
    letter-spacing: -0.02em !important;
}
.doggos-desi-carnivore-landing .dc-bottom-cta p {
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-body) !important;
    opacity: 0.85;
}
/* On the lime band, invert the primary CTA to ink fill / bone text so it
   doesn't disappear (lime-on-lime). Hover offset shadow goes lime-ink. */
.doggos-desi-carnivore-landing .dc-bottom-cta .dc-cta-button,
.doggos-desi-carnivore-landing .dc-cta-large {
    background: var(--fn-ink) !important;
    color: var(--fn-bone) !important;
    border: 1.5px solid var(--fn-ink) !important;
    box-shadow: 4px 4px 0 var(--fn-lime-ink) !important;
}
.doggos-desi-carnivore-landing .dc-bottom-cta .dc-cta-button:hover,
.doggos-desi-carnivore-landing .dc-bottom-cta .dc-cta-button:focus-visible,
.doggos-desi-carnivore-landing .dc-cta-large:hover {
    background: var(--fn-ink) !important;
    color: var(--fn-bone) !important;
    box-shadow: 6px 6px 0 var(--fn-lime-ink) !important;
}
.doggos-desi-carnivore-landing .dc-bottom-cta .dc-cta-icon {
    color: var(--fn-bone) !important;
}

/* ===========================================================================
   7. MOBILE  (<= 560px) — cards stack (base auto-fit grid handles columns),
   hero stays readable, offset shadows trimmed so cards don't overflow.
   We only touch visual chrome; the base 768px breakpoint already collapses
   the grid to 1 column and full-width buttons.
=========================================================================== */
@media (max-width: 560px) {
    .doggos-desi-carnivore-landing .dc-feature-card {
        box-shadow: 4px 4px 0 var(--fn-ink) !important;
    }
    .doggos-desi-carnivore-landing .dc-feature-card:hover {
        box-shadow: 5px 5px 0 var(--fn-ink) !important;
    }
    .doggos-desi-carnivore-landing .dc-cta-button,
    .doggos-desi-carnivore-landing .dc-cta-large {
        box-shadow: 3px 3px 0 var(--fn-ink) !important;
    }
    .doggos-desi-carnivore-landing .dc-bottom-cta .dc-cta-button,
    .doggos-desi-carnivore-landing .dc-cta-large {
        box-shadow: 3px 3px 0 var(--fn-lime-ink) !important;
    }
    /* keep the underline accent proportional on the smaller headline */
    .doggos-desi-carnivore-landing .dc-title {
        background-size: 100% 0.12em !important;
    }
}

/* ===========================================================================
   8. REDUCED-MOTION SAFETY for the transitions introduced above.
   (The base sheet already disables the .dc-feature-card `float` animation
   under prefers-reduced-motion; we add our button/card transitions here.)
=========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .doggos-desi-carnivore-landing .dc-cta-button,
    .doggos-desi-carnivore-landing .dc-cta-large,
    .doggos-desi-carnivore-landing .dc-feature-card {
        transition: none !important;
    }
    .doggos-desi-carnivore-landing .dc-cta-button:hover,
    .doggos-desi-carnivore-landing .dc-cta-button:focus-visible,
    .doggos-desi-carnivore-landing .dc-cta-large:hover {
        transform: none !important;
    }
}