/**
 * Fantasy Golf Bag - Layout Styles
 * Extracted from _Layout.cshtml
 * Last Updated: December 2024
 * 
 * NOTE: Navbar styles are now in navbar.css
 */

/* ============================================
   FONT FACE
   ============================================ */

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
    src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/* ============================================
   DATATABLES
   ============================================ */

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    right: 0 !important;
    content: "" !important;
}

table.dataTable thead th {
    position: relative;
    background-image: none !important;
}

    table.dataTable thead th.sorting:after,
    table.dataTable thead th.sorting_asc:after,
    table.dataTable thead th.sorting_desc:after {
        right: 8px !important;
        font-family: Glyphicons Halflings !important;
    }

    table.dataTable thead th.sorting:after {
        content: "\e150" !important;
        opacity: 0.2 !important;
    }

    table.dataTable thead th.sorting_asc:after {
        content: "\e155" !important;
        opacity: 0.2 !important;
    }

    table.dataTable thead th.sorting_desc:after {
        content: "\e156" !important;
        opacity: 0.2 !important;
    }

/* ============================================
   SKIP LINK

   Off-screen until focused, then it parks itself over the header. Uses
   translateY rather than display/visibility so it can still be reached by
   the very first Tab press — a hidden element is not focusable.
   ============================================ */
.skip-link {
    position: fixed;
    top: 0;
    left: 1rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    /* --fgb-green-dark, not --bs-primary: white on #16a34a measures 3.3:1,
       under the 4.5:1 AA floor for 15px text. #15803d measures 5.02:1. An
       accessibility affordance that fails contrast is not much of one. */
    background: var(--fgb-green-dark, #15803d);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-110%);
    transition: transform 0.15s ease;
}

    .skip-link:focus {
        transform: translateY(0);
        color: #fff;
        outline: none;
    }

/* The skip target must not draw a focus ring of its own — the whole page
   would get outlined when focus lands on it. */
.body-content:focus,
.body-content:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

/* ============================================
   PAGE LAYOUT
   ============================================ */

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

.body-content {
    flex: 1 0 auto;
}

    /* Content width cap — backgrounds stay full-bleed */
    .body-content .container-fluid {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }

footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* ============================================
   FOOTER - Marketing (Full Footer)
   ============================================ */

.site-footer-marketing {
    background: #f8fafc;
    color: #475569;
    padding-top: 4rem;
    border-top: 1px solid #e2e8f0;
}

/* Footer Brand */
.footer-brand {
    max-width: 280px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
}

    .footer-logo img {
        height: 32px;
        width: auto;
    }

.footer-tagline {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 1.25rem;
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: 0.125rem;
}

    .footer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        color: #64748b;
        transition: all 0.2s ease;
    }

        .footer-social a:hover {
            background: #e2e8f0;
            color: #1e293b;
        }

/* Footer Links */
.footer-links h6.footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 1rem;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    font-size: 0.875rem;
    color: #334155;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .footer-links a:hover {
        color: var(--bs-primary);
    }

.footer-link-highlight {
    color: var(--bs-primary) !important;
    font-weight: 500;
}

/* Footer Newsletter */
.footer-newsletter-section {
    margin-top: 2.5rem;
    padding: 2rem 0;
    border-top: 1px solid #e2e8f0;
}

.newsletter-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.newsletter-subtitle {
    font-size: 0.8125rem;
    color: #64748b;
    margin-bottom: 0;
}

.newsletter-form {
    max-width: 380px;
    margin-left: auto;
}

.newsletter-input-group {
    display: flex;
    gap: 0.5rem;
}

    .newsletter-input-group .form-control {
        flex: 1;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        color: #1e293b;
    }

        .newsletter-input-group .form-control::placeholder {
            color: #94a3b8;
        }

        .newsletter-input-group .form-control:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
        }

    .newsletter-input-group .btn {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.875rem;
        white-space: nowrap;
    }

/* Footer Bottom */
.footer-bottom {
    padding: 1.25rem 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 2rem;
}

.footer-copyright {
    font-size: 0.8125rem;
    color: #64748b;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

    .footer-legal a {
        font-size: 0.8125rem;
        color: #64748b;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .footer-legal a:hover {
            color: var(--bs-primary);
        }

.footer-legal-separator {
    color: #cbd5e1;
}

/* ============================================
   FOOTER - Marketing Responsive
   ============================================ */

@media (max-width: 991.98px) {
    .site-footer-marketing {
        padding-top: 3rem;
    }

    .footer-brand {
        max-width: 100%;
        margin-bottom: 1.5rem;
    }

    .newsletter-form {
        max-width: 100%;
        margin-left: 0;
        margin-top: 1rem;
    }

    .footer-legal {
        justify-content: flex-start;
        margin-top: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .site-footer-marketing {
        padding-top: 2.5rem;
    }

    .footer-links {
        margin-bottom: 1.5rem;
    }

    .newsletter-input-group {
        flex-direction: column;
    }

        .newsletter-input-group .btn {
            width: 100%;
        }

    .footer-legal {
        gap: 0.75rem;
    }

    .footer-legal-separator {
        display: none;
    }
}

/* ============================================
   FOOTER - App/Tool (Minimal Footer)
   ============================================ */

.site-footer-app {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 0.75rem 0;
    margin-top: auto;
}

.footer-app-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-app-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .footer-app-left .footer-copyright {
        font-size: 0.75rem;
        color: #64748b;
    }

    .footer-app-left .footer-separator {
        color: #94a3b8;
        font-size: 0.75rem;
    }

    .footer-app-left a {
        font-size: 0.75rem;
        color: #64748b;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .footer-app-left a:hover {
            color: var(--bs-primary);
        }

.footer-app-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .footer-app-right a {
        color: #94a3b8;
        font-size: 0.875rem;
        transition: color 0.2s ease;
    }

        .footer-app-right a:hover {
            color: var(--bs-primary);
        }

@media (max-width: 767.98px) {
    .footer-app-content {
        justify-content: center;
        text-align: center;
    }

    .footer-app-left {
        justify-content: center;
    }
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    border-top: 3px solid var(--bs-primary);
}

    .cookie-consent-banner.show {
        transform: translateY(0);
    }

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-simple-view {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-consent-text {
    flex: 1;
    min-width: 300px;
}

    .cookie-consent-text h5 {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--bs-body-color);
    }

    .cookie-consent-text p {
        margin: 0;
        font-size: 14px;
        color: var(--bs-secondary);
        line-height: 1.5;
    }

    .cookie-consent-text a {
        color: var(--bs-primary);
        text-decoration: underline;
    }

.cookie-consent-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .cookie-consent-actions .btn {
        padding: 10px 20px;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 6px;
        transition: all 0.2s ease;
        font-size: 14px;
    }

    .cookie-consent-actions .btn-primary {
        background: var(--bs-primary);
        border: none;
        color: white;
    }

        .cookie-consent-actions .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
        }

    .cookie-consent-actions .btn-outline-secondary {
        border: 2px solid var(--bs-border-color);
        color: var(--bs-body-color);
    }

        .cookie-consent-actions .btn-outline-secondary:hover {
            background: var(--bs-secondary);
            color: white;
            border-color: var(--bs-secondary);
        }

    .cookie-consent-actions .btn-link {
        color: var(--bs-primary);
        text-decoration: none;
        padding: 10px 16px;
    }

        .cookie-consent-actions .btn-link:hover {
            text-decoration: underline;
        }

/* Cookie Advanced Settings */
.cookie-advanced-view {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border-color);
}

    .cookie-advanced-view.show {
        display: block;
    }

.cookie-category {
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-category-title {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    color: var(--bs-body-color);
}

.cookie-category-description {
    font-size: 13px;
    color: var(--bs-secondary);
    margin: 0;
    line-height: 1.4;
}

.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

    .cookie-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.cookie-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

    .cookie-toggle-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

.cookie-toggle input:checked + .cookie-toggle-slider {
    background-color: var(--bs-success);
}

    .cookie-toggle input:checked + .cookie-toggle-slider:before {
        transform: translateX(24px);
    }

.cookie-toggle input:disabled + .cookie-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-category-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 8px;
    background: var(--bs-secondary);
    color: white;
}

/* Cookie Consent Mobile */
@media (max-width: 768px) {
    .cookie-consent-banner {
        padding: 16px;
    }

    .cookie-simple-view {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-actions {
        width: 100%;
        flex-direction: column;
    }

        .cookie-consent-actions .btn {
            width: 100%;
            padding: 12px 16px;
        }

    .cookie-category {
        padding: 12px;
    }
}

/* ============================================
   THEME TOGGLE (Fixed Position)
   ============================================ */

.bd-mode-toggle {
    position: fixed;
    bottom: 0;
    left: 0;
    margin-bottom: 0.75rem;
    margin-left: 0.75rem;
    z-index: 1040;
}

    .bd-mode-toggle .dropdown-menu {
        min-width: 9rem;
        padding: 0.5rem;
    }

    .bd-mode-toggle .btn-icon {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

        .bd-mode-toggle .btn-icon:hover {
            transform: scale(1.05);
        }

    /* Light / auto mode — give the toggle a visible surface.
   Un-gated so it applies for data-bs-theme="light" AND "auto".
   The [data-bs-theme="dark"] rule further down overrides this in dark mode. */
    .bd-mode-toggle .btn-light {
        background-color: #ffffff;
        border-color: #d1d5db;
        color: #1f2937;
    }

        .bd-mode-toggle .btn-light:hover,
        .bd-mode-toggle .btn-light:focus {
            background-color: #f3f4f6;
            border-color: #9ca3af;
            color: #111827;
        }

    .bd-mode-toggle .dropdown-item {
        padding: 0.5rem 0.75rem;
        border-radius: 4px;
        transition: all 0.2s ease;
        margin-bottom: 0.25rem;
    }

        .bd-mode-toggle .dropdown-item:hover {
            transform: none;
        }

        .bd-mode-toggle .dropdown-item.active {
            background-color: rgba(var(--bs-primary-rgb), 0.15);
            color: var(--bs-primary);
        }

/* ============================================
   DARK MODE - Footer Marketing
   ============================================ */

[data-bs-theme="dark"] .site-footer-marketing {
    background: #111827;
    border-top-color: #1f2937;
}

[data-bs-theme="dark"] .footer-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

[data-bs-theme="dark"] .footer-tagline {
    color: #9ca3af;
}

[data-bs-theme="dark"] .footer-social a {
    color: #9ca3af;
}

    [data-bs-theme="dark"] .footer-social a:hover {
        background: #1f2937;
        color: #ffffff;
    }

[data-bs-theme="dark"] .footer-links h6.footer-heading {
    color: #9ca3af;
}

[data-bs-theme="dark"] .footer-links a {
    color: #d1d5db;
}

    [data-bs-theme="dark"] .footer-links a:hover {
        color: #ffffff;
    }

[data-bs-theme="dark"] .footer-newsletter-section {
    border-top-color: #1f2937;
}

[data-bs-theme="dark"] .newsletter-title {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .newsletter-subtitle {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .newsletter-input-group .form-control {
    background: #1f2937;
    border-color: #374151;
    color: #ffffff;
}

    [data-bs-theme="dark"] .newsletter-input-group .form-control::placeholder {
        color: #6b7280;
    }

    [data-bs-theme="dark"] .newsletter-input-group .form-control:focus {
        background: #1f2937;
        border-color: var(--bs-primary);
    }

[data-bs-theme="dark"] .footer-bottom {
    border-top-color: #1f2937;
}

[data-bs-theme="dark"] .footer-copyright {
    color: #6b7280;
}

[data-bs-theme="dark"] .footer-legal a {
    color: #9ca3af;
}

    [data-bs-theme="dark"] .footer-legal a:hover {
        color: #ffffff;
    }

[data-bs-theme="dark"] .footer-legal-separator {
    color: #374151;
}

/* ============================================
   DARK MODE - Footer App
   ============================================ */

[data-bs-theme="dark"] .site-footer-app {
    background: #111827;
    border-top-color: #1f2937;
}

[data-bs-theme="dark"] .footer-app-left .footer-copyright,
[data-bs-theme="dark"] .footer-app-left a {
    color: #6b7280;
}

    [data-bs-theme="dark"] .footer-app-left a:hover {
        color: var(--bs-primary);
    }

[data-bs-theme="dark"] .footer-app-right a {
    color: #6b7280;
}

    [data-bs-theme="dark"] .footer-app-right a:hover {
        color: var(--bs-primary);
    }

/* ============================================
   DARK MODE - Cookie Consent
   ============================================ */

[data-bs-theme="dark"] .cookie-consent-banner {
    background: rgba(30, 41, 59, 0.98);
    border-top-color: var(--bs-primary);
}

[data-bs-theme="dark"] .cookie-consent-text h5 {
    color: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="dark"] .cookie-consent-text p {
    color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .cookie-category {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .cookie-toggle-slider {
    background-color: #555;
}

/* ============================================
   DARK MODE - Theme Toggle
   ============================================ */

[data-bs-theme="dark"] .bd-mode-toggle .btn-light {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .bd-mode-toggle .dropdown-item.active {
    background-color: rgba(var(--bs-primary-rgb), 0.3);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   DARK MODE - Misc
   ============================================ */

[data-bs-theme="dark"] .text-danger {
    color: #ff6b6b !important;
}

/* ============================================
   GLOBAL PROGRESS BAR

   Ambient, non-blocking feedback that something is happening: page navigation
   and background requests. Deliberately NOT the blocking overlay below - that
   one hides the page the reader is still looking at, and if a navigation is
   cancelled it can be left covering the app. Reserve the overlay for work that
   genuinely must prevent interaction.

   Sits at the very top of the viewport, above the sticky header, which is where
   this pattern lives on every site that uses it. The blog's reading-progress
   bar sits on the header's bottom edge instead, so the two never collide.
   ============================================ */

.fgb-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999; /* above the blocking overlay, so both can show at once */
    background: var(--bs-primary, #16a34a);
    transform: scaleX(0);
    transform-origin: 0 50%;
    /* Transform rather than width: composited, no layout pass per frame. */
    transition: transform 0.2s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
}

    .fgb-progress.is-active {
        opacity: 1;
    }

    /* The final jump to 100% should feel like completion, not another step. */
    .fgb-progress.is-done {
        transition: transform 0.12s ease-out, opacity 0.35s ease-out 0.12s;
        opacity: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .fgb-progress {
        transition: opacity 0.2s linear;
    }
}

/* ============================================
   AJAX LOADING OVERLAY
   Add this to layout.css
   ============================================ */

.ajax-loader-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    justify-content: center;
    align-items: center;
}

    .ajax-loader-overlay.show {
        display: flex;
    }

.ajax-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

    .ajax-loader-content .spinner-border {
        width: 3rem;
        height: 3rem;
    }

/* Dark mode support */
[data-bs-theme="dark"] .ajax-loader-overlay {
    background: rgba(17, 24, 39, 0.85);
}

/* ============================================
   COOKIE CONSENT
   Add this to layout.css
   ============================================ */

/* ============================================
   COOKIE NOTICE (Simple Banner)
   ============================================ */
.cookie-notice {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 9998;
    max-width: 320px;
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    .cookie-notice.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

.cookie-notice-content {
    padding: 1.25rem;
    text-align: center;
}

    .cookie-notice-content p {
        margin: 0 0 1rem;
        font-size: 0.8125rem;
        line-height: 1.6;
        color: var(--bs-body-color);
    }

    .cookie-notice-content a {
        color: var(--bs-primary);
        text-decoration: none;
    }

        .cookie-notice-content a:hover {
            text-decoration: underline;
        }

.cookie-notice-btn {
    display: block;
    width: 100%;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background: var(--bs-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .cookie-notice-btn:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
    }

.cookie-notice-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cookie-notice-link {
    padding: 0;
    font-size: 0.75rem;
    color: var(--bs-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .cookie-notice-link:hover {
        color: var(--bs-body-color);
        text-decoration: underline;
    }

.cookie-notice-separator {
    color: var(--bs-secondary);
    font-size: 0.75rem;
}

/* Dark Mode - Banner */
[data-bs-theme="dark"] .cookie-notice {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Responsive - Banner */
@media (max-width: 480px) {
    .cookie-notice {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
    }
}

@media (min-width: 481px) {
    .cookie-notice {
        left: 4.5rem; /* Clear the theme toggle */
    }
}

/* ============================================
   COOKIE MODAL
   ============================================ */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .cookie-modal.show {
        opacity: 1;
        visibility: visible;
    }

.cookie-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cookie-modal-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-modal.show .cookie-modal-container {
    transform: translateY(0) scale(1);
}

.cookie-modal-content {
    background: var(--bs-body-bg, #ffffff);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* Modal Header */
.cookie-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cookie-modal-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cookie-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    color: #d97706;
}

[data-bs-theme="dark"] .cookie-modal-icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    color: #fbbf24;
}

.cookie-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.cookie-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--bs-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .cookie-modal-close:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--bs-body-color);
    }

[data-bs-theme="dark"] .cookie-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Modal Body */
.cookie-modal-body {
    padding: 1.5rem;
}

.cookie-modal-intro {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    color: var(--bs-secondary);
    line-height: 1.6;
}

/* Cookie Category */
.cookie-category {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

    .cookie-category:last-child {
        margin-bottom: 0;
    }

[data-bs-theme="dark"] .cookie-category {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.cookie-category-info {
    flex: 1;
    min-width: 0;
}

.cookie-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Category Icons with Background */
.cookie-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
}

.cookie-icon-essential {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.cookie-icon-analytics {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

[data-bs-theme="dark"] .cookie-icon-essential {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

[data-bs-theme="dark"] .cookie-icon-analytics {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.cookie-category-name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.cookie-category-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    vertical-align: middle;
}

[data-bs-theme="dark"] .cookie-category-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.cookie-category-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary);
    line-height: 1.5;
}

/* Toggle Switch */
.cookie-toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 0.25rem;
}

    .cookie-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.cookie-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.2s ease;
}

.cookie-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.cookie-toggle input:checked + .cookie-toggle-track {
    background: var(--bs-primary);
}

    .cookie-toggle input:checked + .cookie-toggle-track .cookie-toggle-thumb {
        transform: translateX(20px);
    }

.cookie-toggle input:focus-visible + .cookie-toggle-track {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.cookie-toggle-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

[data-bs-theme="dark"] .cookie-toggle-track {
    background: #475569;
}

/* Modal Footer */
.cookie-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] .cookie-modal-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.cookie-modal-btn-primary,
.cookie-modal-btn-secondary {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-modal-btn-primary {
    background: var(--bs-primary);
    color: white;
    border: none;
}

    .cookie-modal-btn-primary:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
    }

.cookie-modal-btn-secondary {
    background: transparent;
    color: var(--bs-body-color);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

    .cookie-modal-btn-secondary:hover {
        background: rgba(0, 0, 0, 0.05);
    }

[data-bs-theme="dark"] .cookie-modal-btn-secondary {
    border-color: rgba(255, 255, 255, 0.15);
}

    [data-bs-theme="dark"] .cookie-modal-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
    }

/* Dark Mode - Modal */
[data-bs-theme="dark"] .cookie-modal-content {
    background: #1e293b;
}

[data-bs-theme="dark"] .cookie-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Responsive - Modal */
@media (max-width: 480px) {
    .cookie-modal-container {
        max-width: 100%;
    }

    .cookie-modal-content {
        border-radius: 12px;
    }

    .cookie-category {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cookie-toggle {
        align-self: flex-start;
        margin-top: 0;
    }

    .cookie-modal-footer {
        flex-direction: column;
    }
}

/* Status Indicator Dot */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.status-loading {
    background-color: #9ca3af;
}

.status-up {
    background-color: #22c55e;
}

.status-down {
    background-color: #ef4444;
}

/* ============================================
   LIVE TOURNAMENT TICKER
   Add to layout.css
   ============================================ */

.tournament-ticker {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    overflow: hidden;
}

.ticker-container {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.ticker-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem 0.625rem 0;
    border-right: 1px solid var(--bs-border-color);
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

    .ticker-header:hover {
        color: inherit;
        text-decoration: none;
    }

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: #dc2626;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

#tickerTournamentName {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.ticker-content {
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}

.ticker-track {
    display: flex;
    animation: tickerScroll 45s linear infinite;
    width: max-content;
}

    .ticker-track:hover {
        animation-play-state: paused;
    }

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.ticker-player {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-right: 1px solid var(--bs-border-color-translucent);
    white-space: nowrap;
    transition: background 0.15s ease;
}

    .ticker-player:hover {
        background: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
        text-decoration: none;
    }

.ticker-position {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    min-width: 20px;
    text-align: right;
}

.ticker-name {
    font-size: 0.8125rem;
    font-weight: 500;
}

.ticker-score {
    font-size: 0.8125rem;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
}

    .ticker-score.under-par {
        color: #dc2626;
    }

    .ticker-score.over-par {
        color: #16a34a;
    }

    .ticker-score.even-par {
        color: var(--bs-body-color);
    }

/* Dark mode adjustments */
[data-bs-theme="dark"] .ticker-score.under-par {
    color: #f87171;
}

[data-bs-theme="dark"] .ticker-score.over-par {
    color: #4ade80;
}

/* Mobile */
@media (max-width: 768px) {
    .ticker-container {
        padding: 0 0.5rem;
    }

    .ticker-header {
        padding: 0.5rem 0.75rem 0.5rem 0;
    }

    #tickerTournamentName {
        display: none;
    }

    .ticker-player {
        padding: 0.5rem 0.75rem;
        gap: 0.375rem;
    }

    .ticker-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================
   REDUCED MOTION

   Companion to the block at the end of navbar.css. Between them they
   cover the chrome that appears on every page.

   The scoring ticker is the important one: a 45s marquee that never stops
   is exactly the pattern WCAG 2.2.2 asks you to let people halt. Stopping
   it alone would strand half the scores behind overflow:hidden, so the
   track also becomes manually scrollable — the information stays
   reachable, it just waits to be asked for.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none !important;
        transform: none !important;
    }

    .ticker-content {
        overflow-x: auto;
        /* The fade mask implies "more content is sliding in". Once the
           track is a scroll region, the scrollbar says that instead. */
        mask-image: none;
        -webkit-mask-image: none;
        scrollbar-width: thin;
    }

    .live-dot {
        animation: none !important;
        opacity: 1;   /* the pulse hides it at points in the loop */
    }

    .site-footer a,
    .theme-toggle,
    .theme-toggle-btn,
    .cookie-banner,
    .cookie-modal,
    .cookie-modal-content,
    .ajax-loading-overlay,
    .footer-social a,
    .footer-links a {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .theme-toggle:hover,
    .theme-toggle-btn:hover {
        transform: none !important;
    }

    /* Anchor jumps land instantly rather than gliding the page. */
    html {
        scroll-behavior: auto !important;
    }
}

/* ============================================
   FOCUS RINGS — shell surfaces

   navbar.css rings the header. This covers the rest of the chrome a
   keyboard user can reach: footers, theme toggle, cookie controls. Same
   layered halo, so it stays visible on either theme.
   ============================================ */
.site-footer a:focus-visible,
.footer-social a:focus-visible,
.footer-links a:focus-visible,
.theme-toggle:focus-visible,
.theme-toggle-btn:focus-visible,
.cookie-banner button:focus-visible,
.cookie-banner a:focus-visible,
.cookie-modal button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-primary);
    border-radius: 6px;
}