/*
Theme Name:     Splatterball
Theme URI:      https://splatterball.co
Description:    Splatterball — Hello Elementor child theme. Loud, splattery brand system for the mobile gel blaster party site. Built to pair with the Splatterball Elementor Kit.
Author:         Splatterball
Author URI:     https://splatterball.co
Template:       hello-elementor
Version:        1.0.0
Text Domain:    splatterball-child
License:        GPL v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Tags:           elementor, child-theme
*/

/* ==========================================================================
   Google Fonts — loaded via functions.php wp_enqueue_style, not @import,
   so they respect page load order and don't block render.
   ========================================================================== */

/* ==========================================================================
   Splatterball — Colors, Type, Tokens
   ========================================================================== */
:root {
  /* Core brand */
  --sb-orange:       #F28A1C;
  --sb-orange-hot:   #EC5A13;
  --sb-blue:         #1FA8E0;
  --sb-blue-deep:    #0B63A8;
  --sb-pink:         #E5197F;
  --sb-yellow:       #FFD23F;

  /* Ink + paper */
  --sb-ink:          #0A0A0B;
  --sb-night:        #14161A;
  --sb-slate:        #242830;
  --sb-steel:        #3A3F4A;
  --sb-paper:        #FFFFFF;
  --sb-paper-dim:    #F5F3EE;
  --sb-paper-grit:   #ECE7DD;

  /* Neutrals */
  --sb-fg-1:         #FFFFFF;
  --sb-fg-2:         #C8CCD3;
  --sb-fg-3:         #8A909B;
  --sb-fg-mute:      #5A6070;

  /* Semantic */
  --sb-success:      #2FB56E;
  --sb-warning:      #FFD23F;
  --sb-danger:       #E5197F;
  --sb-info:         #1FA8E0;

  /* Patterns */
  --sb-tape: repeating-linear-gradient(-45deg, #FFD23F 0 14px, #0A0A0B 14px 28px);
  --sb-halftone: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.5px);

  /* Type stacks */
  --sb-font-display:  "Archivo Black", "Barlow Condensed", "Impact", sans-serif;
  --sb-font-poster:   "Archivo Black", "Barlow Condensed", "Impact", sans-serif;
  --sb-font-accent:   "Bangers", "Archivo Black", "Impact", sans-serif;
  --sb-font-ui:       "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --sb-font-body:     "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing (4px base) */
  --sb-s-0: 0;   --sb-s-1: 4px;  --sb-s-2: 8px;  --sb-s-3: 12px;
  --sb-s-4: 16px; --sb-s-5: 24px; --sb-s-6: 32px; --sb-s-7: 48px;
  --sb-s-8: 64px; --sb-s-9: 96px; --sb-s-10: 128px;

  /* Radii */
  --sb-r-0: 0; --sb-r-1: 4px; --sb-r-2: 8px; --sb-r-3: 12px; --sb-r-4: 20px;
  --sb-r-pill: 999px;

  /* Borders */
  --sb-stroke-1: 1px solid rgba(255,255,255,0.08);
  --sb-stroke-2: 2px solid #0A0A0B;
  --sb-stroke-3: 3px solid #0A0A0B;

  /* Shadows */
  --sb-shadow-sticker-sm: 3px 3px 0 #0A0A0B;
  --sb-shadow-sticker:    5px 5px 0 #0A0A0B;
  --sb-shadow-sticker-lg: 8px 8px 0 #0A0A0B;
  --sb-shadow-splat-orange: 0 10px 40px rgba(242,138,28,0.45);
  --sb-shadow-splat-blue:   0 10px 40px rgba(31,168,224,0.45);
  --sb-shadow-soft: 0 8px 24px rgba(0,0,0,0.35);

  /* Motion */
  --sb-ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --sb-ease-snap:   cubic-bezier(0.2, 0.9, 0.3, 1);
  --sb-dur-fast:    120ms;
  --sb-dur:         200ms;
  --sb-dur-slow:    360ms;
}

/* ==========================================================================
   Global resets + body
   ========================================================================== */
html { scroll-behavior: smooth; }

body,
body.elementor-default {
  background: var(--sb-ink);
  color: var(--sb-fg-1);
  font-family: var(--sb-font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sb-orange); color: var(--sb-ink); }

:focus-visible {
  outline: 3px solid var(--sb-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; }

/* ==========================================================================
   Headings (defaults — Elementor Theme Style will override per-widget)
   ========================================================================== */
h1, .sb-h1 {
  font-family: var(--sb-font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--sb-s-4);
  color: var(--sb-paper);
}
h2, .sb-h2 {
  font-family: var(--sb-font-ui);
  font-weight: 900;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 0 var(--sb-s-3);
  color: var(--sb-paper);
}
h3, .sb-h3 {
  font-family: var(--sb-font-ui);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--sb-s-2);
  color: var(--sb-paper);
}
h4, .sb-h4 {
  font-family: var(--sb-font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 var(--sb-s-2);
}

p, .sb-body {
  font-family: var(--sb-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--sb-fg-1);
  text-wrap: pretty;
}

.sb-lead {
  font-family: var(--sb-font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
  color: var(--sb-fg-2);
}

.sb-small, small {
  font-size: 14px;
  line-height: 1.4;
  color: var(--sb-fg-3);
}

/* ==========================================================================
   Links
   ========================================================================== */
a, .sb-link {
  color: var(--sb-orange);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(242,138,28,0.4);
  transition: color var(--sb-dur) var(--sb-ease-snap),
              text-decoration-color var(--sb-dur) var(--sb-ease-snap);
}
a:hover, .sb-link:hover {
  color: var(--sb-yellow);
  text-decoration-color: var(--sb-yellow);
}

/* ==========================================================================
   Utility — display / poster
   ========================================================================== */
.sb-hero-title {
  font-family: var(--sb-font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(64px, 10vw, 132px) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--sb-paper) !important;
  text-shadow: 4px 4px 0 var(--sb-ink), 8px 8px 0 var(--sb-orange-hot) !important;
  margin: 0 0 20px !important;
}

.sb-fs-hero { font-size: clamp(64px, 10vw, 132px) !important; line-height: 0.9 !important; }
.sb-fs-h1   { font-size: clamp(40px, 6vw, 72px) !important;  line-height: 0.95 !important; }
.sb-fs-h2   { font-size: clamp(30px, 4vw, 48px) !important;  line-height: 1.02 !important; }
.sb-fs-h3   { font-size: 24px !important; line-height: 1.15 !important; }
.sb-fs-stat { font-size: clamp(48px, 6vw, 64px) !important; line-height: 1 !important; }

/* Grit-texture text clip (signature worn-poster look) */
.sb-grit {
  background-color: currentColor;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image:
    radial-gradient(rgba(0,0,0,0.55) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,0.30) 1px, transparent 1.3px),
    radial-gradient(rgba(0,0,0,0.20) 1.5px, transparent 2px);
  background-size: 5px 5px, 9px 9px, 14px 14px;
  background-position: 0 0, 2px 3px, 5px 1px;
}

.sb-eyebrow {
  font-family: var(--sb-font-ui) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sb-orange) !important;
  margin-bottom: 12px !important;
  display: block;
}
.sb-eyebrow--blue { color: var(--sb-blue) !important; }
.sb-eyebrow--pink { color: var(--sb-pink) !important; }

.sb-tag {
  font-family: var(--sb-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid var(--sb-ink);
  background: var(--sb-pink);
  color: #FFFFFF;
  display: inline-block;
  transform: rotate(-3deg);
}
.sb-tilt-left  { transform: rotate(-3deg); }
.sb-tilt-right { transform: rotate(3deg); }

.sb-stat {
  font-family: var(--sb-font-poster) !important;
  font-weight: 900 !important;
  font-size: 64px !important;
  line-height: 1 !important;
  color: var(--sb-orange) !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   Signature sticker button
   Add .sb-btn to any Elementor Button widget or <a>.
   Combine with a color modifier and optional size.
   ========================================================================== */
.sb-btn .elementor-button,
a.sb-btn,
button.sb-btn,
.sb-btn > a {
  font-family: var(--sb-font-ui) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  border: 2px solid var(--sb-ink) !important;
  box-shadow: var(--sb-shadow-sticker) !important;
  transition: transform var(--sb-dur-fast) var(--sb-ease-snap),
              box-shadow var(--sb-dur-fast) var(--sb-ease-snap) !important;
  display: inline-block;
  text-decoration: none !important;
  cursor: pointer;
}
.sb-btn .elementor-button:hover,
a.sb-btn:hover,
button.sb-btn:hover {
  transform: translate(-2px,-2px) !important;
  box-shadow: var(--sb-shadow-sticker-lg) !important;
}
.sb-btn .elementor-button:active,
a.sb-btn:active,
button.sb-btn:active {
  transform: translate(3px,3px) !important;
  box-shadow: 2px 2px 0 var(--sb-ink) !important;
}

/* Color variants */
.sb-btn--orange .elementor-button,
a.sb-btn--orange,
button.sb-btn--orange { background: var(--sb-orange) !important; color: var(--sb-ink) !important; }

.sb-btn--blue .elementor-button,
a.sb-btn--blue,
button.sb-btn--blue   { background: var(--sb-blue) !important; color: var(--sb-ink) !important; }

.sb-btn--pink .elementor-button,
a.sb-btn--pink,
button.sb-btn--pink   { background: var(--sb-pink) !important; color: #FFFFFF !important; }

.sb-btn--ghost .elementor-button,
a.sb-btn--ghost,
button.sb-btn--ghost  { background: #FFFFFF !important; color: var(--sb-ink) !important; }

.sb-btn--yellow .elementor-button,
a.sb-btn--yellow,
button.sb-btn--yellow { background: var(--sb-yellow) !important; color: var(--sb-ink) !important; }

/* Sizes */
.sb-btn--lg .elementor-button,
a.sb-btn--lg,
button.sb-btn--lg { padding: 18px 32px !important; font-size: 18px !important; }
.sb-btn--sm .elementor-button,
a.sb-btn--sm,
button.sb-btn--sm { padding: 10px 18px !important; font-size: 13px !important; }

/* ==========================================================================
   Cards
   ========================================================================== */
.sb-card {
  background: var(--sb-night);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.sb-card--featured {
  background: var(--sb-slate);
  border: 2px solid var(--sb-pink);
  border-radius: 12px;
  box-shadow: var(--sb-shadow-sticker);
  padding: 28px;
  position: relative;
}

/* Elementor container variants (apply to Flexbox Container widget) */
.e-con.sb-card,
.elementor-widget-wrap.sb-card {
  background-color: var(--sb-night) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 24px !important;
}
.e-con.sb-card--featured {
  background-color: var(--sb-slate) !important;
  border: 2px solid var(--sb-pink) !important;
  border-radius: 12px !important;
  box-shadow: var(--sb-shadow-sticker) !important;
  padding: 28px !important;
}

/* ==========================================================================
   Caution tape divider
   Drop on a Section: height 10–14px, no content, add class .sb-tape
   ========================================================================== */
.sb-tape {
  height: 14px;
  width: 100%;
  background: var(--sb-tape);
}
.sb-tape--thin { height: 10px; }

/* ==========================================================================
   Halftone overlay
   ========================================================================== */
.sb-halftone {
  background-image: var(--sb-halftone);
  background-size: 6px 6px;
}

/* ==========================================================================
   FAQ — apply class .sb-faq to the Elementor Accordion widget
   ========================================================================== */
.sb-faq .elementor-accordion-item {
  background: var(--sb-night);
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.sb-faq .elementor-tab-title {
  font-family: var(--sb-font-ui);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sb-paper) !important;
  background: transparent !important;
  padding: 18px 22px !important;
  border: none !important;
}
.sb-faq .elementor-tab-content {
  color: var(--sb-fg-2) !important;
  font-size: 16px;
  line-height: 1.55;
  padding: 0 22px 20px !important;
  border: none !important;
  background: transparent !important;
}
.sb-faq .elementor-accordion-icon,
.sb-faq .elementor-accordion-icon * {
  color: var(--sb-orange) !important;
  fill: var(--sb-orange) !important;
  font-size: 28px;
  transition: transform 200ms;
}
.sb-faq .elementor-active .elementor-accordion-icon {
  transform: rotate(45deg);
}

/* ==========================================================================
   Form fields (Elementor Pro Forms + generic inputs)
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], textarea, select,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  font-family: var(--sb-font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--sb-paper);
  background: var(--sb-night);
  border: 1px solid var(--sb-steel);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color var(--sb-dur) var(--sb-ease-snap),
              box-shadow var(--sb-dur) var(--sb-ease-snap);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--sb-orange);
  border-width: 2px;
  padding: 11px 13px; /* compensate for border growth */
}
::placeholder { color: var(--sb-fg-3); opacity: 1; }

label, .elementor-field-label {
  font-family: var(--sb-font-ui) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--sb-fg-2) !important;
  margin-bottom: 6px !important;
  display: block;
}

/* ==========================================================================
   Nav (works with Hello theme default menu + Elementor Nav Menu widget)
   ========================================================================== */
.site-header, header.site-header {
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header a, .site-header .menu-item a {
  font-family: var(--sb-font-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-paper);
  text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--sb-ink);
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--sb-fg-2);
}

/* Don't let the theme header overlay the Elementor editor */
body.elementor-editor-active .site-header,
body.elementor-editor-preview .site-header {
  display: none !important;
}

/* ==========================================================================
  Text Color classses
   ========================================================================== */
/* Text color utility classes */
.text-white {
  color: #FFFFFF;
}

.text-orange {
  color: var(--sb-orange);
}

.text-blue {
  color: var(--sb-blue);
}

.text-pink {
  color: var(--sb-pink);
}