/**
 * Kit Competition — child theme token bridge. Loaded after parent Vite bundle.
 * Palette: poster mustard yellow on dark canvas (replaces coyote tan / olive).
 */
:root {
  /* Brand */
  --color-primary: #E0B000;
  --color-primary-dark: #B89000;
  --color-accent: #E0B000;
  --color-accent-dark: #B89000;
  --color-on-primary: #1A1A1A;
  --color-secondary: #3A3012;
  --color-secondary-deep: #2A2410;

  /* Canvas + surface (dark shell) */
  --color-background-light: #1A1A1A;
  --color-background-dark: #0F0F0F;
  --color-surface: #242420;

  /* Text */
  --color-text-primary: #F5F1E8;
  --color-text-secondary: #A8A190;

  /* Borders — dark gray (replaces near-white gray-100/200 on dark shell) */
  --color-gray-100: #444444;
  --color-gray-200: #444444;

  /* Gradient tails + primary shadow (parent utilities hardcode indigo otherwise) */
  --color-primary-gradient-end: #C49A00;
  --color-primary-gradient-end-light: #F0D56A;
  --shadow-primary: 0 10px 20px -10px rgba(224, 176, 0, 0.3);

  /* Typography — leave parent defaults (out of scope) */
  /* --font-heading: ; */
  /* --font-body:    ; */

  /* Plugin bridge (Nera Core / Fluent / Woo) */
  --nera-primary:        var(--color-primary);
  --nera-text:           var(--color-text-primary);
  --nera-text-secondary: var(--color-text-secondary);
  --nera-bg:             var(--color-background-light);
  --nera-surface:        var(--color-surface);
  --nera-border:         var(--color-gray-200);

  /* lty-result-screens overlays (win / no-win / draw / spin) */
  --lty-rs-win-accent: #B89000;
  --lty-rs-win-accent-light: #E0B000;
  --lty-rs-win-accent-glow: rgba(224, 176, 0, 0.35);
  --lty-rs-win-bg: #faf6ef;
  --lty-rs-win-stripe: linear-gradient(135deg, #E0B000 0%, #B89000 100%);

  --lty-rs-no-win-accent: #C49A00;
  --lty-rs-no-win-bg: #f7f5f0;

  --lty-rs-draw-accent: #3A3012;
  --lty-rs-draw-bg: #f3f4ef;

  --lty-rs-stw-accent: #2A2410;
  --lty-rs-stw-bg: #f4f5f0;
}

/* Header logo — square sticker must fit nav height */
#site-header nav > a img {
  height: auto;
  max-height: 4rem; /* 64px — fill h-16 */
  width: auto;
  max-width: 7rem;
  object-fit: contain;
}

@media (min-width: 1024px) {
  #site-header nav > a img {
    max-height: 5.5rem; /* 88px — fills h-20 + light sticker pop into py-2 */
  }
}

/* Desktop dropdown: near-white border + hover:bg-gray-50 clash with dark surface */
#menu-primary .sub-menu {
  border-color: transparent;
  /* Remap Tailwind gray-50 so hover:bg-gray-50 lifts the dark surface instead of going white */
  --color-gray-50: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-surface));
}

/* Thank-you: lty-result-screens unlayered .pointer-events-none blocks submenu hover bridge */
body.woocommerce-order-received #menu-primary .menu-item-has-children:hover > .sub-menu,
body.woocommerce-order-received #menu-primary .menu-item-has-children:focus-within > .sub-menu,
body.nera-order-received-page #menu-primary .menu-item-has-children:hover > .sub-menu,
body.nera-order-received-page #menu-primary .menu-item-has-children:focus-within > .sub-menu {
  pointer-events: auto;
}

/* Hero — dark mid-stop so cream text stays readable (parent via-gray-50 is near-white) */
.ncs-hero {
  --ncs-hero-bg: linear-gradient(
    to bottom right,
    var(--color-surface),
    var(--color-secondary-deep),
    var(--color-secondary)
  );
  /* Beat Tailwind from/via/to utilities on the same background-image */
  background-image: var(--ncs-hero-bg);
}

.ncs-hero__cta a.border-gray-200 {
  border-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
}

/* Spin To Win: plugin fades secondary→white; cream secondary text fails on mid-stop */
.stw-page {
  background: linear-gradient(
    to bottom,
    var(--color-secondary),
    var(--color-secondary-deep),
    color-mix(in srgb, var(--color-surface) 70%, var(--color-secondary))
  );
}

.stw-hero-intro {
  color: color-mix(in srgb, var(--color-text-primary) 82%, var(--color-text-secondary));
}

/* Recent Winners — parent winner-card uses border-gray-100 */
.nera-homepage #winners .nera-winner-card {
  border-color: var(--color-gray-100);
}

.nera-homepage #winners .nera-winner-card .border-gray-100 {
  border-color: var(--color-gray-100);
}

/*
 * Quick Guide — parent to-gray-50 is near-white on dark canvas.
 * Soft lift: cream mixed into surface so the gradient stays dark.
 * gray-100/200 stay at :root #444444 for borders.
 */
.quick-guide-section {
  --color-gray-50: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-surface));
  --color-gray-300: color-mix(in srgb, var(--color-text-primary) 28%, var(--color-surface));
}

/* Contact page — olive wash on main canvas (was bg-gray-50) */
.nera-contact-page {
  background-color: var(--color-surface);
  background-image: linear-gradient(
    to bottom,
    var(--color-surface),
    var(--color-secondary-deep),
    var(--color-secondary)
  );
}

/* Filter bar: hover:bg-gray-50 is near-white; cream text vanishes — lift surface instead */
#advanced-filter-competitions {
  --color-gray-50: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-surface));
}

/* Cart: bg-gray-50 pills (locked qty, price chips) — cream text fails on near-white */
body.woocommerce-cart {
  --color-gray-50: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-surface));
}

/* Instant Wins “To Be Won” pill: bg-gray-100 + cream text-text-primary */
.instant-wins-section .bg-gray-100.text-text-primary {
  color: #1A1A1A;
}

/* Instant Wins: hover/accordion bg-gray-50 is near-white; cream titles fail — lift surface */
.instant-wins-section {
  --color-gray-50: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-surface));
}

/* Progress “Won” / “100%”: gray-500/700 are ink-on-light; prize headers are dark */
.instant-wins-section .animate-card-enter > button .text-gray-500 {
  color: var(--color-text-secondary);
}
.instant-wins-section .animate-card-enter > button .text-gray-700 {
  color: var(--color-text-primary);
}

/* Toggle sits on light warning-bg; cream text tokens fail here */
#instant-wins-toggle-btn {
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5C574C;
}

/* Ticket picker trigger: near-white dashed pill; cream body text fails */
.nera-ticket-trigger {
  color: #1A1A1A;
}

/* Ticket dialog + lucky-dip modals: white shells; cream text tokens fail */
.nera-ticket-dialog,
.nera-lucky-dip-popup,
.nera-lucky-dip-regenerate {
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5C574C;
  color: #1A1A1A;
}

/* Lottery alertable: white panel; cream --color-text-primary fails; OK is white on yellow */
.alertable.nera-lottery-alert {
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5C574C;
  color: #1A1A1A;
}

.alertable.nera-lottery-alert .alertable-ok {
  color: var(--color-on-primary) !important;
}

.nera-lucky-dip-inline__qty .qty {
  color: #1A1A1A;
}

/* Primary CTAs: parent hardcodes indigo (#1313ec) glow — brand mustard yellow */
a.bg-primary[class*="rgba(19,19,236"],
button.bg-primary[class*="rgba(19,19,236"] {
  box-shadow: 0 10px 25px -5px rgba(224, 176, 0, 0.35);
}

/*
 * Black labels on bright yellow fills.
 * Parent forces white via body a.text-white !important and .bg-primary { text-white }.
 * Category chips set color:#fff inline. Beat those with higher specificity.
 */
body a.bg-gradient-primary,
body a.bg-primary,
body a.bg-gradient-primary.text-white,
body a.bg-primary.text-white,
body a.ncs-product-card__cta.text-white,
button.bg-gradient-primary,
button.bg-primary,
.bg-gradient-primary,
.bg-primary,
[class*='bg-gradient-primary'],
.bg-gradient-to-r.from-primary.to-primary.text-white {
  color: var(--color-on-primary) !important;
}

body a.bg-gradient-primary:hover,
body a.bg-primary:hover,
button.bg-gradient-primary:hover,
button.bg-primary:hover,
.bg-gradient-primary a,
.bg-primary a,
[class*='bg-gradient-primary'] a {
  color: var(--color-on-primary) !important;
}

/* Competition card category chips (inline style="color:#fff") */
.ncs-product-card [style*="background-color"][style*="color: #fff"],
.ncs-product-card [style*="background-color"][style*="color:#fff"] {
  color: var(--color-on-primary) !important;
}

/* Payment methods — dark shell (parent hardcodes #fff) */
.woocommerce-checkout-payment .wc_payment_methods,
.woocommerce-checkout-payment .wc_payment_methods li,
.woocommerce-checkout-payment .wc_payment_method,
.woocommerce-checkout-payment .wc_payment_method:hover,
.woocommerce-checkout-payment .wc_payment_method.active,
.woocommerce-checkout-payment .payment_box {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  background-image: none !important;
}

#payment .wc_payment_methods {
  background: transparent !important;
  --color-gray-300: #555555;
  --color-gray-400: #666666;
}

/* Soft lift for wallet info box inside the row (beat parent .payment_box #fff) */
.woocommerce-checkout-payment .payment_box .nera-wallet-gateway-description,
.woocommerce-checkout-payment .nera-wallet-gateway-description {
  background: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-surface)) !important;
  background-color: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-surface)) !important;
  background-image: none !important;
  border-color: var(--color-gray-100) !important;
}

/* Wallet highlight: square indigo chrome vs rounded card — match radius, kill active ring */
#payment li.nera-wallet-payment-highlighted {
  display: block !important; /* list-item breaks overflow/radius clipping */
  list-style: none !important;
  /* Parent highlight uses transition:all which locks radius at its 12px start */
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  border-radius: 16px !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  overflow: hidden !important;
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  background-image: none !important; /* kill parent indigo gradient */
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-gray-100)) !important;
  box-shadow: none !important; /* drop .active ring-2 square chrome */
  outline: none !important;
  padding: 16px !important;
}

#payment li.nera-wallet-payment-highlighted:hover,
#payment li.nera-wallet-payment-highlighted.active {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-gray-100)) !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000;
}

/* Star badge sits at top/right -8px; keep it inside after overflow:hidden */
#payment li.nera-wallet-payment-highlighted::before {
  top: 6px;
  right: 6px;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  ) !important;
}

/* Checkout + thank-you progress header strip — olive wash (was bg-gray-50) */
body.woocommerce-checkout .woocommerce > .bg-gray-50,
body.woocommerce-order-received .woocommerce > .bg-gray-50 {
  --color-gray-400: #A8A190;
  background-color: var(--color-surface);
  background-image: linear-gradient(
    to bottom,
    var(--color-surface),
    var(--color-secondary-deep),
    var(--color-secondary)
  );
  border-color: var(--color-gray-200);
}

/* Order received / thank-you: ink gray-* on dark surface; borders keep #444 */
.woocommerce-order {
  --color-gray-50: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-surface));
  --color-gray-100: #444444;
  --color-gray-200: #444444;
  --color-gray-500: #A8A190;
  --color-gray-600: #C4BDB0;
  --color-gray-700: #E8E4D9;
  --color-gray-800: #F0EBE0;
  --color-gray-900: #F5F1E8;
}

/* lty-result-screens preflight: * { border-color:#e5e7eb } beats @layer border-gray-* */
.woocommerce-order .border-gray-100,
.woocommerce-order .border-t.border-gray-100,
.woocommerce-order .border-b.border-gray-100,
.woocommerce-order .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-gray-100) !important; /* #444444 */
}

.woocommerce-order .border-gray-200,
.woocommerce-order .border-t.border-gray-200,
.woocommerce-order .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-gray-200) !important;
}

/*
 * lty-result-screens.css ships unlayered hardcoded .text-gray-900 / 800 / 400
 * (rgb literals), which beat Tailwind @layer utilities + CSS-var remaps.
 * Direct color rules with higher specificity are required on this page.
 */
.woocommerce-order .text-gray-900 {
  color: #F5F1E8;
}
.woocommerce-order .text-gray-800 {
  color: #F0EBE0;
}
.woocommerce-order .text-gray-400 {
  color: #A8A190;
}

/* Success banner stays light green — restore ink */
.woocommerce-order .bg-success-bg,
.woocommerce-order .bg-success-bg .text-gray-900 {
  --color-gray-900: #111827;
  color: #111827;
}

/* White / light nested panels keep ink */
.woocommerce-order .bg-white,
.woocommerce-order .bg-white .text-gray-900,
.woocommerce-order .bg-white .text-gray-800 {
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  color: #111827;
}
.woocommerce-order .bg-white .text-gray-400 {
  color: #9ca3af;
}

/* Draw overlay: hardcoded indigo date chip */
.lty-rs-overlay p.inline-flex[class*="rgba(79,70,229"] {
  background-color: color-mix(in srgb, var(--lty-rs-draw-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--lty-rs-draw-accent) 18%, transparent);
}

/* Draw / no-win buttons: hardcoded indigo/coral shadows */
.lty-rs-overlay .lty-rs-btn-draw {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--lty-rs-draw-accent) 28%, transparent);
}
.lty-rs-overlay .lty-rs-btn-draw:hover {
  box-shadow: 0 6px 22px color-mix(in srgb, var(--lty-rs-draw-accent) 38%, transparent);
}
.lty-rs-overlay .lty-rs-btn-no-win {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--lty-rs-no-win-accent) 30%, transparent);
}
.lty-rs-overlay .lty-rs-btn-no-win:hover {
  box-shadow: 0 6px 22px color-mix(in srgb, var(--lty-rs-no-win-accent) 40%, transparent);
}

/*
 * lty-result-screens.css (loaded only on order-received) ships an unlayered Tailwind
 * subset that includes .h-16, .grid-cols-1, and .sm:grid-cols-2 but not the md/lg/xl
 * variants used elsewhere. Unlayered CSS always beats @layer utilities regardless of
 * media match. Scope overrides to body.woocommerce-order-received so they don't
 * freeze grids on other pages (how-it-works, advanced-filter, etc.).
 */
body.woocommerce-order-received {
  @media (min-width: 48rem) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .lg\:h-20 { height: 5rem; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
  @media (min-width: 80rem) {
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
}

/* Winners filter track: bg-gray-100 is light; cream text-primary vanishes on hover */
.nera-winners-page .inline-flex.bg-gray-100.rounded-xl,
.nera-winners-page [data-filter-chip] {
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5C574C;
}

/* About Us hero — black copy on mustard yellow (parent uses text-white*) */
section[aria-labelledby="about-us-hero-heading"] [class*="text-white"] {
  color: var(--color-on-primary) !important;
}

section[aria-labelledby="about-us-hero-heading"] .w-20.h-1 {
  background-color: var(--color-on-primary);
}

/* About CTA secondary: hover:bg-gray-50 is near-white; cream text vanishes */
.nera-about-us-page section.bg-surface a.border-gray-200.text-text-primary:hover {
  background-color: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-surface));
}

/* About Us stories — olive wash (replaces bg-gray-50); borders use :root #444 */
section[aria-labelledby="about-us-stories"] {
  background-color: var(--color-surface);
  background-image: linear-gradient(
    to bottom,
    var(--color-surface),
    var(--color-secondary-deep),
    var(--color-secondary)
  );
}

/* Live markup uses from-gray-50 (PHP template); Twig uses from-background-light */
#how-it-works > .bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    var(--color-surface),
    var(--color-secondary-deep),
    var(--color-secondary)
  );
}

/* How It Works — badge + CTA note wash out on dark canvas */
#how-it-works .how-it-works-header > .inline-flex {
  background-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)) !important;
  border-color: var(--color-primary) !important;
}

#how-it-works .how-it-works-header > .inline-flex .text-primary {
  color: var(--color-text-primary) !important;
}

#how-it-works .text-center.mt-16 > p.text-sm {
  color: color-mix(in srgb, var(--color-text-primary) 82%, var(--color-text-secondary));
}

/* Draw Process placeholder: bg-gray-100 remaps to dark slate (#444); force white copy */
.nera-how-it-works-template section[aria-labelledby="hiw-draw-heading"] .aspect-video.bg-gray-100 {
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #FFFFFF;
}

/* Footer Social Links — outline circles */
#site-footer .wp-block-social-links {
  gap: 0.75rem;
}

#site-footer .wp-block-social-links .wp-social-link {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
}

#site-footer .wp-block-social-links .wp-block-social-link-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text-primary) 28%, transparent);
  border-radius: 9999px;
  color: var(--color-text-secondary);
  background: transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

#site-footer .wp-block-social-links .wp-block-social-link-anchor:hover,
#site-footer .wp-block-social-links .wp-block-social-link-anchor:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

#site-footer .wp-block-social-links .wp-block-social-link-anchor svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

/* FAQs page — hero is the H1; hide Faq section heading to avoid duplicate titles */
body.page-template-page-templatesfaqs-template-php .faq-section > .max-w-7xl > .text-center.mb-12 {
  display: none;
}