/* =========================================================
   Black River Woodworking - Separate Mobile Public Styles
   File: /assets/css/brw-mobile-public.css
   Purpose: Mobile-only styling that sits on top of the desktop site.
   ========================================================= */

@media (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 72px;
    }

    body {
        overflow-x: hidden !important;
    }

    body.public-left-menu {
        padding-left: 0 !important;
        padding-top: 62px !important;
    }

    body.public-menu-open {
        overflow: hidden !important;
    }

    body.public-menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(0, 0, 0, .42);
        backdrop-filter: blur(2px);
    }

    .public-menu-button {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        position: fixed !important;
        left: 12px !important;
        top: 10px !important;
        z-index: 10001 !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        border-radius: 999px !important;
        background: #0f3a22 !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
        font-weight: 900 !important;
        letter-spacing: .02em !important;
    }

    .public-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(330px, 88vw) !important;
        max-width: 88vw !important;
        height: 100vh !important;
        z-index: 10000 !important;
        transform: translateX(-105%) !important;
        transition: transform .24s ease !important;
        padding-top: 72px !important;
        border-right: 1px solid rgba(255,255,255,.12) !important;
    }

    body.public-menu-open .public-sidebar {
        transform: translateX(0) !important;
    }

    .public-brand {
        margin-top: -54px !important;
        padding-bottom: 14px !important;
    }

    .public-nav a {
        min-height: 43px !important;
        display: flex !important;
        align-items: center !important;
        padding: 11px 13px !important;
        font-size: .98rem !important;
    }

    main,
    .page,
    .container,
    .section,
    .form-page,
    .account-page,
    .shop-live-page,
    .story-gallery-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-wrap,
    .page-hero,
    .shop-live-hero,
    .dashboard-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-wrap {
        padding: 26px 14px !important;
    }

    .hero,
    .split,
    .two-col,
    .dashboard-top,
    .cards-grid,
    .card-grid,
    .service-grid,
    .project-grid,
    .gallery-grid,
    .lumber-grid,
    .testimonial-grid,
    .request-card-grid,
    .shop-live-grid,
    .story-grid,
    .mosaic-grid,
    .tools,
    .quote-layout,
    .feedback-layout,
    .form-layout {
        grid-template-columns: 1fr !important;
    }

    .hero-photo,
    .hero-photo img {
        min-height: 210px !important;
        max-height: 320px !important;
    }

    .hero-content,
    .hero-card,
    .page-card,
    .card,
    .image-card,
    .form-card,
    .account-header-card,
    .price-sheet,
    .shop-camera-card,
    .story-card,
    .cta {
        border-radius: 16px !important;
    }

    .hero-content {
        padding: 24px 20px !important;
    }

    h1,
    .hero-content h1,
    .page-hero h1,
    .shop-live-hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.45rem) !important;
        line-height: 1.08 !important;
    }

    h2,
    .section-title h2,
    .cta h2 {
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        line-height: 1.14 !important;
    }

    h3,
    .card h3,
    .image-card-body h3 {
        font-size: 1.22rem !important;
    }

    p,
    li,
    td,
    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    .hero-buttons,
    .btn-row,
    .footer-links,
    .tool-grid {
        gap: 10px !important;
    }

    .btn,
    button.btn,
    a.btn,
    input[type="submit"] {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hero-buttons .btn,
    .cta .btn,
    .form-card .btn,
    .tools .btn {
        width: 100% !important;
        margin-right: 0 !important;
    }

    input,
    select,
    textarea {
        min-height: 44px !important;
        border-radius: 10px !important;
    }

    textarea {
        min-height: 130px !important;
    }

    img,
    video,
    iframe {
        max-width: 100% !important;
    }

    .table-wrap,
    .products-table-wrap,
    .admin-table-wrap,
    .brw-mobile-table-scroll {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 720px;
    }

    .price-sheet table,
    .product-table,
    #lumberTable {
        min-width: 780px !important;
    }

    .brw-mobile-table-scroll::after,
    .table-wrap::after,
    .products-table-wrap::after {
        content: "Swipe sideways to see more";
        display: block;
        padding: 8px 2px 0;
        color: #6b6258;
        font-size: .82rem;
        font-weight: 800;
    }

    .account-header-card,
    .section-title-row,
    .shop-live-hero,
    .sheet-head,
    .request-card-top,
    .count-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .account-summary {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .footer,
    footer,
    .site-footer {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
}

@media (max-width: 520px) {
    body.public-left-menu {
        padding-top: 58px !important;
    }

    .public-menu-button {
        left: 10px !important;
        top: 8px !important;
        min-height: 42px !important;
        padding: 9px 12px !important;
    }

    .public-sidebar {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    main,
    .page,
    .container,
    .section,
    .form-page,
    .account-page,
    .shop-live-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-content,
    .card,
    .image-card-body,
    .form-card,
    .settings-card,
    .shop-camera-card,
    .story-card {
        padding: 18px !important;
    }

    .hero-wrap,
    .section {
        padding-top: 28px !important;
        padding-bottom: 32px !important;
    }

    .account-summary {
        grid-template-columns: 1fr !important;
    }

    .footer-logo {
        width: 88px !important;
        height: 88px !important;
    }
}