/* =============================================================================
   Ottawa Lions Design System — WordPress edition
   -----------------------------------------------------------------------------
   Install ONCE, site-wide. Every club-styled page then needs only markup.

   Two layers:
     1. :root tokens      — variable definitions only. No visual effect on their
                            own, so this is safe to load everywhere.
     2. .ottl-page rules  — everything visual, scoped to the wrapper class. The
                            scope is what keeps Astra and Elementor from bleeding
                            in, and what keeps this from bleeding out.

   Nothing here styles a bare element outside .ottl-page. If a rule ever loses to
   a theme or Elementor selector, double the scope to raise specificity:
       .ottl-page.ottl-page .ottl-btn { ... }
   ============================================================================= */


/* Open Sans — the club's web typeface. Loaded here as a safety net because we
   can't assume the active theme serves it; without it the whole page silently
   falls back to Arial and stops looking like the club.

   If your theme already loads Open Sans (check the page source for
   fonts.googleapis.com), DELETE this line — the enqueued copy is faster than an
   @import, which blocks rendering until it resolves. Better still, on the child
   theme route, drop this line and enqueue the font in functions.php instead.

   Must stay the first rule in the file; @import is ignored anywhere else. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");


/* =============================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     --ottl-red and --ottl-teal are exact: red from the club logo and the
     programs-page source CSS (#EC2427); teal from the site's theme-color meta.
     The greys are the literal values used on the Programs page. */
  --ottl-red: #EC2427;             /* primary: logo, buttons, headings, icons */
  --ottl-red-600: #d21f22;         /* DERIVED: hover */
  --ottl-red-700: #b91b1e;         /* DERIVED: press */
  --ottl-red-tint: #fff5f5;        /* exact: callout background */
  --ottl-red-tint-strong: #f9d9da; /* DERIVED: highlight surface */

  --ottl-teal: #1bb0ce;            /* accent: links, news headlines */
  --ottl-teal-600: #178fa6;        /* DERIVED: hover */
  --ottl-teal-tint: #eaf8fb;       /* DERIVED */

  --ottl-black: #000000;
  --ottl-ink-900: #1a1a1a;         /* footer bar, dark surfaces */
  --ottl-ink-700: #3a3a3a;         /* body copy */
  --ottl-ink-500: #6b6b6b;         /* meta: dates, captions */
  --ottl-ink-300: #9a9a9a;         /* disabled text, placeholder */
  --ottl-line: #eeeeee;            /* card + FAQ borders */
  --ottl-line-strong: #dddddd;     /* filter-button borders */
  --ottl-grey-50: #fafafa;         /* FAQ row background */
  --ottl-grey-100: #f5f5f5;        /* metadata chip background */
  --ottl-grey-200: #eeeeee;        /* media placeholder background */
  --ottl-white: #ffffff;

  --ottl-gold: #c9a227;            /* DERIVED: results / medal tables */
  --ottl-silver: #9aa0a6;
  --ottl-bronze: #a4703b;

  /* ---- Semantic aliases (use these, not the raw palette) ---------------- */
  --text-heading: var(--ottl-black);
  --text-heading-brand: var(--ottl-red);
  --text-body: var(--ottl-ink-700);
  --text-meta: var(--ottl-ink-500);
  --text-on-dark: var(--ottl-white);
  --text-link: var(--ottl-teal);
  --text-link-hover: var(--ottl-teal-600);

  --surface-page: var(--ottl-white);
  --surface-card: var(--ottl-white);
  --surface-subtle: var(--ottl-grey-50);
  --surface-chip: var(--ottl-grey-100);
  --surface-dark: var(--ottl-ink-900);
  --surface-brand: var(--ottl-red);
  --surface-brand-tint: var(--ottl-red-tint);

  --border-card: var(--ottl-line);
  --border-field: var(--ottl-line-strong);
  --border-brand: var(--ottl-red);

  --action-primary-bg: var(--ottl-red);
  --action-primary-bg-hover: var(--ottl-red-600);
  --action-primary-bg-active: var(--ottl-red-700);
  --action-primary-fg: var(--ottl-white);
  --action-secondary-fg: var(--ottl-red);
  --action-secondary-border: var(--ottl-red);

  /* Hero: club photo, warm red wash, then a protection layer for the text. */
  --gradient-hero: linear-gradient(180deg, rgba(236,36,39,.22) 0%, rgba(236,36,39,.55) 65%, rgba(236,36,39,.62) 100%);
  --gradient-protect-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);

  /* ---- Type -------------------------------------------------------------- */
  --font-sans: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Mogra", "Open Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-14-4: 14.4px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px;
  --fs-20: 20px;  --fs-22: 22px;  --fs-26: 26px;  --fs-30: 30px;
  --fs-32: 32px;  --fs-44: 44px;  --fs-54: 54px;  --fs-72: 72px;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-snug: 1.45;
  --lh-body: 1.6;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-nav: 0.06em;
  --ls-label: 0.08em;

  --type-h1: var(--fw-bold) var(--fs-32)/var(--lh-heading) var(--font-sans);
  --type-h2: var(--fw-bold) var(--fs-30)/var(--lh-heading) var(--font-sans);
  --type-h3: var(--fw-bold) var(--fs-22)/var(--lh-heading) var(--font-sans);
  --type-h4: var(--fw-bold) var(--fs-18)/var(--lh-snug) var(--font-sans);
  --type-body: var(--fw-regular) var(--fs-16)/var(--lh-body) var(--font-sans);
  --type-body-sm: var(--fw-regular) var(--fs-15)/var(--lh-body) var(--font-sans);
  --type-chip: var(--fw-regular) var(--fs-14-4)/var(--lh-snug) var(--font-sans);
  --type-meta: var(--fw-regular) var(--fs-12)/var(--lh-snug) var(--font-sans);
  --type-nav: var(--fw-semibold) var(--fs-13)/1 var(--font-sans);
  --type-button: var(--fw-regular) var(--fs-16)/1.2 var(--font-sans);
  --type-label: var(--fw-bold) var(--fs-13)/1.4 var(--font-sans);

  /* ---- Spacing and layout ------------------------------------------------ */
  --space-1: 2px;   --space-2: 4px;   --space-3: 8px;   --space-4: 12px;
  --space-5: 16px;  --space-6: 20px;  --space-7: 24px;  --space-8: 32px;
  --space-9: 40px;  --space-10: 48px; --space-11: 64px; --space-12: 80px;
  --space-13: 96px;

  --container-max: 1200px;   /* self-contained: .ottl-wrap sets its own width,
                                so this does not depend on the theme's container */
  --gutter: 20px;            /* Elementor column gap */
  --gutter-lg: 24px;         /* program-grid gap */
  --section-y: 48px;
  --card-min: 280px;         /* grid minmax floor */
  --tap-min: 44px;
  --bp-mobile: 640px;        /* buttons go full-width below this */

  /* ---- Radii and borders ------------------------------------------------- */
  --radius-0: 0px;
  --radius-sm: 8px;          /* FAQ rows */
  --radius-md: 10px;         /* buttons, card media */
  --radius-lg: 12px;         /* callout panels */
  --radius-xl: 14px;         /* cards */
  --radius-pill: 999px;      /* chips, filter buttons */
  --border-w: 1px;
  --border-w-strong: 2px;    /* callout border, focus outline */

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover: 0 6px 18px rgba(0,0,0,.10);
  --shadow-header: 0 1px 0 rgba(0,0,0,.08);
  --shadow-overlay: 0 18px 48px rgba(0,0,0,.22);
  --text-shadow-hero: 3px 4px 0 rgba(0,0,0,.35);

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --transition-interactive:
      background-color var(--dur-base) var(--ease-standard),
      color var(--dur-base) var(--ease-standard),
      border-color var(--dur-base) var(--ease-standard),
      box-shadow var(--dur-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}


/* =============================================================================
   2. BASE — replaces the design system's base.css, scoped so it cannot
      affect anything outside a club-styled block.
   ========================================================================== */

.ottl-page,
.ottl-page *,
.ottl-page *::before,
.ottl-page *::after { box-sizing: border-box; }

.ottl-page {
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  text-wrap: pretty;
}

/* Astra sets its own paragraph margin and link colour — these win it back. */
.ottl-page p { margin: 0 0 var(--space-5); }
.ottl-page p:last-child { margin-bottom: 0; }

.ottl-page a { color: var(--text-link); text-decoration: none; transition: var(--transition-interactive); }
.ottl-page a:hover { color: var(--text-link-hover); }

/* The club's own focus treatment: hard 2px red outline, not a soft ring. */
.ottl-page a:focus-visible,
.ottl-page button:focus-visible,
.ottl-page summary:focus-visible {
  outline: var(--border-w-strong) solid var(--ottl-red);
  outline-offset: 2px;
}

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

.ottl-page hr {
  height: 1px; border: 0; background: var(--ottl-line);
  margin: var(--space-8) 0;
}

/* Headings always declare their own font below, so Astra's sizes never apply.
   This just clears the theme's inherited margins and colour. */
.ottl-page h1, .ottl-page h2, .ottl-page h3,
.ottl-page h4, .ottl-page h5, .ottl-page h6 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-sans);
}


/* =============================================================================
   3. LAYOUT
   ========================================================================== */

.ottl-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.ottl-section { padding: var(--section-y) 0; }
.ottl-section--tight { padding: var(--space-9) 0; }

/* One tinted band per page, maximum — the club never uses more than two
   background colours on a surface. */
.ottl-section--subtle {
  background: var(--surface-subtle);
  border-top: var(--border-w) solid var(--border-card);
  border-bottom: var(--border-w) solid var(--border-card);
}

/* Reflows on its own rather than locking to a column count. */
.ottl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--gutter-lg);
}

/* Four-up row. Explicit counts, not auto-fit: four 280px cards don't fit inside
   Astra's 1200px container, so auto-fit would strand the fourth card alone on a
   second line. Steps 4 -> 2 -> 1 so a row never ends in an orphan. */
.ottl-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ottl-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ottl-grid--4 { grid-template-columns: 1fr; } }

.ottl-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-10);
  align-items: start;
}

.ottl-measure { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Full-bleed escape hatch. Only needed if the block sits inside a padded
   Elementor container — see README. Costs a horizontal scrollbar on the rare
   browser that still reserves gutter width inside 100vw. */
.ottl-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}


/* =============================================================================
   4. HERO — club photograph, red wash, brush wave
   ========================================================================== */

.ottl-hero {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ottl-red-tint-strong);
}

.ottl-hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
}

.ottl-hero__wash { position: absolute; inset: 0; background: var(--gradient-hero); }

/* Text-over-photo protection: the club's bottom gradient, mirrored on top. */
.ottl-hero__protect {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%),
    var(--gradient-protect-bottom);
}

.ottl-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  padding: var(--space-11) var(--space-6) var(--space-13);
  text-align: center;
}

.ottl-hero__wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: auto;
  pointer-events: none;
}

.ottl-eyebrow {
  margin: 0 0 var(--space-4);
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ottl-white);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.ottl-page .ottl-hero h1 {
  margin: 0;
  font: var(--fw-bold) var(--fs-44)/var(--lh-tight) var(--font-sans);
  color: var(--ottl-white);
  text-shadow: var(--text-shadow-hero);
}

.ottl-standfirst {
  display: inline-block;
  margin: var(--space-5) 0 0;
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  font: var(--fw-semibold) var(--fs-18)/1.4 var(--font-sans);
  color: var(--ottl-white);
}

.ottl-actions {
  margin-top: var(--space-9);
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  flex-wrap: wrap;
}


/* =============================================================================
   5. BUTTONS — 10px radius, .6rem 1rem, never lighten on hover
   ========================================================================== */

.ottl-page .ottl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: 9.6px 16px;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-md);
  font: var(--type-button);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-interactive);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
}

.ottl-page .ottl-btn:hover  { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); }
.ottl-page .ottl-btn:active { background: var(--action-primary-bg-active); transform: translateY(1px); }

.ottl-page .ottl-btn--outline {
  background: var(--surface-card);
  color: var(--action-secondary-fg);
  border-color: var(--action-secondary-border);
}
.ottl-page .ottl-btn--outline:hover {
  background: var(--surface-brand-tint);
  color: var(--action-secondary-fg);
}

.ottl-page .ottl-btn i { font-size: .95em; }


/* =============================================================================
   6. SECTION HEADING
   ========================================================================== */

.ottl-section-head {
  text-align: center;
  margin: 0 auto var(--space-8);
  max-width: 760px;
}
.ottl-page .ottl-section-head h2 { margin: 0; font: var(--type-h2); color: var(--text-heading); }
.ottl-page .ottl-section-head p  { margin: var(--space-4) 0 0; font: var(--type-body); color: var(--text-body); }


/* =============================================================================
   7. CARDS — white, 1px hairline, 14px radius, NO shadow at rest
   ========================================================================== */

.ottl-card {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Fact card: icon, label, value, optional footnote --------------------- */
.ottl-fact i { font-size: 28px; color: var(--ottl-red); }
.ottl-page .ottl-fact h3 {
  margin: 0;
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-meta);
}
.ottl-page .ottl-fact p {
  margin: 0;
  font: var(--fw-semibold) var(--fs-18)/var(--lh-snug) var(--font-sans);
  color: var(--text-heading);
}
.ottl-fact small {
  display: block;
  margin-top: var(--space-2);
  font: var(--type-chip);
  color: var(--text-meta);
}

/* --- Day card: one training slot ----------------------------------------- */
.ottl-day { text-align: center; }
.ottl-day__name {
  font: var(--fw-bold) var(--fs-13)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ottl-red);
}
.ottl-day__time {
  font: var(--fw-bold) var(--fs-26)/var(--lh-heading) var(--font-sans);
  color: var(--text-heading);
}
.ottl-day__meta { font: var(--type-chip); color: var(--text-meta); }

/* --- Fee card: one price option ------------------------------------------ */
.ottl-fee { padding: var(--space-7); text-align: center; }
.ottl-page .ottl-fee h3 { margin: 0; font: var(--type-h4); color: var(--text-heading); }
.ottl-fee__amount { font: var(--fw-bold) var(--fs-44)/1 var(--font-sans); color: var(--ottl-red); }
.ottl-fee__amount span {
  display: block;
  margin-top: var(--space-3);
  font: var(--type-chip);
  color: var(--text-meta);
}
.ottl-page .ottl-fee .ottl-btn { width: 100%; }


/* =============================================================================
   8. NOTICE — one inline caveat attached to the thing it qualifies
   ========================================================================== */

.ottl-notice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--surface-subtle);
  border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.ottl-notice i { color: var(--ottl-red); margin-top: 3px; flex: none; }
.ottl-page .ottl-notice p { margin: 0; font: var(--type-body-sm); color: var(--text-body); }


/* =============================================================================
   9. LISTS
   ========================================================================== */

/* --- Fine print: hairline-separated terms -------------------------------- */
.ottl-page .ottl-terms h3 {
  margin: 0 0 var(--space-4);
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-meta);
}
.ottl-terms ul {
  margin: 0; padding: 0; list-style: none;
  border-top: var(--border-w) solid var(--border-card);
}
.ottl-terms li {
  margin: 0;                 /* Astra puts a bottom margin on every li */
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--border-card);
  font: var(--type-body-sm);
  color: var(--text-body);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.ottl-terms li i { color: var(--ottl-red); font-size: 6px; margin-top: 9px; flex: none; }

/* --- Icon list: short items with a red glyph each ------------------------ */
.ottl-iconlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-5); }
.ottl-iconlist li { margin: 0; display: flex; gap: var(--space-5); align-items: center; font: var(--type-body); color: var(--text-body); }
.ottl-iconlist li i { width: 24px; text-align: center; font-size: 20px; color: var(--ottl-red); flex: none; }


/* =============================================================================
   10. CALLOUT — red-outlined, pink-tinted, one message and one action
   ========================================================================== */

.ottl-callout {
  border: var(--border-w-strong) solid var(--border-brand);
  background: var(--surface-brand-tint);
  border-radius: var(--radius-lg);
  padding: var(--gutter-lg);
  text-align: center;
}
.ottl-page .ottl-callout h2 { margin: 0 0 var(--space-5); font: var(--type-h2); color: var(--text-heading-brand); }
.ottl-page .ottl-callout p  { margin: 0 auto; max-width: 640px; font: var(--type-body); color: var(--text-body); }
.ottl-callout .ottl-actions { margin-top: var(--space-6); }


/* =============================================================================
   11. PANEL — bordered box holding a titled sub-block
   ========================================================================== */

.ottl-panel {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
}
.ottl-page .ottl-panel h3 { margin: 0 0 var(--space-5); font: var(--type-h4); color: var(--text-heading); }

/* Body prose block sitting beside a panel. */
.ottl-page .ottl-prose h2 { margin: 0 0 var(--space-5); font: var(--type-h2); color: var(--text-heading); }
.ottl-prose p { max-width: 640px; }


/* =============================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .ottl-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .ottl-page .ottl-hero h1 { font-size: var(--fs-32); }
}

@media (max-width: 640px) {
  .ottl-page .ottl-btn { width: 100%; }
  .ottl-hero .ottl-actions { flex-direction: column; }
  .ottl-hero__inner { padding: var(--space-9) var(--space-6) var(--space-11); }
}