/*
Theme Name: twentytwentyfive-child
Theme URI: http://aequina.com/twentytwentyfive-child/
Description: Child theme for TwentyTwentyFive
Author: Pixelscape
Author URI: http://pixelscape.ca
Template: twentytwentyfive
Version: 1.0.0
*/



/* Nunito Sans (Normal) */
@font-face {
    font-family: 'Nunito Sans';
    src: url('fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
    font-weight: 200 1000;
    font-style: normal;
}

/* Nunito Sans (Italic) */
@font-face {
    font-family: 'Nunito Sans';
    src: url('fonts/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
    font-weight: 200 1000;
    font-style: italic;
}

/* Rubik (Normal) */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/Rubik-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-style: normal;
}

/* Rubik (Italic) */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-style: italic;
}

/* Apply main font to site body */
body {
    font-family: 'Nunito Sans', sans-serif;
}

/* Optional: headings use Rubik */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Rubik', sans-serif;
}

/*HIDE ELEMENTS WITH THIS CLASS*/
.nav_hidden{
    display: none !important;
}

.hero-title{
    font-size: var(--wp--preset--font-size--large);
}

.hero_button{
    min-width: 120px;
}

/*Animation classes.*/
.animated { 
    opacity: 0; 
    transform: translateX(-50px); 
    transition: 800ms ease; 
    
} 
.fade-anim { 
    transform: translateX(0); 
    opacity: 1; 
    
}


/*Home classes*/
.home_newsletter{
    background: rgba(21, 56, 79, 0.29);
box-shadow: 0px 2px 8.9px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(5.65px);
}

.video_container{
    max-height: 720px;
}

.hero_text_content{
    
        padding-bottom: 0px;
    }

.hero_image_mobile{
        min-width: 50%;
    display: grid;
    justify-content: center;
}
.hero_image_desktop{
    display: none;
}
.hero_button_container{
  width: 100%;
  max-width: 300px;
}
.hero_button_image{
    min-width:100%;
}

.hero_button{
    min-width: 100%;
}



.introducing_Ioneq_callout{
    position: relative;
    top: 38px;
    left: 0;
    grid-column: 1 / span 8;
    z-index: 1;
}

.introducing_ioneq_glass{
    position: relative;
    top: -20%;
}
.introducing_ioneq_glass_effect{
    background: rgba(217, 217, 217, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0px 2px 8.9px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5.65px);
}



/* Card shell (keep as-is) */
.protocol-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 2px 14px rgba(0,0,0,.12);
  padding:24px;
  display:grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  gap:32px;
  width: 100%;
}

#protocol-content{
     min-width: 100%;
}

.protocol-left  { grid-column: 1; 
}
.protocol-right { grid-column: 2; 
}
/* Divider */
.protocol-card{ position:relative; }
.protocol-card::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left: calc(100% * 1.6 / (1.6 + 1)); /* split point */
  width:1px; background: rgba(0,0,0,.1);
  transform: translateX(16px);
  pointer-events:none;
}


/* Find the first two direct children inside the card and treat them as columns */
.protocol-card > * {
  /* nothing */
}

/* Desktop: grid split even if you didn’t add protocol-split */
@media (min-width: 900px){
  .protocol-card{
    display:grid;
    grid-template-columns: 1.6fr 1fr; /* ~62/38 */
    gap:32px;
    position:relative;
    max-width: 1000px;
  }
  .protocol-card::after{
    content:"";
    position:absolute; top:0; bottom:0;
    left:calc((100% * 1.6 / 2.6));  /* divider at the split */
    width:0px; background:rgba(0,0,0,.08);
    transform:translateX(16px);
    pointer-events:none;
  }
}

/* Mobile stack */
@media (max-width: 899.98px){
  .protocol-card{
    display:block;
  }
  .protocol-card::after{ display:none; }
  .protocol-card > * + *{
    margin-top:20px; padding-top:20px; border-top:1px solid rgba(0,0,0,.08);
  }
}

/* Left heading accent (works without extra class) */
.protocol-card h4{ margin:0 0 12px; padding-bottom:10px; position:relative; }
.protocol-card h4::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:#1a9aa6; border-radius:2px;
}

/* List styling — add this class to your List if you can; otherwise it will still look okay */
.protocol-card .protocol-accordion,
.protocol-card ul{
  list-style:none;
  margin:12px 0 0;
  padding:0;
}
.protocol-card .protocol-accordion > li,
.protocol-card ul > li{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.1);
  display:flex; align-items:center; gap:10px;
}
.protocol-card .protocol-accordion > li:last-child,
.protocol-card ul > li:last-child{ border-bottom:none; }
.protocol-card .protocol-accordion > li::before,

/* Panel area spacing */
.protocol-card .protocol-panel-title{ margin:0 0 8px; }
.protocol-card .protocol-panel-body{ margin:0; line-height:1.6; }

/* Hide the desc LIs on the left when JS is active */
.protocol-accordion.js-enhanced li.protocol-desc { display: none; }

/* Make only the title LIs look clickable/active */
.protocol-accordion li.protocol-title { cursor: pointer; }
.protocol-accordion li.protocol-title[aria-selected="true"] { color:#0b6a73; font-weight:600; border-bottom: 2pt solid #0b6a73;}

/*Custom css for signup form 1  */

.newsletter_background{
    min-width: 100%;
}

.highlighted{
    display: block;
    background-color: #F6C453;
    width: auto;
    margin: 0;
    padding: 4px;
    color: black;
}

.contact_us_banner{
box-shadow: 0px 1px 10.3px rgba(0, 0, 0, 0.25);
grid-template-columns: 1fr;
}

.contact_us_btn{
    width: 100%;
}

.contactus_btn > a{
padding: 24px;
}


.contact_us_image_destop{
    display: none;
}

@media(min-width:370px){
    .partner_container{
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

@media (min-width: 420px){ 
   .homepage_callout_one{
       height: calc(100%);}
}

@media(min-width: 600px){
     .hero-title{
    font-size: var(--wp--preset--font-size--xx-large);
}
.hero-text-logo-container{
    display: flex;
     flex-direction: row;
}
    .product_callout_two{
         grid-template-columns: 1fr 1fr;
             min-width: 100%;
    gap: 0px;
        align-items: center;
    }
    
    .is-layout-grid > 
    .product_two_image{
        margin-right: -65px;
    }
    
    .product_card_info{
        top: 0;
        padding: 32px;
    }
    .wp-container-content-1c6a7fd7 {
    flex-basis: auto;
    }
    
    .home_newsletter{
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6%;
    }
}


@media(min-width:700px){
    .svg_background_container{
        padding-top: 40px;
    }
    
    
    .introducing_ioneq{
    margin: 72px 0px 56px 0px;
    position: relative;
    min-width: 100%;
}

    .introducing_ioneq_image_text__container{
        grid-column: 3 / span 9;
    }

    .introducing_Ioneq_callout{
            grid-column: 1 / span 4;
            top: -15px;
            height: fit-content;
            left: 0;
            position: absolute;
    }
    .contact_us_image_destop{
        display: block;
        position: relative;
        top: -45px;
    }
    .contact_us_image_mobile, .hero_image_mobile{
        display: none;
    }
    .hero_container{
        grid-template-columns: 1fr 1fr;
        margin-bottom: 24px;
    }
    .hero_text_content{
        padding: 32px;
        padding-bottom: 24px  !important;
    }
   .hero_image_desktop{
       display: block;
           justify-self: right;
    align-content: end;
    margin-left: 16px;
    padding: 0px 32px;
   }
   .hero_image_desktop video {
        object-fit: cover; /* Ensures the video covers the container */
        mix-blend-mode: multiply; /* Applies the multiply blend mode */
    }
    
    
    .contact_us_banner{
        grid-template-columns: 1fr 1fr;
        gap: 10%;
    }
    
      
    .contact_us_container{
        padding-top: 80px;
    }
    .contact_us_btn{
       max-width: 14em; 
    }
    
  }
  


  
    .contact_us_container{
        padding-top: 80px;
    }
    .contact_us_btn{
       max-width: 14em; 
    }
    

    @media(min-width:1090px){
        .hero_image_desktop{
                max-width: 60%;
        }
    }

/*BLOG PAGE*/
.wp-block-post-excerpt__more-link{
    text-decoration: none;
    padding: 12px 20px;
    text-align: center;
    background-color: #F6C453;
    border-radius: 24px;
    color: white;
    font-weight: 800;
    margin-right: 16px;
    /* width: 100%; */
    
}

ul.blog_list{
    grid-template-columns: 1fr 1fr !important;
}

.wp-block-post-excerpt__more-text{
    margin-top: 12px;
}

@media(min-width:650px){
    .blog_featured_post{
        grid-template-columns: 1fr 1fr;
    }
    ul.blog_list{
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

    
}


/*CONTACT US PAGE*/
.ioneq_contact_form{
    
}
.ioneq_contact_form_button{
    
}



/* PRODUCT PAGE*/

/* Product gallery thumbnail list spacing */
#wp--skip-link--target > div.wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex > div:nth-child(1) > div > div > ol{
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

/* Thumbnail images border radius */
.wp-block-woocommerce-product-image-gallery 
.woocommerce-product-gallery 
ol.flex-control-nav.flex-control-thumbs img {
    border-radius: 8px;
}

/*CUSTOM CART BUTTON*/
.aequina-cart-btn {
    text-decoration: none;
    padding: 16px;
    max-width: 212px;
    background-color: #297a7d;
    text-align: center;
    margin-top: 16px;
    color: white;
    font-weight: 800;
}

.checkout_notif{
    min-width: 100%;
}
