/* =====================================================================
   IGTT MOBILE HEADER V24 — unified iPhone/mobile top chrome
   Loads LAST. Desktop is intentionally untouched.
   ===================================================================== */

@media (max-width: 899px) {
  :root {
    --igtt-header-top-pad: max(20px, calc(env(safe-area-inset-top) + 8px));
    --igtt-header-bottom-pad: 14px;
    --igtt-header-logo-h: 30px;
  }

  /* Every modern IGTT logo header gets the same visual breathing room. */
  .header-logo {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: var(--igtt-header-top-pad) !important;
    padding-bottom: var(--igtt-header-bottom-pad) !important;
  }

  .header-logo .think-logo {
    display: block !important;
    width: auto !important;
    height: var(--igtt-header-logo-h) !important;
    max-width: min(190px, 54vw) !important;
    object-fit: contain !important;
  }

  /* App pages: preserve the sticky header, but stop pinning its contents
     against the very top edge of iPhones. */
  body.app-shell .header-logo {
    top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: var(--igtt-header-top-pad) !important;
    padding-bottom: var(--igtt-header-bottom-pad) !important;
    padding-left: max(62px, calc(52px + env(safe-area-inset-left))) !important;
    padding-right: max(62px, calc(52px + env(safe-area-inset-right))) !important;
  }

  body.app-shell .header-logo .think-logo {
    height: var(--igtt-header-logo-h) !important;
    max-width: min(190px, 54vw) !important;
  }

  /* 44px menu button centered on the 30px logo's visual center. */
  body.app-shell .top-left-menu {
    top: max(13px, calc(env(safe-area-inset-top) + 1px)) !important;
    left: max(12px, calc(env(safe-area-inset-left) + 10px)) !important;
  }

  /* A handful of legacy question pages still use .header rather than
     .header-logo. Give them the exact same top/bottom rhythm. */
  header.header,
  .header:not(.header-logo) {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--igtt-header-top-pad) !important;
    padding-bottom: var(--igtt-header-bottom-pad) !important;
  }

  .header .title-name-image {
    display: block !important;
    width: auto !important;
    height: var(--igtt-header-logo-h) !important;
    max-width: min(190px, 54vw) !important;
    object-fit: contain !important;
  }
}

/* iPhone 11 / 12 / 13 / 14-sized portrait widths: add a tiny bit more
   optical space so the wordmark does not feel pressed into the status bar. */
@media (min-width: 375px) and (max-width: 430px) {
  :root {
    --igtt-header-top-pad: max(22px, calc(env(safe-area-inset-top) + 9px));
    --igtt-header-bottom-pad: 15px;
  }
}

/* Very small phones still get breathing room without wasting vertical space. */
@media (max-width: 360px) {
  :root {
    --igtt-header-top-pad: max(17px, calc(env(safe-area-inset-top) + 7px));
    --igtt-header-bottom-pad: 12px;
    --igtt-header-logo-h: 28px;
  }
  .header-logo .think-logo,
  body.app-shell .header-logo .think-logo,
  .header .title-name-image {
    max-width: min(174px, 55vw) !important;
  }
  body.app-shell .top-left-menu {
    top: max(10px, env(safe-area-inset-top)) !important;
  }
}