/* SportsBooking.info — single shared stylesheet.
   Design direction: documentary and sober. Near-black header, off-white paper,
   hairline rules, monospace metadata, one restrained accent. No stock imagery,
   no promotional CTAs, no commercial call-to-action language.
   Palette and type scale are defined once here; pages reference these tokens only. */

:root{
  /* Surfaces */
  --paper:#ffffff;
  --soft:#f4f7f7;
  --line:#d3dee1;
  --dark:#0b1a22;
  --panel:#12262f;

  /* Text (contrast verified against --paper unless noted) */
  --ink:#16262e;        /* 13.6:1 on #fff */
  --muted:#55666e;      /* 5.98:1 on #fff */
  --on-dark:#cfdde2;    /* 12.4:1 on --dark */
  --on-dark-muted:#9fb4bd; /* on --dark */

  /* Interaction */
  --link:#0a6da6;       /* 5.60:1 on #fff */
  --link-hover:#07537d;
  --focus:#0a6da6;      /* focus ring on light surfaces */
  --focus-dark:#c7f36b; /* focus ring on dark surfaces */

  /* Accent — decorative and non-text use only */
  --accent:#c7f36b;
  --accent-ink:#1d3a10;
  --warn-bg:#fdf3e7;
  --warn-line:#c9762b;
  --warn-ink:#5a3210;

  /* Spacing system (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* Type scale (1.25) */
  --t-xs:13px; --t-sm:14px; --t-base:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:36px;
  --radius:10px;
  --wrap:1120px;
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--soft);
  color:var(--ink);
  font:var(--t-base)/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-wrap:break-word;
}

/* ---------- Links and focus ---------- */
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:2px;
}
.strip :focus-visible,header :focus-visible,footer :focus-visible,.ad-slot :focus-visible{
  outline-color:var(--focus-dark);
}

/* Skip link — visually hidden until focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--accent);color:var(--accent-ink);
  padding:var(--s3) var(--s4);font-weight:700;text-decoration:none;
}
.skip:focus{left:var(--s2);top:var(--s2)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.stack>*+*{margin-top:var(--s4)}
.prose{max-width:var(--measure)}

/* Two-column layout only where a genuine secondary column exists */
.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start}
@media (max-width:900px){.with-aside{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------- Utility bar ---------- */
.strip{background:var(--dark);color:var(--on-dark-muted);font-size:var(--t-xs)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;padding-top:var(--s2);padding-bottom:var(--s2)}
.strip strong{color:var(--on-dark)}

/* ---------- Header and navigation (works without JavaScript) ---------- */
.site-header{background:var(--panel);color:var(--on-dark);border-bottom:3px solid var(--accent)}
.site-header .wrap{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);
  align-items:center;justify-content:space-between;
  padding-top:var(--s4);padding-bottom:var(--s4);
}
.brand{display:flex;align-items:center;gap:var(--s3);color:#fff;font-weight:800;font-size:var(--t-lg);text-decoration:none;letter-spacing:-0.02em}
.brand:hover{color:#fff;text-decoration:none}
.brand img{width:34px;height:34px;flex:none}
.site-nav ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none;margin:0;padding:0}
.site-nav a{color:var(--on-dark);text-decoration:none;font-size:var(--t-sm);font-weight:600;padding:var(--s1) 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:#fff;border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--accent)}

/* ---------- Hero ---------- */
.hero{background:var(--panel);color:#fff;border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:var(--s7);padding-bottom:var(--s7)}
.eyebrow{color:var(--accent);font-size:var(--t-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;margin:0}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-0.03em;margin:var(--s3) 0;max-width:22ch}
.hero p{color:var(--on-dark);font-size:var(--t-lg);max-width:62ch;margin:0}

/* ---------- Sections ---------- */
main{display:block}
.section{padding:var(--s7) 0}
.section--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:var(--t-2xl);line-height:1.15;letter-spacing:-0.02em;margin:0 0 var(--s2)}
.section h3{font-size:var(--t-xl);line-height:1.2;letter-spacing:-0.01em;margin:var(--s5) 0 var(--s2)}
.section>.wrap>p{max-width:var(--measure);color:var(--muted)}
.lede{font-size:var(--t-lg);color:var(--ink);max-width:var(--measure)}

/* ---------- Breadcrumb ---------- */
.crumbs{padding-top:var(--s5);font-size:var(--t-xs);color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:var(--s2);color:var(--muted)}
.crumbs a{color:var(--muted)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:var(--s4)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}}

.card,.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.card h3,.panel h3{margin:0 0 var(--s1);font-size:var(--t-lg);letter-spacing:-0.01em}
.card p,.panel p{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--t-sm)}
.tag{display:block;color:var(--muted);font-size:var(--t-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:var(--s1)}
.panel--dark{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.panel--dark h3{color:#fff}
.panel--dark p{color:var(--on-dark-muted)}

/* ---------- Notice ---------- */
.notice{background:var(--warn-bg);border-left:4px solid var(--warn-line);border-radius:0 var(--radius) var(--radius) 0;padding:var(--s4) var(--s5);color:var(--warn-ink)}
.notice p{margin:var(--s2) 0 0;color:inherit}
.notice strong{color:inherit}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-top:var(--s4)}
table{border-collapse:collapse;width:100%;min-width:600px}
caption{text-align:left;padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--muted);border-bottom:1px solid var(--line)}
th,td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:var(--t-sm)}
th{background:var(--soft);font-size:var(--t-xs);letter-spacing:0.06em;text-transform:uppercase;color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td code,th code,code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:0.94em;background:var(--soft);padding:1px 5px;border-radius:4px;border:1px solid var(--line)}
.panel--dark code{background:#0b1a22;border-color:#1d3b48;color:var(--on-dark)}

/* ---------- Lists ---------- */
.linklist{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s2)}
.linklist a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);text-decoration:none;font-weight:600}
.linklist a:hover{border-color:var(--link);text-decoration:underline}
.linklist span{display:block;color:var(--muted);font-weight:400;font-size:var(--t-sm)}

/* ---------- Metadata / record block ---------- */
.record dl{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:var(--s2) var(--s5);margin:var(--s4) 0 0}
.record dt{color:var(--muted);font-size:var(--t-sm);font-weight:700}
.record dd{margin:0;font-size:var(--t-sm)}
.record .gap{color:var(--warn-ink);font-weight:700}
@media (max-width:560px){.record dl{grid-template-columns:1fr;gap:var(--s1)}}

/* ---------- Advertisement slots ----------
   Every slot: visible "Advertisement" label, distinct styling, reserved space,
   responsive width, comfortable margins. Hidden in print (see print block). */
.ad-slot{
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:var(--s3) var(--s4);
  margin:var(--s5) 0;
  min-height:96px;
  display:flex;flex-direction:column;justify-content:center;gap:var(--s1);
}
.ad-slot__label{
  margin:0;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
}
.ad-slot__body{margin:0;font-size:var(--t-sm);color:var(--muted);font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.ad-slot--banner{min-height:120px}
.ad-slot--in-content{min-height:250px}
.ad-slot--sidebar{min-height:420px}
@media (max-width:560px){
  .ad-slot--banner{min-height:100px}
  .ad-slot--in-content{min-height:200px}
  .ad-slot--sidebar{min-height:200px}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:var(--on-dark-muted);margin-top:var(--s8);padding:var(--s7) 0 var(--s5)}
.site-footer h2{font-size:var(--t-xs);letter-spacing:0.1em;text-transform:uppercase;color:#fff;margin:0 0 var(--s3)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s5)}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin:0 0 var(--s2)}
.site-footer a{color:var(--on-dark);text-decoration:none;font-size:var(--t-sm)}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer p{font-size:var(--t-sm);margin:0 0 var(--s3)}
.legal{border-top:1px solid #20323b;margin-top:var(--s6);padding-top:var(--s4);font-size:var(--t-xs);color:var(--on-dark-muted)}
.legal p{margin:0 0 var(--s2)}

/* ---------- Print ---------- */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .strip,.ad-slot,.site-nav,.skip{display:none !important}
  .site-header,.hero,.site-footer,.panel--dark{background:#fff !important;color:#000 !important;border-color:#000}
  .brand,.site-footer a,.hero p,.panel--dark h3,.panel--dark p{color:#000 !important}
  .crumbs{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .section{padding:12pt 0;border:0}
  .table-wrap{overflow:visible;border-color:#000}
  table{min-width:0}
  th,td{border-color:#000}
  .card,.panel,.linklist a{border-color:#000;box-shadow:none}
  .with-aside{display:block}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Forced colors ---------- */
@media (forced-colors:active){
  .ad-slot{border:1px solid CanvasText}
  .site-header{border-bottom:3px solid CanvasText}
}

/* ---------- Forms ---------- */
.form{max-width:600px;margin-top:var(--s4)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-weight:700;font-size:var(--t-sm);margin-bottom:var(--s1)}
.field .hint{display:block;color:var(--muted);font-size:var(--t-xs);font-weight:400;margin-top:var(--s1)}
input[type=text],input[type=email],textarea{
  width:100%;padding:10px var(--s3);border:1px solid var(--line);border-radius:8px;
  font:inherit;color:var(--ink);background:var(--paper);
}
input[type=text]:focus-visible,input[type=email]:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:1px;border-color:var(--link);
}
textarea{min-height:150px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--link);border:1px solid var(--link);border-radius:8px;
  color:#fff;font:inherit;font-weight:700;padding:11px 20px;cursor:pointer;
}
.btn:hover{background:var(--link-hover);border-color:var(--link-hover)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.form-note{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s3)}
/* Honeypot field: hidden from sighted users, still reachable by bots. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Directory grid ---------- */
.directory{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.directory{grid-template-columns:1fr}}
.directory a{display:block;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);text-decoration:none;font-weight:700}
.directory a:hover{border-color:var(--link);text-decoration:underline}
.directory span{display:block;color:var(--muted);font-weight:400;font-size:var(--t-sm);margin-top:var(--s1)}