/*
Theme Name: Gutenify Capital Abco Child
Theme URI: 
Author: 
Author URI: 
Description: Child theme of Gutenify Capital.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: gutenify-capital
Text Domain: gutenify-capital-abco-child
Tags: 
*/
.no-wrap {
    text-wrap: balance;  
}

.side-menu {
    top: 150px;
    text-wrap: balance;
}

/*
.side-menu nav a.active {
    text-decoration: underline;
    font-weight: bold;
    color: #0073aa;
}
*/

.side-menu-heading {
    text-align: right;
}

.side-menu-heading:hover {
  padding-left: 10px;
  padding-right: 10px;
  transition: all 0.4s ease;
  border: 6px solid #0598CE;
}



h2.wp-block-heading {
    scroll-margin-top: 120px;
}

.page-id-31 .programs-column:hover {
  border: 4px solid #0598CE;
  border-radius: 5px;
}


.keep-inline {
    white-space: nowrap;
}

.keep-inline:hover {
    background-color: #113768;
    color: #FFF;
}


.program-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top; /* <— crop from top */
    display: block;
}

.pop-button:hover {
  transform: scale(1.05); /* Scale up by 5% on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a subtle shadow on hover */
}

.round-edge {
    border-radius: 5px;
}

.centered-paragraph {
    text-align: center;
}

.left-paragraph {
    text-align: left;
}

.left-content-paragraph p {
    text-align: left;
}

.testimonial-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.testimonial-photo img {
    border-radius: 50%;
    border: 4px solid #031435;
}

.graduate-photo img {
    width: 100%;          /* Fills the width of the parent container */
    aspect-ratio: 1 / 0.8;  /* Forces the image tag to become a perfect square */
    
    object-fit: cover;    /* The <img> equivalent of background-size: cover */
    object-position: top; /* The <img> equivalent of background-position: top */
}


/* WP Block Navigation: keep submenu toggle (arrow) clickable */
.wp-block-navigation-item.has-child {
  position: relative;
}

/* Link sits below the toggle */
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  position: relative;
  z-index: 1;
}

/* Toggle sits above the link and receives taps */
.wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

/* ==========================================================================
   SECTION 1: ORIGINAL TESTIMONIALS (WITH ARROWS, NO SCROLLBAR)
   ========================================================================== */

/* 1. The Track Container (Perfect Desktop Peek + Stable Circular Looping) */
.horizontal-query-scroller,
.horizontal-query-scroller.wp-block-post-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    /* FIX: Anchored left padding for loop stability, fluid right padding to let the next card peek in */
    padding-left: 80px !important; 
    padding-right: 15% !important; 
    padding-top: 25px;
    padding-bottom: 25px;

    scrollbar-width: none !important; /* Hide scrollbar Firefox */
    -ms-overflow-style: none !important;  /* Hide scrollbar IE/Edge */
}

/* Hide scrollbars Chrome, Safari, Opera */
.horizontal-query-scroller::-webkit-scrollbar {
    display: none !important;
}

/* 2. The Individual Cards */
.horizontal-query-scroller .wp-block-post {
    flex: 0 0 380px !important; 
    min-width: 380px !important;
    margin-right: 20px !important;
    scroll-snap-align: center;
    box-sizing: border-box !important;
    
    animation: focal-card-scale linear both;
    animation-timeline: view(inline);
    animation-range: entry 0% exit 100%;
}

/* 3. The Desktop Navigation Arrows Click Cue */
.scroll-arrow-left, 
.scroll-arrow-right {
    cursor: pointer !important;
}

/* 4. Mobile Responsiveness: Hide Arrows & Enable Card Peek */
@media (max-width: 767px) {
    .scroll-arrow-left, 
    .scroll-arrow-right,
    .testimonial-arrow-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .horizontal-query-scroller,
    .horizontal-query-scroller.wp-block-post-template {
        padding-left: 20px !important; 
        padding-right: 20px !important; 
    }

    .horizontal-query-scroller .wp-block-post {
        flex: 0 0 80% !important;
        min-width: 80% !important;
        margin-right: 15px !important; 
        scroll-snap-align: start !important; 
    }
}


/* ==========================================================================
   SECTION 2: ALTERNATIVE TESTIMONIALS (WITH MODERN MINIMALIST SCROLLBAR)
   ========================================================================== */

/* 1. The Track Container */
.alt-query-scroller,
.alt-query-scroller.wp-block-post-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    padding-left: 24px !important;  
    padding-right: 40px !important; 
    padding-top: 15px;
    padding-bottom: 20px; /* Space for the new slim scrollbar */

    /* Custom scrollbar settings for Firefox */
    scrollbar-width: thin !important;
    scrollbar-color: #888888 #e0e0e0 !important; /* Thumb color / Track color */
}

/* 2. MODERN SCROLLBAR STYLING (Chrome, Safari, and Edge) */
.alt-query-scroller::-webkit-scrollbar {
    height: 5px !important; /* Makes the scrollbar ultra-thin and premium */
    display: block !important;
}

/* The underlying background track line */
.alt-query-scroller::-webkit-scrollbar-track {
    background: #e0e0e0 !important; /* Subtle light gray track */
    border-radius: 10px !important;
}

/* The actual moving pill/indicator */
.alt-query-scroller::-webkit-scrollbar-thumb {
    background: #333333 !important; /* Elegant dark accent thumb (change to your brand color) */
    border-radius: 10px !important;
    transition: background 0.2s ease !important;
}

/* Interactive hover state */
.alt-query-scroller::-webkit-scrollbar-thumb:hover {
    background: #555555 !important; /* Slightly changes tone when hovered */
}

/* 3. The Individual Cards (Unchanged Left-Snapping Behavior) */
.alt-query-scroller .wp-block-post {
    flex: 0 0 440px !important; 
    min-width: 440px !important;
    margin-right: 24px !important; 
    scroll-snap-align: start; 
    box-sizing: border-box !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* 4. Mobile Layout Adjustments (Scrollbars disappear into touch gestures on phones) */
@media (max-width: 767px) {
    .alt-query-scroller,
    .alt-query-scroller.wp-block-post-template {
        padding-left: 20px !important; 
        padding-right: 20px !important; 
    }

    .alt-query-scroller .wp-block-post {
        flex: 0 0 82% !important; 
        min-width: 82% !important;
        margin-right: 16px !important; 
        scroll-snap-align: start !important; 
    }
}


/* ==========================================================================
   GLOBAL KEYFRAMES (Shared safely by both sections)
   ========================================================================== */
@keyframes focal-card-scale {
    0% {
        transform: scale(0.85);
        opacity: 0.5;
        filter: blur(1px);
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        transform: scale(0.85);
        opacity: 0.5;
        filter: blur(1px);
    }
}

@media (min-width: 768px) {
    selector {
        text-align: justify;
        text-justify: inter-word;
        word-break: keep-all;
        text-rendering: optimizeLegibility;
    }
}

/* ==========================================================================
   UTILITY CLASS: Desktop Text Justification (Safe for Narrow Paragraphs)
   ========================================================================== */
@media (min-width: 768px) {
    .justify-desktop {
        text-align: justify !important;
        text-justify: inter-word !important;
        word-break: keep-all !important;
        text-rendering: optimizeLegibility !important;
    }
}