/*
Theme Name: Seadrift 2025
Template: generatepress
Author: Studio Weeren
Author URI: https://studioweeren.com
Description: This is a child theme for GeneratePress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gpc
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, fixed-layout, responsive-layout, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/

/*

CONTENTS:
1. Defaults
2. Header and Nav
3. Home Page
4. Content
5. Components
6. Widgets
7. Footer
8. Other
9. Animations

*/

/* ==========================================
=! DEFAULTS
------------------------------------------ */

ol, ul {
    margin-left: 1.75em;
}

/* ==========================================
=! HEADER AND NAV
------------------------------------------ */
.main-navigation {
    /*a {*/
    /*    text-decoration: none;*/
    /*    border-radius: 8px;*/
    /*    position: relative;*/
    /*    overflow: hidden;*/
    /*    transition: 0.4s;*/
    /*    padding: 10px 0;*/
    /*}*/

    /*a::before {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    background-color: #3D638F0F;*/
    /*    opacity: 0;*/
    /*    border-radius: 4px;*/
    /*    transform: scale(0.8);*/
    /*    transition: all 0.2s;*/
    /*}*/

    /*a:hover::before {*/
    /*    opacity: 1;*/
    /*    transform: scale(1);*/
    /*}*/

    a {
        text-decoration: none;
        transition: 0.2s;
        position: relative;
        padding: 5px 0;
    }

    a::before {
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        background-color: rgb(61, 99, 143, 0.5);
        bottom: 0;
        left: 0;
        transition: width 0.2s;
    }

    a:hover::before {
        width: 100%;
    }
}

.site-header {
    position: relative;
    z-index: 200;
}

#sticky-navigation.navigation-stick,
#mobile-header.navigation-stick {
    transition: top 220ms ease, box-shadow 220ms ease;
}

body.gpc-scroll-up #sticky-navigation.navigation-stick,
body.gpc-scroll-up #mobile-header.navigation-stick {
    top: 0 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    opacity: 1;
    visibility: visible;
}

body.gpc-scroll-down:not(.slide-opened) #sticky-navigation.navigation-stick:not(.toggled),
body.gpc-scroll-down:not(.slide-opened) #mobile-header.navigation-stick:not(.toggled) {
    top: calc(-1 * var(--gpc-sticky-nav-height, 80px)) !important;
}

/* ==========================================
=! HOME PAGE
------------------------------------------ */



/* ==========================================
=! CONTENT
------------------------------------------ */

/* --- search results --- */
.gpc-search-query-term {
    background-color: var(--highlight);
}
.gpc.search-results .site-main > .dynamic-content-template {
    margin-bottom: 0;
}

/* ==========================================
=! COMPONENTS
------------------------------------------ */
/* Home page hero video */
/* 1. Set the container height */
.inside-page-hero {
    position: relative;
    width: 100%;
    height: 100vh;       /* Fallback for older browsers */
    height: 100dvh;      /* "Dynamic" Viewport Height - fixes mobile address bar jumping */
    overflow: hidden;    /* Prevents scrollbars if video bleeds out */
}

/* 2. Make the wrapper fill the container */
.video-hero {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 3. The Magic: Center and Cover the video */
.bg-video {
    animation: fade-in 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Ensures video fills screen without stretching */
    object-position: center; /* Centers the video content */
    z-index: 0;
}

/* 4. Center the text overlay */
.video-overlay {
    position: relative;
    z-index: 1;            /* Ensures text sits ON TOP of video */
    height: 100%;
    width: 100%;

    /* Flexbox for perfect centering */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical Center */
    align-items: center;     /* Horizontal Center */
    text-align: center;

    /* Optional: Darken video slightly so text pops */
    /*background-color: rgba(0, 0, 0, 0.3);*/
}

/* Desktop: Natural Height Override */
@media (min-width: 769px) {

    /* 1. Reset the container to shrink-wrap the content */
    .inside-page-hero,
    .video-hero {
        height: auto !important;
        min-height: auto;
        padding-bottom: 0; /* Remove any aspect ratio hacks if you added them */
        overflow: hidden;  /* clean up edges */
    }

    /* 2. The Video becomes the "Boss" of the height */
    .bg-video {
        position: relative; /* It now takes up physical space */
        width: 100%;
        height: auto;       /* Natural height based on video file */
        object-fit: contain;
        z-index: 0;
        display: block;     /* Removes tiny gap at bottom of video */
    }

    /* 3. The Overlay floats ON TOP of the video */
    .video-overlay {
        position: absolute; /* Taken out of flow */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;       /* Matches the video's height exactly */
        justify-content: center; /* Keeps flex centering working */
        align-items: center;
    }
}

/* Buttons */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
.btn,
.btn:visited {
    font-family: Poppins, sans-serif;
    cursor: pointer;
    padding: 9px 24px;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Button Sizes */

.btn.btn-small {
    padding: .25rem 1rem !important;
}

.btn.btn-big {
    padding: 1rem 2.5rem !important;
    text-transform: uppercase;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    border: 1px solid #fff;

    &:hover {
        background: var(--blue-dark);
        color: white;
        text-decoration: none;
    }
}

.btn.btn-narrow {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--blue-dark);
    color: white;
}

.btn-dark {
    background: var(--accent);
    color: white;
}

.btn-outline {
    background: var(--sand);
    color: var(--blue-dark);
    border-color: var(--blue-dark);
}

.btn-outline:hover {
    background: var(--accent);
    color: white;
    text-decoration: none !important;
}

/* Button Outline */

.btn.btn-outline,
.btn.btn-outline:visited,
.btn.btn-outline:hover,
.btn.btn-outline:active {
    border-width: 1px;
    border-style: solid;
}

.btn.btn-outline-reverse,
.btn.btn-outline-reverse:visited,
.btn.btn-outline-reverse:hover,
.btn.btn-outline-reverse:active {
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff;
    color: #fff;
}

.btn.btn-outline:disabled,
.btn.btn-outline.is-disabled {
    opacity: .5;
}

/* --- fixes potential theme css conflict --- */
.acf-map img {
    max-width: inherit !important;
}

/* --- responsive embed --- */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- breadcrumbs --- */
.breadcrumbs {
    font-size: 14px;
    margin-bottom: 10px;
}

/* ==========================================
=! WIDGETS
------------------------------------------ */

/* --- GPC Sub Menu Widget --- */
/* .widget_gpc_sub_menu_widget .dropdown-menu-toggle { display: none; } */
.widget_gpc_sub_menu_widget .menu-item-has-children .sub-menu { margin-left: 1.2em; }
.widget_gpc_sub_menu_widget .menu-item-has-children .sub-menu li { list-style: disc; }
.widget_gpc_sub_menu_widget .current-menu-item > a { font-weight: bold; }

/* ==========================================
=! FOOTER
------------------------------------------ */
#menu-social-media {
    list-style: none;
    font-size: 1.5rem;
    display: flex;
    margin: 0;
    gap: 20px;
}


/* ==========================================
=! OTHER
------------------------------------------ */

/* --- simple spacing utilities --- */
.m0 { margin:0 !important }
.mt0 { margin-top:0 !important }
.mr0 { margin-right:0 !important }
.mb0 { margin-bottom:0 !important }
.ml0 { margin-left:0 !important }
.p0 { padding:0 !important }
.pt0 { padding-top:0 !important }
.pr0 { padding-right:0 !important }
.pb0 { padding-bottom:0 !important }
.pl0 { padding-left:0 !important }

/* ==========================================
=! ANIMATION
------------------------------------------ */

/* --- do all the preload stuff --- */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .preload * {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
    /* opacity will be set back to 1 by animations below */
    .has-js .prep-animation,
    .has-js .prep-scroll-animation,
    .has-js .scroll-fade-in-bottom,
    .has-js .scroll-fade-in,
    .has-js .scroll-fade-in-left,
    .has-js .scroll-fade-in-right {
        opacity: 0;
    }
}

/* --- respect user preferences for motion --- */
@media screen and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @media (min-width: 768px) {
     .fade-in-left {
         -webkit-animation: fade-in-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
                 animation: fade-in-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
     }

     .fade-in {
         -webkit-animation: fade-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
                 animation: fade-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
     }

     .fade-in-bottom {
         -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
                 animation: fade-in-bottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
     }

     .fade-in-right {
         -webkit-animation: fade-in-right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
                 animation: fade-in-right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
     }
 }

/* --- animation fade-in-left --- */
@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}

/* --- animation fade-in --- */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* --- animation fade-in-bottom --- */
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(24px);
                transform: translateY(24px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(24px);
                transform: translateY(24px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}  

/* --- animation fade-in-right --- */
@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
  
  
/* --- delay classes --- */
.delay-100 {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}
.delay-200 {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}
.delay-300 {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}
.delay-250 {
    -webkit-animation-delay: 250ms;
    animation-delay: 250ms;
}
.delay-500 {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}
.delay-750 {
    -webkit-animation-delay: 750ms;
    animation-delay: 750ms;
}
.delay-1000 {
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}
.delay-1250 {
    -webkit-animation-delay: 1250ms;
    animation-delay: 1250ms;
}
.delay-1500 {
    -webkit-animation-delay: 1500ms;
    animation-delay: 1500ms;
}