/* main.css — tokens (§1), base + type scale (§5.0), utilities (§5.1), buttons (§5.2), arrow link (§5.3),
   gradient text (§5.4), gradient panel (§5.5), cards (§5.6), page-title (§5.7), celebration (§5.8),
   forms (§5.9), photos/rules (§5.10), skip link + focus (§7).
   No @media in this file: every shared breakpoint / motion override lives in responsive.css. */

/* ---------- §1 design tokens ---------- */
:root {
  /* brand */
  --c-teal: #26d7bb;          /* gradient start; footer link hover */
  --c-teal-hover: #27beb5;    /* header nav link + social icon hover (wp-custom-css) */
  --c-indigo: #363795;        /* gradient end */
  --c-black: #000000;         /* header/footer background, body text */
  --c-white: #ffffff;
  /* surfaces */
  --c-bg: #f1f1f1;            /* page background (Zeyna --mainBackground; measured on every page) */
  --c-bg-band: #f7f7f7;       /* page-title band + first band under the header (measured #f7f7f7) */
  --c-card-bg: transparent;   /* ticket / founder cards sit on --c-bg and are outlined by shadow only */
  --c-form-bg-a: #ffffff;     /* form card gradient start */
  --c-form-bg-b: #f7f8fc;     /* form card gradient end */
  /* text */
  --c-text: #000000;
  --c-text-inverse: #ffffff;
  --c-text-muted: #7a7a7a;    /* Elementor kit "text" colour; only if a page spec asks for grey */
  --c-placeholder: #a0a6b8;
  --c-danger: #c02b0a;        /* "(Required)" marker, field errors (booking's #ff4d4f is folded into this) */
  /* borders */
  --c-rule: #000000;          /* 1px horizontal rules (About) */
  --c-input-border: #e2e6f0;
  --c-focus: #6c63ff;         /* input focus border */
  --c-marker: rgba(134,134,134,.48); /* list bullets #8686867a */
  /* gradients */
  --grad-v: linear-gradient(180deg, #26d7bb 0%, #363795 100%);   /* buttons, gradient text (top teal → bottom indigo) */
  --grad-v-hover: linear-gradient(180deg, #26d7bb 0%, #363795 57%);
  --grad-h: linear-gradient(90deg, #26d7bb 0%, #363795 100%);    /* gradient panels (Event / Collaborators) */
  --grad-menu: linear-gradient(99deg, #2e3593 40%, #0fb6e1 100%); /* mobile menu overlay (post-92) */
  --grad-form-card: linear-gradient(135deg, #ffffff, #f7f8fc);
  /* shadows */
  --shadow-card: 0 0 10px 0 rgba(0,0,0,.5);            /* ticket + founder cards (measured) */
  --shadow-form-card: 0 20px 50px rgba(0,0,0,.08);
  --shadow-btn-hover: 0 8px 20px rgba(54,55,149,.28);  /* soft indigo lift on pill hover (site-wide enhancement) */
  --shadow-submit: 0 10px 25px rgba(59,109,246,.35), inset 0 1px 0 rgba(255,255,255,.25); /* form submit (measured) */
  --shadow-header: 0 2px 10px rgba(0,0,0,.4);          /* sticky header once scrolled (enhancement) */
  --focus-ring: 0 0 0 4px rgba(108,99,255,.15);
  /* radii */
  --r-pill: 30px;      /* buttons (Elementor 30px 30px 30px 30px) */
  --r-pill-full: 999px;/* form submit */
  --r-input: 14px;
  --r-card: 0;         /* ticket cards are square */
  --r-card-round: 15px;/* Jill / Lindy cards */
  --r-form-card: 20px;
  --r-photo: 10px;     /* rounded photos (About, Spectators) */
  --r-menu: 0 0 10px 10px;
  /* layout */
  --container-max: 1440px;   /* Elementor kit --container-max-width */
  --container-pad: 20px;     /* 30px at ≤1366, 20px at ≤767 (responsive.css) */
  --header-h: 114px;         /* 20 + 74 (265px logo @ 2560×717) + 20 ; 85px ≤1024 ; 82px ≤880 */
  --widget-gap: 20px;        /* Elementor --widgets-spacing: vertical gap between stacked widgets */
  --space-section: 80px;     /* section vertical padding (Event/Collab panels) → 40 ≤1366, 20 ≤880, 30 ≤767 */
  --space-section-gap: 50px; /* margin between stacked full-bleed sections → 40 ≤1024, 30 ≤767 */
  /* type */
  --font-sans: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-serif: "David Libre", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-form: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;   /* original Gravity Forms controls render in the system sans */
  --lh-body: 1.6;
  --lh-heading: 1.3;
  --lh-display: 1.1;
  /* motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .3s;
  --z-header: 999;   /* wp-custom-css .sticky-header z-index 999 */
  --z-menu: 998;    /* below --z-header: the header (logo, Contact Us, the hamburger turned X) stays visible over the panel */
}

/* ---------- §5.0 base + type scale ---------- */
body{background:var(--c-bg);color:var(--c-text);font:300 18px/var(--lh-body) var(--font-sans);overflow-x:hidden}
body.nav-open{overflow:hidden}
main{display:block}
p,ul,ol{margin:0 0 1em;padding:0}
ul,ol{list-style:none}
ul.bullets{list-style:disc inside}
::marker{color:var(--c-marker);font-size:.85em}
b,strong{font-weight:bolder}   /* theme behaviour: 300 body → 400, 400 → 700 */
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:600;color:inherit}   /* Elementor kit: headings 600 (variable font covers it) */
h1,.t-display{font-size:60px;line-height:var(--lh-display);letter-spacing:-.05em}
h2,.t-section{font-size:34px;line-height:var(--lh-heading);letter-spacing:-.02em}
h3,.t-card{font-size:34px;line-height:var(--lh-heading);letter-spacing:-.02em}
h4{font-size:18px;line-height:var(--lh-body)}
.t-cta{font-size:60px;line-height:1;letter-spacing:-.04em}
.t-panel{font-size:34px;line-height:var(--lh-heading);letter-spacing:-.02em}
.t-tagline{font:italic 700 60px/77px var(--font-serif);letter-spacing:-.04em}
.text-lg{font-size:20px} .text-intro{font-size:22px;line-height:1.4} .text-cta{font-size:19px;line-height:1.4;font-weight:400}
.text-sm{font-size:16px;font-weight:400} .text-xs{font-size:12px;font-weight:400}
.no-margin{margin:0 !important}
.text-center{text-align:center}
.inverse{color:var(--c-text-inverse)}

/* ---------- §5.1 layout utilities ---------- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.container--flush{padding-inline:0}
.section{padding-block:var(--space-section)}          /* full-bleed feature section */
.section + .section{margin-top:0}
.stack > * + *{margin-top:var(--widget-gap) !important}   /* Elementor widget spacing (20px) between stacked blocks; !important so a
                                                            .no-margin child (its own margin:0 !important) still gets the gap */
.row{display:flex;gap:40px;align-items:stretch}       /* two-column rows; ≤767 → column (responsive.css) */
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}   /* honeypot wrapper */

/* ---------- §5.2 primary pill button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:12px 30px;border:0;
  border-radius:var(--r-pill);font:700 16px/1 var(--font-sans);text-transform:capitalize;text-decoration:none;
  color:var(--c-white);background-color:transparent;cursor:pointer;white-space:nowrap;text-align:center;
  transition:box-shadow var(--dur) ease, transform var(--dur) ease, opacity var(--dur) ease}
.btn-primary{background-image:var(--grad-v)}
.btn-primary:hover,.btn-primary:focus-visible{color:var(--c-white);background-image:var(--grad-v-hover);
  box-shadow:var(--shadow-btn-hover);transform:translateY(-1px)}
.btn-primary:active{transform:none;box-shadow:none}
.btn-disabled,.btn[aria-disabled="true"]{cursor:default;pointer-events:none}   /* DECISIONS 3: same look as a live pill, not dimmed */
.btn-disabled:hover{background-image:var(--grad-v);box-shadow:none;transform:none}
.btn-submit{padding:14px 42px;border-radius:var(--r-pill-full);box-shadow:var(--shadow-submit)}   /* form submit, 129×44 */
.btn-submit:hover,.btn-submit:focus-visible{box-shadow:var(--shadow-submit), var(--shadow-btn-hover)}

/* ---------- §5.3 arrow link ---------- */
.arrow-link{display:inline-flex;align-items:center;gap:.25em;font:400 18px/1.4 var(--font-sans);color:inherit;
  transition:color var(--dur) ease}
.arrow-link svg{width:1em;height:1em;fill:currentColor;flex:0 0 auto;transition:transform var(--dur) ease}
.arrow-link:hover,.arrow-link:focus-visible{color:var(--c-teal)}
.arrow-link:hover svg{transform:translateX(4px)}     /* original "slide-right" icon hover */

/* ---------- §5.4 gradient text ---------- */
.grad-text{display:inline-block;background-image:var(--grad-v);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* ---------- §5.5 gradient panel ---------- */
.grad-panel{position:relative;background:var(--grad-h);color:var(--c-text-inverse);min-height:0}
.grad-panel h2,.grad-panel h3{color:inherit}
.grad-panel p{color:inherit}
.grad-panel a{color:inherit;font-weight:700}

/* ---------- §5.6 cards ---------- */
.card{display:flex;flex-direction:column;padding:30px;background:var(--c-card-bg);border-radius:var(--r-card);
  box-shadow:var(--shadow-card)}
.card--rounded{border-radius:var(--r-card-round)}
.card--white{background:var(--c-white)}
.card__title{margin:0;font-size:34px;line-height:var(--lh-heading);letter-spacing:-.02em;font-weight:600}
.card__body{padding-top:20px}
.card__body p,.card__body ul{margin:0 0 1em}          /* measured 18px between blocks on the About/Spectators cards; the last
                                                         block keeps its margin before the 20px button spacer (no :last-child reset) */
.card__body strong{font-weight:400}                    /* theme `bolder` of the 300 body copy resolves to 400, not 700 */
.card .btn{align-self:flex-start;margin-top:20px}
.card__rule{border:0;border-top:1px solid var(--c-rule);margin:15px 0}

/* ---------- §5.7 page-title band ---------- */
.page-title{background:var(--c-bg-band);padding:40px 10px;text-align:center}
.page-title h1{margin:0}
.page-title > .container > * + *{margin-top:var(--widget-gap)}

/* ---------- §5.8 celebration (full-bleed photo + overlay + white text) ---------- */
.celebration{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:20px 20px 30px;color:var(--c-text-inverse);background:var(--c-black)}
/* The photo is a layer, not a background, so site.js can shift it as the section
   crosses the viewport — the original's 25% parallax (see §5.8). The section is
   min-height:100vh (measured on the live site at viewport heights 600-1307), so
   the photo is always at least as tall as the viewport and a 25% shift can never
   uncover the visible part of the section. */
.celebration__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:-2;pointer-events:none;user-select:none}
.celebration::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:-1}
.celebration__inner{padding:20px}
.celebration h2{margin:0 0 60px}                       /* h2 → 20 gap → 20 spacer → 20 gap → p  (Event: 90 on desktop, page override) */
.celebration p{max-width:650px;margin:0 0 38px}         /* 1em (19px) + 20px widget gap */
.celebration .btn{align-self:flex-start}

/* ---------- §5.9 form controls ---------- */
.form-card{width:100%;padding:40px;background:var(--grad-form-card);border-radius:var(--r-form-card);box-shadow:var(--shadow-form-card)}
.form-fields{display:flex;flex-direction:column;gap:18px}
.form-label{display:block;margin-bottom:8px;font:500 16px/1.5 var(--font-form);color:var(--c-text)}
.form-required{margin-left:6px;font-size:13px;font-weight:500;color:var(--c-danger)}   /* measured 500 on the original forms */
.form-input,.form-textarea{display:block;width:100%;padding:9px 18px;font:400 15px/18px var(--font-form);color:#112337;   /* control text colour measured on the original forms */
  background:var(--c-white);border:1px solid var(--c-input-border);border-radius:var(--r-input);
  box-shadow:0 1px 4px rgba(18,25,97,.08);                    /* faint resting shadow, as measured on the original controls */
  transition:border-color .25s ease, box-shadow .25s ease}
.form-textarea{min-height:130px;line-height:1.5;resize:vertical}
.form-input::placeholder,.form-textarea::placeholder{color:var(--c-placeholder);opacity:1}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--c-focus);box-shadow:var(--focus-ring)}
.form-input.is-invalid,.form-textarea.is-invalid{border-color:var(--c-danger)}
.form-input.is-invalid:focus,.form-textarea.is-invalid:focus{box-shadow:0 0 0 4px rgba(192,43,10,.15)}
.form-error{margin:6px 0 0;font:400 13px/1.4 var(--font-form);color:var(--c-danger)}
.form-summary{margin:0 0 18px;font:500 16px/1.5 var(--font-form);color:var(--c-danger)}
.form-actions{margin-top:24px}
.form-success p{margin:0;font:400 18px/1.6 var(--font-sans);color:var(--c-text)}
.form-success p + p{margin-top:1em}

/* ---------- §5.10 photos and rules ---------- */
.photo{border-radius:var(--r-photo);width:100%;height:auto}    /* rounded photos on About/Spectators (10px) */
.rule{border:0;border-top:1px solid var(--c-rule);margin:15px 0}

/* ---------- §7 skip link + focus ---------- */
.skip-link{position:absolute;left:-10000px;top:8px;z-index:1000;padding:10px 16px;background:var(--c-white);color:var(--c-black);
  font:700 16px/1 var(--font-sans);border-radius:var(--r-pill)}
.skip-link:focus{left:8px;outline:3px solid var(--c-teal)}
:focus-visible{outline:3px solid var(--c-teal);outline-offset:3px}
.btn:focus-visible{outline:3px solid var(--c-indigo);outline-offset:3px}
main:focus{outline:none}