/*******************************
* RESET
*******************************/
*,::after,::before{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#__next,#root{isolation:isolate}

/*******************************
* GLOBAL CUSTOM PROPERTIES
*******************************/
:root {
    scroll-behavior: smooth;

    --admin-bar-height: 46px;

    --color-plain-white: #fff;
    --color-plain-black: #000;
    --color-plain-contrast: red;

    --color-nav-link: var(--color-plain-contrast);

    --color-text-content: var(--color-plain-black);
    
    --transition-time-hover: 250ms;
    --transition-time-menu: 400ms;

    --container-width: 1200px;
    --page-margin: 20px;
    --container-intrinsic: max(var(--page-margin), 50cqw - var(--container-width) / 2);
    --container-full-bleed: min(-1 * var(--page-margin), var(--container-width) / 2 - 50cqw);
}
@media (min-width: 783px) {
    :root {
        --admin-bar-height: 32px;
    }
}

html:has(.header) {
    container-type: inline-size;
    max-width: 1920px;
    margin-inline: auto;
}

/*******************************
* BODY
*******************************/
body {
    font-family: Arial, Helvetica, sans-serif;
}
@media (min-width: 1921px) {
    body {
        overflow-x: hidden;
    }
}

/*
* 404 PAGE SPECIFIC STYLES
*/
body.page-404 {
    width: 100vw;
    height: 100dvh;
    display: grid;
    grid-template-areas:
        "content";
    grid-template-rows: 1fr;
}
body.page-404:has(#wpadminbar) {
    height: calc(100dvh - var(--admin-bar-height));
}

/*******************************
* HEADER
*******************************/
.header {
    position: sticky;
    inset: 0 0 auto auto;
    padding-block: 22.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-plain-white);
    box-shadow: rgb(from var(--color-plain-black) r g b / .4) 0 0 10px 0;
}
@media (min-width: 783px) {
    html:has(#wpadminbar) .header {
        top: var(--admin-bar-height);
    }
}

.header-toggler {
    --color-component-default: var(--color-plain-black);
    --color-component-bg: var(--color-plain-white);
    appearance: none;
    overflow: hidden;
    background-color: var(--color-component-bg);
    width: 40px;
    height: 40px;
    padding: 10px 6px;
    position: absolute;
    inset: 20px 20px auto auto;

    border: solid 2px var(--color-component-default);
    border-radius: 50%;
}
.header-toggler::before, .header-toggler::after {
    position: absolute;
    inset: 0;
    margin: auto;
    content: '';
    transition: var(--transition-time-menu);
}
.header-toggler::before {
    width: 25px;
    height: 18px;
    /* Hamburger icon lines */
    background: linear-gradient(
    to bottom, 
    var(--color-component-default) 0%, var(--color-component-default) 12.5%, 
    var(--color-component-bg) 12.5%, var(--color-component-bg) 42.5%, 
    var(--color-component-default) 42.5%, var(--color-component-default) 57.5%, 
    var(--color-component-bg) 57.5%, var(--color-component-bg) 87.5%, 
    var(--color-component-default) 87.5%, var(--color-component-default) 100%
  );
}
.header-toggler::after {
    width: 25px;
    height: 25px;
    opacity: 0;
    background: linear-gradient(
        to bottom,
        rgb(from var(--color-component-default) r g b / 0) 0%, rgb(from var(--color-component-default) r g b / 0) 46%, 
        var(--color-component-default) 46%, var(--color-component-default) 54%, 
        rgb(from var(--color-component-default) r g b / 0) 54%, rgb(from var(--color-component-default) r g b / 0) 100%
      ), linear-gradient(
        to right,
        rgb(from var(--color-component-default) r g b / 0) 0%, rgb(from var(--color-component-default) r g b / 0) 46%, 
        var(--color-component-default) 46%, var(--color-component-default) 54%, 
        rgb(from var(--color-component-default) r g b / 0) 54%, rgb(from var(--color-component-default) r g b / 0) 100%
      );
    transform: translateZ(0) rotate(0deg);
}
.header-toggler:checked:before {
    opacity: 0;
}
.header-toggler:checked::after {
    transform: translateZ(0) rotate(45deg);
    opacity: 1;
}

.header-nav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-time-menu);
}
.header-toggler:checked + .header-nav {
    grid-template-rows: 1fr;
}
.header-nav-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    list-style-type: none;
    padding: 0;
    text-align: center;
}
.header-nav-list-item:first-child {
    margin-block-start: 24px;
}
.header-nav-link {
    font-size: 20px;
    line-height: 1.2em;
    color: var(--color-plain-black);
    text-transform: uppercase;
    text-decoration: underline rgb(from var(--color-nav-link) r g b / 0);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--transition-time-hover), color var(--transition-time-hover);
}
.header-nav-link:hover {
    color: var(--color-nav-link);
    text-decoration-color: rgb(from var(--color-nav-link) r g b / 1);
}

@media (min-width: 1024px) {
    .header {
        padding-block: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-inline: var(--container-intrinsic);
    }
    .header-toggler {
        display: none;
    }
    .header-nav {
        display: flex;
    }
    .header-nav-list {
        flex-direction: row;        
    }
    .header-nav-list-item:first-child {
        margin-block-start: 0;
    }
}

/*******************************
* HERO UNIT
*******************************/
.hero-unit {
    height: 200px;
    margin-block-end: 40px;
    background-color: lightgray;
}

/*******************************
* MAIN CONTENT
*******************************/
main.main-container-404 {
    grid-area: content;
    align-self: center;
    justify-self: center;
}

main.main-container {
    margin-inline: var(--container-intrinsic);
}

/*******************************
* SECTIONS
*******************************/

main.main-container > section {
    scroll-margin-top: 180px;
}
@media (min-width: 1024px) {
    main.main-container > section {
        scroll-margin-top: 80px;
    }
}

main.main-container section {
    margin-block-end: 80px;
}
main.main-container section.full-bleed {
    margin-inline: var(--container-full-bleed);
}

/*******************************
* TEXT CONTENT
*******************************/
.section-title {
    color: var(--color-plain-black);
    text-transform: uppercase;
}

section.full-bleed .section-title {
    margin-inline: var(--container-intrinsic);
}

.section-content.text-content {
    font-size: 18px;
    line-height: 24px;
    color: var(--color-text-content);
}

.section-content.text-content p {
    margin-block: 24px;
}

.section-content.text-content p.doublemargin {
    margin-block-end: 48px;
}

.section-content.text-content p.centered {
    text-align: center;
}

.section-content.text-content p.biggertext {
    font-size: 1.25em;
}

.section-content.text-content p.padleft {
    padding-left: 2em;
}

.section-content.text-content a {
    font-weight: 700;
    color: var(--color-plain-contrast);
    text-decoration: underline rgb(from var(--color-plain-contrast) r g b / 0);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--transition-time-hover);
}
.section-content.text-content a:hover {
    text-decoration-color: rgb(from var(--color-plain-contrast) r g b / 1);
}

/*
 * NEVEZZ BLOCK OVERRIDES
 * SZAVAZOK BLOCK OVERRIDES
*/
#nevezz .section-content,
#szavazok .section-content {
    height: 330px;
    padding-block-start: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkgray;
}

/*******************************
* MEGYE VALASZTO COMPONENT
*******************************/
megye-valaszto {
    --container-width: 360px;
    --button-width: 36px;
    --color-component-default: var(--color-plain-black);
    --color-component-hover: var(--color-nav-link);
    --color-component-text: var(--color-plain-white);
    flex-direction: row;
    row-gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: max(var(--page-margin), 50cqw - var(--container-width) / 2);
    font-size: 16px;
}
@media (min-width: 400px) {
    megye-valaszto {
        min-width: 360px;
    }
}
megye-valaszto select {
    cursor: pointer;
    flex-basis: calc(100% - var(--button-width));
    line-height: 24px;
    padding: 5px 20px;
    border: solid 1px var(--color-component-default);
    color: var(--color-component-default);
    transition: border-color var(--transition-time-hover);
}
megye-valaszto select:focus-visible {
    outline: none;
    border-color: var(--color-component-hover);
}
megye-valaszto select.no-show-picker {
    padding-left: 5px;
}   
megye-valaszto button {
    cursor: pointer;
    width: var(--button-width);
    border: none;
    background:
        var(--color-component-default)
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE2IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMS4yNTczMiAxTDcuOTk5OTcgNy43NDI2NUwxNC43NDI2IDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4%3D')
        no-repeat
        50% 50%
        / 16px 9px;
    transition: background-color var(--transition-time-hover);
}
megye-valaszto a {
    padding: 12px 24px;
    background-color: var(--color-component-default);
    box-shadow: rgb(from var(--color-component-default) r g b / .4) 0 0 10px 0;
    border-radius: 3px;
    font-weight: 700;
    font-size: inherit;
    line-height: 20px;
    text-decoration: none;
    color: var(--color-component-text);
    text-transform: uppercase;

    transition-property: text-decoration-color, background-color;
    transition-duration: var(--transition-time-hover);
    text-decoration: underline rgb(from var(--color-component-text) r g b / 0);
    text-underline-offset: 2px;
}
@media (hover: hover) {
    megye-valaszto select:hover {
        border-color: var(--color-component-hover);
    }
    megye-valaszto button:hover, megye-valaszto select:hover ~ button, megye-valaszto select:focus-visible ~ button {
        background-color: var(--color-component-hover);
    }
    megye-valaszto a:hover {
        background-color: var(--color-component-hover);
        text-decoration-color: rgb(from var(--color-component-text) r g b / 1);
    }
}

/*******************************
* PARTNERS
*******************************/
.partners {
    --container-width: 880px;
    margin-inline: max(var(--page-margin), 50cqw - var(--container-width) / 2);   
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.partner {
    width: 134px;
    height: 91px;
}
.partner-link {
    display: block;
    width: 100%;
    height: 100%
}
.partner-image {
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    object-fit: scale-down;
}

/*******************************
* FOOTER
*******************************/
.footer {
    display: flex;
    background-color: darkgray;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
}
.footer-nav {
    margin: 30px auto;
    max-width: 21em;
}
.footer-nav-list {
    display: flex;
    gap: 8px 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    text-align: center;
}
.footer-nav-list-item:not(:nth-child(2)):not(:last-child):after {
    content: '|';
    margin-inline: .25em;
}
.footer-nav-link {
    color: var(--color-plain-black);
    text-decoration-thickness: 1px;
    transition: color var(--transition-time-hover);
}
.footer-nav-link:hover {
    color: var(--color-plain-contrast);
}

@media (min-width: 1281px) {
    .footer-nav {
        max-width: max-content;
    }
    .footer-nav-list-item:not(:last-child):after {
        content: '|';
        margin-inline: .25em;
    }
}