/* LeoScorpioLeo — site-wide "Corroded Copper" color system
   Replaces the prior Overgrowth system (2026-08-03). Dystopian-cyberpunk /
   nature-reclaims-technology palette: near-black base, deep jungle-green
   bands, rust and amber as the only warm accents. Concept: structure
   corrodes, signal fades, growth persists — technology decays, life finds
   a way regardless. Loaded as an mu-plugin so it survives theme switches —
   do not move into a theme folder that could get deactivated. */

:root {
  --base-dark: #10130D;
  --surface-card: #171A12;
  --surface-2: #1B1E15;
  --deep-green: #1B2A17;
  --line: rgba(184, 172, 138, .18);

  --text-main: #E7E2D2;
  --text-muted: #8A8F78;

  --rust: #B5551E;
  --rust-deep: #8C4116;
  --amber: #E8A33D;
  --amber-bright: #F0B65A;

  /* Pagination-button active state (2026-08-04) */
  --copper-glow: #D9622B;
  --pale-lavender: #EFEAF5;
}

/* ---------- base: whole site is dark, tiled Overgrowth wall background
   sits behind everything as one continuous image -- only html/body paints
   it, inner containers go transparent so the tile never restarts at a
   container boundary. Header/footer chrome stays solid dark for nav
   legibility. ---------- */
html, body {
  background-color: var(--base-dark) !important;
  background-image:
    linear-gradient(rgba(16,19,13,.76), rgba(16,19,13,.76)),
    url('overgrowth-tile.jpg') !important;
  background-repeat: repeat, repeat !important;
  background-size: auto, 1400px auto !important;
  background-position: top left, top left !important;
  color: var(--text-main);
}
#page, .site, #content, .news25-content, .site-content, .content-area {
  background-color: transparent !important;
}
a { color: var(--amber); }
a:hover, a:focus { color: var(--amber-bright); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: var(--amber); color: var(--base-dark); }
::-moz-selection { background: var(--amber); color: var(--base-dark); }
h1, h2, h3, h4, h5, h6 { color: var(--text-main); }
hr, .border, .border-top, .border-bottom { border-color: var(--line) !important; }

/* Gutenberg paragraph blocks (theme's own typography CSS loads after this
   stylesheet and sets its own dark near-black paragraph color, meant for a
   light page background — invisible against this dark theme, e.g. the
   "Support LeoScorpioLeo" intro text on /donate/). Force body copy text to
   the light theme color site-wide, same treatment as headings above. */
.wp-block-paragraph:not(table.woocommerce-product-attributes p):not(.lsl-jp),
.entry-content p:not(table.woocommerce-product-attributes p):not(.lsl-jp),
#av-primary-content p:not(table.woocommerce-product-attributes p):not(.lsl-jp) {
  color: var(--text-main) !important;
}

/* ---------- header / nav (dark chrome) ---------- */
#header,
#header .navigator-wrapper,
#header .navigation-middle,
#header .main-navigation-area,
#header .nav-area,
#header .navbar-area,
#header #stMenu,
#header .menu-right-list,
#header .view-search-btn,
#header .header-search-popup {
  background-color: var(--base-dark) !important;
  border-color: var(--line) !important;
}
#header, #header a, #header p, #header span, #header li,
#header h1, #header h2, #header h3, #header h4, #header h5,
#header i, #header .site-title, #header .site-description {
  color: var(--text-main) !important;
}
#header a:hover, #header a:focus,
#header .header-search-toggle:hover {
  color: var(--amber-bright) !important;
}
#header .custom-logo {
  filter: drop-shadow(0 0 3px rgba(231, 226, 210, .45)) drop-shadow(0 0 10px rgba(232, 163, 61, .3));
}

/* Home icon button — was left as theme-default solid orange since only its
   border was themed before. Now a copper fill matching every other CTA. */
#header .btn.wave-effect {
  background: linear-gradient(135deg, var(--rust), var(--rust-deep)) !important;
  border: 1px solid var(--rust-deep) !important;
  border-radius: 8px;
  color: var(--text-main) !important;
}
#header .btn.wave-effect:hover {
  box-shadow: 0 0 14px rgba(232, 163, 61, .5) !important;
  color: var(--text-main) !important;
}

#header input, #header .search-box input, #header .search-form input {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--line) !important;
}
#header input::placeholder { color: var(--text-muted) !important; }

/* Match every page's header to the homepage's cleaner treatment. */
#header .site-title, #header .site-description { display: none !important; }
#header .navigation-middle-row { padding: 15px 0 !important; }
#header .logo .custom-logo { max-height: 110px !important; width: auto !important; }

/* Header product-carousel cards carry their own per-card rust/amber
   background (set inline by JS) so their text needs its own readable
   colors rather than inheriting #header's blanket light-on-dark rule. */
#header .lsl-prod-card,
#header .lsl-prod-card .lsl-prod-name {
  color: inherit !important;
}
#header .cart-count,
#header .mini-cart-count,
#header .cart-contents-count,
#header .header-cart .count {
  background: var(--amber) !important;
  color: var(--base-dark) !important;
}

/* ---------- breadcrumb bar (theme default "News25 Prime" component —
   previously untouched by the color system: the navy bar + solid-orange
   "Home" pill visible on every inner page). ---------- */
#breadcrumb-section.breadcrumb-section {
  background-color: var(--deep-green) !important;
  border-color: var(--line) !important;
}
.breadcrumb-content, .breadcrumb-content * {
  color: var(--text-main);
}
.breadcrumb-heading {
  background: linear-gradient(90deg, var(--rust), var(--rust-deep)) !important;
  color: var(--text-main) !important;
}
.breadcrumb-list a {
  color: var(--amber) !important;
}
.breadcrumb-list a:hover {
  color: var(--amber-bright) !important;
}

/* ---------- blog single-post article headings ---------- */
/* .post-content is the News25 Prime single-post template's article body
   wrapper — its own white/light background (untouched by the dark-chrome
   .content-area rule above), with theme-default coral/pink headings that
   the general h1-h6 rule above never won against (lower specificity, no
   !important). Covers the post title itself plus every in-article
   sub-heading, current and future posts alike. */
.post-content h5.post-title,
.post-content h2,
.post-content h3,
.post-content h4 {
  color: #1B2A17 !important;
}

/* ---------- blog "Calendar" widget (core Calendar block) ---------- */
/* Days with a published post render their number wrapped in <a>; days
   without are plain text in the same <td> — no "has-post" class on this
   block-based calendar, so the link itself is the only hook available. */
.wp-block-calendar table td {
  color: var(--text-main);
}
.wp-block-calendar table td a {
  color: var(--rust);
  font-weight: 700;
}
.wp-block-calendar table td a:hover {
  color: var(--amber-bright);
}

/* ---------- footer (dark chrome) ---------- */
#footer-section,
#footer-section .footer-content,
#footer-section .footer-copyright {
  background-color: var(--base-dark) !important;
  border-color: var(--line) !important;
}
#footer-section, #footer-section p, #footer-section span, #footer-section li,
#footer-section h1, #footer-section h2, #footer-section h3, #footer-section h4,
#footer-section .copyright-text, #footer-section .widget-title, #footer-section a {
  color: var(--text-muted) !important;
}
#footer-section a:hover, #footer-section a:focus { color: var(--amber-bright) !important; }

/* ---------- sidebar / widgets ---------- */
.widget, .sidebar, aside.widget-area, .contactform .contact-inner {
  background-color: var(--surface-card) !important;
  color: var(--text-main);
  border-color: var(--line) !important;
}
/* Widget title bars (e.g. sidebar "Updates" / "Shop" / "Donate" pills) —
   previously theme-default solid orange, untouched by the color system. */
.widget-title, .sidebar .widget h2, .sidebar .widget h3 {
  background: linear-gradient(90deg, var(--rust), var(--rust-deep)) !important;
  color: var(--text-main) !important;
  border-color: var(--line) !important;
}

/* ---------- buttons (brand fill, used site-wide incl. WooCommerce) ---------- */
.btn:not(#header .btn),
.button,
.add_to_cart_button,
.single_add_to_cart_button,
input[type="submit"],
button[type="submit"],
.wp-block-button__link,
.wc-proceed-to-checkout .button,
#place_order {
  background: linear-gradient(90deg, var(--rust), var(--rust-deep)) !important;
  color: var(--text-main) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 10px rgba(232, 163, 61, .18);
  transition: box-shadow .2s ease, transform .15s ease;
}
.btn:not(#header .btn):hover,
.button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
#place_order:hover {
  box-shadow: 0 0 16px rgba(232, 163, 61, .55) !important;
  transform: translateY(-1px);
  color: var(--text-main) !important;
}

/* ---------- WooCommerce shop grid + product cards ---------- */
ul.products li.product,
.woocommerce ul.products li.product,
li.product .product-single {
  background-color: var(--surface-card) !important;
  color: var(--text-main);
  border-radius: 12px;
  transition: box-shadow .2s ease, transform .15s ease;
}
li.product:hover .product-single {
  box-shadow: 0 8px 28px rgba(232, 163, 61, .18);
  transform: translateY(-3px);
}
li.product h3 a { color: var(--text-main); }
li.product h3 a:hover { color: var(--amber-bright); }

.onsale {
  background: var(--rust) !important;
  color: var(--text-main) !important;
  border-radius: 20px !important;
  font-weight: 700;
}

/* "In stock" as an amber-glow chip — dark text on bright amber clears AA
   regardless of the surrounding surface, the one bioluminescent-style
   accent moment kept in the new palette. */
.stock.in-stock {
  display: inline-block;
  background: var(--amber);
  color: var(--base-dark);
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.price, .woocommerce-Price-amount { color: var(--amber); }
.price ins { text-decoration: none; }
.price ins .woocommerce-Price-amount { color: var(--rust); font-weight: 700; }
.price del .woocommerce-Price-amount { color: var(--text-muted); font-weight: 400; opacity: .7; }

/* ---------- WooCommerce single product / tabs / tables ---------- */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product div.summary {
  background-color: var(--base-dark);
  color: var(--text-main);
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--amber-bright) !important;
}
.woocommerce-tabs ul.tabs li a { color: var(--text-muted); }
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  background-color: var(--surface-card) !important;
  color: var(--text-main);
  border-color: var(--line) !important;
}
.woocommerce table.shop_table th {
  border-bottom: 2px solid var(--rust) !important;
}

/* ---------- "Additional information" attributes table: alternating
   rust/amber rows (James's explicit spec, 2026-08-05). This table
   (Weight/Width/Length/Sleeve length/Size tolerance/Care Instructions/
   GPSR Information) carries its own classes, not .shop_table, so the
   rule above never touched it — one rule here covers every product. */
.woocommerce table.woocommerce-product-attributes tr:nth-child(odd) th,
.woocommerce table.woocommerce-product-attributes tr:nth-child(odd) td {
  background-color: var(--rust) !important;
  color: var(--text-main) !important;
  border-color: var(--line) !important;
}
.woocommerce table.woocommerce-product-attributes tr:nth-child(even) th,
.woocommerce table.woocommerce-product-attributes tr:nth-child(even) td {
  background-color: var(--amber) !important;
  color: var(--base-dark) !important;
  border-color: var(--line) !important;
}
.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td {
  padding: 10px 15px !important;
}
.woocommerce table.woocommerce-product-attributes td p {
  margin: 0;
}
/* The value cells wrap their text in a <p> (the .entry-content p rule
   earlier in this file forces those light-cream !important, which reads
   fine on the rust rows but goes washed-out on the amber rows) — repeat
   the same odd/even colors on the <p> itself so it always matches its
   own row instead of inheriting the generic entry-content color. */
.woocommerce table.woocommerce-product-attributes tr:nth-child(odd) td p {
  color: var(--text-main) !important;
}
.woocommerce table.woocommerce-product-attributes tr:nth-child(even) td p {
  color: var(--base-dark) !important;
}

/* ---------- WooCommerce product-category pagination buttons (2026-08-04) —
   inactive page numbers use the rust/amber pairing already used elsewhere
   in this file; the active/current page + hover/focus states get a
   brighter copper fill with a pale-lavender number/border for contrast.
   !important + matching selector specificity to beat the theme's own
   main.css pagination rules (also !important), this stylesheet loads
   after theme CSS so it wins on equal specificity. */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background-color: var(--rust) !important;
  color: var(--amber) !important;
  border-color: var(--amber) !important;
}
.woocommerce-pagination>ul .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--copper-glow) !important;
  color: var(--pale-lavender) !important;
  border-color: var(--pale-lavender) !important;
}

/* ---------- cart / checkout ---------- */
.wc-block-cart, .wc-block-checkout,
.woocommerce-checkout #order_review, .cart_totals,
.woocommerce-cart-form, .cart-collaterals {
  background-color: var(--surface-card) !important;
  color: var(--text-main);
  border-color: var(--line) !important;
}
.woocommerce-checkout #order_review, .cart_totals {
  border-color: var(--line) !important;
}

/* ---------- forms ---------- */
input:not([type="submit"]):not([type="button"]),
select,
textarea,
.form-control,
.wc-block-components-text-input input {
  background-color: var(--surface-2) !important;
  color: var(--text-main) !important;
  border-color: var(--line) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* Japanese-language lines within bilingual product descriptions —
   makes the JP text pop as its own visual thread against the English.
   !important: on a <p class="lsl-jp"> (the opening Hook lines, the closing
   sign-off), the .entry-content p rule above (its own color is !important)
   was winning by force despite lower specificity, since !important always
   beats a non-!important declaration regardless of specificity. Only
   affected <p class="lsl-jp"> — <span class="lsl-jp"> inside a bullet <li>
   was never a <p>, so it never matched that rule and was already fine. */
.lsl-jp { color: var(--amber) !important; }

/* Sidebar widget list links (Categories, Archives, etc.) — these were
   inheriting a theme default dark link color more specific than the
   generic `a` rule above, making them nearly invisible against the
   dark surface. Force them bright and legible. */
.widget a,
.sidebar a,
aside.widget-area a,
.widget_product_categories .product-categories a,
.widget_archive li a,
.widget_categories li a {
  color: var(--text-main) !important;
}
.widget a:hover,
.sidebar a:hover,
aside.widget-area a:hover,
.widget_product_categories .product-categories a:hover,
.widget_archive li a:hover,
.widget_categories li a:hover {
  color: var(--amber-bright) !important;
}
.widget .count,
.widget_product_categories .count {
  color: var(--text-muted) !important;
}
.widget li,
.product-categories li,
.widget_archive li {
  border-color: var(--line) !important;
}