/*
    Duckhook & Co. "Classic Boutique" design tokens + global chrome.

    Source of truth: the design-tool handoff package (duckhook-homepage-1a.html + its
    README.md, "Classic Boutique (1a)") that Jon selected out of 3 explored directions, refined
    further through direct in-chat mockup iteration before that. This file is the reusable
    layer: CSS custom properties for the whole palette/type system, plus the chrome classes used
    in _Layout.cshtml (utility strip, centered brand header, primary nav) so every page picks up
    the new look without a bespoke redesign per view (see README's homepage redesign section for
    the full scope decision - only the homepage itself gets a full section-by-section rebuild;
    other views inherit these tokens plus Bootstrap for their existing layout).

    Loaded after bootstrap.css and Site.css in _Layout.cshtml, so its rules win on anything it
    overrides (body font/background, link color, headings) without having to fight specificity.
*/

:root {
    /* Colors - names match the handoff README's "Design Tokens" section exactly */
    --dh-porcelain: #1e3a5f;      /* cobalt/porcelain primary - logo duck, accents */
    --dh-porcelain-deep: #152b48; /* solid fills - utility strip, quick-action band */
    --dh-gold: #b98d3e;           /* accent - rules, borders, LOG IN, tags */
    --dh-gold-hover: #8f6c2e;
    --dh-gold-cream: #f3ead2;     /* utility strip text */
    --dh-cream: #fbfaf7;          /* site content background */
    --dh-canvas: #eee9dd;         /* outer page canvas */
    --dh-ink: #20242b;            /* primary text */
    --dh-text-secondary: #5c6570; /* body/support copy */
    --dh-text-muted: #9aa0a8;     /* subhead/label gray */
    --dh-text-on-dark: #b7c0cd;   /* quick-action subtext on dark band */
    --dh-rule: #e2dac2;           /* hairline dividers */

    /* Type */
    --dh-font-serif: 'Playfair Display', Georgia, serif;
    --dh-font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

    /* Structure */
    --dh-max-width: 1440px;
}

body.dh-themed {
    background: var(--dh-canvas);
    font-family: var(--dh-font-sans);
    color: var(--dh-ink);
    margin: 0;
}

.dh-themed a {
    color: var(--dh-gold);
}

.dh-themed a:hover {
    color: var(--dh-gold-hover);
}

.dh-shell {
    max-width: var(--dh-max-width);
    margin: 0 auto;
    background: var(--dh-cream);
}

/* --- 1. Utility strip --- */
/* Left group (dh-strip-links) and right group (dh-strip-account, login/profile) at opposite
   ends - a traditional upper-right corner placement for the account link/name, rather than
   dead center like the utility labels. Was a single centered flex row with the login partial
   folded into the nav row below instead - moved here per feedback (see _Layout.cshtml's
   comment on this bar). */
.dh-strip {
    background: var(--dh-porcelain-deep);
    padding: 7px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dh-strip-links {
    display: flex;
    flex-wrap: wrap;
}

.dh-strip-links span, .dh-strip-links a {
    font-family: var(--dh-font-sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--dh-gold-cream);
    text-decoration: none;
    padding-right: 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.dh-strip-links span:last-child, .dh-strip-links a:last-child {
    border-right: none;
    padding-right: 0;
}

.dh-strip-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dh-strip-account form {
    margin: 0;
    display: inline;
}

.dh-account-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
}

/* a.dh-account-link (not bare .dh-account-link) for the same specificity reason as
   a.dh-wordmark/a.dh-btn-outline below - ties with ".dh-themed a" so this color actually wins. */
a.dh-account-link {
    font-family: var(--dh-font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--dh-gold-cream);
    text-decoration: none;
    text-transform: uppercase;
}

a.dh-account-link:hover {
    color: #fff;
}

/* Placed after a.dh-account-link so it wins the tie on elements carrying both classes (LOG IN
   uses dh-account-link + dh-account-accent together) - see the specificity note above. */
a.dh-account-link.dh-account-accent {
    color: var(--dh-gold);
}

a.dh-account-link.dh-account-accent:hover {
    color: var(--dh-gold);
    opacity: 0.85;
}

/* --- 2. Header / brand block --- */
.dh-header {
    padding: 36px 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dh-logo-mark {
    display: block;
}

/* a.dh-wordmark (not just .dh-wordmark) so this ties in specificity with ".dh-themed a" above
   instead of losing to it - a bare class selector on an <a> is less specific than a class+type
   selector, which was overriding this to gold instead of ink (caught visually after deploy -
   see README). */
a.dh-wordmark {
    font-family: var(--dh-font-serif);
    font-weight: 600;
    font-size: 38px;
    color: var(--dh-ink);
    margin: 14px 0 6px;
    text-decoration: none;
}

a.dh-wordmark:hover {
    color: var(--dh-ink);
}

.dh-subhead-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dh-subhead-rule {
    width: 26px;
    height: 1px;
    background: var(--dh-gold);
    display: inline-block;
}

.dh-subhead-text {
    font-family: var(--dh-font-sans);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--dh-text-muted);
}

/* --- 3. Primary navigation --- */
.dh-nav {
    border-top: 1px solid var(--dh-rule);
    border-bottom: 1px solid var(--dh-rule);
    padding: 14px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 44px;
    flex-wrap: wrap;
}

.dh-nav a {
    font-family: var(--dh-font-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--dh-ink);
    text-decoration: none;
}

.dh-nav a:hover {
    color: var(--dh-gold);
}

/* --- Hero ---
   Real photo now in place (see Home/Index.cshtml's top comment) as an actual <img> rather than
   a background-image, so it can carry an alt attribute with the photographer credit. .dh-hero
   just establishes the box + clips the photo (overflow: hidden) and stacks its three absolutely-
   positioned/relative children: dh-hero-photo (z-index 0, object-fit: cover so it fills the box
   the same way background-size: cover used to) under dh-hero-overlay (z-index 1, the dark
   gradient scrim the heading text needs for contrast against a bright sky) under dh-hero-content
   (z-index 2, unchanged otherwise - still centered with flex on the parent). */
.dh-hero {
    position: relative;
    min-height: 420px;
    border-bottom: 4px solid var(--dh-gold);
    background-color: #dcd2b4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dh-hero-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.dh-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(15, 30, 20, 0.35), rgba(15, 30, 20, 0.5));
    z-index: 1;
}

/* Still used by the no-photo highlighted-article thumb (dh-article-thumb-placeholder is the
   actual visual there now, but this diagonal-hatch rule is kept defined/available rather than
   deleted in case another placeholder box needs it later). */
.dh-hero-placeholder {
    background: repeating-linear-gradient(45deg, #e6dfc9 0px, #e6dfc9 12px, #dcd2b4 12px, #dcd2b4 24px);
}

.dh-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

.dh-hero-content h2 {
    font-family: var(--dh-font-serif);
    font-weight: 600;
    font-size: 42px;
    color: #fff;
    margin: 0 0 18px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    line-height: 1.25;
}

/* a.dh-hero-course-badge (not bare .dh-hero-course-badge) for the same reason as
   a.dh-btn-outline above - ties specificity with ".dh-themed a" so this white/gold coloring
   actually wins instead of being overridden to plain gold link color. Positioned over the
   bottom-right corner of the hero photo, same z-index layer as dh-hero-content so it sits above
   the photo/overlay but doesn't collide with the centered heading. */
a.dh-hero-course-badge {
    position: absolute;
    right: 24px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(15, 30, 20, 0.55);
    border: 1px solid var(--dh-gold);
    border-radius: 3px;
    padding: 9px 16px;
    text-align: right;
    text-decoration: none;
    transition: background-color 180ms ease;
}

a.dh-hero-course-badge:hover {
    background: rgba(15, 30, 20, 0.75);
}

.dh-hero-course-badge-label {
    font-family: var(--dh-font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--dh-gold);
    text-transform: uppercase;
}

.dh-hero-course-badge-name {
    font-family: var(--dh-font-serif);
    font-weight: 600;
    font-size: 15px;
    color: #fff;
}

/* Lets a.dh-hero-course-badge anchor itself over the ContentItem article template's header
   image too (Views/ContentItem/Index.cshtml, "Featured Image Course Highlight" - see
   ContentEntities.cs's AssociatedCourse doc comment), the same way .dh-hero already does for
   the homepage hero photo.

   FIXED (2026): Jon caught the badge sliding off the bottom-right corner of the photo on the
   "A Trip to Bandon Dunes" article. Root cause was different from the earlier stale-cache bug
   (see _Layout.cshtml's comment) - this one's a real layout bug. .dh-article-hero-wrap is a
   plain block-level <div>, which always stretches to the full width of its column regardless
   of what's inside it. The <img> itself (.article-hero.img-responsive) is only ever as wide as
   its own source photo allows - Bootstrap's img-responsive caps it at 100% of the container but
   never stretches it up to fill. Whenever a header photo's natural width renders narrower than
   the column (true for this one - unlike the homepage hero's purpose-cropped 1800x900 banner),
   the wrap div ends up wider than the actual visible picture, so the badge - anchored to the
   div's corner via a.dh-hero-course-badge's position: absolute - lands past the photo's real
   edge instead of over it.

   display: inline-block makes the wrap shrink-to-fit its content instead of always filling the
   column: it hugs the img's actual rendered box exactly (still capped at the column's width via
   max-width: 100%, so oversized photos still can't overflow), so a.dh-hero-course-badge's
   corner anchor is guaranteed to land on the real photo edge no matter the source image's
   dimensions. vertical-align: top avoids the small stray gap inline-block elements otherwise
   pick up below themselves from line-height. */
.dh-article-hero-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

/* a.dh-btn-outline (not bare .dh-btn-outline) for the same reason as a.dh-wordmark above - ties
   specificity with ".dh-themed a" so this white color actually wins instead of being overridden
   to gold. */
a.dh-btn-outline {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    font-family: var(--dh-font-sans);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 12px 30px;
    text-decoration: none;
    transition: background-color 180ms ease;
}

a.dh-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* --- For you today: 2-card row ---
   Boxed, centered "spotlight" block (bordered 2-column row with a thin divider between the
   columns) rather than the original plain gold-top-border cards. Had a centered eyebrow/heading
   above it for one pass; Jon asked for that removed again, so .dh-foryou now carries its own
   top margin instead of relying on a header above it for that spacing. Colors/fonts are the
   site's own throughout - .dh-eyebrow (used inside each card below) is the same gold-eyebrow
   pattern used elsewhere on the site.

   NOTE: this element no longer carries the .dh-bleed class in Home/Index.cshtml. It used to
   (every full-width homepage section has it), but .dh-bleed sets margin-left/margin-right:
   -24px, and since it's declared later in this file than this rule, it was silently winning
   the cascade over this rule's own margin: 52px auto (equal specificity, later wins) - the
   classic same-specificity collision this file has hit before (see a.dh-wordmark/
   a.dh-btn-outline above). That's exactly why the row was rendering flush against the left edge
   instead of centered with space on both sides. Removing .dh-bleed from the markup sidesteps
   the collision entirely - this section isn't full-bleed anymore anyway, so it doesn't need
   the class. */
.dh-foryou {
    display: flex;
    flex-wrap: wrap;
    max-width: 85%;
    margin: 52px auto;
    border: 1px solid var(--dh-rule);
}

.dh-foryou-card {
    flex: 1 1 300px;
    background: var(--dh-cream);
    padding: 44px 40px;
    text-align: center;
    border-right: 1px solid var(--dh-rule);
    text-decoration: none;
    display: block;
    color: inherit;
}

.dh-foryou-card:last-child {
    border-right: none;
}

.dh-foryou-card:hover {
    color: inherit;
}

.dh-eyebrow {
    font-family: var(--dh-font-sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--dh-gold);
    text-transform: uppercase;
}

.dh-foryou-card h3 {
    font-family: var(--dh-font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--dh-ink);
    margin: 8px 0 4px;
}

.dh-foryou-card p {
    font-family: var(--dh-font-sans);
    font-size: 13px;
    color: var(--dh-text-secondary);
    margin: 0;
}

/* --- Highlighted articles (Category == 3, "Left Highlight") ---
   Was "Worth Reading" (.dh-worth-reading, Category == 1, with a .dh-section-title header above
   a 4-column .dh-article-grid) - renamed/reworked per Jon's request to drop the header entirely
   and cut the grid to 3 slots. .dh-article-card/-thumb/-tag/-card-title are unchanged/still
   shared with the article card markup itself; .dh-section-title is no longer used anywhere but
   left in place rather than deleted, in case a future section wants a centered italic header
   like this again. */
.dh-highlights {
    padding: 52px 60px 40px;
}

.dh-section-title {
    text-align: center;
    font-family: var(--dh-font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: var(--dh-ink);
    margin: 0 0 30px;
}

.dh-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.dh-article-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.dh-article-card:hover .dh-article-card-title {
    color: var(--dh-gold-hover);
}

.dh-article-thumb {
    height: 130px;
    margin-bottom: 12px;
    background-color: #dcd2b4;
    background-size: cover;
    background-position: center;
}

.dh-article-thumb.dh-hero-placeholder {
    background: repeating-linear-gradient(45deg, #e6dfc9 0px, #e6dfc9 10px, #dcd2b4 10px, #dcd2b4 20px);
}

/* Placeholder thumb for highlighted articles with no HighlightImage set (Home/Index.cshtml) -
   went through a couple of no-photo treatments (plain text, then oversized text) before landing
   here: same size as a real photo thumb (130px, via the shared .dh-article-thumb rule above),
   solid navy + a small gold golf-flag glyph instead. Keeps every card's heading the same size
   (Jon: "the same size in all three") since the card no longer has to compensate for a missing
   image with bigger text - the placeholder itself fills that space now. */
.dh-article-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dh-porcelain-deep);
}

.dh-article-thumb-placeholder svg {
    width: 42px;
    height: 42px;
}

.dh-article-tag {
    font-family: var(--dh-font-sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--dh-gold);
    text-transform: uppercase;
}

.dh-article-card-title {
    font-family: var(--dh-font-serif);
    font-weight: 600;
    font-size: 16px;
    color: var(--dh-ink);
    margin: 6px 0 0;
}

@media (max-width: 900px) {
    .dh-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .dh-highlights-grid {
        grid-template-columns: 1fr;
    }

    .dh-foryou {
        max-width: none;
        flex-direction: column;
        margin: 40px 24px;
    }

    .dh-foryou-card {
        border-right: none;
        border-bottom: 1px solid var(--dh-rule);
    }

    .dh-foryou-card:last-child {
        border-bottom: none;
    }

    .dh-highlights {
        padding: 40px 24px 32px;
    }

    a.dh-hero-course-badge {
        right: 12px;
        bottom: 12px;
        padding: 7px 12px;
    }

    .dh-hero-course-badge-name {
        font-size: 13px;
    }
}

/* --- Quick-action strip --- */
.dh-quickactions {
    background: var(--dh-porcelain-deep);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
    .dh-quickactions {
        grid-template-columns: 1fr;
    }
}

.dh-quickaction {
    padding: 32px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    display: block;
}

.dh-quickaction:last-child {
    border-right: none;
}

.dh-quickaction:hover {
    text-decoration: none;
}

/* Was a plain bordered box (circle/diamond/square via modifier classes) per the design
   handoff's original spec ("simple geometric glyphs, not illustrative icons") - replaced with
   real inline SVG artwork per Jon's request for actual icons here. Now just a sizing/spacing
   wrapper around whichever <svg> each link contains; the artwork supplies its own linework. */
.dh-quickaction-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
    display: block;
}

.dh-quickaction-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dh-quickaction h4 {
    font-family: var(--dh-font-serif);
    font-size: 17px;
    color: #fff;
    margin: 0 0 4px;
}

.dh-quickaction p {
    font-family: var(--dh-font-sans);
    font-size: 12px;
    color: var(--dh-text-on-dark);
    margin: 0;
}

/* --- Non-homepage page content --- */

/* _Layout.cshtml's old wrapper was Bootstrap's `.col-lg-10.col-lg-offset-1` +
   `.container.body-content`, which every existing view's `.row`/`.col-md-*` markup was built
   assuming (Bootstrap's grid gutters need a padded container ancestor or columns overflow
   slightly). That wrapper is gone - .dh-shell has no padding of its own, since the homepage's
   sections need to run edge-to-edge inside it. This padding replaces roughly the same gutter
   for every *other* view; homepage sections opt back out of it with .dh-bleed below rather
   than every other view needing new markup. */
.body-content {
    padding: 0 24px;
}

.dh-bleed {
    margin-left: -24px;
    margin-right: -24px;
}

/* --- Footer --- */
.dh-footer {
    padding: 24px 40px;
    text-align: center;
    font-family: var(--dh-font-sans);
    font-size: 11px;
    color: var(--dh-text-muted);
    background: var(--dh-cream);
    border-top: 1px solid var(--dh-rule);
}