/* ==========================================================================
   Involved Holidays — Offers page
   Location: wp-content/themes/seventy9-child/blocks/css/offers.css
   Loaded ONLY on pages using template-offers.php (see functions.php snippet).

   Performance / safety notes:
   - No JavaScript. No @import. No webfont downloads (uses the theme's Lato,
     falls back to system sans if it isn't loaded).
   - Every custom property and class is namespaced `ihx-` / `--ihx-` and every
     rule is scoped inside `.ihx-offers`, so nothing can leak into or collide
     with the parent theme.
   - No element/tag selectors outside the scope. No `!important`.
   ========================================================================== */

.ihx-offers{
  /* ---- brand base ---- */
  --ihx-blue-900:#12283f;
  --ihx-blue-800:#1b3f63;
  --ihx-blue-700:#275a92;   /* logo deep blue */
  --ihx-blue-600:#2f6ba9;
  --ihx-blue-500:#2595c6;   /* logo sky blue */
  --ihx-blue-300:#95cfe6;
  --ihx-blue-200:#c7e5f2;
  --ihx-blue-100:#e6f2f9;
  --ihx-blue-050:#f3f9fc;

  --ihx-gold-600:#8f7c45;
  --ihx-gold-500:#ab8b44;
  --ihx-gold-400:#c99c43;
  --ihx-gold-300:#dcbc74;
  --ihx-gold-050:#fbf7ee;

  --ihx-sand:#f6f2e9;
  --ihx-grey-800:#39434e;
  --ihx-grey-700:#54606d;
  --ihx-grey-600:#6f7c8a;
  --ihx-grey-300:#d3dae0;
  --ihx-grey-200:#e6eaee;
  --ihx-grey-100:#f2f5f7;

  --ihx-warning:#b07c1f;

  --ihx-gradient-gold:linear-gradient(90deg,var(--ihx-gold-600) 0%,var(--ihx-gold-400) 100%);
  --ihx-gradient-blue:linear-gradient(135deg,var(--ihx-blue-700) 0%,var(--ihx-blue-500) 100%);
  /* Hero overlay. Darkened for stronger headline contrast over the photo.
     Tune the three alpha values below to taste (higher = darker). */
  --ihx-scrim:linear-gradient(to top,rgba(18,40,63,.88) 0%,rgba(18,40,63,.68) 45%,rgba(18,40,63,.5) 100%);

  /* ---- semantic ---- */
  --ihx-primary:var(--ihx-blue-700);
  --ihx-primary-hover:var(--ihx-blue-800);
  --ihx-primary-active:var(--ihx-blue-900);
  --ihx-accent:var(--ihx-gold-500);
  --ihx-heading:var(--ihx-blue-700);
  --ihx-text:var(--ihx-grey-800);
  --ihx-muted:var(--ihx-grey-600);
  --ihx-link:var(--ihx-blue-500);
  --ihx-link-hover:var(--ihx-blue-700);
  --ihx-border:var(--ihx-grey-300);
  --ihx-border-subtle:var(--ihx-grey-200);
  --ihx-focus:0 0 0 3px rgba(37,149,198,.45);

  /* ---- type (no webfont request; Lato if the theme already loaded it) ---- */
  --ihx-font:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ihx-fs-xs:13px;
  --ihx-fs-sm:15px;
  --ihx-fs-base:17px;
  --ihx-fs-md:19px;
  --ihx-fs-lg:23px;

  --ihx-h2:700 clamp(26px,3.4vw,34px)/1.2 var(--ihx-font);
  --ihx-h3:700 clamp(22px,2.4vw,28px)/1.2 var(--ihx-font);
  --ihx-h4:700 var(--ihx-fs-lg)/1.35 var(--ihx-font);
  --ihx-lead:300 var(--ihx-fs-md)/1.6 var(--ihx-font);
  --ihx-body:400 var(--ihx-fs-base)/1.6 var(--ihx-font);
  --ihx-body-sm:400 var(--ihx-fs-sm)/1.6 var(--ihx-font);
  --ihx-caption:400 var(--ihx-fs-xs)/1.35 var(--ihx-font);
  --ihx-label:700 var(--ihx-fs-xs)/1.35 var(--ihx-font);
  --ihx-btn:700 var(--ihx-fs-sm)/1 var(--ihx-font);
  --ihx-nav:700 var(--ihx-fs-sm)/1 var(--ihx-font);

  /* ---- layout ---- */
  --ihx-gutter:24px;
  --ihx-container:1240px;
  --ihx-radius-sm:6px;
  --ihx-radius-md:10px;
  --ihx-radius-pill:999px;

  --ihx-shadow-xs:0 1px 2px rgba(18,40,63,.06);
  --ihx-shadow-sm:0 2px 6px rgba(18,40,63,.08);
  --ihx-shadow-lg:0 14px 36px rgba(18,40,63,.14);

  --ihx-dur:160ms;
  --ihx-ease:cubic-bezier(.4,0,.2,1);

  /* Offset for the sticky in-page nav. If your theme has a sticky site
     header, bump this to (site header height + 66px). */
  --ihx-anchor-offset:90px;

  font:var(--ihx-body);
  color:var(--ihx-text);
  background:#fff;
}

.ihx-offers *,
.ihx-offers *::before,
.ihx-offers *::after{box-sizing:border-box}

.ihx-offers h2,
.ihx-offers h3{color:var(--ihx-heading);margin:0}
.ihx-offers p{margin:0}
.ihx-offers img{max-width:100%;display:block}

.ihx-offers a{
  color:var(--ihx-link);text-decoration:none;
  transition:color var(--ihx-dur) var(--ihx-ease);
}
.ihx-offers a:hover{color:var(--ihx-link-hover);text-decoration:underline;text-underline-offset:3px}
.ihx-offers a:focus-visible,
.ihx-offers summary:focus-visible{outline:none;box-shadow:var(--ihx-focus)}

.ihx-container{max-width:var(--ihx-container);margin:0 auto;padding-inline:var(--ihx-gutter)}
.ihx-eyebrow{
  font:var(--ihx-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ihx-accent);display:block;
}
.ihx-rule{height:3px;width:64px;background:var(--ihx-gradient-gold);border-radius:var(--ihx-radius-pill)}

/* -------------------- Buttons -------------------- */
.ihx-offers .ihx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:var(--ihx-btn);letter-spacing:.04em;
  padding:16px 26px;min-height:52px;border-radius:var(--ihx-radius-pill);
  border:2px solid transparent;text-align:center;cursor:pointer;
  background:var(--ihx-primary);color:#fff;text-decoration:none;
  transition:background-color var(--ihx-dur) var(--ihx-ease),
             border-color var(--ihx-dur) var(--ihx-ease),
             color var(--ihx-dur) var(--ihx-ease);
}
.ihx-offers .ihx-btn:hover{background:var(--ihx-primary-hover);color:#fff;text-decoration:none}
.ihx-offers .ihx-btn:active{background:var(--ihx-primary-active)}
.ihx-offers .ihx-btn--sm{padding:12px 20px;min-height:44px;font-size:var(--ihx-fs-xs)}
.ihx-offers .ihx-btn--inverse{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.ihx-offers .ihx-btn--inverse:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.ihx-offers .ihx-btn--outline{background:transparent;color:var(--ihx-primary);border-color:var(--ihx-border)}
.ihx-offers .ihx-btn--outline:hover{background:var(--ihx-blue-050);border-color:var(--ihx-primary);color:var(--ihx-primary)}

/* -------------------- Hero -------------------- */
.ihx-hero{position:relative;background:var(--ihx-blue-800);overflow:hidden}
.ihx-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ihx-hero__scrim{position:absolute;inset:0;background:var(--ihx-scrim)}
.ihx-hero__inner{
  position:relative;
  padding-top:clamp(56px,9vw,110px);
  padding-bottom:clamp(40px,6vw,72px);
  min-height:clamp(320px,38vw,460px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.ihx-hero .ihx-eyebrow{color:var(--ihx-gold-300)}
.ihx-hero__title{
  font:700 clamp(32px,5.2vw,54px)/1.1 var(--ihx-font);
  color:#fff;margin:14px 0 16px;max-width:22ch;
}
.ihx-hero__lead{font:var(--ihx-lead);color:rgba(255,255,255,.9);max-width:56ch;margin:0 0 26px}
.ihx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* -------------------- Sticky section nav -------------------- */
.ihx-subnav{
  position:sticky;top:0;z-index:5;background:#fff;
  border-bottom:1px solid var(--ihx-border-subtle);box-shadow:var(--ihx-shadow-xs);
}
.ihx-subnav__inner{
  display:flex;gap:8px;overflow-x:auto;padding-block:12px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ihx-subnav__inner::-webkit-scrollbar{height:0;width:0}
.ihx-offers .ihx-subnav a{
  flex:none;font:var(--ihx-nav);color:var(--ihx-grey-700);
  padding:11px 18px;border-radius:var(--ihx-radius-pill);min-height:44px;
  display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  transition:background-color var(--ihx-dur) var(--ihx-ease),color var(--ihx-dur) var(--ihx-ease);
}
.ihx-offers .ihx-subnav a:hover{background:var(--ihx-blue-050);color:var(--ihx-primary);text-decoration:none}
.ihx-offers .ihx-subnav a.is-current{color:var(--ihx-primary);background:var(--ihx-blue-050)}
.ihx-offers .ihx-subnav a.is-current:hover{background:var(--ihx-blue-100)}

/* -------------------- Sections -------------------- */
.ihx-section{scroll-margin-top:var(--ihx-anchor-offset);padding-block:clamp(48px,6vw,80px)}
.ihx-section--sand{background:var(--ihx-sand)}
.ihx-section__head{max-width:68ch;margin-bottom:36px}
.ihx-section__head h2{font:var(--ihx-h2);margin:12px 0 14px}
.ihx-section__head p{font:var(--ihx-lead);margin:20px 0 0}

/* -------------------- Offer cards -------------------- */
.ihx-grid-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.ihx-offer{
  background:#fff;border-radius:var(--ihx-radius-md);box-shadow:var(--ihx-shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow 240ms var(--ihx-ease),transform 240ms var(--ihx-ease);
}
.ihx-offer:hover{box-shadow:var(--ihx-shadow-lg);transform:translateY(-2px)}
.ihx-offer__media{position:relative;aspect-ratio:3 / 2;background:var(--ihx-blue-100);overflow:hidden}
.ihx-offer__media img{width:100%;height:100%;object-fit:cover}
.ihx-offer__flag{
  position:absolute;top:14px;left:14px;font:var(--ihx-label);
  text-transform:uppercase;letter-spacing:.04em;color:#fff;
  background:var(--ihx-blue-700);padding:7px 14px;border-radius:var(--ihx-radius-pill);
}
.ihx-offer__body{padding:26px 24px 24px;display:flex;flex-direction:column;flex:1;gap:14px}
.ihx-offer__body h3{font:var(--ihx-h4)}
.ihx-offer__body p{font:var(--ihx-body-sm)}
.ihx-offer__code{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ihx-offer__code>span:first-child{font:var(--ihx-caption);color:var(--ihx-muted)}
/* Copy-to-clipboard code button */
.ihx-code{
  position:relative;
  font:700 15px/1 var(--ihx-font);letter-spacing:.1em;
  color:var(--ihx-primary);background:var(--ihx-gold-050);
  border:1px dashed var(--ihx-accent);border-radius:var(--ihx-radius-pill);
  padding:11px 16px;min-height:44px;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:background-color var(--ihx-dur) var(--ihx-ease),
             border-color var(--ihx-dur) var(--ihx-ease),
             color var(--ihx-dur) var(--ihx-ease);
}
/* small copy glyph, drawn in CSS — no icon font, no SVG request */
.ihx-code::after{
  content:"";flex:none;width:11px;height:11px;
  border:1.5px solid currentColor;border-radius:2px;
  box-shadow:3px -3px 0 -1.5px var(--ihx-gold-050), 3px -3px 0 0 currentColor;
  opacity:.65;transition:opacity var(--ihx-dur) var(--ihx-ease);
}
.ihx-code:hover{background:#fff;border-color:var(--ihx-primary);border-style:solid}
.ihx-code:hover::after{opacity:1}
.ihx-code:active{transform:scale(.98)}
.ihx-code:focus-visible{outline:none;box-shadow:var(--ihx-focus)}

/* "Copied ✓" state */
.ihx-code__done{display:none}
.ihx-code.is-copied{
  background:#e7f1eb;border-style:solid;border-color:#3d7a55;color:#2f6247;
}
.ihx-code.is-copied .ihx-code__text{display:none}
.ihx-code.is-copied .ihx-code__done{display:inline}
.ihx-code.is-copied::after{content:none}

/* No-JS fallback: one click still selects the whole code for a manual copy. */
.ihx-code__text{-webkit-user-select:all;user-select:all}
.ihx-offer__deadline{display:flex;align-items:center;gap:8px;font:var(--ihx-caption);color:var(--ihx-warning)}
.ihx-offer__deadline::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ihx-warning);flex:none}
.ihx-offer__actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:6px}

/* Terms — native <details>, zero JS */
.ihx-terms{margin:0}
.ihx-terms>summary{
  font:var(--ihx-nav);color:var(--ihx-link);cursor:pointer;list-style:none;
  padding:12px 6px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:var(--ihx-radius-sm);
}
.ihx-terms>summary::-webkit-details-marker{display:none}
.ihx-terms>summary::marker{content:""}
.ihx-terms>summary:hover{color:var(--ihx-link-hover);text-decoration:underline;text-underline-offset:3px}
.ihx-terms>summary .ihx-terms__hide{display:none}
.ihx-terms[open]>summary .ihx-terms__show{display:none}
.ihx-terms[open]>summary .ihx-terms__hide{display:inline}
.ihx-terms__text{
  font:var(--ihx-caption);color:var(--ihx-muted);background:var(--ihx-grey-100);
  border-radius:var(--ihx-radius-sm);padding:14px 16px;margin:6px 0 0;
}

/* -------------------- Always-available savings -------------------- */
.ihx-grid-always{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.ihx-saving{
  background:#fff;border-radius:var(--ihx-radius-md);box-shadow:var(--ihx-shadow-xs);
  padding:28px 24px;display:flex;flex-direction:column;gap:12px;
}
.ihx-saving__figure{font:700 26px/1.1 var(--ihx-font);color:var(--ihx-accent)}
.ihx-saving h3{font:var(--ihx-h4);font-size:20px}
.ihx-saving p{font:var(--ihx-body-sm)}
.ihx-saving__actions{margin-top:auto;padding-top:10px}

/* -------------------- Feature pair -------------------- */
.ihx-grid-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
.ihx-feature{
  background:#fff;border-radius:var(--ihx-radius-md);box-shadow:var(--ihx-shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;
  scroll-margin-top:var(--ihx-anchor-offset);
}
.ihx-feature__media{aspect-ratio:16 / 9;background:var(--ihx-blue-100)}
.ihx-feature__media img{width:100%;height:100%;object-fit:cover}
.ihx-feature__body{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px;flex:1}
.ihx-feature__body h3{font:var(--ihx-h3)}
.ihx-feature__body p{font:var(--ihx-body);max-width:52ch}
.ihx-feature__actions{margin-top:auto;padding-top:10px}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion:reduce){
  .ihx-offers *{animation-duration:.01ms;transition-duration:.01ms}
  .ihx-offer:hover{transform:none}
}

/* ==========================================================================
   PARENT THEME OVERRIDES
   --------------------------------------------------------------------------
   The Seventy9 theme applies global heading styles (uppercase, forced colour,
   a decorative rule drawn with ::before/::after) that were bleeding into this
   layout. `!important` is used deliberately and ONLY here, and every selector
   is scoped inside `.ihx-offers`, so nothing outside this template is affected.
   ========================================================================== */

/* 1. Kill the theme's forced uppercase + letter-spacing on headings.
      (The .ihx-eyebrow class sets its own uppercase further down.) */
.ihx-offers h1,
.ihx-offers h2,
.ihx-offers h3,
.ihx-offers h4,
.ihx-offers .ihx-hero__title,
.ihx-offers .ihx-saving__figure{
  text-transform:none !important;
  letter-spacing:normal !important;
  font-family:var(--ihx-font) !important;
  text-decoration:none !important;
  text-align:left !important;
}

/* 2. Remove the theme's decorative pseudo-element rule that was striking
      through the hero headline. */
.ihx-offers h1::before,  .ihx-offers h1::after,
.ihx-offers h2::before,  .ihx-offers h2::after,
.ihx-offers h3::before,  .ihx-offers h3::after,
.ihx-offers h4::before,  .ihx-offers h4::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
}

/* 3. Restore intended heading colours and sizes. */
.ihx-offers .ihx-hero__title{
  color:#fff !important;
  font-weight:700 !important;
  font-size:clamp(32px,5.2vw,54px) !important;
  line-height:1.1 !important;
  margin:14px 0 16px !important;
}
.ihx-offers .ihx-section__head h2{
  color:var(--ihx-heading) !important;
  font-weight:700 !important;
  font-size:clamp(26px,3.4vw,34px) !important;
  line-height:1.2 !important;
}
.ihx-offers .ihx-offer__body h3,
.ihx-offers .ihx-saving h3{
  color:var(--ihx-heading) !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}
.ihx-offers .ihx-offer__body h3{font-size:var(--ihx-fs-lg) !important}
.ihx-offers .ihx-saving h3{font-size:20px !important}
.ihx-offers .ihx-feature__body h3{
  color:var(--ihx-heading) !important;
  font-weight:700 !important;
  font-size:clamp(22px,2.4vw,28px) !important;
  line-height:1.2 !important;
}

/* 4. The eyebrow is the one place uppercase IS wanted. */
.ihx-offers .ihx-eyebrow{
  text-transform:uppercase !important;
  letter-spacing:.14em !important;
  font-size:var(--ihx-fs-xs) !important;
  font-weight:700 !important;
}

/* 5. Body copy — stop the theme resetting size/leading inside cards. */
.ihx-offers p{
  font-family:var(--ihx-font) !important;
  text-transform:none !important;
}
.ihx-offers .ihx-hero__lead{font-size:var(--ihx-fs-md) !important;line-height:1.6 !important;color:rgba(255,255,255,.9) !important}
.ihx-offers .ihx-section__head p{font-size:var(--ihx-fs-md) !important;line-height:1.6 !important}
.ihx-offers .ihx-offer__body p,
.ihx-offers .ihx-saving p{font-size:var(--ihx-fs-sm) !important;line-height:1.6 !important;color:var(--ihx-text) !important}
.ihx-offers .ihx-offer__deadline{font-size:var(--ihx-fs-xs) !important;color:var(--ihx-warning) !important}
.ihx-offers .ihx-terms__text{font-size:var(--ihx-fs-xs) !important;color:var(--ihx-muted) !important}

/* 6. Buttons — the theme's global .btn / a styles were altering these. */
.ihx-offers .ihx-btn{
  text-transform:none !important;
  letter-spacing:.04em !important;
  font-family:var(--ihx-font) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  width:auto !important;
}
.ihx-offers .ihx-btn:hover{text-decoration:none !important}

/* 6b. The code button is a real <button>; stop the theme's global button
       styling (background, radius, uppercase, full width) hijacking it. */
.ihx-offers button.ihx-code{
  text-transform:none !important;
  font-family:var(--ihx-font) !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  line-height:1 !important;
  width:auto !important;
  min-width:0 !important;
  border-radius:var(--ihx-radius-pill) !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.ihx-offers button.ihx-code:focus-visible{box-shadow:var(--ihx-focus) !important}

/* 7. Full-bleed: the theme wraps page content in a max-width container.
      These sections are meant to run edge to edge. */
.ihx-offers{width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important}
.ihx-offers .ihx-hero,
.ihx-offers .ihx-subnav,
.ihx-offers .ihx-section{width:100% !important;max-width:none !important}