/**
 * Safe area insets for Capacitor iOS/Android (status bar, notch, Dynamic Island)
 * Requires viewport-fit=cover in viewport meta for env() to work.
 * In browsers, env(safe-area-inset-*) resolves to 0, so no visual change.
 */

/* Header brand: "Playlists" on mobile, "Playlists.com" on desktop. Prevents "PlaylistsPlaylists.com" duplicate. */
.header-brand-mobile { display: none !important; }
.header-brand-desktop { display: inline !important; }
@media (max-width: 768px) {
  .header-brand-mobile { display: inline !important; }
  .header-brand-desktop { display: none !important; }
}

.blog-header-top {
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
}
.header-top {
  top: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-top, 0px)) !important;
}
/* Smartphone landscape: compact header to free vertical space */
@media (orientation: landscape) and (max-height: 500px) {
  .header-top {
    top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
  }
  .blog-header-top {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
  }
  /* HTML/Safari only: minimal space above header - landscape uses less status bar (Capacitor unchanged) */
  html:not([data-capacitor]) .header-top {
    top: calc(0rem + max(env(safe-area-inset-top, 0px), 14px)) !important;
  }
  html:not([data-capacitor]) .blog-header-top {
    padding-top: calc(0rem + max(env(safe-area-inset-top, 0px), 14px)) !important;
  }
}
/* Capacitor iOS only, landscape: further reduce space above header */
@media (orientation: landscape) and (max-height: 500px) {
  html[data-capacitor="true"] .header-top {
    top: calc(0.25rem + env(safe-area-inset-top, 0px)) !important;
  }
  html[data-capacitor="true"] .blog-header-top {
    padding-top: calc(0.25rem + env(safe-area-inset-top, 0px)) !important;
  }
}
/* "set up | help" - push below header on Capacitor (header is position:absolute with safe-area) */
.intro-help,
.intro-help-mini {
  margin-top: calc(3rem + env(safe-area-inset-top, 0px)) !important;
}
/* Help/guide panel - X close button below iOS status bar/notch */
#guide-panel {
  padding-top: env(safe-area-inset-top, 0px) !important;
}
#close-guide {
  top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
}
/* Help panel (profile, my-playlists, u) - close button below status bar, 44px touch target */
#help-panel {
  padding-top: env(safe-area-inset-top, 0px) !important;
}
#close-help-panel {
  top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Blog hamburger menu drawer - header + X close below iOS status bar/notch */
.blog-menu-drawer .blog-menu-header {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
}
/* Sign In button in hamburger menu (matches blog-menu-content a styling) */
.blog-menu-signin {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(var(--foreground));
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.blog-menu-signin:hover {
  background: rgb(var(--accent));
}
/* Capacitor: hide iOS sound banner (sound works without user gesture in native app) */
[data-capacitor="true"] #iosSoundBanner {
  display: none !important;
}

/* Prevent header overlapping timer box on mobile (Safari, iPhone 13 mini, etc.) when tab bar is present */
@media (max-width: 768px) {
  body.has-tab-bar .timer-container {
    margin-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Desktop browser: clear space between header and timer box (prevents overlap) */
@media (min-width: 769px) {
  .timer-container {
    margin-top: clamp(4rem, 6vw, 5rem) !important;
  }
}

/* Safari browser on iOS: env(safe-area-inset-top) returns 0 in portrait (known bug).
   Use a minimum inset for HTML/browser so content doesn't overlap status bar.
   Capacitor ([data-capacitor]) uses native WebView and reports correct values - no override.
   Reduced from 47px to 28px to avoid excessive white space above header in portrait. */
@media (max-width: 768px) {
  html:not([data-capacitor]) .header-top {
    top: calc(0.375rem + max(env(safe-area-inset-top, 0px), 28px)) !important;
  }
  html:not([data-capacitor]) body.has-tab-bar .timer-container {
    margin-top: calc(2.5rem + max(env(safe-area-inset-top, 0px), 28px)) !important;
  }
  html:not([data-capacitor]) .blog-header-top {
    padding-top: calc(0.5rem + max(env(safe-area-inset-top, 0px), 28px)) !important;
  }
  html:not([data-capacitor]) .intro-help,
  html:not([data-capacitor]) .intro-help-mini {
    margin-top: calc(3rem + max(env(safe-area-inset-top, 0px), 47px)) !important;
  }
  html:not([data-capacitor]) #guide-panel {
    padding-top: max(env(safe-area-inset-top, 0px), 47px) !important;
  }
  html:not([data-capacitor]) #close-guide {
    top: calc(1rem + max(env(safe-area-inset-top, 0px), 47px)) !important;
  }
  html:not([data-capacitor]) .blog-menu-drawer .blog-menu-header {
    padding-top: calc(1rem + max(env(safe-area-inset-top, 0px), 47px)) !important;
  }
  html:not([data-capacitor]) #help-panel {
    padding-top: max(env(safe-area-inset-top, 0px), 47px) !important;
  }
  html:not([data-capacitor]) #close-help-panel {
    top: calc(1rem + max(env(safe-area-inset-top, 0px), 47px)) !important;
  }
}

/* Capacitor iOS app only: In landscape, ensure timer clears header.
   Per-page overrides set margin-top: 0.5rem which causes overlap.
   Safari/HTML does not have this issue — do not apply to browser. */
@media (orientation: landscape) and (max-height: 500px) {
  html[data-capacitor="true"] body .container .timer-container {
    margin-top: clamp(2.75rem, 5vw, 3.25rem) !important;
  }
}

/* Smartphone landscape: flatten timer box across all timers (HTML + Capacitor).
   Reduces vertical spacing inside timer-display-block for better fit.
   Button bar: emom-splits reference – fixed 160px column, less-rounded buttons, larger tap targets. */
@media (orientation: landscape) and (max-height: 500px) {
  .timer-container { gap: 0.375rem !important; }
  .timer-display-block { padding: 1rem !important; }
  .timer-display-block .sound-toggle-icon { top: 0.375rem !important; right: 0.375rem !important; padding: 0.25rem !important; }
  .phase-label { margin-bottom: 0.125rem !important; font-size: 0.9375rem !important; }
  .timer-display-large { font-size: 3.25rem !important; margin-bottom: 0.25rem !important; }
  .round-info { margin-top: 0.25rem !important; font-size: 0.75rem !important; }
  .status-label { margin-bottom: 0.125rem !important; font-size: 0.8125rem !important; }
  #playlistTitleDisplay { padding-bottom: 0.25rem !important; margin-bottom: 0.25rem !important; }
  #playlistDescriptionDisplay { margin-top: 0.5rem !important; padding-top: 0.5rem !important; }

  /* Button bar: buttons left, timer right – emom-splits reference */
  .timer-and-controls,
  .hiit-timer-and-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 0.375rem !important;
    width: 100%;
  }
  .timer-and-controls .timer-control-buttons-card,
  .timer-and-controls .hiit-control-buttons-card,
  .hiit-timer-and-controls .hiit-control-buttons-card {
    flex-shrink: 0 !important;
    flex: 0 0 auto !important;
    order: -1 !important;
    padding: 0.25rem !important;
    min-width: 160px !important;
    width: auto !important;
    white-space: nowrap;
  }
  .timer-and-controls .control-buttons-container,
  .hiit-timer-and-controls .control-buttons-container {
    flex-direction: column !important;
    gap: 0.25rem !important;
    align-items: stretch !important;
  }
  .timer-and-controls .control-btn,
  .hiit-timer-and-controls .control-btn {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8rem !important;
    min-width: 0 !important;
    min-height: 2.25rem !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
    border-radius: 0.5rem !important;
  }
  .timer-and-controls .timer-display-block,
  .timer-and-controls #timerDisplayBlock,
  .hiit-timer-and-controls .timer-display-block,
  .hiit-timer-and-controls #timerDisplayBlock {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .timer-and-controls #iosSoundBanner,
  .hiit-timer-and-controls #iosSoundBanner {
    flex-basis: 100% !important;
    order: 10 !important;
  }
}