/*  ═══════════════════════════════════════════════════════════════
    RESPONSIVE POLISH  ·  Global UI/UX overhaul — all screensizes
    Added at the end of the CSS cascade to win specificity cleanly.
    ═══════════════════════════════════════════════════════════════ */

/* ─── 1. GLOBAL TYPOGRAPHY & READABILITY ───────────────────── */
:root {
    --rp-touch: 44px;
    --rp-gap-sm: clamp(0.5rem, 2vw, 1rem);
    --rp-gap-md: clamp(1rem, 3vw, 2rem);
    --rp-gap-lg: clamp(1.5rem, 5vw, 3rem);
    --rp-radius: clamp(12px, 2vw, 20px);
    --rp-px: clamp(16px, 5vw, 32px);
}

/* Prevent text from touching screen edges on every device */
.pn-container,
.container {
    padding-inline: max(16px, env(safe-area-inset-left));
}

/* All section headings — fluid from mobile to 4K */
h1, .pn-display--xl { font-size: clamp(2rem, 7vw, 6rem); }
h2, .pn-display--lg { font-size: clamp(1.7rem, 4.5vw, 4rem); }
h3, .pn-display--md { font-size: clamp(1.25rem, 2.5vw, 2.2rem); }

/* Fluid body text */
p, li { font-size: clamp(0.9rem, 1.4vw, 1.05rem); }

/* Prevent long words from overflowing on small screens */
p, h1, h2, h3, h4, h5, td, th, label, span {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Eliminate horizontal scroll everywhere */
html, body {
    max-width: 100vw;
    overflow-x: clip;
}


/* ─── 2. TOUCH TARGETS ──────────────────────────────────────── */
a, button, [role="button"], input[type="submit"], input[type="button"],
select, label[for], .al-toggle-btn, .btn-pill, .pn-btn, .lang-btn {
    min-height: var(--rp-touch);
    min-width: var(--rp-touch);
}

/* Exceptions: inline text links don't need block touch targets */
a:where(:not(.btn-pill):not(.pn-btn):not(.nav-links a):not(.al-reply-link)) {
    min-height: unset;
    min-width: unset;
}


/* ─── 3. NAV — COMPACT MOBILE HEADER ────────────────────────── */
@media (max-width: 576px) {
    .navbar {
        padding: 0.55rem 0;
    }

    .navbar .container {
        padding-inline: 14px;
    }

    .logo {
        font-size: clamp(1.15rem, 5.5vw, 1.4rem);
    }

    /* hamburger: larger tap target */
    .hamburger {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    /* lang button: compact but tappable */
    .lang-btn {
        padding: 9px 10px;
        min-width: 42px;
        min-height: 42px;
    }
}


/* ─── 4. FREE AI AUDIT PAGE ─────────────────────────────────── */
@media (max-width: 640px) {
    .audit-page-hero { padding-top: clamp(78px, 20vw, 110px); }

    .audit-form-card {
        padding: clamp(18px, 5vw, 28px) clamp(14px, 4vw, 22px);
        border-radius: 16px;
        margin: 0 4px;
    }

    /* Stack 2-col row into 1-col on narrow phones */
    .audit-row { grid-template-columns: 1fr !important; gap: 0; }

    .audit-input, .audit-select, .audit-textarea {
        font-size: 1rem; /* prevent iOS zoom */
        padding: 13px 14px;
    }

    .audit-submit-btn {
        font-size: 0.88rem;
        padding: 16px 12px;
    }

    .value-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 24px 0 40px;
    }

    .value-card { padding: 16px; }

    .trust-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .pn-btn-group {
        flex-direction: column;
        width: 100%;
    }

    .pn-btn-group .pn-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Mid-range tablets */
@media (min-width: 641px) and (max-width: 900px) {
    .value-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ─── 5. CONTACT PAGE ───────────────────────────────────────── */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .contact-info-card,
    .contact-form-wrapper {
        padding: clamp(18px, 5vw, 28px);
    }
}

@media (max-width: 480px) {
    /* Hero heading on contact page */
    .pn-page .pn-display--lg {
        font-size: clamp(1.9rem, 10vw, 3rem);
        line-height: 1.12;
    }

    /* Stack the geo-response atlas card */
    .contact-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    /* Full-width CTA buttons */
    .pn-btn { width: 100%; justify-content: center; }
}


/* ─── 6. BLOGS PAGE ─────────────────────────────────────────── */
@media (max-width: 860px) {
    /* blogs layout: hero + sidebar stacked */
    .blogs-layout,
    .blog-layout-inner {
        grid-template-columns: 1fr !important;
    }

    /* sidebar full-width below content */
    .blog-sidebar { margin-top: 2rem; }
}

@media (max-width: 540px) {
    .blog-grid { grid-template-columns: 1fr; gap: 1.25rem; }

    .blog-card { border-radius: 16px; }

    .blog-image { height: 180px; }

    .blog-title { font-size: 1.1rem; }

    .blog-excerpt { font-size: 0.9rem; }

    /* filter tabs: wrap and full-width */
    .blog-filters,
    .filter-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }

    .blog-filters button,
    .filter-tabs button,
    .filter-tabs a {
        font-size: 0.8rem;
        padding: 7px 14px;
        white-space: nowrap;
    }
}


/* ─── 7. SERVICES PAGE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .services-grid,
    .service-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    /* CTA button group */
    .services-hero .pn-btn-group,
    .service-cta .pn-btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .services-hero .pn-btn,
    .service-cta .pn-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 540px) {
    /* Pricing cards */
    .lp-pricing-grid { grid-template-columns: 1fr !important; }

    .lp-price-card { padding: 22px 18px; }

    /* Secondary nav buttons on services page */
    .services-secondary-nav {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .services-secondary-nav a {
        font-size: 0.8rem;
        padding: 8px 14px;
    }
}


/* ─── 8. ABOUT PAGE ─────────────────────────────────────────── */
@media (max-width: 860px) {
    .about-grid { grid-template-columns: 1fr !important; }

    .highlight-boxes {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Geo-response atlas on about */
    .geo-atlas,
    .response-atlas {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .highlight-box { padding: 1.2rem; }
    .highlight-box i { font-size: 1.5rem; }
}


/* ─── 9. HOME PAGE — HERO ───────────────────────────────────── */
@media (max-width: 560px) {
    /* Key highlights: stack vertically */
    .key-highlights {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    body.home-cinematic .key-highlights,
    body.home-whisper-editorial .key-highlights {
        align-items: center;
    }

    /* Profile image: reasonable size on tiny screens */
    .profile-img {
        width: min(70vw, 220px) !important;
        height: min(70vw, 220px) !important;
    }

    /* CTA buttons: full-width */
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.75rem;
    }

    .cta-primary, .cta-secondary {
        width: 100% !important;
        text-align: center;
        justify-content: center;
    }
}

/* Achievement badges — wrap cleanly */
@media (max-width: 420px) {
    .achievement-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .achievement-badges .badge {
        font-size: 0.72rem;
        padding: 6px 12px;
    }
}


/* ─── 10. FOOTER ────────────────────────────────────────────── */
@media (max-width: 860px) {
    .footer-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem;
    }

    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
    .footer-content {
        grid-template-columns: 1fr !important;
    }

    .footer-column { border-radius: 14px; }

    .modern-footer { padding-bottom: 32px; }

    /* "Book a call" CTA at footer bottom: full width */
    .footer-cta-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}


/* ─── 11. ADMIN AUDIT LEADS ─────────────────────────────────── */
@media (max-width: 900px) {
    .al-topbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .al-topbar h1 { font-size: 1.2rem; }

    .al-topbar-right {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .btn-pill {
        font-size: 0.78rem;
        padding: 8px 14px;
        min-height: 38px;
    }

    .al-stats-strip {
        flex-wrap: wrap;
        gap: 8px;
    }

    .al-stat { min-width: 80px; }

    .al-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .al-score-wrap {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .al-score-bar-wrap { flex: 1; min-width: 120px; }

    .al-card-bottom {
        flex-wrap: wrap;
        gap: 10px;
    }

    .al-status-form { flex-wrap: wrap; }

    .al-status-select { width: 100%; }

    .al-actions { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 560px) {
    .al-tier-filters { flex-wrap: wrap; }

    .al-tier-btn { font-size: 0.78rem; padding: 6px 12px; }

    .al-search-bar {
        flex-direction: column;
        gap: 8px;
    }

    .al-search-bar input { width: 100%; }

    .al-breakdown-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ─── 12. FREE AI AUDIT MODAL ───────────────────────────────── */
@media (max-width: 600px) {
    .audit-modal-overlay,
    [id*="auditModal"],
    [class*="audit-modal"] {
        padding: 12px;
        align-items: flex-end; /* slide up from bottom on mobile */
    }

    .audit-modal,
    [class*="audit-modal"] > div {
        border-radius: 20px 20px 0 0;
        max-height: 92dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ─── 13. DRIP UNSUBSCRIBE PAGE ─────────────────────────────── */
@media (max-width: 480px) {
    /* drip-unsubscribe.php */
    body > .card,
    .card[style*="padding: 3rem"] {
        padding: 2rem 1.25rem !important;
        border-radius: 14px !important;
    }
}


/* ─── 14. GLOBAL FORM INPUTS: no iOS zoom ───────────────────── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
    }
}


/* ─── 15. SECTION PADDING — FLUID ───────────────────────────── */
section:not(.pn-section):not(.audit-page-hero) {
    padding-top: clamp(48px, 8vw, 96px);
    padding-bottom: clamp(48px, 8vw, 96px);
}


/* ─── 16. IMAGES — ALWAYS RESPONSIVE ───────────────────────── */
img { max-width: 100%; height: auto; display: block; }

/* Profile image: never overflow on any device */
.profile-img {
    max-width: 100%;
    width: min(var(--profile-size, 340px), 78vw) !important;
    height: min(var(--profile-size, 340px), 78vw) !important;
}


/* ─── 17. TABLES: horizontal scroll on mobile ───────────────── */
.table-wrap,
table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }

/* Restore for non-table wrappers */
section table, section .table-wrap { display: table; }


/* ─── 18. SKIP LINK — always visible on focus ───────────────── */
.skip-link:focus { top: 0; z-index: 99999; }


/* ─── 19. SMOOTH FOCUS RINGS (accessibility) ───────────────── */
:focus-visible {
    outline: 2px solid rgba(253, 187, 45, 0.85);
    outline-offset: 3px;
    border-radius: 4px;
}

:focus:not(:focus-visible) { outline: none; }


/* ─── 20. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ─── 21. ULTRA-WIDE (≥1800px) — CONTENT CAPS ──────────────── */
@media (min-width: 1800px) {
    .pn-container { max-width: 1440px; }
    .container    { max-width: 1400px; }
    .modern-footer .container { max-width: 1440px; }
}


/* ─── 22. PRISMA-NOIR RESPONSIVE FIXES ──────────────────────── */
/* Display text overflows on narrow phones */
@media (max-width: 480px) {
    .pn-display--xl { font-size: clamp(2rem, 12vw, 3.5rem); }
    .pn-display--lg { font-size: clamp(1.75rem, 9vw, 2.8rem); }
    .pn-display--md { font-size: clamp(1.45rem, 7vw, 2rem); }

    .pn-section { padding: clamp(44px, 10vw, 80px) 0; }

    /* Button groups: stack vertically on very small phones */
    .pn-btn-group {
        flex-direction: column;
        width: 100%;
    }
    .pn-btn-group .pn-btn {
        width: 100%;
        justify-content: center;
    }

    /* Badge: smaller font */
    .pn-badge { font-size: 0.7rem; padding: 6px 14px; }

    /* Section header max-width */
    .pn-section-header { padding-inline: 0; }
}


/* ─── 23. FAQ ACCORDION — MOBILE TOUCH ──────────────────────── */
@media (max-width: 640px) {
    .faq-question {
        font-size: 0.92rem !important;
        padding: 16px 0 !important;
        line-height: 1.5;
    }

    .faq-item { padding: 0 16px !important; }

    .faq-answer p { font-size: 0.88rem; }
}


/* ─── 24. CHATBOT BUTTON — SAFE AREA INSET ──────────────────── */
@media (max-width: 768px) {
    /* float chat button above iOS home indicator */
    [class*="chat-btn"],
    [id*="chatbot"],
    .chat-fab {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        right: calc(1rem + env(safe-area-inset-right));
    }
}


/* ─── 25. CERTIFICATIONS PAGE ───────────────────────────────── */
@media (max-width: 640px) {
    .cert-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cert-meta { gap: 1rem; }

    .cert-provider { gap: 1rem; }

    .certificates-grid,
    .cert-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ─── 26. PROJECTS PAGE ─────────────────────────────────────── */
@media (max-width: 640px) {
    .projects-grid,
    .project-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .project-card { border-radius: 16px; }
}


/* ─── 27. SKILLS GRID ───────────────────────────────────────── */
@media (max-width: 640px) {
    .skills-grid { grid-template-columns: 1fr !important; gap: 1rem; }

    .skill-category { padding: 1.25rem; }

    .skill-tag { font-size: 0.82rem; padding: 5px 12px; }
}


/* ─── 28. EXPERTISE GRID ────────────────────────────────────── */
@media (max-width: 480px) {
    .expertise-grid { grid-template-columns: 1fr !important; }

    .expertise-card { padding: 1.25rem 1rem; }
}


/* ─── 29. TIMELINE EXPERIENCE ───────────────────────────────── */
@media (max-width: 560px) {
    .timeline-item { padding: 14px 16px; border-radius: 16px; }

    .timeline-content .role { font-size: 0.95rem; }

    .timeline-content .company { font-size: 0.82rem; }
}


/* ─── 30. HIRE-ME GRID ──────────────────────────────────────── */
@media (max-width: 480px) {
    .hire-me-grid { grid-template-columns: 1fr !important; gap: 1rem; }

    .hire-card { padding: 1.25rem; border-radius: 16px; }
}


/* ─── 31. NAV LINKS ACTIVE STATE — MOBILE DRAWER ───────────── */
@media (max-width: 1320px) {
    .nav-links li a.is-active {
        background: rgba(253, 187, 45, 0.18) !important;
        color: #ffd27d !important;
        border-left: 3px solid #fdbb2d;
        padding-left: 20px !important;
    }
}


/* ─── 32. LANGUAGE DROPDOWN — SAFE ON ALL DEVICES ───────────── */
@media (max-width: 360px) {
    .lang-dropdown {
        left: 4px !important;
        right: 4px !important;
        width: auto !important;
    }
}


/* ─── 33. ERROR PAGES (403, 404, 500) ───────────────────────── */
@media (max-width: 480px) {
    .error-page h1 { font-size: clamp(4rem, 22vw, 8rem); }
    .error-page h2 { font-size: clamp(1.2rem, 5vw, 1.8rem); }
    .error-page .error-actions { flex-direction: column; gap: 0.75rem; }
    .error-page .error-actions a { width: 100%; justify-content: center; }
}


/* ─── 34. SCROLLBAR — THIN ON WEBKIT ────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(253, 187, 45, 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(253, 187, 45, 0.5); }


/* ─── 35. SELECTION COLOR ───────────────────────────────────── */
::selection {
    background: rgba(253, 187, 45, 0.28);
    color: #fff;
}