/*
 * Zuzka a Peter sa berú — Complete Aligned Stylesheet
 * 1:1 Matched to https://peknasvadba.sk/ (Divi Framework)
 */

/* ==========================================================================
   0. FONTS
   ========================================================================== */

@font-face {
    font-family: 'LittleLordFontleroy';
    src: url("../fonts/littlelordfontleroynf-webfont.wc-f77abf6cc0be4c18.woff2") format('woff2'),
         url("../fonts/littlelordfontleroynf-webfont.wc-5f3b780d7acac7bd.woff") format('woff'),
         url("../fonts/littlelordfontleroynf-webfont.wc-1a05f9069c3c99f0.ttf") format('truetype'),
         url("../fonts/littlelordfontleroynf-webfont.wc-1d7c2cf971ab89fe.eot") format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kurale';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/xKFilajNzTHQX_O-4Aq7TOvvDin1pK8aKteLpeZ5c0A.wc-bbd4a141afadce61.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'Kurale';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/UHDvT8GNDNC8LcEGiS9QnX-_kf6ByYO6CLYdB4HQE-Y.wc-c4531ac966cfa356.woff2") format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Kurale';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/iZF9pLhJL5ja4vXEVkWDun-_kf6ByYO6CLYdB4HQE-Y.wc-3dcad451080848f4.woff2") format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Kurale';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/NYAbeS2xkMMOTgpwQIklnn-_kf6ByYO6CLYdB4HQE-Y.wc-5a8dc533fcd3b335.woff2") format('woff2');
    unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* ==========================================================================
   1. RESET & BASE (DIVI ALIGNED)
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Kurale', 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8em;
    color: #444444;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Divi standard row container: width 80%, max-width 1080px */
.container {
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 25.6px 0;
}

/* Base Headings: padding-bottom 10px, margin 0 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Kurale', 'Open Sans', Arial, sans-serif;
    font-weight: normal;
    color: #333333;
    padding-bottom: 10px;
    margin: 0;
}

p {
    margin: 0;
    padding-bottom: 0;
    line-height: 1.8em;
}

/* WordPress Twemoji SVG smilies */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}


/* Section Headings */
.section-heading {
    text-align: center;
    margin-bottom: 28px;
}

.section-heading h3 {
    font-size: 25px;
    color: #333333;
    line-height: 20px;
    padding-bottom: 10px;
    margin: 0;
}

.flower-divider {
    font-size: 25px;
    color: #333333;
    line-height: 20px;
    padding-bottom: 10px;
    margin: 0;
    letter-spacing: 2px;
}

/* ==========================================================================
   2. SECTION 0: HERO
   ========================================================================== */

.section-hero {
    position: relative;
    width: 100%;
    background-image: url("../images/Masekovmlyn.wc-f9ebea33762c0fdb.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 25.6px 0;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 25.6px 60px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}

.hero-spacer-top {
    height: 200px;
}

.hero-spacer-bottom {
    height: 200px;
}

.hero-title {
    font-family: 'LittleLordFontleroy', cursive, serif;
    font-size: 8em;
    line-height: 2em;
    color: #ffffff;
    margin: 0 0 28px;
    padding-bottom: 0;
    font-weight: normal;
}

.hero-subtitle {
    font-family: 'Kurale', serif;
    font-size: 24px;
    line-height: 2em;
    color: #ffffff;
    margin: -20px 0 28px;
    padding-bottom: 0;
    font-weight: 600;
}

.hero-subtitle strong {
    font-weight: 700;
}

.hero-ornament {
    font-size: 30px;
    line-height: 1em;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 4px;
    margin: 0 0 28px;
    padding-bottom: 0;
}

/* ==========================================================================
   3. LACE DIVIDERS (SECTIONS 1, 4, 6, 8, 10)
   ========================================================================== */

.lace-divider {
    width: 100%;
    z-index: 5;
    background-repeat: repeat-x;
    background-position: center center;
    background-size: contain;
    margin: 0;
    padding: 0;
}

.lace-1 {
    background-image: url("../images/lace2.wc-f38338bdd7541ea5.png");
    height: 125px;
    background-color: #ffffff;
}

.lace-2 {
    background-image: url("../images/lace3.wc-260f24bf6cafcfb4.png");
    height: 97px;
    background-color: #ffffff;
}

.lace-3-upsidedown {
    background-image: url("../images/lace3upsidedown.wc-33735641aa93d553.png");
    height: 97px;
    background-color: #ffffff;
}

.lace-4 {
    background-image: url("../images/lace3.wc-260f24bf6cafcfb4.png");
    height: 97px;
    background-color: #ffffff;
}

.lace-5-dark {
    background-image: url("../images/lace4.wc-3f112800c899dd9e.png");
    height: 97px;
    background-color: #4c4c4c;
}

/* ==========================================================================
   4. SECTION 2: INTRO & LOCATION
   ========================================================================== */

.section-location {
    background-color: #ffffff;
    padding: 25.6px 0;
}

.section-location .container {
    padding: 0;
}

.intro-text {
    text-align: center;
    padding: 25.6px 0;
    margin: 0 auto;
}

.intro-text p {
    font-size: 15px;
    line-height: 27px;
    color: #666666;
    margin: 0;
    padding: 0;
}

.section-location .section-heading {
    padding: 25.6px 0;
    margin: 0 auto;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
    width: 100%;
    padding: 25.6px 0;
    margin: 0 auto;
}

.mlyn-illustration {
    display: block;
    width: 100%;
    max-width: 304px;
    height: auto;
    margin: 0 auto;
}

.location-col h3 {
    font-size: 20px;
    line-height: 16px;
    font-weight: 500;
    padding-bottom: 10px;
    margin-bottom: 28px;
    color: #333333;
}

.location-col p {
    font-size: 15px;
    line-height: 27px;
    color: #555555;
    margin: 0;
    padding: 0;
}

.map-container {
    height: 230px;
    width: 100%;
    margin-bottom: 28px;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.map-link {
    margin: 0;
    padding: 0;
    line-height: 15px !important;
    font-size: 15px;
    height: 15px;
}

.map-link a {
    color: #2ea3f2;
    display: inline-block;
    line-height: 15px;
}

.map-link a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   5. SECTION 3: ROLES & PROPOSAL (PARALLAX)
   ========================================================================== */

.section-roles {
    position: relative;
    padding: 25.6px 0;
    overflow: hidden;
    background-color: transparent;
}

.section-roles .parallax-bg {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section-roles .container {
    position: relative;
    z-index: 2;
    padding: 0;
}

.roles-card {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0;
    box-shadow: none;
    padding: 25.6px 0;
    margin-bottom: 0;
}

.title-card {
    padding: 25.6px 0;
    text-align: center;
}

.title-card .section-heading {
    margin-bottom: 0;
}

.couple-card {
    padding: 25.6px 0;
}

.couple-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

.person h5 {
    font-size: 16px;
    line-height: 12.8px;
    font-weight: 500;
    color: #333333;
    padding-bottom: 10px;
    margin-bottom: 28px;
}

.avatar-wrap {
    margin: 0;
    padding: 0;
}

.avatar-img {
    width: 174px;
    height: 174px;
    max-width: 174px;
    object-fit: cover;
    margin: 0 auto 28px;
    display: block;
    border-radius: 50%;
}

.person p {
    font-size: 15px;
    line-height: 27px;
    color: #000000;
    margin: 0;
    padding: 0 10px;
}

.proposal-card {
    padding: 25.6px 0;
}

.proposal-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: center;
    padding: 0 20px;
}

.proposal-text h3 {
    font-size: 25px;
    line-height: 20px;
    color: #333333;
    padding-bottom: 10px;
    margin: 0;
}

.proposal-date {
    font-size: 15px;
    line-height: 27px;
    color: #666666;
    margin-bottom: 28px;
    padding-bottom: 0;
}

.proposal-text p:last-child {
    font-size: 15px;
    line-height: 27px;
    color: #000000;
    margin: 0;
    padding: 0;
}

.proposal-image img {
    max-width: 264px;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   6. SECTION 5: GALLERY
   ========================================================================== */

.section-gallery {
    background-color: #ffffff;
    padding: 25.6px 0;
}

.section-gallery .container {
    padding: 25.6px 0;
}

.section-gallery .section-heading {
    margin-bottom: 28px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0 auto;
    padding: 0;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.gallery-thumb-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.gallery-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay-icon {
    font-size: 24px;
    color: #333333;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-thumb-wrap img {
    transform: scale(1.05);
}

/* ==========================================================================
   7. SECTION 7: FAQ TOGGLES
   ========================================================================== */

.section-faq {
    background-image: url("../images/oatmeal_linen_scan.wc-9849adb760fc63ec.jpg");
    background-repeat: repeat;
    background-color: #f7f4ee;
    padding: 25.6px 0;
}

.section-faq .container {
    padding: 0;
}

.section-faq .section-heading {
    padding: 25.6px 0;
    margin: 0 auto;
}

.faq-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    padding: 25.6px 0;
}

.faq-category {
    margin-bottom: 0;
}

.faq-col:last-child .faq-category:last-child .faq-toggle:last-child {
    margin-bottom: 0;
}

.faq-category-title {
    font-size: 21px;
    line-height: 16.8px;
    font-family: 'Kurale', serif;
    color: #333333;
    padding-bottom: 10px;
    margin-bottom: 28px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-weight: 400;
}

.faq-toggle {
    background-color: #f4f4f4;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    margin-bottom: 28px;
    padding: 12px;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

.faq-toggle:hover {
    box-shadow: none;
}

.faq-toggle.active {
    background-color: #ffffff;
}

.faq-toggle-title {
    font-family: 'Kurale', serif;
    font-size: 18px;
    font-weight: 400;
    color: #666666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    line-height: 23.4px;
    position: relative;
    padding-right: 35px;
    margin: 0;
    padding-bottom: 0;
}

.faq-toggle.active .faq-toggle-title {
    color: #333333;
}

.faq-toggle-title::after {
    content: '+';
    font-size: 20px;
    font-weight: normal;
    color: #cccccc;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.faq-toggle.active .faq-toggle-title::after {
    content: '\2212';
    font-size: 20px;
}

.faq-toggle-content {
    display: none;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px dashed #d8cebe;
    font-size: 15px;
    line-height: 27px;
    color: #666666;
}

.faq-toggle.active .faq-toggle-content {
    display: block;
}

.faq-toggle-content p {
    margin: 0;
    padding-bottom: 0;
    line-height: 27px;
}

.faq-toggle-content ul {
    margin: 10px 0 10px 24px;
    padding: 0;
    list-style-type: disc;
}

.faq-toggle-content li {
    margin-bottom: 4px;
}

/* ==========================================================================
   8. SECTION 9: DONATIONS
   ========================================================================== */

.section-donations {
    background-color: #ffffff;
    padding: 0 0 25.6px;
    text-align: center;
}

.section-donations .container {
    padding: 25.6px 0;
}

.section-donations .section-heading {
    margin-bottom: 28px;
}

.donation-content {
    margin: 0 auto;
}

.donation-intro {
    font-size: 15px;
    color: #666666;
    margin: 0;
    padding-bottom: 15px;
    line-height: 27px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.paypal-form {
    margin: 0 auto;
    padding: 0;
}

.paypal-submit-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.paypal-submit-btn:hover {
    transform: scale(1.05);
    opacity: 0.92;
}

.donation-thanks {
    font-size: 15px;
    color: #666666;
    margin: 0;
    padding: 0;
    line-height: 27px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   9. SECTION 11: POEM QUOTE FOOTER
   ========================================================================== */

.section-poem {
    background-color: #4c4c4c;
    color: #ffffff;
    padding: 25.6px 0;
    text-align: center;
}

.poem-container {
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 25.6px 0;
}

.poem-wrapper {
    background-image: url("../images/final.wc-fab78809f8c52784.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0;
}

.poem-spacer-top {
    height: 240px;
}

.poem-spacer-bottom {
    height: 240px;
}

.poem-quote {
    max-width: 800px;
    margin: 0 auto 28px;
    text-align: center;
}

.poem-quote p {
    font-size: clamp(20px, 1.8vw, 42px);
    font-family: 'Kurale', serif;
    font-style: normal;
    line-height: 27px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding-bottom: 23px;
}

.poem-quote p:last-child {
    padding-bottom: 0;
}



/* ==========================================================================
   10. LIGHTBOX MODAL
   ========================================================================== */

.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.88);
}

.lightbox-content {
    position: relative;
    z-index: 10000;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
    color: #ffffff;
    font-size: 16px;
    margin-top: 15px;
    text-align: center;
    letter-spacing: 0.5px;
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 35px;
    z-index: 10001;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.lightbox-close:hover {
    transform: scale(1.15);
    opacity: 0.8;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: #ffffff;
    font-size: 48px;
    line-height: 1;
    padding: 15px 18px;
    cursor: pointer;
    z-index: 10001;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.lightbox-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
    left: 25px;
}

.lightbox-next {
    right: 25px;
}

/* ==========================================================================
   11. RESPONSIVE BREAKPOINTS (MATCHING DIVI @media max-width: 980px)
   ========================================================================== */

@media (max-width: 980px) {
    .container {
        width: 92%;
    }

    .hero-container {
        width: 92%;
        padding: 25.6px 20px;
    }


    .location-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .proposal-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .faq-two-cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {


    .couple-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lightbox-nav {
        font-size: 32px;
        padding: 10px 12px;
    }
}