@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&display=swap');

/*******************************
* SITE SPECIFIC CUSTOM PROPERTIES
*******************************/
:root {
    --evparja-2026-hatterszin-alap: #F1E4C3;

    --evparja-2026-hatterszin-navigacio: #8F1627;

    --evparja-2026-hatterszin-hero: #DBB8BE;

    --evparja-2026-hatterszin-partnerek: #A71D30;

    --evparja-2026-hatterszin-megyevalaszto: #F8ECEE;

    --evparja-2026-hatterszin-megyevalaszto-link: var(--evparja-2026-hatterszin-navigacio);

    --evparja-2026-hatterszin-megyevalaszto-link-hover: var(--evparja-2026-hatterszin-partnerek);

    --evparja-2026-betuszin-alap: #392105;

    --evparja-2026-betuszin-link: #25543C;

    --evparja-2026-betuszin-link-hover: lab(from var(--evparja-2026-betuszin-link) calc(l + 20) a b);
    
    --evparja-2026-feher: #fff;

    --evparja-2026-betuszin-link-navigacio: var(--evparja-2026-hatterszin-alap);

    --evparja-2026-betuszin-link-navigacio-hover: var(--evparja-2026-feher);

    --color-text-content: var(--evparja-2026-betuszin-alap);

    --evparja-2026-border-image:
        linear-gradient(90deg, #855E23 0%, #FEDB77 30%, #FFFFFF 50%, #FEDB77 70%, #855E23 100%) 1;
}

/*******************************
* BODY
*******************************/
body {
    font-family: 'Poppins', serif;
    font-weight: 300;

    background-color: var(--evparja-2026-hatterszin-alap);
}

body.page-evparja-2026-teaser:has(#wpadminbar),
body.page-evparja-2026-promo-ended:has(#wpadminbar) {
    height: calc(100vh - var(--admin-bar-height));
    height: calc(100dvh - var(--admin-bar-height));
}

body.page-evparja-2026-promo-ended {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header"
        "hero"
        "content"
        "footer"
    ;
    min-block-size: 100vh;
    min-block-size: 100dvh;
}

/*******************************
* TEASER HERO IMAGE
*******************************/
.teaser-hero,
.promo-ended-hero {
    margin-block-start: 40px;
    object-fit: contain;
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 100%;
}
@media (min-width: 360px) {
    .teaser-hero,
    .promo-ended-hero {
        max-width: 326px;
    }
}
@media (min-width: 768px) {
    .teaser-hero,
    .promo-ended-hero {
        max-width: 384px;
    }
}
@media (min-width: 1024px) {
    .teaser-hero,
    .promo-ended-hero {
        max-width: 422px;
    }
}
@media (min-width: 1280px) {
    .teaser-hero,
    .promo-ended-hero {
        max-width: 456px;
    }
}
@media (min-width: 1400px) {
    .teaser-hero,
    .promo-ended-hero {
        max-width: 698px;
    }
}

/*******************************
* HEADER
*******************************/
.header {
    justify-content: space-between;
    background-color: var(--evparja-2026-hatterszin-navigacio);
    color: var(--evparja-2026-feher);
    align-items: initial;
    padding-block: 30px 20px;
    box-shadow: rgb(from var(--color-plain-black) r g b / .2) 0 0 5px 0;
    z-index: 1;
}
@media (min-width: 1024px) {
    .header {
        padding-block: 24.5px;
        align-items: center;
    }
}
@media (min-width: 1281px) {
    .header {
        padding-block: 20px;
    }
}

.header-title {
    font-size: 20px;
    line-height: 1em;
    margin-block-end: 10px;
    font-weight: 800;
    padding-inline-start: 20px;
}
@media (min-width: 1024px) {
    .header-title {
        padding-inline-start: unset;
        margin-block-end: 0;
    }
}

.header-title-link {
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-time-hover);
}
.header-title-link:hover {
    text-decoration: none;
    color: var(--evparja-2026-betuszin-link-navigacio-hover);
}

.header-nav-link {
    font-weight: 500;
    color: var(--evparja-2026-betuszin-link-navigacio);
    text-decoration: none;
}
.header-nav-link:hover {
    color: var(--evparja-2026-betuszin-link-navigacio-hover);
    text-decoration: none;
}

.header-toggler {
    --color-component-default: var(--evparja-2026-feher);
    --color-component-bg: var(--evparja-2026-hatterszin-navigacio);
}

/*******************************
* HERO UNIT
*******************************/
.hero-unit {
    border-image: var(--evparja-2026-border-image);
    border-image-width: 0 0 4px;
    height: 300px;
    background:
        image-set(url('../images/evParja-2026/hero-evparja-nyeremeny.webp') 1x, url('../images/evParja-2026/hero-evparja-nyeremeny-2x.webp') 2x)
            no-repeat
            top 90px left 12px
            / 168px auto,
        image-set(url('../images/evParja-2026/hero-evparja-cim-1sor.webp') 1x, url('../images/evParja-2026/hero-evparja-cim-1sor-2x.webp') 2x)
            no-repeat
            top 7px left 12px
            / min(calc(100dvw - 24px), 376px) auto,
        var(--evparja-2026-hatterszin-hero) url('../images/evParja-2026/hero-evparja-foto-kicsi.webp')
            no-repeat
            top -53px right -200px
            / 648px auto;
}
@media (min-width: 600px) {
    .hero-unit {
        height: 312px;
        background:
            image-set(url('../images/evParja-2026/hero-evparja-nyeremeny.webp') 1x, url('../images/evParja-2026/hero-evparja-nyeremeny-2x.webp') 2x)
                no-repeat
                top 180px left 20px
                / 200px auto,
            image-set(url('../images/evParja-2026/hero-evparja-cim-2sor.webp') 1x, url('../images/evParja-2026/hero-evparja-cim-2sor-2x.webp') 2x)
                no-repeat
                top 22px left 20px
                / 220px auto,
            var(--evparja-2026-hatterszin-hero) url('../images/evParja-2026/hero-evparja-foto-nagy.webp')
                no-repeat
                top -130px right -150px
                / auto 450px;
    }
}
@media (min-width: 650px) {
    .hero-unit {
        background-size:
            200px auto,
            220px auto,
            auto 496px;
        background-position:
            top 180px left var(--container-intrinsic),
            top 22px left var(--container-intrinsic),
            top -145px right -150px;
    }
}
@media (min-width: 1024px) {
    .hero-unit {
        height: 416px;
        background-size:
            250px auto,
            305px auto,
            1002px auto;
        background-position:
            bottom 39px left var(--container-intrinsic),
            top 33px left var(--container-intrinsic),
            top -192px right -200px
    }
}
@media (min-width: 1281px) {
    .hero-unit {
        height: 520px;
        background-size:
            330px auto,
            320px auto,
            1280px auto;
        background-position:
            bottom 66px left var(--container-intrinsic),
            top 56px left var(--container-intrinsic),
            top -254px right -200px
    }
}
@media (min-width: 1920px) {
    .hero-unit {
        height: 780px;
        background-size:
            504px auto,
            504px auto,
            1890px auto;
        background-position:
            bottom 79px left calc(var(--container-intrinsic) - 195px),
            top 86px left calc(var(--container-intrinsic) - 195px),
            top -370px right -200px
    }
}

/*******************************
* MAIN CONTENT
*******************************/
main.promo-ended {
    grid-area: content;
}

main.main-container section {
    margin-block-end: 40px;
}

/*******************************
* TEXT CONTENT
*******************************/
.section-title {
    font-family: 'Playfair Display', sans-serif;
    font-weight: 800;
    color: var(--evparja-2026-hatterszin-navigacio);
    position: relative;
    margin-block-end: 40px;
    font-size: 32px;
}

.section-content.text-content p {
    margin-block: .65em;
}
.section-content.text-content p.doublemargin {
    margin-block-end: 1.35em;
}

.section-content.text-content strong {
    font-weight: 700;
}

.section-content.text-content h3,
.section-content.text-content h4 {
    line-height: 1.25;
    margin-block: 1.5em;
    font-weight: 500;
}
.section-content.text-content h3 {
    font-size: 1.3em;
}
.section-content.text-content h4 {
    font-size: 1.1em;
}

.section-content.text-content a {
    color: var(--evparja-2026-betuszin-link);
    font-weight: inherit;
    text-decoration: underline;
}
.section-content.text-content a:hover {
    color: var(--evparja-2026-betuszin-link-hover);
    text-decoration-color: var(--evparja-2026-betuszin-link-hover);
}

.section-content.text-content ul,
.section-content.text-content ol {
    padding: 0;
}

.section-content.text-content ul {
    list-style-type: '•';
}

.section-content.text-content ol li,
.section-content.text-content ul li {
    margin-block-end: .5em;
}

.section-content.text-content ol li {
    margin-inline-start: 3em;
    padding-inline-start: 1em;
}

.section-content.text-content ul li {
    margin-inline-start: 2.5em;
    padding-inline-start: 1.5em;
}

.section-content.text-content ul.nonbullet {
    list-style-type: none;
    text-indent: -1.5em;
}
.section-content.text-content ul.nonbullet li {
    margin-inline-start: 0;
    text-indent: 0;
    padding-inline-start: 0;
}

.section-content.text-content dl {
    display: inline-grid;
    gap: .5em 5em;
}
.section-content.text-content dd {
    align-self: start;
    grid-column: 1;
}
.section-content.text-content dt {
    align-self: end;
    grid-column: 2;
    white-space: pre;
}
@media (max-width: 767px) {
    .section-content.text-content dl {
        column-gap: 2em;
    }
}

/*
* SECTION TITLE IMAGE REPLACEMENT RULES
*/
.section-title-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.section-title-image {
    height: auto;
}

#nevezz,
#szavazz {
    margin-block: 60px 0;
    position: relative;
    padding-block: 40px;
    background-color: var(--evparja-2026-hatterszin-megyevalaszto);
    border-image: var(--evparja-2026-border-image);
    border-image-width: 4px 0 0;
}

/*
 * NEVEZZ BLOCK OVERRIDES
 * SZAVAZOK BLOCK OVERRIDES
*/
#nevezz .section-content,
#szavazz .section-content {
    height: 330px;
    padding-block-start: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        image-set(url('../images/evParja-2026/megye-valaszto-bg.webp') 1x, url('../images/evParja-2026/megye-valaszto-bg-2x.webp') 2x)
            no-repeat
            50% 50%
            / auto 309px;
}

megye-valaszto {
    --color-component-default: var(--evparja-2026-hatterszin-megyevalaszto-link);
    --color-component-hover: var(--evparja-2026-hatterszin-megyevalaszto-link-hover);
    isolation: isolate;
}

megye-valaszto select {
    max-width: calc(100% - var(--button-width));
    color: var(--evparja-2026-betuszin-alap);
    font-weight: 600;
}
megye-valaszto a {
    min-width: 160px;
    text-align: center;
    position: relative;
    background: 50% / cover url('../images/evParja-2026/megye-valaszto-button-bg.webp');
    border-radius: 8px;
    color: var(--evparja-2026-betuszin-alap);
    text-decoration: none;
}
megye-valaszto a::before {
    content: '';
    background-image: linear-gradient(50.33deg, #70410A 27.5%, #D9B262 52.46%, #FCE29D 77.43%);
    border-radius: 8px;
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    left: -2px;
    top: -2px;
    position: absolute;
    z-index: -1;
}
megye-valaszto a:hover {
    color: lab(from var(--evparja-2026-betuszin-alap) calc(l + 20) a b);
}
megye-valaszto a:hover::before {
    background-image: linear-gradient(50.33deg, lab(from #70410A calc(l + 20) a b) 27.5%, lab(from #D9B262 calc(l + 20) a b) 52.46%, lab(from #FCE29D calc(l + 20) a b) 77.43%);
}

#partnerek {
    background-color: var(--evparja-2026-hatterszin-partnerek);
    margin-block-end: 0;
}

/*
 * PARTNEREK BLOCK OVERRIDES
*/
#partnerek .section-content {
    margin-inline: max(5px, 50cqw - var(--container-width) / 2);
    padding-block: 20px;
    row-gap: 20px;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.partner {
    width: auto;
    height: auto;
    flex: 0 0 max(91px, calc(100% / 11));
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 1025px) {
    .partner[href*='mindmegette.hu'],
    .partner[href*='borsonline.hu']
    {
        order: 1;
    }
}
.partner img {
}

/*
 * PROMO ENDED BLOCK OVERRIDES
*/
#promo-ended-content {
    margin-block: .5em 4em;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #4C5051;
}
@media (min-width: 720px) {
    #promo-ended-content {
        font-size: 32px;
    }
}

/*******************************
* FOOTER
*******************************/
.footer {
    background-color: var(--evparja-2026-hatterszin-navigacio);
    color: var(--evparja-2026-betuszin-link-navigacio);
    font-weight: 300;
}
body.page-evparja-2026-teaser footer,
body.page-evparja-2026-promo-ended footer {
    grid-area: footer;
}
.footer-nav {
    max-width: unset;
}
.footer-nav-list {
    flex-direction: column;
}
.footer-nav-link {
    color: inherit;
    text-underline-offset: 3px;
}
.footer-nav-link:hover {
    color: var(--evparja-2026-betuszin-link-navigacio-hover);
}
@media (max-width: 767px) {
    .footer-nav-list-item:after {
        display: none;
    }
}
@media (min-width: 768px) {
    .footer-nav-list {
        padding-inline: var(--container-intrinsic);
        display: block;
        text-wrap: balance;
        line-height: 1.6em;
    }
    .footer-nav-list-item {
        display: inline-block;
    }
    .footer-nav-list .footer-nav-list-item:not(:last-child):after {
        display: inline;
        content: ' |';
        margin-inline: .25em;
    }
}