/* Bussloo Swim Livetiming – refreshed stylesheet (2026)
   Based on existing Splash Meet Manager CSS, modernized for readability + mobile.
   Palette inspired by the Bussloo Swim logo and the Recreatieplas Bussloo location photo:
   deep lake blue, open-water blue, reed/grass green and warm sun yellow.
*/

/* =========================
   Design tokens
========================= */
:root{
  /* Bussloo palette */
  --bussloo-deep: #043952;     /* dark logo blue */
  --bussloo-deep-2: #022b3f;   /* darker lake/navy */
  --bussloo-blue: #168fbd;     /* wave/open-water blue */
  --bussloo-blue-2: #4d90c1;   /* lake photo blue */
  --bussloo-green: #4f9a37;    /* logo grass green, slightly deepened for contrast */
  --bussloo-green-2: #8fad55;  /* natural reed/shore tone */
  --bussloo-sun: #f3c623;      /* sun yellow */

  /* Backwards-compatible aliases used throughout the original stylesheet */
  --dwk-orange: var(--bussloo-sun);
  --dwk-orange-2: var(--bussloo-green);
  --dwk-navy: var(--bussloo-deep);
  --dwk-navy-2: var(--bussloo-deep-2);
  --dwk-sky: #d9edf8;

  --bg: #f2f8f9;
  --surface: #ffffff;
  --text: #102431;
  --muted: #617380;
  --border: #d8e8ec;

  --radius: 14px;
  --shadow: 0 10px 25px rgba(4,57,82,.09);

  --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: linear-gradient(180deg, #eaf6fb 0%, var(--bg) 34%, #f7fbf5 100%);
  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: 9;}

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

/* 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(120deg, rgba(4,57,82,.96) 0%, rgba(22,143,189,.94) 62%, rgba(105,184,74,.92) 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(243,198,35,.34), rgba(243,198,35,0) 62%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%);
  transform: rotate(8deg);
  pointer-events:none;
}

#header table{
  font-family: var(--font-head);
  border: 0;
  color: #fff;
  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,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(4,57,82,.12);
  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(22,143,189,.08);
  border: 1px solid rgba(22,143,189,.14);
  display:inline-block;
}

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

/* active tab (Splash uses inline style) */
#navigation a[style="font-weight: bold; text-decoration: none;"]{
  color: #fff !important;
  background: var(--bussloo-green) !important;
  border-color: rgba(105,184,74,.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(--bussloo-blue); text-decoration: underline; }

/* =========================
   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);
}

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

/* Row striping – keep existing class names */
.trList1{ background-color: rgba(22,143,189,.055); }
.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 highlights the warm Bussloo sun accent */
#tab0 .title1{
  font-family: var(--font-head);
  font-weight: 900;
  padding-bottom: 6px;
  color: var(--bussloo-green);
  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(--bussloo-deep); font-weight: 800; }

/* Tables: spacing */
#results td{ padding: 6px 8px; }
#results tr:hover td{ background: rgba(105,184,74,.09); }

/* 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(4,57,82,.07);
  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: linear-gradient(120deg, var(--bussloo-deep-2) 0%, var(--bussloo-deep) 72%, #104b3b 100%);
  color:#fff;
  font-family: var(--font-ui);
  border-top: 1px solid rgba(255,255,255,.10);
}

#footer::before{
  content: "Bussloo Swim 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; }
}