/**
 * Drumagog Dark — Belgrade in the Drumagog 6 palette, so the store, the cart,
 * checkout and the account pages match the Drumagog 6 site (owner, 2026-09-30:
 * "Everything on the site should now have the dark theme." · "Including the
 * user portal"). Built from Drumagog 6 (the same Belgrade variables, the same
 * targeted fixes) with the palette of
 * modules/custom/drumagog6_site/assets/css/drumagog6.css, the plug-in's own
 * Tok:: colors. Activated per domain on drumagog.com and www.drumagog.com.
 *
 * Belgrade is Bootstrap 5, so most of the work is done by redefining its
 * --beo-* custom properties. Everything after the variables is a targeted fix
 * for a component that hardcodes a light color instead of reading a variable.
 */

:root {
  /* ---- Drumagog 6 palette (source of truth: drumagog6.css) ---- */
  --dg-bg0: #090c16;
  --dg-bg1: #0d111d;
  --dg-bg2: #141a2c;
  --dg-card: #1a2138;
  --dg-card-hi: #242c48;
  /* Input fields: deliberately LIGHTER than the cards so "where do I type"
     is obvious (owner feedback 2026-08-03: black-on-black fields). */
  --dg-field: #2e3860;
  --dg-field-border: rgba(255, 255, 255, 0.28);
  --dg-line: rgba(255, 255, 255, 0.08);
  --dg-line-soft: rgba(255, 255, 255, 0.05);
  --dg-ink: #ffffff;
  --dg-body: #d9dfef;
  --dg-dim: #98a1bd;
  --dg-blue: #5aa7ff;
  --dg-accent: #ff7847;
  --dg-accent-hi: #ff9a72;

  /* ---- Bootstrap/Belgrade surface + text ---- */
  --beo-body-bg: var(--dg-bg1);
  --beo-body-bg-rgb: 13, 17, 29;
  --beo-body-color: var(--dg-body);
  --beo-body-color-rgb: 217, 223, 239;

  /* Primary drives the buy/checkout buttons. The product site's call to
     action is coral, so the store's is too. */
  --beo-primary: var(--dg-accent);
  --beo-primary-rgb: 255, 120, 71;
  --beo-primary-hover: var(--dg-accent-hi);

  --beo-secondary: #6b7488;
  --beo-secondary-rgb: 107, 116, 136;
  --beo-success: #39d98a;
  --beo-success-rgb: 57, 217, 138;
  --beo-info: var(--dg-blue);
  --beo-info-rgb: 90, 167, 255;
  --beo-warning: #f5c04a;
  --beo-warning-rgb: 245, 192, 74;
  --beo-danger: #ff6b6b;
  --beo-danger-rgb: 255, 107, 107;

  /* Careful here: Bootstrap uses each of these as BOTH a background (.bg-light,
     .bg-dark) and a text colour (.text-light, .text-dark), and Belgrade puts
     .bg-dark on the top bar and the footer. Inverting --beo-dark to a light
     value therefore turns those regions white. Both stay dark, and the two
     text utilities are corrected by hand further down. */
  --beo-light: var(--dg-card);
  --beo-light-rgb: 19, 24, 38;
  --beo-dark: var(--dg-bg0);
  --beo-dark-rgb: 6, 8, 15;

  /* The grey ramp runs the other way in a dark theme: 100 is now the darkest
     surface and 900 the brightest text. */
  --beo-gray-100: #1a2138;
  --beo-gray-200: #242c48;
  --beo-gray-300: #262f4e;
  --beo-gray-400: #4a5468;
  --beo-gray-500: #6b7488;
  --beo-gray-600: #98a1bd;
  --beo-gray-700: #d9dfef;
  --beo-gray-800: #d5dae5;
  --beo-gray-900: #ffffff;
  --beo-gray: #98a1bd;
  --beo-gray-dark: #d5dae5;

  /* Belgrade's gradient overlay assumes a light surface; neutralise it. */
  --beo-gradient: none;
}

/* ---------------------------------------------------------------- surfaces */

html,
body {
  background-color: var(--dg-bg1);
  color: var(--dg-body);
}

.page-wrapper,
main,
.main-content,
.region-content {
  background-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--dg-ink);
}

a {
  color: var(--dg-blue);
}
a:hover,
a:focus {
  color: #8fc2ff;
}

hr,
.dropdown-divider {
  border-color: var(--dg-line);
  opacity: 1;
}

/* .bg-light / .bg-dark now both resolve to dark surfaces (see the note on
   --beo-dark above), so the matching text utilities have to be re-pointed or
   they render dark-on-dark. */
.text-dark,
.text-light,
.text-body,
.text-black,
.text-black-50 {
  color: var(--dg-ink) !important;
}
.text-muted,
.text-secondary {
  color: var(--dg-dim) !important;
}
.bg-white,
.bg-body {
  background-color: var(--dg-card) !important;
}
/* Belgrade puts .opacify-links on the dark regions; keep those legible. */
.opacify-links a {
  color: var(--dg-body);
}
.opacify-links a:hover {
  color: var(--dg-ink);
}

/* ------------------------------------------------------------------- header */

.navbar,
.header,
.region-header,
.region-navigation,
.region-top-bar,
.top-bar {
  background-color: var(--dg-bg0) !important;
  border-color: var(--dg-line);
  color: var(--dg-body);
}

.navbar a,
.header a,
.region-header a,
.region-navigation a,
.region-top-bar a {
  color: var(--dg-body);
}
.navbar a:hover,
.header a:hover,
.region-header a:hover,
.region-navigation a:hover,
.region-top-bar a:hover {
  color: var(--dg-ink);
}

.navbar-toggler {
  border-color: var(--dg-line);
  color: var(--dg-ink);
}

/* --------------------------------------------------------------------- cards */

.card,
.panel,
.node,
.views-row,
.product,
.commerce-order,
.checkout-pane,
.cart-block--contents {
  background-color: var(--dg-card);
  border-color: var(--dg-line);
  color: var(--dg-body);
}

.card-header,
.card-footer {
  background-color: var(--dg-card-hi);
  border-color: var(--dg-line);
}

/* ------------------------------------------------------------------- tables */

.table {
  --beo-table-bg: transparent;
  --beo-table-color: var(--dg-body);
  --beo-table-border-color: var(--dg-line);
  --beo-table-striped-bg: rgba(255, 255, 255, 0.03);
  --beo-table-striped-color: var(--dg-body);
  --beo-table-hover-bg: rgba(255, 255, 255, 0.05);
  --beo-table-hover-color: var(--dg-ink);
  color: var(--dg-body);
  border-color: var(--dg-line);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--dg-line);
  color: inherit;
}
.table thead th {
  color: var(--dg-ink);
  border-bottom-color: var(--dg-line);
}

/* ------------------------------------------------------- tabs / local tasks */

/* Bootstrap gives the active tab the page background so it merges with the
   panel below. That background is white by default, which on a dark page
   renders as a white block carrying near-white text. */
.nav-tabs {
  border-bottom-color: var(--dg-line);
}
.nav-tabs .nav-link,
.tabs .nav-link,
.tabs--primary .nav-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--dg-body);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--dg-line);
  color: var(--dg-ink);
  isolation: auto;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.tabs .nav-link.is-active {
  background-color: var(--dg-card);
  border-color: var(--dg-line) var(--dg-line) var(--dg-card);
  color: var(--dg-ink);
}
.nav-pills .nav-link {
  color: var(--dg-body);
}
.nav-pills .nav-link.active {
  background-color: var(--dg-blue);
  color: var(--dg-bg0);
}

.breadcrumb {
  background-color: transparent;
}
.breadcrumb,
.breadcrumb a {
  color: var(--dg-dim);
}
.breadcrumb a:hover {
  color: var(--dg-ink);
}

/* -------------------------------------------------------------------- forms */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
  background-color: var(--dg-field);
  border-color: var(--dg-field-border);
  color: var(--dg-ink);
}
.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
  background-color: var(--dg-field);
  border-color: var(--dg-blue);
  color: var(--dg-ink);
  box-shadow: 0 0 0 0.2rem rgba(90, 167, 255, 0.18);
}
.form-control::placeholder,
textarea::placeholder {
  color: var(--dg-dim);
}
.form-label,
label,
legend,
.fieldset-legend {
  color: var(--dg-ink);
}
.form-text,
.description,
.help-block,
small {
  color: var(--dg-dim);
}

/* Autofill repaints the field white on a dark form. Chrome does this in two
 * distinct states and the older rule only covered one of them:
 *   :-webkit-autofill / :autofill      - a value has been filled in
 *   :-internal-autofill-selected       - Chrome's own internal filled state
 *   :-internal-autofill-previewed      - the suggestion dropdown is open and
 *                                        Chrome is previewing the value
 * The preview state is what the owner reported (2026-09-04): typing an address
 * and seeing the field flash white while the suggestion list is showing.
 *
 * Two mechanisms are used together because neither is reliable alone:
 *   1. an inset box-shadow large enough to cover the field, which paints over
 *      the UA background, plus -webkit-text-fill-color for the glyphs; and
 *   2. an absurdly long background-color/color transition, so Chrome's own
 *      repaint never visibly completes. This is the part that survives the
 *      preview state, where the UA background is applied with internal
 *      precedence that a plain declaration cannot beat.
 * !important is required: Bootstrap's .form-control sets background-color on a
 * selector that would otherwise trade blows with these. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dg-ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--dg-field) inset !important;
  box-shadow: 0 0 0 1000px var(--dg-field) inset !important;
  background-color: var(--dg-field) !important;
  background-image: none !important;
  color: var(--dg-ink) !important;
  caret-color: var(--dg-ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Standard selector, for browsers that ship it unprefixed. */
input:autofill,
textarea:autofill,
select:autofill {
  -webkit-text-fill-color: var(--dg-ink) !important;
  box-shadow: 0 0 0 1000px var(--dg-field) inset !important;
  background-color: var(--dg-field) !important;
  color: var(--dg-ink) !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* ------------------------------------------------------------------ buttons */

.btn-primary {
  background-color: var(--dg-accent);
  border-color: var(--dg-accent);
  color: #14100c;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--dg-accent-hi);
  border-color: var(--dg-accent-hi);
  color: #14100c;
}

.btn-secondary,
.btn-light {
  background-color: var(--dg-card-hi);
  border-color: var(--dg-line);
  color: var(--dg-ink);
}
.btn-secondary:hover,
.btn-light:hover {
  background-color: #1f2742;
  border-color: var(--dg-line);
  color: var(--dg-ink);
}

.btn-outline-primary {
  border-color: var(--dg-blue);
  color: var(--dg-blue);
}
.btn-outline-primary:hover {
  background-color: var(--dg-blue);
  color: var(--dg-bg0);
}

.btn-link {
  color: var(--dg-blue);
}

/* ------------------------------------------------------- dropdowns / modals */

.dropdown-menu,
.modal-content,
.offcanvas,
.popover,
.tooltip-inner {
  background-color: var(--dg-card);
  border-color: var(--dg-line);
  color: var(--dg-body);
}
.dropdown-item {
  color: var(--dg-body);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--dg-ink);
}
.modal-header,
.modal-footer {
  border-color: var(--dg-line);
}

/* -------------------------------------------------------------- commerce UI */

.commerce-order-item-views-field,
.order-total-line,
.cart-block--summary,
.checkout-pane-order-summary,
.field--name-total-price {
  color: var(--dg-ink);
}

.commerce-checkout-progress__item,
.checkout-progress--step {
  color: var(--dg-dim);
}
.commerce-checkout-progress__item.is-active,
.checkout-progress--step__title.is-active,
.checkout-progress--step.is-active {
  color: var(--dg-blue);
}

.price,
.commerce-product__price,
.field--name-price,
.order-total-line__value {
  color: var(--dg-ink);
}

/* Product images are photographed on white; keep them on a light tile rather
   than letting them float on the dark page. */
.product__image img,
.commerce-product__image img,
.field--name-field-image img {
  background-color: #fff;
  border-radius: 8px;
}

/* -------------------------------------------------------------- messages UI */

.messages,
.alert {
  border-color: var(--dg-line);
  color: var(--dg-ink);
}
.messages--status,
.alert-success {
  background-color: rgba(57, 217, 138, 0.12);
  border-color: rgba(57, 217, 138, 0.35);
}
.messages--warning,
.alert-warning {
  background-color: rgba(245, 192, 74, 0.12);
  border-color: rgba(245, 192, 74, 0.35);
}
.messages--error,
.alert-danger {
  background-color: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.35);
}

/* ------------------------------------------------------------------- footer */

.footer,
.region-footer,
.site-footer {
  background-color: var(--dg-bg0);
  border-top: 1px solid var(--dg-line);
  color: var(--dg-dim);
}
.footer a,
.region-footer a,
.site-footer a {
  color: var(--dg-body);
}

/* ------------------------------------------------------------------ pagers */

.pagination .page-link {
  background-color: var(--dg-card);
  border-color: var(--dg-line);
  color: var(--dg-body);
}
.pagination .page-item.active .page-link {
  background-color: var(--dg-blue);
  border-color: var(--dg-blue);
  color: var(--dg-bg0);
}

/* ------------------------------------------------------------ dark-on-dark art */

/* The header lockup is not the theme logo -- it is an inline image inside a
   custom block's body, which is shared with the Drumagog theme and so cannot
   be swapped per theme. The old /drumagog* pages carry the Drumagog wordmark
   the same way ("New Drumagog logo_0.png", black ink), so it is flipped too. It is dark artwork on transparency, invisible here, so
   it gets flipped to white in CSS instead. Same treatment for the Affirm
   wordmark, which is dark navy. brightness(0) flattens any artwork to black
   first, so invert(1) always lands on pure white regardless of source colour. */
.region-header img[src*="wml"],
.region-navigation img[src*="wml"],
.region-top-bar img[src*="wml"],
.region-header img[src*="rumagog"],
.site-branding img,
img.affirm-logo,
.affirm-as-low-as .__affirm-logo {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------- third-party bits */

/* The Affirm financing widget renders dark-on-light copy inline. */
.affirm-as-low-as,
.affirm-ala-price,
.affirm-modal-trigger {
  color: var(--dg-body) !important;
}

/* ------------------------------------------------------------------------
   Storefront modernization on dark (commerce_custom/storefront paints light
   surfaces for the Belgrade store; re-surface them here). This library loads
   after the module CSS, so equal-or-higher specificity wins.
   ------------------------------------------------------------------------ */

.checkout-pane,
.layout-region-checkout-secondary,
.layout-region-checkout-secondary .checkout-pane {
  background: var(--dg-card);
  border-color: var(--dg-line);
  color: var(--dg-body);
  box-shadow: none;
}

.layout-region-checkout-secondary {
  background: var(--dg-bg2);
}

/* Keep the module's un-carding of nested wrapper panes. */
.checkout-pane.checkout-pane-login,
.checkout-pane .checkout-pane {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.checkout-pane-login .form-wrapper__login-option {
  background: var(--dg-card);
  border: 1px solid var(--dg-line);
  box-shadow: none;
}

/* Pane titles: the module inks them dark for the light store. */
.checkout-pane legend,
.checkout-pane .fieldset-legend,
.checkout-pane > .panel-title,
.checkout-pane h3 {
  color: var(--dg-ink);
  border-color: var(--dg-line);
}

/* Inputs inside the module-styled panes (its border wins over the generic
   input rules above, so restate the full dark treatment). */
.checkout-pane input[type="text"],
.checkout-pane input[type="email"],
.checkout-pane input[type="password"],
.checkout-pane input[type="tel"],
.checkout-pane select {
  background-color: var(--dg-field);
  border: 1px solid var(--dg-field-border);
  color: var(--dg-ink);
}

.checkout-pane input:focus,
.checkout-pane select:focus {
  border-color: var(--dg-blue);
  box-shadow: 0 0 0 3px rgba(90, 167, 255, 0.18);
  outline: none;
}

/* Cart page: the quiet Update-cart button and Continue-shopping link are
   inked for the light store (module uses !important, so match it). */
.cc-btn-quiet,
input.cc-btn-quiet {
  color: var(--dg-ink) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.cc-btn-quiet:hover,
input.cc-btn-quiet:hover {
  border-color: var(--dg-ink) !important;
}

.cc-continue-shopping {
  color: var(--dg-blue);
}

/* Checkout progress: keep the inactive steps readable, current step bright. */
.checkout-progress {
  color: var(--dg-dim);
}

.checkout-progress--step__current,
.checkout-progress--step__completed {
  color: var(--dg-ink);
}

/* Belgrade wraps the checkout sidebar (and other panels) in Bootstrap's
   .bg-light utility, which is compiled with a LITERAL #f8f9fa !important —
   the --beo-light variables never reach it. On the dark palette a "light"
   panel is a subtly raised dark surface. */
.bg-light {
  background-color: var(--dg-bg2) !important;
}

/* Bare Drupal submit buttons (no Bootstrap btn-* class — e.g. the trial
   signup form) inherit a near-black label on a transparent background and
   disappear on the dark page. Give them the primary treatment. The :not()
   guard leaves every Bootstrap-classed and storefront (cc-btn-*) button
   alone. */
input.button.form-submit:not([class*="btn"]),
button.button.js-form-submit:not([class*="btn"]) {
  background: var(--dg-accent);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.6rem;
}

input.button.form-submit:not([class*="btn"]):hover,
button.button.js-form-submit:not([class*="btn"]):hover {
  background: var(--dg-accent-hi);
  color: #fff;
}

/* ------------------------------------------------ storefront (commerce_custom)
   commerce_custom/css/storefront.css styles the cart and checkout with its own
   variables: a violet brand (#41449f) and DARK ink for the quiet buttons and
   the table rules. On this dark page dark ink disappears, so the variables are
   repointed at the Drumagog 6 palette, and every call-to-action button (Add to
   cart, Checkout, the checkout steps' Continue) is the accent with dark label
   text, as on the Drumagog 6 site (Tok::accentFg). */
:root {
  --cc-brand: var(--dg-accent);
  --cc-brand-dark: #e8622f;
  --cc-ink: var(--dg-ink);
  --cc-line: var(--dg-line);
}
.button--add-to-cart,
input.cc-btn-checkout,
[id^="edit-actions"] input[type="submit"].button--primary {
  background-color: var(--dg-accent) !important;
  border-color: var(--dg-accent) !important;
  color: #14100c !important;
}
.button--add-to-cart:hover,
.button--add-to-cart:focus,
input.cc-btn-checkout:hover,
[id^="edit-actions"] input[type="submit"].button--primary:hover {
  background-color: var(--dg-accent-hi) !important;
  border-color: var(--dg-accent-hi) !important;
  color: #14100c !important;
}
input.cc-btn-quiet {
  color: var(--dg-ink) !important;
  border-color: var(--dg-field-border) !important;
}
.cc-continue-shopping {
  color: var(--dg-accent);
}

/* Affirm's "as low as" line draws its logo as a near-black font glyph. */
.affirm-as-low-as,
.__affirm-logo {
  color: var(--dg-ink) !important;
}

/* Older content pages carry their own link styling in the body (the former
   home page's "14-day trial" link is black). */
a.one {
  color: var(--dg-accent) !important;
}

/* The checkout panes' own submit buttons (Log in, Create account and
   continue) carry a more specific white label; dark on the accent, like every
   other call to action here. */
.checkout-pane .btn-primary,
.checkout-pane input[type="submit"].button,
.checkout-pane button.btn-primary {
  color: #14100c !important;
}