/* =========================================================================
   AECRL — interface chrome.

   The header, the navigation and the small interactive touches that make the
   site feel responsive rather than static. Content components live in
   aecrl.css; this file is only the furniture around them.

   Everything here degrades to a plain, usable header with no JavaScript, and
   every motion is disabled under prefers-reduced-motion at the end of the file.
   ========================================================================= */

:root {
  --aecrl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --aecrl-header-shadow: 0 1px 0 rgba(27, 23, 37, 0.08);
  --aecrl-header-shadow-lifted: 0 6px 24px -8px rgba(27, 23, 37, 0.28), 0 1px 0 rgba(27, 23, 37, 0.06);
}

/* -------------------------------------------------------------------------
   Sticky header

   The navigation is how somebody moves around 200-odd records; making them
   scroll back to the top to reach it is a small tax paid on every page.
   ------------------------------------------------------------------------- */

.wp-site-blocks > header {
  position: sticky;
  top: 0;
  /* Above the cover's background image and the revealed sections. */
  z-index: 100;
  background: var(--wp--preset--color--background, #fff);
  box-shadow: var(--aecrl-header-shadow);
  transition: box-shadow 260ms var(--aecrl-ease);
}

/* Lifted only once the page has actually scrolled, so a page at rest keeps a
   flat, quiet header rather than a permanent drop shadow. */
.aecrl-header-lifted .wp-site-blocks > header {
  box-shadow: var(--aecrl-header-shadow-lifted);
}

.aecrl-header-lifted .header-box-upper .wp-block-columns {
  padding-top: var(--wp--preset--spacing--10, 0.5rem);
  padding-bottom: var(--wp--preset--spacing--10, 0.5rem);
}

.header-box-upper .wp-block-columns {
  transition: padding 260ms var(--aecrl-ease);
}

/* -------------------------------------------------------------------------
   Navigation links

   The parent theme paints a hovered link with a black pill and a lopsided
   35px radius — inherited from a photography portfolio and badly out of place
   on a laboratory's masthead. It is replaced with an underline that grows from
   the left, which reads as a link rather than a button.
   ------------------------------------------------------------------------- */

.is-head-menu .wp-block-navigation-item > a,
.is-head-menu .wp-block-navigation-item > .wp-block-navigation-item__content {
  position: relative;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--primary, #000) !important;
  padding: 0.55rem 0.15rem !important;
  margin-inline: 0.55rem;
  text-decoration: none !important;
}

/* The underline. A pseudo-element rather than text-decoration so it can be
   animated and so it clears the descenders. */
.is-head-menu .wp-block-navigation-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: 2px;
  background: var(--wp--preset--color--accent-text, #8a5622);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--aecrl-ease);
}

.is-head-menu .wp-block-navigation-item:hover > a::after,
.is-head-menu .wp-block-navigation-item > a:focus-visible::after,
.is-head-menu .wp-block-navigation-item.current-menu-item > a::after {
  transform: scaleX(1);
}

/* The page you are on keeps its underline permanently, at full weight. */
.is-head-menu .current-menu-item > a,
.is-head-menu .current_page_item > a {
  font-weight: 600 !important;
}

/* -------------------------------------------------------------------------
   Submenus

   ON THE SPECIFICITY AND THE !important BELOW

   These are not defensive escalation. Nature Photography styles the submenu
   from its own stylesheet like this:

     header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
       border: 0 !important;
       background: transparent !important;
     }
     ... li.wp-block-navigation-item.wp-block-navigation-link {
       background-color: var(--wp--preset--color--accent) !important;
     }

   — 0,2,2 with !important, and the copper sits on the <li>, not the link. A
   rule written at 0,2,0 loses however late it loads, which is why the first
   attempt at this left two bare copper blocks hanging under the header. Each
   selector here is one step more specific than the rule it replaces, and no
   more.

   The parent also draws a white CSS triangle before every submenu link, which
   belongs to a photography portfolio and not to a laboratory. It is removed.
   ------------------------------------------------------------------------- */

.wp-site-blocks header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu,
.wp-site-blocks header .is-head-menu ul.wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--background, #fff) !important;
  border: 1px solid var(--wp--preset--color--hairline, #e2e2e6) !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 32px -12px rgba(27, 23, 37, 0.35) !important;
  padding: 0.35rem !important;
  min-width: 13rem !important;
  width: auto !important;
  /* Set clear of the parent so it is not flush against the header rule. The
     gap this opens is bridged by the ::before below — a margin alone is dead
     space, and a pointer crossing it leaves the element and closes the menu. */
  margin-top: 0.4rem;
  position: absolute;
  transform: translateY(-4px);
  transition:
    opacity 180ms var(--aecrl-ease),
    transform 180ms var(--aecrl-ease);
}

.wp-site-blocks header .wp-block-navigation-item:hover > ul.wp-block-navigation__submenu-container,
.wp-site-blocks header .wp-block-navigation-item:focus-within > ul.wp-block-navigation__submenu-container {
  transform: translateY(0);
}

/*
 * The bridge.
 *
 * The menu sits 0.4rem below its parent, and a pointer travelling from one to
 * the other crosses that gap — leaving both elements, which closes the menu
 * before it can be reached. This invisible strip extends the submenu's
 * hoverable area up over the gap so the journey never breaks.
 *
 * Height must be at least the margin above; a little more is forgiving of a
 * diagonal approach and costs nothing.
 */
.wp-site-blocks header ul.wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0.75rem;
  /* Invisible, but present to the pointer. */
  background: transparent;
}

/*
 * The label colour on hover.
 *
 * Nature Photography paints EVERY span inside the submenu white the moment the
 * container is hovered:
 *
 *   header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu:hover span {
 *     color: #fff !important; }
 *
 * On its own copper menu that was legible. On the white card here it made the
 * whole menu vanish the instant the pointer arrived — which is exactly what it
 * looked like: an empty box. None of the rules above touch it, because they
 * target the link and the colour is on the span inside it.
 */
.wp-site-blocks header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu:hover span,
.wp-site-blocks header ul.wp-block-navigation__submenu-container:hover span,
.wp-site-blocks header ul.wp-block-navigation__submenu-container li:hover span,
.wp-site-blocks header ul.wp-block-navigation__submenu-container a:hover span {
  /* Inherit from the link, so the link's own hover colour is what shows. */
  color: inherit !important;
}

/* The copper block. It is on the list item, so that is where it is removed. */
.wp-site-blocks header ul.wp-block-navigation__submenu-container li.wp-block-navigation-item,
.wp-site-blocks header ul.wp-block-navigation__submenu-container li.wp-block-navigation-item.wp-block-navigation-link {
  background: transparent !important;
  background-color: transparent !important;
  margin: 0 !important;
  border: 0 !important;
}

.wp-site-blocks header ul.wp-block-navigation__submenu-container li.wp-block-navigation-item:hover,
.wp-site-blocks header ul.wp-block-navigation__submenu-container li.wp-block-navigation-item:focus-within {
  background: var(--wp--preset--color--secbackground, #ebf3ff) !important;
  border-radius: 3px;
}

.wp-site-blocks header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-site-blocks header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  background: transparent !important;
  color: var(--wp--preset--color--primary, #000) !important;
  /* 0.6rem vertical on a 16px base clears the WCAG 2.2 24px target minimum. */
  padding: 0.6rem 0.75rem !important;
  margin: 0 !important;
  border-radius: 3px !important;
  font-size: 0.9375rem;
  transition: color 140ms var(--aecrl-ease);
}

.wp-site-blocks header ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
.wp-site-blocks header ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover span,
.wp-site-blocks header ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible,
.wp-site-blocks header ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible span {
  background: transparent !important;
  color: var(--wp--preset--color--accent-text, #8a5622) !important;
}

/* The parent's decorative white arrow before every submenu link. */
.wp-site-blocks header .wp-block-navigation__submenu-container a::before {
  content: none !important;
  display: none !important;
}

.wp-site-blocks header .wp-block-navigation__submenu-container a::after {
  display: none; /* The growing underline belongs to the top level only. */
}

/* The chevron turns over when the menu opens, so the control says which way it
   is going rather than staying put. */
.is-head-menu .wp-block-navigation-submenu__toggle svg,
.is-head-menu .wp-block-navigation__submenu-icon svg {
  transition: transform 200ms var(--aecrl-ease);
}

.is-head-menu .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle svg,
.is-head-menu .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle svg {
  transform: rotate(180deg);
}

/* The toggle is a real control and deserves a real target, not a 12px arrow. */
.is-head-menu .wp-block-navigation-submenu__toggle {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Focus

   One visible focus ring across the whole site. The default is a thin dotted
   outline that several browsers render almost invisibly on a light background.
   ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-text, #8a5622);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Skip link

   Keyboard users otherwise tab through the whole masthead on every page.
   Hidden until focused, then it sits over the header.
   ------------------------------------------------------------------------- */

.aecrl-skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  background: var(--wp--preset--color--secaccent, #1b1725);
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.9375rem;
  /* Off-screen rather than display:none, so it stays in the tab order. */
  transform: translateY(-160%);
  transition: transform 160ms var(--aecrl-ease);
}

.aecrl-skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

/* -------------------------------------------------------------------------
   Reduced motion

   Off, not faster. The sticky header, the card and the focus ring all stay —
   they are function, not decoration. Only the movement stops.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .header-box-upper .wp-block-columns,
  .wp-site-blocks > header,
  .is-head-menu .wp-block-navigation-item > a::after,
  .is-head-menu .wp-block-navigation__submenu-container,
  .is-head-menu .wp-block-navigation__submenu-container a,
  .is-head-menu .wp-block-navigation-submenu__toggle svg,
  .aecrl-skip-link {
    transition: none !important;
  }

  .is-head-menu .wp-block-navigation-item > a::after {
    transform: scaleX(1);
    opacity: 0;
  }

  .is-head-menu .wp-block-navigation-item:hover > a::after,
  .is-head-menu .wp-block-navigation-item.current-menu-item > a::after {
    opacity: 1;
  }

  .is-head-menu .wp-block-navigation__submenu-container {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Narrow screens

   Below the theme's breakpoint the navigation becomes a full-screen overlay,
   and none of the desktop treatment belongs in it: a white dropdown card
   floating inside the overlay reads as a rendering fault, which is exactly how
   it looked before these rules matched the specificity of the desktop ones
   above. Selectors here are deliberately as specific as those.

   The overlay itself is repainted in the site's ink rather than the parent's
   copper. Black text on that copper is legible but loud, and the ink matches
   the footer, so the site has one dark surface instead of two unrelated ones.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
  .wp-site-blocks > header {
    /* A fixed bar costs too much of a short viewport. */
    position: static;
  }

  .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--secaccent, #1b1725) !important;
    color: #fff !important;
    padding: 1.5rem 1.25rem !important;
  }

  .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open a,
  .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #fff !important;
    font-size: 1.05rem;
  }

  /* Each top-level row gets a hairline under it instead of a block of colour,
     so the list reads as a list. */
  .wp-site-blocks header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: transparent !important;
    width: 100%;
  }

  /* The submenu is indented, not boxed. */
  .wp-site-blocks header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu,
  .wp-site-blocks header .is-head-menu ul.wp-block-navigation__submenu-container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 1.1rem !important;
    margin-top: 0 !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .wp-site-blocks header ul.wp-block-navigation__submenu-container li.wp-block-navigation-item:hover,
  .wp-site-blocks header ul.wp-block-navigation__submenu-container li.wp-block-navigation-item:focus-within {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* The desktop rule above carries an extra .wp-block-navigation-submenu class,
     so it has to be matched here or it wins and paints these links black on the
     ink overlay — 1.2:1, which is invisible rather than merely low contrast. */
  .wp-site-blocks header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .wp-site-blocks header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item__content {
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 0.9375rem;
  }

  .wp-site-blocks header ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
  .wp-site-blocks header ul.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible {
    color: #fff !important;
  }

  /* The growing underline is a pointer affordance and has no job on a phone. */
  .is-head-menu .wp-block-navigation-item > a::after {
    display: none;
  }

  /* The close control ships as a white icon on a white chip; on the ink overlay
     that reads as a blank square where the X should be. */
  .wp-site-blocks header .is-menu-open .wp-block-navigation__responsive-container-close,
  .wp-site-blocks header .wp-block-navigation__responsive-container-close {
    background: transparent !important;
    color: #fff !important;
  }

  .wp-site-blocks header .wp-block-navigation__responsive-container-close svg {
    fill: #fff !important;
  }
}

/* =========================================================================
   Homepage hero

   A still photograph behind a flat wash of colour is a poster. These three
   changes make it a place the page begins from, without any of it competing
   with the words on top.
   ========================================================================= */

/* --- the image: a very slow drift ---------------------------------------- */

/*
 * 30 seconds, alternating, 1 to 1.06. Slow enough that nobody watches it
 * happening and the frame simply feels alive; fast enough that a reader who
 * stays half a minute sees the view has opened out.
 *
 * transform only, so it runs on the compositor and costs no layout.
 */
.aecrl-home-hero .wp-block-cover__image-background {
  animation: aecrl-hero-drift 30s ease-in-out infinite alternate;
  transform-origin: center 58%;
  will-change: transform;
}

@keyframes aecrl-hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* --- the overlay: a gradient, not a wash --------------------------------- */

/*
 * The flat 70% dim treated every part of the photograph the same. A gradient
 * that deepens downward holds the sky open at the top and puts the weight
 * under the text, where it is doing work.
 *
 * Contrast was checked at the lightest point: 0.62 of #1B1725 over a white
 * pixel gives #726F78, and white text on that is 5.03:1 — still above the 4.5
 * AA threshold, and the text block sits lower where the overlay is heavier.
 */
.aecrl-home-hero .wp-block-cover__background {
  background: linear-gradient(
    180deg,
    rgba(27, 23, 37, 0.62) 0%,
    rgba(27, 23, 37, 0.78) 55%,
    rgba(27, 23, 37, 0.9) 100%
  ) !important;
  opacity: 1 !important;
}

/* --- the scroll cue ------------------------------------------------------ */

/*
 * Injected by interface.js, so it exists only where it can also be dismissed.
 * It is decorative and carries aria-hidden: the page below is reachable by
 * scrolling, by the skip link and by the keyboard without it.
 */
.aecrl-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 400ms var(--aecrl-ease);
}

.aecrl-scroll-cue__chevron {
  width: 1.4rem;
  height: 1.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: aecrl-cue-bob 2.4s ease-in-out infinite;
}

@keyframes aecrl-cue-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* Once the reader has started, the invitation has done its job. */
.aecrl-header-lifted .aecrl-scroll-cue {
  opacity: 0;
}

@media (max-width: 781px) {
  .aecrl-scroll-cue {
    display: none; /* A short viewport has no room to spare for a hint. */
  }
}

/* --- reduced motion ------------------------------------------------------ */

/*
 * The drift and the bob stop completely. The gradient stays: it is contrast,
 * not movement. The cue stays too, holding still — it still says which way the
 * page goes.
 */
@media (prefers-reduced-motion: reduce) {
  .aecrl-home-hero .wp-block-cover__image-background {
    animation: none !important;
    transform: none !important;
  }

  .aecrl-scroll-cue__chevron {
    animation: none !important;
    opacity: 0.8;
  }

  .aecrl-scroll-cue {
    transition: none !important;
  }
}