/* World Heritage Trust — production layer
   1. Restores hover states (the source used a `style-hover` attribute the
      renderer silently discarded, so no hover effect ever reached the page).
   2. Adds a responsive layer. The source had no media queries at all and
      every layout value is an inline style, hence the attribute selectors.
   Layout is only ever collapsed to a single column, never rearranged. */

/* ---------- 1. hover states ---------- */
[data-h] {
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
[data-h="1"]:hover { background: var(--wht-sage-50); }
[data-h="2"]:hover {
  transform: perspective(1000px) rotateX(2deg) translateY(-8px);
  box-shadow: 0 2px 4px rgba(30,40,25,.06), 0 16px 32px rgba(30,40,25,.14), 0 32px 64px rgba(30,40,25,.12);
}
[data-h="3"]:hover { box-shadow: var(--wht-shadow-lg); transform: translateY(-4px); }
[data-h="4"]:hover { animation-play-state: paused; }

/* Images are wrapped in <picture> so a WebP can be offered with a JPEG/PNG
   fallback. display:contents removes the wrapper from the layout tree, so the
   <img> remains the flex or grid item it was and keeps its own order/flex
   styles. Without this, the four "Our Focus" images and the director portrait
   would lose their ordering. */
picture { display: contents; }
/* display:contents also exposes <source> to the parent's layout, and its UA
   display is not none in every engine: without this it becomes an extra grid
   or flex item. Hiding it does not affect which candidate the <img> picks,
   since source selection happens before layout. */
picture > source { display: none !important; }

/* ---------- 2. interactive affordances ---------- */
[data-dd] > span { user-select: none; }
[data-dd-menu] a:focus-visible,
[data-faq-toggle]:focus-visible,
[data-filter]:focus-visible { outline: 2px solid var(--wht-sage-600); outline-offset: 2px; }
[data-faq-toggle] { user-select: none; }
[data-faq-answer][hidden] { display: none !important; }
/* Mobile menu button. Hidden above the breakpoint, so desktop is unaffected. */
.wht-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--wht-sand-200);
  border-radius: var(--wht-radius-sm);
  background: var(--wht-white);
  cursor: pointer;
  flex: 0 0 auto;
}
.wht-nav-toggle:focus-visible { outline: 2px solid var(--wht-sage-600); outline-offset: 2px; }
.wht-nav-bars { display: block; width: 20px; height: 14px; position: relative; }
.wht-nav-bars i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: var(--wht-sage-700);
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.wht-nav-bars i:nth-child(1) { top: 0; }
.wht-nav-bars i:nth-child(2) { top: 6px; }
.wht-nav-bars i:nth-child(3) { top: 12px; }
.wht-nav-toggle.is-open .wht-nav-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.wht-nav-toggle.is-open .wht-nav-bars i:nth-child(2) { opacity: 0; }
.wht-nav-toggle.is-open .wht-nav-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-rail] { scroll-behavior: auto !important; }
}

/* A stray fixed width/height is baked into the home page h1 in the source
   (width: 1043px), most likely a drag in the canvas editor. It fits at desktop
   widths, so desktop is left exactly as designed; below ~1200px it would clip,
   so headings are allowed to reflow there. */
@media (max-width: 1200px) {
  h1[style*="width:"], h2[style*="width:"], h3[style*="width:"], p[style*="width:"] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* ---------- 3. tablet ---------- */
@media (max-width: 900px) {
  :root {
    --wht-text-display: 40px; --wht-text-h1: 32px; --wht-text-h2: 26px;
    --wht-text-h3: 21px; --wht-text-h4: 18px; --wht-text-lead: 17px; --wht-text-body: 16px;
  }
  /* every multi-column inline grid collapses to one column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 140px 160px 1fr"],
  [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* images that were ordered around a text column stop forcing their order */
  [style*="order: 1"], [style*="order: 3"] { order: 0 !important; }
  section > div[style*="gap: 48px"] { gap: 28px !important; }
}

/* ---------- 4. phone ---------- */
@media (max-width: 700px) {
  header { flex-wrap: wrap; gap: 14px; }
  .wht-nav-toggle { display: inline-flex; }
  /* the nav collapses behind the button and only opens on demand */
  header > nav { display: none !important; }
  header > nav.wht-nav-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px;
    width: 100%;
    order: 3;
    padding: 6px 0 10px;
    border-top: 1px solid var(--wht-sand-200);
  }
  header > nav.wht-nav-open > a,
  header > nav.wht-nav-open > div > span {
    display: block;
    padding: 12px 4px;
    font-size: 15px !important;
  }
  header > nav.wht-nav-open > a:last-child {
    text-align: center; margin-top: 6px;
  }
  /* dropdown panels flow inline instead of floating off-screen */
  [data-dd] { position: static !important; }
  [data-dd-menu] {
    position: static !important; min-width: 0 !important; width: 100%;
    box-shadow: none !important; margin-top: 8px;
  }
  section[style*="height: 560px"], section[style*="height: 520px"] { height: auto !important; min-height: 380px; }
  [style*="height: 380px"], [style*="height: 360px"], [style*="height: 320px"] { height: 240px !important; }
  [data-rail] > div { width: 84vw !important; }
  h1, h2 { text-wrap: balance; }
}