/* ==========================================
   Base Styles
   Wedding Invitation 2026
========================================== */

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* Smooth Scroll */

html{
    scroll-behavior:smooth;
}

/* Body */

body{

    background:var(--background);

    color:var(--text);

    font-family:var(--font-body);

    overflow-x:hidden;

    min-height:100vh;

    line-height:1.7;

}

/* Selection */

::selection{

    background:var(--gold);

    color:white;

}

/* Links */

a{

    text-decoration:none;

    color:inherit;

}

/* Images */

img{

    display:block;

    max-width:100%;

}

/* Buttons */

button{

    font-family:inherit;

    border:none;

    outline:none;

    cursor:pointer;

    transition:var(--transition);

}

/* Lists */

ul{

    list-style:none;

}

/* Typography */

h1,
h2,
h3{

    font-family:var(--font-heading);

    font-weight:500;

    color:var(--text);

}

p{

    color:var(--text-light);

}

/* Container */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

/* Main */

main{

    position:relative;

    z-index:2;

}

/* Sections */

section{

    padding:var(--section-padding) 0;

}

/* Decorative Background */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:url("../svg/songket-pattern.svg");

    background-size:140px;

    opacity:.05;

    pointer-events:none;

    z-index:0;

}

/* Divider */

.divider{

    width:220px;

    margin:2rem auto;

}

/* Arabic */

.arabic,
.hero-arabic{

    font-family:var(--font-arabic);

    font-size:2rem;

    color:var(--gold-dark);

    text-align:center;

    margin-bottom:1.5rem;

}

/* Script Names */

.hero h1,
#cover h1{

    font-family:var(--font-script);

    font-size:var(--hero-name);

    font-weight:400;

    line-height:1.2;

    text-align:center;

}

.hero h1 span,
#cover h1 span{

    display:block;

    font-size:3rem;

    color:var(--gold);

    margin:.5rem 0;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F6F1EA;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold-dark);

}

.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:opacity .8s ease, visibility .8s ease;

}

.visible{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transition:opacity .8s ease, visibility .8s ease;

}