/* =========================================================
   The Scholarly Guide - Global Responsive Layer
   Loaded after page-specific CSS so mobile rules are consistent.
   ========================================================= */

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
input,
textarea,
select {
    max-width: 100%;
}

/* Prevent accidental horizontal overflow from long words/URLs. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
li {
    overflow-wrap: anywhere;
}

/* -----------------------------
   HOME HEADER
   ----------------------------- */
@media (max-width: 900px) {
    header {
        min-width: 0;
    }

    header .logo {
        max-width: 55vw;
    }

    header > nav {
        display: none;
    }

    header .header-actions {
        min-width: 0;
        flex: 0 0 auto;
    }

    header .email-header {
        display: none;
    }

    header .menu-toggle {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    .mobile-menu {
        width: min(320px, 88vw);
        max-width: 88vw;
        padding: 18px;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .mobile-nav-list {
        gap: 8px;
    }

    .mobile-nav-list li a {
        padding: 12px 4px;
        font-size: 14px;
    }

    body.menu-open {
        overflow: hidden;
    }
}

/* -----------------------------
   SUBPAGE HEADERS
   These pages use .menu + .back-home
   instead of the homepage drawer.
   ----------------------------- */
@media (max-width: 900px) {
    .subpage-header {
        width: 100%;
        padding: 14px 16px !important;
        gap: 12px;
        text-align: center;
    }

    .subpage-header .logo {
        width: min(210px, 72vw);
        height: 40px;
        flex: 0 1 auto;
        margin: 0 auto;
    }

    .subpage-header .menu {
        width: 100%;
        max-width: 620px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: center;
        gap: 7px;
        margin: 0 auto;
    }

    .subpage-header .menu a {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 8px 7px;
        font-size: 12px;
        line-height: 1.25;
    }

    .subpage-header .back-home {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        padding: 5px 10px;
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .subpage-header {
        padding: 12px 12px !important;
    }

    .subpage-header .logo {
        width: min(185px, 76vw);
        height: 36px;
    }

    .subpage-header .menu {
        gap: 6px;
    }

    .subpage-header .menu a {
        min-height: 38px;
        padding: 7px 5px;
        font-size: 11px;
    }

    .subpage-header .back-home {
        font-size: 12px;
    }
}

/* -----------------------------
   HOMEPAGE MOBILE LAYOUT
   ----------------------------- */
@media (max-width: 900px) {
    .hero-section {
        width: 100%;
        overflow: hidden;
    }

    .hero-container {
        width: 100%;
        max-width: 100%;
    }

    .hero-text,
    .hero-form {
        min-width: 0;
    }

    .hero-text h1 {
        max-width: 100%;
        font-size: clamp(29px, 8vw, 42px);
        line-height: 1.16;
        letter-spacing: -0.5px;
    }

    .hero-text p {
        max-width: 100%;
        font-size: 14px;
    }

    .trust-badges {
        width: 100%;
    }

    .badge-box {
        max-width: 100%;
    }

    .pricing-card {
        width: 100%;
        max-width: 100%;
    }

    .logos-container {
        width: 100%;
        padding: 24px 16px;
    }

    .logos-grid {
        gap: 12px 18px;
    }

    .logo-item {
        font-size: 14px;
    }

    .transform-content,
    .faq-layout {
        width: 100%;
    }

    .transform-section h2,
    .features-header h2,
    .how-it-works h2,
    .faq-section h2,
    .testimonials-section h2 {
        overflow-wrap: normal;
        word-break: normal;
    }

    .testimonials-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .testimonial-card {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .top-bar {
        font-size: 10px;
    }

    .top-bar-message {
        padding-left: 100%;
    }

    .hero-section {
        padding: 52px 14px 44px !important;
    }

    .hero-text h1 {
        font-size: clamp(28px, 8.2vw, 34px);
    }

    .hero-text p {
        font-size: 13.5px;
        line-height: 1.65;
    }

    .trust-badges {
        gap: 9px;
    }

    .badge-box {
        width: 100%;
        padding: 10px 12px;
        font-size: 12px;
    }

    .pricing-header {
        padding: 18px 14px;
        font-size: 17px;
    }

    .form-body {
        padding: 18px 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }

    .logos-section {
        padding: 0 12px;
    }

    .logos-container {
        padding: 22px 12px;
    }

    .logos-container h3 {
        font-size: 13px;
        line-height: 1.5;
    }

    .logo-item {
        font-size: 12px;
    }

    .transform-section,
    .faq-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .features-slider-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .feature-card {
        min-width: min(280px, calc(100vw - 40px));
    }

    .how-it-works {
        margin-left: 12px;
        margin-right: 12px;
    }

    .testimonials-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .whatsapp-toggle {
        bottom: max(14px, env(safe-area-inset-bottom));
        left: 12px;
        width: 52px;
        min-height: 52px;
    }

    .whatsapp-toggle-icon {
        width: 25px;
        height: 25px;
    }
}

/* -----------------------------
   SUBPAGE MOBILE CONTENT
   ----------------------------- */
@media (max-width: 900px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .page-title h1,
    .page-header h1 {
        font-size: clamp(28px, 7vw, 38px);
        line-height: 1.18;
    }

    .content-grid {
        width: 100%;
    }

    .content-grid > *,
    .cards-grid > *,
    .section-box,
    .quote-sidebar {
        min-width: 0;
        max-width: 100%;
    }

    .quote-sidebar {
        position: static !important;
    }
}

@media (max-width: 600px) {
    .container {
        margin-top: 28px;
        margin-bottom: 35px;
    }

    .page-title {
        margin-bottom: 26px;
    }

    .page-title h1,
    .page-header h1 {
        font-size: 28px;
    }

    .page-title p,
    .page-header p {
        font-size: 14px;
    }

    .section-box,
    .quote-sidebar,
    .info-card {
        padding: 20px 16px;
    }

    .cards-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Footer stays inside viewport on small screens. */
.footer-content {
    min-width: 0;
}

.footer-col {
    min-width: 0;
}