/* Ironman Coffee — site chrome (header + footer).
   Self-contained. Replaces the GeneratePress header/footer, which are hidden below.
   No JavaScript is used anywhere in here: the mobile menu is a checkbox, so a
   delayed or blocked script can never leave the site without navigation. */

:root{
  --imxh-ink: #0b0806;
  --imxh-ink-2: #15100b;
  --imxh-line: rgba(255,255,255,.12);
  --imxh-cream: #f7f1e8;
  --imxh-mute: rgba(247,241,232,.62);
  --imxh-amber: #e8a33d;
  --imxh-amber-2: #ffd08a;
}

/* ---------- hide the theme's own chrome ---------- */
/* GP Premium's separate phone header (an empty 60px band). GP prints
   "#mobile-header{display:block!important}" inline *after* this file, so an
   equal-specificity rule loses on source order; this one outranks it. */
html body nav#mobile-header{ display: none !important; }

#masthead,
.site-header,
body > .skip-link,           /* GP's skip link; .imxh__skip replaces it */
.site-footer,
#generate-slideout-menu,
.slideout-overlay,
.woocommerce-store-notice.demo_store{
  display: none !important;
}

/* ============================================================
   HEADER
   ============================================================ */
/* Layout: the strip and the bar are siblings directly under <body>, both in
   normal flow. The strip wraps to 2-3 lines on phones, so nothing here depends
   on its height: it simply scrolls away, and the bar sticks. Because the bar's
   parent is <body>, it stays stuck for the whole page (a sticky element can
   only stick inside its parent's box). The only fixed number is the bar's own
   height, which this file sets itself. */
:root{ --imxh-bar: 76px; }

.imxh{
  position: sticky;
  top: 0;
  z-index: 9990;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* keep clear of the WordPress admin bar when logged in */
body.admin-bar .imxh{ top: 32px; }
@media (max-width: 782px){ body.admin-bar .imxh{ top: 46px; } }
@media (max-width: 600px){ body.admin-bar .imxh{ top: 0; } }

/* Demo landing page: pull the full-bleed hero up under the translucent bar. */
body.imx-page .imx-root{ margin-top: calc(-1 * var(--imxh-bar)); }

.imxh__skip{
  position: absolute; left: -9999px;
  background: var(--imxh-amber); color: #150f08;
  padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 700;
}
.imxh__skip:focus{ left: 0; top: 0; z-index: 10; }

/* --- demo strip --- */
.imxh__strip{
  position: relative;
  z-index: 9991;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: linear-gradient(90deg, #b9762a, #e8a33d 42%, #b9762a);
  color: #1a1006;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  padding: 8px 16px;
  line-height: 1.35;
}
.imxh__strip b{ font-weight: 800; }

/* --- main bar --- */
/* .imxh__bar is the same element as .imxh (sticky, so already positioned):
   it is the containing block the mobile panel anchors to with top:100%. */
.imxh__bar{
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(16px, 4vw, 44px);
  height: var(--imxh-bar);
  background: rgba(11,8,6,.82);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--imxh-line);
}

.imxh__logo{ display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; }
.imxh__logo img{ height: 42px; width: auto; display: block; }
.imxh__logo span{
  color: var(--imxh-cream); font-weight: 800; font-size: 17px; letter-spacing: -.01em;
}

/* the checkbox that drives the mobile panel — visually hidden, still focusable */
.imxh__cb{
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}

.imxh__nav{
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.imxh__list{
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
}
.imxh__list li{ margin: 0; padding: 0; list-style: none; }
.imxh__list > li > a{
  position: relative;
  color: var(--imxh-mute);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 6px 0;
  transition: color .22s ease;
}
.imxh__list > li > a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--imxh-amber), var(--imxh-amber-2));
  transition: right .28s cubic-bezier(.22,.8,.3,1);
}
.imxh__list > li > a:hover,
.imxh__list > li.current-menu-item > a{ color: var(--imxh-cream); }
.imxh__list > li > a:hover::after,
.imxh__list > li.current-menu-item > a::after{ right: 0; }

.imxh__cta{
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--imxh-amber), var(--imxh-amber-2));
  color: #180f05;
  font-weight: 750;
  font-size: 14px;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 22px -8px rgba(232,163,61,.75);
  transition: transform .22s ease, box-shadow .22s ease;
}
.imxh__cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(232,163,61,.9); color:#180f05; }

/* --- burger (mobile only) --- */
.imxh__burger{
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border-radius: 12px;
  border: 1px solid var(--imxh-line);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.imxh__burger i{
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: var(--imxh-cream); border-radius: 2px;
  transition: transform .28s cubic-bezier(.22,.8,.3,1), opacity .18s ease;
}
.imxh__burger i:nth-child(1){ top: 15px; }
.imxh__burger i:nth-child(2){ top: 21px; }
.imxh__burger i:nth-child(3){ top: 27px; }
.imxh__cb:checked ~ .imxh__burger i:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.imxh__cb:checked ~ .imxh__burger i:nth-child(2){ opacity: 0; }
.imxh__cb:checked ~ .imxh__burger i:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
.imxh__cb:focus-visible ~ .imxh__burger{ outline: 2px solid var(--imxh-amber); outline-offset: 2px; }

@media (max-width: 900px){
  :root{ --imxh-bar: 68px; }
  .imxh__burger{ display: block; }
  .imxh__bar{ gap: 14px; }
  .imxh__logo img{ height: 34px; }

  .imxh__nav{
    /* anchored to the bar, so it lands flush under it at any strip height */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 20px 26px;
    /* fully opaque: at .97 the page behind ghosted through the panel */
    background: var(--imxh-ink);
    border-bottom: 1px solid var(--imxh-line);
    box-shadow: 0 24px 40px -22px rgba(0,0,0,.9);
    /* closed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .26s ease, transform .26s ease, visibility .26s;
  }
  .imxh__cb:checked ~ .imxh__nav{ opacity: 1; visibility: visible; transform: none; }

  .imxh__list{ flex-direction: column; align-items: stretch; gap: 0; }
  .imxh__list > li > a{
    display: block; padding: 15px 4px; font-size: 16px;
    border-bottom: 1px solid var(--imxh-line);
  }
  .imxh__list > li > a::after{ display: none; }
  .imxh__cta{ margin-top: 18px; justify-content: center; padding: 14px 20px; font-size: 15px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.imxf{
  background: var(--imxh-ink);
  color: var(--imxh-cream);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  border-top: 1px solid var(--imxh-line);
  position: relative;
}
.imxf::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--imxh-amber), transparent);
  opacity: .55;
}
.imxf__wrap{ max-width: 1200px; margin: 0 auto; padding: clamp(48px, 7vw, 82px) clamp(20px, 5vw, 44px) 0; }

.imxf__grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 900px){ .imxf__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .imxf__grid{ grid-template-columns: 1fr; gap: 34px; } }

.imxf__brand img{ height: 52px; width: auto; display: block; margin-bottom: 18px; }
.imxf__blurb{
  color: var(--imxh-mute); font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; max-width: 34ch;
}
.imxf__badge{
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--imxh-line); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--imxh-mute);
}
.imxf__badge i{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--imxh-amber); box-shadow: 0 0 0 4px rgba(232,163,61,.18);
}

.imxf h3{
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--imxh-cream); margin: 0 0 18px;
}
.imxf ul{ list-style: none; margin: 0; padding: 0; }
.imxf ul li{ margin: 0 0 11px; list-style: none; }
.imxf ul a{
  color: var(--imxh-mute); text-decoration: none; font-size: 14.5px;
  transition: color .2s ease, padding-left .2s ease;
}
.imxf ul a:hover{ color: var(--imxh-amber-2); padding-left: 5px; }

.imxf__note{
  color: var(--imxh-mute); font-size: 13.5px; line-height: 1.75; margin: 0;
  border-left: 2px solid rgba(232,163,61,.5); padding-left: 16px;
}

.imxf__base{
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--imxh-line);
  padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  font-size: 13px; color: var(--imxh-mute);
}
.imxf__base p{ margin: 0; }
.imxf__base .imxf__sp{ margin-left: auto; }
.imxf__pill{
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(232,163,61,.35); color: var(--imxh-amber-2);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 650;
}
/* On phones the spacer took a flex gap slot and indented the first pill. */
@media (max-width: 700px){
  .imxf__base{ gap: 10px; }
  .imxf__base p{ flex-basis: 100%; margin-bottom: 6px; }
  .imxf__base .imxf__sp{ display: none; }
  /* compact enough that both pills share one row on a standard phone */
  .imxf__pill{ font-size: 11.5px; padding: 5px 11px; }
}

/* GP Premium's sticky add-to-cart panel is printed on every page but only
   belongs on product pages; elsewhere it is 485px wide and made phones scroll
   sideways (affiliate login / registration). */
body:not(.single-product) #wc-sticky-cart-panel{ display: none !important; }

/* GeneratePress back-to-top button: was the theme's red, now on-palette. */
.generate-back-to-top{
  background: rgba(11,8,6,.88) !important;
  color: var(--imxh-amber-2) !important;
  border: 1px solid rgba(232,163,61,.45) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.8);
}
.generate-back-to-top:hover,
.generate-back-to-top:focus{
  background: var(--imxh-amber) !important;
  color: #180f05 !important;
}

@media (prefers-reduced-motion: reduce){
  .imxh__cta, .imxh__list > li > a::after, .imxh__nav, .imxf ul a, .imxh__burger i{
    transition: none !important;
  }
}

/* Affiliate login / registration pages: a decorative glow in the auth layout
   (a pseudo-element) reached past the right edge and made phones scroll sideways
   (page 485px wide on a 390px screen). clip does not create a scroll container,
   so nothing sticky inside is affected; the site header sits outside #page anyway. */
body.imx-aff #page{ overflow-x: clip; }