/* Adjust need-help (help pop-out) position to sit at the top of the hero image on mobile */

/* Mobile: move the help tab down so it aligns with the top of the hero image */
@media (max-width: 767px) {
  body .need-help {
    position: absolute !important;
    top: 120px !important; /* adjust as needed to align with hero image top */
    right: 0 !important; /* flush to the right edge */
    z-index: 3000 !important;
    margin-top: 0 !important;
  }

  /* Keep the circular spin icon visible within the moved area */
  body .need-help .box .spin-icon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  /* Hide any remaining hamburger/mobile menu icons */
  body .header-logo .mobile-menu,
  body .mobile-menu,
  .mobile-menu {
    display: none !important;
  }
}

/* Tablets / small desktops: slightly different offset */
@media (min-width: 768px) and (max-width: 1024px) {
  body .need-help {
    top: 100px !important;
    right: 0 !important;
  }
  body .need-help .box .spin-icon {
    top: 4px !important;
    right: 0 !important;
  }

  /* Hide hamburger on tablet as well */
  body .header-logo .mobile-menu,
  body .mobile-menu,
  .mobile-menu {
    display: none !important;
  }
}

/* Desktop: keep it at original place but ensure visibility */
@media (min-width: 1025px) {
  body .need-help {
    top: 5em; /* default value from base */
    right: 0 !important;
  }
  body .need-help .box .spin-icon {
    right: 0 !important;
  }
}

/* Mobile auth stack container (JS will move signUpDiv here on small screens) */
#mobile-auth-stack {
  position: fixed !important;
  top: 12px !important;
  right: 8px !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-end !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Buttons inside the stack (anchors are moved directly into the stack) */
#mobile-auth-stack a.button.signup,
#mobile-auth-stack a.signup,
#mobile-auth-stack .signup {
  display: block !important;
  box-sizing: border-box !important;
  padding: 5px 8px !important;
  font-weight: 400 !important;
  font-size: 0.85em !important;
  min-width: 100px !important;
  border-radius: 5px !important;
  border: 2px solid #007a8a !important;
  text-decoration: none !important;
  background-color: #fff !important;
  color: #007a8a !important;
  text-align: center !important;
}

/* If the ribbon element uses common class names, ensure it stays above the auth stack */
.ribbon,
.env-banner,
.local-host-banner,
.local-host,
.host-banner,
.development-banner {
  z-index: 9999 !important;
  position: relative !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Small screens ≤ 568px — single canonical block for ALL common mobile widths.
   Covers iPhone SE (375px), iPhone 14/15 (390px), Pixel/S-series (~393–412px),
   iPhone 14/15 Pro Max (430px), and any other device up to 568px.
   Do NOT add per-device exact-width (width: Xpx) overrides below for values
   that are already set here — they will work for every device in this range.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 568px) {
  /* Fixed header height for consistent layout across all mobile devices.
     .header.home-header  → Home page + Map search (Results.cshtml)
     .nav-wrapper         → Account pages (My Profile, Alerts, Favourites, etc.) */
  .header.home-header,
  .nav-wrapper {
    box-sizing: border-box !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    /* DI099: needed so position:absolute on .log-in-container is relative to the header */
    position: relative !important;
  }

  /* .nav-wrapper lacks a .body-content ancestor so the base CSS rule
     "body .body-content .nav-wrapper { padding: 29px 50px }" never fires.
     Add matching left padding so the CoGC logo aligns with container-fluid pages. */
  .nav-wrapper {
    padding-left: 12px !important;
  }

  .header.home-header #headercontainer {
    height: 110px !important;
  }

  /* DI099 (2026-03-25): .log-in-container spans the full header height and is
     positioned absolute within the relative header. Both the Dev.i logo (top:8px)
     and the Login button (top:60px) are absolute children of this container.
     Neither element is position:fixed, so both scroll away with the header.
     min-width ensures the container has a measurable width for right:0 children. */
  body .log-in-container,
  .log-in-container {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    height: 110px !important;
    min-width: 130px !important;
    width: auto !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Prevent any intermediate wrapper div from becoming a positioning context
     (Index.cshtml has style="position:relative;display:inline-block" on the
     button wrapper — !important overrides that inline style). */
  .log-in-container > div > div {
    position: static !important;
  }

  /* signUpDiv: static so the a.signup anchor can be absolutely positioned
     relative to .log-in-container (the nearest positioned ancestor). */
  body .log-in-container .signUpDiv,
  .log-in-container .signUpDiv {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .log-in-container .signUpDiv a.signup,
  .log-in-container .signUpDiv a.signup,
  body .log-in-container .signUpDiv .signup {
    display: block !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: none !important;
    line-height: 1.2 !important;
    min-width: 90px !important;
    padding: 6px 10px !important;
    font-size: 0.9em !important;
    background: #fff !important;
    color: #007a8a !important;
    border: 2px solid #007a8a !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
  }

  /* DI099: pin the login anchor 60px from the header top.
     Works for both Index.cshtml (no .signUpDiv wrapper) and _Nav.cshtml
     (button inside .signUpDiv). All intermediate divs are position:static so
     .log-in-container is the nearest positioned ancestor. */
  body .log-in-container a.signup,
  .log-in-container a.signup {
    position: absolute !important;
    top: 60px !important;
    right: 0 !important;
  }

  /* DI099: Dev.i logo is now position:absolute (not fixed) so it scrolls
     with the header instead of floating over page content.
     top:8px / right:0 places it at the top-right corner of .log-in-container,
     which itself has right:8px — giving the same visual 8px margin from the
     viewport edge as before, but tied to the header. */
  body .log-in-container > div .dev-ilogo {
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    left: auto !important;
    float: none !important;
    z-index: auto !important;
  }

  /* Hide the duplicate Dev.i logo in the header-logo/nav area on mobile;
     the .log-in-container version handles correct top-right positioning */
  .header-logo .dev-ilogo,
  .header-logo a.dev-ilogo,
  .header-logo span.mobileonly {
    display: none !important;
  }

  /* Need-help: fixed below tab bar, right-aligned.
     Overrides the max-width: 767px block (absolute/top:120px/z-index:3000) via
     cascade order — this block appears later in the file at equal specificity. */
  body .need-help {
    position: fixed !important;
    top: 111px !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1025 !important;
  }

  /* DI100: .mobile-filters chevron (position:absolute, right:5%) overlapped
     the spin-icon hit area. right:18px centres the 17px-wide chevron in the
     52px blank space between the save-search button (right edge x:338) and
     the viewport right edge (x:390): centre lands at x≈364 = midpoint of
     that space. The spin-icon only overlaps the empty upper portion of the
     h2; the visible ::after icon sits below (margin-top:1.3em) and is clear. */
  .mobile-filters {
    right: 18px !important;
  }

  /* DI102: On mobile the Dev.i logo sits at the top-right of .log-in-container.
     The base CSS border-left:2px (the "dividing line"), padding-left:10px and
     padding-right:15px all inflate the element width, nudging the logo left.
     Remove all decorative spacing so the element width equals the image width. */
  body .log-in-container > div .dev-ilogo,
  a.dev-ilogo,
  .dev-ilogo {
    border-left: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* DI090: need-help on iPhone 14 Pro Max (430px).
   top: 111px = 110px header + 1px. z-index: 1025 = above #home-hero (z-index: 1024).
   Redundant with the max-width: 568px block above, but retained as explicit
   documentation of the verified fix for this specific device. */
@media (width: 430px) {
  body .need-help {
    position: fixed !important;
    top: 111px !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1025 !important;
  }
}

/* ── Need-help pointer-event fix ────────────────────────────────────────────
   .need-help has no explicit width, so it inherits the ~340px natural width of
   the .box child (position:relative, right:-300px). This creates a large
   transparent hit-trap that blocks clicks on the Application search tab and
   other underlying elements. Disabling pointer-events on the container and
   re-enabling on the interactive .box lets underlying elements receive clicks
   while the help widget still works normally.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body .need-help {
    pointer-events: none !important;
  }
  body .need-help .box {
    pointer-events: auto !important;
  }
}