/* ============================================================
   KIM Health & Beauty — WordPress-side fixes.

   The authored page CSS is fully self-scoped under #khb-*, so this file
   carries only the handful of things that depend on the WordPress runtime
   rather than on the design.

   NOTE ON !important: the authored rules are ID-scoped (#khb-home .khb-nav),
   which outranks any class- or attribute-based selector this file can write.
   Overriding them needs !important; it is used only on the specific
   declarations below, never broadly.
   ============================================================ */

/* 1. The theme's body margin would otherwise offset a full-bleed layout. */
html { -webkit-text-size-adjust: 100%; }
body.khb-canvas { margin: 0; padding: 0; background: #fff; overflow-x: hidden; }

/* 2. The admin bar is position:fixed at top:0 and would cover the site nav,
      which is also fixed at top:0. Logged-out visitors never see this rule. */
body.khb-canvas.admin-bar [id^="khb-"] .khb-nav { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.khb-canvas.admin-bar [id^="khb-"] .khb-nav { top: 46px !important; }
}

/* 3. At 320px the nav bar needs ~338px: a 105px logo, an 81px language button,
      a 24px burger, two 24px flex gaps and 40px of padding a side. The browser
      widens the layout viewport to fit and the whole page renders zoomed out.
      Tightening the padding and the gaps below 400px brings it to ~262px. */
@media (max-width: 400px) {
  body.khb-canvas [id^="khb-"] .khb-nav__in {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px !important;
  }
  body.khb-canvas [id^="khb-"] .khb-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 3b. Below ~340px even the tightened bar does not fit, because the logo is
       sized by height and its artwork is wide (36px tall renders ~163px across).
       Capping the wrapper only on these very narrow screens leaves the logo at
       full size on every ordinary phone (375px and up). */
@media (max-width: 360px) {
  body.khb-canvas [id^="khb-"] .khb-logo-wrap {
    max-width: 118px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  body.khb-canvas [id^="khb-"] .khb-logo {
    height: auto !important;
    max-height: 30px !important;
    max-width: 100% !important;
  }
}

/* 3c. A grid item defaults to min-width:auto, so its min-content width wins over
       the track. On the product pages the article column therefore stays 316px
       wide inside a 288px track and pushes the layout viewport out to 332px.
       min-width:0 lets it shrink and the text simply wraps, as intended. */
@media (max-width: 400px) {
  body.khb-canvas [id^="khb-"] .khb-artgrid > *,
  body.khb-canvas [id^="khb-"] .khb-art,
  body.khb-canvas [id^="khb-"] .khb-aside { min-width: 0 !important; }
}

/* 4. Tap targets. The dots render at 8x8 and the burger at 24-27px wide; both
      stay visually identical, this only grows the area that accepts the tap. */
body.khb-canvas [id^="khb-"] .khb-tq__dot { position: relative; }
body.khb-canvas [id^="khb-"] .khb-tq__dot::after {
  content: ""; position: absolute; inset: -14px -6px;
}
body.khb-canvas [id^="khb-"] .khb-burger { position: relative; }
body.khb-canvas [id^="khb-"] .khb-burger::after {
  content: ""; position: absolute; inset: -2px -10px;
}

/* 5. Keep the off-canvas mobile menu from ever contributing scroll width. */
body.khb-canvas [id^="khb-"] .khb-mob { max-width: 100vw; }