/* style.css */

/*
#F1E5AC : Light Gold
#906E3E : Khaki Brown
#b99268 : h1-h4 colors
#F0FFF0 : Honey Dew light green border
*/

html {
    background:#F0FFF0;
    border: 10px solid transparent;
    border-image: url("resources/darkgreylace2.png") 17 round;
}

body {
    font-family: serif;
}
header {
    background-color: #e9ecef;
    background-size:cover; 
    /* background-position:center; */
    border-bottom:1px solid #906E3E;
    margin-bottom:0;
}
header h1 {
    font-size:5rem;
    color:#fff;
    text-shadow:1px 1px 10px #333, 1px 1px 10px #000;
}
header h2 {
    font-size:3rem;
    color:#fff;
    text-shadow:1px 1px 10px #333, 1px 1px 10px #000;
}
footer {
    border-top: 4px solid transparent;
    border-image: url("resources/darkgreylace2.png") 17 round;
}

#hilsen {
    font-style:italic;
}




/** HEART */
img.heart {
    width: 400px;
    max-width:90%;
    aspect-ratio: 1;
    object-fit: cover;
    --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
    -webkit-mask-box-image: var(--_m);
                mask-border: var(--_m);
    clip-path: polygon(-41% 0,50% 91%, 141% 0);
    outline: 100vmax transparent;
    outline-offset: -100vmax;
    transition: .7s;
    cursor: pointer;
}
img.heart:hover {
    outline: 100vmax solid #ff3e60;
    outline-offset: -100vmax;
}



/** CARDS */
.card {
    border: 4px solid transparent;
    border-image: url("resources/darkgreylace2.png") 17 round;
}




/** BG FOR MAIN PAGES */
#forsiden, #endelig-gift, #praktisk-info, #kart, #program, #reisetips, #galleri, #gjestebok {
    background: rgb(255,249,241);
    background: linear-gradient(180deg, rgba(255,249,241,1) 0%, rgba(230,202,174,1) 100%);
}
#endelig-gift, #praktisk-info, #kart, #program, #reisetips, #galleri, #gjestebok {
    padding-top:50px;
}


.programliste ul {
    margin:0;
    padding:0;
}
.programliste li {
    background:rgba(0,0,0,0.1);
    border-radius:30px;
    padding:10px;
    /* list-style:"\2665"; */
    list-style:none;
    margin:0;
}
.programinnlegg {
    /*background:rgba(255,255,255,0.3);*/
    background:rgba(0,0,0,0.8);
    color:#fff;
    /* color:#b99268; */
    text-shadow:1px 1px 1px #333;
    float:left;
    width:70%;
}
.programinnlegg-img {
    float:right;
    width:30%;
}
.programinnlegg-img img {
    height:300px;
    width:100%;
}
@media (max-width: 768px) {
    .programinnlegg {
        background:rgba(0,0,0,0.5);
        width:100%;
        /* width:70%; */
    }
    .programinnlegg-img {
        display:none;
        width:100%;
    }
    .programinnlegg-img img {
        height:auto;
        width:auto;
        max-height:100px;
    }
}
/* .programliste li:before {
    content: "\2665";
    color: #9c5597;
} */
/* .programliste li img {
    border-radius:30px;
} */

.galleryimage {
    display:block;
    height:200px;
    background-size:cover;
    background-position: center;
    background-color:#111;
    cursor:pointer;
}
.galleryimage:hover {
    background-size:contain;
    background-repeat: no-repeat;
}
/* bootstrap md */
@media (max-width: 992px) {
    .galleryimage {
        height: 140px;
    }
}
/* bootstrap sm */
@media (max-width: 768px) {
    .galleryimage {
        height: 120px;
    }
}
/* bootstrap xs */
@media (max-width: 576px) {
    .galleryimage {
        height: 90px;
    }
}


.galleryimage {
    position: relative;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* semi-transparent dark overlay circle */
.galleryimage .video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* lets clicks pass to the gallery item */
}

/* white play triangle */
.galleryimage .video-overlay .play-icon {
    color: white;
    font-size: 24px;
}



/* .carousel-item img,
.carousel-item video {
    max-width: 90vw; 
    max-height: 90vh; 
    margin: auto;
    object-fit: contain;
    align-items: center;
    justify-content: center;
}
.carousel-item {
    transition: transform 0.3s ease-in-out !important;
} */

.carousel-item {
    height: 90vh; /* Ensure full height */
    text-align: center; /* Center content */
    transition: transform 0.2s ease-in-out;
}

.carousel-item img,
.carousel-item video {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    margin: auto;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center properly */
}




/** SLIDESHOW */
#forsiden .carousel-item img {
    border: 6px solid transparent;
    border-image: url("resources/darkgreylace2.png") 17 round;
}


/** TEXT STYLING */
h1, h2, h3 {
    color:#b99268;
    text-shadow:1px 1px 1px #333;
}
.font-greatvibes {
    font-family: "Great Vibes", serif;
    font-weight: 400;
    font-style: normal;
}
.font-oohbaby {
    font-family: "Oooh Baby", serif;
    font-weight: 100;
    font-style: normal;
}
ul.programliste li {
    margin-top:20px;
    /* text-shadow:1px 1px 1px #999; */
}
ul.programliste li b {
    color:#634e37;
    /* text-shadow:1px 1px 1px #999; */
}




/** NAV */
.bg-nav-custom {
    background:rgba(255,255,255,0.9);
}
a.nav-link {
    font-size:1.2rem;
}
a.nav-link:hover {
    color:#906E3E;
}
.navbar-brand {
    margin-right:40px;
    font-size:1.8rem;
}
/** MISC LINKS */
a {
    color:#000;
}
a:hover, a:focus, a:active {
    color:#906E3E;
}



/** Confetti */
.confetti {
    position: fixed;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--confetti-color, red);
    opacity: 0.8;
    border-radius: 50%;
    animation: fall linear infinite;
}
@keyframes fall {
    0% {
        transform: translateY(0) translateX(0);
    }
    100% {
        transform: translateY(100vh) translateX(var(--confetti-x, 0px));
    }
}