/*
 * ZeroPhish — mobile & tablet layer
 * ------------------------------------------------------------------
 * Loaded ONLY on screens up to 1023px (enqueued with a media query in
 * functions.php), after Tailwind and style.css. Desktop is untouched.
 * Colours, fonts and components are not changed — only sizing, spacing,
 * stacking and touch behaviour. Works for both RTL (ar) and LTR (en):
 * direction-sensitive rules use logical properties.
 *
 * Sections:
 *   0. Tablet (768–1023): hamburger menu instead of the squeezed desktop menu
 *   1. Base & rhythm
 *   2. Navbar & mobile menu
 *   3. Hero
 *   4. Homepage sections (top to bottom)
 *   5. Shared buttons & cards
 *   6. Footer & floating button
 *   7. Inner pages (legal pages, blog, request demo)
 *   8. Touch devices & small phones
 */

/* ================================================================
   0. TABLET — 768px to 1023px
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* The desktop menu has ~10 items and doesn't fit; use the phone menu */
    #mainNav .hidden.md\:flex { display: none !important; }
    #hamburgerBtn { display: flex !important; }
    #mobileMenuPanel:not(.hidden) { display: block !important; }
    #mobileMenuPanel { max-width: 420px; margin-inline-start: auto; }

    #home > .container { padding-top: 7rem !important; min-height: 0 !important; }
    #home .animate-float.max-w-lg { max-width: 34rem; margin-inline: auto; }
}

/* ================================================================
   PHONES — up to 767px
   ================================================================ */
@media (max-width: 767px) {

    /* ------------------------------------------------------------
       1. Base & rhythm
       ------------------------------------------------------------ */
    html { -webkit-text-size-adjust: 100%; }
    body { -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15); }

    /* One consistent side gutter everywhere */
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }

    /* Section vertical rhythm */
    section.py-20, section.py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    section.py-12 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    #startup-package { padding-top: 3.5rem; padding-bottom: 3.5rem; }

    /* Section headers */
    .text-center.mb-16 { margin-bottom: 2rem; }
    .mb-16 { margin-bottom: 2.5rem; }
    .mt-16 { margin-top: 2.5rem; }
    .mt-20 { margin-top: 2.5rem; }
    section h2.text-3xl,
    main > .container h2.text-3xl { font-size: 1.625rem; line-height: 1.35; }
    section h2.text-4xl { font-size: 1.875rem; line-height: 1.3; }
    section p.text-xl,
    main > .container p.text-xl { font-size: 1.0625rem; line-height: 1.7; }
    section p.text-lg { font-size: 1rem; line-height: 1.75; }

    /* Grids: tighter gaps */
    .gap-10, .gap-12 { gap: 1.25rem; }
    .gap-8 { gap: 1rem; }

    /* Long words / emails / URLs never push the page wider */
    p, li, h1, h2, h3, h4, span { overflow-wrap: break-word; }

    /* ------------------------------------------------------------
       2. Navbar & mobile menu
       ------------------------------------------------------------ */
    #mainNav > .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    #mainNav .logo-image { height: 2.25rem; }
    #mainNav .text-xl.font-bold.leading-tight { font-size: 1.125rem; }
    /* The long subtitle crowds the hamburger: keep it to one short line */
    #mainNav .logo-subtitle {
        font-size: 0.625rem;
        max-width: 11.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Comfortable 44px tap target for the hamburger */
    #hamburgerBtn {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    /* Menu never taller than the screen; scrolls inside */
    #mobileMenuPanel > div {
        max-height: calc(100vh - 88px);
        max-height: calc(100svh - 88px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #mobileMenuPanel .mobile-nav-link { min-height: 44px; }

    /* ------------------------------------------------------------
       3. Hero
       ------------------------------------------------------------ */
    #home { min-height: 0 !important; }
    #home > .container {
        padding-top: 6.25rem !important;
        padding-bottom: 2.5rem !important;
        min-height: 0 !important;
    }
    #home .grid.gap-12 { gap: 2.5rem; }

    /* Badges */
    #home .flex.flex-wrap.items-center.gap-3.mb-8 { gap: 0.5rem; margin-bottom: 1.5rem; }
    #home .flex.flex-wrap.items-center.gap-3.mb-8 > div { padding: 0.375rem 0.75rem; }
    #home .flex.flex-wrap.items-center.gap-3.mb-8 img { height: 1.5rem; }
    #home .flex.flex-wrap.items-center.gap-3.mb-8 .text-sm { font-size: 0.8125rem; }

    /* Headline: the typing word changes length — reserve two lines so the
       page below doesn't jump up and down while it types */
    #home h1 {
        font-size: 2rem;
        line-height: 1.3 !important;
        min-height: 2.6em;
        margin-bottom: 1rem;
    }
    #home h1 + p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.5rem; }
    #home .flex.flex-wrap.gap-2.mb-8 { margin-bottom: 1.75rem; }

    /* CTAs: full-width stacked buttons */
    #home .flex.flex-col.sm\:flex-row.gap-4 { gap: 0.75rem; margin-bottom: 2rem; }
    #home .flex.flex-col.sm\:flex-row.gap-4 > a { padding-top: 0.9rem; padding-bottom: 0.9rem; }

    #home .flex.items-center.flex-wrap.gap-5 { gap: 0.75rem 1.25rem; }

    /* Dashboard mockup: calmer on phones */
    #home .animate-float.max-w-lg { max-width: 100%; }
    #home .relative.flex.items-center.justify-center.mt-8 { margin-top: 0; }

    /* Decorative blobs: static on phones (saves battery, same look) */
    #home .animate-blob,
    #ai-shadow .animate-blob,
    #startup-package .animate-blob { animation: none; }

    /* Stats strip */
    #home .py-7 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    #home .grid.grid-cols-2.lg\:grid-cols-4 { gap: 1.25rem 0.75rem; }
    #home .grid.grid-cols-2.lg\:grid-cols-4 .text-3xl { font-size: 1.75rem; }
    #home .grid.grid-cols-2.lg\:grid-cols-4 .text-sm { font-size: 0.8125rem; }

    /* The "scroll" arrow overlaps the stats strip on phones */
    #home > a.absolute.bottom-4 { display: none; }

    /* ------------------------------------------------------------
       4. Homepage sections
       ------------------------------------------------------------ */

    /* Made in Saudi */
    section .saudi-tech-card { max-width: 280px; height: 170px; }
    section .saudi-tech-card-front,
    section .saudi-tech-card-back { padding: 1.5rem; }
    section .lg\:w-1\/2 > .bg-opacity-70.p-8 { padding: 1.5rem; }

    /* Achievement: decorative square stays behind the photo */
    section .relative > .absolute.-bottom-6.-right-6 {
        width: 55%;
        height: 55%;
        bottom: -0.75rem;
        right: -0.75rem;
    }
    section .lg\:pl-16 > .p-6 { padding: 1.25rem; }
    section .mt-8.space-y-4 > .flex > p { font-size: 0.975rem; }

    /* Solutions: compact cards */
    #solutions .grid > .group > .p-8 { padding: 1.5rem; }
    #solutions .grid > .group .w-16.h-16 { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }
    #solutions .grid > .group .w-16.h-16 .text-3xl { font-size: 1.5rem; }
    #solutions .grid > .group h3.text-2xl { font-size: 1.25rem; margin-bottom: 0.75rem; }
    #solutions .grid > .group p.mb-6 { margin-bottom: 1rem; }
    #solutions .grid > .group .flex.flex-wrap.mb-6 { margin-bottom: 1rem; }
    #solutions .grid > .group .flex.items-center.mb-4 { flex-wrap: wrap; gap: 0.5rem; }
    #solutions .grid > .group .flex.items-center.mb-4 > span { margin: 0; }

    /* Phishing features */
    #features .flex.flex-wrap.-mx-4 > .mb-10 { margin-bottom: 2rem; }
    #features .bg-white.p-6 { padding: 1.25rem; }
    #features .bg-white.p-6 h3.text-xl { font-size: 1.125rem; }
    #features .grid.gap-6 { gap: 0.875rem; }

    /* Training / LMS */
    section h4.text-xl { font-size: 1.0625rem; }
    section .bg-white.rounded-xl.shadow-lg.p-8 { padding: 1.5rem; }
    section .space-y-8 h3.text-2xl { font-size: 1.125rem; }
    section .space-y-8 > * + * { margin-top: 1.5rem; }
    section .space-y-8 .w-12.h-12 { width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
    section .space-y-8 p.mr-16 { margin-right: 0; margin-left: 0; padding-inline-start: 3.75rem; }
    section img[width="800"] { width: 100%; height: auto; border-radius: 0.75rem; }
    /* English page illustrations: inline SVGs without a width — make them fluid */
    section svg[viewBox="0 0 600 450"] { width: 100%; height: auto; max-width: 100%; }

    /* GRC block */
    main > .container .rounded-xl.p-8.shadow-md { padding: 1.5rem; }
    main > .container .rounded-2xl.shadow-xl.p-10 { padding: 1.5rem 1rem; }
    main > .container .rounded-2xl.shadow-xl.p-10 h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
    main > .container .grid.lg\:grid-cols-6 { gap: 1rem 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* AI Shadow: stack icon above the long heading */
    #ai-shadow .text-center.mb-16 > .flex.items-center.justify-center {
        flex-direction: column;
        gap: 1rem;
    }
    #ai-shadow .text-center.mb-16 > .flex.items-center.justify-center > .w-16 { margin: 0; }
    #ai-shadow .grid > .p-8 { padding: 1.5rem; }
    #ai-shadow .grid > .p-8 > .w-14 { margin-bottom: 1rem; }
    #ai-shadow .rounded-2xl.p-8 { padding: 1.5rem; }
    #ai-shadow .rounded-2xl.p-8 h3.text-2xl { font-size: 1.25rem; margin-bottom: 1rem; }

    /* Compliance: 2-up logo cards */
    #compliance .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    #compliance .grid.lg\:grid-cols-4 > div { padding: 1.25rem 0.75rem; }
    #compliance .grid.lg\:grid-cols-4 .h-24 { height: 4rem; margin-bottom: 0.75rem; }
    #compliance .grid.lg\:grid-cols-4 img { max-height: 3rem; }
    #compliance .grid.lg\:grid-cols-4 h3 { font-size: 1.0625rem; }
    #compliance .grid.lg\:grid-cols-4 p { font-size: 0.8125rem; line-height: 1.5; }
    #compliance .mt-20.p-8 { padding: 1.5rem; }
    #compliance .mt-20 .grid { gap: 1.5rem; }
    #compliance .mt-20 h3.text-2xl { font-size: 1.25rem; margin-bottom: 1rem; }
    #compliance .mt-20 a.px-8 { width: 100%; padding: 1rem 1.25rem; }

    /* Clients: compact logo tiles */
    #clients .grid.grid-cols-2 { gap: 0.75rem; }
    #clients .grid.grid-cols-2 > div { height: 5.5rem; padding: 0.75rem; }
    #clients .grid.grid-cols-2 > div > div { padding: 0.25rem; }
    #clients .grid.grid-cols-2 img { max-height: 3rem; }

    /* Testimonials & FAQ */
    section .grid > .bg-white.p-8.rounded-xl { padding: 1.5rem; }
    section .grid > .bg-white.p-8.rounded-xl p.text-lg { font-size: 1rem; }
    section .grid > .bg-blue-50.p-6 { padding: 1.25rem; }
    section .grid > .bg-blue-50.p-6 h3.text-xl { font-size: 1.0625rem; }

    /* Startup package */
    #startup-package .grid.mb-16 { gap: 0.875rem; }
    #startup-package .p-8 { padding: 1.5rem; }
    #startup-package .flex.justify-between.items-center.mb-8 { flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
    #startup-package h3.text-2xl { font-size: 1.25rem; }
    #startup-package .text-6xl { font-size: 2.75rem; line-height: 1; }
    #startup-package .flex.justify-center.items-end.mb-6 { flex-wrap: wrap; gap: 0.25rem 0.5rem; }
    #startup-package .flex.justify-center.items-end.mb-6 > span { margin: 0; }
    #startup-package .text-right { text-align: start; }
    #startup-package .space-y-5 > * + * { margin-top: 0.875rem; }
    #startup-package .mt-16 .text-center.p-8,
    #startup-package .mt-16 > .p-8 { padding: 1.5rem; text-align: center; }
    #startup-package .mt-16 h3.text-2xl { font-size: 1.25rem; margin-bottom: 1.25rem; }

    /* Contact */
    #contact h2 { margin-bottom: 1rem; }
    #contact p.text-lg.mb-8 { margin-bottom: 1.5rem; }
    #contact .bg-white.p-8 { padding: 1.5rem 1.25rem; }
    #contact h4.text-xl { font-size: 1.0625rem; margin-bottom: 0.25rem; }
    #contact .mb-6 { margin-bottom: 1.125rem; }
    /* 16px inputs: stops iPhone zooming in when a field is tapped */
    #contact input, #contact textarea, #contact select { font-size: 16px; }
    #contact button[type="submit"] { padding-top: 0.9rem; padding-bottom: 0.9rem; }

    /* ------------------------------------------------------------
       5. Shared buttons & cards
       ------------------------------------------------------------ */
    /* Big pill CTAs become full-width, centred, easy to tap */
    section a.rounded-full.px-8,
    section a.rounded-full.px-10,
    main > .container a.rounded-full.px-8 {
        display: flex;
        width: 100%;
        max-width: 26rem;
        margin-inline: auto;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-inline: 1.25rem;
        line-height: 1.5;
    }
    section a.rounded-full.px-8 + a.rounded-full.px-8 { margin-top: 0.75rem; }
    #home .flex.flex-col.sm\:flex-row.gap-4 > a { max-width: none; }

    /* ------------------------------------------------------------
       6. Footer & floating button
       ------------------------------------------------------------ */
    footer.py-16 { padding-top: 3rem; padding-bottom: 5.5rem; } /* room for the back-to-top button */
    footer .flex.flex-wrap.-mx-4 > div { margin-bottom: 2rem; }
    footer h3.text-2xl { font-size: 1.375rem; margin-bottom: 0.875rem; }
    footer h3.text-xl { font-size: 1.0625rem; margin-bottom: 0.875rem; }
    footer .space-y-4 > * + * { margin-top: 0.625rem; }
    footer hr.my-10 { margin-top: 0.5rem; margin-bottom: 1.5rem; }

    /* Legal links row: wrap and centre instead of overflowing */
    footer .flex.flex-col.md\:flex-row { text-align: center; gap: 1rem; }
    footer .flex.flex-col.md\:flex-row > p { margin-bottom: 0; font-size: 0.875rem; }
    footer .flex.flex-col.md\:flex-row > .flex {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1.25rem;
        font-size: 0.875rem;
    }
    footer .flex.flex-col.md\:flex-row > .flex > * { margin: 0 !important; }
    footer .flex.flex-col.md\:flex-row > .flex > a { padding: 0.25rem 0; }

    /* Social icons: real tap targets */
    footer .flex.space-x-4 a { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; }

    /* Back-to-top button: smaller and tucked in the corner */
    body > a.fixed.bottom-8.right-8 {
        bottom: 1rem;
        right: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    /* ------------------------------------------------------------
       7. Inner pages (legal pages, blog posts, request demo)
       ------------------------------------------------------------ */
    .page-wrapper .page-hero { padding: 6.5rem 0 1.75rem; }
    .page-wrapper .page-hero h1 { font-size: 1.5rem; line-height: 1.35; margin-bottom: 0.5rem; }
    .page-wrapper .page-hero .breadcrumb { margin-bottom: 0.875rem; font-size: 0.78rem; }
    .page-wrapper .page-hero-badge { margin-bottom: 0.625rem; }
    .page-wrapper .article-layout { padding: 1.25rem 0 2.5rem; }
    .page-wrapper .article-grid { gap: 1.25rem; }
    .page-wrapper .article-body { border-radius: 0.875rem; }
    .page-wrapper .article-content { padding: 1.25rem 1.125rem; font-size: 0.975rem; line-height: 1.85; }
    .page-wrapper .article-content h2 { font-size: 1.2rem; margin: 1.75rem 0 0.75rem; padding-bottom: 0.5rem; }
    .page-wrapper .article-content h2:first-child { margin-top: 0; }
    .page-wrapper .article-content h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
    .page-wrapper .article-content ul, .page-wrapper .article-content ol { padding-inline-start: 1.25rem; }
    .page-wrapper .article-content .zp-legal table { font-size: 0.8125rem; }
    .page-wrapper .article-content .zp-legal th, .page-wrapper .article-content .zp-legal td { padding: 0.5rem; }
    .page-wrapper .article-sidebar { position: static; }
    .page-wrapper .sidebar-cta a { padding: 0.8rem 1rem; }
    .page-wrapper .article-nav { grid-template-columns: 1fr; }
}

/* ================================================================
   8. Touch devices & small phones
   ================================================================ */

/* On touch screens a tapped card stays "hovered" and jumps up — keep it still */
@media (max-width: 1023px) and (hover: none) {
    .hover\:-translate-y-1:hover,
    .hover\:-translate-y-2:hover,
    .group:hover .group-hover\:rotate-6,
    .hover\:transform:hover { --tw-translate-y: 0; --tw-rotate: 0; }
    .saudi-tech-card:hover .saudi-tech-card-inner { transform: none; }
}

/* Small phones (iPhone SE, older Android) */
@media (max-width: 380px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
    #home h1 { font-size: 1.75rem; min-height: 3.9em; }
    #mainNav .logo-subtitle { max-width: 9rem; }
    section h2.text-3xl,
    main > .container h2.text-3xl { font-size: 1.5rem; }
    #compliance .grid.lg\:grid-cols-4 { grid-template-columns: 1fr; }
    #startup-package .text-6xl { font-size: 2.375rem; }
    main > .container .grid.lg\:grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Respect "reduce motion" on phones */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .animate-float, .animate-blob, .animate-bounce, .saudi-tech-card-inner { animation: none !important; }
}