/**
 × header_css v2.05 × updated 2026-10-07 ×
 × created 2025-12-03 × raimundo p. solar ×
 × Site header, navigation, mobile menu ×
 **/

/* Note: the panel can be wider than the text without moving text alignment. */

/* --------------------------------------------------
   HEADER BASE
-------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-top: 0.3rem;
  padding-bottom: 0.3rem;

  background: var(--color-white);

  transition:
    background-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-bar .site-header {
  top: 32px;
}

.site-header.transparent-header {
  background: transparent;
}

.site-header.solid-header {
  background: var(--color-white);
}


/* --------------------------------------------------
   LOGO
-------------------------------------------------- */

/* Logo artwork has its own frame: push the focus ring clear of it */
.logo:focus-visible {
  outline-offset: 6px;
}

.logo img {
  display: block;
  width: auto;
  height: 60px;
  filter: none;

  transition: filter 220ms ease;
}


/* --------------------------------------------------
   HEADER LAYOUT — DESKTOP
-------------------------------------------------- */

.nav-container {
  display: flex;
  margin-left: auto;
}

.menu-container {
  display: flex;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  align-items: center;
}


/* --------------------------------------------------
   PRIMARY MENU
-------------------------------------------------- */

.primary-nav .menu-group {
  display: flex;
  flex-direction: row;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  align-items: center;

  margin: 0;
  padding: 0;

  list-style: none;
}


/* Top-level items */

.primary-nav .menu-group > li {
  position: relative;

  display: flex;
  align-items: center;
}

.primary-nav .menu-group > li > a {
  display: inline-flex;
  align-items: center;

  padding: 0.4rem 0;

  line-height: 1;

  transition: color 180ms ease;
}


/*
  Parent menu behaviour:
  - By default, top-level menu items with submenus behave as labels.
  - To make one parent clickable, add the class "menu-parent-clickable"
    to that menu item in WordPress.
*/

.primary-nav
  .menu-group
  > li.menu-item-has-children:not(.menu-parent-clickable)
  > a {
  pointer-events: none;
  cursor: default;
}

.primary-nav
  .menu-group
  > li.menu-item-has-children.menu-parent-clickable
  > a {
  pointer-events: auto;
  cursor: pointer;
}


/* --------------------------------------------------
   DROPDOWN — DESKTOP
-------------------------------------------------- */

@media (min-width: 1011px) {

  /*
    The submenu remains display:block so it can animate.

    Hidden state:
    - invisible
    - slightly higher
    - cannot receive mouse interactions
  */

  .primary-nav .menu-group .sub-menu {
    position: absolute;
    top: calc(100% + 0.15rem);
    left: 0;
    z-index: 10;

    display: block;

    width: max-content;
    min-width: 100%;

    margin: 0 0 0 -0.6rem;
    padding: 0.15rem 0.5rem 0.5rem 0.6rem;

    list-style: none;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate3d(0, -0.4rem, 0);
    transform-origin: top left;

    will-change: opacity, transform;

    /*
      Slight closing delay prevents the submenu from
      disappearing immediately when moving the cursor.
    */

    transition:
      opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 280ms,
      background-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
      backdrop-filter 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }


  /*
    Visible state:
    soft fade combined with a short downward movement.
  */

  .primary-nav .menu-group li:hover > .sub-menu,
  .primary-nav .menu-group li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate3d(0, 0, 0);

    transition:
      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s,
      background-color 260ms ease,
      box-shadow 260ms ease,
      backdrop-filter 260ms ease;
  }


  /* Submenu items */

  .primary-nav .menu-group .sub-menu > li {
    display: block;
    width: auto;
    margin: 0;
  }

  .primary-nav .menu-group .sub-menu > li > a {
    display: block;
    width: auto;

    margin-top: 0.4rem;

    line-height: 1rem;
    white-space: nowrap;

    transition:
      color 160ms ease,
      opacity 160ms ease;
  }


  /* Solid header panel */

  .site-header.solid-header
    .primary-nav
    .menu-group
    .sub-menu {
    background: rgba(245, 242, 236, 0);
    box-shadow: 0 0.35rem 0.8rem rgba(20, 20, 20, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }

  .site-header.solid-header
    .primary-nav
    .menu-group
    li:hover
    > .sub-menu,
  .site-header.solid-header
    .primary-nav
    .menu-group
    li:focus-within
    > .sub-menu {
    background: rgba(245, 242, 236, 0.97);
    /* box-shadow: 0 0.35rem 0.8rem rgba(20, 20, 20, 0.05); */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }


  /* Transparent header submenu */

  .site-header.transparent-header
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a {
    color: var(--color-white);
  }


  /* Dropdown link hover */

  .site-header.transparent-header
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:hover,
  .site-header.transparent-header
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:focus-visible,
  .site-header.solid-header
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:hover,
  .site-header.solid-header
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:focus-visible {
    color: var(--color-s-orange);
  }


  /*
    Invisible bridge between parent and submenu.
    This prevents accidental closing while the cursor moves down.
  */

  .primary-nav .menu-group .sub-menu::before {
    content: "";

    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;

    height: 0.5rem;
  }
}


/* --------------------------------------------------
   UTILITY NAV
-------------------------------------------------- */

.utility-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1rem);
}

.nav-lang {
  display: inline-block;

  padding: 0 3px;

  text-decoration: none;

  transition: color 180ms ease;
}

.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  margin: 0;

  color: inherit;

  transition: color 180ms ease;
}

.nav-search__input {
  min-width: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  font: inherit;
  color: inherit;
  background: transparent;

  appearance: none;
  -webkit-appearance: none;
}

.nav-search__input:focus,
.nav-search__input:focus-visible {
  outline: none;
}

.nav-search__input::placeholder {
  color: #6b6b6b;
}

.nav-search__input::-webkit-search-cancel-button {
  display: none;
}

.nav-search__button {
  position: relative;
  /* Puts the icon exactly between cap height and baseline of "EN". */
  top: -0.03em;

  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 0;

  border: 0;

  font: inherit;
  color: inherit;
  background: none;

  cursor: pointer;
}

.nav-search__button:hover {
  color: var(--color-s-orange);
}

/*
 * Icon sized like a capital letter of the menu:
 * cap height (0.73em) and stroke as thick as the
 * Inter Light stem (0.07em = 7 units of the viewBox).
 */
.nav-search svg {
  display: block;
  width: 0.73em;
  height: 0.73em;
  overflow: visible;
}

.nav-search svg circle,
.nav-search svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: butt;
}



/**** Live results (header.js). ****/

.nav-search__results[hidden] {
  display: none;
}

.nav-search__result {
  display: block;

  padding: 0.45rem 0 0.5rem;

  border-top: 0.9px solid var(--color-black);

  color: var(--color-black);
  text-decoration: none;

  transition: color 180ms ease;
}

/* Feed language: small type label above the title. */
.nav-search__type {
  display: block;

  margin-bottom: 0.08rem;

  line-height: 1;
  text-transform: uppercase;
}

.nav-search__title {
  display: block;
}

.nav-search__all,
.nav-search__none {
  display: block;

  margin: 0;
  padding: 0.55rem 0 0;

  border-top: 0.9px solid var(--color-black);

  color: var(--color-black);
  text-decoration: none;
}

.nav-search__result:hover,
.nav-search__result:focus-visible,
.nav-search__all:hover,
.nav-search__all:focus-visible {
  color: var(--color-s-orange);
  outline: none;
}


/*
 * Desktop: search inline in the menu. Open
 * (header.is-searching): the menu words slide out to
 * the right, the field slides into their place at menu
 * size, a line draws under it from the icon, results
 * drop below the header.
 */
@media (min-width: 1011px) {

  .menu-container {
    position: relative;
  }

  .primary-nav,
  .nav-lang {
    transition:
      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  .site-header.is-searching .primary-nav,
  .site-header.is-searching .nav-lang {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate3d(2rem, 0, 0);

    transition:
      opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 360ms;
  }

  /* Field and line over the menu, up to the icon. */
  .nav-search__input,
  .nav-search::after,
  .nav-search__results {
    position: absolute;
    left: 0;
    right: calc(0.73em + 0.4rem);
  }

  .nav-search__input {
    top: 0;
    bottom: 0;

    width: auto;
  }

  .nav-search::after {
    bottom: 0;

    height: 0.9px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right;

    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);

    content: "";
  }

  /* Without JS the glass simply opens the search page. */
  .nav-search:not(.nav-search--enhanced) .nav-search__input {
    display: none;
  }

  .nav-search--enhanced:not(.is-open) .nav-search__input {
    opacity: 0;
    visibility: hidden;

    transform: translate3d(2rem, 0, 0);
  }

  .nav-search--enhanced .nav-search__input {
    transition:
      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 40ms,
      visibility 0s linear 0s;
  }

  .nav-search.is-open::after {
    transform: scaleX(1);
  }

  /* Results: solid page white (text behind would show through). */
  .nav-search__results {
    top: calc(100% + 0.6rem);

    margin: 0 -0.6rem;
    padding: 0.2rem 0.6rem 0.6rem;

    background: var(--color-white);
  }

  .nav-search__results > :first-child {
    border-top: 0;
  }

  /* Open on a photo header: solid header, black text. */
  .site-header.transparent-header.is-searching {
    background: var(--color-white);
  }

  .site-header.transparent-header.is-searching .nav-search,
  .site-header.transparent-header.is-searching .menu-container a {
    color: var(--color-black);
  }

  .site-header.transparent-header.is-searching .logo img {
    filter: none;
  }
}


/* --------------------------------------------------
   BURGER — BASE
-------------------------------------------------- */

.hamburger {
  display: none;
  flex-direction: column;

  margin: 0;
  padding: 0;

  border: 0;
  background: none;
  color: inherit;
  font: inherit;

  cursor: pointer;
}

.hamburger span {
  display: block;

  width: 25px;
  height: 2px;
  margin: 3px 0;

  background: var(--color-black);

  transform-origin: center;

  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    background-color 220ms ease;
}


/* --------------------------------------------------
   HEADER COLOR STATES
-------------------------------------------------- */

.site-header.transparent-header .menu-container a,
.site-header.transparent-header .utility-nav a,
.site-header.transparent-header .nav-search,
.site-header.transparent-header .nav-lang,
.site-header.transparent-header .nav-donate {
  color: var(--color-white);
}

.site-header.transparent-header .logo img {
  filter: brightness(0) invert(1);
}

.site-header.transparent-header .hamburger span {
  background: var(--color-white);
}

.site-header.solid-header .menu-container a,
.site-header.solid-header .utility-nav a,
.site-header.solid-header .nav-search,
.site-header.solid-header .nav-lang,
.site-header.solid-header .nav-donate {
  color: var(--color-black);
}

.site-header.solid-header .logo img {
  filter: none;
}

.site-header.solid-header .hamburger span {
  background: var(--color-black);
}

.site-header.transparent-header .link-hover a:hover,
.site-header.transparent-header .link-hover a:focus-visible,
.site-header.solid-header .link-hover a:hover,
.site-header.solid-header .link-hover a:focus-visible {
  color: var(--color-s-orange);
}

/*
 * Single Canid pages: when the top of the hero photo is
 * light (data-top, measured in get-canids.php), the
 * transparent header turns black for contrast.
 */
body:has(#p-hero[data-top="light"]) .site-header.transparent-header .menu-container a:not(:hover):not(:focus-visible),
body:has(#p-hero[data-top="light"]) .site-header.transparent-header .utility-nav a:not(:hover):not(:focus-visible),
body:has(#p-hero[data-top="light"]) .site-header.transparent-header .nav-search,
body:has(#p-hero[data-top="light"]) .site-header.transparent-header .nav-lang:not(:hover):not(:focus-visible) {
  color: var(--color-black);
}

body:has(#p-hero[data-top="light"]) .site-header.transparent-header .logo img {
  filter: none;
}

body:has(#p-hero[data-top="light"]) .site-header.transparent-header .hamburger span {
  background: var(--color-black);
}




/* --------------------------------------------------
   HEADER HOVER — DESKTOP
-------------------------------------------------- */

@media (min-width: 1011px) {

  /*
    On transparent-header pages, hovering or focusing
    anywhere inside the header temporarily switches
    the complete navigation to the solid state.
  */

  .site-header.transparent-header:hover,
  .site-header.transparent-header:focus-within {
    background: var(--color-white);
  }


  /* Navigation colours */

  .site-header.transparent-header:hover
    .menu-container a,
  .site-header.transparent-header:hover
    .utility-nav a,
  .site-header.transparent-header:hover
    .nav-lang,
  .site-header.transparent-header:hover
    .nav-donate,
  .site-header.transparent-header:hover
    .nav-search,
  .site-header.transparent-header:focus-within
    .menu-container a,
  .site-header.transparent-header:focus-within
    .utility-nav a,
  .site-header.transparent-header:focus-within
    .nav-lang,
  .site-header.transparent-header:focus-within
    .nav-donate,
  .site-header.transparent-header:focus-within
    .nav-search {
    color: var(--color-black);
  }


  /* Preserve the normal orange link hover state */

  .site-header.transparent-header:hover
    .menu-container a:hover,
  .site-header.transparent-header:hover
    .menu-container a:focus-visible,
  .site-header.transparent-header:hover
    .utility-nav a:hover,
  .site-header.transparent-header:hover
    .utility-nav a:focus-visible,
  .site-header.transparent-header:hover
    .nav-lang:hover,
  .site-header.transparent-header:hover
    .nav-lang:focus-visible,
  .site-header.transparent-header:hover
    .nav-donate:hover,
  .site-header.transparent-header:hover
    .nav-donate:focus-visible,
  .site-header.transparent-header:focus-within
    .menu-container a:hover,
  .site-header.transparent-header:focus-within
    .menu-container a:focus-visible,
  .site-header.transparent-header:focus-within
    .utility-nav a:hover,
  .site-header.transparent-header:focus-within
    .utility-nav a:focus-visible,
  .site-header.transparent-header:focus-within
    .nav-lang:hover,
  .site-header.transparent-header:focus-within
    .nav-lang:focus-visible,
  .site-header.transparent-header:focus-within
    .nav-donate:hover,
  .site-header.transparent-header:focus-within
    .nav-donate:focus-visible {
    color: var(--color-s-orange);
  }


  /* Logo */

  .site-header.transparent-header:hover
    .logo img,
  .site-header.transparent-header:focus-within
    .logo img {
    filter: none;
  }


  /* Hamburger, if ever visible at this breakpoint */

  .site-header.transparent-header:hover
    .hamburger span,
  .site-header.transparent-header:focus-within
    .hamburger span {
    background: var(--color-black);
  }


  /*
    The dropdown needs its own white surface because
    it extends below the physical header box.
  */

  .site-header.transparent-header:hover
    .primary-nav
    .menu-group
    li:hover
    > .sub-menu,
  .site-header.transparent-header:hover
    .primary-nav
    .menu-group
    li:focus-within
    > .sub-menu,
  .site-header.transparent-header:focus-within
    .primary-nav
    .menu-group
    li:hover
    > .sub-menu,
  .site-header.transparent-header:focus-within
    .primary-nav
    .menu-group
    li:focus-within
    > .sub-menu {
    background: rgba(245, 242, 236, 0.97);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }


  /*
    Override the normal transparent-header submenu
    colour while the header is in hover/focus mode.
  */

  .site-header.transparent-header:hover
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a,
  .site-header.transparent-header:focus-within
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a {
    color: var(--color-black);
  }


  /* Keep orange link interaction */

  .site-header.transparent-header:hover
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:hover,
  .site-header.transparent-header:hover
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:focus-visible,
  .site-header.transparent-header:focus-within
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:hover,
  .site-header.transparent-header:focus-within
    .primary-nav
    .menu-group
    .sub-menu
    > li
    > a:focus-visible {
    color: var(--color-s-orange);
  }
}


/* --------------------------------------------------
   MOBILE ADAPTATION
-------------------------------------------------- */

@media (max-width: 1010px) {

  .site-header {
    justify-content: space-between;

    padding-top: 0.4rem;
    padding-bottom: 0.4rem;

    background: var(--color-white);
    box-shadow: none;
  }

  .logo img {
    height: 48px;
    filter: none;
  }

  .hamburger {
    display: flex;
  }


  /* Always use solid header colours on mobile */

  .site-header.transparent-header,
  .site-header.solid-header {
    background: var(--color-white);
  }

  .site-header.transparent-header .menu-container a,
  .site-header.transparent-header .utility-nav a,
  .site-header.transparent-header .nav-lang,
  .site-header.transparent-header .nav-donate,
  .site-header.solid-header .menu-container a,
  .site-header.solid-header .utility-nav a,
  .site-header.transparent-header .nav-search,
  .site-header.solid-header .nav-search,
  .site-header.solid-header .nav-lang,
  .site-header.solid-header .nav-donate {
    color: var(--color-black);
  }

  .site-header.transparent-header .logo img,
  .site-header.solid-header .logo img {
    filter: none;
  }

  .site-header.transparent-header .hamburger span,
  .site-header.solid-header .hamburger span {
    background: var(--color-black);
  }


  /* Fullscreen overlay below header */

  .nav-container {
    position: fixed;
    top: 3.5rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;

    display: none;

    width: 100%;

    background: var(--color-white);
  }

  .site-header.is-menu-open .nav-container {
    display: flex;
  }

  .nav-container .menu-container {
    position: relative;

    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;

    padding: 1.5rem var(--gap-x) 2rem;
  }


  /* Utility navigation */

  .utility-nav {
    order: 1;

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;

    width: 100%;
    margin-top: 2.5rem;
  }

  .nav-search {
    position: relative;
    top: 0;

    display: flex;

    width: 100%;
    max-width: 360px;
    margin: 0;
    padding-bottom: 0.5rem;

    border-bottom: 1px solid #141414;
  }

  /* In the mobile menu the field is always open, in line. */
  .nav-search .nav-search__input,
  .nav-search--enhanced:not(.is-open) .nav-search__input {
    position: static;
    flex: 1;

    width: auto;
    padding: 0;

    border-bottom: 0;

    color: inherit;
    background: transparent;

    opacity: 1;
    visibility: visible;
  }

  /* Live results drop over the menu below the field. */
  .nav-search__results {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    z-index: 5;

    padding: 0 0 0.75rem;

    background: var(--color-white);
  }

  .nav-search__input::placeholder {
    color: currentColor;

    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }


  /* Primary navigation */

  .primary-nav {
    order: 2;

    width: 100%;
    max-width: 360px;
  }

  .primary-nav .menu-group {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;

    width: 100%;

    text-align: left;
  }

  .primary-nav .menu-group li,
  .primary-nav .menu-group li a {
    width: 100%;
  }

  .primary-nav .menu-group li a {
    display: block;

    font-size: 32px;
    line-height: 1.1;
    text-decoration: none;
  }


  /* Mobile submenus remain hidden */

  .primary-nav .menu-group .sub-menu {
    position: static;

    display: none;

    width: 100%;
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0.25rem 0 0.75rem 0.75rem;

    border-radius: 0;
    box-shadow: none;
    background: transparent;

    white-space: normal;
  }

  .primary-nav .menu-group .sub-menu a {
    padding: 0.35rem 0;

    color: var(--color-black);

    font-size: 18px;
    line-height: 1.2;
  }

  .nav-donate {
    display: none;
  }


  /* Hamburger animation */

  .hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: translateX(30px);
  }

  .hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}


/* --------------------------------------------------
   REDUCED MOTION
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .site-header,
  .logo img,
  .primary-nav .menu-group .sub-menu,
  .primary-nav .menu-group .sub-menu > li > a,
  .hamburger span {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}