/* Root Variables */
 :root {
    --color-olive: #443E1E;
    --color-terra: #D76C40;
    --color-sand: #EEA24C;
    --color-plum: #935172;
    --color-deep-red: #620B10;
    --color-walnut: #5F3824;
    --color-ebony: #1D1009;
    --color-cream: #FFF4DF;
    --color-shady: #F6EBD6;
/* Specific Variables */
    /* colors */
    --primary: var(--color-terra);
    --background: var(--color-cream);
    --on-background: var(--color-ebony);
    --surface: var(--color-terra);
    --on-surface: var(--color-cream);
    --surface-variant: var(--color-terra);
    --on-surface-variant: var(--color-ebony);
    --surface-highlight: var(--color-plum);
    --surface-highlight-variant: var(--color-olive);
    --on-surface-highlight: var(--color-cream);
    /* spacing */
    --spacing-xs: 4px;
    --spacing-s: 16px;
    --spacing-m: 24px;
    --spacing-l: 40px;
    --spacing-xl: 80px;
    --spacing-2xl: 120px;
    /* Device */
    --wrapper: 1400px;
    --full-width: 100%;
    /* Grid */
    --margin: 16px;
    
}
/* Global Styles */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
    background: var(--background);
    color: var(--on-background);
    scroll-behavior: smooth;
}

html {
    height: 100vh;
}

body {
    font-size: 18px;
}


::selection {
    color: var(--color-cream);
    background: var(--color-ebony);
}

::-moz-selection {
    color: var(--color-cream);
    background: var(--color-ebony);
}

/* Typography */
h1, h2, h3, button, .button {
    font-family: 'Abygaer', Georgia, serif;
    font-weight: 550;
}
p, h4, h5, .form-row, .radio-group label, .faq h3 {
    font-family: "Playfair Display", serif;

}
h1 { font-size: clamp(5rem, 9vw, 45rem); margin: 0; line-height: 90%;}
h2 {font-size: 3rem; margin: 0;}
h3 {font-size: 1.5rem; margin: 0;}
h4 {font-size: 1rem; margin: 0;}

p {margin: 0; line-height: 150%;}


/* Typography - Custom */
span.w {letter-spacing: -7px;}
p.preamble,
.cta,
.cta-variant {
    font-size: 1.3rem;
}

.outro h1 {
    font-size: 10rem;
}

.content h2 {
    margin-bottom: var(--spacing-l);
}

.content h3 {
    margin-bottom: var(--spacing-s);
}

.content p {
    margin-bottom: var(--spacing-m);
}
.content p.preamble {
    margin-bottom: var(--spacing-m);
}
.content h4 {
    margin-top: var(--spacing-l);
    margin-bottom: var(--spacing-xs);
}

.time {
    font-size: 1.1rem;
}

/* Flex */
.flex {display: flex;}
.row {flex-direction: row;}
.column {flex-direction: column;}
.middle {
    justify-content: center;
    align-items: center;
}
.col-reverse {
    flex-direction: row;
}
.bottom {
    justify-content: flex-end; 
    align-items: flex-end; 
}

/* Layout */
.center {margin: 0 auto;}
.gap {gap: var(--spacing-2xl);}
.col-1-2 {max-width: 50%;}

/* Sizes */
.full-w {width: var(--full-width);} 
.max-w {width: var(--wrapper);}

.main {
    max-width: var(--wrapper);
    padding-bottom: var(--spacing-2xl);
}

/* Links */
a {
    text-underline-offset: 3px;
    transition: color 0.5s ease;
    font-size: 1.1rem;
    color: var(--on-background);
}
a:hover {
    color: var(--surface-variant);
}
a.inline {
    color: var(--on-background);
}
a.inline:hover {
    color: var(--surface);
}

a.mail {
    padding-top: var(--spacing-m);
    color: var(--on-surface-highlight);
    display: block;
    font-size: 1.2rem;
    width: auto;
    max-width: fit-content;
}

a.mail:hover {
    color: var(--surface);
}

a.anchor {
    display: block;
    position: relative;
    top: -350px;
    visibility: hidden;
}
a.external::after {
  content: " ↗";
  font-size: 0.85em;
  vertical-align: middle;
  text-decoration: none;
}


/* Sections */
.hero {
    color: var(--on-surface);
    text-align: center;
    height: 80vh;
    width: var(--full-width);
    background-image: url(../img/hero.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: var(--primary);
}

.outro {
    color: var(--on-surface);
    text-align: center;
    height: 60vh;
    width: var(--full-width);
    background-image: url(../img/hero.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: var(--color-sand);
}
.content {
    width: 50%;
}
.text-block {
    gap: 10%;
}

.right,
.left {
    padding-right: var(--spacing-2xl);
}

.cta,
.cta-variant {
    width: 100%;
    border-radius: 40px;
    justify-content: left;
    padding: var(--spacing-xl);
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    color: var(--on-surface-highlight);
    background-attachment: fixed;
}
.cta {
    background-color: var(--surface-highlight);
    background-image: url('../img/cta.webp');
}
.cta-variant {
    background-color: var(--surface-highlight-variant);
    background-image: url('../img/cta2.webp');
}

.intro {
            font-size: 1.5rem;
}
.date img {
            max-width: 80%;
        }

.full-width-image {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


.full-width-image img {
    width: 100%;
    object-fit: cover;
}

.faq {
    max-width: 80%;
    margin: 0 auto; 
}
.faq-item {
    margin-bottom: var(--spacing-s);
    border-radius: 16px;
    background-color: var(--color-shady);
    padding: var(--spacing-s);
}
.faq h2 {margin-bottom: var(--spacing-m);}
.faq h3 {
    font-size: 1.2rem;
}
.faq-header {
    cursor: pointer;
    padding: var(--spacing-m) 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    
}

.faq-content {
    display: block;
    max-height: none;
    overflow: visible;
    padding: var(--spacing-s) var(--spacing-m);
    width: 70%;
}
.faq-content p {
    margin: 0;
    padding: var(--spacing-s) var(--spacing-m);
}
.faq-content p::last-child {margin: 0;}
.faq-item.active .faq-content {max-height: 1000px;}



/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: transform, opacity;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* Gift */
    .gift-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10001;
      
    }

    .gift-content {
      animation: fadeInUp 0.4s ease-out;
      background-color: white;
      width: 400px;
      border-radius: var(--spacing-l);
      text-align: center;
    }



    .gift-content img {
      width: 400px;
      height: 400px;
      display: block;
      border-radius: var(--spacing-l);
      
    }

    .gift-content p {
        padding: var(--spacing-l) 0;
    }


/* MENU */
.menu {
    position: fixed;
    top: -120px; /* Start hidden */
    left: 0;
    width: 100%;
    background: var(--color-ebony);
    color: var(--color-cream);
    padding: var(--spacing-l) var(--spacing-2xl);
    transition: top 0.5s ease-in-out;
    z-index: 1000;
}
.menu nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--wrapper);
    margin: 0 auto;
}
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-xl);

        text-align: left;
        width: 100%;
 
    
}
.nav-links li {display: inline;}
.nav-links li a {
    color: var(--color-cream);
    text-decoration: none;
    font-size: 1.2rem;
}
.nav-links li a:hover {
    color: var(--surface-variant);
}
.menu button {
    position: absolute;
    right: 0px;
}
.menu.show {top: 0;}
.modal .close {
    position: absolute;
    top: var(--spacing-m);
    right: var(--spacing-m);
    font-size: 1.2rem;
    color: var(--on-background);
    cursor: pointer;
    z-index: 100;
}
.modal-message {
     margin-bottom: var(--spacing-m);
}

#form-container > div {
    margin-bottom: var(--spacing-l); /* Justera efter behov */
    background-color: var(--color-shady);
    padding: var(--spacing-l);
    border-radius: 16px;
    display: flex;
    flex-direction: col;
}
/* Form */
.radio-group {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}  
.form-row {
    border: 1px solid transparent;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0.5rem;
}  
.form-row input[type="text"] {
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--on-background);
    background-color: var(--color-shady);
    max-width: 50%;
}  
.form-row label {
    font-weight: normal;
    margin-top: 0.4rem;
}
.delete-btn {
    display: inline-block;
    text-decoration: none;
    margin-top: var(--spacing-l);
    width: auto;
    max-width: fit-content;
    color: red;
}

.form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

body.modal-open {
overflow: hidden; /* Prevent scrolling */
height: 100dvh; /* Lock height */
height: 100vh; /* Lock height */
}



.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 10000;
left: 0;
bottom: 0;
width: 100%;
height: 100%;

background-color: rgba(0,0,0,0.8); /* Black background with opacity */
overflow: hidden; /* Prevents whole page from scrolling */
justify-content: center; /* Keep this inside JS when opening */
align-items: flex-end;
}

.modal-content {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
transition: transform 0.5s ease-out;

/* Enable scrolling */
width: 65vw; /* Ensure width is at least 85vw, max 600px */
max-height: 95vh; /* Limit height to viewport */
min-height: 65vh;
overflow-y: auto; /* Enable vertical scrolling if needed */
background-color: var(--background);
padding: var(--spacing-2xl);
border-radius: 16px 16px 0 0;
}

.modal-content.show {
transform: translateX(-50%) translateY(0); /* Moves it up */
}



input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 16px;
border: 1px solid;
border-color: var(--on-background);
background-color: var(--background);
}





/* BUTTONS */
button,
.button {
    padding: 16px 32px;
    border-radius: 150px;
    font-size: 1.4rem;
    cursor: pointer;
    text-align: center;
    font-weight: 750;
    text-decoration: none;

}

.on-background {
    background: var(--surface-highlight);
    color: var(--background);
    border: 0px;
}
.on-background:hover {
    color: var(--background);
    background: var(--on-background);
}
.on-background-variant {
    border: 1.4px solid var(--on-background);
    color: var(--on-background);
}
.on-background-variant:hover {
    color: var(--surface-highlight);
     border: 1.4px solid var(--surface-highlight);

}

.on-surface-variant {
    background: var(--surface-variant);
    color: var(--background);
    border: none;
}

.on-surface-variant:hover {
    background: var(--surface-highlight);
    color: var(--background);
}

.on-surface-highlight {
    background: var(--surface-highlight);
    color: var(--on-surface-highlight);
    border: 1.4px solid var(--on-surface-highlight);
}
.on-surface-highlight:hover {
    color: var(--surface-highlight);
    background: var(--background);
}
/* Images */
.fill {
    position: relative;
    width: 50%;
    min-height: 500px; /* Keeps the minimum height */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    overflow: hidden;
}
    
.fill img {
    width: 100%;
    max-height: 100%; /* Image adapts to the height of .fill */
    max-width: 100%;  /* Prevents it from exceeding .fill's width */
    object-fit: contain; /* Keeps aspect ratio and fits within the container */
    border-radius: 16px;
}




/* Responsive Styles */
@media (max-width: 1500px) { 
    /* Sizes */
    .main {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
    .menu nav {
        width: 100%;
    }
    .outro h1 {
    font-size: 4rem;
}

}
@media (max-width: 1024px) { 
    /* Global Styles */

    #navbar {display: none;}
    /* Typography */
    h2 {font-size: 2.5rem; margin: 0; line-height: 130%;}
    h3 {font-size: 1.4rem; margin: 0;}
    h4 {font-size: 1rem; margin: 0;}

    /* Typography - Custom */
    span.w {
        letter-spacing: -4px;
    }

    /* Flex */
    .row {flex-direction: column;}
    .col-reverse {
        flex-direction: column-reverse;
    }
    .bottom {
        justify-content: flex-start; 
        align-items: flex-start; 
    }

    /* Layout */
    .gap {gap: var(--spacing-l)}
    .col-1-2 {max-width: 100%;}


    /* Sizes */
    .max-w {width: var(--full-width)}

    /* Gift */
    .gift-content {
        width: 70%;
    }
        .gift-content img {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }

    /* Sections */
    .main {
        width: var(--full-width);
        padding: 0 var(--spacing-m);
    }
    .hero {
        height: 72vh;
    }
    .content {
        width: 100%;
    }
    .left,
    .right {
        padding-left: 0;
        padding-right: 0;
    }
    .left {
        flex-direction: column-reverse;
    }
    .cta,
    .cta-variant {
        padding: var(--spacing-xl) var(--spacing-l);
    }
    .faq {
        max-width: 100%;
    }
    .faq-header h3 {
        margin-right: var(--spacing-l);
    }
    .faq-content {
        width: 100%;
    }

    .hero,
    .outro,
    .cta,
    .cta-variant {
        background-attachment: scroll;
    }
    

    .nav-links {display: none;}
    
    .menu {
        position: fixed;
        top: -140px; /* Start hidden */
        padding: var(--spacing-m)  var(--spacing-l);
    }
    .menu button {
        position:relative;
        width: 100%;
    }

    .modal-content h2 {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-s);
    }
    .modal-content {
        width: 100vw;
        height: calc(100vh - 100px); /* Full height on mobile */
        max-height: 100vh;
        border-radius: 0;
        padding: 20px;
    }
    
    /* Date */
    .date {
        justify-content: flex-end; 
        align-items: flex-end; 
        flex-direction: column;
        min-height: 100px;
        width: 100%;
        height: auto; 
        margin: 0 auto;
        background-image: url('img/date.png');
        background-repeat: no-repeat;
        background-position: top left;
        background-size: auto 100%;
        padding: 0;
    }
    .date-content {
        width: 100%; height: 100%; padding-top: var(--spacing-xl);
    }
    .date img {
            max-width: 100%;
        }
    /* Form */
    .form-row input[type="text"] {
        max-width: 100%;
    }  
    .form-buttons {
        display: flex;
        justify-content:left;
        flex-direction: column;
        gap: var(--spacing-s);
        align-items: flex-start;
        margin-top: 2rem;
    }

    .form-buttons button,
    .form-buttons .on-background-variant {
        width: 100%;
    }
    /* Buttons */
    /* Images */
    .fill {
        width: 100%;
        padding-bottom: var(--spacing-m);
    }
}