/**
 * Manattva Theme — Global Responsive System
 *
 * Breakpoints match Elementor's default breakpoints exactly.
 * No design changes. Layout adjustments only.
 * Mobile-first approach — base styles apply to all sizes,
 * then overrides are applied upward.
 *
 * Breakpoints:
 * — Mobile Portrait : max-width  479px
 * — Mobile Landscape: max-width  767px  ( Elementor: mobile )
 * — Tablet Portrait : max-width  1024px ( Elementor: tablet )
 * — Desktop         : min-width  1025px ( Elementor: desktop )
 * — Wide Desktop    : min-width  1440px
 *
 * @package   Manattva
 * @version   1.0.0
 */

/* =============================================
   CSS CUSTOM PROPERTIES — RESPONSIVE OVERRIDES
============================================= */

/* Tablet */
@media screen and ( max-width: 1024px ) {
    :root {
        --section-padding-y:  80px;
        --container-padding:  40px;
    }
}

/* Mobile */
@media screen and ( max-width: 767px ) {
    :root {
        --section-padding-y:  60px;
        --container-padding:  24px;
    }
}

/* Mobile Portrait */
@media screen and ( max-width: 479px ) {
    :root {
        --section-padding-y:  48px;
        --container-padding:  20px;
    }
}

/* =============================================
   ELEMENTOR CONTAINER — RESPONSIVE PADDING
============================================= */
.elementor-container {
    padding-left:  var( --container-padding, 20px );
    padding-right: var( --container-padding, 20px );
}

/* =============================================
   ELEMENTOR COLUMNS — RESPONSIVE STACKING
============================================= */

/* Tablet — all columns go 50/50 max */
@media screen and ( max-width: 1024px ) {

    .elementor-row {
        flex-wrap: wrap;
    }

    .elementor-col-33 {
        width: 50%;
    }

    .elementor-col-25 {
        width: 50%;
    }
}

/* Mobile — all columns stack full width */
@media screen and ( max-width: 767px ) {

    .elementor-col-10,
    .elementor-col-20,
    .elementor-col-25,
    .elementor-col-33,
    .elementor-col-40,
    .elementor-col-50,
    .elementor-col-60,
    .elementor-col-66,
    .elementor-col-75,
    .elementor-col-80,
    .elementor-col-100 {
        width: 100%;
    }

    .elementor-widget-wrap {
        padding: 0;
    }
}

/* =============================================
   SITE HEADER — RESPONSIVE
============================================= */

/* Tablet & Mobile — hide desktop nav */
@media screen and ( max-width: 1024px ) {

    .site-header .elementor-container {
        padding-top:    16px;
        padding-bottom: 16px;
    }

    .site-header__nav {
        display: none;
    }

    .site-header__actions {
        display: none;
    }

    .site-header__mobile-toggle {
        display:         flex;
        align-items:     center;
        justify-content: center;
    }
}

/* Desktop — hide mobile toggle */
@media screen and ( min-width: 1025px ) {

    .site-header__mobile-toggle {
        display: none;
    }

    .mobile-menu {
        display: none !important;
    }
}

/* =============================================
   MOBILE MENU — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .mobile-menu {
        position:   absolute;
        top:        100%;
        left:       0;
        right:      0;
        z-index:    9998;
        background: var( --color-bg-white );
        box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.10 );
        padding:    24px var( --container-padding, 24px );
    }

    .mobile-menu__list {
        display:        flex;
        flex-direction: column;
        gap:            0;
    }

    .mobile-menu__list li {
        border-bottom: 1px solid var( --color-border );
    }

    .mobile-menu__list li:last-child {
        border-bottom: none;
    }

    .mobile-menu__list a {
        display:      block;
        padding:      14px 0;
        font-family:  var( --font-body );
        font-size:    16px;
        font-weight:  500;
        color:        var( --color-text-dark );
    }

    .mobile-menu__list a:hover {
        color: var( --color-primary );
    }

    .mobile-menu__cta {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var( --color-border );
    }

    .mobile-menu__cta .elementor-button {
        display:    block;
        width:      100%;
        text-align: center;
    }
}

/* =============================================
   SITE FOOTER — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .site-footer__grid {
        grid-template-columns: repeat( 2, 1fr );
        gap: 40px;
    }
}

@media screen and ( max-width: 767px ) {

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        gap:            16px;
        text-align:     center;
    }

    .site-footer__legal-list {
        justify-content: center;
    }

    .site-footer__social {
        justify-content: flex-start;
    }
}

/* =============================================
   TYPOGRAPHY — RESPONSIVE SCALE
============================================= */

/* Tablet */
@media screen and ( max-width: 1024px ) {

    body {
        font-size: 17px;
    }

    .manattva-hero__title,
    .elementor-heading-title.manattva-hero__title {
        font-size: 42px;
    }

    .manattva-section__title,
    .elementor-heading-title.manattva-section__title {
        font-size: 32px;
    }

    .manattva-cta__title,
    .elementor-heading-title.manattva-cta__title {
        font-size: 36px;
    }

    .manattva-page-hero__title {
        font-size: 38px;
    }
}

/* Mobile */
@media screen and ( max-width: 767px ) {

    body {
        font-size: 16px;
    }

    .manattva-hero__title,
    .elementor-heading-title.manattva-hero__title {
        font-size: 32px;
        line-height: 1.25;
    }

    .manattva-section__title,
    .elementor-heading-title.manattva-section__title {
        font-size: 26px;
    }

    .manattva-cta__title,
    .elementor-heading-title.manattva-cta__title {
        font-size: 28px;
    }

    .manattva-page-hero__title {
        font-size: 28px;
    }

    .manattva-testimonial__text {
        font-size: 16px;
    }
}

/* Mobile Portrait */
@media screen and ( max-width: 479px ) {

    .manattva-hero__title,
    .elementor-heading-title.manattva-hero__title {
        font-size: 28px;
    }

    .manattva-section__title,
    .elementor-heading-title.manattva-section__title {
        font-size: 24px;
    }

    .manattva-cta__title,
    .elementor-heading-title.manattva-cta__title {
        font-size: 24px;
    }
}

/* =============================================
   BUTTONS — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    .elementor-button.elementor-size-lg {
        padding:   14px 28px;
        font-size: 15px;
    }

    .elementor-button.elementor-size-md {
        padding:   12px 24px;
        font-size: 14px;
    }

    .manattva-cta .elementor-button--white {
        display:    block;
        width:      100%;
        text-align: center;
    }
}

/* =============================================
   HERO SECTION — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .manattva-hero {
        padding: 80px 0;
    }

    .manattva-hero .elementor-row {
        align-items: center;
    }

    .manattva-hero__media {
        order: -1;
    }

    .manattva-hero__image {
        max-height: 480px;
        object-fit: cover;
    }
}

@media screen and ( max-width: 767px ) {

    .manattva-hero {
        padding:    60px 0;
        text-align: center;
    }

    .manattva-hero .elementor-col-50 {
        width: 100%;
    }

    .manattva-hero__media {
        order:      -1;
        margin-bottom: 32px;
    }

    .manattva-hero__image {
        max-height:   360px;
        width:        100%;
        object-fit:   cover;
        border-radius: var( --radius-lg );
    }

    .manattva-hero .elementor-button-wrapper {
        display:         flex;
        justify-content: center;
    }
}

@media screen and ( max-width: 479px ) {

    .manattva-hero {
        padding: 48px 0;
    }

    .manattva-hero__image {
        max-height: 280px;
    }
}

/* =============================================
   SERVICES SECTION — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .manattva-services .elementor-col-50 {
        width: 100%;
    }

    .manattva-services .manattva-card {
        max-width: 600px;
        margin:    0 auto;
    }
}

@media screen and ( max-width: 767px ) {

    .manattva-services {
        padding: 60px 0;
    }

    .manattva-card__image {
        width:     100%;
        max-height: 240px;
        object-fit: cover;
    }
}

/* =============================================
   ABOUT PREVIEW SECTION — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .manattva-about-preview .elementor-col-50 {
        width: 100%;
    }

    .manattva-about-preview__media {
        order: -1;
    }

    .manattva-about-preview__image {
        max-height:    440px;
        width:         100%;
        object-fit:    cover;
        margin-bottom: 32px;
    }
}

@media screen and ( max-width: 767px ) {

    .manattva-about-preview {
        padding: 60px 0;
    }

    .manattva-about-preview__image {
        max-height: 320px;
    }
}

/* =============================================
   FEATURES SECTION — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .manattva-features .elementor-col-33 {
        width: 50%;
    }
}

@media screen and ( max-width: 767px ) {

    .manattva-features .elementor-col-33 {
        width: 100%;
    }

    .manattva-feature {
        text-align: center;
    }

    .manattva-feature__icon {
        display:         flex;
        justify-content: center;
        margin-bottom:   16px;
    }
}

/* =============================================
   TESTIMONIALS — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    .manattva-testimonials {
        padding: 60px 0;
    }

    .manattva-testimonial {
        padding: 24px;
    }

    .manattva-testimonial__text {
        font-size: 16px;
    }

    .manattva-testimonial-slider__controls {
        gap: 12px;
    }

    .manattva-testimonial-slider__prev,
    .manattva-testimonial-slider__next {
        width:  36px;
        height: 36px;
    }
}

/* =============================================
   RESOURCES PREVIEW — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .manattva-resources-preview .elementor-col-33 {
        width: 50%;
    }
}

@media screen and ( max-width: 767px ) {

    .manattva-resources-preview .elementor-col-33 {
        width: 100%;
    }

    .manattva-resource-card .manattva-card__image {
        max-height: 220px;
        object-fit: cover;
    }
}

/* =============================================
   CTA SECTION — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .manattva-cta {
        padding: 80px 0;
    }
}

@media screen and ( max-width: 767px ) {

    .manattva-cta {
        padding:    60px 0;
        text-align: center;
    }

    .manattva-cta__inner {
        padding: 0 16px;
    }
}

/* =============================================
   PAGE HERO — RESPONSIVE
============================================= */
@media screen and ( max-width: 1024px ) {

    .manattva-page-hero {
        padding: 60px 0;
    }
}

@media screen and ( max-width: 767px ) {

    .manattva-page-hero {
        padding:    48px 0;
        text-align: center;
    }

    .manattva-breadcrumb {
        justify-content: center;
    }

    .manattva-breadcrumb__list {
        justify-content: center;
    }
}

/* =============================================
   PAGE CONTENT — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    .manattva-page-article__content {
        font-size: 16px;
    }

    .manattva-page-article__content h2 {
        font-size: 24px;
    }

    .manattva-page-article__content h3 {
        font-size: 20px;
    }

    .manattva-page-article__image {
        border-radius: var( --radius-md );
        margin-bottom: 24px;
    }
}

/* =============================================
   SECTION HEADERS — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    .manattva-section-header {
        text-align: center;
    }

    .manattva-section__subtitle {
        font-size: 15px;
    }

    .elementor-heading-eyebrow {
        font-size: 13px;
    }
}

/* =============================================
   FORMS — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    .manattva-form__row {
        flex-direction: column;
        gap:            0;
    }

    .manattva-form__group {
        width: 100%;
    }

    .manattva-form input,
    .manattva-form textarea,
    .manattva-form select {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .manattva-form .elementor-button {
        width:      100%;
        text-align: center;
    }
}

/* =============================================
   CARDS — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    .manattva-card {
        border-radius: var( --radius-md );
    }

    .manattva-card:hover {
        transform: none; /* Disable hover lift on touch devices */
    }
}

@media ( hover: none ) {

    /* Disable hover effects on touch devices */
    .manattva-card:hover {
        transform:  none;
        box-shadow: none;
    }

    .manattva-card:hover .manattva-card__image {
        transform: none;
    }

    .elementor-animation-grow:hover {
        transform:  none;
        box-shadow: none;
    }
}

/* =============================================
   SCROLL TO TOP — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    .manattva-scroll-top {
        bottom: 20px;
        right:  20px;
        width:  40px;
        height: 40px;
    }
}

/* =============================================
   IMAGES — RESPONSIVE
============================================= */
@media screen and ( max-width: 767px ) {

    img {
        max-width: 100%;
        height:    auto;
    }

    figure {
        margin: 0;
    }
}

/* =============================================
   WIDE DESKTOP — LARGE SCREEN ADJUSTMENTS
============================================= */
@media screen and ( min-width: 1440px ) {

    .manattva-hero__title,
    .elementor-heading-title.manattva-hero__title {
        font-size: 62px;
    }

    .manattva-section__title,
    .elementor-heading-title.manattva-section__title {
        font-size: 44px;
    }

    .manattva-cta__title,
    .elementor-heading-title.manattva-cta__title {
        font-size: 50px;
    }
}

/* =============================================
   PRINT STYLES
============================================= */
@media print {

    .site-header,
    .site-footer,
    .mobile-menu,
    .manattva-scroll-top,
    .elementor-button {
        display: none !important;
    }

    body {
        font-size:   12pt;
        line-height: 1.5;
        color:       #000;
    }

    a {
        color:           #000;
        text-decoration: underline;
    }

    .elementor-container {
        max-width: 100%;
        padding:   0;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}