/* ============================================================
   SITE STYLES — extracted from WordPress Twenty Twenty-Four
   Clean version for standalone PHP site
   ============================================================ */


/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */

:root {
    /* Colors */
    --color-base:               #f9f9f9;
    --color-base-2:             #ffffff;
    --color-contrast:           #111111;
    --color-contrast-2:         #636363;
    --color-contrast-3:         #A4A4A4;
    --color-accent:             #cfcabe;
    --color-accent-2:           #c2a990;
    --color-accent-3:           #d8613c;
    --color-accent-4:           #b1c5a4;
    --color-accent-5:           #b5bdbc;

    /* Font families */
    --font-body:                "Inter", sans-serif;
    --font-heading:             Cardo, serif;

    /* Font sizes */
    --font-size-small:          0.9rem;
    --font-size-medium:         1.05rem;
    --font-size-large:          clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.767), 1.85rem);
    --font-size-x-large:        clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.083), 2.5rem);
    --font-size-xx-large:       clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.283), 3.27rem);

    /* Spacing */
    --space-10:                 1rem;
    --space-20:                 min(1.5rem, 2vw);
    --space-30:                 min(2.5rem, 3vw);
    --space-40:                 min(4rem, 5vw);
    --space-50:                 min(6.5rem, 8vw);
    --space-60:                 min(10.5rem, 13vw);

    /* Shadows */
    --shadow-natural:           6px 6px 9px rgba(0, 0, 0, 0.2);
    --shadow-deep:              12px 12px 50px rgba(0, 0, 0, 0.4);
    --shadow-sharp:             6px 6px 0px rgba(0, 0, 0, 0.2);
    --shadow-crisp:             6px 6px 0px rgb(0, 0, 0);

    /* Layout */
    --content-width:            620px;
    --wide-width:               1280px;
}


/* ============================================================
   BASE / RESET
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--color-base);
    color: var(--color-contrast);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
}

:where(figure) {
    margin: 0 0 1em;
}

img {
    height: auto;
    max-width: 100%;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-contrast);
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
}

h1 { font-size: var(--font-size-xx-large); line-height: 1.15; }
h2 { font-size: var(--font-size-x-large); }
h3 { font-size: var(--font-size-large); }
h4 { font-size: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem); }
h5 { font-size: var(--font-size-medium); }
h6 { font-size: var(--font-size-small); }


/* ============================================================
   LINKS
   ============================================================ */

a {
    color: var(--color-contrast);
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}


/* ============================================================
   DATATABLES GLOBAL OVERRIDES  (DataTables 1.13.7)
   ============================================================ */

/* Soften the header border (default is rgba(0,0,0,0.3) which is too dark) */
table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid #ddd !important;
}

#rankingstable tr:nth-child(even),
#tighttable tr:nth-child(even) {
    background-color: #f5f5f5 !important;
}


/* ============================================================
   RANKINGS TABLE  (#rankingstable)
   ============================================================ */

#rankingstable td,
#rankingstable th {
    text-align: center;
    vertical-align: middle;
}


/* ============================================================
   SCORES TABLE  (#scores)
   ============================================================ */

#scores {
    width: 100%;
}

#scores td {
    padding: 1px;
    text-align: center;
}

#scores th {
    text-align: center;
}


/* ============================================================
   TIGHT TABLE  (#tighttable)
   ============================================================ */

#tighttable {
    width: 100% !important;
}

#tighttable th {
    background-color: transparent !important;
    white-space: nowrap;
}

/* tighttable uses global DataTables stripe override */

#tighttable td {
    white-space: nowrap;
}


/* ============================================================
   BRACKET TABLE  (#brackettable)
   ============================================================ */

#brackettable td {
    text-align: center;
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
}

#brackettable th {
    text-align: center;
    vertical-align: middle;
    background-color: white;
}

#brackettable tr {
    background-color: white;
}

/* Bracket rows keep white background (the global DataTables override handles striping) */
#brackettable tr { background-color: white; }

/* Hide columns 5+ on mobile */
@media (max-width: 800px) {
    #brackettable th:nth-child(n+5) {
        display: none !important;
    }

    #brackettable td:nth-child(n+5) {
        display: none !important;
    }
}

/* Hide mobile-only bracket on desktop */
@media (min-width: 801px) {
    .mobilebracket {
        display: none !important;
    }
}


/* ============================================================
   FILTER CONTAINER  (.filtercontainer / .filters)
   ============================================================ */

.filtercontainer {
    display: flex;
}

.filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

@media (max-width: 1025px) {
    .filtercontainer {
        flex-direction: column;
    }
    .filters {
        width: 100%;
        align-items: center;
    }
}


/* ============================================================
   FILTERS TABLE  (#filters)
   ============================================================ */

#filters {
    table-layout: fixed;
    width: 100%;
}

.filtertop td {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    padding: .25rem;
}

.filtermiddle td {
    padding: 1rem;
    background-color: white;
    text-align: center;
}

.filterbottom td {
    background-color: white;
    padding: 0px 5px;
    font-weight: bold;
    text-align: center;
    font-size: 0.75rem;
    height: 1em;
}

.filterbottom input {
    padding: 0.25rem 0rem;
}

.filterbottom input[type=text] {
    border: none !important;
    outline: none !important;
}

.filterbottom input[type=text]:hover {
    background: #e1e1e1;
    border: 1px solid #d0d0d0;
}


/* ============================================================
   TABLEPRESS
   ============================================================ */

.tablepress {
    table-layout: auto;
}


/* ============================================================
   ROTATED ELEMENTS
   ============================================================ */

#rotated270 {
    transform: rotate(-90deg);
}

#rotated90 {
    transform: rotate(90deg);
}


/* ============================================================
   NOUI SLIDER
   ============================================================ */

.noUi-horizontal {
    height: 4px !important;
}

.noUi-handle {
    width: 10px !important;
    height: 10px !important;
    transform: translate(-12px, 2px) !important;
    background: #000 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.noUi-handle:active {
    width: 10px !important;
    height: 10px !important;
    background: #000000 !important;
    transform: translate(-12px, 3px) !important;
    border: 4px solid #000000 !important;
    border-radius: 50% !important;
}

.noUi-handle:before,
.noUi-handle:after {
    display: none !important;
}

.noUi-connect {
    background: #888 !important;
}


/* ============================================================
   MULTISELECT / DROPDOWN
   ============================================================ */

.multiselect-container {
    background: #fff !important;
}

.multiselect-group b {
    color: black;
    font-weight: 500;
}

.multiselect-all label {
    padding: 3px 10px 3px 5px !important;
    color: black;
    font-weight: 500 !important;
}

.dropdown-menu {
    white-space: nowrap;
}

select.sports {
    font-size: 12px;
}


/* ============================================================
   MISC LAYOUT
   ============================================================ */

.col-sm-12 {
    width: 70% !important;
    margin: auto;
}

.slider-labels {
    margin-top: 10px;
}

button:hover {
    background-color: #ffffff;
}


/* ============================================================
   CONTENT WIDTH CONSTRAINT  (mirrors WP Twenty Twenty-Four)
   ============================================================ */

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
#rankings > *,
#page > *,
.page-content > * {
    max-width: 87rem;
    width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   PAGE CONTENT  (prose pages like About)
   ============================================================ */

.page-content {
    max-width: 87rem;
    width: calc(100% - 2rem);
    margin: 0 auto;
    padding: var(--space-40) 0;
}

.page-content h1 {
    text-align: center;
    margin-bottom: var(--space-30);
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    background-color: var(--color-base);
    border-top: 1px solid var(--color-accent);
    margin-top: var(--space-50);
    padding: var(--space-40) var(--space-30);
}

.footer-inner {
    max-width: var(--wide-width);
    margin: 0 auto;
    display: flex;
    gap: var(--space-40);
    align-items: flex-start;
}

.footer-logo {
    flex: 0 0 auto;
}

.footer-logo img {
    display: block;
}

.footer-links {
    display: flex;
    flex: 1;
    gap: var(--space-30);
    justify-content: flex-end;
}

.footer-col h2 {
    font-size: var(--font-size-small);
    font-family: var(--font-body);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

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

.footer-col ul li {
    margin-bottom: 0.35rem;
}

.footer-col a {
    font-size: var(--font-size-small);
    text-decoration: none;
    color: var(--color-contrast-2);
}

.footer-col a:hover {
    color: var(--color-contrast);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .footer-inner {
        flex-direction: column;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}


.site-logo img {
    width: 367px;
    height: 99px;
    aspect-ratio: 367 / 99;
    display: block; /* Removes baseline spacing */
}

/* ============================================================
   RESPONSIVE — datepicker on small screens
   ============================================================ */

@media screen and (max-width: 600px) {
    table#datepicker td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}