/* BZ&PC Open Water Livetiming – refreshed stylesheet (2026)
   Based on existing Splash Meet Manager CSS, recoloured for the Bodegraven open-water event.
   Palette: BZ&PC deep navy + shark teal + open-water blue + buoy yellow.
*/

/* =========================
   Design tokens
========================= */
:root{
  --dwk-orange: #f2c945;   /* BZ&PC buoy yellow / logo accent */
  --dwk-orange-2: #f7d96b; /* lighter yellow accent */
  --dwk-navy: #182866;     /* BZ&PC deep navy */
  --dwk-navy-2: #0c1c43;   /* darker event navy */
  --dwk-sky: #b8d9e7;      /* open-water sky/water blue */
  --bg: #eef5f8;
  --surface: #ffffff;
  --text: #10202b;
  --muted: #5d6f78;
  --border: #d7e5eb;

  --radius: 14px;
  --shadow: 0 10px 25px rgba(12,28,67,.10);

  --maxw: 1040px;          /* new responsive max width */
  --pad: 20px;

  /* Font stack: keep it fast + reliable (no external dependencies) */
  --font-ui: Rubik, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: Montserrat, Rubik, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================
   Base
========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: var(--font-ui);
  font-size: 16px;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}

/* Keep original DOM ordering tweaks */
body{ display:flex; flex-direction:column; }
#headerkop{ order: 1;}
#header{ order: 2;}
#navigation{ order: 3;}
#lastupdate{ order: 4;}
#freeText{ order: 5;}
#noscript{ order: 6;}
#results{ order: 7;}
#reclame{ order: 8;}
#footer{ order: 10;}
#splashnew { order: 9;}

/* Links */
a{ color: var(--dwk-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ color: var(--dwk-orange); }

/* Utilities for the Splash markup */
.tab{ border:none; display:none; vertical-align:top; }
.tab tr td:first-child{ padding-left: 6px; }

/* =========================
   Layout containers
========================= */
#lastupdate,
#results,
#freeText,
#navigation table,
#header table{
  width: min(100% - (2 * var(--pad)), var(--maxw));
  margin-left: auto;
  margin-right: auto;
}

#results{ margin-top: 18px; margin-bottom: 22px; }
#lastupdate{
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
}

#noscript{
  border:none;
  font-size: 13px;
  font-weight: 700;
  color: #b91c1c;
  margin: 14px auto 18px;
  text-align: center;
  width: min(100% - (2 * var(--pad)), 780px);
}

/* =========================
   Header
========================= */
#header{
  background: linear-gradient(110deg, var(--dwk-navy-2) 0%, var(--dwk-navy) 46%, #164b56 100%);
  border: none;
  width: 100%;
  min-height: 96px;
  position: relative;
  overflow: hidden;
}

/* subtle “wave” highlight */
#header::after{
  content:"";
  position:absolute;
  inset:-40px -120px auto auto;
  width: 420px;
  height: 220px;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  transform: rotate(8deg);
  pointer-events:none;
}

#header table{
  font-family: var(--font-head);
  border: 0;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  height: 96px;
  position: relative;
  z-index: 1;
}

#header table td{ padding: 10px 8px; }

#headerkop{
  width: auto;
  display:flex;
  justify-content: space-between;
  align-items:center;
  height: 80px;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

#headerkop img{
  height: 56px;
  margin-top: 0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

#rechts img{ margin-left: 7px; margin-right: 7px; }

/* =========================
   Navigation (sticky)
========================= */
#navigation{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(24,40,102,.14);
  position: sticky;
  top: 0;
  z-index: 999;
}

#navigation table{
  height: 56px;
  font-size: 0; /* original trick */
  display:flex;
  align-items:center;
  gap: 10px;
}

#navigation a{
  font-size: 14px;
  color: var(--dwk-navy);
  text-decoration: none !important;
  font-weight: 700 !important;
  padding: 8px 12px;
  border-radius: 999px;
  transition: 0.15s ease;
  background: rgba(24,40,102,.06);
  border: 1px solid rgba(24,40,102,.10);
  display:inline-block;
}

#navigation table a:hover{
  color: #fff;
  background: var(--dwk-navy);
  border-color: var(--dwk-navy);
  text-decoration: none !important;
}

/* active tab (Splash uses inline style) */
#navigation a[style="font-weight: bold; text-decoration: none;"]{
  color: #fff !important;
  color: var(--dwk-navy-2) !important;
  background: var(--dwk-orange) !important;
  border-color: rgba(242,201,69,.45) !important;
}

/* keep original ids present */
a#href0,a#href1,a#href2,a#href3,a#href4{
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* =========================
   Free text block
========================= */
#freeText{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  margin: 18px auto;
  padding: 16px 18px;
}

#freeText a{ color: var(--dwk-navy); }
#freeText a:hover{ color: var(--dwk-navy-2); text-decoration: underline; text-decoration-color: var(--dwk-orange); }

/* =========================
   Results area
========================= */
#results{
  line-height: 1.7;
}

/* “Cards” for each tab’s first table – makes sections read like blocks.
   Works with typical Splash markup: .tab table:first-child is the header table for a tab.
*/
.tab table:first-child{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--dwk-orange);
}

/* inner tables that follow: keep them clean */
.tab table{
  width: 100%;
}

/* Row striping – keep existing class names */
.trList1{ background-color: rgba(24,40,102,.045); }
.trList0{ background-color: transparent; }

/* Titles */
.title1,
.title2{
  color: var(--dwk-navy);
  font-weight: 900;
  font-size: 22px;
  font-family: var(--font-head);
}

/* Special: first tab title now uses BZ&PC navy for a stronger logo match */
#tab0 .title1{
  font-family: var(--font-head);
  font-weight: 900;
  padding-bottom: 6px;
  color: var(--dwk-navy);
  font-size: 22px;
  font-style: normal;
}

/* Align helpers (keep original names) */
.leftText{}
.centerText{ text-align:left; }
.rightText{ text-align:right; }
td.leftText[colspan]:not([colspan="1"]){ color: var(--dwk-navy); font-weight: 800; }

/* Tables: spacing */
#results td{ padding: 6px 8px; }
#results tr:hover td{ background: rgba(242,201,69,.14); }

/* PDF icon handling (keep existing behavior) */
.tab table:first-child tr:not(.trList1) a[href $='.pdf'],
#freeText a[href $='.pdf']{
  background: transparent url('pdf.png') no-repeat center left;
  line-height: 20px;
  padding: 1px 0 1px 18px;
}
.tab table:first-child tr.trList0 a[href $='.pdf']{
  background: none;
  padding: 0;
}

/* =========================
   Sponsor/ads grid
========================= */
#reclame{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 22px auto;
  width: min(100% - (2 * var(--pad)), var(--maxw));
}

#reclame a{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(12,28,67,.08);
  padding: 10px;
  min-height: 64px;
}

#reclame a:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

/* =========================
   Footer
========================= */
#footer{
  padding: 40px 16px;
  display:block;
  text-align:center;
  width:100%;
  background: var(--dwk-navy);
  color:#fff;
  font-family: var(--font-ui);
  border-top: 1px solid rgba(255,255,255,.10);
}

#footer::before{
  content: "BZ&PC Open Water Livetiming | ";
  font-weight: 800;
}

/* =========================
   Mobile tweaks
========================= */
@media (max-width: 720px){
  :root{ --pad: 14px; }
  #header table{ font-size: 18px; }
  #navigation table{ height:auto; padding: 10px 0; flex-wrap: wrap; }
  #navigation a{ font-size: 13px; padding: 7px 10px; }
  #results td{ padding: 6px 6px; }
}