/* ==========================================================================
   Tripletail Crown — WordPress theme styles
   Rebuilt from the Squarespace 7.1 site. The layout engine below mirrors
   Squarespace's "fluid engine": a 24-column grid on desktop and an 8-column
   grid on mobile, 11px gaps, with each block placed by grid-area.
   ========================================================================== */

:root {
  --bg: #e9e9f3;             /* site background (lavender) */
  --text: #000;
  --navy: #243b68;           /* primary button / link colour */
  --white: #fff;

  --font-head: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body: "Figtree", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --site-gutter: 4vw;        /* desktop side gutter */
  --mobile-gutter: 6vw;      /* mobile side gutter */
  --site-max: 1800px;        /* max content width */
  --gap: 11px;

  /* fluid type: values measured at 500px (mobile) and 1400px (desktop) */
  --p:        clamp(18.16px, 17.49px + 0.1333vw, 19.36px);
  --p-large:  clamp(21.4px,  19.73px + 0.3333vw, 24.4px);
  --p-small:  clamp(15px,    14.44px + 0.1111vw, 16px);
  --h1:       clamp(32px,    27.72px + 0.8556vw, 39.7px);
  --h2:       clamp(59.2px,  45.87px + 2.6667vw, 83.2px);
  --h3:       clamp(31px,    28.13px + 0.5733vw, 36.16px);
  --h4:       clamp(22.48px, 20.48px + 0.4vw,    26.08px);
  --nav:      19.36px;

  --header-h: 163px;         /* mobile header height (36.5 + 90 + 36.5) */
  --logo-h: 90px;
}
@media (min-width: 768px) {
  :root {
    --header-h: calc(150px + 4vw); /* 2vw padding top + 150px logo + 2vw */
    --logo-h: 150px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--p);
  line-height: 1.8;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
u, .u { text-decoration: underline; text-underline-offset: 0.12em; }

/* --- rich text (mirrors Squarespace's .sqs-html-content) ------------------ */
.rte > :first-child { margin-top: 0; }
.rte > :last-child  { margin-bottom: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  margin: 2rem 0;
  overflow-wrap: break-word;
}
h1 { font-size: var(--h1); line-height: 1; }
h2 { font-size: var(--h2); line-height: 1.176; }
h3 { font-size: var(--h3); line-height: 1.333; }
h4 { font-size: var(--h4); line-height: 1.366; }
h1.h1--small { font-size: clamp(22px, 19.67px + 0.4667vw, 26.2px); }
p { margin: 1rem 0; }
p.sqsrte-large, .sqsrte-large { font-size: var(--p-large); }
p.sqsrte-small, .sqsrte-small { font-size: var(--p-small); }
ul, ol { margin: 1em 0; padding-left: 40px; }
.rte p, .rte h1, .rte h2, .rte h3, .rte h4, .rte li { white-space: pre-wrap; }
.indent { margin-left: 40px; }
li { margin: 0; }
li > p { margin: 0.5em 0; }
hr { border: 0; height: 1px; background: #000; margin: 0.5em 0; }
strong, b { font-weight: 700; }
.center { text-align: center; }
.white { color: var(--white); }

/* ==========================================================================
   Header (Squarespace "dynamic" header: transparent, overlays first section)
   ========================================================================== */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  color: var(--text);
}
.header--light { color: var(--white); }  /* over dark hero/banner */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36.5px var(--mobile-gutter);
  height: var(--header-h);
}
.header__logo img { height: var(--logo-h); width: auto; }
.header__nav { display: none; }
.header__nav-wrap { margin-left: auto; }
.header__actions { display: flex; align-items: center; }
.header__burger {
  appearance: none; background: none; border: 0; padding: 6px; margin: 0; cursor: pointer;
  width: 42px; height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.header__burger span { display: block; height: 1px; width: 30px; background: currentColor; transition: transform .25s, opacity .25s; }
.header__burger:hover span { opacity: .6; }

@media (min-width: 768px) {
  .header__inner { padding: 2vw var(--site-gutter); }
  .header__nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
  .header__nav li { margin: 0 0.8vw; }
  .header__nav a {
    color: inherit; font-size: var(--nav); line-height: 1.8;
    text-decoration: none; padding-bottom: 0;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 92%;
    transition: background-size .2s;
  }
  .header__nav a:hover, .header__nav a[aria-current="page"], .header__nav .current-menu-item > a, .header__nav .current_page_item > a { background-size: 100% 1px; }
  .header__burger { display: none; }
  .header__social { margin-left: 24px; }
}
.header__social { color: inherit; display: inline-flex; width: 20px; height: 20px; }
.header__social svg { width: 100%; height: 100%; fill: currentColor; }
.header__actions .header__social { display: none; }
@media (min-width: 768px) { .header__actions .header__social { display: inline-flex; } }

/* mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__close {
  position: absolute; top: 36px; right: var(--mobile-gutter);
  appearance: none; background: none; border: 0; color: #fff; cursor: pointer; width: 44px; height: 44px; padding: 0;
}
.menu__close::before, .menu__close::after {
  content: ""; position: absolute; left: 7px; top: 21px; width: 30px; height: 1px; background: currentColor;
}
.menu__close::before { transform: rotate(45deg); }
.menu__close::after  { transform: rotate(-45deg); }
.menu__list { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu__list a {
  display: block; color: #fff; font-size: clamp(32px, 8.5vw, 42.5px); line-height: 1.6; padding: .2em 0; text-decoration: none;
}
.menu__list a:hover, .menu__list a[aria-current="page"], .menu__list .current-menu-item > a, .menu__list .current_page_item > a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.menu__social { margin-top: 10vh; color: #fff; width: 28px; height: 28px; display: inline-flex; }
.menu__social svg { width: 100%; height: 100%; fill: currentColor; }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; }
.section__inner { position: relative; z-index: 2; }

/* heights / paddings measured from the original */
.section--large  { min-height: 100vh; }
.section--large  .section__inner { padding: 20vmax 0 var(--site-gutter); }
.section--medium { min-height: 66vh; }
.section--medium .section__inner { padding: 6.6vmax 0; }
.section--small  { min-height: 33vh; }
.section--small  .section__inner { padding: 3.3vmax 0; }
.section--custom .section__inner { padding: 14px 0; }
.section--footer { min-height: 33vh; }
.section--footer .section__inner { padding: 6.6vmax 0 var(--site-gutter); }

/* vertical alignment: the section is a flex column so content can sit at bottom/middle */
.section { display: flex; flex-direction: column; }
.section--bottom { justify-content: flex-end; }
.section--middle { justify-content: center; }
.section--first  { padding-top: var(--header-h); } /* room for the overlaid header */

/* background image + overlay */
.section__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.section__bg img { width: 100%; height: 100%; object-fit: cover; }
.section__overlay { position: absolute; inset: 0; background: #000; opacity: .5; }
.section--dark { color: var(--white); }

/* wave divider at the bottom of the hero */
.section--divider { padding-bottom: 6vw; }
.divider {
  position: absolute; left: 0; right: 0; bottom: -1px; height: calc(6vw + 1px); z-index: 3;
  display: block; width: 100%;
}

/* ==========================================================================
   Fluid grid (Squarespace fluid-engine equivalent)
   ========================================================================== */
.fe {
  --grid-gutter: calc(var(--mobile-gutter) - var(--gap));
  --cell: calc((var(--site-max) - (var(--gap) * 7)) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  grid-template-columns: minmax(var(--grid-gutter), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--grid-gutter), 1fr);
  gap: var(--gap);
}
.fe > .blk { grid-area: var(--m); min-width: 0; position: relative; }
@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(var(--site-gutter) - var(--gap));
    --cell: calc((var(--site-max) - (var(--gap) * 23)) / 24);
    --cw: min(var(--site-max), calc(100vw - var(--site-gutter) * 2));
    grid-template-rows: repeat(var(--rows-d), minmax(calc(var(--cw) * 0.0215), auto));
    grid-template-columns: minmax(var(--grid-gutter), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--grid-gutter), 1fr);
  }
  .fe > .blk { grid-area: var(--d); }
}

/* block types */
.blk--img { overflow: hidden; }
.blk--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blk--btn { display: flex; align-items: stretch; }
.blk--btn .btn { width: 100%; height: 100%; }
.blk--hr { display: flex; align-items: center; }
.blk--hr hr { width: 100%; margin: 0; }
.blk--social { display: flex; justify-content: center; align-items: flex-end; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-head); font-weight: 400; font-size: 16px; line-height: normal;
  padding: 24px 35.2px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--navy); color: var(--white); text-decoration: none;
  transition: opacity .15s;
}
.btn:hover { opacity: .8; text-decoration: none; }
.section--dark .btn { background: var(--white); color: var(--text); }

/* hero "scaled" heading — sized to fit on one line like Squarespace's scaled text */
.hero-title {
  font-size: min(calc((100vw - var(--mobile-gutter) * 2) * 0.04045), 72.8px);
  line-height: 1; margin: 0;
}
@media (min-width: 768px) { .hero-title { font-size: min(calc((100vw - var(--site-gutter) * 2) * 0.04045), 72.8px); } }
.hero-sub { margin: 1rem 0 0; }

/* ==========================================================================
   Social icon (footer)
   ========================================================================== */
.social { display: inline-flex; width: 28px; height: 28px; color: var(--text); }
.social svg { width: 100%; height: 100%; fill: currentColor; }
.social:hover { opacity: .7; }

/* ==========================================================================
   Forms (Squarespace: solid fields, square, bottom border, stacked labels)
   ========================================================================== */
.form { font-size: var(--p); }
.form__item { margin-bottom: 20px; }
.form__title { padding-bottom: 4px; }
.form__req { font-size: var(--p-small); opacity: .7; margin-left: .5em; }
.form__desc { font-size: var(--p-small); opacity: .7; line-height: 1.8; margin: 0 0 6px; }
.form__fields { display: flex; gap: 10px; }
.form__fields > div { flex: 1 1 0; min-width: 0; }
.form__caption { display: block; font-size: 12px; line-height: normal; padding: 6px 0 4px; }
.form__caption .form__req { font-size: 12px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"] {
  width: 100%; height: 46px; padding: 5px 10px; margin: 0;
  font: inherit; font-size: var(--p); color: var(--text);
  background: #fafafa; border: 0; border-bottom: 1px solid #5a5a5a; border-radius: 0; outline: none;
  transition: border-color .15s, background .15s;
}
.form input:focus { border-bottom-color: #000; background: #fff; }
.form__section { padding-bottom: 4px; border-bottom: 1px solid #000; margin: 1.25em 0 1.5em; }
.form__item--check { margin-bottom: 28px; }
.form__legal { line-height: 1.8; }
.form__legal ul { margin: 0; padding: 0; }
.form__legal li { list-style: disc outside; margin: 0; }
.form__legal li.b { font-weight: 700; }
.form__option { display: flex; align-items: flex-start; gap: 10px; font-size: var(--p-small); margin-top: 6px; cursor: pointer; }
.form__option input { appearance: none; width: 15px; height: 15px; margin: 7px 0 0; flex: none; border: 2px solid #000; background: transparent; border-radius: 0; cursor: pointer; display: grid; place-content: center; }
.form__option input::before { content: ""; width: 7px; height: 7px; background: #000; transform: scale(0); transition: transform .1s; }
.form__option input:checked::before { transform: scale(1); }
.form__submit { margin-top: 10px; }
.form__status { margin-top: 16px; font-size: var(--p); display: none; }
.form__status.is-visible { display: block; }
.form__status--error { color: #9b1c1c; }
.form button.btn { font-size: 16px; }
.form button[disabled] { opacity: .6; cursor: default; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Page-specific tweaks
   ========================================================================== */
/* RSVP two-column layout stacks on mobile via grid areas already. */
.rules-copy h1 { margin-bottom: 2rem; }

/* Header-less template (Waiver): first section starts at the very top */
.page--noheader .section--first { padding-top: 0; }

/* WordPress bits */
.header__logo img { height: var(--logo-h); width: auto; max-width: none; }
.header__nav li, .menu__list li { list-style: none; }
.form__status ul { margin: .25em 0 0; padding-left: 1.2em; }
.form__status li { font-size: var(--p-small); }
#wpadminbar ~ .header, .admin-bar .header { top: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
.form__success { font-size: var(--p-large); padding: 1em 0; }