/* ============================================================
   Rangune dark backstop — LAST sheet in base.html.

   The Cornerstone config in config.json is already fully
   inverted (see the color-grey* ramp: greyDarkest is now the
   LIGHTEST value), so most stock chrome compiles dark on its
   own. This sheet exists for the places that can't be reached
   from theme settings: Citadel rules that hardcode a light fill,
   browser-native form and scrollbar chrome, and the handful of
   Cornerstone components whose "background" setting maps to a
   variable the Theme Editor never exposes.

   Ordering note: mfo-blocks.css loads after the compiled
   theme.css, so token-level overrides alone can't beat a
   blocks rule — this sheet loads after BOTH.
   ============================================================ */

:root {
    --rg-bg:      #0a0a0a;  /* neutral.950 — page ground            */
    --rg-surface: #171717;  /* neutral.900 — cards, panels, drawers */
    --rg-raised:  #262626;  /* neutral.800 — hover, table headers   */
    --rg-line:    #404040;  /* neutral.700 — borders                */
    --rg-hair:    #262626;  /* neutral.800 — hairlines              */
    --rg-ink:     #fafafa;  /* neutral.50  — headings               */
    --rg-text:    #e5e5e5;  /* neutral.200 — body                   */
    --rg-muted:   #a3a3a3;  /* neutral.400 — secondary              */
    --rg-dim:     #737373;  /* neutral.500 — placeholder, disabled  */
    --rg-lime:    #a3e635;  /* lime.400    — primary                */
    --rg-lime-hi: #bef264;  /* lime.300    — hover                  */
}

/* Tell the UA to render native widgets (scrollbars, date pickers,
   autofill, spinners) in their dark scheme. Without this the
   browser paints a white scrollbar track against a black page. */
:root { color-scheme: dark; }

html, body { background-color: var(--rg-bg); color: var(--rg-text); }

/* ── Structural surfaces ───────────────────────────────────── */
.body,
.page,
.main,
.container,
.page-content { background-color: transparent; }

/* Cornerstone's "alternate" panels and any block that inherits the
   generic light container fill. */
.panel,
.card--alternate,
.quickView,
.modal,
.modal-body,
.dropdown-menu,
.previewCart,
.previewCartWrapper,
.navPages-container,
.navPage-subMenu,
.sideNav,
.accountList-item,
.tabs-contents,
.tab-content {
    background-color: var(--rg-surface);
    color: var(--rg-text);
    border-color: var(--rg-line);
}

.modal-background,
.loadingOverlay { background-color: rgba(0, 0, 0, .78); }

/* ── Type ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.page-heading,
.panel-title,
.modal-header-title { color: var(--rg-ink); }

small, .small, .definitionList-key, .productView-info-name { color: var(--rg-muted); }

a { color: var(--rg-lime); }
a:hover, a:focus { color: var(--rg-lime-hi); }

/* ── Rules and separators ──────────────────────────────────── */
hr,
.panel-header,
.tabs,
.navBar,
.productView,
.page-heading + *,
.accordion-block,
.accordion-navigation,
.definitionList,
.table td,
.table th,
.form-field + .form-field {
    border-color: var(--rg-hair);
}

/* ── Tables ────────────────────────────────────────────────── */
.table { color: var(--rg-text); }
.table thead th,
.table--line thead th { background-color: var(--rg-raised); color: var(--rg-ink); }
.table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, .02); }

/* ── Forms ─────────────────────────────────────────────────── */
input, select, textarea,
.form-input, .form-select {
    background-color: var(--rg-surface);
    color: var(--rg-text);
    border-color: var(--rg-line);
}
input::placeholder, textarea::placeholder, .form-input::placeholder { color: var(--rg-dim); }
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus {
    border-color: var(--rg-lime);
    box-shadow: none;
}
.form-label, .form-legend { color: var(--rg-muted); }
/* Chrome paints autofilled fields a fixed pale yellow; the only way off
   it is to repaint the fill with a very long inset shadow. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--rg-text);
    -webkit-box-shadow: 0 0 0 1000px var(--rg-surface) inset;
}

/* ── Faceted search / PLP sidebar ──────────────────────────── */
.facetedSearch-navList,
.facetedSearch-toggle,
.sidebarBlock,
.accordion--navList { color: var(--rg-text); }
.facetedSearch-refineFilters,
.sidebarBlock-heading,
.accordion-title { color: var(--rg-ink); }
.facetedSearch-clearLink { color: var(--rg-lime); }

/* ── Breadcrumbs / pagination / toolbar ────────────────────── */
.breadcrumb,
.breadcrumb a,
.pagination-link,
.actionBar-section label { color: var(--rg-muted); }
.breadcrumb.is-active a,
.pagination-item.is-active .pagination-link { color: var(--rg-lime); }
.pagination-link:hover { color: var(--rg-lime-hi); }

/* ── Alerts ────────────────────────────────────────────────── */
.alertBox { background-color: var(--rg-surface); color: var(--rg-text); border-color: var(--rg-line); }
.alertBox--success { border-color: var(--rg-lime); }
.alertBox--error   { border-color: #f87171; }
.alertBox--warning { border-color: #facc15; }

/* ── Product ───────────────────────────────────────────────── */
.productView-price,
.price--withoutTax,
.price--main { color: var(--rg-ink); }
.price--discounted, .price--rrp { color: var(--rg-dim); }
.productView-rating .icon svg { fill: var(--rg-lime); }
.form-option-variant--color,
.form-option-variant--pattern { border-color: var(--rg-line); }
.form-option-variant { color: var(--rg-text); border-color: var(--rg-line); }
.form-radio:checked + .form-label .form-option-variant,
.form-option:hover .form-option-variant { border-color: var(--rg-lime); }

/* This store's photography is all low-key range imagery, so image plates
   stay dark — a light plate would frame every shot in a bright rectangle. */
.card-figure,
.productView-image,
.productView-thumbnail-link {
    background-color: var(--rg-surface);
    border-radius: 0;
}

.card-body { background-color: transparent; }
.card-title a { color: var(--rg-ink); }
.card-title a:hover { color: var(--rg-lime); }

/* ── Footer / newsletter ───────────────────────────────────── */
.footer { background-color: var(--rg-bg); border-top: 1px solid var(--rg-hair); }
.footer-info-heading { color: var(--rg-ink); }
.footer-info-list a { color: var(--rg-muted); }
.footer-info-list a:hover { color: var(--rg-lime); }

/* ── Buttons that Citadel fills from a hardcoded light value ─ */
.button--icon,
.button--secondary {
    background-color: transparent;
    color: var(--rg-text);
    border-color: var(--rg-line);
}
.button--icon:hover,
.button--secondary:hover {
    border-color: var(--rg-lime);
    color: var(--rg-lime);
}
.button[disabled], .button.is-disabled {
    background-color: var(--rg-raised);
    border-color: var(--rg-raised);
    color: var(--rg-dim);
}

/* ── Misc chrome ───────────────────────────────────────────── */
.tags .tag a { background-color: var(--rg-raised); color: var(--rg-text); }
.tags .tag a:hover { background-color: var(--rg-lime); color: var(--rg-bg); }
::selection { background: var(--rg-lime); color: var(--rg-bg); }


/* ============================================================
   Token role fixes

   mfo-blocks.css was authored against a LIGHT page, where two of
   its tokens carry a second, implicit job:

     --mfo-ink       heading color  AND  the dark panel/scrim fill
     --mfo-on-brand  ink on a brand fill  AND  ink over dark media

   Inverting the palette splits each pair apart: ink is now light,
   so every rule that used it as a *background* turns into a white
   panel, and on-brand is now dark, so every caption over a photo
   turns invisible.

   The fix is scoping, not overriding rule by rule: inside a block
   that is meant to be dark regardless of page mode, redefine the
   token locally and the whole subtree — headings, links, inputs,
   placeholders — keeps working off the design's own contract.
   ============================================================ */

/* Footer is dark chrome on any page mode: swap the pair back so
   `background: var(--mfo-ink)` and `color: var(--mfo-bg)` read the
   way the block author intended. */
.mfo-footer {
    --mfo-ink: #0a0a0a;
    --mfo-bg:  #e5e5e5;
}
[data-mfo-footer="slim-dark"] .mfo-footer { --mfo-ink: #050505; }

/* Panels whose fill is --mfo-ink with an image laid over it. */
.mfo-promo,
.mfo-vision-promo {
    --mfo-ink: #171717;
    --mfo-on-brand: #fafafa;
}

/* Copy sitting over photography or over dark chrome. */
.mfo-hero-copy,
.mfo-utility,
.mfo-bloghero,
.mfo-carehero,
.mfo-cathead:has(.mfo-cathead-media),
.mfo-blogpost-heading--overlay,
.mfo-vision-tile,
.mfo-vision-promo--banner {
    --mfo-on-brand: #fafafa;
}

/* Hero carousel dots read as light pips over the photo. */
.mfo-hero-dots i { background: #fafafa; }

/* Scrims: these mix toward --mfo-ink for "darker", which now resolves
   light. Pin them to true black instead. */
.mfo-yt-play { background: rgba(0, 0, 0, .78); }
.mfo-vision-tile figcaption {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
}
.mfo-vision-promo::after {
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .86));
}

/* Hazard stripes alternate accent with ink; the dark half has to stay dark. */
.mfo-carehero-stripe {
    background: repeating-linear-gradient(45deg, var(--mfo-accent) 0 10px, #0a0a0a 10px 20px);
}
.mfo-vision::after {
    background: repeating-linear-gradient(135deg, var(--mfo-accent) 0 9px, #0a0a0a 9px 18px);
}

/* "On dark" button: a light chip on a dark hero, not a black-on-black one. */
.mfo-btn--ondark { background: #fafafa; color: #0a0a0a; }
.mfo-btn--ondark:hover { background: var(--mfo-brand); color: #0a0a0a; }

/* The stock hero scrim (48% black on the left, fading to 12%) was tuned for
   a dark forest plate. This store's hero is an outdoor range with open sky,
   so the copy needs a deeper, longer ramp to stay readable. */
.mfo-hero-media::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .25) 100%);
}

/* The utility bar is painted with --mfo-accent, which worked when the accent
   was orange and the announcement bar above it was the same orange. With a
   lime accent it stacks two bright green bands over a black header. Give the
   utility row a dark surface and leave the announcement bar as the only lime
   band up top. */
body[data-mfo-header-tone="dark"] .mfo-utility,
.mfo-utility {
    background: var(--rg-surface);
    color: var(--rg-text);
    border-bottom: 1px solid var(--rg-hair);
}
.mfo-utility a { color: var(--rg-text); }
.mfo-utility a:hover { color: var(--rg-lime); }

/* Header logo. The template now emits the store logo as a bare .mfo-logo-img
   (mfo-blocks.css already caps that at 50px), so nothing more is needed there.
   These rules only catch the stock Cornerstone logo markup on the pages that
   still render it, whose container reserves the full 250x100 logo_size box. */
.header-logo-image-container { min-height: 0; }
.header-logo-image-container::after { display: none; }
.mfo-header .header-logo-image,
.mfo-header .header-logo-image-unknown-size {
    height: 46px;
    max-height: 46px;
    width: auto;
    margin: 0;
    object-fit: contain;
}