/**
 * 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: "Timerist" on mobile, "Timerist.com" on desktop. Prevents "TimeristTimerist.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;
  }
  html:not([data-capacitor]) .header-top {
    top: calc(0.5rem + max(env(safe-area-inset-top, 0px), 47px)) !important;
  }
  .blog-header-top {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
  }
  html:not([data-capacitor]) .blog-header-top {
    padding-top: calc(0.5rem + max(env(safe-area-inset-top, 0px), 47px)) !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-workouts, 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. */
@media (max-width: 768px) {
  html:not([data-capacitor]) .header-top {
    top: calc(clamp(1rem, 3vw, 2rem) + max(env(safe-area-inset-top, 0px), 47px)) !important;
  }
  html:not([data-capacitor]) body.has-tab-bar .timer-container {
    margin-top: calc(4rem + max(env(safe-area-inset-top, 0px), 47px)) !important;
  }
  html:not([data-capacitor]) .blog-header-top {
    padding-top: calc(0.75rem + max(env(safe-area-inset-top, 0px), 47px)) !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(2rem, 3vw, 2.5rem) !important;
  }
}