/* ==========================================================================
   File: css/header-lock-shim.css  (index.html only)
   Purpose: Keep logo + hamburger fixed; auto-size header & title offset
   How to use: change --logo-max and everything adapts.
   ========================================================================== */

/* --- Tunables (edit these two values only) --- */
:root {
  --logo-max: 80px;          /* logo max-height on mobile; increase/decrease as you like */
  --header-vpad: 12px;       /* vertical padding above/below the logo inside header */
  /* derived */
  --header-h: calc(var(--logo-max) + (2 * var(--header-vpad)));
  --hero-offset: calc(var(--header-h) + 8px); /* extra 8px breathing room under header */
}

@media (max-width: 991.98px) {

  /* Keep header row stable: no wrap, consistent height */
  .header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-height: var(--header-h) !important;
    padding-top: var(--header-vpad) !important;
    padding-bottom: var(--header-vpad) !important;
  }

  /* Logo scales but stays put; width auto, capped by height */
  .header a.logo {
    display: flex !important;
    align-items: center !important;
    max-width: 160px !important;         /* keep link box reasonable */
    min-width: 0 !important;
  }
  .header a.logo picture,
  .header a.logo img {
    display: block !important;
    max-height: var(--logo-max) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Hamburger pinned to the right and steady */
  .header_trigger {
    margin-left: auto !important;
    position: relative !important;
    z-index: 10000 !important;
  }

  /* Prevent Bootstrap/offcanvas scrollbar compensation from nudging layout */
  body[style*="padding-right"] { padding-right: 0 !important; }

  /* Don’t move the whole hero; offset ONLY the title block below the header */
  .hero { padding-top: 0 !important; }
  section.hero > .container > .hero_main > .section_header {
    padding-top: var(--hero-offset) !important;  /* auto follows logo/header size */
    margin-top: 0 !important;
  }
  section.hero > .container > .hero_main > .section_header > .section_header-title {
    margin-top: 0 !important;
  }
}