/* BCD Dark Mode — baseline dark theme
 *
 * Strategy: flip section/row/module backgrounds to #2D2D2D unless they have a
 * real background-image (heroes, image banners). The JS tagger in frontend.js
 * adds `.bcd-dm-has-bg-image` to every container with a non-`none` computed
 * background-image, and we skip those via `:not(.bcd-dm-has-bg-image)`.
 *
 * Palette (per user spec):
 *   - Page / section / footer bg: #2D2D2D
 *   - Body text:                  #ffffff
 *   - Borders:                    rgba(255,255,255,0.12)
 *   - Brand accent (links):       unchanged
 *
 * Per-class admin mappings emit later via inline <style id="bcd-dm-overrides">
 * and win on source order if they need to.
 */

html[data-bcd-theme="dark"],
html[data-bcd-theme="dark"] body {
  background-color: #2D2D2D !important;
  color: #ffffff !important;
}

/* ---- Section / row / column / module backgrounds → #2D2D2D,
   except containers with a real background image OR any descendant of one
   (tagged by frontend.js — see tagBgImageContainers). ---- */
html[data-bcd-theme="dark"] .et_pb_section:not(.bcd-dm-has-bg-image),
html[data-bcd-theme="dark"] .et_pb_row:not(.bcd-dm-has-bg-image),
html[data-bcd-theme="dark"] .et_pb_column:not(.bcd-dm-has-bg-image),
html[data-bcd-theme="dark"] .et_pb_module:not(.bcd-dm-has-bg-image):not(.et_pb_button):not(.et_pb_image),
html[data-bcd-theme="dark"] .et_pb_text_inner:not(.bcd-dm-has-bg-image),
html[data-bcd-theme="dark"] .et_pb_blurb_container:not(.bcd-dm-has-bg-image),
html[data-bcd-theme="dark"] .et_pb_widget_area:not(.bcd-dm-has-bg-image) {
  background-color: #2D2D2D !important;
}

/* ---- Typography → white ---- */
html[data-bcd-theme="dark"] h1,
html[data-bcd-theme="dark"] h2,
html[data-bcd-theme="dark"] h3,
html[data-bcd-theme="dark"] h4,
html[data-bcd-theme="dark"] h5,
html[data-bcd-theme="dark"] h6,
html[data-bcd-theme="dark"] p,
html[data-bcd-theme="dark"] li,
html[data-bcd-theme="dark"] dt,
html[data-bcd-theme="dark"] dd,
html[data-bcd-theme="dark"] blockquote,
html[data-bcd-theme="dark"] label,
html[data-bcd-theme="dark"] strong,
html[data-bcd-theme="dark"] em,
html[data-bcd-theme="dark"] caption,
html[data-bcd-theme="dark"] figcaption,
html[data-bcd-theme="dark"] th,
html[data-bcd-theme="dark"] td,
html[data-bcd-theme="dark"] .et_pb_text,
html[data-bcd-theme="dark"] .et_pb_blurb_description,
html[data-bcd-theme="dark"] .et_pb_post_title,
html[data-bcd-theme="dark"] .et_pb_title_container,
html[data-bcd-theme="dark"] .et_pb_module_header {
  color: #ffffff !important;
}

/* ---- Links → BCD lime, except inside buttons. ---- */
html[data-bcd-theme="dark"] a {
  color: #8FB832;
}
html[data-bcd-theme="dark"] a:hover { color: #a8d152; }

/* ---- Buttons keep their original bg + force white text.
   MUST be after the `a` rule so it wins on source order.
   Covers: Divi buttons, WooCommerce add-to-cart, custom BCD card buttons,
   <button> elements, submit/button inputs. ---- */
html[data-bcd-theme="dark"] a.button,
html[data-bcd-theme="dark"] a.et_pb_button,
html[data-bcd-theme="dark"] .et_pb_button,
html[data-bcd-theme="dark"] .et_pb_button_module_wrapper a,
html[data-bcd-theme="dark"] .bcd-card__btn,
html[data-bcd-theme="dark"] .bcd-nav__cta,
html[data-bcd-theme="dark"] a.bcd-nav__cta,
html[data-bcd-theme="dark"] .bcd-nav__col-image-cta,
html[data-bcd-theme="dark"] a.bcd-nav__col-image-cta,
html[data-bcd-theme="dark"] .button,
html[data-bcd-theme="dark"] button,
html[data-bcd-theme="dark"] .single_add_to_cart_button,
html[data-bcd-theme="dark"] .add_to_cart_button,
html[data-bcd-theme="dark"] input[type="submit"],
html[data-bcd-theme="dark"] input[type="button"] {
  color: #ffffff !important;
}

/* ---- Footer → whole wrapper #2D2D2D + white text.
   Divi Theme Builder wraps the footer like:
     <footer class="et-l et-l--footer">
       <div class="et_builder_inner_content">
         <div class="et_pb_section ...">
           <div class="et_pb_row ...">...</div>
   Targeting only `footer` flips the outer shell but the inner `.et_builder_inner_content`,
   sections, rows and columns keep their own (light) backgrounds — that's why only the row
   went dark. Cover every level. ---- */
html[data-bcd-theme="dark"] footer,
html[data-bcd-theme="dark"] .et-l--footer,
html[data-bcd-theme="dark"] #main-footer,
html[data-bcd-theme="dark"] #footer-bottom,
html[data-bcd-theme="dark"] .footer-widget,
html[data-bcd-theme="dark"] footer .et_builder_inner_content,
html[data-bcd-theme="dark"] .et-l--footer .et_builder_inner_content {
  background-color: #2D2D2D !important;
  border-color: #2D2D2D !important;
  color: #ffffff !important;
}

/* High-specificity footer overrides — Divi's per-section CSS rule
   `.et-l--footer > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_footer`
   has specificity 0-4-0 with !important. Match its specificity (and add one
   element to take us to 0-4-1) so our dark colour wins. */
html[data-bcd-theme="dark"] footer .et_builder_inner_content .et_pb_section,
html[data-bcd-theme="dark"] footer .et_builder_inner_content .et_pb_row,
html[data-bcd-theme="dark"] footer .et_builder_inner_content .et_pb_column,
html[data-bcd-theme="dark"] footer .et_builder_inner_content .et_pb_module,
html[data-bcd-theme="dark"] .et-l--footer .et_builder_inner_content .et_pb_section,
html[data-bcd-theme="dark"] .et-l--footer .et_builder_inner_content .et_pb_row,
html[data-bcd-theme="dark"] .et-l--footer .et_builder_inner_content .et_pb_column,
html[data-bcd-theme="dark"] .et-l--footer .et_builder_inner_content .et_pb_module {
  background-color: #2D2D2D !important;
  border-color: #2D2D2D !important;
  color: #ffffff !important;
}
html[data-bcd-theme="dark"] footer *,
html[data-bcd-theme="dark"] .et-l--footer *,
html[data-bcd-theme="dark"] #main-footer *,
html[data-bcd-theme="dark"] #footer-bottom * {
  color: #ffffff !important;
  border-color: #2D2D2D !important;
}
html[data-bcd-theme="dark"] footer a,
html[data-bcd-theme="dark"] .et-l--footer a,
html[data-bcd-theme="dark"] #main-footer a,
html[data-bcd-theme="dark"] #footer-bottom a {
  color: #8FB832 !important;
}

/* ---- Form fields → dark surface, light text ---- */
html[data-bcd-theme="dark"] input[type="text"],
html[data-bcd-theme="dark"] input[type="search"],
html[data-bcd-theme="dark"] input[type="email"],
html[data-bcd-theme="dark"] input[type="tel"],
html[data-bcd-theme="dark"] input[type="number"],
html[data-bcd-theme="dark"] input[type="password"],
html[data-bcd-theme="dark"] textarea,
html[data-bcd-theme="dark"] select {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
html[data-bcd-theme="dark"] ::placeholder { color: rgba(255,255,255,0.5); }

/* ---- Borders → subtle white ---- */
html[data-bcd-theme="dark"] hr,
html[data-bcd-theme="dark"] table,
html[data-bcd-theme="dark"] th,
html[data-bcd-theme="dark"] td {
  border-color: rgba(255,255,255,0.12) !important;
}

/* ---- Border colour on bg-image containers → match page bg so the white
   default Divi border doesn't pinstripe between hero panels. ---- */
html[data-bcd-theme="dark"] .et_pb_section.bcd-dm-has-bg-image,
html[data-bcd-theme="dark"] .et_pb_row.bcd-dm-has-bg-image,
html[data-bcd-theme="dark"] .et_pb_column.bcd-dm-has-bg-image,
html[data-bcd-theme="dark"] .et_pb_module.bcd-dm-has-bg-image {
  border-color: #2D2D2D !important;
}

/* ---- WooCommerce text bits that would otherwise stay dark on white ---- */
html[data-bcd-theme="dark"] .woocommerce ul.products li.product .price,
html[data-bcd-theme="dark"] .woocommerce .product_meta,
html[data-bcd-theme="dark"] .woocommerce-tabs,
html[data-bcd-theme="dark"] .woocommerce-Tabs-panel,
html[data-bcd-theme="dark"] .woocommerce-loop-product__title,
html[data-bcd-theme="dark"] .woocommerce-Price-amount {
  color: #ffffff !important;
}

/* ---- WooCommerce CART PAGE → page bg dark, text white, links lime,
   proceed-to-checkout button brand-green with white text. ---- */
html[data-bcd-theme="dark"].woocommerce-cart body,
html[data-bcd-theme="dark"] body.woocommerce-cart,
html[data-bcd-theme="dark"] .woocommerce-cart .woocommerce,
html[data-bcd-theme="dark"] .woocommerce-cart .cart_totals,
html[data-bcd-theme="dark"] .woocommerce-cart .cart-collaterals,
html[data-bcd-theme="dark"] .woocommerce-cart .shop_table,
html[data-bcd-theme="dark"] .woocommerce-cart .shop_table thead,
html[data-bcd-theme="dark"] .woocommerce-cart .shop_table tbody,
html[data-bcd-theme="dark"] .woocommerce-cart .shop_table tfoot,
html[data-bcd-theme="dark"] .woocommerce-cart .shop_table tr,
html[data-bcd-theme="dark"] .woocommerce-cart .shop_table th,
html[data-bcd-theme="dark"] .woocommerce-cart .shop_table td,
html[data-bcd-theme="dark"] .woocommerce-cart .wc-proceed-to-checkout,
html[data-bcd-theme="dark"] .woocommerce-cart .cart_item,
html[data-bcd-theme="dark"] .woocommerce-cart .coupon,
html[data-bcd-theme="dark"] .woocommerce-cart .actions {
  background-color: #2D2D2D !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html[data-bcd-theme="dark"] .woocommerce-cart * {
  color: #ffffff !important;
}
html[data-bcd-theme="dark"] .woocommerce-cart a:not(.bcd-nav__cta):not(.bcd-card__btn):not(.bcd-nav__col-image-cta):not(.checkout-button):not(.button):not(.et_pb_button):not(.add_to_cart_button),
html[data-bcd-theme="dark"] .woocommerce a:not(.bcd-nav__cta):not(.bcd-card__btn):not(.bcd-nav__col-image-cta):not(.checkout-button):not(.button):not(.et_pb_button):not(.add_to_cart_button) {
  color: #8FB832 !important;
}
/* Proceed-to-Checkout — force brand green bg + white text, beating any
   inline / theme override. Multiple selectors so we cover the link form
   and the wrapping wc-proceed-to-checkout list. */
html[data-bcd-theme="dark"] .wc-proceed-to-checkout a.checkout-button,
html[data-bcd-theme="dark"] .wc-proceed-to-checkout .checkout-button,
html[data-bcd-theme="dark"] a.checkout-button,
html[data-bcd-theme="dark"] .checkout-button {
  background-color: #8FB832 !important;
  color: #ffffff !important;
  border-color: #8FB832 !important;
}
html[data-bcd-theme="dark"] .wc-proceed-to-checkout a.checkout-button:hover,
html[data-bcd-theme="dark"] a.checkout-button:hover,
html[data-bcd-theme="dark"] .checkout-button:hover {
  background-color: #7da524 !important;
  color: #ffffff !important;
}

/* ---- .highlight-light / .highlight-text → yellow/light bg with dark text.
   Force dark text so parent's white inheritance doesn't make it invisible
   on the bg. ---- */
html[data-bcd-theme="dark"] .highlight-light,
html[data-bcd-theme="dark"] .highlight-light *,
html[data-bcd-theme="dark"] .highlight-text,
html[data-bcd-theme="dark"] .highlight-text * {
  color: #1a1a1a !important;
}

/* ---- .highlight-shadow / .highlight-dark → leave 100% alone.
   Divi already sets a semi-transparent dark bg + white text on these via its
   own `!important` rule. Any override here either strips the bg (text becomes
   invisible on light areas of the hero image) or fights with Divi's rule.
   We deliberately apply NO overrides so the Divi module's intended styling
   passes through in both themes. ---- */

/* ---- Breadcrumb → text white, links lime.
   Covers the whole nav: separators, plain spans, the .__current span, and
   anything else inside, then re-asserts the green link colour AFTER so it
   wins on source order. ---- */
html[data-bcd-theme="dark"] .bcd-breadcrumb,
html[data-bcd-theme="dark"] .bcd-breadcrumb span,
html[data-bcd-theme="dark"] .bcd-breadcrumb__sep,
html[data-bcd-theme="dark"] .bcd-breadcrumb__current {
  color: #ffffff !important;
}
html[data-bcd-theme="dark"] .bcd-breadcrumb a,
html[data-bcd-theme="dark"] .bcd-breadcrumb__link {
  color: #8FB832 !important;
}

/* ---- .bcd-card__type → product card type label.
   In light mode this is a dark text pill; in dark mode it inherits the body
   white bg through a theme rule and goes invisible. Force #2D2D2D bg, white
   text, white border so it reads as an outlined chip on the card. ---- */
html[data-bcd-theme="dark"] .bcd-card__type {
  background-color: #2D2D2D !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* ---- .bcd-ptabs → product tabs (Gallery / Calculator / Trims).
   Panel content stays light (gallery image, calc, trim list).
   The tab BAR flips dark to mirror the nav:
     - Bar bg:        #2D2D2D
     - Tab inactive:  transparent bg, white text
     - Tab active:    white bg, dark text  ---- */
html[data-bcd-theme="dark"] .bcd-ptabs {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #e5e5e5 !important;
}
html[data-bcd-theme="dark"] .bcd-ptabs__inner,
html[data-bcd-theme="dark"] .bcd-ptabs__panel,
html[data-bcd-theme="dark"] .bcd-ptabs__gallery,
html[data-bcd-theme="dark"] .bcd-ptabs__gimg,
html[data-bcd-theme="dark"] .bcd-ptabs__panel h1,
html[data-bcd-theme="dark"] .bcd-ptabs__panel h2,
html[data-bcd-theme="dark"] .bcd-ptabs__panel h3,
html[data-bcd-theme="dark"] .bcd-ptabs__panel h4,
html[data-bcd-theme="dark"] .bcd-ptabs__panel p,
html[data-bcd-theme="dark"] .bcd-ptabs__panel span,
html[data-bcd-theme="dark"] .bcd-ptabs__panel label {
  background-color: transparent !important;
  color: #1a1a1a !important;
  border-color: #e5e5e5 !important;
}

/* Tab bar — dark grey strip */
html[data-bcd-theme="dark"] .bcd-ptabs__bar {
  background-color: #2D2D2D !important;
  border-color: #2D2D2D !important;
}
/* Tab buttons */
html[data-bcd-theme="dark"] .bcd-ptabs__tab,
html[data-bcd-theme="dark"] .bcd-ptabs__bar .bcd-ptabs__tab {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
/* Active tab → white pill, dark text. Doubled-class for specificity
   so it beats the inactive rule above without depending on source order. */
html[data-bcd-theme="dark"] .bcd-ptabs__tab.is-active,
html[data-bcd-theme="dark"] .bcd-ptabs__bar .bcd-ptabs__tab.is-active,
html[data-bcd-theme="dark"] .bcd-ptabs__tab.is-active.is-active {
  background-color: #ffffff !important;
  color: #2D2D2D !important;
}

/* ---- .bcd-calc → full opt-out. The room calculator should look identical
   in both themes. Because my generic rules use !important, the safest way
   to undo them is to re-assert the light-mode appearance explicitly with a
   more-specific selector. ---- */
html[data-bcd-theme="dark"] .bcd-calc {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #e5e5e5 !important;
}
html[data-bcd-theme="dark"] .bcd-calc *:not(.bcd-calc__btn):not(.bcd-calc__calculate) {
  background-color: transparent !important;
  color: #1a1a1a !important;
  border-color: #e5e5e5 !important;
}
html[data-bcd-theme="dark"] .bcd-calc input,
html[data-bcd-theme="dark"] .bcd-calc textarea,
html[data-bcd-theme="dark"] .bcd-calc select {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e5e5e5 !important;
}
html[data-bcd-theme="dark"] .bcd-calc .bcd-calc__hint {
  color: #666 !important;
}
/* Keep the calculate button looking like the calc plugin made it (brand bg,
   white text). The .bcd-calc__btn rule from the button block above still
   wins on white text; here we just stop the calc-scoped color override from
   pulling it back to dark. */
html[data-bcd-theme="dark"] .bcd-calc .bcd-calc__btn,
html[data-bcd-theme="dark"] .bcd-calc .bcd-calc__calculate {
  color: #ffffff !important;
}

/* ---- Opt-out class for elements you want kept light ---- */
html[data-bcd-theme="dark"] .bcd-dm-keep-light,
html[data-bcd-theme="dark"] .bcd-dm-keep-light * {
  background-color: initial !important;
  color: initial !important;
}

/* ============================================================
   FINAL OVERRIDES — declared last so they win on source order against
   anything above that might still try to colour these elements.
   ============================================================ */

/* Brand buttons keep white text in dark mode, full stop.
   Doubled-up class selectors (.bcd-nav__cta.bcd-nav__cta) bump specificity
   above any .woocommerce / .et-l link-colour rules added later in the file. */
html[data-bcd-theme="dark"] a.bcd-nav__cta,
html[data-bcd-theme="dark"] a.bcd-nav__cta.bcd-nav__cta,
html[data-bcd-theme="dark"] a.bcd-card__btn,
html[data-bcd-theme="dark"] a.bcd-card__btn.bcd-card__btn,
html[data-bcd-theme="dark"] a.bcd-nav__col-image-cta,
html[data-bcd-theme="dark"] a.bcd-nav__col-image-cta.bcd-nav__col-image-cta,
html[data-bcd-theme="dark"] .bcd-nav__cta,
html[data-bcd-theme="dark"] .bcd-card__btn,
html[data-bcd-theme="dark"] .bcd-nav__col-image-cta {
  color: #ffffff !important;
}

/* WooCommerce ".wc-backward" (Return to shop / go back link) keeps DARK text.
   It renders as a light-background pill via Divi's et_pb_button styling, so
   the generic white-button-text rule above makes it unreadable. Doubled-up
   class selectors bump specificity so this wins over the whole button block. */
html[data-bcd-theme="dark"] .wc-backward,
html[data-bcd-theme="dark"] a.wc-backward,
html[data-bcd-theme="dark"] .wc-backward.wc-backward,
html[data-bcd-theme="dark"] a.wc-backward.et_pb_button,
html[data-bcd-theme="dark"] .wc-backward.et_pb_custom_button_icon,
html[data-bcd-theme="dark"] .wc-backward.et_pb_button.et_pb_custom_button_icon {
  color: #1a1a1a !important;
}