/* Base styles — bettingguides.co.uk — Editorial magazine aesthetic */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 17px; line-height: 1.7; color: #2c2c2c; background: #fafaf7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
img { max-width: 100%; height: auto; display: block; }
a { color: #1B2D4F; text-decoration: none; transition: color 0.2s, border-color 0.2s; }
a:hover { color: #c48a1a; }
/* Content links — visible underline */
article a:not(.pick-cta):not(.bookie-ad-cta):not(.guide-card):not(.hero-cta):not(.operator-cta) { color: #1B2D4F; font-weight: 600; border-bottom: 2px solid #E8A838; padding-bottom: 1px; }
article a:not(.pick-cta):not(.bookie-ad-cta):not(.guide-card):not(.hero-cta):not(.operator-cta):hover { color: #c48a1a; border-bottom-color: #c48a1a; }
/* Typography — strong hierarchy with weight + size contrast */
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.15; color: #1a1a1a; margin: 0 0 20px 0; letter-spacing: -0.3px; }
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 18px 0; }
ul, ol { margin: 0 0 18px 0; padding-left: 24px; }
li { margin-bottom: 6px; }
strong { color: #1a1a1a; }
figure { margin: 0 0 28px 0; }
figure figcaption { font-size: 13px; color: #888888; margin-top: 10px; font-style: italic; padding-left: 12px; border-left: 2px solid #E8A838; }
/* Subtle noise texture overlay on body */
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; opacity: 0.015; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
/* Last updated stamp */
.last-updated { font-size: 12px; color: #999999; margin-top: 32px; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.last-updated time { color: #666666; }
/* Breadcrumbs */
.breadcrumbs { padding: 16px 0 8px 0; font-size: 12px; color: #999999; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.breadcrumbs a { color: #1B2D4F; border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { border-bottom-color: #1B2D4F; }
.breadcrumbs .separator { margin: 0 8px; color: #cccccc; }
/* Page navigation — editorial sidebar feel */
.page-nav { background: #ffffff; border-left: 4px solid #1B2D4F; padding: 24px 28px; margin-bottom: 36px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.page-nav .page-nav-title { font-size: 11px; font-weight: 800; color: #1B2D4F; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 2px; }
.page-nav .page-nav-list { list-style: none; padding: 0; margin: 0; columns: 1; }
.page-nav .page-nav-list li { margin-bottom: 4px; break-inside: avoid; }
.page-nav .page-nav-list a { font-size: 14px; color: #444444; padding: 5px 0; display: inline-block; border-bottom: 1px dotted #dddddd; transition: all 0.15s; }
.page-nav .page-nav-list a:hover { color: #1B2D4F; border-bottom-style: solid; border-bottom-color: #1B2D4F; }
/* Content sections */
.content-section { padding: 44px 0; }
.content-section .section-title { font-size: 26px; margin-bottom: 24px; position: relative; padding-left: 20px; }
.content-section .section-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: #E8A838; border-radius: 2px; }
/* Divider between sections */
.content-section + .content-section { border-top: 1px solid #e8e8e4; }
/* Info boxes — editorial callout */
.info-box { background: #f0f3f7; border-left: 4px solid #1B2D4F; padding: 24px 28px; margin: 28px 0; position: relative; }
.info-box::before { content: 'i'; position: absolute; top: -10px; left: -12px; width: 22px; height: 22px; background: #1B2D4F; color: #ffffff; border-radius: 50%; font-size: 12px; font-weight: 800; text-align: center; line-height: 22px; font-style: italic; }
.info-box .info-box-title { font-size: 15px; font-weight: 800; color: #1B2D4F; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.info-box p:last-child { margin-bottom: 0; }
/* Warning/caution boxes */
.warning-box { background: #fdf8ee; border-left: 4px solid #E8A838; padding: 24px 28px; margin: 28px 0; position: relative; }
.warning-box::before { content: '!'; position: absolute; top: -10px; left: -12px; width: 22px; height: 22px; background: #E8A838; color: #ffffff; border-radius: 50%; font-size: 13px; font-weight: 800; text-align: center; line-height: 22px; }
.warning-box .warning-box-title { font-size: 15px; font-weight: 800; color: #8a6914; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.warning-box p:last-child { margin-bottom: 0; }
/* Data tables — clean with strong header */
.data-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 14px; }
.data-table th { background: #1a1a1a; color: #ffffff; padding: 14px 18px; text-align: left; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.data-table th:first-child { border-radius: 4px 0 0 0; }
.data-table th:last-child { border-radius: 0 4px 0 0; }
.data-table td { padding: 14px 18px; border-bottom: 1px solid #eaeae6; color: #444444; }
.data-table tr:nth-child(even) td { background: #f5f5f1; }
.data-table tr:hover td { background: #eef1f7; }
/* Responsive table wrapper */
.table-wrap { overflow-x: auto; margin-bottom: 28px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.table-wrap .data-table { margin-bottom: 0; }
/* Checklist */
.checklist { list-style: none; padding: 0; }
.checklist li { padding: 12px 0 12px 36px; position: relative; border-bottom: 1px solid #eaeae6; font-size: 15px; }
.checklist li::before { content: ''; position: absolute; left: 0; top: 15px; width: 20px; height: 20px; border: 2px solid #1B2D4F; border-radius: 4px; background: #f0f3f7; }
/* FAQ — bold accordion */
.faq-list { margin-bottom: 36px; }
.faq-item { border: none; border-bottom: 2px solid #eaeae6; margin-bottom: 0; overflow: hidden; background: transparent; }
.faq-item:first-child { border-top: 2px solid #eaeae6; }
.faq-item .faq-question { padding: 20px 48px 20px 0; font-weight: 700; font-size: 17px; cursor: pointer; position: relative; color: #1a1a1a; user-select: none; transition: color 0.2s; }
.faq-item .faq-question:hover { color: #1B2D4F; }
.faq-item .faq-question::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: #1B2D4F; transition: transform 0.3s; }
.faq-item.active .faq-question::after { content: '-'; }
.faq-item .faq-answer { display: none; padding: 0 0 20px 0; color: #555555; line-height: 1.7; }
.faq-item.active .faq-answer { display: block; }
/* Cookie consent */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1a1a; color: #ffffff; padding: 18px 24px; z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.cookie-banner a { color: #E8A838; }
.cookie-banner .cookie-accept { background: #1B2D4F; color: #ffffff; border: none; padding: 10px 28px; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 13px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
.cookie-banner .cookie-accept:hover { background: #152642; }
/* Author profile (about page) */
.author-profile { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 28px; }
.author-profile .author-image { flex-shrink: 0; }
.author-profile .author-image img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.author-profile .author-bio { flex: 1; min-width: 240px; }
.author-profile .author-bio h3 { font-size: 22px; margin-bottom: 4px; }
.author-profile .author-role { font-size: 13px; font-weight: 700; color: #E8A838; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
/* Author byline (on all content pages) */
.byline { display: flex; align-items: center; gap: 10px; margin-top: 32px; margin-bottom: 24px; }
.byline .byline-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.byline .byline-text { font-size: 12px; color: #999999; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.byline .byline-text a { color: #1B2D4F; font-weight: 700; border-bottom: none; }
.byline .byline-text a:hover { color: #E8A838; }
.byline .byline-sep { color: #dddddd; margin: 0 2px; }
/* Contact form */
.contact-details { background: #ffffff; border-left: 4px solid #1B2D4F; padding: 20px 24px; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.contact-details p { margin-bottom: 8px; }
.contact-details p:last-child { margin-bottom: 0; }
.contact-form { max-width: 600px; margin-bottom: 36px; }
.contact-form .form-group { margin-bottom: 20px; }
.contact-form .form-group label { display: block; font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.contact-form .form-group input, .contact-form .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; font-family: inherit; color: #2c2c2c; background: #ffffff; transition: border-color 0.2s; }
.contact-form .form-group input:focus, .contact-form .form-group textarea:focus { outline: none; border-color: #1B2D4F; box-shadow: 0 0 0 3px rgba(27, 45, 79, 0.08); }
.contact-form .form-group textarea { resize: vertical; min-height: 140px; }
.contact-form .form-submit { display: inline-block; background: #1B2D4F; color: #ffffff; font-size: 14px; font-weight: 700; padding: 14px 36px; border-radius: 6px; cursor: pointer; transition: background 0.2s; text-transform: uppercase; letter-spacing: 0.5px; }
.contact-form .form-submit:hover { background: #E8A838; color: #1B2D4F; }
/* Affiliate disclosure */
.affiliate-disclosure { background: transparent; border-top: 1px solid #e8e8e4; border-bottom: 1px solid #e8e8e4; padding: 14px 0; font-size: 12px; color: #999999; margin-bottom: 28px; letter-spacing: 0.2px; }
.affiliate-disclosure strong { color: #666666; }
/* Stats / infographic cards */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; }
.stats-card { background: #1B2D4F; border-radius: 8px; padding: 24px 16px; text-align: center; position: relative; overflow: hidden; }
.stats-card::after { content: ''; position: absolute; top: -20px; right: -20px; width: 60px; height: 60px; border-radius: 50%; background: rgba(212, 160, 36, 0.15); }
.stats-card .stats-value { font-size: 36px; font-weight: 800; color: #E8A838; line-height: 1; margin-bottom: 6px; }
.stats-card .stats-label { font-size: 12px; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
/* Scroll reveal animations */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Stagger children in grids */
.guides-grid.visible .guide-card { opacity: 1; transform: translateY(0); }
.guides-grid .guide-card { transition-delay: calc(var(--i, 0) * 0.08s); }
/* Responsive */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
  .content-section { padding: 56px 0; }
  .content-section .section-title { font-size: 30px; }
  .page-nav .page-nav-list { columns: 2; column-gap: 32px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; letter-spacing: -0.5px; }
  h2 { font-size: 34px; }
  h3 { font-size: 24px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}