/* ==========================================================================
   mobile.css — Shared mobile foundation for the Rosehip web frontend
   ==========================================================================
   Purpose:
     Generic, additive mobile overrides shared by every template in
     web_assets/templates/. Desktop rendering must remain 100% untouched:
     everything in this file lives inside max-width media queries, except a
     couple of harmless global guards documented below.

   Standard breakpoints (use these in per-page CSS too):
     - 600px  → phone
     - 768px  → large phone
     - 992px  → tablet

   Notes:
     - Some templates use !important in their inline styles, so the shadow
       and utility overrides here also use !important to win reliably.
     - box-sizing is deliberately NOT changed globally; pages rely on their
       own box-sizing rules.
     - Per-page layout/typography redesign belongs in each page's own
       <style> block, not here. Keep this file lean and generic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global guards (safe outside media queries)
   -------------------------------------------------------------------------- */

/* Prevent mobile browsers from auto-inflating text on orientation change. */
html,
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* These pages never rely on horizontal page scroll; kill accidental
   sideways overflow from wide shadows / decorative elements. */
body {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Large phone and below (≤768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Respect notches / rounded corners in landscape. */
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    /* Lighter clay shadows on small screens: keeps the extruded-clay feel
       but reduces the heavy multi-layer blur (cheaper to paint, less visual
       noise at small sizes). Covers the common clay surfaces used across
       pages. */
    .hw-card,
    .card,
    .layer-top,
    .action-button,
    .server-card,
    .modal-box {
        box-shadow:
            6px 6px 14px rgba(0, 0, 0, 0.55),
            inset 2px 2px 5px rgba(255, 255, 255, 0.08),
            inset -3px -3px 6px rgba(0, 0, 0, 0.4) !important;
    }

    /* Comfortable touch targets (Apple/Google guideline: ≥44px). */
    .action-button,
    .btn,
    button.category-btn,
    .form-submit {
        min-height: 44px;
    }

    /* Toast notifications: never wider than the viewport. */
    .notification {
        min-width: 0 !important;
        max-width: calc(100vw - 2rem) !important;
    }

    /* Modals: cap to the viewport and let long content scroll. */
    .modal-box,
    .modal-content {
        max-width: min(92vw, 560px) !important;
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* --------------------------------------------------------------------------
   Phone (≤600px)
   --------------------------------------------------------------------------
   Intentionally minimal: page-specific typography and layout tightening is
   handled per page. Only truly generic utilities belong here. */
@media (max-width: 600px) {

    /* Slightly tighter toast margin on the smallest screens. */
    .notification {
        max-width: calc(100vw - 1rem) !important;
    }

    /* Modals may use nearly the full width on phones. */
    .modal-box,
    .modal-content {
        max-width: 96vw !important;
    }
}