/* ============================================================
   OUT OUT FEST — SITE-WIDE DESIGN SYSTEM (2026-08-23 redesign)
   Lives in Customizer > Additional CSS so every page shares ONE
   copy instead of duplicating <style> blocks per page (the old
   "drift" problem — footers/colours going out of sync).
   ============================================================ */

/* Colours re-picked 2026-08-23 to match the actual OUT OUT FEST logo artwork — sampled directly
   from the PNG (pixel-frequency analysis by hue family) rather than eyeballed. The logo is ~40%
   magenta/pink, ~29% cyan, ~7% deep violet-purple; these three variables carry that through the
   whole site via the single --oo-gradient below. */
:root {
  --oo-pink: #FF2FEA;
  --oo-pink-light: #FF7DF2;
  --oo-cyan: #00F0F8;
  --oo-purple: #8B14D1;
  --oo-bg: #14141f;
  --oo-card: #1c1c2b;
  --oo-card-2: #24243a;
  --oo-border: rgba(255,255,255,0.12);
  --oo-text: #ffffff;
  --oo-text-dim: #b4b4c6;
  --oo-gradient: linear-gradient(135deg, var(--oo-pink) 0%, var(--oo-purple) 55%, var(--oo-cyan) 100%);
}

/* Astra chrome: keep the theme's header/footer out of the way of our full-bleed pages,
   dark background so there's never a white flash above/below on tall screens.
   IMPORTANT: only the CONTENT area goes full-bleed — #masthead's own .ast-container must keep
   its normal contained width/padding, otherwise the logo and nav button sit flush against the
   browser edges (this was a real bug, fixed by scoping these selectors to #content/.site-content
   instead of a bare .ast-container that also matched the header). */
#masthead { background: var(--oo-bg) !important; border-bottom: 1px solid var(--oo-border) !important; }
#masthead .ast-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 1.5rem !important; }
body, #content, .site-content,
#content .ast-container, .site-content .ast-container,
.entry-content, #page, .site {
  background: var(--oo-bg) !important;
  margin: 0 !important; padding: 0 !important; max-width: 100% !important;
}
#content .ast-container, .site-content .ast-container { margin: 0 !important; }
.entry-header { display: none !important; }
/* Astra reserves margin-top on #primary for pages with a visible title bar. Pages built with the
   "Full Width" page template have this margin already zeroed by Astra itself, but any page created
   without that template attribute (e.g. via the REST API rather than wp-admin's page editor) falls
   back to Astra's default and gets an unwanted gap under the header. Zero it everywhere so this
   can't recur regardless of how a page was created. */
#primary.content-area { margin-top: 0 !important; }
#colophon, .site-footer { display: none !important; } /* theme renders one real .oo-footer via wp_footer instead */

.oo * { box-sizing: border-box; }
.oo { font-family: 'Poppins', Arial, Helvetica, sans-serif; color: var(--oo-text); background: var(--oo-bg); }
.oo h1, .oo h2, .oo h3, .oo h4 { font-family: 'Poppins', Arial, sans-serif; font-weight: 800; letter-spacing: 0.5px; margin: 0 0 0.6em; color: #fff !important; }
.oo p { color: var(--oo-text-dim) !important; line-height: 1.7; margin: 0 0 1em; }

/* Ninja Forms' default label colour (a dark slate grey) is meant for light-page sites — on this
   site's dark cards it's nearly unreadable (dark text on dark background). Inputs themselves are
   already white with dark text so they're fine; only the labels need fixing. */
.oo .nf-field-label label, .oo .nf-field-label { color: #fff !important; }
.oo .ninja-forms-req-symbol { color: var(--oo-pink-light) !important; }
.oo a { color: var(--oo-pink-light); text-decoration: none; }

.oo-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.oo-section { padding: 4.5rem 0; position: relative; }
.oo-section.tight { padding: 3rem 0; }
.oo-section.alt { background: var(--oo-card); }

/* Hero */
.oo-hero {
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6rem 1.5rem 4rem;
  position: relative; overflow: hidden;
  background: var(--oo-gradient);
}
.oo-hero::before { content: ''; position: absolute; inset: 0; background: rgba(10,8,20,0.55); }
.oo-hero-inner { position: relative; z-index: 2; max-width: 780px; }
.oo-eyebrow {
  display: inline-block; padding: 0.4rem 1.1rem; border-radius: 50px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: #fff !important; margin-bottom: 1.5rem;
}
.oo-hero h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1rem;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.oo-hero p.lede { color: #f1f0ff !important; font-size: 1.15rem; max-width: 620px; margin: 0 auto 2rem; }

/* Buttons */
.oo-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 2.2rem; border-radius: 50px;
  background: var(--oo-pink); color: #fff !important;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.92rem;
  border: 2px solid var(--oo-pink);
  transition: transform 0.2s ease, background 0.2s ease;
}
.oo-btn:hover { transform: translateY(-2px); background: #ff3aa5; }
.oo-btn.outline { background: transparent; border-color: rgba(255,255,255,0.5); }
.oo-btn.outline:hover { background: rgba(255,255,255,0.12); }
.oo-btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Section headers */
.oo-kicker { color: var(--oo-cyan) !important; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 0.6rem; display: block; }
.oo-section-title { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 0.75rem; }
.oo-section-lede { color: var(--oo-text-dim) !important; max-width: 640px; font-size: 1.05rem; }
.oo-section-head { text-align: center; margin-bottom: 3rem; }
.oo-section-head .oo-section-lede { margin: 0 auto; }

/* Cards / grids */
.oo-grid { display: grid; gap: 1.5rem; }
.oo-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.oo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.oo-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .oo-grid.cols-3, .oo-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .oo-grid.cols-2, .oo-grid.cols-3, .oo-grid.cols-4 { grid-template-columns: 1fr; } }

.oo-card {
  background: var(--oo-card); border: 1px solid var(--oo-border); border-radius: 18px;
  padding: 2rem 1.75rem; transition: transform 0.25s ease, border-color 0.25s ease;
}
.oo-card:hover { transform: translateY(-4px); border-color: rgba(255,47,234,0.4); }
.icon svg {
  width: 30px; height: 30px; display: block; color: var(--oo-pink-light);
  padding: 8px; box-sizing: content-box; border-radius: 10px; background: rgba(255,47,234,0.12);
}
.oo-card .icon { display: inline-block; margin-bottom: 1rem; }
.oo-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.oo-card p { margin: 0; font-size: 0.95rem; }

.oo-panel {
  background: var(--oo-card); border: 1px solid var(--oo-border); border-radius: 22px;
  padding: 2.5rem;
}

/* Split section (image/text) */
.oo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .oo-split { grid-template-columns: 1fr; } }
.oo-split img { width: 100%; border-radius: 20px; display: block; border: 1px solid var(--oo-border); }
.oo-split.reverse { direction: rtl; } .oo-split.reverse > * { direction: ltr; }

/* Badges */
.oo-badge { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 50px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.oo-badge.pink { background: rgba(255,47,234,0.18); color: var(--oo-pink-light) !important; }
.oo-badge.cyan { background: rgba(0,240,248,0.15); color: #7CFCFC !important; }
.oo-badge.grey { background: rgba(255,255,255,0.1); color: var(--oo-text-dim) !important; }

/* Accordion (FAQs) */
.oo-accordion details {
  background: var(--oo-card); border: 1px solid var(--oo-border); border-radius: 14px;
  padding: 1.25rem 1.5rem; margin-bottom: 0.85rem;
}
.oo-accordion summary { cursor: pointer; font-weight: 700; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.oo-accordion summary::-webkit-details-marker { display: none; }
.oo-accordion summary::after { content: '+'; font-size: 1.4rem; color: var(--oo-pink-light); margin-left: 1rem; }
.oo-accordion details[open] summary::after { content: '–'; }
.oo-accordion p { margin-top: 1rem; margin-bottom: 0; }

/* Footer */
.oo-footer { background: #0d0d15; border-top: 1px solid var(--oo-border); padding: 4rem 0 2rem; }
.oo-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (max-width: 780px) { .oo-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .oo-footer-grid { grid-template-columns: 1fr; } }
.oo-footer h4 { color: #fff !important; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; }
.oo-footer ul { list-style: none; margin: 0; padding: 0; }
.oo-footer li { margin-bottom: 0.6rem; }
.oo-footer a { color: var(--oo-text-dim) !important; font-size: 0.92rem; }
.oo-footer a:hover { color: var(--oo-pink-light) !important; }
.oo-footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.oo-footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08);
  border: 1px solid var(--oo-border); display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800;
}
.oo-footer-social a:hover { background: var(--oo-pink); }
.oo-footer-bottom { border-top: 1px solid var(--oo-border); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: var(--oo-text-dim); }
.oo-footer-bottom a { color: var(--oo-text-dim) !important; }

/* Nav CTA button injected into Astra's header builder. Astra core paints its own default button
   color (an older, deeper pink) on the INNER .ast-custom-button div — our override below only ever
   touched the outer .ast-custom-button-link anchor, so most of the time the inner div's padding
   filled the anchor completely and hid the mismatch. At the mobile breakpoint the anchor's own
   padding shrinks but the inner div's Astra-default padding doesn't shrink to match, exposing a
   ring of the anchor's (correct) colour around the inner div's (stale) one — looking like two
   different pinks. Fix: force the inner div to the same colour too, and make it fill the anchor
   so no padding mismatch can ever show a seam. */
#masthead .ast-builder-button-wrap .ast-custom-button-link {
  background: var(--oo-pink) !important; border-color: var(--oo-pink) !important;
  border-radius: 50px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}
#masthead .ast-builder-button-wrap .ast-custom-button-link .ast-custom-button {
  background: var(--oo-pink) !important; width: 100%; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
  #masthead .ast-builder-button-wrap .ast-custom-button-link {
    padding: 0.55rem 1rem !important; font-size: 0.78rem !important; letter-spacing: 0.2px;
  }
  #masthead .ast-builder-button-wrap .ast-custom-button-link .ast-custom-button { white-space: nowrap; }
}