/*
Theme Name:   SeedBuild-25
Theme URI:    https://www.linnflux.com/
Description:  SeedBuild-25 by WordFlux. Custom business theme.
Author:       Linnflux, Inc.
Author URI:   https://www.linnflux.com/
Template:     twentytwentyfive
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  seedbuild-25
Tags:         custom-background, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Custom Styles
   ========================================================================== */

/* Add your custom CSS below this line */

/* *********************
*** WordFlux Fade Up Animation **/

/* 1. Initial State (Hidden & Pushed Down) */
.wordflux-fade-up {
    opacity: 0;
    transform: translateY(180px); /* Starts lower than natural position */
    
    /* Smooth transition for when the class is added */
    transition: opacity 0.8s ease-in, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Optional: Hardware acceleration for smoother text rendering */
    will-change: opacity, transform;
}

/* 2. Active State (Triggered by JS) */
.wordflux-fade-up.in-view {
    opacity: 1;
    transform: translateY(0); /* Slides up into place */
}


/* *********************
*** Liquid Wave Button (Strict Fix) **/

/* 1. The Container (The Link Itself) */
.wp-block-button.is-style-liquid-wave .wp-block-button__link {
    /* FORCE the container to trap the liquid */
    position: relative !important;
    overflow: hidden !important;

    /* "Hardware Acceleration" trick to fix the overflow leak */
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */

    /*font-family: 'Righteous', cursive !important;*/
    padding: 20px 30px !important;
    text-decoration: none;
    border: none;
    border-radius: 4px; /* Optional: Adjust roundness */

    /* Ensure it behaves like a box, not text */
    display: inline-block !important;

    /* Clean slate for background */
    background-color: transparent !important;
    color: white !important;
    z-index: 1; /* Establishes stacking order */
}

/* 2. Text Span (Created by JS) */
.wp-block-button.is-style-liquid-wave .wp-block-button__link span.liquid-text {
    position: relative;
    z-index: 10; /* Ensures text is always on top */
    color: white;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none; /* Allows clicks to pass through text to the button */
}

/* 3. The Wave Container (Base Background) */
.wp-block-button.is-style-liquid-wave .wave {
    width: 300px; /* Made wider to cover long text */
    height: 300px; /* Made taller for smoother animation */

    background-color: #0442bb; /* Main Blue */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.3);

    position: absolute;

    /* Center the wave horizontally relative to the button */
    left: 50%;
    transform: translateX(-50%);

    /* Start position: Sitting low */
    top: -120px;

    z-index: 0; /* Sits behind text */
    transition: 0.4s;
    pointer-events: none; /* Prevents wave from blocking clicks */
}

/* 4. HOVER STATE: The Lighter Waves (They fly away) */
/* The dark blue container (.wave) stays put! */
.wp-block-button.is-style-liquid-wave .wp-block-button__link:hover .wave {
    top: -120px; /* Stays static */
}

.wp-block-button.is-style-liquid-wave .wp-block-button__link:hover .wave::before,
.wp-block-button.is-style-liquid-wave .wp-block-button__link:hover .wave::after {
    top: -200px; /* Fly up and away */
}

/* 5. The Rotating Blobs (Base Definition) */
.wp-block-button.is-style-liquid-wave .wave::before,
.wp-block-button.is-style-liquid-wave .wave::after {
    width: 200%;
    height: 200%;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    /* Combine the centering with the rotation anchor */
    transform: translate(-50%, -75%);

    transition: top 0.6s ease-in-out;
}

/* LIGHTER WAVE 1 */
.wp-block-button.is-style-liquid-wave .wave::before {
    border-radius: 45%;
    background-color: #2a62e6;
    animation: waveSpin 5s linear infinite;
}

/* LIGHTER WAVE 2 */
.wp-block-button.is-style-liquid-wave .wave::after {
    border-radius: 40%;
    background-color: rgba(75, 135, 255, 0.4);
    animation: waveSpin 10s linear infinite;
}

@keyframes waveSpin {
    0% { transform: translate(-50%,-75%) rotate(0deg); }
    100% { transform: translate(-50%,-75%) rotate(360deg); }
}

.-mb-10 {
  margin-bottom: -10rem;
}

.z-10 {
  position: relative;
  z-index: 10;
}

/*** Background Image ***/
.wp-site-blocks {
  background-image: url(wp-content/uploads/2026/01/sotiris_bg_whiter_carbon.webp);
  background-repeat: repeat;
}

/* *********************
*** Liquid Sticky Head (Opacity Fix) **/

/* 1. Base Header Setup */
header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: transparent;
    transition: padding 0.3s ease;
}

/* 2. The Solid Blue Body (::before) */
header.wp-block-template-part::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0442bb;
    z-index: -1;

    /* Animation: Slide down */
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. The Wave Edge (::after) */
header.wp-block-template-part::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
    z-index: -1;

    /* Stitching: Overlap by 1px to prevent gaps */
    margin-top: -1px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%230442bb'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    /* INITIAL STATE: Hidden & Invisible */
    /* 1. Move it up so it follows the body */
    transform: translateY(calc(-100% - 15px));
    /* 2. Make it invisible so it doesn't peek out on load */
    opacity: 0;

    /* EXIT TRANSITION (When scrolling UP) */
    /* Transform stays 0.5s to match the blue body sliding up */
    /* Opacity is FAST (0.15s) so it vanishes immediately */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease-out;
}

/* 4. The Active "Scrolled" State */
header.wp-block-template-part.scrolled::before {
    transform: translateY(0);
}

header.wp-block-template-part.scrolled::after {
    transform: translateY(0);
    opacity: 1;

    /* ENTRY TRANSITION (When scrolling DOWN) */
    /* Transform stays 0.5s to match the blue body sliding down */
    /* Opacity is SLOW (0.9s) as you requested */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.9s ease-in;
}
/* *******************
*** Slider Styles ***/

.metaslider .slides li {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Force captions to use the full width of the slide box */

.metaslider .caption-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 !important; /* Adjusts the space around the text */
    box-sizing: border-box !important;
}

/* Ensure text doesn't wrap prematurely */

.metaslider .caption {
    display: block !important;
    text-align: center; /* Matches your current design style */
    word-wrap: break-word;
}

/************************/


.info-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* *********************
*** Priority Wrapper Stagger **/

/* 1. Base Container Setup (Optional but recommended) */
.priority-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Adds space between the items */
    max-width: 1000px; /* Adjust based on your design */
    margin: 0 auto; /* Centers the wrapper itself */
}

/* 2. Odd Children: Shift Right */
.priority-wrapper > :nth-child(odd) {
    transform: translateX(30px);
}

/* 3. Even Children: Shift Left */
.priority-wrapper > :nth-child(even) {
    transform: translateX(-30px);
}

/* 4. Mobile Reset (Important!) */
/* Removes the shift on screens smaller than 768px so items stay centered */
@media (max-width: 768px) {
    .priority-wrapper > :nth-child(odd),
    .priority-wrapper > :nth-child(even) {
        transform: translateX(0);
    }
}



/* *********************
*** Subpage Header: Match Homepage Scrolled Look **/
/* The subpage uses an inline group block (not <header>), so we target
   the .is-position-sticky wrapper and its .has-secondary-background-color child. */

/* 1. Push nav links to the right (match homepage space-between) */
body:not(.home) .wp-site-blocks > .is-position-sticky .is-layout-flex {
    justify-content: space-between !important;
}

/* 2. Ensure the outer sticky wrapper can show the wave below it */
body:not(.home) .wp-site-blocks > .is-position-sticky {
    overflow: visible !important;
    z-index: 100;
}

/* 3. Add the SVG wave below the blue bar */
body:not(.home) .wp-site-blocks > .is-position-sticky > .has-secondary-background-color {
    position: relative;
}

body:not(.home) .wp-site-blocks > .is-position-sticky > .has-secondary-background-color::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
    z-index: 1;
    margin-top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 120%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z%27 fill=%27%230442bb%27/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 4. Push nav items to the right within the nav container */
body:not(.home) .wp-site-blocks > .is-position-sticky .wp-block-navigation {
    justify-content: flex-end !important;
}

/* 5. Constrain subpage header content to match homepage alignwide (1200px) */
body:not(.home) .wp-site-blocks > .is-position-sticky > .has-secondary-background-color {
    padding-left: max(var(--wp--preset--spacing--50), calc((100vw - var(--wp--style--global--wide-size)) / 2)) !important;
    padding-right: max(var(--wp--preset--spacing--50), calc((100vw - var(--wp--style--global--wide-size)) / 2)) !important;
}