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

/*******************************
* SITE SPECIFIC CUSTOM PROPERTIES
*******************************/
:root {
    --anyalanyafoto-2026-hatterszin-alap: #F5DCD5;

    --anyalanyafoto-2026-hatterszin-navigacio: #330C27;

    --anyalanyafoto-2026-hatterszin-hero: #E2A9F1;

    --anyalanyafoto-2026-hatterszin-partnerek: #4E193E;

    --anyalanyafoto-2026-hatterszin-megyevalaszto: #E0B7C5;

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

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

    --anyalanyafoto-2026-betuszin-alap: #330C27;

    --anyalanyafoto-2026-betuszin-link: #ED113F;

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

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

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

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

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

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

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

body.page-anyalanyafoto-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(--anyalanyafoto-2026-hatterszin-navigacio);
    color: var(--anyalanyafoto-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: 18px;
    line-height: 1em;
    margin-block-start: 2px;
    margin-block-end: 10px;
    font-weight: 800;
    padding-inline-start: 20px;
}
@media (min-width: 400px) {
    .header-title {
        margin-block-start: unset;
        font-size: 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(--anyalanyafoto-2026-betuszin-link-navigacio-hover);
}

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

.header-toggler {
    --color-component-default: var(--anyalanyafoto-2026-betuszin-link-navigacio);
    --color-component-bg: var(--anyalanyafoto-2026-hatterszin-navigacio);
}

/*******************************
* HERO UNIT
*******************************/
.hero-unit {
    height: 300px;
    background:
        url('../images/anyalanyafoto-2026/hero-anyalanyafoto-felirat-300.webp')
            no-repeat bottom right / auto 100%,
        url('../images/anyalanyafoto-2026/hero-anyalanyafoto-babett-300.webp')
            no-repeat 0 0 / auto 100%,
        var(--anyalanyafoto-2026-hatterszin-hero) url('../images/anyalanyafoto-2026/hero-anyalanyafoto-papir.webp')
            no-repeat 0 0 / cover;
}
@media (min-width: 660px) {
    .hero-unit {
        height: 312px;
        background:
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-felirat-312.webp')
                no-repeat top right / auto 100%,
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-babett-300.webp')
                no-repeat 0 0 / auto 100%,
            var(--anyalanyafoto-2026-hatterszin-hero) url('../images/anyalanyafoto-2026/hero-anyalanyafoto-papir.webp')
                no-repeat 0 0 / cover;
    }
}
@media (min-width: 740px) {
    .hero-unit {
        background:
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-felirat-312.webp')
                no-repeat top right / auto 100%,
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-babett-312.webp')
                no-repeat 0 0 / auto 100%,
            var(--anyalanyafoto-2026-hatterszin-hero) url('../images/anyalanyafoto-2026/hero-anyalanyafoto-papir.webp')
                no-repeat 0 0 / cover;
    }
}
@media (min-width: 1024px) {
    .hero-unit {
        height: 416px;
        background:
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-felirat-520.webp')
                no-repeat top right / auto 100%,
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-babett-520.webp')
                no-repeat 0 0 / auto 100%,
            var(--anyalanyafoto-2026-hatterszin-hero) url('../images/anyalanyafoto-2026/hero-anyalanyafoto-papir.webp')
                no-repeat 0 0 / cover;
    }
}
@media (min-width: 1281px) {
    .hero-unit {
        height: 520px;
    }
}
@media (min-width: 1920px) {
    .hero-unit {
        height: 780px;
        background:
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-felirat-780.webp')
                no-repeat top right / auto 100%,
            url('../images/anyalanyafoto-2026/hero-anyalanyafoto-babett-780.webp')
                no-repeat 0 0 / auto 100%,
            var(--anyalanyafoto-2026-hatterszin-hero) url('../images/anyalanyafoto-2026/hero-anyalanyafoto-papir.webp')
                no-repeat 0 0 / cover;
    }
}

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

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

/*******************************
* TEXT CONTENT
*******************************/
.section-title {
    font-weight: 900;
    color: var(--anyalanyafoto-2026-betuszin-link);
    position: relative;
    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 .75em;
    font-weight: 600;
}
.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(--anyalanyafoto-2026-betuszin-link);
    font-weight: inherit;
    text-decoration: underline;
}
.section-content.text-content a:hover {
    color: var(--anyalanyafoto-2026-betuszin-link-hover);
    text-decoration-color: var(--anyalanyafoto-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;
    }
}

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

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

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

megye-valaszto select {
    max-width: calc(100% - var(--button-width));
    color: var(--anyalanyafoto-2026-betuszin-alap);
    font-weight: 600;
}
megye-valaszto a {
    min-width: 160px;
    border-radius: 9px;
    text-align: center;
    background-color: var(--anyalanyafoto-2026-betuszin-link);
    color: var(--anyalanyafoto-2026-feher);
    text-decoration: none;
    box-shadow: none;
}
megye-valaszto a:hover {
    background-color: var(--anyalanyafoto-2026-betuszin-link-hover);
}

#partnerek {
    background-color: var(--anyalanyafoto-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*='borsonline.hu']
    {
        order: 1;
    }
}

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