/* EPVotes — Astra header tweaks (keep Astra Header Builder). */

:root {
    --epvotes-eu-blue: #003399;
    --epvotes-eu-yellow: #ffcc00;
}



/* Homepage canvas background */
body.home {
    background: var(--epvotes-eu-blue) !important;
}

body.home #page,
body.home #content,
body.home .site-content,
body.home .ast-container,
body.home .content-area,
body.home .site-content > .ast-container {
    background: transparent !important;
}

/* Select block: compact controls + align search + count */
#select-block.select-block .controls {
    padding: 12px 12px !important;
}

#select-block.select-block .filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

#select-block.select-block .filter-dropdown {
    margin: 0 !important;
}

#select-block.select-block .filter-button {
    padding: 6px 10px !important;
}

/* Override inline style on #vote-search so it can sit next to the count */
#select-block.select-block #vote-search.epvotes-vote-search {
    min-width: 190px !important;
    width: 220px !important;
    margin-left: 0 !important;
    padding: 6px 10px !important;
}

#select-block.select-block #vote-count.epvotes-vote-count-inline {
    white-space: nowrap !important;
    margin-left: 8px !important;
}

/* Hide the original vote-count (we mirror it next to the search field) */
#select-block.select-block #vote-count.epvotes-vote-count-hidden {
    display: none !important;
}

/* Reduce vertical spacing in the selection row */
#select-block.select-block .vote-selection {
    gap: 8px !important;
    margin-top: 10px !important;
}

#select-block.select-block .vote-selection-group label {
    margin-bottom: 4px !important;
}

/* Header: force Astra header palette to EU blue/yellow */
#masthead .ast-primary-header-bar,
#masthead .ast-main-header-wrap,
#masthead .main-header-bar-wrap,
#masthead .main-header-bar,
#masthead #ast-desktop-header,
#masthead #ast-mobile-header,
#masthead .ast-mobile-header-wrap,
#masthead .ast-mobile-header-content {
    background: var(--epvotes-eu-blue) !important;
}

#masthead .site-title a,
#masthead .main-header-menu a,
#masthead .menu-toggle,
#masthead .menu-toggle * {
    color: var(--epvotes-eu-yellow) !important;
}

#masthead .main-header-menu a:hover,
#masthead .main-header-menu a:focus,
#masthead .main-header-menu .current-menu-item > a,
#masthead .main-header-menu .current-menu-ancestor > a {
    color: var(--epvotes-eu-yellow) !important;
    background: transparent !important;
}

/* Desktop (>=1025px): keep the big centered header text */
@media (min-width: 1025px) {
    #masthead .ast-primary-header-bar {
        min-height: 110px;
    }

    #masthead .ast-primary-header-bar .site-primary-header-wrap {
        position: relative;
        min-height: 110px;
    }

    .ast-desktop #masthead .ast-primary-header-bar .main-header-menu > .menu-item {
        line-height: 110px;
    }

    #masthead .epvotes-header-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 45vw;
        padding: 0 12px;
        text-align: center;
        pointer-events: none;
        white-space: normal;
    }

    #masthead .epvotes-header-title {
        font-weight: 700;
        font-size: 44px;
        line-height: 1.05;
        color: var(--epvotes-eu-yellow);
    }

    #masthead .epvotes-header-subtitle {
        margin-top: 6px;
        font-weight: 500;
        font-size: 18px;
        line-height: 1.2;
        color: var(--epvotes-eu-yellow);
        opacity: 0.85;
    }
}

/* Large tablets (e.g. iPad Pro landscape can be >1024px wide): keep it smaller than desktop */
@media (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    #masthead .ast-primary-header-bar {
        min-height: 92px;
    }

    #masthead .ast-primary-header-bar .site-primary-header-wrap {
        min-height: 92px;
    }

    .ast-desktop #masthead .ast-primary-header-bar .main-header-menu > .menu-item {
        line-height: 92px;
    }

    #masthead .epvotes-header-center {
        max-width: 62vw;
    }

    #masthead .epvotes-header-title {
        font-size: 30px;
        line-height: 1.1;
    }

    #masthead .epvotes-header-subtitle {
        font-size: 14px;
        line-height: 1.2;
    }
}

/* Tablet (768–1024px, incl. iPad landscape): show, but smaller */
@media (min-width: 768px) and (max-width: 1024px) {
    #masthead .ast-primary-header-bar {
        min-height: 92px;
    }

    #masthead .ast-primary-header-bar .site-primary-header-wrap {
        position: relative;
        min-height: 92px;
    }

    .ast-desktop #masthead .ast-primary-header-bar .main-header-menu > .menu-item {
        line-height: 92px;
    }

    #masthead .epvotes-header-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 58vw;
        padding: 0 10px;
        text-align: center;
        pointer-events: none;
        white-space: normal;
    }

    #masthead .epvotes-header-title {
        font-weight: 700;
        font-size: 32px;
        line-height: 1.1;
        color: var(--epvotes-eu-yellow);
    }

    #masthead .epvotes-header-subtitle {
        margin-top: 4px;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.2;
        color: var(--epvotes-eu-yellow);
        opacity: 0.85;
    }
}

/* Mobile portrait: hide the centered title/subtitle to avoid crowding */
@media (max-width: 767px) and (orientation: portrait) {
    #masthead .epvotes-header-center {
        display: none;
    }
}

/* Mobile landscape: show header text between logo and menu */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
    #masthead .epvotes-header-center {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 1 !important;
        padding: 0 6px !important;
        text-align: center !important;
    }

    #masthead .epvotes-header-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin: 0 0 2px 0 !important;
    }

    #masthead .epvotes-header-subtitle {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
}
}

/* Page block tweak: make the Description block border thinner */
#Description-block {
    border-width: 1px !important;
}

/* Some Astra/UAGB layouts apply the border on the inner grid wrapper */
#Description-block > .wp-block-uagb-container.uagb-layout-grid {
    border-width: 1px !important;
}

/* Also thin borders for the other anchored blocks */
.description-block,
.select-block,
.votes-block {
    border-width: 1px !important;
}

/* Votes block: EU-blue background */
.votes-block {
    background: var(--epvotes-eu-blue) !important;
    border-radius: 2mm !important;
    overflow: hidden;
}

/* Info page (id=31): typography + tables */
/* Info (31) + Legal (219): EU-blue background, white text, yellow headings */
body.page-id-31,
body.page-id-219 {
    background: var(--epvotes-eu-blue) !important;
}

body.page-id-31 #page,
body.page-id-31 #content,
body.page-id-31 .site-content,
body.page-id-31 .ast-container,
body.page-id-31 .content-area,
body.page-id-31 .site-content > .ast-container,
body.page-id-31 article,
body.page-id-31 .entry-content,
body.page-id-219 #page,
body.page-id-219 #content,
body.page-id-219 .site-content,
body.page-id-219 .ast-container,
body.page-id-219 .content-area,
body.page-id-219 .site-content > .ast-container,
body.page-id-219 article,
body.page-id-219 .entry-content {
    background: transparent !important;
}

body.page-id-31 .entry-content,
body.page-id-219 .entry-content {
    color: #ffffff;
}

body.page-id-31 .entry-content a,
body.page-id-219 .entry-content a {
    color: var(--epvotes-eu-yellow);
    text-decoration: underline;
}

body.page-id-31 .entry-content h1,
body.page-id-31 .entry-content h2,
body.page-id-31 .entry-content h3,
body.page-id-31 .entry-content h4,
body.page-id-31 .entry-content h5,
body.page-id-31 .entry-content h6,
body.page-id-219 .entry-content h1,
body.page-id-219 .entry-content h2,
body.page-id-219 .entry-content h3,
body.page-id-219 .entry-content h4,
body.page-id-219 .entry-content h5,
body.page-id-219 .entry-content h6 {
    color: var(--epvotes-eu-yellow) !important;
}

body.page-id-31 .entry-content h1,
body.page-id-219 .entry-content h1 {
    font-size: 36px;
    line-height: 1.15;
}

body.page-id-31 .entry-content h2,
body.page-id-219 .entry-content h2 {
    font-size: 30px;
    line-height: 1.2;
}

body.page-id-31 .entry-content h3,
body.page-id-219 .entry-content h3 {
    font-size: 24px;
    line-height: 1.25;
}

/* Info page uses custom <p id="...header"> blocks instead of headings */
body.page-id-31 #whyheader,
body.page-id-31 #howheader,
body.page-id-31 #howvoteheader {
    color: var(--epvotes-eu-yellow) !important;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 0.6em;
}

body.page-id-31 .entry-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

body.page-id-31 .entry-content h1,
body.page-id-31 .entry-content h2,
body.page-id-31 .entry-content h3 {
    scroll-margin-top: 120px;
}

body.page-id-31 .entry-content h2 {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

body.page-id-31 .entry-content h3 {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

body.page-id-31 .entry-content p {
    margin-bottom: 0.9em;
}

body.page-id-31 .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.95em;
}

body.page-id-31 .entry-content th,
body.page-id-31 .entry-content td {
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 10px 12px;
    vertical-align: top;
    color: #ffffff;
}

body.page-id-31 .entry-content thead th {
    background: transparent;
    color: var(--epvotes-eu-yellow);
}

body.page-id-31 .entry-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.06);
}

/* Legal page (id=219): match Info page layout + table styling */
body.page-id-219 .entry-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

body.page-id-219 .entry-content p {
    margin-bottom: 0.9em;
}

body.page-id-219 .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.95em;
}

body.page-id-219 .entry-content th,
body.page-id-219 .entry-content td {
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 10px 12px;
    vertical-align: top;
    color: #ffffff;
}

body.page-id-219 .entry-content thead th {
    background: transparent;
    color: var(--epvotes-eu-yellow);
}

body.page-id-219 .entry-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.06);
}

/* Let the EU-blue background show through inside the visualiser */
.votes-block #voting-logoscherm-container .main-content-bg {
    background: transparent !important;
}

/* The visualiser uses a light-blue gradient behind the voting "tiles" */
.votes-block #voting-logoscherm-container .voting-table {
    background: var(--epvotes-eu-blue) !important;
    background-image: none !important;
}

/* Vote title + meta lines in EU-yellow */
.votes-block #voting-logoscherm-container .page-header h1,
.votes-block #voting-logoscherm-container .page-header p,
.votes-block #voting-logoscherm-container .page-header .intro-text {
    color: var(--epvotes-eu-yellow) !important;
}

/* Actual voting title/meta are rendered in the info box */
.votes-block #voting-logoscherm-container .voting-info,
.votes-block #voting-logoscherm-container .voting-info * {
    color: var(--epvotes-eu-yellow) !important;
}

/* Let the EU-blue block show through behind the info box */
.votes-block #voting-logoscherm-container .content-wrapper .voting-info {
    background: transparent !important;
    box-shadow: none !important;
}

/* Legend text in EU-yellow (keep colored boxes as-is) */
.votes-block #voting-logoscherm-container .legend-floating,
.votes-block #voting-logoscherm-container .legend-inline,
.votes-block #voting-logoscherm-container .legend-items,
.votes-block #voting-logoscherm-container .legend-item,
.votes-block #voting-logoscherm-container .legend-item-inline {
    color: var(--epvotes-eu-yellow) !important;
}

.votes-block #voting-logoscherm-container .legend-floating {
    background: transparent !important;
    box-shadow: none !important;
}

/* If the border is applied to an inner UAGB grid wrapper */
.description-block > .wp-block-uagb-container.uagb-layout-grid,
.select-block > .wp-block-uagb-container.uagb-layout-grid,
.votes-block > .wp-block-uagb-container.uagb-layout-grid {
    border-width: 1px !important;
}

/* Remove the light-blue background in the relocated description box */
.description-block #voting-description-sidebar .voting-info-description {
    background: transparent !important;
    background-image: none !important;
}

/* Description sidebar text should be white */
/* Plugin CSS loads after our CSS and forces black with !important,
   so we use higher-specificity selectors to win the cascade. */
.description-block #voting-description-sidebar#voting-description-sidebar,
.description-block #voting-description-sidebar#voting-description-sidebar * {
    color: #ffffff !important;
}

.description-block #voting-description-sidebar#voting-description-sidebar .voting-info-description,
.description-block #voting-description-sidebar#voting-description-sidebar .voting-info-description * {
    color: #ffffff !important;
}

/* If the description contains code/preformatted markup, remove their background too */
.description-block #voting-description-sidebar code,
.description-block #voting-description-sidebar pre {
    background: transparent !important;
    background-color: transparent !important;
}

/* Select block: compact EU-blue + white UI */
.select-block #controls-area1,
.select-block #controls-area1 .controls {
    background: var(--epvotes-eu-blue) !important;
    color: #ffffff !important;
}

.select-block #controls-area1 .controls {
    padding: 10px 12px !important;
}

.select-block .voting-visualizer-container .controls .filter-bar,
.select-block .voting-visualizer-container .controls .vote-selection {
    background: var(--epvotes-eu-blue) !important;
    color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .filter-bar {
    padding: 8px 10px !important;
    gap: 10px !important;
}

.select-block .voting-visualizer-container .controls .filter-bar .filter-button {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}

.select-block .voting-visualizer-container .controls .filter-bar .filter-menu {
    background: var(--epvotes-eu-blue) !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* Some plugin CSS sets white backgrounds on inner dropdown parts; force EU-blue throughout */
.select-block .voting-visualizer-container .controls .filter-bar #filters-menu,
.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-header,
.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-header span,
.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-actions,
.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-items,
.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-search,
.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-section {
    background: var(--epvotes-eu-blue) !important;
    background-color: var(--epvotes-eu-blue) !important;
    color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .filter-bar #filters-menu {
    border-color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-header {
    border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}

.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-search {
    border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}

.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-item {
    background: transparent !important;
    background-color: transparent !important;
}

.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-search input {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .filter-bar #filters-menu .filter-menu-search input::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}

.select-block .voting-visualizer-container .controls .filter-bar .filter-menu a {
    color: var(--epvotes-eu-yellow) !important;
}

.select-block .voting-visualizer-container .controls .filter-bar .filter-menu label {
    color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .filter-bar .filter-menu .filter-menu-search input {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .filter-bar .filter-menu .filter-menu-search input::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}

.select-block .voting-visualizer-container .controls .filter-bar .filter-menu .filter-menu-section + .filter-menu-section {
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

.select-block .voting-visualizer-container .controls #vote-search {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    width: 22ch !important;
    max-width: 22ch !important;
    flex: 0 0 auto !important;
}

.select-block .voting-visualizer-container .controls #vote-search::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}

.select-block .voting-visualizer-container .controls .vote-selection label {
    color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .vote-selection select {
    background: var(--epvotes-eu-blue) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.select-block .voting-visualizer-container .controls .vote-selection select option {
    background: var(--epvotes-eu-blue) !important;
    color: #ffffff !important;
}

/* Footer: keep compact legal/footer text flowing on one line.
   Some Astra/footer widget rules can make spans behave like block elements. */
#colophon .footer-widget-area[data-section="section-fb-html-1"],
#colophon .footer-widget-area[data-section="section-fb-html-1"] .ast-builder-html-element {
    /* Astra sometimes injects a huge font-size here (we've seen 107px),
       which makes the footer extremely tall with lots of empty space.
       Force a sane baseline size; inner HTML already sets 11px inline. */
    font-size: 11px !important;
    line-height: 1.25 !important;
}

#colophon .epvotes-compact-footer {
    display: block;
    text-align: center;
    text-wrap: pretty;
}

#colophon .epvotes-compact-footer span {
    display: inline !important;
}

/* Astra/WordPress may inject <br> and/or wrap fragments in <p>; suppress inside compact footer. */
#colophon .epvotes-compact-footer br {
    display: none;
}

#colophon .epvotes-compact-footer p {
    display: inline;
    margin: 0;
}

/* Fallback for footer HTML widgets if a class is not added in the HTML. */
#colophon .ast-small-footer .ast-footer-html-1 span,
#colophon .ast-small-footer .ast-footer-html-2 span,
#colophon .ast-small-footer .ast-footer-html-3 span {
    display: inline !important;
}

/* Astra Below Footer row (your screenshot shows .site-below-footer-wrap + ast-footer-row-stack). */
#colophon .site-below-footer-wrap .ast-builder-html-element span,
#colophon .site-below-footer-wrap .ast-footer-html-1 span,
#colophon .site-below-footer-wrap .ast-footer-html-2 span,
#colophon .site-below-footer-wrap .ast-footer-html-3 span {
    display: inline !important;
}

/* Astra footer: compact footer block (works in Primary Footer and Below Footer). */
#colophon .site-primary-footer-wrap .epvotes-compact-footer,
#colophon .site-below-footer-wrap .epvotes-compact-footer {
    display: block;
    text-align: center;
    text-wrap: pretty;
}

#colophon .site-primary-footer-wrap .epvotes-compact-footer .epvotes-foot-line1,
#colophon .site-primary-footer-wrap .epvotes-compact-footer .epvotes-foot-line2,
#colophon .site-primary-footer-wrap .epvotes-compact-footer .epvotes-foot-line3,
#colophon .site-below-footer-wrap .epvotes-compact-footer .epvotes-foot-line1,
#colophon .site-below-footer-wrap .epvotes-compact-footer .epvotes-foot-line2,
#colophon .site-below-footer-wrap .epvotes-compact-footer .epvotes-foot-line3 {
    display: block;
}

@media (min-width: 922px) {
    /* Keep the contact row on one line when there is room. */
    #colophon .site-primary-footer-wrap .epvotes-compact-footer .epvotes-foot-line3,
    #colophon .site-below-footer-wrap .epvotes-compact-footer .epvotes-foot-line3 {
        white-space: nowrap;
    }
}

/* Astra/WordPress may inject <br> for line breaks in the editor; suppress them inside the compact footer. */
#colophon .site-primary-footer-wrap .epvotes-compact-footer br,
#colophon .site-below-footer-wrap .epvotes-compact-footer br {
    display: none;
}

/* Astra/WordPress sometimes wraps Custom HTML output in <p>; avoid each <p> forcing a new line. */
#colophon .site-primary-footer-wrap .epvotes-compact-footer p,
#colophon .site-below-footer-wrap .epvotes-compact-footer p {
    display: inline;
    margin: 0;
}

/* Ensure spans inside Primary Footer HTML widgets stay inline. */
#colophon .site-primary-footer-wrap .ast-builder-html-element span,
#colophon .site-primary-footer-wrap .ast-footer-html-1 span,
#colophon .site-primary-footer-wrap .ast-footer-html-2 span,
#colophon .site-primary-footer-wrap .ast-footer-html-3 span {
    display: inline !important;
}

/* Logoscherm placeholder:
   Op sommige pagina's ontstaat er een grote lege ruimte boven de footer zodra
   `#voting-logoscherm-container` aanwezig is, ook als er nog geen content in staat.
   De plugin verplaatst later `.voting-container` naar deze container.
   Zolang die child er niet is: container volledig verbergen. */
#voting-logoscherm-container:empty {
    display: none !important;
}

@supports selector(:has(*)) {
    /* Only show when actual voting output is rendered (or an error). */
    #voting-logoscherm-container:not(:has(.voting-table)):not(:has(.error)) {
        display: none !important;
    }
}




/* epvotes: fix mobile vh whitespace (Astra #page min-height 100vh on mobile) */
@media (max-width: 921px) {
    @supports (height: 100dvh) {
        #page { min-height: 100dvh; }
    }
    @supports not (height: 100dvh) {
        @supports (height: 100svh) {
            #page { min-height: 100svh; }
        }
    }
}

/* epvotes: sticky footer (mobile) */
@media (max-width: 921px) {
    /* Astra sets #page to display:flex; if the main content doesn't flex, you'll see empty space after the footer on short pages. */
    #page > .site-content { flex: 1 0 auto; }
}

/* epvotes: mobile footer gap fix */
@media (max-width: 921px) {
    html, body { height: 100%; }

    /* Prefer modern viewport units when supported */
    @supports (height: 100dvh) {
        body { min-height: 100dvh; }
        #page { min-height: 100dvh !important; }
    }
    @supports not (height: 100dvh) {
        @supports (height: 100svh) {
            body { min-height: 100svh; }
            #page { min-height: 100svh !important; }
        }
    }

    /* Make footer stick to bottom when viewport > content */
    #page { display: flex; flex-direction: column; }
    #page > .site-content { flex: 1 0 auto; }
    #colophon { margin-top: auto; }
}

/* epvotes: mobile footer gap fix v2 (works even when viewport width is "desktop") */
@media (hover: none) and (pointer: coarse) {
    html, body { height: 100%; }
    body { min-height: 100vh; }

    @supports (height: 100dvh) {
        body { min-height: 100dvh; }
        #page { min-height: 100dvh !important; }
    }
    @supports not (height: 100dvh) {
        @supports (height: 100svh) {
            body { min-height: 100svh; }
            #page { min-height: 100svh !important; }
        }
    }

    #page { display: flex; flex-direction: column; }
    #page > .site-content { flex: 1 0 auto; }
    #colophon { margin-top: auto; }
}

/* epvotes: footer gap fix (global) */
html, body { height: 100%; }

/* Ensure footer sits at bottom when viewport > content */
#page { display: flex; flex-direction: column; }
#page > .site-content { flex: 1 0 auto; }
#colophon { margin-top: auto; }

/* Prefer modern viewport units when supported */
@supports (height: 100dvh) {
    body { min-height: 100dvh; }
    #page { min-height: 100dvh !important; }
}
@supports not (height: 100dvh) {
    @supports (height: 100svh) {
        body { min-height: 100svh; }
        #page { min-height: 100svh !important; }
    }
}

/* Mobile portrait: wider site-title container to prevent wrapping */
@media (max-width: 767px) and (orientation: portrait) {
    .site-branding,
    .ast-site-identity,
    .site-title-wrap {
        max-width: none !important;
        min-width: 100px !important;
        flex: 0 1 auto !important;
    }
    
    .site-title {
        white-space: nowrap !important;
    }
}

/* Mobile landscape: compact header height */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
    #masthead .ast-primary-header-bar,
    #masthead .ast-primary-header-bar .site-primary-header-wrap {
        min-height: 50px !important;
        height: 50px !important;
    }
    
    #masthead .ast-mobile-header-wrap {
        min-height: 50px !important;
    }
    

    /* Vertically center all header items including html-1 */
    #masthead .site-branding,
    #masthead .ast-site-identity,
    #masthead .ast-mobile-menu-trigger-minimal {
        display: flex !important;
        align-items: center !important;
        height: 50px !important;
    }


    /* Center html-1 element container */
    #masthead .ast-builder-layout-element,
    #masthead [data-section=" section-hb-html-1],
 #masthead .ast-header-html-1,
 #masthead .site-header-primary-section-center {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 height: 50px !important;
 margin: 0 !important;
 }

 #masthead .epvotes-header-center {
 display: flex !important;
 flex-direction: column !important;
 justify-content: center !important;
 align-items: center !important;

/* Tablet/Laptop: Optimize select field widths (768px - 1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Force controls to use full width */
    .controls-row {
        width: 98% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        gap: 10px !important;
    }
    
    .vote-selection {
        display: flex !important;
        gap: 10px !important;
        flex: 1 !important;
    }
    
    /* Target by nth-child since :has() may not work */
    /* Country select (first group) */
    .vote-selection .vote-selection-group:nth-child(1) {
        flex: 0 0 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
    
    /* Vote select (second group) - takes remaining space */
    .vote-selection .vote-selection-group:nth-child(2) {
        flex: 1 1 auto !important;
        min-width: 300px !important;
    }
    
    /* Showing vote-count */
    .vote-count {
        flex: 0 0 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
    
    /* Filter button */
    .filter-bar {
        flex: 0 0 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
}