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

/*******************************
* SITE SPECIFIC CUSTOM PROPERTIES
*******************************/
:root {
    --kedvencverseny-2026-hatterszin-alap: #FBE9C2;

    --kedvencverseny-2026-hatterszin-navigacio: #038C94;

    --kedvencverseny-2026-hatterszin-megyevalaszto: #55BFC5;

    --kedvencverseny-2026-hatterszin-megyevalaszto-link: #FFC74C;

    --kedvencverseny-2026-hatterszin-megyevalaszto-link-hover: #FFD578;

    --kedvencverseny-2026-hatterszin-partnerek: #079EA6;

    --kedvencverseny-2026-betuszin-alap: #1C2627;

    --kedvencverseny-2026-betuszin-link: #038C94;

    --kedvencverseny-2026-betuszin-link-hover: #55BFC5;

    --kedvencverseny-2026-betuszin-link-navigacio-hover: #FFC74C;
    
    --kedvencverseny-2026-feher: #fff;

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

    --kedvencverseny-2026-border-image-yellow: url('../images/kedvencverseny-2026/border-image-yellow.webp') 0 0 31 / 0 0 16px / 16px repeat;
    --kedvencverseny-2026-border-image-blue: url('../images/kedvencverseny-2026/border-image-blue.webp') 26 0 0 / 13px 0 0 / 13px repeat;
}

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

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

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

body.page-kedvencverseny-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(--kedvencverseny-2026-hatterszin-navigacio);
    color: var(--kedvencverseny-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(--kedvencverseny-2026-betuszin-link-navigacio-hover);
}

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

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

/*******************************
* HERO UNIT
*******************************/
.hero-unit {
    border-image: var(--kedvencverseny-2026-border-image-yellow);
    height: 312px;
    background:
        url('../images/kedvencverseny-2026/hero-kedvencverseny-papagaj.webp')
            no-repeat
            top 95px left calc(50% + 140px)
            / 84px auto,
        url('../images/kedvencverseny-2026/hero-kedvencverseny-felirat.webp')
            no-repeat
            top 12px center
            / 290px auto,
        url('../images/kedvencverseny-2026/hero-kedvencverseny-allatok.webp')
            no-repeat
            bottom center
            / auto 90%,
        url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-bal.webp')
            no-repeat
            top left
            / auto 50%,
        url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-jobb.webp')
            no-repeat
            top right
            / auto 50%,
        var(--kedvencverseny-2026-feher) url('../images/kedvencverseny-2026/hero-kedvencverseny-hatter.webp')
            no-repeat
            center
            / auto 100%;
}
@media (min-width: 515px) {
    .hero-unit {
        background:
            url('../images/kedvencverseny-2026/hero-kedvencverseny-papagaj.webp')
                no-repeat
                top 77px left calc(50% + 150px)
                / 84px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-felirat.webp')
                no-repeat
                top 12px center
                / 290px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-allatok.webp')
                no-repeat
                bottom center
                / auto 100%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-bal.webp')
                no-repeat
                top left
                / auto 50%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-jobb.webp')
                no-repeat
                top right
                / auto 50%,
            var(--kedvencverseny-2026-feher) url('../images/kedvencverseny-2026/hero-kedvencverseny-hatter.webp')
                no-repeat
                center
                / auto 100%;
    }
}
@media (min-width: 768px) {
    .hero-unit {
        height: 416px;
        margin-block-end: 60px;
        background:
            url('../images/kedvencverseny-2026/hero-kedvencverseny-papagaj.webp')
                no-repeat
                top 67px left calc(50% + 220px)
                / 118px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-felirat-768.webp')
                no-repeat
                top 15px center
                / 634px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-allatok-768.webp')
                no-repeat
                bottom center
                / auto 100%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-bal.webp')
                no-repeat
                top left
                / auto 50%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-jobb.webp')
                no-repeat
                top right
                / auto 50%,
            var(--kedvencverseny-2026-feher) url('../images/kedvencverseny-2026/hero-kedvencverseny-hatter.webp')
                no-repeat
                center
                / cover;
    }
}
@media (min-width: 1281px) {
    .hero-unit {
        height: 520px;
        background:
            url('../images/kedvencverseny-2026/hero-kedvencverseny-papagaj.webp')
                no-repeat
                top 100px left calc(50% + 280px)
                / 154px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-felirat-768.webp')
                no-repeat
                top 22px center
                / 860px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-allatok-768.webp')
                no-repeat
                bottom center
                / auto 100%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-bal.webp')
                no-repeat
                top left
                / auto 50%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-jobb.webp')
                no-repeat
                top right
                / auto 50%,
            var(--kedvencverseny-2026-feher) url('../images/kedvencverseny-2026/hero-kedvencverseny-hatter.webp')
                no-repeat
                center
                / cover;
    }
}
@media (min-width: 1920px) {
    .hero-unit {
        height: 780px;
        background:
            url('../images/kedvencverseny-2026/hero-kedvencverseny-papagaj.webp')
                no-repeat
                top 182px left calc(50% + 550px)
                / 269px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-felirat-768.webp')
                no-repeat
                top 22px center
                / 1685px auto,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-allatok-768.webp')
                no-repeat
                bottom center
                / auto 100%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-bal.webp')
                no-repeat
                top left
                / auto 50%,
            url('../images/kedvencverseny-2026/hero-kedvencverseny-sarok-jobb.webp')
                no-repeat
                top right
                / auto 50%,
            var(--kedvencverseny-2026-feher) url('../images/kedvencverseny-2026/hero-kedvencverseny-hatter.webp')
                no-repeat
                center
                / cover;
    }
}

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

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

/*******************************
* TEXT CONTENT
*******************************/
.section-title {
    position: relative;
    margin-block-end: 40px;
}

.section-content.text-content p {
    margin-block: 1.25em;
}

.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;
}
.section-content.text-content h3 {
    font-size: 1.25em;
}
.section-content.text-content h4 {
    font-size: 1.15em;
}

.section-content.text-content a {
    font-weight: inherit;
    text-decoration: underline;
}
.section-content.text-content a:hover {
    color: var(--kedvencverseny-2026-betuszin-link-hover);
    text-decoration-color: var(--kedvencverseny-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(--kedvencverseny-2026-hatterszin-megyevalaszto);
    border-image: var(--kedvencverseny-2026-border-image-blue);
}

/*
 * 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/kedvencverseny-2026/megye-valaszto-bg.webp') 1x, url('../images/kedvencverseny-2026/megye-valaszto-bg-2x.webp') 2x)
            no-repeat
            50% 50%
            / auto 309px;
}

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

megye-valaszto select {
    max-width: calc(100% - var(--button-width));
    border-color: var(--kedvencverseny-2026-feher);
    color: var(--kedvencverseny-2026-betuszin-alap);
    font-weight: 600;
}
megye-valaszto a {
    background-color: var(--kedvencverseny-2026-hatterszin-megyevalaszto-link);
    color: var(--kedvencverseny-2026-betuszin-alap);
    text-decoration: none;
}
megye-valaszto a:hover {
    background-color: var(--kedvencverseny-2026-hatterszin-megyevalaszto-link-hover);
}

megye-valaszto button {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE2IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMS4yNTczMiAxTDcuOTk5OTcgNy43NDI2NUwxNC43NDI2IDEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4%3D);
}


#partnerek {
    background-color: var(--kedvencverseny-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, 10%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.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(--kedvencverseny-2026-hatterszin-navigacio);
    color: var(--kedvencverseny-2026-feher);
    font-weight: 300;
}
body.page-kedvencverseny-2026-teaser footer,
body.page-kedvencverseny-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(--kedvencverseny-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;
    }
}