/*
 * VigFree Analytics - Modern Terminal Analytics Theme
 *
 * A professional, data-focused dark theme inspired by analytical terminals.
 * Clean surfaces, minimal decoration, with muted accent colors for focus.
 */

/* ============================================================
 CSS VARIABLES - Theme Tokens
 ============================================================ */
:root {
 /* Core colors */
 --background: #0d1117; /* Deep charcoal background */
 --surface: #161b22; /* Card/panel surface */
 --surface-elevated: #1c2128; /* Elevated elements */
 
 /* Text colors */
 --text: #e6edf3; /* Primary text */
 --text-muted: #7d8590; /* Secondary/muted text */
 --text-subtle: #484f58; /* Very subtle text */
 
 /* Accent colors - muted terminal green */
 --accent: #3fb950; /* Primary accent */
 --accent-muted: #2ea043; /* Darker accent for hover */
 --accent-emphasis: #56d364; /* Lighter accent for highlights */
 
 /* Borders */
 --border: #30363d; /* Subtle borders */
 --border-muted: #21262d; /* Very subtle borders */
 
 /* Semantic colors */
 --success: #3fb950;
 --error: #f85149;
 --warning: #d29922;
 
 /* Shadows */
 --shadow-color: rgba(0, 0, 0, 0.3);
 
 /* Spacing */
 --spacing-xs: 0.25rem;
 --spacing-sm: 0.5rem;
 --spacing-md: 1rem;
 --spacing-lg: 1.5rem;
 --spacing-xl: 2rem;
}

/* ============================================================
 GLOBAL STYLES
 ============================================================ */
* {
 box-sizing: border-box;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
 line-height: 1.6;
 margin: 0;
 padding: 0;
 background-color: var(--background);
 color: var(--text);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

html {
 scroll-behavior: smooth;
 scroll-padding-top: 80px;
}

/* ============================================================
 HEADER
 ============================================================ */
header {
 background-color: var(--surface);
 color: var(--text);
 padding: var(--spacing-xl) var(--spacing-md);
 text-align: center;
 border-bottom: 1px solid var(--border);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

header h1 {
 margin: 0 0 var(--spacing-xs) 0;
 font-size: 1.75rem;
 font-weight: 600;
 letter-spacing: -0.02em;
 display: flex;
 align-items: center;
 justify-content: center;
}

header .subtitle {
 font-size: 0.9rem;
 margin: 0;
 font-weight: 400;
 color: var(--text-muted);
}

/* ============================================================
 BRANDING (LOGO IN HEADER)
 ============================================================ */
.site-title {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--spacing-sm);
 flex-wrap: wrap;
}

.site-title span {
 display: inline-block;
 line-height: 1.3;
}

.site-logo {
 width: 36px;
 height: 36px;
 border-radius: 6px;
 flex: 0 0 auto;
}

@media (max-width: 600px) {
 header {
   padding: var(--spacing-lg) var(--spacing-md);
 }
 
 header h1 {
   font-size: 1.25rem;
 }
 
 .site-logo {
   width: 28px;
   height: 28px;
 }
 
 .site-title {
   gap: var(--spacing-xs);
 }
 
 header .subtitle {
   font-size: 0.8rem;
 }
}

/* ============================================================
 NAVIGATION
 ============================================================ */
.site-nav {
 background-color: var(--surface);
 border-bottom: 1px solid var(--border);
 position: sticky;
 top: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 var(--spacing-md);
}

.site-nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: var(--spacing-sm);
 flex-wrap: wrap;
 row-gap: 0.25rem; /* Reduce row spacing when wrapped */
}

.site-nav li {
 margin: 0;
 padding: 0;
}

.site-nav a {
 text-decoration: none;
 color: var(--text-muted);
 font-weight: 500;
 font-size: 0.875rem;
 padding: 0.5rem var(--spacing-sm); /* Reduce vertical padding from 1rem to 0.5rem */
 border-radius: 6px;
 transition: all 0.2s ease;
 display: block;
}


/* Compact sticky nav on scroll (desktop) */
.site-nav.scrolled {
 padding: 0 var(--spacing-sm);
}

.site-nav.scrolled a {
 padding: 0.375rem var(--spacing-sm); /* Reduce vertical padding */
 font-size: 0.85rem;
}



.site-nav li.close-item {
 display: none;
}

.site-nav a:hover,
.site-nav a:focus {
 background-color: var(--surface-elevated);
 color: var(--text);
 outline: none;
}

/* Dropdown menu styling */
.site-nav .dropdown {
 position: relative;
}

.site-nav .dropdown-toggle {
 display: flex;
 align-items: center;
 gap: 4px;
 cursor: pointer;
}

.site-nav .dropdown-toggle::after {
 content: '▾';
 font-size: 0.75rem;
}

.site-nav .dropdown-menu {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 min-width: 220px;
 background-color: var(--surface);
 border: 1px solid var(--border);
 border-radius: 6px;
 box-shadow: 0 4px 12px var(--shadow-color);
 margin-top: 4px;
 padding: var(--spacing-xs) 0;
 z-index: 1000;
}

.site-nav .dropdown:hover .dropdown-menu,
.site-nav .dropdown:focus-within .dropdown-menu {
 display: block;
}

.site-nav .dropdown-menu li {
 list-style: none;
 margin: 0;
}

.site-nav .dropdown-menu a {
 display: block;
 padding: var(--spacing-sm) var(--spacing-md);
 color: var(--text-muted);
 text-decoration: none;
 font-size: 0.875rem;
 border-radius: 0;
 white-space: nowrap;
}

.site-nav .dropdown-menu a:hover,
.site-nav .dropdown-menu a:focus {
 background-color: var(--surface-elevated);
 color: var(--text);
}

.nav-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 z-index: 150;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.nav-overlay.open {
 display: block;
 opacity: 1;
}

.menu-toggle {
 display: none;
 font-size: 1.25rem;
 color: var(--text);
 cursor: pointer;
 padding: var(--spacing-sm);
 z-index: 101;
}

/* ============================================================
 MAIN CONTENT
 ============================================================ */
main {
 padding: var(--spacing-xl) var(--spacing-md);
 max-width: 960px;
 margin: 0 auto;
}

/* ============================================================
 ALL CALCULATORS SECTION
 ============================================================ */
.all-calculators-section {
 background-color: var(--surface);
 border-radius: 6px;
 padding: var(--spacing-xl);
 margin-bottom: var(--spacing-xl);
 border: 1px solid var(--border);
}

.all-calculators-section h2 {
 margin-top: 0;
 margin-bottom: var(--spacing-sm);
 color: var(--text);
 font-size: 1.75rem;
 font-weight: 600;
 letter-spacing: -0.02em;
}

.all-calculators-section .section-intro {
 color: var(--text-muted);
 margin-bottom: var(--spacing-lg);
 line-height: 1.6;
}

.calculators-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: var(--spacing-md);
}

.calculator-card {
 background-color: var(--background);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: var(--spacing-lg);
 transition: all 0.2s ease;
}

.calculator-card:hover {
 border-color: var(--accent);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px var(--shadow-color);
}

.calculator-card h3 {
 margin: 0 0 var(--spacing-sm) 0;
 font-size: 1.1rem;
 font-weight: 600;
}

.calculator-card h3 a {
 color: var(--accent);
 text-decoration: none;
 transition: color 0.2s ease;
}

.calculator-card h3 a:hover,
.calculator-card h3 a:focus {
 color: var(--accent-emphasis);
 text-decoration: underline;
}

.calculator-card p {
 margin: 0;
 color: var(--text-muted);
 font-size: 0.9rem;
 line-height: 1.5;
}

/* Breadcrumbs */
.breadcrumbs {
 display: flex;
 align-items: center;
 gap: var(--spacing-xs);
 padding: var(--spacing-md);
 margin-bottom: var(--spacing-md);
 font-size: 0.875rem;
 color: var(--text-muted);
 background-color: var(--surface);
 border-radius: 6px;
 border: 1px solid var(--border);
 flex-wrap: wrap;
}

.breadcrumbs a {
 color: var(--accent);
 text-decoration: none;
 transition: color 0.2s ease;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
 color: var(--accent-emphasis);
 text-decoration: underline;
}

.breadcrumbs .separator {
 color: var(--text-subtle);
 user-select: none;
}

.breadcrumbs .current {
 color: var(--text);
 font-weight: 500;
}

@media (max-width: 600px) {
 .calculators-grid {
   grid-template-columns: 1fr;
 }
 
 .breadcrumbs {
   font-size: 0.8rem;
   padding: var(--spacing-sm);
 }
}

/* ============================================================
 CALCULATOR SECTIONS
 ============================================================ */
.calculator-section {
 background-color: var(--surface);
 border-radius: 6px;
 padding: var(--spacing-xl);
 margin-bottom: var(--spacing-xl);
 border: 1px solid var(--border);
 scroll-margin-top: 90px;
}

.calculator-section h2 {
 margin-top: 0;
 margin-bottom: var(--spacing-sm);
 color: var(--text);
 font-size: 1.5rem;
 font-weight: 600;
 letter-spacing: -0.02em;
}

.calculator-section .description {
 color: var(--text-muted);
 margin-bottom: var(--spacing-lg);
 line-height: 1.6;
}

/* View Full Page link */
.view-full-page {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 margin-top: var(--spacing-sm);
 padding: var(--spacing-xs) var(--spacing-md);
 background-color: var(--surface-elevated);
 color: var(--accent);
 text-decoration: none;
 font-size: 0.85rem;
 font-weight: 500;
 border-radius: 4px;
 border: 1px solid var(--border);
 transition: all 0.2s ease;
}

.view-full-page::after {
 content: '→';
 font-size: 0.9rem;
}

.view-full-page:hover,
.view-full-page:focus {
 background-color: var(--accent);
 color: var(--background);
 border-color: var(--accent);
 transform: translateX(2px);
 outline: none;
}

/* ============================================================
 FORM ELEMENTS
 ============================================================ */
.try-example {
 margin-bottom: var(--spacing-md);
 padding: var(--spacing-sm) 0;
 border-bottom: 1px solid var(--border-muted);
}

.btn-try-example {
 padding: var(--spacing-xs) var(--spacing-md);
 border: 1px solid var(--border);
 border-radius: 6px;
 background-color: var(--surface-elevated);
 color: var(--text-muted);
 font-size: 0.85rem;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s ease;
 display: inline-flex;
 align-items: center;
 gap: var(--spacing-xs);
}

.btn-try-example::before {
 content: "💡";
 font-size: 1rem;
}

.btn-try-example:hover,
.btn-try-example:focus {
 background-color: var(--background);
 color: var(--text);
 border-color: var(--accent);
 outline: none;
}

.format-selector {
 display: flex;
 gap: var(--spacing-md);
 margin-bottom: var(--spacing-md);
 flex-wrap: wrap;
}

.format-selector label {
 display: flex;
 align-items: center;
 gap: var(--spacing-xs);
 font-weight: 500;
 color: var(--text-muted);
 font-size: 0.875rem;
 cursor: pointer;
}

.format-selector input[type="radio"] {
 cursor: pointer;
}

.input-group {
 margin-bottom: var(--spacing-md);
 display: flex;
 flex-direction: column;
}

.input-group label {
 margin-bottom: var(--spacing-xs);
 font-weight: 500;
 color: var(--text-muted);
 font-size: 0.875rem;
}

.input-group input {
 padding: var(--spacing-sm) 0.75rem;
 border: 1px solid var(--border);
 border-radius: 6px;
 font-size: 0.95rem;
 background-color: var(--background);
 color: var(--text);
 transition: border-color 0.2s ease, background-color 0.2s ease;
}

.input-group input:focus {
 outline: none;
 border-color: var(--accent);
 background-color: var(--surface);
}

.input-group input::placeholder {
 color: var(--text-subtle);
}

.input-group input[type="checkbox"] {
 width: auto;
 margin-right: var(--spacing-xs);
}

/* ============================================================
 BUTTONS
 ============================================================ */
.buttons {
 display: flex;
 gap: var(--spacing-sm);
 flex-wrap: wrap;
 margin-top: var(--spacing-md);
}

.buttons button {
 padding: var(--spacing-sm) var(--spacing-lg);
 border: 1px solid transparent;
 border-radius: 6px;
 cursor: pointer;
 font-size: 0.9rem;
 font-weight: 500;
 transition: all 0.2s ease;
}

.buttons button[type="submit"] {
 background-color: var(--accent);
 color: var(--background);
 border-color: var(--accent);
}

.buttons button[type="submit"]:hover,
.buttons button[type="submit"]:focus {
 background-color: var(--accent-emphasis);
 border-color: var(--accent-emphasis);
 outline: none;
}

.buttons button[type="button"] {
 background-color: transparent;
 color: var(--text-muted);
 border-color: var(--border);
}

.buttons button[type="button"]:hover,
.buttons button[type="button"]:focus {
 background-color: var(--surface-elevated);
 color: var(--text);
 border-color: var(--border);
 outline: none;
}

/* ============================================================
 RESULTS
 ============================================================ */
.result {
 margin-top: var(--spacing-lg);
 padding: var(--spacing-lg);
 background-color: var(--background);
 border: 1px solid var(--border);
 border-radius: 6px;
 overflow-x: auto;
 line-height: 1.7;
}

.result p {
 margin: var(--spacing-sm) 0;
}

.result .error {
 color: var(--error);
 font-weight: 500;
}

.result .success,
.result .positive {
 color: var(--success);
 font-weight: 500;
}

.result .negative {
 color: var(--error);
 font-weight: 500;
}

.result .explanation {
 color: var(--text-muted);
 font-size: 0.9rem;
 margin-top: var(--spacing-xs);
}

.result strong {
 color: var(--text);
 font-weight: 600;
}

/* ============================================================
 CALCULATOR INSTRUCTIONS (ACCORDION)
 ============================================================ */
.calculator-instructions {
 margin-top: var(--spacing-lg);
 border-top: 1px solid var(--border);
 padding-top: var(--spacing-lg);
}

.instructions-toggle {
 width: 100%;
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
 padding: var(--spacing-md);
 background-color: var(--surface-elevated);
 border: 1px solid var(--border);
 border-radius: 6px;
 color: var(--text);
 font-size: 0.95rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
 text-align: left;
}

.instructions-toggle:hover,
.instructions-toggle:focus {
 background-color: var(--background);
 border-color: var(--accent);
 outline: none;
}

.toggle-icon {
 font-size: 0.75rem;
 transition: transform 0.3s ease;
 display: inline-block;
 color: var(--accent);
}

.instructions-toggle[aria-expanded="true"] .toggle-icon {
 transform: rotate(90deg);
}

.toggle-text {
 flex: 1;
}

.instructions-content {
 padding: var(--spacing-lg) var(--spacing-md);
 background-color: var(--background);
 border: 1px solid var(--border);
 border-top: none;
 border-radius: 0 0 6px 6px;
}

.instructions-content[hidden] {
 display: none;
}

.instruction-section {
 margin-bottom: var(--spacing-lg);
}

.instruction-section:last-child {
 margin-bottom: 0;
}

.instruction-section h3 {
 color: var(--accent-emphasis);
 font-size: 1rem;
 font-weight: 600;
 margin: 0 0 var(--spacing-sm) 0;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.steps-list,
.concept-list {
 margin: 0;
 padding-left: var(--spacing-xl);
 color: var(--text);
}

.steps-list li,
.concept-list li {
 margin-bottom: var(--spacing-sm);
 line-height: 1.6;
}

.steps-list li strong,
.concept-list li strong {
 color: var(--text);
}

.tips {
 margin-top: var(--spacing-md);
 padding: var(--spacing-md);
 background-color: var(--surface-elevated);
 border-left: 3px solid var(--accent);
 border-radius: 4px;
}

.tips strong {
 color: var(--accent-emphasis);
 display: block;
 margin-bottom: var(--spacing-xs);
}

.tips ul {
 margin: 0;
 padding-left: var(--spacing-lg);
 color: var(--text-muted);
}

.tips ul li {
 margin-bottom: var(--spacing-xs);
 line-height: 1.5;
}

.example-text {
 color: var(--text);
 line-height: 1.6;
 margin: 0;
}

.related-links {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: var(--spacing-xs);
}

.related-links li a {
 color: var(--accent);
 text-decoration: none;
 font-weight: 500;
 transition: color 0.2s ease;
 display: inline-block;
}

.related-links li a::before {
 content: "→ ";
 margin-right: var(--spacing-xs);
}

.related-links li a:hover,
.related-links li a:focus {
 color: var(--accent-emphasis);
 text-decoration: underline;
}

/* ============================================================
 TABLES
 ============================================================ */
.result table {
 width: 100%;
 border-collapse: collapse;
 margin-top: var(--spacing-md);
 font-size: 0.9rem;
}

.result th,
.result td {
 border: 1px solid var(--border);
 padding: var(--spacing-sm) 0.75rem;
 text-align: left;
}

.result th {
 background-color: var(--surface-elevated);
 font-weight: 600;
 color: var(--text-muted);
 text-transform: uppercase;
 font-size: 0.75rem;
 letter-spacing: 0.05em;
}

.result td {
 color: var(--text);
}

/* ============================================================
 FOOTER
 ============================================================ */
footer {
 text-align: center;
 padding: var(--spacing-xl) var(--spacing-md);
 background-color: var(--surface);
 border-top: 1px solid var(--border);
 font-size: 0.8rem;
 color: var(--text-muted);
 margin-top: var(--spacing-xl);
}

footer .disclaimer {
 margin: 0;
}

footer .footer-contact {
 margin: var(--spacing-sm) 0 0;
 color: var(--text-muted);
}

footer .footer-contact a {
 color: var(--accent);
 text-decoration: none;
}

footer .footer-contact a:hover,
footer .footer-contact a:focus {
 color: var(--accent-emphasis);
 text-decoration: underline;
 outline: none;
}

/* ============================================================
 EV PARLAY BUILDER STYLES
 ============================================================ */
.ev-config-section {
 margin-bottom: var(--spacing-lg);
 padding: var(--spacing-lg);
 background-color: var(--background);
 border-radius: 6px;
 border: 1px solid var(--border);
}

.ev-config-section h3 {
 color: var(--text);
 margin: 0 0 var(--spacing-md) 0;
 font-size: 0.95rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.ev-devig-options {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-md);
}

.ev-radio-label {
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
 cursor: pointer;
 padding: var(--spacing-xs) 0;
}

.ev-radio-label input[type="radio"] {
 margin: 0;
 cursor: pointer;
}

.ev-radio-label span {
 font-weight: 500;
 color: var(--text-muted);
 font-size: 0.9rem;
}

.ev-sub-option {
 margin-left: var(--spacing-xl);
 padding: var(--spacing-md);
 background-color: var(--surface-elevated);
 border-radius: 6px;
 border: 1px solid var(--border);
}

.ev-input-label {
 display: block;
 margin-bottom: var(--spacing-sm);
 font-weight: 500;
 color: var(--text-muted);
 font-size: 0.85rem;
}

.ev-vig-input {
 width: 120px;
 padding: var(--spacing-sm);
 border-radius: 6px;
 border: 1px solid var(--border);
 background-color: var(--background);
 color: var(--text);
 font-size: 0.9rem;
}

.ev-vig-input:focus {
 outline: none;
 border-color: var(--accent);
}

.ev-global-settings {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: var(--spacing-md);
 margin-bottom: var(--spacing-lg);
}

.ev-legs-section {
 margin-bottom: var(--spacing-lg);
}

.ev-legs-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--spacing-md);
}

.ev-legs-header h3 {
 color: var(--text);
 margin: 0;
 font-size: 0.95rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.ev-button-secondary {
 padding: var(--spacing-sm) var(--spacing-md);
 border-radius: 6px;
 border: 1px solid var(--border);
 background-color: transparent;
 color: var(--text-muted);
 font-weight: 500;
 cursor: pointer;
 font-size: 0.85rem;
 transition: all 0.2s ease;
}

.ev-button-secondary:hover {
 background-color: var(--surface-elevated);
 color: var(--text);
}

.novig-send-buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 12px;
}

.novig-send-buttons a {
 text-decoration: none;
}

.implied-send-button {
 margin-top: 12px;
}

.implied-send-button a {
 text-decoration: none;
}

.ev-button-add-leg {
 width: 100%;
 margin-top: var(--spacing-md);
 padding: var(--spacing-md);
 border-radius: 6px;
 border: 1px solid var(--accent);
 background-color: var(--accent);
 color: var(--background);
 font-weight: 500;
 cursor: pointer;
 font-size: 0.95rem;
 transition: all 0.2s ease;
}

.ev-button-add-leg:hover {
 background-color: var(--accent-emphasis);
 border-color: var(--accent-emphasis);
}

.ev-button-add-leg:disabled {
 background-color: var(--surface-elevated);
 border-color: var(--border);
 color: var(--text-subtle);
 cursor: not-allowed;
 opacity: 0.5;
}

.ev-parlay-leg {
 background-color: var(--background);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: var(--spacing-lg);
 margin-bottom: var(--spacing-md);
}

.ev-parlay-leg-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--spacing-md);
 padding-bottom: var(--spacing-md);
 border-bottom: 1px solid var(--border);
}

.ev-parlay-leg-header h4 {
 margin: 0;
 color: var(--text);
 font-size: 0.95rem;
 font-weight: 600;
}

.ev-button-remove {
 background-color: transparent;
 color: var(--error);
 border: 1px solid var(--error);
 border-radius: 6px;
 padding: var(--spacing-xs) var(--spacing-md);
 font-size: 0.8rem;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s ease;
}

.ev-button-remove:hover {
 background-color: var(--error);
 color: var(--background);
}

.ev-parlay-leg-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: var(--spacing-md);
 align-items: end;
}

.ev-parlay-leg-grid .input-group {
 margin-bottom: 0;
}

.ev-parlay-leg-grid .input-group label {
 display: block;
 margin-bottom: var(--spacing-xs);
 font-weight: 500;
 color: var(--text-muted);
 font-size: 0.85rem;
 min-height: 1.1rem;
}

.ev-parlay-leg-grid .input-group input {
 width: 100%;
 padding: var(--spacing-sm);
 border: 1px solid var(--border);
 border-radius: 6px;
 font-size: 0.9rem;
 background-color: var(--surface);
 color: var(--text);
 box-sizing: border-box;
 height: 38px;
}

.ev-parlay-leg-grid .input-group input:focus {
 border-color: var(--accent);
 background-color: var(--background);
}

.ev-parlay-leg-grid .input-group input::placeholder {
 color: var(--text-subtle);
}

.ev-result-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-md);
}

.ev-result-card {
 padding: var(--spacing-lg);
 background-color: var(--surface);
 border-radius: 6px;
 border: 1px solid var(--border);
}

.ev-result-label {
 font-size: 0.75rem;
 color: var(--text-muted);
 margin-bottom: var(--spacing-sm);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.ev-result-value {
 font-size: 1.4rem;
 font-weight: 600;
 line-height: 1.2;
}

/* Validation messages */
.validation-message {
 color: var(--error);
 font-size: 0.8rem;
 margin-top: var(--spacing-xs);
 font-weight: 500;
}

/* ============================================================
 RESPONSIVE - MOBILE
 ============================================================ */
@media (max-width: 600px) {
 header h1 {
 font-size: 1.25rem;
 }
 
 header .subtitle {
 font-size: 0.8rem;
 }
 
 main {
 padding: var(--spacing-md);
 }
 
 .calculator-section {
 padding: var(--spacing-md);
 }
 
 .ev-global-settings {
 grid-template-columns: 1fr;
 }
 
 .ev-parlay-leg-grid {
 grid-template-columns: 1fr;
 }
 
 .ev-result-grid {
 grid-template-columns: 1fr;
 }
 
 .ev-parlay-leg {
 padding: var(--spacing-md);
 }
 
 /* Mobile navigation */
 .menu-toggle {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 width: 100%;
 background-color: var(--surface);
 color: var(--text);
 font-weight: 500;
 padding: var(--spacing-md);
 border-bottom: 1px solid var(--border);
 cursor: pointer;
 }
 
 .menu-toggle .menu-label {
 margin-left: var(--spacing-sm);
 }
 
 .site-nav {
 position: sticky;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 200;
 display: block;
 padding: 0;
 }
 
 .site-nav ul {
 display: none;
 flex-direction: column;
 list-style: none;
 margin: 0;
 padding: 0;
 background-color: var(--surface);
 border-bottom: 1px solid var(--border);
 }
 
 .site-nav.open ul {
 display: block;
 }
 
 .site-nav li {
 border-bottom: 1px solid var(--border-muted);
 }
 
 .site-nav li a {
 display: block;
 padding: var(--spacing-md);
 color: var(--text-muted);
 text-decoration: none;
 font-weight: 500;
 }
 
 .site-nav li a:hover,
 .site-nav li a:focus {
 background-color: var(--surface-elevated);
 color: var(--text);
 }
 
 .site-nav li.close-item a {
 color: var(--error);
 font-weight: 600;
 }
 
 nav li.close-item a:hover,
 nav li.close-item a:focus {
 background-color: var(--error);
 color: var(--background);
 }
 
 .site-nav li.close-item {
 display: block;
 }
 
 /* Hide anchor links on mobile to prevent duplicates */
 /* Only hide list items that contain anchor links (href starting with #) */
 .site-nav li:has(> a[href^="#"]):not(.dropdown):not(.close-item) {
   display: none;
 }
 
 /* Mobile dropdown menu - always visible when parent is visible */
 .site-nav .dropdown-menu {
   position: static;
   display: block;
   box-shadow: none;
   border: none;
   border-top: 1px solid var(--border-muted);
   margin: 0;
   padding-left: var(--spacing-md);
   background-color: var(--surface-elevated);
 }
 
 .site-nav .dropdown-toggle::after {
   content: '';
 }
}

/* ============================================================
 LEARN LINKS (Education backlinks)
 ============================================================ */
.learn-link {
 color: var(--accent);
 text-decoration: none;
 font-size: 0.875rem;
 transition: color 0.2s ease;
}

.learn-link:hover,
.learn-link:focus {
 color: var(--accent-emphasis);
 text-decoration: underline;
}

.description .learn-link {
 display: inline;
}

/* ============================================================
 GLOSSARY STYLING
 ============================================================ */
.glossary-container {
 margin-top: var(--spacing-lg);
}

.glossary-list {
 margin: 0;
 padding: 0;
}

.glossary-list dt {
 color: var(--accent-emphasis);
 font-weight: 600;
 font-size: 1rem;
 margin-top: var(--spacing-lg);
 margin-bottom: var(--spacing-xs);
}

.glossary-list dt:first-of-type {
 margin-top: 0;
}

.glossary-list dd {
 margin: 0 0 var(--spacing-sm) 0;
 padding-left: var(--spacing-md);
 color: var(--text);
 line-height: 1.6;
}

/* Two-column layout for glossary on larger screens */
@media (min-width: 768px) {
 .glossary-list {
 column-count: 2;
 column-gap: var(--spacing-xl);
 }
 
 .glossary-list dt {
 break-after: avoid;
 }
 
 .glossary-list dd {
 break-inside: avoid;
 }
}

/* ============================================================
 EDUCATION PAGE ENHANCEMENTS
 ============================================================ */
/* Table of Contents */
.education-toc {
 background-color: var(--surface);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: var(--spacing-xl);
 margin: var(--spacing-xl) 0;
}

.education-toc h2 {
 margin-top: 0;
 margin-bottom: var(--spacing-md);
 color: var(--accent-emphasis);
 font-size: 1.25rem;
 font-weight: 600;
}

.toc-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: var(--spacing-xl);
}

.toc-column h3 {
 color: var(--text);
 font-size: 0.95rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin: 0 0 var(--spacing-sm) 0;
}

.toc-column ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.toc-column ul li {
 margin-bottom: var(--spacing-xs);
}

.toc-column ul li a {
 color: var(--accent);
 text-decoration: none;
 font-weight: 500;
 transition: color 0.2s ease;
 display: inline-block;
}

.toc-column ul li a::before {
 content: "→ ";
 margin-right: var(--spacing-xs);
}

.toc-column ul li a:hover,
.toc-column ul li a:focus {
 color: var(--accent-emphasis);
 text-decoration: underline;
}

/* Glossary A-Z Navigation */
.glossary-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--spacing-xs);
 margin-bottom: var(--spacing-lg);
 padding: var(--spacing-md);
 background-color: var(--surface);
 border: 1px solid var(--border);
 border-radius: 6px;
 justify-content: center;
}

.glossary-nav a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2rem;
 height: 2rem;
 padding: 0 var(--spacing-xs);
 background-color: var(--surface-elevated);
 color: var(--text-muted);
 text-decoration: none;
 font-weight: 600;
 font-size: 0.9rem;
 border-radius: 4px;
 border: 1px solid var(--border);
 transition: all 0.2s ease;
}

.glossary-nav a:hover,
.glossary-nav a:focus {
 background-color: var(--accent);
 color: var(--background);
 border-color: var(--accent);
 outline: none;
}

.glossary-intro {
 color: var(--text-muted);
 font-size: 0.95rem;
 margin-bottom: var(--spacing-lg);
 line-height: 1.6;
}

/* CTA Box and Button */
.cta-box {
 margin: var(--spacing-lg) 0;
 padding: var(--spacing-md);
 background-color: var(--surface-elevated);
 border: 1px solid var(--border);
 border-radius: 6px;
 text-align: center;
}

.cta-button {
 display: inline-block;
 padding: var(--spacing-md) var(--spacing-xl);
 background-color: var(--accent);
 color: var(--background);
 text-decoration: none;
 font-weight: 600;
 font-size: 0.95rem;
 border-radius: 6px;
 transition: all 0.2s ease;
 border: 2px solid var(--accent);
}

.cta-button:hover,
.cta-button:focus {
 background-color: var(--accent-emphasis);
 border-color: var(--accent-emphasis);
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 outline: none;
}

/* Mobile adjustments */
@media (max-width: 600px) {
 .education-toc {
 padding: var(--spacing-md);
 }
 
 .toc-grid {
 grid-template-columns: 1fr;
 gap: var(--spacing-lg);
 }
 
 .glossary-nav {
 gap: var(--spacing-xs);
 padding: var(--spacing-sm);
 }
 
 .glossary-nav a {
 min-width: 1.75rem;
 height: 1.75rem;
 font-size: 0.85rem;
 }
 
 .cta-button {
 display: block;
 width: 100%;
 }
}

/* ============================================================
 BUTTON LINK STYLING (for education page CTAs)
 ============================================================ */
a.button {
 display: inline-block;
 padding: var(--spacing-sm) var(--spacing-lg);
 background-color: var(--accent);
 color: var(--background);
 border: none;
 border-radius: 4px;
 font-size: 0.95rem;
 font-weight: 500;
 cursor: pointer;
 transition: background-color 0.2s ease;
 text-decoration: none;
 text-align: center;
}

a.button:hover,
a.button:focus {
 background-color: var(--accent-muted);
}

/* ============================================================
 EDUCATION PAGE SPECIFIC STYLING
 ============================================================ */
.calculator-section h2 a {
 color: var(--text);
 text-decoration: none;
 transition: color 0.2s ease;
}

.calculator-section h2 a:hover,
.calculator-section h2 a:focus {
 color: var(--accent-emphasis);
}


/* Mobile-only utility */
.mobile-only { display: none; }
@media (max-width: 600px) {
  .mobile-only { display: block; }
}

/* ============================================================
   SHAREABLE RESULTS CARD STYLING
   ============================================================ */

/* Card action buttons container */
.result-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.result-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.result-action-btn:hover {
    background-color: var(--accent);
    color: var(--background);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.result-action-btn:active {
    transform: translateY(0);
}

.result-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.result-action-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Shareable card container (for image generation) */
.shareable-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #0d1117 100%);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: var(--spacing-xl);
    margin: var(--spacing-md) 0;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Share card header - increased gap for larger 64px logo */
.shareable-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md); /* Increased from spacing-sm to accommodate larger logo */
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--accent);
}

/* Share card logo - increased to 64px for better visibility and quality */
.shareable-card-logo {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    padding: 4px;
}

.shareable-card-title {
    color: var(--accent);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.shareable-card-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.shareable-card-content {
    color: var(--text);
    line-height: 1.6;
}

.shareable-card-footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Feedback messages */
.card-feedback {
    display: inline-block;
    padding: 6px 12px;
    margin-left: var(--spacing-sm);
    border-radius: 4px;
    font-size: 0.85rem;
    animation: fadeIn 0.3s ease;
}

.card-feedback.success {
    background-color: rgba(46, 160, 67, 0.2);
    color: var(--success);
    border: 1px solid var(--success);
}

.card-feedback.error {
    background-color: rgba(248, 81, 73, 0.2);
    color: var(--error);
    border: 1px solid var(--error);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .result-actions {
        flex-direction: column;
    }
    
    .result-action-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px; /* Larger tap targets on mobile */
        font-size: 1rem; /* Slightly larger text on mobile */
    }
    
    .shareable-card {
        padding: var(--spacing-md);
    }
    
    .shareable-card-title {
        font-size: 1.2rem;
    }
}

/* ============================================================
 EMAIL CAPTURE CARD
 ============================================================ */
.email-capture-card {
  background: linear-gradient(135deg, #1a2a1a 0%, #0f1f0f 100%);
  border: 1px solid #2d4a2d;
  border-radius: 10px;
  padding: 24px;
  margin: 32px 0;
  max-width: 680px;
}
.email-capture-inner { display: flex; flex-direction: column; gap: 12px; }
.email-capture-icon { font-size: 1.8rem; }
.email-capture-text h3 { margin: 0 0 4px 0; font-size: 1.1rem; color: #e8f5e8; }
.email-capture-text p { margin: 0; font-size: 0.9rem; color: #aaa; line-height: 1.5; }
.email-capture-form { display: flex; gap: 8px; flex-wrap: wrap; }
.email-input { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 6px; border: 1px solid #3a5a3a; background: #0d1a0d; color: #e0e0e0; font-size: 0.9rem; }
.email-submit-btn { padding: 10px 20px; background: #2e7d32; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.email-submit-btn:hover { background: #388e3c; }
.email-disclaimer { font-size: 0.75rem; color: #666; margin: 0; }

/* ============================================================
 SPORTSBOOK AFFILIATE CARDS
 ============================================================ */
.sportsbook-section { margin: 40px 0; padding: 24px; background: #0f1a0f; border: 1px solid #1e3a1e; border-radius: 10px; }
.sportsbook-section-title { margin: 0 0 4px 0; font-size: 1.05rem; color: #e8f5e8; font-weight: 700; }
.sportsbook-section-subtitle { margin: 0 0 20px 0; font-size: 0.85rem; color: #888; }
.sportsbook-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sportsbook-card { background: #0d1a0d; border: 1px solid #2a3a2a; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sportsbook-badge { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.7rem; color: white; letter-spacing: 0.5px; }
.sportsbook-name { font-weight: 700; font-size: 0.95rem; color: #e0e0e0; margin: 0; }
.sportsbook-bonus { font-size: 0.8rem; color: #aaa; line-height: 1.4; margin: 0; flex: 1; }
.sportsbook-cta { display: block; text-align: center; padding: 9px 14px; background: #2e7d32; color: white; text-decoration: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; transition: background 0.2s; }
.sportsbook-cta:hover { background: #388e3c; }
.sportsbook-disclaimer { font-size: 0.7rem; color: #555; margin: 16px 0 0 0; line-height: 1.5; }

/* ============================================================
 RELATED CALCULATORS (inline link style)
 ============================================================ */
.related-calculators { margin: 32px 0 16px 0; padding: 16px; background: #0f1a0f; border-radius: 8px; font-size: 0.9rem; }
.related-calculators a { color: #4caf50; text-decoration: none; }
.related-calculators a:hover { text-decoration: underline; }