/*
 * Valens Theme - Mobile Styles
 *
 * These styles apply to screens 1024px and smaller.
 */

@media (max-width: 767px) {
    .btn {
        height: unset;
    }
    .btn-content {
        flex-shrink: unset;
    }
    .intro-section__image {
        max-width: 100%;
    }
}
@media (max-width: 1024px) {
    /*--------------------------------------------------------------
    # Mobile Typography & Root Variables
    --------------------------------------------------------------*/
    :root {
        --heading-mobile-h1-font-size: 2.5rem;
        --heading-mobile-h1-line-height: 120%;
        --heading-mobile-h2-font-size: 2.25rem;
        --heading-mobile-h2-line-height: 120%;
        --heading-mobile-h3-font-size: 2rem;
        --heading-mobile-h3-line-height: 120%;
        --heading-mobile-h5-font-size: 1.25rem;
        --heading-mobile-h5-line-height: 140%;
    }
    /*--------------------------------------------------------------
    # Header & Mobile Navigation
    --------------------------------------------------------------*/
    .site-header {
        padding: 1.5rem 0rem;
        box-shadow: none !important;
        justify-content: space-between;
        z-index: 1001;
        transition: background-color 0.3s ease-in-out;
    }
    .site-header.mobile-menu-open {
        background-color: var(--terracotta) !important;
    }
    .site-header__nav, .site-header__actions {
        display: none;
    }
    .mobile-nav-toggle {
        display: block;
        position: relative;
        z-index: 1002;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 1rem;
        border: 2px solid #FFF;
    }
    .hamburger-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0.5 19.3994V16.2327H19.5V19.3994H0.5ZM0.5 11.4827V8.31608H19.5V11.4827H0.5ZM0.5 3.56608V0.399414H19.5V3.56608H0.5Z' fill='white'/%3E%3C/svg%3E");
    }
    body.scrolled .hamburger-box {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0.5 19.3994V16.2327H19.5V19.3994H0.5ZM0.5 11.4827V8.31608H19.5V11.4827H0.5ZM0.5 3.56608V0.399414H19.5V3.56608H0.5Z' fill='%232c2c2c'/%3E%3C/svg%3E");
    }
    .mobile-nav-toggle.is-active .hamburger-box {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'%3E%3Cpath d='M15.7502 0.899414L8.9992 7.64942L2.2498 0.899414L0 3.14941L6.7494 9.89941L0 16.6494L2.2498 18.8994L8.9992 12.1494L15.7502 18.8994L18 16.6494L11.2506 9.89941L18 3.14941L15.7502 0.899414Z' fill='white'/%3E%3C/svg%3E");
    }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        display: none;
    }
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--sand);
        z-index: 1000;
        transform: translateY(-100%);
        transition: transform 0.4s ease-in-out;
        overflow-y: auto;
        padding: 0 1.5rem 3rem;
    }
    .mobile-nav-overlay.is-active {
        transform: translateY(0);
    }
    body.mobile-menu-open {
        overflow: hidden;
    }
    .mobile-nav__nav {
        padding-top: 1rem;
    }
    .mobile-nav__menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .mobile-nav__menu .menu-item a, .mobile-nav__menu .menu-item-has-children>a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        background: var(--white);
        border-radius: 0.5rem;
        color: var(--cta-color);
        font-family: var(--text-medium-normal-font-family);
        font-size: var(--text-medium-normal-font-size);
        text-decoration: none;
        font-weight: 500;
    }
    .mobile-nav__menu .menu-item a, .mobile-nav__menu .menu-item-has-children>a:hover {
        background-color: #fff;
    }
    body .mobile-nav__menu .menu-item a:hover {
        background-color: #fff;
    }
    .mobile-nav__menu .menu-item-has-children>a::after {
        content: '';
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15.5L6 9.5L7.4 8.09999L12 12.7L16.6 8.09999L18 9.5L12 15.5Z' fill='%237C2F0F'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        transition: transform 0.3s ease;
    }
    .mobile-nav__menu .menu-item-has-children.is-open>a::after {
        transform: rotate(-180deg);
    }
    .mobile-nav__menu .menu-item-has-children.is-open>a {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .mobile-nav__menu .sub-menu {
        list-style: none;
        padding: 1rem 1.5rem;
        margin: 0;
        background: var(--white);
        border-radius: 0 0 0.5rem 0.5rem;
        border-top: 1px solid #e1e5ea;
        display: none;
    }
    .mobile-nav__menu .sub-menu .menu-item a {
        background: none;
        padding: 0.5rem 0;
    }
    .mobile-nav__contact-btn {
        margin-top: 2rem;
        width: 100%;
        background-color: var(--cta-color);
        border-color: var(--cta-color);
    }
    .two-column-text-section {
        padding: 2.5rem 0;
        /* Vertical padding only */
    }
    .two-column-text-section .inner-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    .two-column-text-section__right {
        padding-top: 0;
    }
    .two-column-text-section__title {
        margin-bottom: 1.5rem;
    }
    /*--------------------------------------------------------------
    # General Section & Layout Adjustments
    --------------------------------------------------------------*/
    /* NEW: This single rule handles all horizontal padding on mobile */
    /* REMOVED: The old group selector for padding-left/right is gone. */
    .intro-section__title {
        word-break: break-word;
    }
    .hero-section {
        padding-top: 8rem;
        padding-bottom: 4rem;
        padding-bottom: 2.5rem;
        min-height: 90vh;
    }
    body .hero-section__text {
        font-size: 2rem;
        margin: 1.5rem 0;
    }
    .hero-section__quick-links {
        width: 100%;
        gap: 1.5rem;
    }
    .welcome-section, .services-section, .testimonials-section, .content-feature-section, .blog-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .services-section .inner-container {
        gap: 4rem;
    }
    .cta-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .site-footer__main {
        padding-top: 4rem;
        padding-bottom: 0;
        /* Adjust as needed */
    }
    .site-footer__bottom-bar {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .hero-section__text {
        font-size: var(--heading-mobile-h1-font-size);
    }
    body .hero-section__quick-links-list {
        flex-direction: column;
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1.5rem 2rem;
    }
    /* UPDATED: Flex properties now target the inner-container */
    .welcome-section .inner-container, .content-feature-section .inner-container {
        flex-direction: column;
        gap: 3rem;
    }
    body .table-of-contents__title {
        border-radius: 0;
    }
    body .blog-sidebar {
        top: 7.625rem;
        position: sticky;
    }
    body .table-of-contents {
        border-radius: 0;
    }
    body.scrolled-past-header .blog-sidebar {
        border-bottom: 1px solid var(--terracotta);
    }
    .blog-section .inner-container {
        flex-direction: column;
    }
    .content-feature-section__image {
        order: 2;
        height: 15rem;
        width: 100%;
        flex: unset;
    }
    .content-feature-section__text-content {
        order: 1;
        width: 100%;
    }
    .welcome-section__title, .services-section__title, .testimonials-section__title, .content-feature-section__title, .blog-section .latest-posts__title, .cta-section__title {
        font-size: var(--heading-mobile-h2-font-size);
        width: 100%;
    }
    .services-section__header {
        flex-direction: column;
        gap: 1.5rem;
    }
    .services-section__grid-row {
        flex-direction: column;
    }
    .service-card__title {
        font-size: var(--heading-mobile-h3-font-size);
    }
    .testimonials-section__slider .testimonial-card {
        width: 100%;
        margin-right: 2rem;
    }
    .blog-section__featured-post {
        width: 100%;
        height: 20rem;
    }
    .featured-post__title, .blog-card__title {
        font-size: var(--heading-mobile-h5-font-size);
    }
    .cta-section__content-box {
        width: 100%;
        padding: 2rem;
    }
    /* Footer adjustments */
    .site-footer .inner-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2.5rem;
    }
    .site-footer__grid {
        display: flex;
        flex-direction: column;
        /* Ensure this is column */
        align-items: flex-start;
        width: 100%;
        padding: 0;
        gap: 3.5rem;
    }
    .site-footer__logo-socials, .site-footer__contact, .site-footer__nav {
        align-items: center;
        width: 100%;
    }
    .site-footer__logo-socials {}
    .site-footer__contact, .site-footer__nav {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
    }
    .site-footer__bottom-bar .inner-container {
        gap: 0;
    }
    .bottom-bar__links .menu {
        margin-bottom: 3rem;
        justify-content: center;
        flex-direction: column;
    }
    .testimonials-section__slider .testimonial-card {
        width: calc(100% - 3.5rem);
        /* Show a piece of the next slide */
    }
}
@media (min-width: 1025px) {
    body .mobile-nav-overlay {
        display: none;
    }
    body .mobile-nav-toggle {
        display: none;
    }
}
@media (max-width: 400px) {
    .testimonial-card__meta {
        gap: 0.5rem;
        flex-direction: column;
    }
    body .site .hero-section__quick-links-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    body .expertise-card__title, body .pricing-card__title {
        font-size: 1.5rem;
    }
    body .team-detail__contact-info {
        font-size: 1rem;
    }
    body, body .team-detail__biography {
        font-size: 1rem;
    }
    :root {
        --text-medium-normal-font-size: 1rem;
    }
}
/*--------------------------------------------------------------
# Blog Section Mobile Carousel
--------------------------------------------------------------*/

@media (max-width: 1024px) {
    /* Styles for the carousel elements created by the script above */
    .blog-carousel-cell-mobile {
        width: 100%;
        margin-right: 1.5rem;
        display: flex;
        height: auto;
        min-height: 100%;
        flex-direction: column;
        justify-content: flex-end;
        border-radius: 1rem;
        padding: 2.5rem;
        color: var(--white);
        text-decoration: none;
        background-size: cover !important;
        background-position: center !important;
    }
    /* Font styles for the titles inside the new cells */
    .blog-carousel-cell-mobile .featured-post__title {
        font-family: var(--heading-desktop-h3-font-family);
        font-size: 1.75rem;
        line-height: 1.3;
        color: var(--white);
    }
    /* Text color for the read time inside the new cells */
    .blog-carousel-cell-mobile .post-read-time {
        color: var(--white);
    }
    /* Styles for the navigation buttons */
    .blog-section__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
    }
    .blog-section__nav .arrow-prev, .blog-section__nav .arrow-next {
        cursor: pointer;
        width: 3rem;
        height: 3rem;
        background-color: var(--cta-color);
        border-radius: 50%;
        background-image: var(--arrow-right-white);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        transition: background-color 0.3s ease;
        font-size: 0;
        border: none;
    }
    .blog-section__nav .arrow-prev:hover, .blog-section__nav .arrow-next:hover {
        background-color: var(--terracotta);
    }
    .blog-section__nav .arrow-prev {
        transform: rotate(180deg);
    }
    .blog-section .inner-container {
        display: block;
        flex-direction: column-reverse;
    }
    .latest-posts__description {
        margin-bottom: 1.5rem
    }
}