/*
Theme Name: Astra Juula
Theme URI: https://juula.ee/
Description: Juula küla Astra child theme.
Author: Juula
Template: astra
Version: 1.2.0
Text Domain: astra-juula
*/

:root {
    --juula-accent: #e85a28;
    --juula-ink: #171717;
    --juula-soft: #f6f5f2;
}

body {
    color: var(--juula-ink);
    background: #fff;
}

.juula-hero {
    min-height: 500px;
    display: grid;
    place-items: center;
    background: #eef0ef url('/wp-content/uploads/2022/03/cropped-juula-winter.jpg') center 48% / cover no-repeat;
    text-align: center;
}

.juula-hero__title {
    margin: 0;
    color: #050505;
    font: 300 clamp(4rem, 8vw, 7rem)/1.05 Arial, sans-serif;
    letter-spacing: .055em;
}

.juula-mobile-menu,
.juula-mobile-nav {
    display: none;
}

.site-header {
    border-bottom: 1px solid #ececec;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.site-header .site-branding {
    display: none;
}

.ast-primary-header-bar {
    min-height: 68px;
    background: #fff;
}

.main-header-menu {
    gap: 10px;
}

.main-header-menu > .menu-item > .menu-link {
    color: #151515;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .menu-item > .menu-link:hover {
    color: var(--juula-accent);
}

.juula-slider-wrap {
    padding: 40px 20px 0;
    background: #fff;
}

.juula-slider {
    position: relative;
    width: min(1080px, 100%);
    min-height: 430px;
    margin: 0 auto;
    overflow: hidden;
    background: #777;
}

.juula-slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 70px 11%;
    opacity: 0;
    visibility: hidden;
    background-position: center;
    background-size: cover;
    transition: opacity .65s ease, visibility .65s ease;
}

.juula-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(25, 25, 25, .48);
}

.juula-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.juula-slide__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    color: #fff;
    text-align: center;
}

.juula-slide h2 {
    margin: 0 0 22px;
    color: #fff;
    font: 400 clamp(2.1rem, 4vw, 3.4rem)/1.15 Georgia, serif;
}

.juula-slide p {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.75;
}

.juula-slide__button {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.juula-slide__button:hover {
    color: #111;
    background: #fff;
}

.juula-slider__nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 42px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.juula-slider__prev { left: 22px; }
.juula-slider__next { right: 22px; }

.juula-slider__dots {
    position: absolute;
    z-index: 2;
    bottom: 22px;
    left: 50%;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.juula-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
}

.juula-slider__dot.is-active { background: #fff; }

.home .site-content {
    padding-top: 40px;
}

.home .entry-header {
    display: none;
}

.site-footer {
    margin-top: 60px;
}

@media (max-width: 921px) {
    .site-header {
        display: none;
    }

    .juula-hero {
        position: relative;
        min-height: 205px;
        background-position: center;
    }

    .juula-hero__title {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .juula-mobile-menu {
        position: absolute;
        z-index: 20;
        top: 18px;
        right: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 88px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: #fff;
        background: #171717;
        font: 700 12px/1 Arial, sans-serif;
        letter-spacing: .12em;
    }

    .juula-mobile-nav {
        position: absolute;
        z-index: 19;
        top: 70px;
        right: 18px;
        width: min(310px, calc(100% - 36px));
        padding: 12px 0;
        background: #fff;
        box-shadow: 0 12px 35px rgba(0, 0, 0, .2);
    }

    .juula-mobile-nav.is-open {
        display: block;
    }

    .juula-mobile-nav ul {
        margin: 0;
        list-style: none;
    }

    .juula-mobile-nav a {
        display: block;
        padding: 10px 20px;
        color: #171717;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        text-transform: uppercase;
    }

    .juula-mobile-nav .sub-menu a {
        padding-left: 36px;
        font-size: 13px;
        font-weight: 400;
    }

    .juula-slider-wrap {
        padding: 0;
    }

    .juula-slider {
        min-height: 330px;
    }

    .juula-slide {
        padding: 55px 42px;
    }

    .juula-slide p {
        display: none;
    }

    .juula-slider__nav {
        display: none;
    }
}

@media (max-width: 544px) {
    .juula-hero {
        min-height: 145px;
    }

    .juula-hero__title {
        font-size: 3.5rem;
    }

    .juula-slider {
        min-height: 330px;
    }

    .juula-slide h2 {
        font-size: 2rem;
    }
}

/* Structured content layouts. */
body:not(.home) .site-content { padding-top: 56px; padding-bottom: 72px; }
body:not(.home) .site-main > article { max-width: 1080px; margin-inline: auto; }
body:not(.home) .entry-header { margin-bottom: 38px; text-align: center; }
body:not(.home) .entry-title { position: relative; margin: 0; padding-bottom: 18px; color: #171717; font: 400 clamp(2.1rem, 5vw, 3.4rem)/1.15 Georgia, serif; }
body:not(.home) .entry-title::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 56px; height: 3px; background: var(--juula-accent); transform: translateX(-50%); }
.entry-content { color: #303030; font-size: 17px; line-height: 1.75; }
.entry-content > :where(p, ul, ol, h2, h3, h4, figure, table, .wp-block-file) { max-width: 820px; margin-inline: auto; }
.entry-content p:empty, .entry-content p:has(> br:only-child) { display: none; }
.entry-content p { margin-top: 0; margin-bottom: 1.25em; }
.entry-content h2, .entry-content h3, .entry-content h4 { color: #1d1d1d; line-height: 1.25; }
.entry-content h2 { margin-top: 2em; font-size: 2rem; }
.entry-content h3 { margin-top: 1.7em; font-size: 1.55rem; }
.entry-content h4 { margin-top: 1.45em; font-size: 1.2rem; }
.entry-content ul, .entry-content ol { padding-left: 1.35em; }
.entry-content li { margin-bottom: .55em; padding-left: .25em; }
.entry-content img { height: auto; border-radius: 3px; }
.entry-content .wp-block-image { margin-bottom: 32px; }
.entry-content .alignfull { width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content table { width: 100%; border: 0; border-collapse: collapse; font-size: 15px; }
.entry-content td, .entry-content th { padding: 12px 14px; border: 0; border-bottom: 1px solid #e8e8e8; text-align: left; vertical-align: top; }
.entry-content tr:nth-child(even) { background: #f8f7f4; }
.juula-lead { max-width: 880px; margin: 0 auto 42px; color: #292929; font: 400 clamp(1.25rem, 2.5vw, 1.65rem)/1.55 Georgia, serif; text-align: center; }
.juula-note { max-width: 820px; margin: 0 auto 36px; padding: 18px 22px; border-left: 4px solid var(--juula-accent); background: var(--juula-soft); }
.juula-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin: 36px auto; }
.juula-card { padding: 30px; border: 1px solid #e5e2dc; background: #fff; box-shadow: 0 10px 35px rgba(40, 35, 25, .06); }
.juula-card h2, .juula-card h3 { margin-top: 0; }
.juula-card p:last-child { margin-bottom: 0; }
.juula-contact-grid { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: 30px; max-width: 980px; margin: 0 auto 42px; }
.juula-contact-card { padding: 30px; color: #fff; background: #252525; }
.juula-contact-card h2, .juula-contact-card a { color: #fff; }
.juula-contact-card h2, .juula-form-card h2 { margin-top: 0; font-size: 1.6rem; }
.juula-form-card { padding: 30px; border: 1px solid #e5e2dc; background: var(--juula-soft); }
.juula-map { max-width: 980px; margin: 0 auto; }
.juula-map-link { display: inline-block; margin-bottom: 16px; font-weight: 700; }
.juula-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 820px; margin: 0 auto; }
.juula-report { padding: 28px; border: 1px solid #e5e2dc; background: var(--juula-soft); }
.juula-report h2 { margin-top: 0; }
.juula-button { display: inline-block; padding: 11px 20px; color: #fff !important; background: #252525; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; }
.juula-button:hover { background: var(--juula-accent); }
.page-id-11626 .wp-block-table { max-width: 980px; }
.page-id-11626 .wp-block-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.page-id-11626 .wp-block-table tr { display: grid; grid-template-columns: 40px 1fr auto; background: transparent; }
.page-id-11626 .wp-block-table td { padding: 10px 8px; }
.page-id-11626 .wp-block-table td:first-child { color: #888; }
.page-id-11620 .entry-content h3, .page-id-11640 .entry-content h3 { padding: 20px 24px; border-left: 4px solid var(--juula-accent); background: var(--juula-soft); }
.page-id-11628 .entry-content, .page-id-11630 .entry-content, .page-id-11636 .entry-content, .page-id-11638 .entry-content, .page-id-11640 .entry-content, .page-id-11717 .entry-content { max-width: 820px; margin-inline: auto; }
.page-id-11622 .wp-block-uagb-container { margin-bottom: 26px !important; padding: 28px !important; border: 1px solid #e8e5df; }

@media (max-width: 921px) {
    .juula-grid, .juula-contact-grid, .juula-report-grid { grid-template-columns: 1fr; }
    .page-id-11626 .wp-block-table tbody { grid-template-columns: 1fr; }
}

@media (max-width: 544px) {
    body:not(.home) .site-content { padding-top: 34px; padding-bottom: 48px; }
    body:not(.home) .entry-header { margin-bottom: 28px; }
    .entry-content { font-size: 16px; }
    .juula-card, .juula-contact-card, .juula-form-card, .juula-report { padding: 22px; }
}