@charset "utf-8";
/* Import Source Sans Pro font */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
/* CSS Document */

/* Honeypot field - completely invisible to users but accessible to bots */
.honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    z-index: -1 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    visibility: hidden !important;
    display: block !important;
}

* {
    margin : 0;
    padding: 0;
}
body {
    background : #f2ead8 !important;
    color 	 : #4d4d4d !important;
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif !important;
    font-size  : 16px !important;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content wrapper to push footer down */
.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}
img {
    max-width : 100%;
}
textarea {
    resize : vertical;
}
h1, h2,
h3, h4,
h5, h6 {
    margin : 0;
}
p, li, td, th {
    color 	 : #4d4d4d;
    font-size  : 14px;
}
a, a:hover {
    text-decoration : none !important;
}
.padding-0 {
    padding : 0 !important;
}
.logo {
    display: block;
    padding: 20px 0 0 !important;
    width:460px;
}
.logo-caption {
    color: #ad0000;
    display: block;
    font-size: 12px;
    padding: 0;
    margin-top: 2px;
}

/* Header */
.header-bg {
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* Remove any margin below header on mobile when menu is active */
@media (max-width: 1049px) {
    .header-bg {
        margin-bottom: 0;
        border-bottom: none; /* Remove border on mobile to eliminate white line */
    }
}

/* Powered By Section - right next to logo */
.navbar-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
}

.powered-by-section {
    text-align: center;
    position: relative;
}

.powered-by-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.powered-by-text {
    color: #ad0000;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.poolcrunch-logo {
    height: 20px;
    width: auto;
    display: block;
}


.navbar-custom {
    background : #fff !important;
    border 	 : none !important;
    min-height : 110px !important;
    margin-bottom:0 !important;
    border-radius:0 !important;
}

/* Ensure no spacing issues on mobile */
@media (max-width: 1049px) {
    .navbar-custom {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Main Navigation */
.main-navigation {
    margin-left: auto;
    align-self: center;
}

.main-navigation .navbar-nav {
    margin: 0;
    list-style: none;
    display: flex;
}

.main-navigation .navbar-nav li {
    list-style: none;
    display: inline-block;
}

.main-navigation .navbar-nav li a {
    color: #444444 !important;
    font-size: 16px;
    padding: 10px 20px !important;
    font-weight: 600;
    text-decoration: none;
    display: block;
}

.main-navigation .navbar-nav li a:hover,
.main-navigation .navbar-nav li a:focus,
.main-navigation .navbar-nav li a:active,
.main-navigation .navbar-nav li a.active {
    color: #ab060f !important;
}

/* Bootstrap-style navbar components */
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}



.navbar-nav {
    margin: 0;
    list-style: none;
}

.navbar-nav > li {
    float: left;
    display: block;
}

.navbar-nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}


/* Mobile navbar toggle */
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

@media (min-width: 321px) {
    .navbar-toggle {
        margin-right: 15px;
    }
}

/* Small mobile screens - smaller PoolCrunch logo and newsletter adjustments */
@media (max-width: 320px) {
    .poolcrunch-logo {
        height: 14px !important;
    }

    .newsletter-input {
        flex: 1.5 !important;
        min-width: 120px !important;
        font-size: 14px !important;
    }

    .newsletter-btn {
        flex: 0.8 !important;
        font-size: 13px !important;
        padding: 10px 8px !important;
    }
}

/* Responsive visibility classes */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: inline !important;
    }
}

@media (min-width: 768px) {
    .desktop-only {
        display: inline !important;
    }
    .mobile-only {
        display: none !important;
    }
}

/* Knockouts card */
.ko-card {
    background: #ffffff;
    border: 1px solid #000;
    padding: 12px 12px 6px 12px;
}

.ko-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ko-left, .ko-right {
    display: flex;
    align-items: center;
}

.ko-label {
    font-weight: 700;
    margin-right: 5px;
    font-size: 14px;
}

.ko-alive {
    font-size: 14px;
    color: #333;
}

.ko-alive-val {
    font-weight: 700;
    color: #1e73be;
    font-size: 16px;
}

.ko-alive-ratio {
    margin-left: 5px;
    font-size: 16px;
}

.ko-title {
    font-size: 20px;
    font-weight: 800;
    color: #b00000;
    margin-bottom: 6px;
}

.modern-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    min-width: 150px;
    background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.modern-select:focus {
    outline: none;
    border-color: #999;
}

@media (max-width: 767px) {
    .ko-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .ko-right { width: 100%; }
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #888;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

.navbar-toggle-container {
    display: none; /* Hide on desktop */
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Mobile responsive */
@media (max-width: 1049px) {
    /* Hide tagline on mobile */
    .logo-caption {
        display: none;
    }

    /* Reduce header height on mobile */
    .navbar-custom {
        min-height: 60px !important;
    }

    /* Scale logo with minimum width for mobile */
    .logo {
        width: 40vw;
        min-width: 150px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    /* Adjust navbar header for mobile - left-align with space management */
    .navbar-header {
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        position: relative;
        flex-wrap: nowrap;
        min-height: 60px; /* Match navbar height */
        padding: 0 5px 0 0; /* Right padding for hamburger space */
    }

    /* Position powered-by section smaller and after logo */
    .powered-by-section {
        position: relative !important;
        transform: none !important;
        text-align: center;
        flex-shrink: 1;
        margin-top: 0;
    }

    /* Scale down powered-by section more */
    .powered-by-text {
        font-size: 7px;
        margin-bottom: 1px;
    }

    .poolcrunch-logo {
        height: 16px;
    }

    /* Hide main navigation, show hamburger */
    .main-navigation {
        display: none;
    }

    .navbar-toggle-container {
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    .navbar-toggle {
        display: block;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #333;
        margin: 4px 0;
        transition: 0.3s;
    }

    /* Mobile menu overlay - now pushes content down */
    .mobile-menu-overlay {
        background-color: #4a4a4a; /* Match sub-nav background */
        width: 100vw; /* Full viewport width */
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.1s ease-out;
        box-shadow: none; /* Remove shadow to eliminate any visual gaps */
        position: relative; /* Changed from absolute to relative to push content down */
        margin: 0; /* Remove any margins */
        padding: 0; /* Remove any padding */
        left: 50%; /* Center the element */
        right: 50%;
        margin-left: -50vw; /* Pull back to align with left edge */
        margin-right: -50vw; /* Pull back to align with right edge */
        border: none; /* Ensure no borders */
    }

    .mobile-menu-overlay.active {
        max-height: 300px; /* Will be overridden by JavaScript with actual height */
    }

    .mobile-menu-overlay ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-overlay li {
        border-bottom: 1px solid #666;
    }

    .mobile-menu-overlay li:last-child {
        border-bottom: none;
    }

    .mobile-menu-overlay a {
        display: block;
        padding: 15px 20px;
        color: #fff !important;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
    }

    .mobile-menu-overlay a:hover {
        background-color: #666;
        color: #fff !important;
    }

    /* Simple hamburger to X animation
       Note: The first child span is the sr-only label. The icon bars are the 2nd, 3rd, and 4th spans. */
    .navbar-toggle.active span.icon-bar:nth-of-type(2) {
        transform: translateY(6px) rotate(45deg);
    }

    .navbar-toggle.active span.icon-bar:nth-of-type(3) {
        opacity: 0;
    }

    .navbar-toggle.active span.icon-bar:nth-of-type(4) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

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

/* Desktop - show navbar items */
@media (min-width: 1050px) {
    .navbar-nav {
        float: left;
        margin: 0;
    }

    .navbar-nav > li {
        float: left;
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /* Hide mobile-only elements on desktop */
    .navbar-toggle-container {
        display: none !important;
    }

    .mobile-menu-overlay {
        display: none !important;
    }
}
/* Navigation styles moved to clean section below */
.select-container {
    position: relative;
    display: inline-block;
}
.select-container:after {
    content: '▼';
    font-size: 12px;
    color: #444444;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    pointer-events: none;
}
.select-container select::-ms-expand {
    display: none;
}
.select-container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    padding: 6px 32px 6px 10px;
    background: #ffffff;
    border: 1px solid #999; /* match checkbox tone */
    border-radius: 4px;
    color: #333;
    height: 34px;
    font-size: 15px; /* slightly smaller for visual balance */
    font-weight: 400; /* normal weight for selected option */
}

/* Removed old week-nav style */
.mid-section {
    padding-top:15px;
    padding-bottom: 40px;
    background-color: #f2ead8;
    flex: 1;
}
h1 {
    color:#ab060f;
    font-size:24px;
    font-weight:600;
    margin-bottom: 15px !important;
}

/* Strategy page paragraph spacing */
.mid-section p {
    margin-bottom: 16px;
}

.mid-section h6 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #ab060f;
}


h2 {
    color:#ab060f;
    font-size:22px;
    font-weight:600;
    margin-bottom: 2px;
}
h4 {
    color:#ab060f;
    font-size:18px;
    font-weight:600;
    margin-bottom: 4px;
    text-align: left;
}
h5 {
    color:#ab060f;
    font-size:16px;
    font-weight:600;
    margin-bottom: 4px;
}
h6 {
    font-weight: bold;
    font-size: 16px;
    margin-top: 25px !important;
    margin-bottom: 5px !important;
}
.grid-header {
    float: none;
    clear: both;
    width: 100%;
    display: block;
}
.other-options label {
    margin: 1px 0 5px 0 !important;
    width: 190px;
}
.control-box label {
    color: #4d4d4d;
    font-size: 15px;
    font-weight:normal !important;
    margin: 0;
}
.control-box input[type=checkbox] {
    margin-right: 3px;
    margin-top: 0;
}
.control-box .select-container {
    width: 100%;
}
.inner-box {
    padding-top:5px;
}
h3 {
    color:#4d4d4d;
    font-size:16px;
    font-weight:bold;
    vertical-align: middle;
    padding-bottom: 5px;
}
.other-options label {
    padding-left: 5px;
    padding-right: 5px;
}
.custom-control {
    border-radius: 4px !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    color: #333 !important;
    padding: 6px 10px;
    background: #fff;
}

.btn-utility {
    background: #666;
    color: #fff;
    border: 1px solid #555;
    padding: 5px 15px;
    font-size: 12px;
    cursor: pointer;
}
.btn-utility:hover {
    background: #555;
}
/* Grid Styles - Core Grid Table */
.datatable {
    width: auto;
    background-color: #ffffff;
    border-collapse: collapse;
    border-spacing: 0 !important;
    margin: 0 auto;
    border: 1px solid black;
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
}
.datatable th {
    background-color: #0000b0 !important;
    color: #ffffff;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    height: 25px;
    padding: 3px 5px !important;
    border-bottom: none !important;
    border-top: none !important;
}
.datatable td {
    background-color: #ffffff;
    font-size: 14px;
    height: 19px;
    padding: 3px 5px !important;
    margin: 0;
    text-align: center;
    color:#000;
    border-top: 1px solid black !important;
    border-left: none;
    border-right: none;
}
.datatable th a:link {
    color: #ffffff;
    text-decoration: none;
}
.datatable th a:visited {
    color: #ffffff;
    text-decoration: none;
}
.datatable td.dist {
    background-color: #c0c0ff;
}
.datatable td.teamname {
    background-color: #b00000 !important;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.datatable td.fv {
    background-color: #c0c0ff;
    text-align: left !important;
}
/* Removed legacy star rating */
.datatable td.gc span.spread {
    display: block;
    color: #666666;
    float: right;
    font-size: 10px;
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
    line-height: 6px;
    margin: 0;
    padding: 1px 1px 1px 0;
}
.datatable td.gc span.gameinfo {
    display: block;
    color: #666666;
    float: left;
    font-size: 8px;
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
    line-height: 6px;
    margin: 0;
    padding: 0 0 1px 1px;
}

.datatable td.gc {
    min-width: 50px !important;
    vertical-align: top;
    padding: 3px 0 2px 0 !important;
    line-height: 12px;
    height: 19px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Style BYE cells to use grayed out color */
.datatable td.gc.bye {
    color: #999999 !important;
}

.datatable td.estimated {
    color: #666666;
}

.datatable td.estimated:after {
    content: '*';
}

.datatable td.highlighted {
    outline: 2px solid #ff6600;
    outline-offset: -2px;
}

.datatable td.teamname.highlighted {
    outline: 2px solid #ff6600;
    outline-offset: -2px;
}

.datatable td.crossedh {
    color: #999999 !important;
    position: relative;
    cursor: not-allowed !important;
}

.datatable td.crossedh::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 0, 0, 0.2);
    pointer-events: none;
    transform: translateY(-50%);
}

.datatable td.crossedv {
    color: #999999 !important;
    position: relative;
    cursor: not-allowed !important;
}

.datatable td.crossedv::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    background: rgba(255, 0, 0, 0.2);
    pointer-events: none;
    transform: translateX(-50%);
}

.datatable td.crossedb {
    color: #999999 !important;
    position: relative;
    cursor: not-allowed !important;
}

.datatable td.crossedb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 0, 0, 0.2);
    pointer-events: none;
    transform: translateY(-50%);
}

.datatable td.crossedb::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    background: rgba(255, 0, 0, 0.2);
    pointer-events: none;
    transform: translateX(-50%);
}

/* Cell selection highlighting - use .selected instead of .active */
#grid th.selected {
    color: #ff8000;
}
#grid td.teamname.selected {
    color: #ff8000;
}

span.resultW {
    font-size: 12px;
    color: #80FF80;
}

span.resultL {
    font-size: 12px;
    color: #FF8080;
}

span.resulttie {
    font-size: 12px;
    color: #A0A0A0;
}

span.resultPPD {
    font-size: 12px;
    color: #A0A0A0;
}

/* Clean Navigation Styles */
.sub-nav {
    background: #292929;
    padding: 0;
}

.sub-nav .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

.sub-nav .row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
}

/* Year Dropdown */
.week-select-box {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.menu-select {
    position: relative;
    display: inline-block;
}

.menu-select select {
    background: #747474;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    padding-left: 8px;
    padding-right: 26px;
    margin: 6px 0;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.menu-select:after {
    content: '▼';
    color: #fff;
    right: 6px;
    top: 16px;
    height: 34px;
    position: absolute;
    pointer-events: none;
    font-size: 12px;
}

/* Hide week dropdown on desktop */
.menu-select.week-select {
    display: none;
}

/* Week Navigation */
.week-nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-left: auto; /* shift week links to the right on desktop */
}

.week-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.week-nav ul li {
    display: inline-block;
    margin: 0 1px;
}

.week-nav ul li a {
    color: #BCBCBC;
    font-size: 15px;
    display: block;
    padding: 4px 8px;
    text-decoration: none;
    white-space: nowrap;
}

/* Active and Hover States */
.week-nav ul li:hover,
.week-nav ul li.active {
    background: #ab060f;
}

.week-nav ul li:hover a,
.week-nav ul li.active a {
    color: #fff;
    font-weight: 600;
}

#week-caption {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 0;
    display: inline-block;
    margin-right: 10px;
}

/* Newsletter styles moved to footer - now using Tailwind classes */

/* Mobile Styles */
@media (max-width: 1050px) {
    .sub-nav {
        padding: 6px 0; /* slightly slimmer now that newsletter is gone */
        margin-top: 0; /* Ensure no top margin */
    }

    .sub-nav .container {
        padding: 0 10px;
    }

    .sub-nav .row {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        min-height: auto;
    }

    /* Show both dropdowns on mobile, hide week links */
    .week-select-box {
        display: flex !important;
        width: 100%;
        gap: 10px;
        float: none;
        padding: 0;
        margin-bottom: 0; /* no extra bottom space now that newsletter moved to footer */
    }

    /* Show week dropdown on mobile */
    .menu-select.week-select {
        display: block !important;
        flex: 1;
    }

    .menu-select {
        position: relative;
        flex: 1;
        margin: 0;
    }

    .menu-select select {
        background: #747474 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #fff !important;
        padding: 10px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        width: 100% !important;
        height: 40px !important;
        line-height: 20px !important;
        margin: 0 !important;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .menu-select:after {
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        right: 8px;
    }

    .week-nav {
        display: none !important;
    }

    /* Newsletter styles removed - now in footer */
}

.grid-form .control-label {
    font-weight: bold;
    margin-right: 10px;
    color: #333;
}

.grid-form .select-container {
    position: relative;
    display: inline-block;
}

.grid-form .form-control {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 15px;
    min-width: 150px;
}

#expected-eliminations {
    font-weight: bold;
    color: #ab060f;
    font-size: 16px;
}

@media (max-width: 768px) {
    .grid-form .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .grid-form .col-xs-12 {
        width: 100%;
    }
}

/* Table Sorting */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
}

.sortable:hover {
    background-color: #337ab7;
    color: white; /* Keep header text white on hover */
}

/* Sorting active state - specific to sortable headers */
.sortable.sort-active {
    /* No special styling needed, just the red arrow */
}

.sort-indicator {
    display: inline-block;
    margin-left: 0px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6); /* Translucent white by default */
    transition: color 0.2s;
    pointer-events: none;
    vertical-align: middle;
}

.sortable.sort-active .sort-indicator {
    color: rgba(255, 102, 102, 0.7); /* Light translucent red for active column */
}

/* Show up arrows for inactive columns (ready to sort) */
.sortable:not(.sort-active) .sort-indicator:empty::after {
    content: "▲";
}

/* Active column shows its actual sort direction */
.sortable.sort-active[data-sort-dir="asc"] .sort-indicator:empty::after {
    content: "▲";
}

.sortable.sort-active[data-sort-dir="desc"] .sort-indicator:empty::after {
    content: "▼";
}

/* Ensure header text always stays white */
.sortable,
.sortable.active {
    color: white;
}

/* Pick change indicators */
.posdelta {
    color: #1e7e34;
    font-weight: 600;
}
.negdelta {
    color: #ab060f;
    font-weight: 600;
}

/* Filter Effects - Dim filtered games */
.datatable td.gc.filtered {
    color: #b0b0b0 !important;
    background-color: #ffffff !important;
}

.datatable td.gc.filtered span {
    color: #c0c0c0 !important;
}

/* Hide spreads when toggled off */
.datatable td.gc span.spread.hidden {
    display: none !important;
}

/* Spread colors for visual differentiation */
td.g0, li.g0 { background-color: #fffffe; }
td.g1, li.g1 { background-color: #fffffe; }
td.g2, li.g2 { background-color: #fefffe; }
td.g3, li.g3 { background-color: #fefffe; }
td.g4, li.g4 { background-color: #fdfffd; }
td.g5, li.g5 { background-color: #fdfffd; }
td.g6, li.g6 { background-color: #f7fff7; }
td.g7, li.g7 { background-color: #eeffee; }
td.g8, li.g8 { background-color: #eaffea; }
td.g9, li.g9 { background-color: #e6ffe6; }
td.g10, li.g10 { background-color: #e3ffe3; }
td.g11, li.g11 { background-color: #e1ffe1; }
td.g12, li.g12 { background-color: #dbffdb; }
td.g13, li.g13 { background-color: #d5ffd5  }
td.g14, li.g14 { background-color: #caffca; }
td.g15, li.g15 { background-color: #bdffbd; }
td.g16, li.g16 { background-color: #b8ffb8; }
td.g17, li.g17 { background-color: #b3ffb3; }
td.g18, li.g18 { background-color: #b0ffb0; }
td.g19, li.g19 { background-color: #aeffae; }
td.g20, li.g20 { background-color: #a1ffa1; }
td.g21, li.g21 { background-color: #93ff93; }
td.g22, li.g22 { background-color: #8cff8c; }
td.g23, li.g23 { background-color: #85ff85; }
td.g24, li.g24 { background-color: #84ff84; }
td.g25, li.g25 { background-color: #82ff82; }
td.g26, li.g26 { background-color: #7eff7e; }
td.g27, li.g27 { background-color: #7aff7a; }
td.g28, li.g28 { background-color: #69ff69; }
td.g29, li.g29 { background-color: #57ff57; }
td.g30, li.g30 { background-color: #52ff52; }
td.g31, li.g31 { background-color: #4cff4c; }
td.g32, li.g32 { background-color: #3fff3f; }

/* Grid Controls Container */
.grid-controls-container {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.controls-row {
    display: flex !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

.controls-column {
    flex: 1 1 33.333%;
    width: 33.333%;
}

.controls-column:first-child {
    /* Left column - left-aligned content */
    position: relative;
}

.controls-column:first-child .control-group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

.controls-column:nth-child(2) {
    /* Middle column - content centered within the 1/3 space */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controls-column:nth-child(2) .controls-subheader,
.controls-column:nth-child(2) .checkbox-group {
    /* Keep text left-aligned but center the block */
    text-align: left;
}



.controls-column:last-child {
    /* Right column - left-aligned content */
}

.controls-header {
    color: #ab060f;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.controls-subheader {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 0;
}

.controls-instructions {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.control-group {
    margin-bottom: 12px;
}

/* Tighter spacing for inline control rows (e.g., Expected Eliminations) */
.controls-column .control-group.inline {
    margin-bottom: 4px;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group.inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group .control-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
}

.control-group.inline .control-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #ab060f; /* modern browsers incl. iOS */
}

/* Third column - promotion content */
.controls-column:last-child {
    display: flex;
    flex-direction: column;
}

.promotion-header {
    color: #ab060f !important;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 0;
}

.promotion-text {
    color: #666;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
}

.promotion-text:last-of-type {
    margin-bottom: 8px;
}

.evolution-text {
}

/* Header poolcrunch link should use Dark Wugu brand color */
.powered-by-section .poolcrunch-link {
    color: #0000b0 !important;
    text-decoration: underline !important;
    font-size: 11px;
    margin-top: 6px;
    display: block;
}

.powered-by-section .poolcrunch-link:hover {
    color: #000080 !important;
    text-decoration: underline !important;
}

/* Controls section poolcrunch link should be PoolCrunch green */
.controls-column .poolcrunch-link {
    color: #2DA100;
    text-decoration: none;
}

.controls-column .poolcrunch-link:hover {
    color: #228000;
    text-decoration: underline;
}

.promotion-cta {
    color: #ab060f;
    text-decoration: underline;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0;
    display: block;
    position: relative;
}

.promotion-cta::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="%23ab060f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.promotion-cta:hover {
    color: #8b0509;
    text-decoration: underline;
}

.promotion-cta:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="%238b0509" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.controls-column:first-child .btn-utility {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    background: #b00000;
    border: 1px solid #900000;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
}

.controls-column:first-child .btn-utility:hover {
    background: #900000;
}

/* Mobile responsive - stack columns */
@media (max-width: 749px) {
    .controls-row {
        flex-direction: column;
        gap: 20px;
    }

    .controls-column {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .controls-column:last-child {
        padding-top: 0;
        justify-content: flex-start;
    }

    /* Make first column flex container on mobile */
    .controls-column:first-child {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Create button row container on mobile */
    .mobile-button-row {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

    /* Clear Grid button positioning on mobile */
    .controls-column:first-child .btn-utility {
        position: static;
        margin: 0;
        align-self: auto;
    }

    /* Show Grid Filters button positioning on mobile */
    .mobile-filter-toggle {
        margin: 0;
        align-self: auto;
        vertical-align: top;
    }

    /* Ensure both buttons have same height */
    .mobile-button-row .btn-utility,
    .mobile-button-row .mobile-filter-toggle {
        box-sizing: border-box;
        vertical-align: top;
        line-height: 1;
    }

    /* Left-align Display Options on mobile */
    .controls-column:nth-child(2) {
        align-items: flex-start;
    }

    /* Hide filter sections on mobile by default */
    .controls-column:nth-child(2),
    .controls-column:nth-child(3) {
        display: none;
    }

    /* Show filter sections when expanded */
    .controls-row.filters-expanded .controls-column:nth-child(2),
    .controls-row.filters-expanded .controls-column:nth-child(3) {
        display: flex;
    }
}

/* Mobile Filter Toggle Button */
.mobile-filter-toggle {
    display: none; /* Hidden by default, shown only on mobile */
    background: white;
    border: 1px solid #ab060f;
    color: #ab060f;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 0;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s ease;
    text-align: center;
    align-self: center;
}

.mobile-filter-toggle:hover {
    background: #f9f9f9;
    border-color: #8b0509;
    color: #8b0509;
}

.mobile-filter-toggle .toggle-icon {
    margin-left: 8px;
    transition: transform 0.2s ease;
    font-size: 16px;
}

.mobile-filter-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

.mobile-filter-toggle.expanded .toggle-text {
    /* Text will be updated via JavaScript */
}

/* Hide mobile button row on desktop */
.mobile-button-row {
    display: none;
}

@media (max-width: 749px) {
    .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
    }

    .mobile-button-row {
        display: flex;
    }
}

/* Spread Key Legend */
.spread-key {
    margin: 15px auto 10px auto;
    text-align: center;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.spread-key div {
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
}
.spread-key ul {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.spread-key ul li {
    display: block;
    float: left;
    width: 6px;
    height: 18px;
    font-size: 10px;
    text-align: center;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    line-height: 18px;
}
.spread-key ul li:first-child {
    padding-left: 2px;
    border-left: 1px solid black;
}
.spread-key ul li:last-child {
    width: 20px;
    text-align: right;
    padding-right: 2px;
    border-right: 1px solid black;
}
.spread-key ul li.g0, .spread-key ul li.g6, .spread-key ul li.g14, .spread-key ul li.g20, .spread-key ul li.g26 {
    width: 14px;
}

@media (max-width: 749px) {
    .spread-key {
        flex-direction: column;
        gap: 5px;
    }

    .spread-key div {
        width: 100%;
        text-align: center;
    }
}

/* Mobile Grid Hint removed */

/* Mobile Grid Container - Progressive Sticky Implementation */
@media screen and (max-width:767px) {
    /* Create horizontal scroll container */
    .grid-scroll-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        position: relative;
        -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
        scrollbar-width: thin;
    }

    /* Custom scrollbar styling for better mobile experience */
    .grid-scroll-container::-webkit-scrollbar {
        height: 8px;
    }

    .grid-scroll-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .grid-scroll-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .grid-scroll-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .datatable {
        border-top: none;
        min-width: fit-content;
        position: relative;
    }

    /* Initial state - all first 4 columns are sticky - only apply inside scroll container */
    .grid-scroll-container .datatable th:nth-child(1),
    .grid-scroll-container .datatable th:nth-child(2),
    .grid-scroll-container .datatable th:nth-child(3),
    .grid-scroll-container .datatable th:nth-child(4),
    .grid-scroll-container .datatable td:nth-child(1),
    .grid-scroll-container .datatable td:nth-child(2),
    .grid-scroll-container .datatable td:nth-child(3),
    .grid-scroll-container .datatable td:nth-child(4) {
        position: sticky;
        background: inherit;
        z-index: 10;
        transition: left 0.3s ease, opacity 0.3s ease;
    }

    /* Position the sticky columns - use actual measured widths */
    .grid-scroll-container .datatable th:nth-child(1),
    .grid-scroll-container .datatable td:nth-child(1) {
        left: 0;
        z-index: 14;
    }

    .grid-scroll-container .datatable th:nth-child(2),
    .grid-scroll-container .datatable td:nth-child(2) {
        left: 32px; /* Actual EV column width */
        z-index: 13;
    }

    .grid-scroll-container .datatable th:nth-child(3),
    .grid-scroll-container .datatable td:nth-child(3) {
        left: 64px; /* EV + W% width */
        z-index: 12;
    }

    .grid-scroll-container .datatable th:nth-child(4),
    .grid-scroll-container .datatable td:nth-child(4) {
        left: 96px; /* EV + W% + P% width */
        z-index: 11;
    }

    /* Progressive sticky state - only team column visible */
    .grid-scroll-container.progressive-mode .datatable th:nth-child(1),
    .grid-scroll-container.progressive-mode .datatable th:nth-child(2),
    .grid-scroll-container.progressive-mode .datatable th:nth-child(3),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(1),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(2),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(3) {
        opacity: 0;
        pointer-events: none;
        left: -100px; /* Move off screen */
    }

    .grid-scroll-container.progressive-mode .datatable th:nth-child(4),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(4) {
        left: 0; /* Team column moves to far left */
        z-index: 15;
    }

    /* Ensure proper background colors are maintained for sticky columns */
    .grid-scroll-container .datatable th:nth-child(1),
    .grid-scroll-container .datatable th:nth-child(2),
    .grid-scroll-container .datatable th:nth-child(3),
    .grid-scroll-container .datatable th:nth-child(4) {
        background-color: #0000b0 !important;
    }

    .grid-scroll-container .datatable td:nth-child(1),
    .grid-scroll-container .datatable td:nth-child(2),
    .grid-scroll-container .datatable td:nth-child(3) {
        background-color: #c0c0ff !important;
    }

    .grid-scroll-container .datatable td:nth-child(4) {
        background-color: #b00000 !important; /* Team column red */
    }

    /* Add subtle shadow to indicate sticky columns */
    .grid-scroll-container .datatable th:nth-child(4),
    .grid-scroll-container .datatable td:nth-child(4) {
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    /* Removed progressive-mode top indicator and scrollbar color tweak */

    /* Add subtle animation when columns transition - only for sticky columns */
    .grid-scroll-container.progressive-mode .datatable th:nth-child(1),
    .grid-scroll-container.progressive-mode .datatable th:nth-child(2),
    .grid-scroll-container.progressive-mode .datatable th:nth-child(3),
    .grid-scroll-container.progressive-mode .datatable th:nth-child(4),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(1),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(2),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(3),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(4) {
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                   opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Enhance shadow effect for team column in progressive mode */
    .grid-scroll-container.progressive-mode .datatable th:nth-child(4),
    .grid-scroll-container.progressive-mode .datatable td:nth-child(4) {
        box-shadow: 3px 0 8px rgba(171, 6, 15, 0.15);
    }
}

/* Basic container for centered content */
/* Standard page container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Centered content box */
.content-centered {
    margin: 20px 0;
    padding: 0;
    clear: both;
    display: block;
}

/* General layout system */
.layout-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.layout-col {
    /* No padding needed with gap */
}

.layout-col-full {
    flex: 0 0 100%;
    max-width: 100%;
}

.layout-col-half {
    flex: 0 0 50%;
    max-width: 50%;
}

.layout-col-two-thirds {
    flex: 0 0 calc(66.666667% - 10px);
    max-width: calc(66.666667% - 10px);
}

.layout-col-third {
    flex: 0 0 calc(33.333333% - 10px);
    max-width: calc(33.333333% - 10px);
}

.layout-center {
    margin: 0 auto;
}

/* Tables side-by-side layout */
.tables-container {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    width: 100%;
}

.table-section {
    flex: 1;
    width: 100%;
}

.table-section table {
    width: 100%;
}

.table-header {
    color: #ab060f;
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
}

/* Elimination tables styling */
.elimination-table {
    width: 100%;
}

.elimination-table .teamname {
    width: 20%;
    text-align: center;
    font-weight: bold;
    padding: 8px;
    border: 1px solid #ccc;
    background-color: #ab060f;
    color: white;
}

.elimination-table .bargraph {
    width: 80%;
    padding: 8px;
    border: 1px solid #ccc;
    position: relative;
    text-align: left;
}

.elimination-table .barline {
    height: 14px;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    min-width: 1px;
}

.elimination-table .percentage-text {
    font-weight: bold;
    font-size: 12px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
    line-height: 14px;
}

/* Strategy page image styling */
.strategy-image-container {
    text-align: center;
    margin: 20px auto;
    max-width: 600px; /* Limit container width */
}

.strategy-image-container img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px; /* Reduced from 10px */
    border: 1px solid #ddd;
    border-radius: 4px;
}

.strategy-caption {
    display: block;
    font-size: 12px; /* Reduced from 14px */
    color: #666;
    margin: 0 auto;
    font-style: italic;
    max-width: 90%; /* Make caption narrower than image */
    line-height: 1.4;
}

/* Grid footer content styling */
.footer-text {
    margin-top: 40px;
    padding: 20px 0;
}

.about-text {
    padding-right: 20px;
}

.about-text p {
    margin-bottom: 15px;
    line-height: 1.5;
}

.red-color {
    color: #ab060f;
}

.social-list {
    text-align: center;
}

.social-list h4 {
    margin-bottom: 25px;
    color: #ab060f;
    font-size: 18px;
    font-weight: 600;
}

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

.social-list li {
    margin-bottom: 12px;
}

.social-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.social-list a:hover {
    background-color: #f0f0f0;
    text-decoration: none;
}

.social-list svg {
    flex-shrink: 0;
}

/* Star rating display */
.datatable .starrating {
    background-image: url('/images/stars.gif');
    height: 15px;
}

/* Site Footer */
.site-footer {
    background: #292929;
    color: #ffffff;
    padding: 30px 0;
    margin-top: auto;
}

.footer-content-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-main-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

/* Quick Links Section */
.footer-quick-links {
    flex: 0 0 auto;
}

.footer-section-header {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 0;
    text-align: left;
}

.footer-nav-vertical {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-nav-vertical a {
    color: #BCBCBC;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav-vertical a:hover {
    color: #ff8c8c;
    text-decoration: none;
}

/* Copyright - Center on Desktop */
.footer-copyright {
    color: #999;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
    flex: 1;
    align-self: center;
    max-width: 250px;
    white-space: nowrap;
}

/* Copyright Mobile - Hidden on Desktop */
.footer-copyright-mobile {
    color: #999;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
    border-top: 1px solid #444;
    padding-top: 15px;
    margin-top: 10px;
    display: none;
}

/* Newsletter Section - Right */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 0 0 auto;
    /* Fix desktop width so replacing form with text does not change layout */
    width: 320px;
}

.newsletter-label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
}

.newsletter-form {
    display: flex;
    gap: 8px;
    width: 100%;
}

.footer-newsletter-input {
    background: #ffffff;
    border: 0;
    border-radius: 4px;
    color: #333;
    padding: 8px 12px;
    font-size: 14px;
    width: 200px;
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
}

.footer-newsletter-input::placeholder {
    color: #999;
}

.footer-newsletter-input:focus {
    outline: 2px solid #ab060f;
    outline-offset: 0;
}

.footer-newsletter-btn {
    background: #ab060f;
    border: 0;
    border-radius: 4px;
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
    transition: background-color 0.2s ease;
}

.footer-newsletter-btn:hover {
    background: #8a050c;
}

/* Mobile Footer Styles */
@media (max-width: 1050px) {
    .footer-content-row {
        gap: 25px;
    }

    .footer-main-content {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        text-align: center;
    }

    .footer-quick-links {
        order: 1;
    }

    .footer-section-header {
        text-align: left;
    }

    /* Center the block itself, but left-align its contents */
    .footer-quick-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: center;
    }

    .footer-nav-vertical {
        align-items: flex-start;
    }

    .footer-newsletter {
        order: 2;
        align-items: center;
        width: 100%;
    }

    .newsletter-label {
        text-align: center;
    }

    .newsletter-form {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .footer-newsletter-input {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    /* Hide desktop copyright on mobile */
    .footer-copyright {
        display: none;
    }

    /* Show mobile copyright */
    .footer-copyright-mobile {
        display: block;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding: 25px 0;
    }

    .footer-content-row {
        gap: 20px;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 250px;
    }

    .footer-newsletter-input,
    .footer-newsletter-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Keep normal copyright text size on mobile */

    /* Center the Quick Links section but keep text left-aligned */
    .footer-quick-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* left-align header + links */
        align-self: center;      /* center the block itself */
    }

    .footer-section-header {
        text-align: left;
        margin-bottom: 12px;
    }

    .footer-nav-vertical {
        align-items: flex-start;
        text-align: left;
    }
}

/* Very small screens - 320px and below */
@media (max-width: 320px) {
    /* Smaller copyright text only on very small screens */
    .footer-copyright-mobile {
        font-size: 11px;
        line-height: 1.3;
    }
}

/* Mobile responsive behavior */
@media (max-width: 767px) {
    .layout-col-half,
    .layout-col-two-thirds,
    .layout-col-third {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .tables-container {
        flex-direction: column;
        gap: 20px;
    }

    .content-centered {
        padding: 0;
    }
}

/* Re-apply tighter header spacing for the tiniest screens after broader mobile rules */
@media (max-width: 320px) {
    /* Higher specificity so it wins over broader 1049px rule */
    .header-bg .navbar-header {
        gap: 6px;
    }
    /* Make "What is PoolCrunch?" link slightly smaller on tiny screens */
    .powered-by-section .poolcrunch-link {
        font-size: 10px;
    }
}