/* ============================================================
   Circus Extreme — Global layer
   ------------------------------------------------------------
   Design tokens, page shell, base typography, the containment
   barrier and the scroll-reveal system.

   Loaded ONLY on pages using the "Blocks" page template (see
   ce_is_block_context() in app/Theme/blocks.php). Legacy pages
   keep the old app.scss bundle instead.

   RULES
   - Every colour lives here as a custom property. No block ever
     hardcodes a hex — a rebrand must be a one-file change, and a
     per-site override is a :root block in the child theme's
     child.css.
   - The --*-rgb companions exist so blocks can build tints with
     rgba(var(--circus-pink-rgb), .12). Keep them in sync with
     their hex counterparts.
   - url() paths are ABSOLUTE. Block CSS is served by readfile()
     from /adz-blocks-css/, where relative paths resolve against
     the wrong base, so absolute is the house style everywhere.
   ============================================================ */

:root {
  /* ── Layout ─────────────────────────────────────────────── */
  --header-height: 86px;
  --container-max: 1320px;
  --container-pad: 20px;
  --module-padding: 100px;

  /* ── Brand palette ──────────────────────────────────────── */
  --circus-pink:   #DF2FA3;
  --circus-yellow: #F8CD34;
  --circus-purple: #640873;
  --circus-green:  #34AF73;
  --circus-orange: #E0531E;

  /* rgb companions — for rgba() tints and shadows */
  --circus-pink-rgb:   223, 47, 163;
  --circus-yellow-rgb: 248, 205, 52;
  --circus-purple-rgb: 100, 8, 115;
  --circus-green-rgb:  52, 175, 115;
  --circus-orange-rgb: 224, 83, 30;

  --circus-card-bg: rgba(60, 26, 71, 0.6);

  /* ── Semantic aliases ───────────────────────────────────── */
  --theme-color:     var(--circus-purple);
  --theme-color2:    var(--circus-pink);
  --theme-bg-light:  #F6F6F6;
  --color-dark:      #20232A;
  --color-gray:      #F6F6F6;
  --color-white:     #FFFFFF;
  --body-text-color: #757F95;

  /* ── Page background ────────────────────────────────────── */
  --page-bg:         rgb(25, 21, 47);
  --page-bg-mid:     rgb(29, 27, 73);
  --hero-overlay:    rgb(5, 3, 17);
  --slider-arrow-bg: rgba(140, 82, 255, 0.2);

  /* ── Typography ─────────────────────────────────────────── */
  --body-font:     "League Spartan", sans-serif;
  --heading-font:  "League Spartan", sans-serif;
  --heading-font2: "League Spartan", sans-serif;
  --heading-font3: "Rubik Distressed", system-ui, sans-serif;

  /* ── Borders / shadows ──────────────────────────────────── */
  --box-shadow:  0 0 40px 5px rgb(0 0 0 / 5%);
  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);
  --border-info-color:   rgba(0, 0, 0, 0.08);
  --border-info-color2:  rgba(0, 0, 0, 0.05);
  --border-white-color:  rgba(255, 255, 255, 0.08);
  --border-white-color2: rgba(255, 255, 255, 0.05);

  /* ── Motion ─────────────────────────────────────────────── */
  --transition:  all .5s ease-in-out;
  --transition2: all .3s ease-in-out;

  /* ── Footer ─────────────────────────────────────────────── */
  --footer-bg:         #0B0917;
  --footer-text-color: #F5FAFF;

  /* ── Vertical rhythm ────────────────────────────────────── */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --section-y: clamp(56px, 8vw, 100px);
}

/* ============================================================
   1. Page shell
   ------------------------------------------------------------
   The legacy stylesheet owns body / body::before / body::after
   on every non-block page, so the block layout paints its own
   background on a dedicated wrapper instead of fighting for
   those pseudo-elements.
   ============================================================ */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body.ce-body {
  margin: 0;
  overflow-x: hidden;
  color: var(--color-white);
  font-family: var(--body-font);
  font-weight: 300;
  line-height: 1.5;
  background: var(--page-bg);
}

.ce-page {
  position: relative;
  z-index: 3;
  background-image: url('/wp-content/themes/circus-extreme/resources/images/extreme-background.webp');
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.ce-page::before,
.ce-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ce-page::before {
  background: linear-gradient(
    90deg,
    var(--page-bg) 0%,
    var(--page-bg-mid) 50%,
    var(--page-bg) 100%
  );
  opacity: .85;
}

.ce-page::after {
  background-image: url('/wp-content/themes/circus-extreme/resources/images/sparkles.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  opacity: .2;
}

.ce-page > * {
  position: relative;
  z-index: 10;
}

/* The header overlaps the first section on desktop. */
.ce-main {
  position: relative;
  z-index: 10;
}

@media (min-width: 960px) {
  .ce-main {
    margin-top: calc(var(--header-height) * -1);
  }
}

/* ============================================================
   2. Containment barrier
   ------------------------------------------------------------
   .ce-scope wraps all block output. These rules neutralise bare
   element styling so a block's own CSS is the only thing that
   decides how it looks.

   Specificity is deliberate: `.ce-scope :where(p)` is (0,1,0),
   which beats a bare `p` (0,0,1), while :where() keeps the inner
   selector at zero so any single block class overrides it with
   no specificity war.
   ============================================================ */

.ce-scope :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, figure, blockquote, table, fieldset) {
  margin: 0;
  padding: 0;
}

.ce-scope :where(ul, ol) {
  list-style: none;
}

.ce-scope :where(a) {
  color: inherit;
  text-decoration: none;
}

.ce-scope :where(img, video, svg, iframe) {
  display: block;
  max-width: 100%;
  height: auto;
}

.ce-scope :where(section:first-of-type) {
  margin-top: 0;
}

.ce-scope :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ============================================================
   3. Base typography
   ------------------------------------------------------------
   Deliberately minimal. Blocks set their own sizes; these are
   the fallbacks for rich-text (wysiwyg) output where the editor
   controls the markup.
   ============================================================ */

.ce-scope {
  font-family: var(--body-font);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-white);
}

.ce-h1,
.ce-h2,
.ce-h3 {
  font-family: var(--heading-font3);
  color: var(--circus-yellow);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
}

.ce-h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
.ce-h2 { font-size: clamp(2rem,    4.5vw, 3.125rem); }
.ce-h3 { font-size: clamp(1.5rem,  3vw,   2rem); }

.ce-tagline {
  color: var(--circus-yellow);
  font-family: var(--body-font);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.1;
  font-weight: 400;
}

/* Rich text emitted by the wysiwyg editor. */
.ce-rich > * + * {
  margin-top: var(--space-sm);
}

.ce-rich p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
}

.ce-rich > p:first-of-type {
  font-size: 1.333rem;
  line-height: 1.25;
}

.ce-rich h2,
.ce-rich h3,
.ce-rich h4,
.ce-rich h5,
.ce-rich h6 {
  color: var(--circus-yellow);
  font-family: var(--heading-font);
  line-height: 1.15;
}

.ce-rich a {
  color: var(--circus-yellow);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.ce-rich a:hover,
.ce-rich a:focus-visible {
  color: var(--circus-pink);
}

.ce-rich ul,
.ce-rich ol {
  padding-left: 1.25em;
}

.ce-rich ul { list-style: disc; }
.ce-rich ol { list-style: decimal; }

.ce-rich li + li {
  margin-top: var(--space-2xs);
}

.ce-rich strong { font-weight: 600; }

/* Visually hidden, still read by assistive tech. */
.ce-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   4. Scroll reveals
   ------------------------------------------------------------
   Driven by resources/js/animations.js, which adds .is-visible
   as elements enter the viewport. This replaces WOW.js and the
   hardcoded inline animation styles the old modules carried.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: .00s; }
.reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: .06s; }
.reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: .18s; }
.reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: .24s; }
.reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: .30s; }
.reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: .36s; }
.reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: .42s; }
.reveal-stagger.is-visible > *:nth-child(9)  { transition-delay: .48s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: .54s; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: .60s; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: .66s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   5. Shared keyframes
   ============================================================ */

@keyframes ce-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--circus-pink-rgb), .7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 20px rgba(var(--circus-pink-rgb), 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--circus-pink-rgb), 0);
  }
}

@keyframes ce-twinkle {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ce-page::after {
    animation: none;
  }
}