/**
 * ProwessApps V4
 * Global responsive layout and mobile fixed-header fix
 * Load this stylesheet LAST on every public page.
 */

/* =========================================================
   1. GLOBAL DOCUMENT CONTAINMENT
   ========================================================= */
html {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    overflow-x: clip;
    scroll-padding-top: calc(var(--pa-header-height, 4.25rem) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    margin: 0;
}

.pa-site-header,
.pa-page-body,
.pa-page-body > main,
main#main-content,
.pa-page-shell,
.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
    max-width: 100%;
}

.pa-page-body,
.pa-page-body > main,
main#main-content {
    width: 100%;
}

.pa-page-body {
    flex: 1 0 auto;
    overflow-x: clip;
}

/* Bootstrap rows should not create document-level overflow. */
.pa-page-body .row {
    min-width: 0;
}

.pa-page-body .row > * {
    min-width: 0;
}

/* =========================================================
   2. GLOBAL MEDIA AND RESPONSIVE CONTENT
   ========================================================= */
img,
picture,
svg,
video,
canvas,
iframe,
object,
embed,
ins.adsbygoogle {
    max-width: 100%;
}

img,
picture,
svg,
video,
canvas {
    height: auto;
}

pre,
.table-responsive,
.pa-code-wrapper,
.pa-output-box,
.pa-markdown-output-wrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pa-content-card,
.pa-reading-content,
.pa-sidebar,
.pa-form-card,
.pa-quiz-card,
.pa-comment-section,
.pa-user-card,
.pa-auth-shell,
.pa-markdown-app,
.pa-tool-workspace,
.pa-course-layout,
.pa-course-main,
.pa-course-sidebar {
    min-width: 0;
    max-width: 100%;
}

/* Long URLs and tokens must wrap instead of widening the page. */
p,
li,
dd,
td,
th,
label,
.pa-card-link,
.pa-mobile-nav-link,
.pa-tool-card,
.pa-auth-card {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* =========================================================
   3. HEADER FOUNDATION
   ========================================================= */
.pa-site-header {
    top: 0;
    z-index: 1030;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.pa-site-header .navbar,
.pa-site-header .pa-page-shell,
.pa-site-header .navbar-collapse,
.pa-site-header .navbar-nav,
.pa-navbar-brand,
.pa-brand-copy,
.pa-header-actions {
    min-width: 0;
    max-width: 100%;
}

.pa-navbar-brand {
    flex-shrink: 1;
}

.pa-brand-copy {
    overflow: hidden;
}

.pa-brand-title,
.pa-brand-tagline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   4. MOBILE AND TABLET: FIXED HEADER ON EVERY PAGE
   ========================================================= */
@media (max-width: 1199.98px) {
    :root {
        --pa-mobile-header-offset:
            calc(var(--pa-header-height, 4.25rem) + env(safe-area-inset-top));
    }

    .pa-site-header {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        transform: none !important;
    }

    /* Normal V4 pages use this wrapper. */
    body > .pa-page-body {
        padding-top: var(--pa-mobile-header-offset);
    }

    /* Compatibility for older pages where main is a direct body child. */
    body > main#main-content {
        padding-top: var(--pa-mobile-header-offset);
    }

    /* Prevent accidental double spacing if main is inside pa-page-body. */
    .pa-page-body > main#main-content {
        padding-top: 0;
    }

    .pa-desktop-nav {
        display: none !important;
    }

    .pa-header-actions,
    .pa-menu-button {
        display: flex !important;
    }

    .pa-navigation-drawer.offcanvas {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(86vw, 27rem) !important;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(100%);
    }

    .pa-navigation-drawer.offcanvas.show,
    .pa-navigation-drawer.offcanvas.showing {
        transform: none;
    }

    .pa-navigation-drawer.offcanvas:not(.show):not(.showing) {
        visibility: hidden;
    }

    .pa-navigation-drawer .offcanvas-body {
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* =========================================================
   5. DESKTOP: STICKY HEADER AND DESKTOP NAVIGATION
   ========================================================= */
@media (min-width: 1200px) {
    .pa-site-header {
        position: sticky !important;
        top: 0;
    }

    body > .pa-page-body,
    body > main#main-content {
        padding-top: 0;
    }

    .pa-desktop-nav {
        display: flex !important;
    }

    .pa-header-actions,
    .pa-menu-button,
    .pa-navigation-drawer,
    .offcanvas-backdrop {
        display: none !important;
    }
}

/* =========================================================
   6. PHONE-SPECIFIC SAFETY
   ========================================================= */
@media (max-width: 575.98px) {
    .pa-site-header .navbar {
        width: 100%;
        padding-block: .35rem;
    }

    .pa-site-header .pa-page-shell {
        width: 100%;
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }

    .pa-navbar-brand {
        gap: .5rem;
        max-width: calc(100% - 6.5rem);
    }

    .pa-brand-logo {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .pa-brand-title {
        font-size: 1.05rem;
    }

    .pa-brand-tagline {
        font-size: .5rem;
        letter-spacing: .08em;
    }

    .pa-header-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .pa-navigation-drawer.offcanvas {
        width: min(88vw, 24rem) !important;
        border-radius: 1rem 0 0 1rem;
    }

    .pa-content-card,
    .pa-form-card,
    .pa-quiz-card,
    .pa-comment-section,
    .pa-user-card {
        max-width: 100%;
    }
}

/* =========================================================
   7. SAFARI FALLBACK
   ========================================================= */
@supports not (overflow: clip) {
    html,
    .pa-page-body {
        overflow-x: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-navigation-drawer {
        transition: none !important;
    }
}