/* ============================================================================
   Den-Fi.com — Custom overrides for the Valkyrie theme
   ----------------------------------------------------------------------------
   These are the visual tweaks that used to live in Ghost Admin →
   Code Injection, now folded into the theme itself.

   This file is loaded LAST (after style.css) in default.hbs, so each rule
   below wins the cascade at the SAME specificity as the theme's own rule.
   That is why NONE of these need !important anymore — the Code-Injection
   versions only needed it because they were fighting the theme's more
   specific selectors (e.g. an ID selector beats any number of classes).

   Safe to edit. Because it lives in assets/css/, the gulp build will
   rebuild it to assets/built/css/custom.css automatically if you ever
   run `npm run dev` / `gulp` — but rebuilding is NOT required.
   ============================================================================ */


/* 1. ACCENT COLOR -----------------------------------------------------------
   The only variable the Code Injection actually changed was the accent
   ("brown"): from the theme default #a98b69 to #d1ac36 — the gold already
   used in <meta name="theme-color">. The other 17 variables in the old
   injection were identical to the theme defaults, so they are intentionally
   left out here. A later :root wins over the earlier one; no !important. */
:root {
    --brown-color: #d1ac36;

    /* Ghost 6 custom fonts: let Admin → Design → Typography choices flow into the
       theme's own font variables, falling back to the theme defaults when nothing
       is chosen. This is what clears GScan's "Missing support for custom fonts"
       warning (it looks for --gh-font-heading / --gh-font-body being used).
       Headings use --pri-font-family; body copy uses --third-font-family. */
    --pri-font-family:   var(--gh-font-heading, Oswald), sans-serif;   /* headings   */
    --third-font-family: var(--gh-font-body, Raleway), sans-serif;     /* body copy  */
}


/* 2. HERO / FEATURED CAROUSEL HEIGHT ---------------------------------------
   Shrink the homepage hero from full-viewport (100vh) to half (50vh).
   NOTE: the theme sizes the slides with `#featured-news-carousel
   .carousel-item { height:100vh }` (an ID + class). The old injection used
   four chained classes, which has LOWER specificity than an ID, so it was
   forced to use !important. Reusing the theme's own selector shape lets us
   win on source order alone. */
.hero-unit {
    height: 50vh;
}

#featured-news-carousel {
    height: 50vh;
}

#featured-news-carousel .carousel-item {
    height: 50vh;
}


/* 3. GRADIENT OVERLAYS ------------------------------------------------------
   Lighten the dark overlay so the feature image shows through more.
   MODERNIZED: the old injection used a -webkit-only, legacy-syntax gradient
   (`-webkit-linear-gradient(top, …)`), which silently does nothing in
   Firefox and other non-WebKit browsers. Added the standard
   `linear-gradient(to bottom, …)` after a -webkit- fallback — the same
   pattern the theme already uses for its .light gradients. */
.gradient.gradient1 {
    background: -webkit-linear-gradient(top, rgba(15, 15, 15, .2) 0, rgba(15, 15, 15, .3) 75%, #0f0f0f 100%);
    background: linear-gradient(to bottom, rgba(15, 15, 15, .2) 0, rgba(15, 15, 15, .3) 75%, #0f0f0f 100%);
}

.gradient.gradient2 {
    background: rgba(15, 15, 15, .2);
}


/* 4. BOOKMARK CARDS (kg-bookmark) ------------------------------------------
   The theme colors bookmark TITLES white but never gives the card a
   background of its own, so Ghost's DEFAULT (white) bookmark card shows
   through — white text on a white card, invisible until you select it
   (your PC-builds page). Ghost injects that default card CSS via
   {{ghost_head}} (the `card_assets` setting), which loads AFTER this file at
   a specificity we can't predict — so this is the one place !important is
   justified: it guarantees the dark card wins no matter what Ghost injects.
   The site is dark-only (switcher removed), so these are unconditionally dark. */
.kg-bookmark-card .kg-bookmark-container {
    background-color: var(--dark-component-color) !important;   /* #000 card on the #171717 page */
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 5px !important;
}

.kg-bookmark-card .kg-bookmark-title {
    color: var(--dark-text-color) !important;                   /* #fff */
}

.kg-bookmark-card .kg-bookmark-description {
    color: var(--dark-subtitle-color) !important;
    line-height: 1.45;
}

.kg-bookmark-card .kg-bookmark-metadata,
.kg-bookmark-card .kg-bookmark-author,
.kg-bookmark-card .kg-bookmark-publisher {
    color: var(--dark-subtitle-color) !important;
}

/* Bookmark THUMBNAIL (the image on the right of a card). The image loads
   fine; the theme just sizes it with height:100%, which collapses to zero
   inside the flex row so it paints into a zero-height box. These rules pin the
   thumbnail to the full card height (align-self: stretch) and fill it with an
   absolutely-positioned image — the pattern Ghost itself uses. The opacity /
   visibility lines defeat the theme's catch-all lazy-loader, which tags every
   #main image `loading` and can leave it in that state. */
.kg-bookmark-card .kg-bookmark-container {
    align-items: stretch !important;
}

.kg-bookmark-card .kg-bookmark-thumbnail {
    position: relative !important;
    height: auto !important;      /* THE FIX: theme forces height:100% here, which collapses to 0
                                     in the flex row AND disables the stretch below (stretch only
                                     applies to auto-height items). Overriding to auto re-enables it. */
    min-height: 140px !important; /* safety floor so the image always has height even if stretch fails */
    align-self: stretch !important;
    flex: 1 1 33% !important;
    min-width: 33% !important;
    overflow: hidden !important;
}

.kg-bookmark-card .kg-bookmark-thumbnail img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;           /* full inset: fills the thumbnail regardless of height resolution */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 5px 5px 0 !important;
    opacity: 1 !important;        /* defeat the lazy-loader's stuck "loading" state */
    visibility: visible !important;
}


/* 5. ANCHOR-LINK SCROLL OFFSET ---------------------------------------------
   Invisible in-page anchor target, pulled up so a linked heading is not
   hidden behind the sticky navbar.
   (Modern alternative, if you ever want to drop the <a class="anchor">
   markup: put `scroll-margin-top: 170px` directly on your headings. This
   keeps your existing anchors working as-is.) */
a.anchor {
    display: block;
    position: relative;
    top: -170px;
    visibility: hidden;
}


/* 6. LAZY-LOADED IMAGES -----------------------------------------------------
   Positioning context for images while they are in the .loading state. */
img.loading {
    position: relative;
}