/* Home hero chips + seasons — ported from prototype v24. Do not paste into post_content. */
.home .marvel-home-hero.wp-block-cover {
  --gold: #d4a84b;
  --gold-deep: #c09840;
  --font-ruqaa: "Aref Ruqaa", "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hero: url("https://www.marvelegypttours.com/wp-content/uploads/2026/07/home-hero-terrace-pyramids-sunset-v2.webp");
  --photo-w: 1024;
  --photo-h: 239;
  --arm-l: 47.35%;
  --arm-r: 55.34%;
  --arm-gap: 0.65%;
  --chip-y: 66.5%;
  --chip-w: 13.4rem;
  position: relative;
  overflow: hidden;
}
.home .marvel-home-hero > .wp-block-cover__background,
.home .marvel-home-hero > .wp-block-cover__gradient-background {
  opacity: 0 !important;
}
.home .marvel-home-hero .wp-block-cover__image-background {
  object-fit: cover !important;
  object-position: 50% 55% !important;
}
.marvel-hero-stage {
  background: none;
}
@media (prefers-reduced-motion: reduce) {
  .home .marvel-home-hero:not(.is-fx-forced) .marvel-hero-season,
  .home .marvel-home-hero:not(.is-fx-forced) .marvel-hero-limb {
    display: none !important;
  }
}

    .home .marvel-home-hero.wp-block-cover {
      --photo-w: 1024;
      --photo-h: 239;
      --arm-l: 47.35%;
      --arm-r: 55.34%;
      --arm-gap: 0.65%;
      --chip-y: 66.5%;
      --chip-w: 13.4rem;
      position: relative;
      height: 72vh;
      min-height: 72vh !important;
      color: #fff;
      overflow: hidden;
      background: #2a1c12;
    }
    .marvel-hero-stage {
      position: absolute;
      z-index: 0;
      pointer-events: none;
      left: 50%;
      top: 55%;
      width: max(100%, calc(72vh * 1024 / 239));
      height: max(72vh, calc(100% * 239 / 1024));
      transform: translate(-50%, -55%);
      background: none;
    }
    .marvel-hero-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.55) 100%),
        rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }
    .marvel-hero-season {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* Wind limbs: clipped copies of the same photo at the same size, so at rest
       they are pixel-identical to the stage background and only the clipped hat
       and hair move. Clip shapes traced on the 1024x239 file. */
    .marvel-hero-limb {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: none;
      pointer-events: none;
      background: var(--hero) 0 0 / 100% 100% no-repeat;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      will-change: transform;
      backface-visibility: hidden;
    }
    .home .marvel-home-hero[data-season="autumn"] .marvel-hero-limb,
    .home .marvel-home-hero[data-season="spring"] .marvel-hero-limb { display: block; }
    .home .marvel-home-hero.is-still .marvel-hero-limb { display: none; }
    /* Soft-edged masks instead of a hard clip: the copy fades into the untouched
       photo, so the boundary of the moving area never draws a line. */
    .marvel-hero-limb {
      -webkit-mask-image: var(--limb-mask);
      mask-image: var(--limb-mask);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
    /* Only the two brim wings are unmasked, and they pivot around the crown, so the
       edge of the hat lifts and drops while her head and the crown never move. */
    .marvel-hero-limb--brim-l,
    .marvel-hero-limb--brim-r {
      transform-origin: 51.17% 46.44%;
    }
    .marvel-hero-limb--brim-l {
      --limb-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 239' preserveAspectRatio='none'><radialGradient id='wl' cx='0.66' cy='0.5' r='0.5'><stop offset='0' stop-color='white' stop-opacity='1'/><stop offset='0.55' stop-color='white' stop-opacity='0.68'/><stop offset='1' stop-color='white' stop-opacity='0'/></radialGradient><ellipse cx='492' cy='112' rx='21' ry='17' fill='url(%23wl)'/></svg>");
    }
    .marvel-hero-limb--brim-r {
      --limb-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 239' preserveAspectRatio='none'><radialGradient id='wr' cx='0.34' cy='0.5' r='0.5'><stop offset='0' stop-color='white' stop-opacity='1'/><stop offset='0.55' stop-color='white' stop-opacity='0.68'/><stop offset='1' stop-color='white' stop-opacity='0'/></radialGradient><ellipse cx='556' cy='112' rx='21' ry='17' fill='url(%23wr)'/></svg>");
    }
    /* Mask traced on the strands themselves (luminance-measured: the hair runs x505-550
       at y166 and tapers to x514-538 by y204). Any wider and the mask drags her blouse
       along, which reads as her clothes moving instead of her hair. The gradient keeps
       the roots at zero so the sway belongs to the ends. */
    .marvel-hero-limb--hair {
      transform-origin: 51.17% 56.07%;
      --limb-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 239' preserveAspectRatio='none'><linearGradient id='hg' gradientUnits='userSpaceOnUse' x1='0' y1='162' x2='0' y2='208'><stop offset='0' stop-color='white' stop-opacity='0'/><stop offset='0.3' stop-color='white' stop-opacity='0.12'/><stop offset='0.62' stop-color='white' stop-opacity='0.8'/><stop offset='0.85' stop-color='white' stop-opacity='1'/><stop offset='1' stop-color='white' stop-opacity='1'/></linearGradient><filter id='g'><feGaussianBlur stdDeviation='2.6'/></filter><path filter='url(%23g)' fill='url(%23hg)' d='M506 162 L549 162 L546 178 L544 192 L539 206 L512 206 L508 192 L506 178 Z'/></svg>");
    }
    .home .marvel-home-hero[data-season="autumn"] .marvel-hero-limb--brim-l { animation-name: brim-gust-a; animation-duration: 1.9s; }
    .home .marvel-home-hero[data-season="autumn"] .marvel-hero-limb--brim-r { animation-name: brim-gust-b; animation-duration: 2.4s; }
    .home .marvel-home-hero[data-season="autumn"] .marvel-hero-limb--hair { animation-name: hair-gust; animation-duration: 3.4s; }
    .home .marvel-home-hero[data-season="spring"] .marvel-hero-limb--brim-l { animation-name: brim-breeze-a; animation-duration: 4.1s; }
    .home .marvel-home-hero[data-season="spring"] .marvel-hero-limb--brim-r { animation-name: brim-breeze-b; animation-duration: 4.8s; }
    .home .marvel-home-hero[data-season="spring"] .marvel-hero-limb--hair { animation-name: hair-breeze; animation-duration: 5.2s; }
    /* A brim wing travels barely a millimetre in real wind — a degree or two of pivot
       is the whole flutter. */
    @keyframes brim-gust-a {
      0% { transform: rotate(0deg); }
      21% { transform: rotate(-4.4deg); }
      39% { transform: rotate(-1.3deg); }
      62% { transform: rotate(-6.6deg); }
      81% { transform: rotate(-2.4deg); }
      100% { transform: rotate(0deg); }
    }
    @keyframes brim-gust-b {
      0% { transform: rotate(0deg); }
      27% { transform: rotate(3.9deg); }
      48% { transform: rotate(1deg); }
      69% { transform: rotate(5.8deg); }
      88% { transform: rotate(1.7deg); }
      100% { transform: rotate(0deg); }
    }
    @keyframes brim-breeze-a {
      0% { transform: rotate(0deg); }
      36% { transform: rotate(-0.85deg); }
      68% { transform: rotate(-0.2deg); }
      100% { transform: rotate(0deg); }
    }
    @keyframes brim-breeze-b {
      0% { transform: rotate(0deg); }
      41% { transform: rotate(0.7deg); }
      73% { transform: rotate(0.18deg); }
      100% { transform: rotate(0deg); }
    }
    /* skewX from the roots: no vertical shift, so the horizon behind her stays still. */
    @keyframes hair-gust {
      0% { transform: skewX(0deg); }
      21% { transform: skewX(6deg); }
      44% { transform: skewX(1.9deg); }
      67% { transform: skewX(8.2deg); }
      85% { transform: skewX(3.4deg); }
      100% { transform: skewX(0deg); }
    }
    @keyframes hair-breeze {
      0% { transform: skewX(0deg); }
      37% { transform: skewX(2.4deg); }
      70% { transform: skewX(0.7deg); }
      100% { transform: skewX(0deg); }
    }

    /* Chips are glued to her arms, but only while both fit inside the hero and clear
       of the copy. The photo is 4.28:1, so its on-screen width is driven by the hero
       HEIGHT — her arms drift apart on tall windows and off-screen on phones. JS
       measures every layout and falls back to a centred row when they no longer fit.
       See placeChips() in home-hero-seasons.js. */
    .marvel-hero-chips {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      pointer-events: none;
    }
    .home .marvel-home-hero.has-inline-chips .marvel-hero-chips {
      position: static;
      width: auto;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 0.9rem;
    }
    /* In the row the chips size to their labels: a fixed --chip-w is only needed so the
       two match when they sit on her arms, and at 360px a fixed pair wraps to two lines. */
    .home .marvel-home-hero.has-inline-chips .marvel-hero-chip {
      position: static;
      transform: none;
      width: auto;
      max-width: 100%;
    }
    .marvel-hero-chip {
      position: absolute;
      z-index: 3;
      pointer-events: auto;
      color: rgba(255, 255, 255, 0.92);
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      width: var(--chip-w);
      white-space: nowrap;
    }
    .marvel-hero-chip--reviews,
    .marvel-hero-chip--advice {
      height: 2.5rem;
    }
    .marvel-hero-chip__face {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      width: 100%;
      height: 2.5rem;
      min-height: 2.5rem;
      padding: 0 0.75rem;
      box-sizing: border-box;
      border-radius: 999px;
      white-space: nowrap;
      background: rgba(18, 16, 12, 0.32);
      border: 1px solid rgba(212, 168, 75, 0.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    }
    .marvel-hero-chip:hover .marvel-hero-chip__face,
    .marvel-hero-chip:focus-visible .marvel-hero-chip__face {
      background: rgba(18, 16, 12, 0.5);
      border-color: rgba(228, 201, 138, 0.75);
      animation-play-state: paused;
      transform: translateY(-1px);
      transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }
    .marvel-hero-chip:focus-visible { outline: none; }
    .marvel-hero-chip svg,
    .marvel-hero-chip__ico {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      color: rgba(212, 168, 75, 0.85);
    }
    .marvel-hero-chip--reviews .marvel-hero-chip__face,
    .marvel-hero-chip--advice .marvel-hero-chip__face {
      animation: chip-fade 0.7s ease both;
    }
    @keyframes chip-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .marvel-hero-chip__face { animation: none !important; }
    }

    .home .marvel-home-hero .wp-block-cover__inner-container {
      position: relative;
      z-index: 4 !important;
      text-align: center;
      max-width: 46rem;
      padding: 0;
      pointer-events: none;
    }
    .home .marvel-home-hero .wp-block-cover__inner-container > *,
    .home .marvel-home-hero .wp-block-cover__inner-container a,
    .home .marvel-home-hero .wp-block-cover__inner-container button {
      pointer-events: auto;
    }
    /* `> *` above is (0,4,0) and was beating `.marvel-hero-chips { pointer-events: none }`.
       In the arm-glued layout that layer is position:absolute over the whole inner
       container, so season circles and the animation toggle never received clicks. */
    .home .marvel-home-hero .wp-block-cover__inner-container > .marvel-hero-chips {
      pointer-events: none;
    }
    .home .marvel-home-hero .wp-block-cover__inner-container .marvel-hero-chip {
      pointer-events: auto;
    }
    .home .marvel-home-hero .wp-block-cover__inner-container > h1 {
      margin: 0 0 0.7rem;
      font-family: var(--font-ruqaa) !important;
      font-size: clamp(2.15rem, 5vw, 3.55rem);
      font-weight: 400;
      line-height: 1.25;
      color: #d4a84b !important;
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    }
    .home .marvel-home-hero .wp-block-cover__inner-container > p.wp-block-paragraph {
      margin: 0 0 1.35rem;
      font-size: clamp(0.95rem, 1.6vw, 1.12rem);
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.92);
    }
    .home .marvel-home-hero .wp-block-buttons {
      display: flex;
      justify-content: center;
      gap: 0.9rem;
      flex-wrap: wrap;
    }
    .home .marvel-home-hero .marvel-hero-fx {
      position: relative;
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.7rem;
      flex-wrap: wrap;
      margin-top: 1.05rem;
    }
    .home .marvel-home-hero .season-switch {
      display: flex;
      gap: 0.4rem;
      align-items: center;
    }
    .home .marvel-home-hero .season-switch button {
      appearance: none;
      width: 2.2rem;
      height: 2.2rem;
      padding: 0;
      border-radius: 50%;
      background: rgba(18, 16, 12, 0.38);
      border: 1px solid rgba(228, 201, 138, 0.55);
      color: #e4c98a;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .home .marvel-home-hero .season-switch button svg {
      width: 1.05rem;
      height: 1.05rem;
      display: block;
    }
    .home .marvel-home-hero .season-switch button.is-on {
      background: var(--gold);
      color: #1a1a1a;
      border-color: var(--gold);
    }
    .home .marvel-home-hero .season-switch button:focus-visible,
    .marvel-hero-fx-toggle:focus-visible {
      outline: 2px solid #e4c98a;
      outline-offset: 3px;
    }
    .marvel-hero-fx-toggle {
      appearance: none;
      height: 2.2rem;
      padding: 0 0.9rem;
      border-radius: 999px;
      background: rgba(18, 16, 12, 0.38);
      border: 1px solid rgba(228, 201, 138, 0.55);
      color: #f4efe6;
      font: 600 0.72rem var(--font-body);
      letter-spacing: 0.02em;
      cursor: pointer;
      white-space: nowrap;
    }
    .marvel-hero-fx-toggle[aria-pressed="true"] {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.55);
      color: #fff;
    }
    .home .marvel-home-hero.is-still .wp-block-button__link::after {
      animation: none !important;
    }
    .home .marvel-home-hero.is-still .marvel-hero-season {
      display: none !important;
    }
    @media (max-width: 390px) {
      .home .marvel-home-hero .marvel-hero-fx {
        gap: 0.45rem;
      }
      .home .marvel-home-hero .season-switch {
        gap: 0.28rem;
      }
      .home .marvel-home-hero .season-switch button {
        width: 2rem;
        height: 2rem;
      }
    }
    .home .marvel-home-hero .wp-block-button__link {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 10rem;
      padding: 0.68rem 1.28rem;
      border-radius: 8px;
      font-weight: 700;
      font-size: 0.92rem;
      letter-spacing: 0.01em;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
    .home .marvel-home-hero .wp-block-button__link::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.5) 50%, transparent 64%);
      transform: translateX(-130%);
      animation: btn-flash 3.6s ease-in-out infinite;
    }
    .home .marvel-home-hero .wp-block-button.is-style-outline .wp-block-button__link::after {
      background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.35) 50%, transparent 64%);
      animation-delay: 0.45s;
    }
    @keyframes btn-flash {
      0%, 58%, 100% { transform: translateX(-130%); }
      72% { transform: translateX(130%); }
    }
    .home .marvel-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
      background: var(--gold);
      color: #1a1a1a;
      border: 1px solid #e4c98a;
      box-shadow:
        0 0 0 1px rgba(212, 168, 75, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 26px rgba(212, 168, 75, 0.32);
    }
    .home .marvel-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
    .home .marvel-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
      background: #e4c98a;
      transform: translateY(-2px);
      box-shadow:
        0 0 0 1px rgba(228, 201, 138, 0.55),
        0 12px 28px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(212, 168, 75, 0.42);
    }
    .home .marvel-home-hero .wp-block-button.is-style-outline .wp-block-button__link {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border: 2px solid #fff;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
    }
    .home .marvel-home-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
    .home .marvel-home-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
      background: rgba(255, 255, 255, 0.22);
      transform: translateY(-2px);
    }
    .home .marvel-home-hero .wp-block-button__link:focus-visible { outline: 2px solid #e4c98a; outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) {
      .home .marvel-home-hero .wp-block-button__link::after { animation: none !important; }
    }

    /* Phones: the panorama cannot be both full-bleed and legible. Covering a 78vh box
       with a 4.28:1 photo showed 15% of it — her back, no pyramids — and pushed both
       chips off the screen edges. Below 768px the photo becomes a band at its own
       aspect (--photo-frac of the width, centred on the traveller) and the copy sits
       under it, so nothing is cropped and nothing overlaps.
       Band height = 100vw * 239 / (1024 * 0.58) = 40.24vw; JS refines it in px. */
    @media (max-width: 767px) {
      /* Beat marvel-ui's `.home .entry-content > .wp-block-cover.alignfull` (0,4,0)
         padding-top clamp — that 4vh (~34px) sat in the content box while the band
         image is `top:0` on the padding edge, so it showed up as empty air between
         the photo and the H1. */
      .home .entry-content > .wp-block-cover.alignfull.marvel-home-hero,
      .home .marvel-home-hero.wp-block-cover {
        --photo-frac: 0.58;
        --band-pos-x: 51.35%;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
        padding-bottom: 2.35rem !important;
        background: #2a1c12;
      }
      .home .marvel-home-hero .wp-block-cover__image-background {
        height: var(--band-h, 40.24vw) !important;
        min-height: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        object-fit: cover !important;
        object-position: var(--band-pos-x) 50% !important;
      }
      /* marvel-ui already gives the cover 1rem side padding on phones; a second inset
         here left only 326px of a 390px screen and wrapped the chip row. */
      .home .marvel-home-hero .wp-block-cover__inner-container {
        margin-top: calc(var(--band-h, 40.24vw) + 0.55rem) !important;
        padding: 0 !important;
        max-width: none;
      }
      /* Feather the bottom of the band into the copy area. */
      .marvel-hero-stage::after {
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.12) 0%,
          rgba(0, 0, 0, 0.06) 58%,
          rgba(42, 28, 18, 0.6) 86%,
          #2a1c12 100%
        );
      }
      .marvel-hero-chip { font-size: 0.72rem; width: 10.9rem; height: 2.25rem; }
      .marvel-hero-chip__face { padding: 0 0.6rem; height: 2.25rem; min-height: 2.25rem; }
      .marvel-hero-chip svg,
      .marvel-hero-chip__ico { width: 14px; height: 14px; flex-basis: 14px; }
      .home .marvel-home-hero.has-inline-chips .marvel-hero-chips { gap: 0.4rem; margin-top: 1.2rem; }
      .home .marvel-home-hero .wp-block-cover__inner-container > h1 {
        font-size: clamp(1.52rem, 7.2vw, 1.72rem);
        line-height: 1.18;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        margin: 0 0 1.2rem;
      }
      .home .marvel-home-hero .wp-block-cover__inner-container > p.wp-block-paragraph {
        margin: 0 0 1.55rem;
        line-height: 1.65 !important;
      }
      .home .marvel-home-hero .wp-block-buttons { gap: 1.05rem; }
      .home .marvel-home-hero .wp-block-button__link {
        min-width: 8.9rem;
        padding: 0.62rem 1rem;
        font-size: 0.9rem;
      }
      .home .marvel-home-hero .marvel-hero-fx { margin-top: 1.2rem; }
    }
    @media (max-width: 920px) {
      .marvel-advice--home-mobile,
      #marvel-home-advice-title,
      #marvel-advice-jump {
        scroll-margin-top: 12px;
      }
    }
    /* 360px: two chips side by side need 21.8rem + gap; keep them on one row. */
    @media (max-width: 374px) {
      .marvel-hero-chip { font-size: 0.67rem; width: 9.9rem; }
      .home .marvel-home-hero .wp-block-button__link { min-width: 8.4rem; font-size: 0.86rem; }
    }