/* Off to the Snooker: "arena at night" redesign, October 2026.
   Drop-in component layer. Keep the existing fonts (Zilla Slab 500-700, Libre Franklin 400-700).
   Dark is the default; [data-theme="light"] is the light-mode switch. */

:root {
  --ground: #0D1310;      /* page background (arena dark) */
  --band: #111A15;        /* alternate section background */
  --panel: #18241D;       /* cards */
  --panel-2: #142019;     /* card footers, inset rows */
  --line: #22332A;        /* card borders */
  --line-2: #2D4236;      /* chip borders */
  --ink: #F2EFE6;         /* main text */
  --ink-2: #C9D2CB;       /* secondary text */
  --muted: #A9B5AC;       /* captions (AA on --ground and --panel) */
  --gold: #E8B84A;        /* scoreboard values, primary buttons */
  --gold-hi: #F6D27E;     /* link hover, gold on green */
  --baize: #1B5E3B;       /* rules, green panels */
  --baize-bright: #1F7A4A;/* table cloth */
  --cushion: #2A1A10;     /* score panel, footer */
  --cushion-edge: #4A2E1C;
  --paper: #F4F1E8;       /* light bands */
  --paper-ink: #16201A;
  --paper-muted: #4A5750;
  --red: #C8303A; --yellow: #F2C744; --green: #2E8B57; --brown: #7A4A26;
  --blue: #2A63C9; --pink: #E58FA6; --black: #151515;
  --radius: 16px;
  --max: 1200px;
  --slab: 'Zilla Slab', Georgia, serif;
  --sans: 'Libre Franklin', system-ui, sans-serif;
}
[data-theme="light"] {
  --ground: #F7F5EF; --band: #EFEBE0; --panel: #FFFFFF; --panel-2: #F7F5EF;
  --line: #E2DCCB; --line-2: #D6CFBB; --ink: #16201A; --ink-2: #33413A; --muted: #4A5750;
}
/* The hero, score panel, footer and green "stay" panel stay dark in both themes. */

body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); }
a { color: var(--gold); } a:hover { color: var(--gold-hi); }
[data-theme="light"] a { color: #1B5E3B; } [data-theme="light"] a:hover { color: #0F3D26; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--slab); font-weight: 700; letter-spacing: -0.5px; line-height: 1.08; }
h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -1.4px; }
h2 { font-size: clamp(30px, 3.4vw, 44px); }
.section { padding: 88px 0; }
.section--band { background: var(--band); }
.section--paper { background: var(--paper); color: var(--paper-ink); }
.section--paper p { color: #33413A; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.section--paper .eyebrow { color: var(--baize); }
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 560px; }

/* Header */
.site-head { background: #0D1310; color: #F2EFE6; border-bottom: 1px solid rgba(232,184,74,.18); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #F2EFE6; font-family: var(--slab); font-weight: 700; font-size: 24px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nav a { color: #F2EFE6; text-decoration: none; font-weight: 500; padding: 10px 14px; border-radius: 8px; }
.nav a:hover { background: rgba(255,255,255,.06); color: #F2EFE6; }
.theme-btn { font: inherit; font-size: 14px; color: #F2EFE6; background: transparent; border: 1px solid rgba(242,239,230,.35); border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer; }

/* Hero (always dark) */
.hero { background: radial-gradient(ellipse 55% 70% at 74% 42%, rgba(255,236,190,.13), rgba(255,236,190,0) 70%), #0D1310; color: #F2EFE6; padding: 72px 0 96px; }
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero__text { flex: 1 1 440px; min-width: 0; }
.hero__art { flex: 1 1 520px; min-width: 0; position: relative; }
.hero__art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
/* Photo hero for venue pages */
.hero--photo { position: relative; overflow: hidden; padding: 40px 0 72px; background: #0D1310; }
.hero--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.hero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,19,16,.96) 0%, rgba(13,19,16,.78) 50%, rgba(13,19,16,.45) 100%); }
.hero--photo .wrap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; }
.photo-credit { font-size: 12px; color: #9BA89F; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 10px; font-weight: 700; text-decoration: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.btn--gold { background: var(--gold); color: #0D1310; } .btn--gold:hover { background: var(--gold-hi); color: #0D1310; }
.btn--ghost { border: 1px solid rgba(242,239,230,.5); color: #F2EFE6; background: transparent; }
.btn--green { background: var(--baize); color: #fff; }

/* Signature score panel: for "at a glance" facts only */
.scorepanel { background: var(--cushion); border: 2px solid var(--cushion-edge); border-radius: 14px; padding: 18px 22px; box-shadow: 0 24px 48px rgba(0,0,0,.55); color: #F2EFE6; flex: 0 1 400px; min-width: 280px; }
.scorepanel__title { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; color: #C9D2CB; }
.scorepanel__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--baize); }
.scorepanel__row:last-child { border-bottom: 0; }
.scorepanel__row span { font-size: 14px; color: #D6DDD7; }
.scorepanel__row b { font-family: var(--slab); font-weight: 700; font-size: 19px; color: var(--gold); text-align: right; }

/* Snooker balls: numbered markers. Use ball value colours in order red 1, yellow 2, green 3,
   brown 4, blue 5, pink 6, black 7. Text: dark on yellow/pink, white on the rest. */
.ball { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--slab); font-weight: 700; font-size: 18px; color: #fff; box-shadow: inset -6px -6px 10px rgba(0,0,0,.35), inset 4px 4px 8px rgba(255,255,255,.25); }
.ball--red { background: var(--red); } .ball--yellow { background: var(--yellow); color: #2A1A10; }
.ball--green { background: var(--green); } .ball--brown { background: var(--brown); }
.ball--blue { background: var(--blue); } .ball--pink { background: var(--pink); color: #2A1A10; }
.ball--black { background: var(--black); }

/* Cards and grids */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
a.card:hover { border-color: var(--gold); color: var(--ink); }
.card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: var(--panel-2); border-top: 1px solid var(--line); font-size: 14px; }
.card__date { font-family: var(--slab); font-weight: 700; font-size: 30px; color: var(--gold); }
[data-theme="light"] .card__date, [data-theme="light"] .price-big { color: #8A6512; }
.card__title { font-family: var(--slab); font-weight: 600; font-size: 24px; line-height: 1.15; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); }
.chip--gold { color: var(--gold); }
.price-big { font-family: var(--slab); font-weight: 700; font-size: 44px; line-height: 1; color: var(--gold); }

/* Venue photo cards */
.venue-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 260px; }
.venue-card { position: relative; display: block; border-radius: 18px; overflow: hidden; color: #F2EFE6; text-decoration: none; background: #18241D; }
.venue-card--feature { grid-row: span 2; }
.venue-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.venue-card:hover img { transform: scale(1.03); }
.venue-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,19,16,0) 30%, rgba(13,19,16,.92) 100%); }
.venue-card__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; z-index: 1; }
.venue-card__name { font-family: var(--slab); font-weight: 700; font-size: 30px; line-height: 1.08; }
.venue-card--feature .venue-card__name { font-size: 40px; }

/* Sticky section tabs on hubs and event pages */
.section-tabs { position: sticky; top: 0; z-index: 5; background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tabs .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; }
.section-tabs a { flex: none; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 16px; border-radius: 999px; }
.section-tabs a[aria-current="true"], .section-tabs a:hover { background: var(--gold); color: #0D1310; }

/* Two-tables / one-table diagram */
.tables-diagram { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.felt { background: var(--baize-bright); border-radius: 12px; padding: 24px 16px; display: grid; grid-template-columns: 1fr 8px 1fr; gap: 12px; align-items: center; }
.felt--one { display: flex; justify-content: center; }
.felt__table { height: 60px; border-radius: 6px; background: #2E9A5E; border: 5px solid #3B2416; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; min-width: 60%; }
.felt__partition { height: 96px; background: #0D1310; border-radius: 3px; }
.seat-band { padding: 14px 12px; border-radius: 8px; font-weight: 700; text-align: center; }

/* Price-by-round bars */
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 16px; align-items: center; }
.bar__track { background: var(--panel); border-radius: 8px; height: 44px; overflow: hidden; }
.bar__fill { height: 100%; min-width: 18%; background: var(--baize-bright); border-right: 4px solid var(--gold); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; box-sizing: border-box; font-family: var(--slab); font-weight: 700; font-size: 20px; color: #F2EFE6; }

/* Green "where to stay" panel (always dark green). The Booking.com CJ link is its gold button. */
.stay-panel { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--baize); color: #F2EFE6; border-radius: 22px; padding: 44px; }
.stay-panel p { color: #E3EDE6; }
.stay-panel .eyebrow { color: var(--gold-hi); }
.stay-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #164E31; border-radius: 12px; padding: 16px 18px; }
.stay-row b { font-family: var(--slab); font-size: 22px; color: var(--gold-hi); white-space: nowrap; }

/* Other affiliate slots (train, parking, experiences, kit): compact CTA card, never a dashed box */
.cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-left-width: 1px; border-radius: 14px; padding: 18px 20px; margin: 24px 0; }
.cta-card__label { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }

/* Long-form reading: every hub, event, guide and accessibility page body */
.prose { max-width: 740px; font-size: 18px; line-height: 1.68; color: var(--ink); }
.prose p, .prose li { color: var(--ink); }
.prose h2 { margin: 56px 0 16px; padding-top: 18px; border-top: 3px solid var(--baize); }
.prose h3 { font-size: 24px; margin: 32px 0 10px; }
.prose ul { padding-left: 1.2em; } .prose li { margin: 6px 0; }
.allowed li::marker { color: var(--green); } .not-allowed li::marker { color: var(--red); }
.gap-note { display: inline; background: rgba(229,143,166,.14); color: var(--ink); border-radius: 4px; padding: 1px 6px; font-size: .92em; }

/* Data tables (price sheets, timetables) */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 24px 0; }
.table-scroll table { border-collapse: collapse; width: 100%; font-size: 15px; }
.table-scroll th { background: var(--cushion); color: var(--gold); font-family: var(--slab); font-weight: 600; text-align: left; padding: 12px 14px; white-space: nowrap; }
.table-scroll td { padding: 11px 14px; border-top: 1px solid var(--line); }
.table-scroll tr:nth-child(even) td { background: var(--panel-2); }

/* FAQs */
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; margin: 10px 0; }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; min-height: 24px; }
.faq details[open] summary { color: var(--gold); }

/* Footer (always cushion brown) */
.site-foot { background: var(--cushion); color: #E9E2D4; padding: 48px 0; }
.site-foot a { color: #F2EFE6; }
.dydq { display: flex; align-items: center; gap: 14px; background: #F4F1E8; color: #16201A; border-radius: 14px; padding: 14px 18px; max-width: 440px; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .venue-card img { transition: none; } }
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .tables-diagram { grid-template-columns: 1fr; }
  .stay-panel { padding: 28px; }
  .venue-card--feature { grid-row: span 1; }
}

/* Responsive and AA refinements, using approved component classes and palette values. */
.hero .lede,.hero .small,.hero .crumbs,.hero .crumbs a{color:#C9D2CB}.hero .crumbs{width:100%;margin-bottom:8px}.hero>.wrap>.small{width:100%}.hero__text{min-width:0}.hero__art .scorepanel{position:absolute;left:0;bottom:-36px;max-width:100%}.scorepanel__row>*{min-width:0;overflow-wrap:anywhere}.scorepanel__row a{color:var(--gold)}.scorepanel__row span{flex:1}.scorepanel__row b{flex:1}.scorepanel__title{text-transform:uppercase}.photo-credit{padding-top:14px;padding-bottom:14px;line-height:1.5}.photo-credit p{margin:4px 0}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}.card__body h3{margin:0}.card__body p{margin:0}.card__body .ball{margin-bottom:6px}.prose:has(>.grid),.prose:has(>.stay-panel),.prose:has(>.bars){max-width:var(--max)}.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>details{max-width:740px}.prose h2{margin-top:0}.prose .card{font-size:16px;line-height:1.55}.prose .card h3{margin-top:0}.prose .table-scroll{max-width:100%}.table-scroll table{min-width:560px}.table-scroll th[scope=row]{white-space:normal}.table-scroll caption{color:var(--muted)}.section-tabs a{min-height:44px;display:inline-flex;align-items:center}.section-tabs .wrap{max-width:100%;overscroll-behavior-x:contain}
.section--paper{--ink:#16201A;--ink-2:#33413A;--muted:#4A5750;--panel:#FFFFFF;--panel-2:#F7F5EF;--line:#E2DCCB;--line-2:#D6CFBB}.section--paper .prose p,.section--paper .prose li,.section--paper .prose{color:var(--paper-ink)}.section--paper a{color:var(--baize)}.section--paper .card{color:var(--paper-ink)}.section--paper .gap-note{color:var(--paper-ink)}.felt__table{color:#0D1310}.ball--green{color:#0D1310}.section--paper .felt{color:#F2EFE6}
.stay-panel>*{min-width:0;max-width:100%}.stay-panel .local-groups{width:100%}.stay-panel .local-groups article{background:#164E31;border-color:var(--baize)}.stay-panel li,.stay-panel h3,.stay-panel a:not(.btn){color:#F2EFE6}.stay-panel .stay-row{display:block;list-style:none}.stay-panel .btn{color:#0D1310}.stay-panel>p,.stay-panel li{color:#E3EDE6}.stay-panel .gap-note{color:#F2EFE6}.stay-panel .prose p{color:#E3EDE6}.stay-panel h2,.stay-panel h3{color:#F2EFE6}.stay-panel ul{padding:0}.stay-panel .stay-row b{white-space:normal}.stay-panel .local-groups li{margin:10px 0}
[data-theme=light] .hero a,[data-theme=light] .site-head a,[data-theme=light] .site-foot a{color:#F2EFE6}[data-theme=light] .hero a:not(.btn):hover{color:var(--gold-hi)}[data-theme=light] .hero .scorepanel a{color:var(--gold)}[data-theme=light] .btn--gold,[data-theme=light] .hero .btn--gold,[data-theme=light] .stay-panel .btn--gold{color:#0D1310}[data-theme=light] .btn--green{color:#FFFFFF}[data-theme=light] .venue-card,[data-theme=light] .venue-card:hover{color:#F2EFE6}[data-theme=light] .stay-panel a:not(.btn){color:#F2EFE6}[data-theme=light] .chip--gold,[data-theme=light] .cost-result output,[data-theme=light] .faq details[open] summary{color:#8A6512}.section--paper .faq details[open] summary{color:#1B5E3B}.cta-card .btn{min-height:44px}.cta-card p{margin:0}.cta-card__label{width:100%}.cta-card a{white-space:normal}.btn{max-width:100%;text-align:center}.dydq b{color:#16201A}.site-foot .small{color:#E9E2D4}
p,li,td,.card__title,a,summary{overflow-wrap:anywhere}.wrap,.prose,.grid,.tables-diagram,.hero__art,.hero__text{min-width:0}.site-foot a,.site-head a{min-height:44px}.faq summary{min-height:56px}.venue-card__text{text-shadow:0 2px 8px #0D1310}.venue-card .chip{background:#0D1310}.bar__fill{min-width:80px}.bar{grid-template-columns:minmax(100px,180px) minmax(0,1fr)}
@media(max-width:600px){.hero{padding-top:40px;padding-bottom:80px}.hero .wrap{gap:28px}.hero__art{margin:16px 0 28px}.scorepanel{min-width:0;flex-basis:100%;width:100%}.scorepanel__row{gap:12px}.scorepanel__row b{font-size:18px}.stay-panel{gap:24px}.stay-panel .local-groups{grid-template-columns:1fr}.hero--photo .wrap{gap:24px}.card__date{font-size:27px}.bar{grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:10px}.table-scroll .comparison-cards{min-width:0}.comparison-cards th,.comparison-cards td{color:var(--ink)!important}.comparison-cards tbody tr{background:var(--panel)}.prose{font-size:18px}.brand{font-size:22px}.hero__art .scorepanel{position:relative;bottom:auto;margin-top:-24px}.section-tabs .wrap{padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.prose .stay-panel p{color:#E3EDE6}.section--paper .btn--gold{color:#0D1310}[data-theme=light] .photo-credit{color:var(--muted)}[data-theme=light] .photo-credit div{color:var(--muted)}

.venue-card__text{background:rgba(13,19,16,.92)}

.ball--green b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#F2EFE6;color:var(--black);font:inherit}.section--paper :focus-visible,[data-theme=light] :focus-visible{box-shadow:0 0 0 5px var(--baize)}

/* Fix 10 Oct 2026: always-dark regions keep light text in both themes; paper bands keep dark text. */
.hero, .hero--photo, .site-head, .site-foot, .scorepanel, .stay-panel {
  --ink: #F2EFE6; --ink-2: #C9D2CB; --muted: #A9B5AC; color: #F2EFE6;
}
.hero h1, .hero h2, .hero h3, .hero p, .hero--photo h1, .hero--photo h2, .hero--photo p,
.scorepanel span, .stay-panel h2, .stay-panel h3 { color: inherit; }
.hero .lede, .hero--photo .lede { color: #C9D2CB; }
.hero .eyebrow, .hero--photo .eyebrow, .scorepanel__row b { color: #E8B84A; }
.section--paper, .section--paper .prose, .section--paper .prose p, .section--paper .prose li,
.section--paper h2, .section--paper h3 { color: #16201A; }
.section--paper .prose p, .section--paper .prose li { color: #26332C; }
.table-scroll th a, [data-theme="light"] .table-scroll th a { color: #E8B84A; }