/* ================================================================ global.css — shared PredictLix styles for ALL pages (extracted from the inline <style> in templates/header.php, 2026-08-31) Contains: reset, header/nav, buttons, badges, predictions-table base, container, sections and shared components. Page-unique styles live in their own files (about.css etc.) ================================================================ */
* { margin:0;padding:0;box-sizing:border-box }
html { font-size: 16px;scroll-behavior: smooth }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;color: #0f172a;background: #f8fafc;line-height: 1.6;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale }
.header { background: #ffffff;box-shadow: 0 1px 3px rgba(0,0,0,0.1);position: sticky;top: 0;z-index: 1000;height: 70px }
.header-content { display: flex;align-items: center;height: 70px;padding: 0 1rem;gap: 0.5rem }
.logo { display: flex;align-items: center;gap: 0.5rem;font-weight: 700;font-size: 1.5rem;color: #134dce;text-decoration: none;flex-shrink: 0 }
a.logo:hover { transform: scale(1.05);color: #134dce }
.logo-icon { font-size: 2rem }
.logo-text { display: inline-block }
.nav { display: flex;align-items: center;gap: 0.5rem;margin-left: auto }
.nav-link { padding: 0.6rem 1rem;color: #0f172a;font-weight: 500;font-size: 0.95rem;border-radius: 6px;white-space: nowrap;cursor: pointer }
a.nav-link:hover { background: #f8fafc;color: #134dce }
.nav-link-current { background: #6e4698;color: #ffffff !important;font-weight: 600;cursor: default;pointer-events: none }
.nav-link-current:hover { background: #6e4698;color: #ffffff !important }
.nav-link-highlight.nav-link-current { background: #14532d;color: #ffffff !important }
.nav-link-highlight { background: #126631;color: #ffffff !important;font-weight: 600 }
a.nav-link-highlight:hover { background: #0e662e;color: #ffffff !important }
.mobile-menu-toggle { display: none;flex-direction: column;gap: 5px;background: transparent;border: none;cursor: pointer;padding: 0.5rem;margin-left: auto;flex-shrink: 0;z-index: 1002 }
.mobile-menu-toggle span { display: block;width: 25px;height: 3px;background:#0f172a;border-radius: 3px }
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px) }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0 }
.mobile-menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px, -7px) }
.nav-dropdown { position:relative }
.nav-dropdown-toggle { display: flex;align-items: center;gap: 0.4rem;cursor: pointer;user-select: none }
.nav-dropdown-toggle.nav-link-current { pointer-events: auto }
.dropdown-chevron { display: inline-block;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 5px solid currentColor;flex-shrink: 0 }
.nav-flag { width: 23px;height: 17px;object-fit: cover;border-radius: 2px;flex-shrink: 0 }
.nav-dropdown-menu .nav-link { display: flex;align-items: center;gap: 0.5rem }
a { color:#1d4eb9;text-decoration: none }
a:hover { color:#415484 }
.hero { background: linear-gradient(135deg, #134dce 0%, #6e4698 100%); color: #ffffff; padding: 2rem 0;text-align: center }
.hero h1 { font-size: 2.4rem;margin-bottom: 1rem;font-weight: 700 }
.hero p { font-size: 1.2rem;opacity: 0.95 }
.hero-subtitle { opacity: 0.9;font-size: 1rem;margin-top: 0.5rem }
.container { max-width: 1200px;margin: 0 auto;padding: 0 1rem }
img { max-width: 100%;height:auto;display:block }
.main { min-height: calc(100vh - 70px - 200px) }
.section { padding: 3rem 0 }
.btn { display: inline-block;padding: 0.75rem 1.5rem;border-radius: 6px;font-weight: 600;text-align: center;cursor: pointer;border: none;font-size: 1rem }
.btn-primary { background: #134dce;color: #ffffff }
.btn-primary:hover { background: #6e4698;transform: translateY(-2px);box-shadow: 0 4px 6px rgba(0,0,0,0.1);color: #ffffff }
.btn-secondary { background: #505359;color: #ffffff }
.btn-secondary:hover { background: #475569;color: #ffffff }
.btn-success { background: #126631;color:#202020 }
.btn-success:hover { background:#0e662e;color: #ffffff }
.quick-nav-buttons { display: flex;gap: 1rem;flex-wrap: wrap }
.quick-nav { background:white;padding:1.5rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 1px 3px rgba(0,0,0,0.1) }
.quick-nav h3 { margin-bottom:1rem }
.nav-box-title { font-size: 16px;font-weight:bold;margin-bottom: 1rem;color:#1f2937 }
.nav-box-title--days { width: 100%;margin-top: 0.75rem;padding-top: 0.75rem;border-top: 1px solid #e2e8f0 }
.date-switcher-buttons { width: 100% }
.date-switcher-buttons a:hover { color:#57585a }
.predictions-date-header { display: flex;align-items: center;gap: 12px;padding: 12px 0;border-bottom: 2px solid #e2e8f0;margin-bottom: 8px; flex-direction: row; flex-wrap:nowrap }
.predictions-date-header--results { background: linear-gradient(135deg, #1e3a5f 0%, #275c8b 100%);margin-top: 2rem }
.predictions-date-header--results h2 { padding-left:15px;color:#fff }
.predictions-date-header--upcoming-round { background: linear-gradient(135deg,#065f46 0%,#036547 100%);margin-top: 1.5rem }
.predictions-date-header--upcoming-round h2 { padding-left:15px;color:#fff }
.league-header-text { display:flex;flex-direction:column;gap:2px }
.league-header-text h2 { margin:0;font-size:1.1rem }
.league-country { font-size:0.8rem;text-transform:uppercase;letter-spacing:0.5px }
.table-responsive { overflow-x:auto;margin:1.5rem 0;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);-webkit-overflow-scrolling:touch }
.predictions-table { width:100%;border-collapse:collapse;background:white;min-width:800px }
.predictions-table thead { background:linear-gradient(135deg, #2144e1 0%, #6e4698 100%);color: white }
.predictions-table th { padding:0.7rem 0.4rem 0.7rem 0.4rem;font-weight: 600;font-size: 0.8rem;text-transform:uppercase }
.predictions-table tbody tr { border-bottom:1px solid #e5e7eb }
.predictions-table tbody tr:hover { background-color:#f9fafb }
.predictions-table tbody tr:last-child { border-bottom:none }
.predictions-table td { padding: 0 0.9rem;font-size:0.875rem }
.time-cell { color:#505359;font-weight:600;white-space: nowrap;min-width:60px;text-align:center }
.form-cell { min-width:110px;text-align:center }
.team-form { display:inline-flex;gap:2px;font-family:'Courier New',monospace;font-weight:700;font-size:0.85rem }
.team-form span { display:inline-block;width:16px;height:16px;line-height:16px;text-align: center;border-radius:3px;font-size:0.75rem }
.form-win { background:#096546;color:white }
.form-draw { background:#7a4f05;color:white }
.form-loss { background:#b30f0f;color:white }
.form-unknown { background: #e5e7eb;color:#374151 }
.match-cell { min-width:370px }
.confidence-cell { min-width:90px;text-align:center }
.confidence-badge { display:inline-block;padding:0.35rem 0.75rem;border-radius:6px;font-weight:700;font-size:0.85rem }
.confidence-very-high { background:#dcfce7;color:#166534 }
.confidence-high { background:#dbeafe;color:#1e40af }
.confidence-medium { background:#fef3c7;color:#92400e }
.confidence-low { background:#fee2e2;color:#991b1b }
.prob-cell { min-width:90px;text-align:center }
.prediction-cell { min-width:100px;font-weight:700;color: #134dce;text-align:center }
.odds-cell { min-width:60px;text-align:center;white-space:nowrap;font-weight:700;color:#126631;font-size:1rem }
.result-cell { white-space:nowrap }
.match-teams { display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;padding:1rem 0;justify-content:center }
.team-logo-small { width: 20px;height:20px;object-fit:contain }
.home-team,.away-team { color: #1f2937;font-weight:500 }
.vs { color:#55595f;font-size:0.85rem }
.result-score { font-size:1rem;font-weight:700;color: #1f2937;letter-spacing:0.04em }
.result-status { display:inline-block;margin-left: 6px;font-size:0.68rem;font-weight:600;background:#505359;color: #fff;padding: 1px 5px;border-radius:3px;text-transform:uppercase }
.odd-result { font-weight:700;color:#505359 }
.prob-badge { display:inline-block;padding:0.25rem 0.5rem;border-radius:6px;font-weight:700;font-size:0.85rem;white-space:nowrap }
.prob-high { background:#dcfce7;color:#166534 }
.prob-medium { background: #fef3c7;color: #92400e }
.prob-low { background:#fee2e2;color:#991b1b }
.prediction-value { color:#1f2937 }
.prediction-value.prediction-unknown,.prediction-unknown { color:#55595f;font-style:italic;font-size: 0.85rem }
.odd-unavailable { color:#52565c;font-style:italic }
.odd-link { display:inline-block;padding:0.25rem 0.5rem;background:linear-gradient(135deg,#2144e1 0%,#6e4698 100%);color:white;text-decoration:none;border-radius:6px;font-weight:600 }
.odd-link:hover,.odd-link:focus-visible { background:#0d3aa3;color:#ffffff;text-decoration:underline;transform:translateY(-2px) }
.more-tips-block { background: #f9fafb;border: 1px solid #e5e7eb;border-radius: 12px;padding: 1.25rem 1.5rem;margin-bottom: 2rem }
.more-tips-title { color: #1f2937;font-size: 1rem;font-weight: 600;margin: 0 0 1rem 0;text-transform: uppercase;letter-spacing: 0.5px }
.more-tips-grid { display: grid;grid-template-columns: repeat(5, 1fr);gap: 0.75rem }
.more-tips-card { display: flex;flex-direction: row;align-items: center;gap: 0.5rem;padding: 0.75rem 0.5rem;background: white;border-radius: 8px;border: 1px solid #e5e7eb;text-decoration: none;text-align: center }
.more-tips-card:hover { border-color: #2144e1;box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);transform: translateY(-2px) }
.league-logo-small { width:32px;height:32px;object-fit:contain }
.more-tips-card .league-name { color:#374151;font-size:0.78rem;font-weight:500;line-height:1.3;word-break:break-word;hyphens:auto }
.more-tips-card:hover .league-name { color:#2144e1 }
.empty-state { background: white;padding: 3rem;border-radius: 12px;text-align: center }
.empty-state h2 { color: #505359;margin-bottom: 1rem }
.empty-state p { color: #505359;margin-bottom: 2rem }
@media (max-width:992px) {
.mobile-menu-toggle { display: flex }
.nav { position: fixed;top: 70px;left: 0;transform: translateX(-100%);width:280px;max-width: 100vw;height: calc(100vh - 70px);background: #ffffff;flex-direction: column;align-items: flex-start;padding:1.5rem 1.5rem 1.5rem;gap:0.5rem;box-shadow: 0 10px 25px rgba(0,0,0,0.15);overflow-y: auto;z-index: 1001;margin-left: 0 }
.nav.active { transform: translateX(0) }
.nav-link { width: 100%;padding: 0.75rem 1rem;font-size: 1rem }
body.menu-open::before { content: '';position:fixed;top:70px;left:0;right:0;bottom:0;background: rgba(0,0,0,0.5);z-index: 999 }
.nav-dropdown { width: 100% }
.nav-dropdown-toggle { width: 100%;justify-content: space-between }
.nav-dropdown-menu { display: none;flex-direction: column;padding-left:0.75rem;margin: 0.2rem 0 0.4rem 0.5rem;border-left: 2px solid #e5e7eb }
.nav-dropdown.open .nav-dropdown-menu { display: flex }
.nav-dropdown.open .dropdown-chevron { transform: rotate(180deg) }
.nav-dropdown-menu .nav-link { width: 100%;padding: 0.6rem 0.75rem;font-size: 0.95rem }
}
@media(min-width:993px) {
.nav-dropdown-menu { position: absolute;top: calc(100% + 1px);left: 0;min-width: 175px;background: #ffffff;border: 1px solid #e5e7eb;border-radius: 8px;box-shadow: 0 10px 25px rgba(0,0,0,0.15);padding: 0.35rem;z-index: 1010;opacity: 0;visibility: hidden;transform: translateY(-6px) }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1;visibility: visible;transform: translateY(0) }
.nav-dropdown:hover .dropdown-chevron, .nav-dropdown.open .dropdown-chevron { transform: rotate(180deg) }
.nav-dropdown-menu .nav-link { width: 100%;padding: 0.5rem 0.85rem;border-radius: 6px;font-size: 0.9rem }
}
@media (max-width: 768px) {
.hero h1 { font-size: 1.625rem }
.hero p { font-size: 1rem }
.section { padding: 2rem 0 }
.quick-nav-buttons { flex-direction:column }
}
@media (max-width: 480px) {
.logo-text { font-size: 1.2rem }
.date-switcher-buttons { display: grid;grid-template-columns: 1fr 1fr;gap: 0.5rem }
.date-switcher-buttons .btn { text-align: center;width: 100%;padding: 0.5rem 0.25rem;font-size: 0.82rem }
.nav-box-title--days { grid-column: 1 / -1 }
.empty-state { padding: 2rem 1rem }
}
@media (max-width: 320px) {
.nav { width: 100vw }
}
/* League page links (interlinking) — color already passes WCAG */
a.match-league { color: #134dce; text-decoration: none; }
a.match-league:hover { text-decoration: underline; }
.predictions-date-header a.league-header-link { color: inherit; text-decoration: none; }
.predictions-date-header a.league-header-link:hover h2 { text-decoration: underline; }