/**
 * ReStem Dark — Belgrade recoloured to match the ReStem 2 product site.
 *
 * Belgrade is Bootstrap 5, so most of the work is done by redefining its
 * --beo-* custom properties. The palette below is lifted verbatim from
 * modules/custom/restem2_site/assets/css/restem2.css so the store and the
 * marketing pages cannot drift apart.
 *
 * Everything after the variables is a targeted fix for a component that
 * hardcodes a light colour instead of reading a variable. Keep additions in
 * that spirit: prefer changing a variable, and only reach for a selector when
 * Bootstrap or Belgrade has baked the colour in.
 */

:root {
  /* ---- ReStem 2 palette (source of truth: restem2.css) ---- */
  --rs-bg0: #06080f;
  --rs-bg1: #0b0e18;
  --rs-bg2: #0f1320;
  --rs-card: #131826;
  --rs-card-hi: #171d2e;
  /* Input fields: deliberately LIGHTER than the cards so "where do I type"
     is obvious (owner feedback 2026-08-03: black-on-black fields). */
  --rs-field: #252d44;
  --rs-field-border: rgba(255, 255, 255, 0.28);
  --rs-line: rgba(255, 255, 255, 0.08);
  --rs-line-soft: rgba(255, 255, 255, 0.05);
  --rs-ink: #eef1f7;
  --rs-body: #a9b1c6;
  --rs-dim: #8f97ab;
  --rs-teal: #53d7cc;
  --rs-coral: #f0645c;
  --rs-coral-hi: #ff7b6e;

  /* ---- Bootstrap/Belgrade surface + text ---- */
  --beo-body-bg: var(--rs-bg1);
  --beo-body-bg-rgb: 11, 14, 24;
  --beo-body-color: var(--rs-body);
  --beo-body-color-rgb: 169, 177, 198;

  /* Primary drives the buy/checkout buttons. The product site's call to
     action is coral, so the store's is too. */
  --beo-primary: var(--rs-coral);
  --beo-primary-rgb: 240, 100, 92;
  --beo-primary-hover: var(--rs-coral-hi);

  --beo-secondary: #6b7488;
  --beo-secondary-rgb: 107, 116, 136;
  --beo-success: #63e6a0;
  --beo-success-rgb: 99, 230, 160;
  --beo-info: var(--rs-teal);
  --beo-info-rgb: 83, 215, 204;
  --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(--rs-card);
  --beo-light-rgb: 19, 24, 38;
  --beo-dark: var(--rs-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: #131826;
  --beo-gray-200: #171d2e;
  --beo-gray-300: #232a3d;
  --beo-gray-400: #4a5468;
  --beo-gray-500: #6b7488;
  --beo-gray-600: #8f97ab;
  --beo-gray-700: #a9b1c6;
  --beo-gray-800: #d5dae5;
  --beo-gray-900: #eef1f7;
  --beo-gray: #8f97ab;
  --beo-gray-dark: #d5dae5;

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

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

html,
body {
  background-color: var(--rs-bg1);
  color: var(--rs-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(--rs-ink);
}

a {
  color: var(--rs-teal);
}
a:hover,
a:focus {
  color: #7fe6dd;
}

hr,
.dropdown-divider {
  border-color: var(--rs-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(--rs-ink) !important;
}
.text-muted,
.text-secondary {
  color: var(--rs-dim) !important;
}
.bg-white,
.bg-body {
  background-color: var(--rs-card) !important;
}
/* Belgrade puts .opacify-links on the dark regions; keep those legible. */
.opacify-links a {
  color: var(--rs-body);
}
.opacify-links a:hover {
  color: var(--rs-ink);
}

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

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

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

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

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

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

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

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

.table {
  --beo-table-bg: transparent;
  --beo-table-color: var(--rs-body);
  --beo-table-border-color: var(--rs-line);
  --beo-table-striped-bg: rgba(255, 255, 255, 0.03);
  --beo-table-striped-color: var(--rs-body);
  --beo-table-hover-bg: rgba(255, 255, 255, 0.05);
  --beo-table-hover-color: var(--rs-ink);
  color: var(--rs-body);
  border-color: var(--rs-line);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--rs-line);
  color: inherit;
}
.table thead th {
  color: var(--rs-ink);
  border-bottom-color: var(--rs-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(--rs-line);
}
.nav-tabs .nav-link,
.tabs .nav-link,
.tabs--primary .nav-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--rs-body);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--rs-line);
  color: var(--rs-ink);
  isolation: auto;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.tabs .nav-link.is-active {
  background-color: var(--rs-card);
  border-color: var(--rs-line) var(--rs-line) var(--rs-card);
  color: var(--rs-ink);
}
.nav-pills .nav-link {
  color: var(--rs-body);
}
.nav-pills .nav-link.active {
  background-color: var(--rs-teal);
  color: var(--rs-bg0);
}

.breadcrumb {
  background-color: transparent;
}
.breadcrumb,
.breadcrumb a {
  color: var(--rs-dim);
}
.breadcrumb a:hover {
  color: var(--rs-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(--rs-field);
  border-color: var(--rs-field-border);
  color: var(--rs-ink);
}
.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
  background-color: var(--rs-field);
  border-color: var(--rs-teal);
  color: var(--rs-ink);
  box-shadow: 0 0 0 0.2rem rgba(83, 215, 204, 0.18);
}
.form-control::placeholder,
textarea::placeholder {
  color: var(--rs-dim);
}
.form-label,
label,
legend,
.fieldset-legend {
  color: var(--rs-ink);
}
.form-text,
.description,
.help-block,
small {
  color: var(--rs-dim);
}

/* Autofill in WebKit repaints the field white; force it back. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--rs-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--rs-field) inset;
  caret-color: var(--rs-ink);
}

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

.btn-primary {
  background-color: var(--rs-coral);
  border-color: var(--rs-coral);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--rs-coral-hi);
  border-color: var(--rs-coral-hi);
  color: #fff;
}

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

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

.btn-link {
  color: var(--rs-teal);
}

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

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

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

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

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

.price,
.commerce-product__price,
.field--name-price,
.order-total-line__value {
  color: var(--rs-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(--rs-line);
  color: var(--rs-ink);
}
.messages--status,
.alert-success {
  background-color: rgba(99, 230, 160, 0.12);
  border-color: rgba(99, 230, 160, 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(--rs-bg0);
  border-top: 1px solid var(--rs-line);
  color: var(--rs-dim);
}
.footer a,
.region-footer a,
.site-footer a {
  color: var(--rs-body);
}

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

.pagination .page-link {
  background-color: var(--rs-card);
  border-color: var(--rs-line);
  color: var(--rs-body);
}
.pagination .page-item.active .page-link {
  background-color: var(--rs-teal);
  border-color: var(--rs-teal);
  color: var(--rs-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. 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"],
.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(--rs-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(--rs-card);
  border-color: var(--rs-line);
  color: var(--rs-body);
  box-shadow: none;
}

.layout-region-checkout-secondary {
  background: var(--rs-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(--rs-card);
  border: 1px solid var(--rs-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(--rs-ink);
  border-color: var(--rs-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(--rs-field);
  border: 1px solid var(--rs-field-border);
  color: var(--rs-ink);
}

.checkout-pane input:focus,
.checkout-pane select:focus {
  border-color: var(--rs-teal);
  box-shadow: 0 0 0 3px rgba(83, 215, 204, 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(--rs-ink) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

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

.cc-continue-shopping {
  color: var(--rs-teal);
}

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

.checkout-progress--step__current,
.checkout-progress--step__completed {
  color: var(--rs-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(--rs-bg2) !important;
}

/* The ReStem 2 product images are screenshots of a dark UI; unframed on the
   dark page they disappear. Frame exactly those images wherever they appear
   (product page, cart row, checkout summary). */
img[src*="/2026-08/restem2"] {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  filter: brightness(1.15);
  background: var(--rs-card-hi);
  padding: 2px;
}

/* 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(--rs-coral);
  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(--rs-coral-hi);
  color: #fff;
}