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

/*******************************
* SITE SPECIFIC CUSTOM PROPERTIES
*******************************/
:root {
    --karacsonyifenyvarazs-sarga: #FFE483;

    --karacsonyifenyvarazs-feher: #fff;

    --karacsonyifenyvarazs-bordo: #791811;

    --karacsonyifenyvarazs-zold: #003702;

    --karacsonyifenyvarazs-hatterszin-alap: #E5D8C4;

    --karacsonyifenyvarazs-hatterszin-navigacio: var(--karacsonyifenyvarazs-bordo);

    --karacsonyifenyvarazs-hatterszin-navigacio-gradiens-length: 75px;
    --karacsonyifenyvarazs-hatterszin-navigacio-gradiens: linear-gradient(180deg, #791811 0, #B50C00 calc(var(--karacsonyifenyvarazs-hatterszin-navigacio-gradiens-length) / 2), #791811 var(--karacsonyifenyvarazs-hatterszin-navigacio-gradiens-length));

    --karacsonyifenyvarazs-hatterszin-megyevalaszto: #B5C8E2;

    --karacsonyifenyvarazs-hatterszin-megyevalaszto-link: var(--karacsonyifenyvarazs-bordo);

    --karacsonyifenyvarazs-hatterszin-megyevalaszto-link-hover: #D40E00;

    --karacsonyifenyvarazs-betuszin-alap: #372322;

    --karacsonyifenyvarazs-betuszin-link: var(--karacsonyifenyvarazs-bordo);

    --karacsonyifenyvarazs-betuszin-link-hover: #D40E00;

    --karacsonyifenyvarazs-betuszin-link-navigacio-hover: var(--karacsonyifenyvarazs-feher);
    
    --color-nav-link: var(--karacsonyifenyvarazs-betuszin-link);

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

    --color-text-content: var(--karacsonyifenyvarazs-betuszin-alap);

    --karacsonyifenyvarazs-fenyo-border-image: url('../images/karacsonyifenyvarazs/megye-valaszto-border-image.webp') 72 0 0 / 36px 0 0 repeat;
}

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

    background-color: var(--karacsonyifenyvarazs-hatterszin-alap);
}

body.page-karacsonyifenyvarazs-teaser {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-areas:
        "content"
        "footer";
    grid-template-rows: 1fr auto;
}
body.page-karacsonyifenyvarazs-teaser:has(#wpadminbar),
body.page-karacsonyifenyvarazs-promo-ended:has(#wpadminbar) {
    height: calc(100vh - var(--admin-bar-height));
    height: calc(100dvh - var(--admin-bar-height));
}

body.page-karacsonyifenyvarazs-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 {
    grid-area: header;
    flex-flow: row;
    background-image: var(--karacsonyifenyvarazs-hatterszin-navigacio-gradiens);
    color: var(--karacsonyifenyvarazs-sarga);
    justify-content: center;
    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;
}
@media (max-width: 360px) {
    .header-title {
        font-size: 17px;
        line-height: 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(--karacsonyifenyvarazs-betuszin-link-navigacio-hover);
}

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

.header-toggler {
    --color-component-default: var(--karacsonyifenyvarazs-sarga);
    --color-component-bg: transparent;
}

/*******************************
* HERO UNIT
*******************************/
.hero-unit {
    grid-area: hero;
    height: 300px;
    margin-block-end: 0;
    background:
        image-set(url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-felirat.webp') 1x, url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-felirat-2x.webp') 2x)
            no-repeat
            bottom 12px left 18px
            / 248px auto,
        image-set(url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-logo.webp') 1x, url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-logo-2x.webp') 2x)
            no-repeat
            top -12px left -32px
            / 272px auto,
        url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-hatter.webp')
            no-repeat
            top -58px left calc(50% + 62px)
            / 907px auto;
}
@media (min-width: 500px) {
    .hero-unit {
        height: 312px;
        background:
            image-set(url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-felirat-wide.webp') 1x, url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-felirat-wide-2x.webp') 2x)
                no-repeat
                bottom 18px left 20px
                / 345px auto,
            image-set(url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-logo.webp') 1x, url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-logo-2x.webp') 2x)
                no-repeat
                top left -20px
                / 355px auto,
            url('../images/karacsonyifenyvarazs/hero-karacsonyifenyvarazs-hatter.webp')
                no-repeat
                top -85px left calc(50% + 114px)
                / 1141px auto;
    }
}
@media (min-width: 900px) {
    .hero-unit {
        background-position:
            bottom 18px left 20px,
            top left -20px,
            top -85px left;
    }
}
@media (min-width: 1024px) {
    .hero-unit {
        height: 416px;
        background-size:
            467px auto,
            470px auto,
            1417px auto;
        background-position:
            bottom 22px left var(--container-intrinsic),
            top left calc(var(--container-intrinsic) - 50px),
            top -88px left
    }
}
@media (min-width: 1281px) {
    .hero-unit {
        height: 520px;
        background-size:
            556px auto,
            560px auto,
            1496px auto;
        background-position:
            bottom 25px left var(--container-intrinsic),
            top left calc(var(--container-intrinsic) - 75px),
            top -15px left
    }
}
@media (min-width: 1496px) {
    .hero-unit {
        background-size:
            556px auto,
            560px auto,
            100% auto;
        background-position:
            bottom 25px left var(--container-intrinsic),
            top left calc(var(--container-intrinsic) - 75px),
            bottom left
    }
}
@media (min-width: 1920px) {
    .hero-unit {
        height: 780px;
        background-size:
            616px auto,
            670px auto,
            100% auto;
        background-position:
            bottom 41px left var(--container-intrinsic),
            top left calc(var(--container-intrinsic) - 75px),
            bottom left
    }
}

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

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

/*******************************
* TEXT CONTENT
*******************************/
.section-title {
    color: var(--karacsonyifenyvarazs-zold);
    position: relative;
    margin-block-end: 20px;
}

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

.section-content.text-content h3,
.section-content.text-content h4 {
    color: var(--karacsonyifenyvarazs-zold);
    margin-block: 2em 1em;
}
.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(--karacsonyifenyvarazs-betuszin-link-hover);
    text-decoration-color: var(--karacsonyifenyvarazs-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: 66px;
    background-color: var(--karacsonyifenyvarazs-hatterszin-megyevalaszto);
    border-image: var(--karacsonyifenyvarazs-fenyo-border-image);
}

#promo-ended,
#custom-content,
#verseny-menete {
    padding-block: 66px 10px;
    border-image: var(--karacsonyifenyvarazs-fenyo-border-image);
}

#promo-ended .section-content,
#custom-content .section-content,
#verseny-menete .section-content {
    margin-inline: var(--container-intrinsic);
}

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

megye-valaszto {
    --color-component-default: var(--karacsonyifenyvarazs-hatterszin-navigacio);
}

megye-valaszto select {
    max-width: calc(100% - var(--button-width));
    color: var(--karacsonyifenyvarazs-betuszin-alap);
    font-weight: 600;
}
megye-valaszto a {
    position: relative;
    background:
        radial-gradient(50% 50% at 50% 50%, #E30F00 0%, var(--karacsonyifenyvarazs-bordo) 100%)
        var(--karacsonyifenyvarazs-hatterszin-megyevalaszto-link);
}
megye-valaszto a::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 3px dotted var(--karacsonyifenyvarazs-sarga);
}
megye-valaszto a:hover::after  {
    border-color: var(--karacsonyifenyvarazs-feher);
}

/*
 * 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(--karacsonyifenyvarazs-hatterszin-navigacio);
    color: var(--karacsonyifenyvarazs-sarga);
    font-weight: 300;
}
body.page-karacsonyifenyvarazs-teaser footer,
body.page-karacsonyifenyvarazs-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(--karacsonyifenyvarazs-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;
    }
}