/* ==========================================================
   Style studio effects (Appearance > Wayfare > Style studio).
   Loaded only when an effect or a paragraph weight is chosen.
   Body classes set in inc/look.php:
     wf-fx-{header|hero|cards|footer}-{glass|crystal}   one per part
     wf-hf-light                                         light header and footer variant
     wf-pw                                               paragraph weight (value in --wf-pw)
   Colours always come from the theme tokens, so every colour set works with every effect.
   ========================================================== */

@keyframes wfshine{
  0%{background-position:130% 0,0 0}
  60%,100%{background-position:-30% 0,0 0}
}

/* ---------- Paragraph weight ---------- */
body.wf-pw :is(p,dd,td,blockquote,figcaption){font-weight:var(--wf-pw)}
/* Short texts inside cards and sections that are not <p> tags and set their own weight (journey, destination, package and about cards) */
body.wf-pw :is(.jv-card__l,.jv-card__facts,.hv-p__line,.hv-m__c span,.hv-j__r,.hv-row__d,.pk-pc__r,.pk-qa__b,.pk-ck li,.pk-sub,.ab-feat span,.ab-lead,.wf-entry li){font-weight:var(--wf-pw)}

/* ==========================================================
   HEADER
   ========================================================== */
body[class*="wf-fx-header-"] .wf-mast{isolation:isolate}

/* Glass: frosted bar that stays at the top while the page scrolls under it.
   The blur sits on a pseudo-element, so the slide-in menu and the search box (fixed inside the header) are not trapped by it. */
body.wf-fx-header-glass .wf-mast{position:sticky;top:0;z-index:100;background:transparent;border-bottom:0;box-shadow:0 10px 30px rgba(0,0,0,.12)}
body.wf-fx-header-glass .wf-mast::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%),
    linear-gradient(112deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 30%,rgba(255,255,255,.08) 58%,rgba(255,255,255,0) 80%),
    linear-gradient(110deg,color-mix(in srgb,var(--c-primary-deep) 68%,transparent),color-mix(in srgb,var(--c-primary) 52%,transparent));
  -webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.08);backdrop-filter:blur(22px) saturate(1.9) brightness(1.08);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 40px rgba(255,255,255,.08);
}
/* Something coloured behind the glass so it can be seen as glass even at the very top of a page.
   Only the strip under the header; once you scroll, the page itself shows through. */
body.wf-fx-header-glass{
  background-image:
    radial-gradient(26% 100% at 14% 45%,color-mix(in srgb,var(--c-accent) 85%,transparent),transparent 72%),
    radial-gradient(30% 100% at 52% 30%,color-mix(in srgb,var(--c-primary) 55%,#fff),transparent 74%),
    radial-gradient(28% 100% at 90% 55%,color-mix(in srgb,var(--c-accent) 70%,transparent),transparent 72%);
  background-repeat:no-repeat;background-size:100% 110px;
}
body.wf-fx-header-glass .wf-mast :is(a,.wf-brand,.wf-search-btn){text-shadow:0 1px 10px rgba(0,0,0,.38)}
body.wf-fx-header-glass .wf-mast .wf-btn,body.wf-hf-light.wf-fx-header-glass .wf-mast :is(a,.wf-brand,.wf-search-btn){text-shadow:none}
body.admin-bar.wf-fx-header-glass .wf-mast{top:32px}
@media (max-width:782px){body.admin-bar.wf-fx-header-glass .wf-mast{top:46px}}
body.wf-hf-light.wf-fx-header-glass .wf-mast::before{
  background:linear-gradient(110deg,color-mix(in srgb,var(--hf-b1,var(--c-softer)) 80%,transparent),color-mix(in srgb,var(--hf-b2,#fff) 64%,transparent),color-mix(in srgb,var(--hf-b3,var(--c-soft)) 80%,transparent));
  border-bottom-color:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff;
}
body.wf-hf-light.wf-fx-header-glass .wf-mast{box-shadow:0 10px 30px color-mix(in srgb,var(--c-primary) 14%,transparent)}

/* Crystal: faceted bar with a gold edge and a shine that sweeps across a few times after the page loads */
body.wf-fx-header-crystal .wf-mast{
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%) 130% 0/260% 100% no-repeat,
    conic-gradient(from 200deg at 68% 42%,var(--c-primary-deep) 0deg,color-mix(in srgb,var(--c-primary) 65%,#fff) 28deg,var(--c-primary-deep) 60deg,var(--c-primary) 105deg,color-mix(in srgb,var(--c-primary) 45%,var(--c-accent)) 140deg,var(--c-primary-deep) 185deg,var(--c-primary) 235deg,color-mix(in srgb,var(--c-primary) 70%,#fff) 280deg,var(--c-primary-deep) 330deg,var(--c-primary-deep) 360deg);
  border-bottom:1px solid color-mix(in srgb,var(--c-accent) 70%,transparent);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.16);
  animation:wfshine 8s ease-in-out 3;
}
body.wf-hf-light.wf-fx-header-crystal .wf-mast{
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%) 130% 0/260% 100% no-repeat,
    conic-gradient(from 200deg at 68% 42%,var(--hf-b1,var(--c-softer)) 0deg,#fff 30deg,var(--hf-b3,var(--c-soft)) 62deg,var(--hf-b2,#fff) 110deg,var(--hf-b1,var(--c-softer)) 150deg,#fff 190deg,var(--hf-b3,var(--c-soft)) 240deg,var(--hf-b2,#fff) 290deg,var(--hf-b1,var(--c-softer)) 360deg);
  border-bottom-color:color-mix(in srgb,var(--c-primary) 24%,transparent);
  box-shadow:inset 0 -1px 0 #fff;
}
/* gem-cut Enquire pill */
body.wf-fx-header-crystal .wf-mast .wf-btn.wf-enq:not(:hover):not(:focus-visible){
  background:linear-gradient(135deg,color-mix(in srgb,var(--c-accent) 55%,#fff),var(--c-accent) 48%,color-mix(in srgb,var(--c-accent) 70%,#000) 52%,var(--c-accent));
  box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.7);
}
body.wf-hf-light.wf-fx-header-crystal .wf-mast .wf-btn.wf-enq:not(:hover):not(:focus-visible){
  background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 68%,#fff),var(--c-primary) 48%,var(--c-primary-deep) 52%,var(--c-primary));
  box-shadow:0 10px 22px color-mix(in srgb,var(--c-primary) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.4);
}

/* ==========================================================
   TOP OF EACH PAGE (home, destinations, journeys, about)
   ========================================================== */
body.wf-fx-hero-glass :is(.hv-hero,.dv-hero,.jv-hero,.ab-hero){
  position:relative;isolation:isolate;
  background:
    radial-gradient(60% 90% at 8% 25%,color-mix(in srgb,var(--c-accent) 36%,transparent),transparent 70%),
    radial-gradient(55% 80% at 92% 8%,color-mix(in srgb,var(--c-primary) 26%,transparent),transparent 70%),
    radial-gradient(50% 70% at 72% 100%,color-mix(in srgb,var(--c-accent) 22%,transparent),transparent 70%),
    #fff;
  border-bottom:1px solid color-mix(in srgb,var(--c-primary) 14%,transparent);
}
body.wf-fx-hero-crystal :is(.hv-hero,.dv-hero,.jv-hero,.ab-hero){
  position:relative;isolation:isolate;
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%) 130% 0/260% 100% no-repeat,
    conic-gradient(from 210deg at 78% 28%,#fff 0deg,color-mix(in srgb,var(--c-primary) 11%,#fff) 36deg,#fff 70deg,color-mix(in srgb,var(--c-accent) 26%,#fff) 130deg,#fff 190deg,color-mix(in srgb,var(--c-primary) 9%,#fff) 250deg,color-mix(in srgb,var(--c-accent) 16%,#fff) 300deg,#fff 360deg);
  border-bottom:1px solid color-mix(in srgb,var(--c-accent) 55%,transparent);
  animation:wfshine 10s ease-in-out 3;
}

/* ==========================================================
   CARDS AND BOXES
   White cards get the full effect. Photo cards keep their photo and get a glowing edge.
   ========================================================== */
body.wf-fx-cards-glass :is(.jv-card,.pk-card,.pk-pc,.hv-row,.ab-visit__box){
  background:linear-gradient(135deg,rgba(255,255,255,.84),color-mix(in srgb,var(--c-primary) 7%,rgba(255,255,255,.62)));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--c-accent) 38%,rgba(255,255,255,.85));
  box-shadow:0 18px 44px color-mix(in srgb,var(--c-primary) 18%,transparent),inset 0 1px 0 #fff;
}
/* soft coloured glow behind the page, so the glass has something to show through */
body.wf-fx-cards-glass::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 35% at 10% 15%,color-mix(in srgb,var(--c-accent) 20%,transparent),transparent 70%),
    radial-gradient(45% 40% at 92% 70%,color-mix(in srgb,var(--c-primary) 14%,transparent),transparent 70%);
}
body.wf-fx-cards-glass :is(.hv-p,.hv-m,.hv-j,.ab-card,.dv-pv){
  box-shadow:0 0 0 1px rgba(255,255,255,.75),0 20px 48px color-mix(in srgb,var(--c-primary) 30%,transparent);
}

body.wf-fx-cards-crystal :is(.jv-card,.pk-card,.pk-pc,.hv-row,.ab-visit__box){
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%) 140% 0/260% 100% no-repeat,
    linear-gradient(135deg,#fff 0,color-mix(in srgb,var(--c-primary) 8%,#fff) 34%,#fff 35%,color-mix(in srgb,var(--c-primary) 13%,#fff) 68%,color-mix(in srgb,var(--c-accent) 28%,#fff) 100%);
  border:1px solid color-mix(in srgb,var(--c-primary) 26%,#fff);
  box-shadow:0 14px 30px color-mix(in srgb,var(--c-primary) 18%,transparent),inset 0 0 0 1px rgba(255,255,255,.85);
  transition:background-position .9s ease,transform .5s ease,box-shadow .5s ease,border-color .4s ease,opacity .35s ease;
}
body.wf-fx-cards-crystal :is(.jv-card,.pk-card,.pk-pc,.hv-row,.ab-visit__box):hover{background-position:-40% 0,0 0}
body.wf-fx-cards-crystal :is(.hv-p,.hv-m,.hv-j,.ab-card,.dv-pv){
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c-accent) 78%,transparent),0 18px 44px color-mix(in srgb,var(--c-primary) 28%,transparent);
}

/* ==========================================================
   FOOTER
   ========================================================== */
body.wf-fx-footer-glass .wf-ft{
  background:
    radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--c-accent) 38%,transparent),transparent 36%),
    radial-gradient(circle at 92% 92%,color-mix(in srgb,var(--c-primary) 70%,#fff),transparent 44%),
    linear-gradient(135deg,var(--c-primary-deep),var(--c-primary));
}
body.wf-fx-footer-glass .wf-ft__cta{
  margin-top:14px;padding:12px 22px;
  border:1px solid rgba(255,255,255,.3);border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
body.wf-hf-light.wf-fx-footer-glass .wf-ft{
  background:
    radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--c-accent) 30%,transparent),transparent 36%),
    radial-gradient(circle at 92% 92%,color-mix(in srgb,var(--c-primary) 14%,transparent),transparent 44%),
    linear-gradient(135deg,var(--hf-foot,var(--c-softer)),#fff 55%,var(--hf-b3,var(--c-soft)));
}
body.wf-hf-light.wf-fx-footer-glass .wf-ft__cta{
  border-color:rgba(255,255,255,.9);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.42));
  box-shadow:0 14px 34px color-mix(in srgb,var(--c-primary) 14%,transparent),inset 0 1px 0 #fff;
}

body.wf-fx-footer-crystal .wf-ft{
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%) 130% 0/260% 100% no-repeat,
    conic-gradient(from 200deg at 68% 42%,var(--c-primary-deep) 0deg,color-mix(in srgb,var(--c-primary) 65%,#fff) 28deg,var(--c-primary-deep) 60deg,var(--c-primary) 105deg,color-mix(in srgb,var(--c-primary) 45%,var(--c-accent)) 140deg,var(--c-primary-deep) 185deg,var(--c-primary) 235deg,color-mix(in srgb,var(--c-primary) 70%,#fff) 280deg,var(--c-primary-deep) 330deg,var(--c-primary-deep) 360deg);
}
body.wf-fx-footer-crystal .wf-ft__cta{border-bottom-color:color-mix(in srgb,var(--c-accent) 55%,transparent)}
body.wf-hf-light.wf-fx-footer-crystal .wf-ft{
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%) 130% 0/260% 100% no-repeat,
    conic-gradient(from 200deg at 68% 42%,var(--hf-foot,var(--c-softer)) 0deg,#fff 30deg,var(--hf-b3,var(--c-soft)) 62deg,var(--hf-b2,#fff) 110deg,var(--hf-foot,var(--c-softer)) 150deg,#fff 190deg,var(--hf-b3,var(--c-soft)) 240deg,var(--hf-b2,#fff) 290deg,var(--hf-foot,var(--c-softer)) 360deg);
}
body.wf-hf-light.wf-fx-footer-crystal .wf-ft__cta{border-bottom-color:color-mix(in srgb,var(--c-primary) 22%,transparent)}

/* ---------- Phone ---------- */
@media (max-width:640px){
  body.wf-fx-footer-glass .wf-ft__cta{margin-top:12px;padding:12px 14px}
  /* tall narrow heroes: stack the glow top to bottom instead of side to side */
  body.wf-fx-hero-glass :is(.hv-hero,.dv-hero,.jv-hero,.ab-hero){
    background:
      radial-gradient(100% 40% at 0% 6%,color-mix(in srgb,var(--c-accent) 34%,transparent),transparent 75%),
      radial-gradient(100% 38% at 100% 52%,color-mix(in srgb,var(--c-primary) 22%,transparent),transparent 75%),
      radial-gradient(90% 34% at 15% 100%,color-mix(in srgb,var(--c-accent) 24%,transparent),transparent 75%),
      #fff;
  }
}

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion:reduce){
  body[class*="wf-fx-"] :is(.wf-mast,.wf-ft,.hv-hero,.dv-hero,.jv-hero,.ab-hero){animation:none!important}
  body.wf-fx-cards-crystal :is(.jv-card,.pk-card,.pk-pc,.hv-row,.ab-visit__box){transition:none!important}
}