/* ──────────────────────────────────────────────────────────────
   ff-safe-area.css — iOS notch / home-indicator handling
   Loaded on every public finalfinal.ai page.

   Pairs with viewport-fit=cover in the viewport meta: the page now
   fills the whole screen edge-to-edge, so the fixed top/bottom nav
   bars need safe-area padding. Padding the bars by the safe-area
   insets makes their (blurred) background fill the notch + home-
   indicator strips while the content stays in the safe zone — one
   continuous bar instead of the page background showing through as
   a black strip.

   !important so these win over each page's inline
   `.top-content { padding: 12px 24px }` shorthand regardless of
   <link> vs <style> order. env() resolves to 0 on devices without
   insets (desktop, non-notch phones), so those layouts are
   unchanged.
   ────────────────────────────────────────────────────────────── */
.top-content {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    padding-left: calc(24px + env(safe-area-inset-left)) !important;
    padding-right: calc(24px + env(safe-area-inset-right)) !important;
}
.bottom-content {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(24px + env(safe-area-inset-left)) !important;
    padding-right: calc(24px + env(safe-area-inset-right)) !important;
}

/* ── MOBILE: bars-free header ──
   Drop the bottom bar entirely and strip the top bar down to just the
   hamburger. The FF logo rises into the space the top bar used to
   occupy (sits just below the notch). The hamburger floats in its
   original top-right spot. !important so these win over each page's
   inline mobile rules regardless of <link> vs <style> order. */
@media (max-width: 768px) {
    #bottom-bar { display: none !important; }
    .top-content {
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        border: none !important;
    }
    .top-border { display: none !important; }
    .studio-name { display: none !important; }
    .hamburger {
        position: fixed !important;
        top: calc(12px + env(safe-area-inset-top)) !important;
        right: calc(24px + env(safe-area-inset-right)) !important;
        z-index: 1001 !important;
        display: flex !important;
    }
    /* Align the FF logo's cap-top with the top of the hamburger lines
       (12px + 4px hamburger padding = 16px below the notch). The font
       sets USE_TYPO_METRICS, so the caps sit 0.1em below the text line
       box; translateY(-0.1em) cancels that gap so the visible letter
       tops — not the invisible line-box top — land on 16px. Works at
       any logo size because 0.1em scales with the font. */
    #ff-animation { padding-top: calc(16px + env(safe-area-inset-top)) !important; }
    #ff-text { transform: translateY(-0.1em); }
}