/* allergy-hub.css — Allergy Hub v3 page styles
 *
 * Scoped to body.page-id-219074 (.allergy-guide/).
 * Depends on gerbs-tokens handle — all values use var(--gerbs-*).
 * Loaded via conditional enqueue in functions.php (path: /allergy-guide/).
 *
 * Sections:
 *   1. Hero
 *   2. Section headings
 *   3. Common Allergens grid (et_pb_blog_0)
 *   4. Allergen card icon chips (post-ID map)
 *   5. Managing Food Allergies grid (et_pb_blog_1)
 *   6. Scroll reveal
 *   7. Responsive
 *   8. Accessibility / reduced motion
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. HERO
   Two-column composition: left = copy + CTAs, right = offset image.
   Divi section class: .allergy-hub-hero
   ───────────────────────────────────────────────────────────────────────── */

.page-id-219074 .allergy-hub-hero {
  padding: clamp(36px, 6vw, 76px) 0 clamp(40px, 6vw, 80px);
}

/* Two-column row — 1.02fr / 0.98fr via equal Divi columns + slight right col shrink */
.page-id-219074 .allergy-hub-hero .et_pb_row {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Divi critical inline CSS sets .et_pb_column_1_2{width:47.25%}.
   In a grid layout that % resolves against the TRACK width (~544px) not the row (1140px),
   giving ~257px columns instead of ~544px. Override to let the grid drive sizing. */
.page-id-219074 .allergy-hub-hero .et_pb_row .et_pb_column {
  width: auto !important;
}

/* Left column: copy */
.page-id-219074 .allergy-hub-hero .et_pb_column:first-child {
  display: flex;
  flex-direction: column;
}

/* Eyebrow — "The Allergy Hub" */
.page-id-219074 .hub-eyebrow,
.page-id-219074 p.hub-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gerbs-blue);
  margin: 0 0 18px;
}
.page-id-219074 .hub-eyebrow::before,
.page-id-219074 p.hub-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--gerbs-yellow);
  display: inline-block;
  flex: none;
}

/* H1 */
.page-id-219074 .allergy-hub-hero h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--gerbs-ink);
  margin: 0 0 22px;
}

/* "living with" highlight swipe */
.page-id-219074 .allergy-hub-hero h1 .hl {
  position: relative;
  white-space: nowrap;
}
.page-id-219074 .allergy-hub-hero h1 .hl::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.08em;
  height: 0.34em;
  background: var(--gerbs-yellow);
  z-index: -1;
}

/* Lead paragraph */
.page-id-219074 .hub-lead,
.page-id-219074 p.hub-lead {
  font-family: var(--ff-body);
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--gerbs-ink-70);
  margin: 0 0 32px;
  max-width: 44ch;
}

/* CTA row */
.page-id-219074 .hub-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Primary CTA — blue pill button.
   Divi renders <a class="et_pb_button hub-cta-primary"> — both classes on the same element.
   Selector must target .hub-cta-primary directly, NOT .hub-cta-primary .et_pb_button (no child). */
.page-id-219074 .hub-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gerbs-blue) !important;
  color: #fff !important;
  border: 1.5px solid var(--gerbs-blue) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  padding: 16px 32px !important;
  min-height: 52px;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
.page-id-219074 .hub-cta-primary:hover {
  background: var(--gerbs-blue-hover) !important;
  border-color: var(--gerbs-blue-hover) !important;
  color: #fff !important;
}

/* Ghost CTA */
.page-id-219074 .hub-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--gerbs-ink) !important;
  border: 1.5px solid var(--gerbs-ink-20) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  padding: 16px 32px !important;
  min-height: 52px;
  text-decoration: none !important;
  transition: border-color .15s;
}
.page-id-219074 .hub-cta-ghost:hover {
  border-color: var(--gerbs-ink) !important;
}

/* Divi strips ::before/::after from button elements — override its default arrow */
.page-id-219074 .allergy-hub-hero .et_pb_button::after {
  display: none !important;
}

/* Right column: image composition */
.page-id-219074 .allergy-hub-hero .et_pb_column:last-child {
  position: relative;
}

/* Yellow offset block (top-right) */
.page-id-219074 .allergy-hub-hero .hub-hero-img-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -22px;
  right: -22px;
  width: 62%;
  height: 70%;
  background: var(--gerbs-yellow);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Blue tick block (bottom-left) */
.page-id-219074 .allergy-hub-hero .hub-hero-img-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -20px;
  left: -20px;
  width: 34%;
  height: 40%;
  background: var(--gerbs-blue);
  opacity: .12;
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* Image frame */
.page-id-219074 .allergy-hub-hero .hub-hero-img-wrap {
  position: relative;
  z-index: 1;
}
.page-id-219074 .allergy-hub-hero .hub-hero-img-wrap img,
.page-id-219074 .hub-hero-img .et_pb_image img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  display: block;
}

/* Divi image module wrapper */
.page-id-219074 .hub-hero-img {
  position: relative;
}
.page-id-219074 .hub-hero-img::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -22px;
  right: -22px;
  width: 62%;
  height: 70%;
  background: var(--gerbs-yellow);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.page-id-219074 .hub-hero-img::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -20px;
  left: -20px;
  width: 34%;
  height: 40%;
  background: var(--gerbs-blue);
  opacity: .12;
  border-radius: var(--radius-md);
  pointer-events: none;
}
.page-id-219074 .hub-hero-img .et_pb_image_wrap {
  position: relative;
  z-index: 2;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. SECTION HEADINGS
   ───────────────────────────────────────────────────────────────────────── */

.page-id-219074 .et_pb_section .et_pb_text h2,
.page-id-219074 .et_pb_section .et_pb_text h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0 0 clamp(24px, 4vw, 40px);
  color: var(--gerbs-ink);
}

/* <strong> inside a section heading must match the heading.
   A global rule (gerbs-skin.css) forces strong to 24px/900, which shrank the
   second half of "Common Allergens" / "Managing Food Allergies" mid-line.
   gerbs-skin loads after us → !important required to win. Inherit everything
   so the headline reads as one consistent size, weight, and font. */
.page-id-219074 .et_pb_section .et_pb_text h2 strong,
.page-id-219074 .et_pb_section .et_pb_text h3 strong {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Anchor targets for in-page nav */
.page-id-219074 .allergen-hub-section {
  scroll-margin-top: 80px;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. COMMON ALLERGENS GRID (et_pb_blog_0)
   Restyle .et_pb_blog_0 to the v3 card:
   - 4-col grid, white card, 1px hairline border, rounded corners
   - hover: lift translateY(-4px) + shadow + yellow top accent wipe
   - image: 1:1 aspect, zoom 1.06 on hover
   - "Read more" in blue with arrow

   ⚠ FRAGILITY WARNING: .et_pb_blog_0 is Divi's auto-generated index class for the
   FIRST Blog module on the page. If blog modules are reordered in the Visual Builder,
   this index changes and breaks styling. Do NOT reorder the blog modules without
   updating selectors here and in section 5.
   ───────────────────────────────────────────────────────────────────────── */

/* Grid layout */
.page-id-219074 .et_pb_blog_0 .et_pb_ajax_pagination_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

/* Card base */
.page-id-219074 .et_pb_blog_0 .et_pb_post {
  position: relative;
  background: #fff;
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  /* Reset Divi blog defaults + override gerbs-skin.css calc(25%-24px) in grid context.
     gerbs-skin.css loads after allergy-hub.css (equal specificity, later = wins) → !important required */
  width: 100% !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  float: none;
}

/* Yellow top-accent bar wipe */
.page-id-219074 .et_pb_blog_0 .et_pb_post::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gerbs-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  z-index: 3;
}

.page-id-219074 .et_pb_blog_0 .et_pb_post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.page-id-219074 .et_pb_blog_0 .et_pb_post:hover::before {
  transform: scaleX(1);
}

/* Image container — square aspect ratio
   Divi blog renders a.entry-featured-image-url (NOT .et_pb_image_container)
   gerbs-skin.css sets height:234px on .entry-featured-image-url — must override
   with !important so aspect-ratio:1/1 can determine height from width */
.page-id-219074 .et_pb_blog_0 .et_pb_post a.entry-featured-image-url {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  height: auto !important;
  background: var(--gerbs-fog);
  flex: none;
}
.page-id-219074 .et_pb_blog_0 .et_pb_post a.entry-featured-image-url img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.page-id-219074 .et_pb_blog_0 .et_pb_post:hover a.entry-featured-image-url img {
  transform: scale(1.06);
}

/* Post body */
.page-id-219074 .et_pb_blog_0 .et_pb_post .post-content {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.page-id-219074 .et_pb_blog_0 .et_pb_post .entry-title,
.page-id-219074 .et_pb_blog_0 .et_pb_post .entry-title a {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--gerbs-ink);
  text-decoration: none;
  margin: 0;
}

/* "Read more" link — blue + arrow */
.page-id-219074 .et_pb_blog_0 .et_pb_post .more-link {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--gerbs-blue);
  text-decoration: none;
}
.page-id-219074 .et_pb_blog_0 .et_pb_post .more-link::after {
  content: "\2192"; /* → */
  display: inline-block;
  transition: transform .2s ease;
}
.page-id-219074 .et_pb_blog_0 .et_pb_post:hover .more-link::after {
  transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   4. ALLERGEN ICON CHIPS
   56×56 chip pinned bottom-right of each card's image link.
   Two pseudo-elements on a.entry-featured-image-url:
     ::before = blue square background (chip base)
     ::after  = white icon silhouette via mask-image (PNG shape filled #fff)
   filter: brightness(0) invert(1) was avoided — it inverts the blue bg too.
   Map: post ID → icon filename.
   Post IDs confirmed against production DB 2026-06-06.
   ───────────────────────────────────────────────────────────────────────── */

/* Blue chip base (::before) — shared across all allergen posts */
.page-id-219074 .et_pb_blog_0 .et_pb_post a.entry-featured-image-url::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 56px;
  height: 56px;
  background-color: var(--gerbs-blue);
  border-top-left-radius: var(--radius-md);
  z-index: 2;
}

/* White icon layer (::after) — shared base; background-color = icon color */
.page-id-219074 .et_pb_blog_0 .et_pb_post a.entry-featured-image-url::after {
  content: "";
  position: absolute;
  bottom: 13px; /* (56 - 30) / 2 = 13: centers 30px icon within 56px chip */
  right: 13px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 3;
}

/* Per-post icon map (post-ID → icon file) */
/* 219302 = Wheat & Gluten */
.page-id-219074 .et_pb_blog_0 .post-219302 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/wheat.png');
  mask-image: url('../img/allergen-icons/wheat.png');
}

/* 219301 = Tree Nuts */
.page-id-219074 .et_pb_blog_0 .post-219301 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/treenuts.png');
  mask-image: url('../img/allergen-icons/treenuts.png');
}

/* 219300 = Shellfish & Fish */
.page-id-219074 .et_pb_blog_0 .post-219300 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/shellfish.png');
  mask-image: url('../img/allergen-icons/shellfish.png');
}

/* 219299 = Sesame */
.page-id-219074 .et_pb_blog_0 .post-219299 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/sesame.png');
  mask-image: url('../img/allergen-icons/sesame.png');
}

/* 219298 = Mustard & Sulphur Dioxide */
.page-id-219074 .et_pb_blog_0 .post-219298 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/mustard.png');
  mask-image: url('../img/allergen-icons/mustard.png');
}

/* 219297 = Eggs */
.page-id-219074 .et_pb_blog_0 .post-219297 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/egg.png');
  mask-image: url('../img/allergen-icons/egg.png');
}

/* 219296 = Dairy */
.page-id-219074 .et_pb_blog_0 .post-219296 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/milk.png');
  mask-image: url('../img/allergen-icons/milk.png');
}

/* 219294 = Peanuts, Soy & Legumes */
.page-id-219074 .et_pb_blog_0 .post-219294 a.entry-featured-image-url::after {
  -webkit-mask-image: url('../img/allergen-icons/peanuts.png');
  mask-image: url('../img/allergen-icons/peanuts.png');
}

/* ─────────────────────────────────────────────────────────────────────────
   5. MANAGING FOOD ALLERGIES GRID (et_pb_blog_1)
   Tall 3:4 overlay cards: full-bleed image, dark gradient scrim,
   white overlay text bottom-aligned, hover-reveal excerpt.

   ⚠ FRAGILITY WARNING: .et_pb_blog_1 is Divi's auto-generated index class for the
   SECOND Blog module on the page. If blog modules are reordered in the Visual Builder,
   this index changes and breaks styling. Do NOT reorder the blog modules without
   updating selectors here and in section 3.
   ───────────────────────────────────────────────────────────────────────── */

/* Grid layout */
.page-id-219074 .et_pb_blog_1 .et_pb_ajax_pagination_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

/* Card base — tall aspect ratio, image fills card */
.page-id-219074 .et_pb_blog_1 .et_pb_post {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
  /* Reset Divi blog defaults + override gerbs-skin.css calc(25%-24px) in grid context.
     gerbs-skin.css loads after allergy-hub.css (equal specificity, later = wins) → !important required */
  width: 100% !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  float: none;
  background: var(--gerbs-fog);
}
.page-id-219074 .et_pb_blog_1 .et_pb_post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Image — absolute fill, zoom on hover
   Divi blog renders a.entry-featured-image-url (NOT .et_pb_image_container)
   gerbs-skin.css sets height:234px — must override so inset:0 can stretch to fill card */
.page-id-219074 .et_pb_blog_1 .et_pb_post a.entry-featured-image-url {
  display: block;
  position: absolute;
  inset: 0;
  height: 100% !important;
  z-index: 0;
  overflow: hidden;
}
.page-id-219074 .et_pb_blog_1 .et_pb_post a.entry-featured-image-url img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
  display: block;
}
.page-id-219074 .et_pb_blog_1 .et_pb_post:hover a.entry-featured-image-url img {
  transform: scale(1.06);
  will-change: transform; /* promote to own layer only during active hover */
}

/* Gradient scrim */
.page-id-219074 .et_pb_blog_1 .et_pb_post::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Text starts ~42% down the card. The prior scrim was near-transparent there
     (~0.13), leaving white text illegible over bright photo regions. Ramp the
     dark in earlier and deeper so the whole text region has a solid backing. */
  background: linear-gradient(
    180deg,
    rgba(15, 22, 40, 0) 18%,
    rgba(15, 22, 40, .50) 44%,
    rgba(15, 22, 40, .84) 72%,
    rgba(15, 22, 40, .96) 100%
  );
  pointer-events: none;
}

/* Text body — over the scrim */
.page-id-219074 .et_pb_blog_1 .et_pb_post .post-content {
  position: relative;
  z-index: 2;
  padding: 22px 22px 24px;
}

/* Drop shadow on every overlay text element — insurance against bright photo
   regions where even the strengthened scrim can't guarantee contrast.
   Applied per-element with !important because a global rule resets text-shadow
   on the title/meta, so inheriting from .post-content does not survive. */
.page-id-219074 .et_pb_blog_1 .et_pb_post .post-meta,
.page-id-219074 .et_pb_blog_1 .et_pb_post .entry-title,
.page-id-219074 .et_pb_blog_1 .et_pb_post .entry-title a,
.page-id-219074 .et_pb_blog_1 .et_pb_post .post-content-inner p,
.page-id-219074 .et_pb_blog_1 .et_pb_post .more-link {
  text-shadow: 0 1px 10px rgba(8, 12, 24, .55) !important;
}

/* Category eyebrow — yellow caps.
   Direct child of post (position:static) → paints under image (z-index:0).
   Must be positioned z-index:3 to render above both image and gradient scrim.
   gerbs-skin.css loads after us (equal specificity) → !important on color. */
.page-id-219074 .et_pb_blog_1 .et_pb_post .post-meta {
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gerbs-yellow) !important;
  display: block;
  margin-bottom: 6px;
  position: relative;
  z-index: 3;
}

/* Title — same stacking fix as post-meta above */
.page-id-219074 .et_pb_blog_1 .et_pb_post .entry-title {
  position: relative;
  z-index: 3;
  margin: 0 0 6px;
}
.page-id-219074 .et_pb_blog_1 .et_pb_post .entry-title,
.page-id-219074 .et_pb_blog_1 .et_pb_post .entry-title a {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  color: #fff !important;
  text-decoration: none;
  display: block;
  /* Clamp to 2 lines to prevent overflow at narrow card widths */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Excerpt — hidden by default, reveal on hover.
   max-height:0 + overflow:hidden removes the element from layout when hidden,
   preventing the excerpt from pushing the title above the card boundary.
   (Prior approach: clip-path hid visually but still occupied height → title overflowed.) */
.page-id-219074 .et_pb_blog_1 .et_pb_post .post-content-inner p {
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, .85);
  line-height: var(--lh-normal);
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .3s ease, margin .3s ease;
}
.page-id-219074 .et_pb_blog_1 .et_pb_post:hover .post-content-inner p {
  max-height: 120px;
  opacity: 1;
  margin-top: 4px;
}

/* "Read more" link — white + yellow arrow.
   gerbs-skin.css loads after us → !important on color to beat its global a{color:blue}. */
.page-id-219074 .et_pb_blog_1 .et_pb_post .more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: #fff !important;
  text-decoration: none !important;
  margin-top: 14px;
  white-space: nowrap;
}
.page-id-219074 .et_pb_blog_1 .et_pb_post .more-link::after {
  content: "\2192";
  color: var(--gerbs-yellow);
  display: inline-block;
  transition: transform .2s ease;
}
.page-id-219074 .et_pb_blog_1 .et_pb_post:hover .more-link::after {
  transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   6. SCROLL REVEAL
   Base state always visible (no JS required).
   Animation only fires when JS adds .is-in and motion is allowed.
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .page-id-219074 [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.22, .7, .24, 1),
                transform .6s cubic-bezier(.22, .7, .24, 1);
  }
  .page-id-219074 [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* Stagger children */
  .page-id-219074 [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s cubic-bezier(.22, .7, .24, 1),
                transform .55s cubic-bezier(.22, .7, .24, 1);
  }
  .page-id-219074 [data-reveal-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }
  .page-id-219074 [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
  .page-id-219074 [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
  .page-id-219074 [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. RESPONSIVE
   1000px: hero stacks, grids go 2-col
   560px: grids go 1-col
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .page-id-219074 .allergy-hub-hero .et_pb_row {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .page-id-219074 .hub-hero-img,
  .page-id-219074 .allergy-hub-hero .et_pb_column:last-child {
    max-width: 520px;
    margin: 0 auto;
  }

  /* Allergen grid: 2 columns */
  .page-id-219074 .et_pb_blog_0 .et_pb_ajax_pagination_container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Managing grid: 2 columns */
  .page-id-219074 .et_pb_blog_1 .et_pb_ajax_pagination_container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  /* Allergen grid: 1 column */
  .page-id-219074 .et_pb_blog_0 .et_pb_ajax_pagination_container {
    grid-template-columns: 1fr;
  }

  /* Managing grid: 1 column */
  .page-id-219074 .et_pb_blog_1 .et_pb_ajax_pagination_container {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. ACCESSIBILITY
   Focus-visible rings on all card links.
   Hover-only motion is gated above in section 6.
   ───────────────────────────────────────────────────────────────────────── */

/* Allergen card focus ring */
.page-id-219074 .et_pb_blog_0 .et_pb_post .entry-title a:focus-visible,
.page-id-219074 .et_pb_blog_0 .et_pb_post .more-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Managing card focus ring */
.page-id-219074 .et_pb_blog_1 .et_pb_post .entry-title a:focus-visible,
.page-id-219074 .et_pb_blog_1 .et_pb_post .more-link:focus-visible {
  outline: var(--focus-ring-width) solid #fff;
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Hero CTA focus rings */
.page-id-219074 .allergy-hub-hero .et_pb_button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Reduced motion: disable all hover transitions and animations */
@media (prefers-reduced-motion: reduce) {
  .page-id-219074 .et_pb_blog_0 .et_pb_post,
  .page-id-219074 .et_pb_blog_0 .et_pb_post a.entry-featured-image-url img,
  .page-id-219074 .et_pb_blog_0 .et_pb_post::before,
  .page-id-219074 .et_pb_blog_0 .et_pb_post .more-link::after,
  .page-id-219074 .et_pb_blog_1 .et_pb_post,
  .page-id-219074 .et_pb_blog_1 .et_pb_post a.entry-featured-image-url img,
  .page-id-219074 .et_pb_blog_1 .et_pb_post .post-content-inner p,
  .page-id-219074 .et_pb_blog_1 .et_pb_post .more-link::after,
  .page-id-219074 .allergy-hub-hero .et_pb_button {
    transition: none !important;
    animation: none !important;
  }

  /* Excerpt always visible at reduced motion (user may miss hover affordance) */
  .page-id-219074 .et_pb_blog_1 .et_pb_post .post-content-inner p {
    clip-path: none;
    opacity: 1;
  }
}