/* ==========================================================================
   Header & Navigation
   Tietoturvaajaksi: dark primary background + white nav + accent hover.
   Mobile: hamburger toggle → dropdown. Desktop: inline horizontal nav.
   Fixed positioning lives in style.css @layer header.
   ========================================================================== */

@layer header {
  /* ----- Inner wrapper ----- */

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--40, 1rem);
    padding-block: var(--wp--preset--spacing--30, 0.75rem);
    padding-inline: max(var(--wp--preset--spacing--50, 1.5rem), calc((100% - min(1200px, 90vw)) / 2));
    max-inline-size: 100%;
    margin-inline: auto;
  }

  /* ----- Branding (logo) ----- */

  .site-header__branding {
    flex-shrink: 0;

    a {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }

    .custom-logo-link {
      display: inline-flex;
      align-items: center;
    }

    .custom-logo {
      max-block-size: 3rem;
      inline-size: auto;
    }

    .site-title {
      margin: 0;
      font-size: var(--wp--preset--font-size--medium, 1rem);
      font-family: var(--wp--preset--font-family--heading, system-ui, sans-serif);
      font-weight: 700;
      line-height: var(--wp--custom--line-height--tight, 1.25);
      text-decoration: none;
      color: var(--wp--preset--color--base, #fff);
    }
  }

  /* ----- Site nav wrapper ----- */

  .site-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--40, 1rem);
  }

  /* ----- Header CTA button ----- */

  .site-nav .header-cta {
    display: inline-flex;
    align-items: center;
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--contrast);
    border: 0;
    border-radius: 20px;
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    font-weight: 600;
    line-height: var(--wp--custom--line-height--tight, 1.25);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ----- Mobile menu toggle ----- */

  .menu-toggle {
    padding: var(--wp--preset--spacing--30, 0.75rem);
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;

    &:focus-visible {
      outline: 2px solid var(--wp--preset--color--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }

    @media (min-width: 48rem) {
      display: none;
    }
  }

  /* ----- Hamburger icon (3 lines → X) ----- */

  .hamburger {
    display: block;
    background: var(--wp--preset--color--base, #fff);
    block-size: 3px;
    inline-size: 1.75em;
    border-radius: 3px;
    position: relative;
    transition: transform var(--wp--custom--timing--normal, 300ms) ease;

    &::before,
    &::after {
      content: "";
      display: block;
      background: var(--wp--preset--color--base, #fff);
      block-size: 3px;
      inline-size: 1.75em;
      border-radius: 3px;
      position: absolute;
      inset-inline-start: 0;
      transition: all var(--wp--custom--timing--normal, 300ms) ease;
    }

    &::before {
      transform: translateY(-7px);
    }

    &::after {
      transform: translateY(7px);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;

      &::before,
      &::after {
        transition: none;
      }
    }
  }

  [aria-expanded="true"] .hamburger {
    transform: rotate(45deg);

    &::before {
      opacity: 0;
    }

    &::after {
      transform: translateY(0) rotate(-90deg);
    }
  }

  /* ----- Primary navigation (mobile dropdown by default) ----- */

  .primary-navigation {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    margin: 8px 0 0;
    background: var(--wp--preset--color--primary);
    box-shadow: var(--wp--preset--shadow--md);
    padding: 0;
    list-style: none;
    min-inline-size: 16rem;
    z-index: var(--wp--custom--z-index--dropdown, 300);

    &[data-state="closed"] {
      display: none;
    }

    &[data-state="opened"] {
      display: block;
      animation: menuSlideIn 250ms ease-out forwards;
    }

    &[data-state="closing"] {
      animation: menuSlideOut 200ms ease-in forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      &[data-state="opened"],
      &[data-state="closing"] {
        animation: none;
      }
    }

    li {
      border-block-end: 1px solid rgb(255 255 255 / 0.12);

      &:last-child {
        border-block-end: none;
      }
    }

    a {
      color: var(--wp--preset--color--base) !important;
      display: block;
      padding-block: 1.25em;
      padding-inline: 1.5em 3em;
      text-decoration: none !important;
      font-size: var(--wp--preset--font-size--medium, 1rem);
      transition:
        background var(--wp--custom--timing--fast, 150ms) ease,
        color var(--wp--custom--timing--fast, 150ms) ease;

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &:hover,
      &:focus {
        background: rgb(255 255 255 / 0.08);
        color: var(--wp--preset--color--accent) !important;
      }

      &:focus-visible {
        outline: 2px solid var(--wp--preset--color--accent);
        outline-offset: -2px;
      }
    }

    .current-menu-item a {
      font-weight: 700;
      color: var(--wp--preset--color--accent) !important;
      background: transparent;
    }

    .menu-item-has-children {
      position: relative;
    }

    .sub-menu-toggle {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      block-size: 100%;
      inline-size: 3em;
      background: transparent;
      border: 0;
      border-inline-start: 1px solid rgb(255 255 255 / 0.12);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--wp--preset--color--base);

      svg {
        fill: currentColor;
        transition: transform var(--wp--custom--timing--fast, 150ms) ease;

        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }

      &[aria-expanded="true"] svg {
        transform: rotate(180deg);
      }

      &:focus-visible {
        outline: 2px solid var(--wp--preset--color--accent);
        outline-offset: -2px;
      }
    }

    .sub-menu {
      list-style: none;
      margin: 0;
      padding: 0;
      background: rgb(0 0 0 / 0.15);

      &[data-state="closed"] {
        display: none;
      }

      &[data-state="open"] {
        display: block;
      }

      a {
        padding-inline-start: 2.75em;
        opacity: 0.85;
      }
    }

    /* ----- Desktop: inline horizontal ----- */

    @media (min-width: 48rem) {
      position: static;
      display: flex !important;
      margin: 0;
      background: transparent;
      box-shadow: none;
      gap: var(--wp--preset--spacing--30, 0.5rem);
      min-inline-size: auto;
      animation: none !important;
      list-style: none;
      padding: 0;

      li {
        border-block-end: none;
      }

      a,
      a:visited,
      a:link {
        color: var(--wp--preset--color--base) !important;
        text-decoration: none !important;
        padding-block: 0.375em;
        padding-inline: 0.75em;
        font-size: var(--wp--preset--font-size--medium, 1rem);
        border-radius: 4px;
        background: transparent;

        &:hover,
        &:focus {
          color: var(--wp--preset--color--accent) !important;
          background: transparent;
        }
      }

      .current-menu-item a {
        color: var(--wp--preset--color--accent) !important;
        background: transparent;
        font-weight: 700;
      }

      /* Desktop fly-out sub-menu */
      .menu-item-has-children {
        position: relative;
      }

      .sub-menu {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 0;
        margin-block-start: 4px;
        min-inline-size: 14rem;
        background: var(--wp--preset--color--base);
        box-shadow: var(--wp--preset--shadow--md);
        z-index: var(--wp--custom--z-index--dropdown, 300);

        a {
          color: var(--wp--preset--color--contrast) !important;
          padding-block: 0.75em;
          padding-inline: 1em;
          border-radius: 0;

          &:hover,
          &:focus {
            background: var(--wp--preset--color--subtle);
            color: var(--wp--preset--color--contrast) !important;
          }
        }
      }

      .sub-menu-toggle {
        position: static;
        inline-size: auto;
        block-size: auto;
        padding: 0 0.25em;
        border: 0;
        color: var(--wp--preset--color--base);
      }
    }
  }
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menuSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}