/*!
 * sts-theme.css
 * Sports Timing Solutions - shared site stylesheet
 *
 * HOW TO USE
 *   1. Upload this file once, e.g. /assets/css/sts-theme.css
 *   2. Link it in the <head> of any page you restyle, AFTER your existing CSS:
 *        <link rel="stylesheet" href="/assets/css/sts-theme.css">
 *        <link rel="stylesheet" href="/sts-theme-vars.php">
 *   3. Wrap the page content (between your existing nav bar and footer) in:
 *        <main class="sts-page"> ... </main>
 *
 * Every class starts with "sts-", so nothing here can clash with your
 * existing site CSS. Your nav bar and footer are never touched.
 *
 * COLOURS
 *   These are the same two-colour palette and blending formulas as
 *   news-template.php (dark #0b2545 + accent #0b7cff by default).
 *   The values in :root below are the defaults. Add sts-theme-vars.php
 *   after this file and the site uses the colours you saved on the
 *   "Newsletter colours" admin page, so emails and website always match.
 *
 * LOGO BLUE
 *   --sts-logo-blue is the fixed blue box in the text logo. Do not use it
 *   for anything else and do not change it when changing the theme.
 *
 * COMPONENT INDEX
 *   Layout ......... sts-page  sts-container  sts-section  sts-stack
 *   Header band .... sts-header  sts-header__*  sts-header--compact
 *   Buttons ........ sts-btn  sts-btn--primary|navy|outline  sts-actions
 *   Boxes & notes .. sts-box  sts-box-grid  sts-note  sts-note--info|warn
 *   Badges ......... sts-badge  sts-badge--gold|silver|bronze|blue|live
 *                    sts-status--on|fin|off  sts-chip-outline  sts-dot
 *   Rows & lists ... sts-list  sts-row  sts-rank  sts-bib  sts-icon-dot
 *   Podium ......... sts-podium (uses sts-row)
 *   Filters ........ sts-search  sts-input  sts-select  sts-filters  sts-chip
 *   Video .......... sts-video  sts-video__frame
 *   Popups ......... sts-modal  sts-modal__dialog
 *   Utilities ...... sts-h2  sts-caption  sts-tabular  sts-visually-hidden
 *   Site pages ..... sts-header--site (clears your fixed nav bar)
 *   Older markup ... sts-legacy (reskins Bootstrap tables/cards not yet rebuilt)
 */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */
:root {
  /* Defaults = the newsletter palette worked out from its two colours
     (dark #0b2545, accent #0b7cff) with the same formulas as news-template.php.
     sts-theme-vars.php overrides these with your saved newsletter colours. */

  /* Brand */
  --sts-navy: #0b2545;          /* header band, navy buttons, bib chips   */
  --sts-navy-card: #0b3261;     /* raised panel on navy                   */
  --sts-navy-line: #0b3f7d;     /* thin lines on navy                     */
  --sts-blue: #0b7cff;          /* electric blue: buttons, accents        */
  --sts-blue-rgb: 11, 124, 255; /* same blue as r, g, b for transparency  */
  --sts-blue-tint: #ebf5ff;     /* pale blue backgrounds                  */
  --sts-blue-ink: #0b5ebe;      /* text on pale blue                      */
  --sts-accent-soft: #85beff;   /* light accent on navy                   */
  --sts-logo-blue: #0042a9;     /* FIXED - logo box only, never change    */
  --sts-primary-hover: #0b6bda;
  --sts-navy-hover: #081c34;

  /* Text */
  --sts-ink: #0b2545;           /* headings and strong text on light      */
  --sts-muted: #4f6279;         /* body text on light                     */
  --sts-label: #68788c;         /* small uppercase labels                 */
  --sts-sky: #91a9c4;           /* labels and eyebrow text on navy        */
  --sts-sky-soft: #d3d8de;      /* supporting text on navy                */
  --sts-on-navy: #ffffff;

  /* Surfaces and lines */
  --sts-white: #ffffff;
  --sts-panel: #f3f6fa;         /* grey boxes and rows                    */
  --sts-panel-chip: #e2e5e9;    /* neutral circles on panels              */
  --sts-line: #d3d8de;          /* input and outline button borders       */
  --sts-divider: #dde0e5;       /* hairlines                              */

  /* Status */
  --sts-live: #2fbf71;
  --sts-live-bg: #e3f6ec;
  --sts-live-ink: #0d5c33;
  --sts-off-bg: #e8eaf0;
  --sts-warn-bg: #fdf0d5;
  --sts-warn-line: #e0a100;
  --sts-warn-ink: #5c4200;
  --sts-red: #d92d2d;           /* LIVE video badge                       */

  /* Podium */
  --sts-gold: #e8b923;
  --sts-silver: #b4bbc8;
  --sts-bronze: #cf8a4e;

  /* Type */
  --sts-font: 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Shape and spacing */
  --sts-radius-btn: 10px;
  --sts-radius-pill: 8px;
  --sts-radius-sm: 7px;
  --sts-gap: 12px;
  --sts-pad-x: 24px;
  --sts-max: 1140px;
  --sts-site-header: 90px;      /* height of your fixed top bar: raise or lower to taste */
}

/* ------------------------------------------------------------------ */
/* 2. Layout                                                           */
/* ------------------------------------------------------------------ */
.sts-page,
.sts-page *,
.sts-page *::before,
.sts-page *::after {
  box-sizing: border-box;
}

.sts-page {
  font-family: var(--sts-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sts-ink);
  background: var(--sts-white);
}

.sts-container {
  width: 100%;
  max-width: var(--sts-max);
  margin: 0 auto;
  padding-left: var(--sts-pad-x);
  padding-right: var(--sts-pad-x);
}

.sts-section {
  padding-top: 20px;
  padding-bottom: 8px;
}

.sts-stack > * + * {
  margin-top: var(--sts-gap);
}

.sts-h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--sts-ink);
}

.sts-caption {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--sts-muted);
}

.sts-tabular {
  font-variant-numeric: tabular-nums;
}

.sts-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* 3. Header band                                                      */
/* ------------------------------------------------------------------ */
.sts-header {
  background: var(--sts-navy);
  color: var(--sts-on-navy);
  border-bottom: 6px solid var(--sts-blue);
  padding: 22px 0 24px;
}

.sts-header__eyebrow {
  margin: 0;
  font-size: 13px;
  color: var(--sts-sky);
}

.sts-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 6px;
}

.sts-header__title {
  margin: 0;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--sts-on-navy);
}

.sts-header__meta {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--sts-sky-soft);
}

.sts-header__label {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sts-sky);
}

.sts-header__time {
  margin: 4px 0 0;
  font-size: clamp(40px, 8vw, 52px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--sts-on-navy);
  font-variant-numeric: tabular-nums;
}

.sts-header__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--sts-sky-soft);
}

.sts-header__split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

/* Shorter band for list pages with no big number */
.sts-header--compact {
  padding: 20px 0 22px;
}

/* ------------------------------------------------------------------ */
/* 4. Buttons                                                          */
/* ------------------------------------------------------------------ */
.sts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 18px;
  border: 1.5px solid transparent;
  border-radius: var(--sts-radius-btn);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sts-btn > svg,
.sts-btn > i {
  flex: 0 0 auto;
}

.sts-btn--primary {
  background: var(--sts-blue);
  color: var(--sts-white);
}

.sts-btn--primary:hover {
  background: var(--sts-primary-hover);
}

.sts-btn--navy {
  background: var(--sts-navy);
  color: var(--sts-white);
}

.sts-btn--navy:hover {
  background: var(--sts-navy-hover);
}

.sts-btn--outline {
  background: var(--sts-white);
  color: var(--sts-ink);
  border-color: var(--sts-line);
}

.sts-btn--outline:hover {
  border-color: var(--sts-blue);
}

.sts-btn--small {
  min-height: 0;
  padding: 8px 18px;
  border-radius: 9px;
  font-size: 14px;
}

/* Button rows.
   .sts-actions        = five equal buttons on desktop, two-up on tablet/phone
   .sts-actions--auto  = any number of equal buttons, wraps as needed
   Add .sts-span-all to a child to make it full width in the two-up layout. */
.sts-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.sts-actions--auto {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.sts-actions .sts-btn {
  width: 100%;
}

@media (max-width: 900px) {
  .sts-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sts-actions > .sts-span-all {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ */
/* 5. Boxes and notes                                                  */
/* ------------------------------------------------------------------ */
.sts-box {
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
  padding: 14px 16px;
}

.sts-box__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sts-label);
}

.sts-box__value {
  margin: 4px 0 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--sts-ink);
  font-variant-numeric: tabular-nums;
}

.sts-box__sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--sts-muted);
}

.sts-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sts-gap);
}

.sts-note {
  margin: 0;
  background: var(--sts-panel);
  border-left: 5px solid #c9c9c9;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sts-ink);
}

.sts-note a {
  color: var(--sts-blue);
  font-weight: 700;
  text-decoration: underline;
}

.sts-note--info {
  background: var(--sts-blue-tint);
}

.sts-note--warn {
  background: var(--sts-warn-bg);
  border-left-color: var(--sts-warn-line);
  color: var(--sts-warn-ink);
}

/* ------------------------------------------------------------------ */
/* 6. Badges, status pills, live dot                                   */
/* ------------------------------------------------------------------ */
.sts-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.sts-badge--gold   { background: var(--sts-gold);   color: var(--sts-navy); }
.sts-badge--silver { background: var(--sts-silver); color: var(--sts-navy); }
.sts-badge--bronze { background: var(--sts-bronze); color: var(--sts-navy); }
.sts-badge--blue   { background: var(--sts-blue);   color: var(--sts-white); }

.sts-badge--live {
  background: var(--sts-red);
  color: var(--sts-white);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 5px;
}

/* Outlined pill used on navy, e.g. "Top 12% of the field" */
.sts-chip-outline {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--sts-blue);
  border-radius: var(--sts-radius-pill);
  background: rgba(var(--sts-blue-rgb), 0.3);
  color: var(--sts-white);
  font-size: 14px;
  font-weight: 700;
}

/* Status pills (race state) */
.sts-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--sts-radius-sm);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.sts-status--on  { background: var(--sts-live-bg); color: var(--sts-live-ink); }
.sts-status--fin { background: var(--sts-blue-tint); color: var(--sts-blue-ink); }
.sts-status--off { background: var(--sts-off-bg); color: var(--sts-muted); }

/* Status pills used on the navy header */
.sts-header .sts-status {
  padding: 7px 14px;
  border-radius: var(--sts-radius-pill);
  font-size: 15px;
}

.sts-header .sts-status--on  { background: rgba(47, 191, 113, 0.18); color: var(--sts-white); }
.sts-header .sts-status--fin { background: var(--sts-blue); color: var(--sts-white); }
.sts-header .sts-status--off { background: rgba(255, 255, 255, 0.1); color: var(--sts-sky-soft); }

.sts-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sts-live);
  animation: sts-pulse 1.4s infinite;
}

@keyframes sts-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* 7. Rows and lists (results, podium, live runners)                   */
/* ------------------------------------------------------------------ */
.sts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
  padding: 12px 14px;
}

/* Left border shows race state in the live list */
.sts-row--on  { border-left-color: var(--sts-live); }
.sts-row--off { border-left-color: var(--sts-line); }

.sts-row__main {
  flex: 1 1 150px;
  min-width: 0;
}

.sts-row__name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--sts-ink);
}

.sts-row__sub {
  margin: 0;
  font-size: 13px;
  color: var(--sts-muted);
}

.sts-row__time {
  text-align: right;
}

.sts-row__time strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--sts-ink);
  font-variant-numeric: tabular-nums;
}

.sts-row__time span {
  font-size: 12px;
  color: var(--sts-muted);
  font-variant-numeric: tabular-nums;
}

/* Position circle */
.sts-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 18px;
  background: var(--sts-panel-chip);
  color: var(--sts-ink);
  font-size: 14px;
  font-weight: 700;
}

.sts-rank--gold   { background: var(--sts-gold); }
.sts-rank--silver { background: var(--sts-silver); }
.sts-rank--bronze { background: var(--sts-bronze); }

/* Bib or runner number chip */
.sts-bib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--sts-radius-sm);
  background: var(--sts-navy);
  color: var(--sts-white);
  font-size: 13px;
  font-weight: 700;
}

/* Small round icon (video / certificate available) */
.sts-icon-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sts-blue-tint);
  color: var(--sts-blue);
}

.sts-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sts-gap);
}

/* ------------------------------------------------------------------ */
/* 8. Search, filters, chips                                           */
/* ------------------------------------------------------------------ */
.sts-input,
.sts-select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--sts-line);
  border-radius: var(--sts-radius-btn);
  background-color: var(--sts-white);
  color: var(--sts-ink);
  font-family: inherit;
  font-size: 16px;
}

.sts-select {
  height: 44px;
  font-size: 15px;
}

/* Search box with a built-in magnifier (no icon font needed) */
.sts-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  padding-left: 44px;
}

.sts-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.sts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sts-chip {
  padding: 7px 16px;
  border: 1.5px solid var(--sts-line);
  border-radius: 20px;
  background: var(--sts-white);
  color: var(--sts-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.sts-chip.is-active,
.sts-chip[aria-pressed="true"] {
  border-color: var(--sts-blue);
  background: var(--sts-blue);
  color: var(--sts-white);
}

/* ------------------------------------------------------------------ */
/* 9. Video card                                                       */
/* ------------------------------------------------------------------ */
.sts-video {
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
  padding: 16px 18px;
}

.sts-video__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sts-video__head .sts-btn {
  margin-left: auto;
}

.sts-video__frame {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 16 / 9;
  border-radius: var(--sts-radius-pill);
  background: var(--sts-navy);
  overflow: hidden;
}

.sts-video__frame iframe,
.sts-video__frame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* 10. Popups (optional - restyles video / certificate dialogs)        */
/* ------------------------------------------------------------------ */
.sts-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.sts-modal.is-open {
  display: flex;
}

.sts-modal__dialog {
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow: auto;
  padding: 14px;
  border-radius: 12px;
  background: var(--sts-white);
}

.sts-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sts-ink);
}

.sts-modal__close {
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--sts-panel);
  color: var(--sts-ink);
  font-size: 16px;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* 11. Accessibility and small screens                                 */
/* ------------------------------------------------------------------ */
.sts-btn:focus-visible,
.sts-chip:focus-visible,
.sts-input:focus-visible,
.sts-select:focus-visible,
.sts-modal__close:focus-visible,
.sts-page a:focus-visible {
  outline: 3px solid var(--sts-blue);
  outline-offset: 2px;
}

.sts-header .sts-btn:focus-visible,
.sts-header a:focus-visible {
  outline-color: var(--sts-sky);
}

@media (prefers-reduced-motion: reduce) {
  .sts-dot {
    animation: none;
  }
  .sts-btn {
    transition: none;
  }
}

@media (max-width: 600px) {
  :root {
    --sts-pad-x: 16px;
  }
  .sts-row {
    padding: 12px;
  }
  .sts-row__time {
    text-align: left;
  }
}

/* ------------------------------------------------------------------ */
/* 12. Header below the site's fixed top bar                           */
/* ------------------------------------------------------------------ */
/* Use sts-header--site on pages that keep your existing fixed nav bar.
   It adds space at the top so the band starts below that bar. */
.sts-header--site {
  padding-top: calc(var(--sts-site-header) + 24px);
}

/* The short header on the live list page: a little more room under the
   "Last updated" line. Raise or lower the 40px to taste. */
.sts-header--compact.sts-header--site {
  padding-bottom: 40px;
}

/* ------------------------------------------------------------------ */
/* 13. Legacy reskin (sts-legacy)                                      */
/* ------------------------------------------------------------------ */
/* For parts of a page not rebuilt yet (older Bootstrap tables and cards,
   e.g. the triathlon, duathlon and laps layouts). Add sts-legacy to the
   section that holds them and they pick up the theme. */
.sts-legacy {
  font-family: var(--sts-font);
  color: var(--sts-ink);
}

.sts-legacy .table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  border: 0;
  color: var(--sts-ink);
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
}

.sts-legacy .table > :not(caption) > * > * {
  padding: 10px 14px;
  background-color: transparent;
  color: var(--sts-ink);
  border-color: var(--sts-divider);
  box-shadow: none;
}

.sts-legacy .table thead th,
.sts-legacy .table thead td,
.sts-legacy .table thead.table-dark > tr > * {
  background-color: var(--sts-navy);
  color: var(--sts-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-color: var(--sts-navy-line, var(--sts-navy));
}

.sts-legacy .table thead a {
  color: var(--sts-white);
}

.sts-legacy .table td strong {
  color: var(--sts-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Old coloured alert cards become notes */
.sts-legacy .card.bg-success,
.sts-legacy .card.bg-info,
.sts-legacy .card.bg-danger,
.sts-legacy .card.bg-warning {
  background: var(--sts-blue-tint) !important;
  color: var(--sts-ink) !important;
  border: 0;
  border-left: 5px solid var(--sts-blue);
  border-radius: 0;
}

.sts-legacy .card.bg-success .card-body,
.sts-legacy .card.bg-info .card-body,
.sts-legacy .card.bg-danger .card-body,
.sts-legacy .card.bg-warning .card-body {
  padding: 14px 16px;
  font-size: 14px;
}

/* Page-level link colour inside themed sections */
.sts-legacy a:not(.sts-btn):not(.btn) {
  color: var(--sts-blue);
}

/* Fresh-data flash used by the live pages: keep it on-brand */
.sts-page .just-updated {
  animation: sts-flash 1.2s ease-out;
}

@keyframes sts-flash {
  0%   { background: var(--sts-blue-tint); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .sts-page .just-updated { animation: none; }
}

/* ------------------------------------------------------------------ */
/* 15. Link buttons keep their colours on hover / focus / visited      */
/* ------------------------------------------------------------------ */
/* Your site's own link styles can change the text colour of a link when you
   hover it. These rules stop that for every sts-btn that is an <a>. */
.sts-page a.sts-btn--primary,
.sts-page a.sts-btn--primary:link,
.sts-page a.sts-btn--primary:visited,
.sts-page a.sts-btn--primary:hover,
.sts-page a.sts-btn--primary:focus,
.sts-page a.sts-btn--primary:active,
.sts-page a.sts-btn--navy,
.sts-page a.sts-btn--navy:link,
.sts-page a.sts-btn--navy:visited,
.sts-page a.sts-btn--navy:hover,
.sts-page a.sts-btn--navy:focus,
.sts-page a.sts-btn--navy:active {
  color: var(--sts-white) !important;
  text-decoration: none;
}

.sts-page a.sts-btn--outline,
.sts-page a.sts-btn--outline:link,
.sts-page a.sts-btn--outline:visited,
.sts-page a.sts-btn--outline:hover,
.sts-page a.sts-btn--outline:focus,
.sts-page a.sts-btn--outline:active {
  color: var(--sts-ink) !important;
  text-decoration: none;
}

/* Rows that are whole links (podium) keep their text colours too */
.sts-page a.sts-row,
.sts-page a.sts-row:hover,
.sts-page a.sts-row:focus {
  color: var(--sts-ink);
  text-decoration: none;
}

.sts-page a.sts-icon-dot,
.sts-page a.sts-icon-dot:hover,
.sts-page a.sts-icon-dot:focus {
  color: var(--sts-blue);
  text-decoration: none;
}

/* Splits under a runner's name (swim / bike / run, T1 / T2 ...) */
.sts-row__splits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--sts-muted);
}

.sts-row__splits span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sts-row__splits b {
  margin-right: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sts-label);
}

/* ------------------------------------------------------------------ */
/* 16. Live results card (green edge, pulsing live icon on the right)  */
/* ------------------------------------------------------------------ */
.sts-live-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-live);
  color: var(--sts-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.sts-page a.sts-live-card,
.sts-page a.sts-live-card:link,
.sts-page a.sts-live-card:visited,
.sts-page a.sts-live-card:hover,
.sts-page a.sts-live-card:focus {
  color: var(--sts-ink);
  text-decoration: none;
}

.sts-live-card:hover {
  background: var(--sts-live-bg);
}

.sts-live-card__text {
  flex: 1;
  min-width: 0;
}

.sts-live-card__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sts-live-ink);
}

.sts-live-card__title {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.sts-live-card__sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--sts-muted);
}

.sts-live-card__icon {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sts-live-bg);
  color: var(--sts-live-ink);
  font-size: 22px;
}

.sts-live-card__icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid var(--sts-live);
  border-radius: 50%;
  animation: sts-live-ring 1.8s ease-out infinite;
}

@keyframes sts-live-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sts-live-card__icon::after { animation: none; opacity: 0.4; }
}

/* ------------------------------------------------------------------ */
/* 17. Stage cards (triathlon / duathlon legs) and transitions strip   */
/* ------------------------------------------------------------------ */
.sts-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sts-gap);
}

.sts-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
}

.sts-stage__value {
  margin: 4px 0 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--sts-ink);
  font-variant-numeric: tabular-nums;
}

.sts-stage__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sts-blue-tint);
  color: var(--sts-blue);
  font-size: 22px;
}

.sts-transitions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
  margin-top: 12px;
  padding: 12px 18px;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-line);
  font-size: 15px;
  color: var(--sts-ink);
  font-variant-numeric: tabular-nums;
}

.sts-transitions b {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sts-label);
}

.sts-transitions__title {
  color: var(--sts-ink);
}

@media (max-width: 700px) {
  .sts-stage-grid {
    grid-template-columns: 1fr;
  }
}

/* Red version for the live video card */
.sts-live-card--video {
  border-left-color: var(--sts-red);
}

.sts-live-card--video:hover {
  background: #fdeaea;
}

.sts-live-card--video .sts-live-card__label {
  color: #a31f1f;
}

.sts-live-card--video .sts-live-card__icon {
  background: #fdeaea;
  color: #b32121;
}

.sts-live-card--video .sts-live-card__icon::after {
  border-color: var(--sts-red);
}

/* Blue version for the live tracking card; --static is for a card that is not a link */
.sts-live-card--track {
  border-left-color: var(--sts-blue);
}

.sts-live-card--track .sts-live-card__label {
  color: var(--sts-blue-ink);
}

.sts-live-card--track .sts-live-card__icon {
  background: var(--sts-blue-tint);
  color: var(--sts-blue);
}

.sts-live-card--track .sts-live-card__icon::after {
  border-color: var(--sts-blue);
}

.sts-live-card--static:hover {
  background: var(--sts-panel);
}

/* ------------------------------------------------------------------ */
/* 18. Home page: hero buttons, search panel, service and news cards,  */
/*     FAQ accordion and customer quotes                               */
/* ------------------------------------------------------------------ */

/* White button for use on the navy band */
.sts-btn--light {
  background: var(--sts-white);
  color: var(--sts-ink);
}

.sts-btn--light:hover {
  background: var(--sts-blue-tint);
}

.sts-page a.sts-btn--light,
.sts-page a.sts-btn--light:link,
.sts-page a.sts-btn--light:visited,
.sts-page a.sts-btn--light:hover,
.sts-page a.sts-btn--light:focus,
.sts-page a.sts-btn--light:active {
  color: var(--sts-ink) !important;
  text-decoration: none;
}

.sts-header__lead {
  margin: 14px 0 0;
  max-width: 780px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--sts-sky-soft);
}

.sts-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.sts-home {
  padding-top: 24px;
  padding-bottom: 36px;
}

.sts-block {
  margin-top: 34px;
}

/* Search race results panel */
.sts-finder {
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
  padding: 20px 22px;
}

.sts-finder__form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
}

.sts-finder .sts-select {
  height: 50px;
  font-size: 16px;
}

.sts-finder__error {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #b30000;
}

/* Grids of cards */
.sts-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sts-gap);
}

/* Service card: icon, title, text, link */
.sts-service {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
  transition: background-color 0.15s ease;
}

.sts-service:hover {
  background: var(--sts-blue-tint);
}

.sts-service__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sts-blue-tint);
  color: var(--sts-blue);
  font-size: 20px;
}

.sts-service:hover .sts-service__icon {
  background: var(--sts-white);
}

.sts-service__title {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--sts-ink);
}

.sts-service__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sts-muted);
}

.sts-page a.sts-service__link,
.sts-page a.sts-service__link:hover,
.sts-page a.sts-service__link:focus {
  font-size: 14px;
  font-weight: 700;
  color: var(--sts-blue);
  text-decoration: none;
}

/* Picture card: news and Race Day Live */
.sts-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
  transition: background-color 0.15s ease;
}

.sts-card:hover {
  background: var(--sts-blue-tint);
}

.sts-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sts-card__body {
  padding: 14px 16px 16px;
}

.sts-card__title {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.sts-page .sts-card__title a,
.sts-page .sts-card__title a:hover {
  color: var(--sts-ink);
  text-decoration: none;
}

.sts-card__meta {
  margin: 0;
  font-size: 13px;
  color: var(--sts-muted);
}

.sts-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sts-muted);
}

/* FAQ accordion (Bootstrap behaviour, theme look) */
.sts-faq .accordion-item {
  margin-bottom: 8px;
  border: 0 !important;
  border-left: 5px solid var(--sts-blue) !important;
  border-radius: 0 !important;
  background: var(--sts-panel);
  overflow: hidden;
}

.sts-faq .accordion-header {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.3;
}

/* the template may decorate headings; none of that belongs on a question */
.sts-faq .accordion-header::before,
.sts-faq .accordion-header::after {
  content: none !important;
}

.sts-faq .accordion-button {
  padding: 16px 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sts-ink) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: none !important;
}

.sts-faq .accordion-button:hover {
  background: var(--sts-blue-tint) !important;
}

.sts-faq .accordion-button:not(.collapsed) {
  background: var(--sts-blue-tint) !important;
  color: var(--sts-blue-ink) !important;
}

/* no heavy outline when the mouse clicks a question; keyboard users still get one */
.sts-faq .accordion-button:focus {
  outline: none;
  box-shadow: none !important;
}

.sts-faq .accordion-button:focus-visible {
  outline: 3px solid var(--sts-blue);
  outline-offset: -3px;
}

.sts-faq .accordion-body {
  padding: 8px 18px 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sts-muted);
}

.sts-faq .accordion-body p {
  margin: 0 0 10px;
}

.sts-faq .accordion-body p:last-child {
  margin-bottom: 0;
}

/* Customer quotes (the slider keeps working) */
.sts-quotes .swiper {
  padding-bottom: 38px;
}

.sts-quotes .testimonial-item {
  padding: 22px 24px;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
  text-align: left;
}

.sts-quotes .stars {
  margin-bottom: 10px;
  color: var(--sts-gold);
}

.sts-quotes .testimonial-item p {
  margin: 0 0 14px;
  font-size: 16px;
  font-style: normal;
  line-height: 1.6;
  color: var(--sts-ink);
}

.sts-quotes .testimonial-item h3 {
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--sts-ink);
}

.sts-quotes .testimonial-item h4 {
  margin: 2px 0 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--sts-muted);
}

.sts-quotes .swiper-pagination-bullet-active {
  background: var(--sts-blue);
}

@media (max-width: 700px) {
  .sts-finder__form {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* 19. Text pages: two columns, readable body text, small pop-up       */
/* ------------------------------------------------------------------ */
.sts-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* On a phone the picture comes first, then the text */
@media (max-width: 860px) {
  .sts-two-col {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sts-two-col__side {
    order: -1;
  }
}

/* Text that comes from the database (headings, paragraphs, lists, links, tables) */
.sts-prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--sts-ink);
  overflow-wrap: break-word;
}

.sts-prose > :first-child {
  margin-top: 0;
}

.sts-prose h1,
.sts-prose h2,
.sts-prose h3,
.sts-prose h4 {
  margin: 28px 0 10px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sts-ink);
}

.sts-prose h1,
.sts-prose h2 { font-size: 24px; }
.sts-prose h3 { font-size: 19px; }
.sts-prose h4 { font-size: 16px; }

.sts-prose p {
  margin: 0 0 14px;
}

.sts-prose ul,
.sts-prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.sts-prose li {
  margin-bottom: 6px;
}

.sts-prose a {
  color: var(--sts-blue);
  font-weight: 600;
  text-decoration: underline;
}

.sts-prose img {
  max-width: 100%;
  height: auto;
}

.sts-prose blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--sts-panel);
  border-left: 5px solid var(--sts-blue);
}

.sts-prose table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}

.sts-prose th,
.sts-prose td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--sts-divider);
  text-align: left;
}

.sts-prose th {
  background: var(--sts-panel);
}

/* Small pop-up that fades out after a few seconds */
.sts-popup {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: 16px 18px;
  background: var(--sts-navy);
  border-left: 5px solid var(--sts-blue);
  color: var(--sts-white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  font-family: var(--sts-font);
  opacity: 1;
  transition: opacity 0.5s ease;
}

.sts-popup.hide {
  opacity: 0;
  pointer-events: none;
}

.sts-popup p {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sts-sky-soft);
}

.sts-popup__close {
  position: absolute;
  top: 4px;
  right: 8px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--sts-sky-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .sts-popup { transition: none; }
}