/* =========================
GLOBAL
========================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#050505;
    color:#fff;
    font-family:"Helvetica Neue",Arial,sans-serif;
}

h1,
h2,
h3{
    font-family:"Times New Roman",serif;
    font-weight:300;
    letter-spacing:2px;
}

a{
    color:#fff;
    text-decoration:none;
}


/* =========================
CONTAINER
========================= */

.container{
    max-width:1200px;
    margin:auto;
    padding:80px 30px;
}


/* =========================
HEADER
========================= */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    padding:25px 50px;

    background:
    linear-gradient(
        rgba(0,0,0,.85),
        transparent
    );

    backdrop-filter:blur(10px);

}


.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.site-header img{

    height:65px;

    width:auto;

}



/* Navigation */

.main-navigation ul{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    gap:35px;

}


.main-navigation li{

    position:relative;

}


.main-navigation a{

    display:block;

    padding:10px 0;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.3s;

}


.main-navigation a:hover{

    opacity:.6;

}


/* Dropdown */

.dropdown{

    position:absolute;

    top:100%;

    left:0;

    background:#050505;

    min-width:220px;

    padding:15px;

    border:1px solid #222;

    display:none;

}


.dropdown li{

    width:100%;

}


.dropdown a{

    padding:12px 15px;

    white-space:nowrap;

}


.has-dropdown:hover > .dropdown{

    display:block;

}


.dropdown .dropdown{

    left:100%;

    top:0;

}



/* Hamburger */

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    background:none;

    border:none;

    cursor:pointer;

    padding:0;

}


.menu-toggle span{

    display:block;

    width:28px;

    height:3px;

    margin:6px auto;

    background:#fff;

    transition:.35s;

}


.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}


.menu-toggle.active span:nth-child(2){

    opacity:0;

}


.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}



/* Social icons */

.socials{

    display:flex;

    align-items:center;

    gap:15px;

}


.socials a{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.2);

    border-radius:50%;

    transition:.35s;

}


.socials svg{

    width:18px;

    height:18px;

    fill:#fff;

}


.socials a:hover{

    background:#fff;

    transform:translateY(-4px);

}


.socials a:hover svg{

    fill:#000;

}


.tiktok-icon{

    font-size:22px;

}



/* =========================
HERO
========================= */

.hero{

    height:100vh;

    min-height:700px;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}


.hero:after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.85)
    );

}


.hero-overlay{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:900px;

    padding:30px;

}


.hero-overlay h1{

    font-size:clamp(45px,7vw,90px);

    margin-bottom:30px;

}


.hero-overlay p,
.hero-description{

    font-size:22px;

    line-height:1.8;

    opacity:.9;

}


.hero-description p{

    margin:0 0 15px;

}



/* Main Button */

.btn{

    display:inline-block;

    margin-top:35px;

    background:#fff;

    color:#000;

    padding:18px 55px;

    border-radius:50px;

    font-weight:bold;

    letter-spacing:2px;

    transition:.4s;

}


.btn:hover{

    background:#ddd;

    transform:translateY(-5px);

}



/* =========================
GALLERY
========================= */

.book-section{

    padding:120px 0;

    overflow:hidden;

}


.gallery-header{

    text-align:center;

    margin-bottom:60px;

}


.gallery-header h2{

    font-size:60px;

    margin:0 0 20px;

}


.gallery-header p{

    opacity:.7;

    font-size:18px;

}



/* Album selector */

.gallery-albums-scroll{

    width:100%;

    display:flex;

    gap:0;

    padding:0;

    margin:0;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    cursor:grab;

}


.gallery-albums-scroll::-webkit-scrollbar{

    display:none;

}


.gallery-album-card{

    position:relative;

    flex:0 0 360px;

    height:480px;

    overflow:hidden;

    display:block;

}


.gallery-album-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.8s ease;

}


.gallery-album-card:after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        transparent 45%,
        rgba(0,0,0,.85)
    );

}


.album-overlay{

    position:absolute;

    z-index:2;

    left:30px;

    right:30px;

    bottom:30px;

}


.album-overlay h3{

    margin:0;

    font-size:36px;

    text-transform:uppercase;

    letter-spacing:3px;

}


.gallery-album-card:hover img{

    transform:scale(1.08);

}

/* =========================
PHOTO GALLERY SCROLL
========================= */

.book-container{

    width:100%;

    margin:0;

}


.book-scroll{

    width:100%;

    display:flex;

    gap:0;

    padding:0;

    margin:0;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    cursor:grab;

    user-select:none;

}


.book-scroll::-webkit-scrollbar{

    display:none;

}


.book-scroll.grabbing,
.gallery-albums-scroll.grabbing{

    cursor:grabbing;

}


.book-scroll img,
.gallery-albums-scroll img{

    pointer-events:none;

}


.album-photo{

    flex:0 0 420px;

    height:650px;

    overflow:hidden;

    position:relative;

}


.album-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.8s ease;

}


.album-photo:hover img{

    transform:scale(1.05);

}


.scroll-indicator{

    text-align:center;

    margin-top:35px;

    letter-spacing:2px;

    opacity:.7;

}



/* =========================
REVIEWS + CONTACT
========================= */


.reviews-contact-section{

    max-width:1400px;

    margin:auto;

    padding:120px 30px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:stretch;

}


.reviews,
.contact{

    display:flex;

    padding:0;

}


.review-box,
.contact-box{

    width:100%;

    background:#111;

    border-radius:20px;

    padding:50px;

    display:flex;

    flex-direction:column;

}


.review-box{

    max-width:none;

}


.contact-box{

    max-width:none;

    text-align:center;

}


.contact-box h2{

    font-size:55px;

}



/* WeddingWire */

.weddingwire-container{

    width:100%;

    overflow:hidden;

}


.weddingwire-container iframe{

    width:100% !important;

    max-width:100% !important;

}



/* =========================
FORMS
========================= */


#cms-contact-form{

    width:100%;

}


input,
textarea,
select{

    width:100%;

    background:#ddd;

    color:#000;

    border:none;

    padding:18px;

    margin-bottom:20px;

    font-size:16px;

    border-radius:6px;

}


textarea{

    min-height:180px;

}


#cms-contact-form input,
#cms-contact-form textarea,
#cms-contact-form select{

    box-sizing:border-box;

}



/* submit button */

button,
button.btn,
input[type="submit"]{

    width:100%;

    padding:18px 24px;

    background:#fff;

    color:#000;

    border:none;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.35s;

    margin-top:10px;

}


button:hover,
button.btn:hover,
input[type="submit"]:hover{

    background:#ddd;

    transform:translateY(-3px);

}


button:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

}



/* =========================
LOGOS
========================= */


.logos{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    flex-wrap:wrap;

    padding:80px 20px;

}


.logos a{

    display:flex;

    justify-content:center;

    align-items:center;

    height:90px;

    opacity:.75;

    transition:.4s;

}


.logos a:hover{

    opacity:1;

    transform:translateY(-5px);

}


.logos img{

    max-width:180px;

    max-height:80px;

    width:auto;

    object-fit:contain;

    filter:grayscale(100%);

    transition:.3s;

}


.logos img:hover{

    filter:none;

}



/* =========================
FOOTER
========================= */


.site-footer{

    border-top:1px solid rgba(255,255,255,.15);

    padding:60px 0;

    text-align:center;

}


.footer-inner{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:30px;

}


.footer-menu{

    list-style:none;

    display:flex;

    justify-content:center;

    gap:35px;

    padding:0;

    margin:0;

    flex-wrap:wrap;

}


.footer-menu a{

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    opacity:.8;

}


.footer-socials{

    display:flex;

    gap:18px;

    justify-content:center;

}


.footer-socials a{

    width:42px;

    height:42px;

    border:1px solid rgba(255,255,255,.25);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}


.footer-socials svg{

    width:19px;

    height:19px;

    fill:#fff;

}


.footer-socials a:hover{

    background:#fff;

    transform:translateY(-4px);

}


.footer-socials a:hover svg{

    fill:#000;

}


.copyright{

    margin:0;

    opacity:.6;

    font-size:14px;

}



/* =========================
GALLERY PAGE
========================= */


.gallery-page{

    width:100%;

    margin:0;

    padding:0;

}


.gallery-page .book-section{

    padding-top:120px;

}


.gallery-page .album-photo{

    flex:0 0 420px;

}

/* =========================
PAGE + POST CONTENT
========================= */

.page-content,
.post-content{

    max-width:1200px;

    margin:0 auto;

    padding:140px 30px 80px;

    text-align:center;

}


.featured-image{

    display:block;

    width:100%;

    max-width:1000px;

    height:auto;

    margin:0 auto 50px;

    border-radius:20px;

    object-fit:cover;

}


.page-title{

    margin:0 auto 40px;

}


.page-body,
.post-content .content{

    max-width:900px;

    margin:0 auto;

    text-align:left;

}

/* =========================
BLOG
========================= */


.blog-page{

    max-width:1200px;

    margin:auto;

    padding:140px 30px 80px;

}


.blog-header{

    text-align:center;

    margin-bottom:60px;

}



.blog-posts{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



.blog-card{

    background:#111;

    border-radius:20px;

    overflow:hidden;

    padding-bottom:30px;

}



.blog-card img{

    width:100%;

    height:280px;

    object-fit:cover;

}



.blog-card h2,
.blog-card p{

    padding:0 30px;

}



.blog-card h2{

    margin-top:30px;

}



.blog-card .btn{

    margin-left:30px;

}



.pagination{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:60px;

}


.pagination a{

    border:1px solid #333;

    padding:10px 15px;

    border-radius:50%;

}



@media(max-width:768px){

    .blog-page{

        padding:110px 20px 50px;

    }


    .blog-posts{

        grid-template-columns:1fr;

    }

}

/* =========================
RELATED POSTS
========================= */


.related-posts{

    margin-top:100px;

}


.related-posts h2{

    text-align:center;

    font-size:45px;

    margin-bottom:50px;

}



.related-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.related-card{

    background:#111;

    border-radius:18px;

    overflow:hidden;

}



.related-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

}



.related-card h3{

    padding:25px;

    margin:0;

    font-size:24px;

}



.related-card a{

    color:white;

}


/* =========================
FULL WIDTH GALLERY PAGE
========================= */


.gallery-page{

    width:100%;

    max-width:none;

    margin:0;

    padding:0;

}


.gallery-page .page-title{

    display:none;

}


.gallery-page .page-body{

    max-width:none;

    padding:0;

    margin:0;

}


.gallery-page .content{

    max-width:none;

}


.gallery-page .book-section{

    padding-top:120px;

}


@media(max-width:768px){


.related-grid{

    grid-template-columns:1fr;

}


.related-posts h2{

    font-size:36px;

}


.related-card img{

    height:220px;

}


}




/* =========================
MOBILE
========================= */


@media(max-width:768px){


.site-header{

    padding:18px 20px;

}


.header-inner{

    flex-direction:row;

}


.site-header img{

    height:55px;

}


.menu-toggle{

    display:block;

}


.main-navigation{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#050505;

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    border-top:1px solid #222;

}


.main-navigation.active{

    max-height:700px;

}


.main-navigation ul{

    flex-direction:column;

    gap:0;

    padding:20px;

}


.main-navigation li{

    width:100%;

}


.main-navigation a{

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}


.dropdown{

    position:static;

    background:transparent;

    border:none;

    padding-left:20px;

}


.socials{

    display:none;

}



/* hero */

.hero{

    min-height:650px;

}


.hero-overlay h1{

    font-size:45px;

}


.hero-overlay p{

    font-size:18px;

}



/* gallery */

.gallery-header h2{

    font-size:38px;

}


.gallery-album-card{

    flex-basis:260px;

    height:350px;

}


.album-overlay{

    left:20px;

    bottom:20px;

}


.album-overlay h3{

    font-size:24px;

}


.album-photo{

    flex-basis:300px;

    height:450px;

}



/* reviews/contact */

.reviews-contact-section{

    grid-template-columns:1fr;

    padding:40px 20px;

    gap:30px;

}


.review-box,
.contact-box{

    padding:25px;

    border-radius:16px;

}


.reviews,
.contact{

    width:100%;

}


.contact-box h2{

    font-size:40px;

}



/* form mobile */

#cms-contact-form input,
#cms-contact-form textarea,
#cms-contact-form select,
#cms-contact-form button{

    width:100% !important;

    max-width:100% !important;

}

/* partner logos mobile */

.logos{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px 20px;

    padding:50px 20px;

}


.logos a{

    width:100%;

    height:120px;

}


.logos img{

    max-width:180px;

    max-height:90px;

    width:100%;

    object-fit:contain;

}

.page-content,
.post-content{

    padding:110px 20px 50px;

}


.featured-image{

    margin-bottom:30px;

    border-radius:15px;

}


.page-body,
.post-content .content{

    text-align:left;

}


/* footer */

.footer-menu{

    flex-direction:column;

    gap:15px;

}


}


/* =========================
FORM POLISH (StudioCMS 2026)
Keeps the existing wedding-theme visual language while improving labels,
validation messages and small-screen usability.
========================= */

#cms-contact-form{
    margin-top:30px;
    text-align:left;
}

#cms-contact-form .cms-form-field{
    margin-bottom:18px;
}

#cms-contact-form .cms-form-label{
    display:block;
    margin:0 0 8px;
    color:#f5f5f5;
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    line-height:1.35;
}

#cms-contact-form .cms-required{
    color:#ef4444;
    font-weight:700;
}

#cms-contact-form input,
#cms-contact-form textarea,
#cms-contact-form select{
    margin-bottom:0;
    border:1px solid transparent;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#cms-contact-form input:focus,
#cms-contact-form textarea:focus,
#cms-contact-form select:focus{
    border-color:#fff;
    box-shadow:0 0 0 3px rgba(255,255,255,.12);
    background:#f2f2f2;
}

#cms-contact-form .border-red-500{
    border-color:#ef4444 !important;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

#cms-contact-form .cms-field-error{
    min-height:0;
    margin:7px 0 0;
    color:#ff6b6b !important;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
}

#cms-contact-form .cms-form-alert{
    margin:0 0 22px;
    border-radius:10px;
    padding:14px 16px;
    text-align:left;
    line-height:1.5;
}

#cms-contact-form .cms-form-alert-error{
    background:rgba(127,29,29,.28) !important;
    border:1px solid #ef4444 !important;
    color:#fecaca !important;
}

#cms-contact-form .cms-form-alert-success{
    background:rgba(20,83,45,.28) !important;
    border:1px solid #22c55e !important;
    color:#bbf7d0 !important;
}

#cms-contact-form .cms-choice-group{
    display:grid;
    gap:10px;
}

#cms-contact-form .cms-choice{
    display:flex;
    align-items:center;
    gap:10px;
    color:#f5f5f5;
    text-align:left;
}

#cms-contact-form .cms-choice input[type="radio"],
#cms-contact-form .cms-choice input[type="checkbox"]{
    width:auto !important;
    min-width:18px;
    height:18px;
    margin:0;
    padding:0;
}

#cms-contact-form [hidden]{
    display:none !important;
}

@media (max-width:640px){
    .contact-box{
        padding:22px 18px;
    }

    .contact-box h2{
        font-size:34px;
        line-height:1.1;
    }

    #cms-contact-form{
        margin-top:24px;
    }

    #cms-contact-form input,
    #cms-contact-form textarea,
    #cms-contact-form select,
    #cms-contact-form button{
        font-size:16px;
        min-height:48px;
    }

    #cms-contact-form textarea{
        min-height:140px;
    }
}


/* Wedding Theme v1.1.0 — optional video section */
.wedding-videos-section{padding:90px 6vw;background:#f7f3ef;color:#201b18}
.wedding-videos-header{max-width:760px;margin:0 auto 38px;text-align:center}
.wedding-videos-header>span{display:inline-block;margin-bottom:10px;font-size:12px;letter-spacing:.18em;font-weight:700;text-transform:uppercase}
.wedding-videos-header h2{margin:0 0 12px;font-size:clamp(34px,5vw,64px);line-height:1.02;font-weight:500}
.wedding-videos-header p{margin:0 auto;max-width:650px;line-height:1.75;opacity:.72}
.wedding-video-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.wedding-video-card{min-width:0}
.wedding-video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#111;border-radius:2px}
.wedding-video-card.is-portrait{max-width:520px;justify-self:center;width:100%}
.wedding-video-card.is-portrait .wedding-video-frame{aspect-ratio:9/16}
.wedding-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wedding-video-card h3{margin:16px 0 5px;font-size:21px;font-weight:600}
.wedding-video-card p{margin:0;line-height:1.65;opacity:.68}
@media(max-width:760px){.wedding-videos-section{padding:64px 22px}.wedding-video-grid{grid-template-columns:1fr;gap:34px}.wedding-video-card.is-portrait{max-width:420px}}