.text-black-primary {
  color: var(--color-black-primary);
}

/* Hide google recaptcha badge */
.grecaptcha-badge {
  @apply sr-only;
}

.swiper-pagination-bullet {
  @apply w-2 h-2 border border-white;
}

.swiper-pagination-bullet-active {
  @apply !bg-white;
}

.rich-text.a-normal p a {
  @apply no-underline;
}

.swiper-slide-thumb-active {
  @apply border-2 border-white;
}

/**
 * Vanilla Radix State Styles
 */

/* 1. Accordion / Collapsible (Scoped to content) */
.accordion-content[data-state="closed"],
[data-collapsible-content][data-state="closed"],
[data-accordion-content][data-state="closed"] {
    display: none;
}

.accordion-content[data-state="open"],
[data-collapsible-content][data-state="open"],
[data-accordion-content][data-state="open"] {
    display: block;
}

/* 2. Tabs */
[data-radix-tabs-content][data-state="inactive"] {
    display: none;
}
[data-radix-tabs-content][data-state="active"] {
    display: block;
}

/* 3. Popover / Select */
[data-radix-popover-content],
[data-radix-select-content] {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-radix-popover-content][data-state="closed"],
[data-radix-select-content][data-state="closed"] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    display: none;
}

[data-radix-popover-content][data-state="open"],
[data-radix-select-content][data-state="open"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    display: block;
    visibility: visible;
}

/* 4. Toasts */
[data-radix-toast-viewport] {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.5rem;
    width: 400px;
    max-width: 100vw;
    margin: 0;
    list-style: none;
    z-index: 2147483647;
    outline: none;
}

.toast {
    @apply bg-black-primary border border-white/10 p-4 rounded-lg shadow-2xl relative;
    transition: all 0.3s ease;
}

.toast[data-state="open"] {
    animation: slideIn 0.3s ease-out;
}

.toast[data-state="closed"] {
    animation: hide 0.1s ease-in forwards;
}

.toast-title {
    @apply font-nord font-bold text-white mb-1;
}

.toast-description {
    @apply text-white/60 text-sm;
}

.toast-close {
    @apply absolute top-2 right-2 text-white/40 hover:text-white transition-colors;
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes hide {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Hide browser default number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Intl-Tel-Input Styles */
div.iti {
  display: flex !important;
  width: 100% !important;
}

div.iti input.iti__tel-input {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 52px !important;
  padding-right: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background-color: #ffffff !important; /* bg-white */
  color: #0f0f0f !important; /* black-darkest */
  font-weight: 300 !important;
  border: solid 1px #d0d0d0 !important; /* border-grey-medium */
  border-radius: 0.375rem !important; /* matched to rounded-md */
  outline: none !important;
  height: auto !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.iti__country-list {
  background-color: #ffffff;
  color: #0f0f0f;
  z-index: 100;
}

.iti__selected-flag {
  background-color: transparent !important;
}

/* Fixes */
.pb-5 {
  padding-bottom: calc(var(--spacing) * 5);
}

.pl-6 {
  padding-left: calc(var(--spacing) * 6);
}

.px-1\.25 {
  padding-inline: calc(var(--spacing) * 1.25);
}

.right-3 {
  right: calc(var(--spacing) * 3);
}

.rotate-90 {
  rotate: 90deg;
}

.text-black-secondary\/70 {
  color: #383838b3;
}


.-mx-6 {
  margin-inline: calc(var(--spacing) * -6);
}

button[data-mobile-menu-toggle] > span {
  background-color: var(--color-white);
}

.group\/button-chevron:hover .group-hover\:bg-white,
.group\/button-chevron:focus .group-focus\:bg-white {
  background-color: var(--color-white);
  color: var(--color-black-darkest);
}

.group\/button-chevron:hover .group-hover\:bg-black,
.group\/button-chevron:focus .group-focus\:bg-black {
  background-color: var(--color-black-darkest);
  color: var(--color-white);
}

.group\/link-social-media:hover img {
  --tw-invert: invert(100%);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.max-w-\[380px\] {
  max-width: 380px;
}

.group\/submenu.submenu-open [data-submenu-trigger] {
  border-bottom: 2px solid var(--color-white);
}

.group\/submenu.submenu-open .submenu-dropdown {
  opacity: 1;
  visibility: visible;
  margin-top: 40px;
}

.header-black header {
  background-color: var(--color-black-darkest);
  color: var(--color-white);
}

.header-black header .group\/submenu.submenu-open .submenu-dropdown > div {
  color: var(--color-white);
  background-color: var(--color-black-darkest);
}

.header-white header {
  background-color: var(--color-white);
  color: var(--color-black-darkest);
}

.header-white header img {
  --tw-invert: invert(100%);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.header-white header .btn {
  background-color: var(--color-black-darkest);
  color: var(--color-white);
}

.header-white header .border-white\/20 {
  border-color: color-mix(in oklab, var(--color-black-primary) 20%, transparent);
}

.header-white header .group\/submenu.submenu-open [data-submenu-trigger] {
  border-bottom: 2px solid var(--color-black-darkest);
}

.header-white header .group\/submenu.submenu-open .submenu-dropdown > div {
  background-color: var(--color-white);
  color: var(--color-black-darkest);
}

.header-white header .btn:hover {
  background-color: var(--color-white);
  border-color: var(--color-black-darkest);
  color: var(--color-black-darkest);
}

.header-white header button[data-mobile-menu-toggle] > span {
  background-color: var(--color-black-darkest);
}

:where(.\!space-y-1>:not(:last-child)) {
    --tw-space-y-reverse: 0!important;
  margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)) !important;
  margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))) !important;
}

p.spacer {
  min-height: calc(var(--spacing) * 6);
}

.\[\&_strong\]\:font-nord strong {
  font-family: var(--font-nord);
}

.\[\&_strong\]\:font-medium strong {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.\[\&_strong\]\:uppercase strong {
  text-transform: uppercase;
}

.\[\&_em\]\:opacity-70 em {
  opacity: .7;
}

.min-w-16 {
  min-width: calc(var(--spacing) * 16);
}

.py-7\.5 {
  padding-block: calc(var(--spacing) * 7.5);
}

.w-2\.5 {
  width: calc(var(--spacing) * 2.5);
}

.size-4\.5 {
  width: calc(var(--spacing) * 4.5);
  height: calc(var(--spacing) * 4.5);
}

.border-grey-medium {
  border-color: var(--color-grey-medium);
}

.-mx-1\.25 {
  margin-inline: calc(var(--spacing) * -1.25);
}

.border-l-2 {
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
}

.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}

.data-\[state\=open\]\:border-l-white[data-state=open] {
  border-left-color: var(--color-white);
}

.aspect-\[352\/318\] {
  aspect-ratio: 1.10692;
}

.slider-arrow-outlined-white {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
  border-radius: 3.40282e+38px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-white);
}

.slider-arrow-outlined-white:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.currency-switcher-section .currency-switcher-icon {
  margin-right: 0;
}

.currency-switcher-section .currency-switcher-dropdown {
  margin-top: 0;
}

.accordion-item.border-l-2[data-state="closed"] {
  color: #0000;
}

.block-image-info .image-wrapper {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}

.block-our-story .gallery-wrapper .image-wrapper {
  height: 396px;
}

.block-our-values .gallery-wrapper .image-wrapper {
  height: 539px;
}

.block-our-values .accordion-item:first-child .accordion-trigger {
  padding-top: 0;
}

.block-destination-intro .enquire-cta .btn-white {
  margin-right: 1.5rem;
}

.destination-intro-slider .swiper-wrapper .swiper-slide {
  width: 448px !important;
}

.zoom-img:hover img {
  --tw-scale-x: 105%;
  --tw-scale-y: 105%;
  --tw-scale-z: 105%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}

@media (min-width: 48rem) {
  .md\:text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .block-image-info .image-wrapper {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 14) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-x-reverse)));
    margin-bottom: 0;
  }

  :where(.md\:space-y-0>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  .md\:w-1\/3 {
    width: 33.3333%;
  }

  .md\:p-4 {
    padding:   calc(var(--spacing) * 4);
  }

  .md\:-m-4 {
    margin: calc(var(--spacing) * -4);
  }
}

@media (min-width: 64rem) {
  .lg\:pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .lg\:h-full {
    height: 100%;
  }

  .\[\&_strong\]\:lg\:text-xl strong {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .\[\&\:nth-child\(2n\+1\)\]\:lg\:w-\[36\%\]:nth-child(odd) {
    width: 36%;
  }

  .\[\&\:nth-child\(2n\+2\)\]\:lg\:w-\[64\%\]:nth-child(2n+2) {
    width: 64%;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:max-w-150 {
    max-width: calc(var(--spacing) * 150);
  }

  .lg\:max-w-\[458px\] {
    max-width: 458px;
  }

  .lg\:aspect-\[448\/296\] {
    aspect-ratio: 1.51351;
  }

  .lg\:w-5 {
    width: calc(var(--spacing) * 5);
  }

  .lg\:h-5 {
    height: calc(var(--spacing) * 5);
  }

  .lg\:mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .lg\:mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .lg\:mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }

  .lg\:my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .lg\:mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .lg\:mt-15 {
    margin-top: calc(var(--spacing) * 15);
  }

  .lg\:mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }

  .lg\:mt-\[26px\] {
    margin-top: 26px;
  }
}

@media (min-width: 80rem) {
  .xl\:mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  :where(.xl\:space-x-32>:not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 32) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 32) * calc(1 - var(--tw-space-x-reverse)));
  }

  .xl\:max-w-\[660px\] {
    max-width: 660px;
  }

  .xl\:justify-center {
    justify-content: center;
  }

  .xl\:flex-row {
    flex-direction: row;
  }
}

/* Hero video: override vLitejs default 16:9 aspect so video fills the dvh container */
.block-hero .video-player,
.block-hero .v-vlite,
.block-hero .v-vlite.v-video {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: unset;
}

.block-hero .v-vlite video,
.block-hero video.vlite-js {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-hero .video-player__poster,
.block-hero .video-player__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Our Values accordion: active-state left border and chevron rotation (parity with Payload site) */
.block-our-values [data-accordion-item][data-state="open"] {
  border-left-color: #fff;
}
.block-our-values [data-accordion-item][data-state="closed"] {
  border-left-color: transparent;
}
.block-our-values [data-accordion-trigger] .plus-icon {
  transition: transform 0.3s ease;
}
.block-our-values [data-accordion-trigger][data-state="open"] .plus-icon {
  transform: rotate(-180deg);
}
.block-our-values [data-accordion-item]:first-child [data-accordion-trigger] {
  padding-top: 0;
}

/* Smooth open/close animation for all accordions.
   JS drives max-height from the element's real scrollHeight so the timing is
   correct for any content length, and padding is preserved (clipped when closed). */
[data-accordion-content] {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease; /* padding snaps instantly so scrollHeight is measured correctly */
}
/* keep content rendered in every state so it can animate; overrides both
   Tailwind .hidden (display:none) and main.css [data-state=closed]{display:none} */
[data-accordion-content][data-state="closed"],
[data-accordion-content][data-state="open"],
[data-accordion-content].hidden {
  display: block;
}
/* zero the vertical padding only when closed (max-height:0 doesn't clip padding);
   the open state keeps the block's own Tailwind padding (pb-6 lg:pb-8 etc.) */
[data-accordion-content][data-state="closed"] {
  padding-top: 0;
  padding-bottom: 0;
}
[data-accordion-content][data-state="open"] {
  max-height: none; /* default-open items show immediately; JS manages transitions */
}

/* Accordion trigger cursor */
[data-accordion-trigger] {
  cursor: pointer;
}

/* Currency switcher underline: react only to its own button.
   <html class="group"> (needed for mobile-menu variants) makes the markup's
   unscoped group-hover fire when hovering anywhere on the page. Tailwind's
   group-hover compiles to (0,2,0), so we need higher specificity to scope it. */
.currency-switcher-section > .currency-switcher-trigger > div {
  transform: scaleX(0);
}
.currency-switcher-section > .currency-switcher-trigger:hover > div,
.currency-switcher-section > .currency-switcher-trigger:focus-visible > div,
.currency-switcher-section > .currency-switcher-trigger[data-state="open"] > div {
  transform: scaleX(1);
}

/* Nav underline color follows the header text color.
   The markup's group-[.header-*]:bg-white variants are dead (group is on <html>,
   header-* is on <body>), so drive the color from the working .header-* descendant. */
.header-transparent header .group\/menu-link > div,
.header-transparent header [data-submenu-trigger] > div,
.header-transparent header .currency-switcher-trigger > div,
.header-black header .group\/menu-link > div,
.header-black header [data-submenu-trigger] > div,
.header-black header .currency-switcher-trigger > div {
  background-color: #fff;
}
.header-white header .group\/menu-link > div,
.header-white header [data-submenu-trigger] > div,
.header-white header .currency-switcher-trigger > div {
  background-color: var(--color-black-primary);
}

/* btn-black utility — missing from compiled main.css (Tailwind didn't generate it) */
.btn-black {
  cursor: pointer;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: 14px;
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  text-transform: uppercase;
  display: inline-block;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-black-darkest);
  background-color: var(--color-black-darkest);
  color: var(--color-white);
  border-radius: 3.40282e38px;
  transition-property: color, background-color, border-color, outline-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: .3s;
}
.btn-black:hover:not(:active), .btn-black:focus:not(:active) {
  border-color: var(--color-black-darkest);
  background-color: var(--color-white);
  color: var(--color-black-darkest);
}
.btn-black:disabled {
  pointer-events: none;
  color: var(--color-black-tertiary);
}

/* Inclusions / Exclusions icons — point root-absolute paths to theme assets */
.rich-text-inclusions ul li:before {
  background-image: url("../img/icon-circle-check-white.svg");
}
.rich-text-exclusions ul li:before {
  background-image: url("../img/icon-circle-x-white.svg");
}

/* Activities slider: fixed-width cards so slidesPerView:auto overflows and scrolls */
.block-activities-slider .swiper-slide {
  width: 80%;
  max-width: 408px;
}
@media (min-width: 1024px) {
  .block-activities-slider .swiper-slide {
    width: 408px;
    max-width: 408px;
  }
}

/* Our Story image gallery: the grid inside is positioned lg:absolute lg:inset-0,
   so the wrapper needs an aspect-ratio height or it collapses to 0 and the images
   overflow down into the dark Our Values section. The live uses
   lg:pt-[calc(396/1119*100%)]; that arbitrary value isn't in the build, so set it here. */
@media (min-width: 1024px) {
  .block-our-story .gallery-wrapper {
    padding-top: calc(396 / 1119 * 100%);
  }
}

/* ---------------- Contact Form 7 ---------------- */
/* CF7 wraps each field in an inline span; make it block so w-full + spacing work */
.wpcf7-form-control-wrap {
  display: block;
}
/* Submit: full width on mobile, fit-content (centered by parent) on desktop.
   CF7 can't output the "md:" colon class, so handle the breakpoint here. */
@media (min-width: 768px) {
  .wpcf7 .wpcf7-submit {
    width: auto;
  }
}
/* Intl-tel-input full width for the phone field */
.wpcf7 .iti {
  width: 100%;
  display: block;
}
/* Inline validation tips */
.wpcf7 .wpcf7-not-valid-tip {
  color: var(--color-red-error);
  font-size: 0.8rem;
  font-weight: 300;
  margin-top: 0.375rem;
}
.wpcf7 .wpcf7-not-valid {
  border-color: var(--color-red-error) !important;
}
/* Response message (success / validation summary) */
.wpcf7 .wpcf7-response-output {
  margin: 1.5rem 0 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.375rem;
  font-weight: 300;
  font-size: 0.9rem;
  text-align: center;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2e7d32;
  color: #2e7d32;
}

/* Date field trigger (flatpickr alt input) — calendar icon on the right, "Select" placeholder */
.flatpickr-alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f0f0f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
}
.flatpickr-alt::placeholder {
  color: #9ca3af; /* gray-400, matches live */
  opacity: 1;
}

/* Flatpickr calendar popup — styled to match the live calendar */
.flatpickr-calendar {
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0.5rem 0.75rem;
  font-family: var(--font-sora), sans-serif;
  width: auto;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none; }
.flatpickr-months { padding-top: 0.25rem; align-items: center; }
.flatpickr-current-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: var(--font-nord), sans-serif;
  color: var(--color-black-darkest);
  font-weight: 500;
}
/* Tidy the month dropdown + year number input so the year isn't cramped */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
.flatpickr-current-month .numInputWrapper { width: 5ch; }
.flatpickr-current-month .numInputWrapper span { display: none; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--color-black-darkest); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--color-black-tertiary); }
.flatpickr-weekday {
  color: var(--color-black-darkest);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.flatpickr-day {
  color: var(--color-black-darkest);
  border-radius: 9999px;
  font-weight: 400;
}
.flatpickr-day.today {
  font-weight: 700;
  border-color: transparent;
}
.flatpickr-day:hover,
.flatpickr-day.today:hover {
  background: var(--color-grey-dark);
  border-color: transparent;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-black-darkest);
  border-color: var(--color-black-darkest);
  color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(15, 15, 15, 0.25);
  background: transparent;
}

/* ---------------- Hover scoping fixes ---------------- */
/* <html class="group"> makes unscoped group-hover fire page-wide. Scope these to their own object. */

/* Arrow-button chevron: fill the circle only when its own button is hovered/focused */
.group\/button-chevron > span:last-child {
  background-color: transparent;
  color: inherit;
}
.group\/button-chevron:hover > span.border-white\/40,
.group\/button-chevron:focus-visible > span.border-white\/40 {
  background-color: var(--color-white);
  color: var(--color-black-darkest);
}
.group\/button-chevron:hover > span.border-black-primary\/20,
.group\/button-chevron:focus-visible > span.border-black-primary\/20 {
  background-color: var(--color-black-primary);
  color: var(--color-white);
}

/* Press card image: zoom only when hovering the card itself */
.block-press-list .group img.group-hover\:scale-105 {
  scale: 1;
}
.block-press-list .group:hover img.group-hover\:scale-105 {
  scale: 1.05;
}

/* Press pagination: circular page buttons + active/hover states
   (size-8 / aria-disabled:* / hover:border-* aren't compiled) */
.block-press-list [aria-label="pagination"] a {
  width: 2rem;
  height: 2rem;
}
.block-press-list [aria-label="pagination"] a:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.block-press-list [aria-label="pagination"] a[aria-disabled="true"] {
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* Pretitle dash: vedanta_render_pretitle() renders the line at h-[0.5px], which
   paints sub-pixel (anti-aliased to ~40% gray) and reads as "missing" on dark
   backgrounds (reported on /press/ and /gallery/). Bump the pretitle line — the
   w-6 bar that is a direct child of the flex wrapper — to a crisp 1px. */
.flex.items-center > .w-6.h-\[0\.5px\] {
  height: 1px;
}

/* Gallery section top padding to clear the fixed header (live uses
   pt-14 / lg:pt-[88px]). pt-14 (56px) compiles, but the lg:pt-[88px] arbitrary
   value isn't in the build, so set the desktop value here. */
@media (min-width: 1024px) {
  .block-gallery-tab {
    padding-top: 88px;
  }
}

/* Mobile menu currency switcher (bottom row): the chevron points up when closed
   (the list opens upward) and down when open — matches the live. The -rotate-180
   utility isn't in the build, so set the rotation here. */
.mobile-currency-switcher [data-collapsible-trigger] > span:last-child {
  rotate: 180deg;
}
.mobile-currency-switcher [data-collapsible-trigger][data-state="open"] > span:last-child {
  rotate: 0deg;
}
/* Mobile currency dropdown: grey panel + radio-style options (filled when selected,
   driven by aria-selected which the switch JS keeps in sync). Matches the live. */
.currency-dropdown-panel {
  background-color: #262626;
}
/* Force the dropdown to open upward with a gap above the trigger. bottom-full works
   but mb-3 isn't in the build and a stray top offset pushes it down, so set it here. */
.mobile-currency-switcher [data-collapsible-content] {
  top: auto !important;
  bottom: calc(100% + 0.75rem) !important;
  right: 0;
}
.mobile-currency-switcher .currency-radio {
  width: 1.125rem;
  height: 1.125rem;
}
.mobile-currency-switcher .currency-radio-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mobile-currency-switcher .currency-switch-btn[aria-selected="true"] .currency-radio-dot {
  opacity: 1;
}
.mobile-currency-switcher .currency-switch-btn[aria-selected="true"] {
  color: #fff;
}
.mobile-currency-switcher .currency-switch-btn[aria-selected="false"] {
  color: rgba(255, 255, 255, 0.6);
}

/* ---------------- Footer newsletter (CF7 form 433) ---------------- */
/* The submit button is inline-block with an inline SVG, so it inherits a tall
   line-box and grows to ~84px (overflowing the 50px input). Make it a centered
   flex box and the SVG a block element so its height collapses to icon+padding. */
.newsletter-cf7 form.wpcf7-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.newsletter-cf7 form.wpcf7-form button[type="submit"] svg {
  display: block;
}
.newsletter-cf7 form.wpcf7-form button[type="submit"]:hover {
  background-color: var(--color-white);
  color: var(--color-black-darkest);
}
/* Keep the chevron locked to the input's vertical centre. CF7 inserts the
   validation tip in-flow, which grows the .relative wrapper and would otherwise
   push the absolutely-positioned (top-1/2) button down out of the field. Pin it
   to the input centre (input height = py-3 + text ≈ 50px) so it stays put. */
.newsletter-cf7 .relative > p { margin: 0; }
.newsletter-cf7 .relative > .absolute { top: 25px; }
/* Response/validation message readable on the dark footer */
.newsletter-cf7 .wpcf7-response-output {
  color: var(--color-white);
}
/* CF7's accessibility error list duplicates the field error text on screen.
   It's meant to be visually hidden, but the footer form can enqueue CF7's own
   stylesheet too late for <head> on some pages, leaving it visible (the user's
   "two messages"). Force it hidden here (custom.css always loads in <head>). */
.wpcf7 .screen-reader-response {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}