/*
Theme Name: Nera Comp Child Theme (Perla Comps)
Template: nera-competitions-standard
Version: 1.0.0
Text Domain: nera-comp
Description: Child theme of Nera Competitions Standard — branding and site-specific assets.
*/

/* === DETECTED PARENT SELECTORS (nera-competitions-standard / frontend/src/main.css)
   Sources read in-repo; Tailwind emits utilities referencing --color-* theme tokens.
    - BODY: ~L139–141 `body { @apply font-body text-base … text-text-primary bg-background-light … }`
      → Resolved as color/background utilities bound to `--color-text-primary`,
        `--color-background-light` (not hard-coded hex at source).
    - LINKS: ~L154–161 `a` / `a:hover` → `text-primary`, `text-primary-dark`.
      Extended overrides ~L1968–2001 for `.text-white a`, `.text-primary a`,
      `.text-text-primary`, `.text-text-secondary` link chains — high utility specificity.
    - HEADINGS: ~L2039–2046 `body h1,…,h6 { @apply font-heading }` → font-heading only at
      base layer; templates add `.font-heading`, `.text-*`, `.font-bold` / `.font-light`
      utilities that outrank bare `body h2` selectors.
    - BUTTONS / CTA: @utility ~L713+ `btn-base`; ~L746 `btn-checkout` gradients
      `from-primary to-indigo-600`; ~L2017+ `.bg-primary`, `.bg-gradient-primary` enforce
      `text-white`; WooCommerce/checkout use parent utility classes elsewhere.
    - NOT FOUND in parent main.css: `.ast-button`, `.gp-button`, `.kt-button` (Astra/global
      builder classes not present in scanned parent theme stylesheet).
============================================================================ */

/* === PALETTE === */
/* Vibrant shift: same gold / purple / dark PE family as child-brand; literal + vars. */

:root {
  --color-primary: #ecc31a;
  --color-primary-dark: #bd9808;
  --color-accent: #ecc31a;
  --color-accent-dark: #a88204;
  --color-on-primary: #0e0b06;

  --color-secondary: #120825;

  --color-background-light: #090514;
  --color-background-dark: #05020c;
  --color-surface: #17102e;

  --color-success: #41d68f;
  --color-danger: #ff3b35;
  --color-warning: #ff8533;
  --color-info: #957cff;

  --color-success-bg: rgba(65, 214, 143, 0.16);
  --color-success-border: rgba(65, 214, 143, 0.5);
  --color-success-text: #93ffd0;
  --color-danger-bg: rgba(255, 59, 53, 0.14);
  --color-danger-border: rgba(255, 59, 53, 0.42);
  --color-danger-text: #ffbaba;
  --color-warning-bg: rgba(255, 133, 51, 0.14);
  --color-warning-border: rgba(255, 133, 51, 0.42);
  --color-warning-text: #ffcaa3;
  --color-info-bg: rgba(149, 124, 255, 0.16);
  --color-info-border: rgba(149, 124, 255, 0.45);
  --color-info-text: #dbd4ff;

  --color-text-primary: #fffef9;
  --color-text-secondary: #d8cff5;

  --color-gray-50: #120c22;
  --color-gray-100: #17102e;
  --color-gray-200: rgba(255, 255, 255, 0.09);
  --color-gray-300: rgba(255, 255, 255, 0.16);
  --color-gray-400: #6e62a8;
  --color-gray-500: #8f87b0;
  --color-gray-600: #a99fc6;
  --color-gray-700: #c9c2dd;
  --color-gray-800: #e3def2;
  --color-gray-900: #fffef9;

  --shadow-primary: 0 14px 36px -6px rgba(236, 195, 26, 0.58);

  --perla-primary-glow: rgba(236, 195, 26, 0.28);
  --perla-border: rgba(236, 195, 26, 0.38);
  --perla-border-dim: rgba(255, 255, 255, 0.1);
  --perla-live: #ff3b35;
  --perla-urgent: #ff8533;

  --color-indigo-50: #120c22;
  --color-indigo-100: #1a1234;
  --color-indigo-200: rgba(236, 195, 26, 0.22);
  --color-indigo-300: rgba(236, 195, 26, 0.38);
  --color-indigo-400: #f0cf4a;
  --color-indigo-500: #ecc31a;
  --color-indigo-600: #c49908;
  --color-indigo-700: #9a7610;
  --color-indigo-800: #6e5510;
  --color-indigo-900: #423208;

  --color-purple-50: #120c22;
  --color-purple-100: #1a1234;
  --color-purple-200: #281f52;
  --color-purple-300: #332666;
  --color-purple-400: #5a49a8;
  --color-purple-500: #957cff;
  --color-purple-600: #a78fff;
  --color-purple-700: #cbc4f0;
  --color-purple-800: #e6e2fb;
  --color-purple-900: #fffef9;

  --color-blue-50: #120c22;
  --color-blue-100: #1a1234;
  --color-blue-200: rgba(236, 195, 26, 0.22);
  --color-blue-300: rgba(236, 195, 26, 0.38);
  --color-blue-400: #f0cf4a;
  --color-blue-500: #ecc31a;
  --color-blue-600: #c49908;
  --color-blue-700: #9a7610;
  --color-blue-800: #6e5510;
  --color-blue-900: #423208;

  --perla-cta-ring: #6b4900;
  --perla-cta-shadow: 4px 4px 0 #4a3400;

  --perla-typo-h1: clamp(2.5rem, 5vw, 4rem);
  --perla-typo-h2: clamp(2rem, 4vw, 3rem);
  --perla-typo-h3: clamp(1.5rem, 3vw, 2.35rem);

  color-scheme: dark;
}

body {
  --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(--perla-border);
  --nera-accent: var(--color-accent);
}

/* !important beats parent `@layer`/Astra specificity on body utilities.
   WHY: frontend main.css applies `body` via layered Tailwind; unlayered+!important wins. */
body,
body[class] {
  color: #fffef9 !important;
  background-color: #090514 !important;
}

/* WHY: Anchor default + utility-styled anchors still use parent's `text-primary` stack. */

body:not(.block-editor-page) a:not(.footer-social-icon):not(.nav-logo):not(.btn-primary):not(.wp-block-button__link):not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button):where(:not(.btn-ghost)):where(:not(button)):where(:not(.button)) {
  color: var(--color-primary) !important;
}

body:not(.block-editor-page) a:not(.footer-social-icon):not(.nav-logo):not(.btn-primary):not(.wp-block-button__link):not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button):hover:where(:not(.btn-ghost)):where(:not(button)):where(:not(.button)) {
  color: var(--color-primary-dark) !important;
}

/* === BUTTONS === */
/* WHY !important on block: Woo `.button`, `.checkout`, gradients, and Tailwind gradients set background-image/color with equal/higher specificity. */

body:not(.block-editor-page) button.btn-checkout,
body:not(.block-editor-page) .btn-checkout,
body:not(.block-editor-page) .btn-primary:not(.btn-ghost),
body:not(.block-editor-page) a.btn-primary:not(.btn-ghost),
body:not(.block-editor-page) button.btn-primary:not(.btn-ghost),
body:not(.block-editor-page) .wp-block-button .wp-block-button__link,
body:not(.block-editor-page) .woocommerce #respond input#submit,
body:not(.block-editor-page) .woocommerce button.button.alt,
body:not(.block-editor-page) .woocommerce input.button.alt,
body:not(.block-editor-page) .woocommerce a.button.alt,
body:not(.block-editor-page) button[type='submit'].single_add_to_cart_button,
body:not(.block-editor-page) button.ff-btn-submit,
body:not(.block-editor-page) .comps-tab-enter.btn-primary {
  background-color: #ecc31a !important;
  background-image: none !important;
  border: 2px solid #6b4900 !important;
  border-radius: 1rem !important;
  box-shadow: 4px 4px 0 #4a3400 !important;
  color: #0e0b06 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  line-height: 1.2 !important;
  min-height: 2.875rem;
  padding: 14px 28px !important;
  text-decoration: none !important;
  transform: translate(0, 0);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

body:not(.block-editor-page) button.btn-checkout:hover,
body:not(.block-editor-page) .btn-checkout:hover,
body:not(.block-editor-page) .btn-primary:not(.btn-ghost):hover,
body:not(.block-editor-page) a.btn-primary:not(.btn-ghost):hover,
body:not(.block-editor-page) button.btn-primary:not(.btn-ghost):hover,
body:not(.block-editor-page) .wp-block-button .wp-block-button__link:hover,
body:not(.block-editor-page) .woocommerce #respond input#submit:hover,
body:not(.block-editor-page) .woocommerce button.button.alt:hover,
body:not(.block-editor-page) .woocommerce input.button.alt:hover,
body:not(.block-editor-page) .woocommerce a.button.alt:hover,
body:not(.block-editor-page) button[type='submit'].single_add_to_cart_button:hover,
body:not(.block-editor-page) button.ff-btn-submit:hover,
body:not(.block-editor-page) .comps-tab-enter.btn-primary:hover {
  background-color: #bd9808 !important;
  box-shadow: 6px 6px 0 #352509 !important;
  color: #0e0b06 !important;
  filter: none !important;
  transform: translateY(-2px);
}

@media (max-width: 639px) {
  body:not(.block-editor-page) button.btn-checkout,
  body:not(.block-editor-page) .btn-checkout,
  body:not(.block-editor-page) .btn-primary:not(.btn-ghost),
  body:not(.block-editor-page) a.btn-primary:not(.btn-ghost),
  body:not(.block-editor-page) button.btn-primary:not(.btn-ghost),
  body:not(.block-editor-page) .wp-block-button .wp-block-button__link,
  body:not(.block-editor-page) .woocommerce #respond input#submit,
  body:not(.block-editor-page) .woocommerce button.button.alt,
  body:not(.block-editor-page) .woocommerce input.button.alt,
  body:not(.block-editor-page) .woocommerce a.button.alt,
  body:not(.block-editor-page) button[type='submit'].single_add_to_cart_button,
  body:not(.block-editor-page) button.ff-btn-submit,
  body:not(.block-editor-page) .comps-tab-enter.btn-primary {
    padding: 12px 22px !important;
  }
}

body:not(.block-editor-page) .btn-ghost,
body:not(.block-editor-page) a.btn-ghost,
body:not(.block-editor-page) button.btn-ghost {
  border-width: 2px !important;
  font-weight: 700 !important;
  min-height: 2.875rem;
  padding: 14px 28px !important;
}

@media (max-width: 639px) {
  body:not(.block-editor-page) .btn-ghost,
  body:not(.block-editor-page) a.btn-ghost,
  body:not(.block-editor-page) button.btn-ghost {
    padding: 12px 22px !important;
  }
}

/* === TYPOGRAPHY === */
/* WHY !important: perla-sections + Tailwind `font-bold` / `font-light` utilities set weight with !important on same elements. */

body:not(.block-editor-page) main h1.font-heading,
body:not(.block-editor-page) #primary h1.font-heading,
body:not(.block-editor-page) .site-main h1.font-heading,
body:not(.block-editor-page) .entry-content h1.font-heading,
body:not(.block-editor-page) h1.section-heading.perla-section-heading,
body:not(.block-editor-page) main h1.section-heading,
body:not(.block-editor-page) section.perla-hero-section h1.perla-hero-headline {
  font-size: var(--perla-typo-h1) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--color-text-primary) !important;
}

body:not(.block-editor-page) main h2.font-heading,
body:not(.block-editor-page) #primary h2.font-heading,
body:not(.block-editor-page) .site-main h2.font-heading,
body:not(.block-editor-page) .entry-content h2.font-heading,
body:not(.block-editor-page) h2.section-heading,
body:not(.block-editor-page) h2.signup-heading.section-heading {
  font-size: var(--perla-typo-h2) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--color-text-primary) !important;
}

body:not(.block-editor-page) main h3.font-heading,
body:not(.block-editor-page) #primary h3.font-heading,
body:not(.block-editor-page) .site-main h3.font-heading,
body:not(.block-editor-page) .entry-content h3.font-heading,
body:not(.block-editor-page) h3[class*='section-heading'],
body:not(.block-editor-page) .perla-email-signup h3 {
  font-size: var(--perla-typo-h3) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  color: var(--color-text-primary) !important;
}

body:not(.block-editor-page) main h4.font-heading,
body:not(.block-editor-page) main h5,
body:not(.block-editor-page) main h6 {
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
}

/* === VERIFY CHECKLIST ===
   Paste or eyeball DevTools Computed styles against these anchors:

   1) Heading scale + weight (expect obvious size jump vs old build)
      - Inspect: main h1.font-heading OR h1.section-heading.perla-section-heading
        → font-weight should be 800; font-size should match clamp ≈ 2.5rem–4rem band.
      - Inspect: main h2.font-heading OR h2.section-heading
        → font-weight 700; clamp ≈ 2rem–3rem.
      - Inspect: main h3.font-heading
        → font-weight 700.

   2) Primary CTA buttons (solid gold, shadow, not washed/purple)
      - Inspect: .btn-primary:not(.btn-ghost), .btn-checkout,
        .woocommerce a.button.alt, .wp-block-button__link
        → background-color ≈ #ecc31a (or css var --color-primary), box-shadow shows
        4px 4px hard offset; padding ~14×28 desktop / 12×22 mobile.

   3) Body + prose contrast on dark canvas
      - Inspect: body
        → color #fffef9 (or --color-text-primary), background #090514.

   This file is enqueued after perla-comps-sections and the child Vite bundle
   (see perla_comps_visual_refresh_css_deps() in functions.php).

   Untouched by design: .bg-orbs, .bg-orb-*, canvas, particle/animation wrappers.
============================================================================ */