/* ==========================================================================
   Header & Navigation
   Extracted from style.css — site header, branding, hamburger, primary nav.
   ========================================================================== */

@layer header {
  .wp-block-template-part:has(.site-header) {
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    z-index: var(--wp--custom--z-index--sticky, 200);
  }

  .site-header {
    background: transparent;
  }

  /* ----- Inner wrapper ----- */

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--40, 1rem);
    max-inline-size: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
    padding-block: var(--wp--preset--spacing--30, 0.75rem);
    padding-inline: var(--wp--preset--spacing--40, 1rem);
  }

  /* ----- Branding (logo / site title) ----- */

  .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;
      max-width: 60px !important;
      min-height: 60px !important;
    }

    .site-title {
      margin: 0;
      font-size: var(--wp--preset--font-size--medium, 1.125rem);
      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;
  }

  /* ----- Mobile menu toggle (hamburger button) ----- */

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

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
      border-radius: var(--wp--preset--border--radius--small, 0.25rem);
    }

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

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

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

    &::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)
        var(--wp--custom--easing--standard);
    }

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

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

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

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

  /* Hamburger → X when open */
  [aria-expanded="true"] .hamburger {
    transform: rotate(45deg);

    &::before {
      opacity: 0;
    }

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

  /* ----- Primary navigation (mobile dropdown + desktop inline) ----- */

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

    /* ----- State-driven visibility ----- */

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

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

    &[data-state="closing"] {
      animation: clipPathCircleClose 750ms ease-in-out forwards;
    }

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

    /* ----- Menu items (mobile) ----- */

    li {
      border-block-end: 1px solid
        var(--color-base-alpha-10, rgb(255 255 255 / 0.1));

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

    a {
      color: var(--wp--preset--color--base, #fff);
      display: block;
      padding-block: 1.25em;
      padding-inline: 1.5em 3em;
      text-transform: uppercase;
      text-decoration: none !important;
      font-size: var(--wp--preset--font-size--small, 0.875rem);
      letter-spacing: var(--wp--custom--letter-spacing--wide, 0.05em);
      transition:
        background var(--wp--custom--timing--fast)
          var(--wp--custom--easing--standard),
        color var(--wp--custom--timing--fast)
          var(--wp--custom--easing--standard);

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

      &:hover,
      &:focus {
        background: var(--wp--preset--color--accent, #ea580c);
        color: var(--wp--preset--color--base, #fff);
      }

      &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: calc(-1 * var(--focus-ring-offset));
      }
    }

    .current-menu-item a {
      font-weight: 700;
      background: var(--color-base-alpha-10, rgb(255 255 255 / 0.1));
    }

    /* ----- Parent item: position context for toggle button (mobile) ----- */

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

    /* ----- Sub-menu toggle button (mobile: absolute in the 3em right-padding) ----- */

    .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
        var(--color-base-alpha-10, rgb(255 255 255 / 0.1));
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--wp--preset--color--base, #fff);

      svg {
        fill: currentColor;
        transition: transform var(--wp--custom--timing--fast)
          var(--wp--custom--easing--standard);

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

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

      &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: calc(-1 * var(--focus-ring-offset));
      }
    }

    /* ----- Sub-menu (mobile: accordion) ----- */

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

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

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

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

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

    @media (min-width: 48rem) {
      position: static;
      display: flex !important;
      background: transparent;
      gap: var(--wp--preset--spacing--20, 0.5rem);
      min-inline-size: auto;
      clip-path: none !important;
      animation: none !important;

      li {
        border-block-end: none;
      }

      a {
        color: var(--wp--preset--color--base, #fff);
        padding-block: 0.375em;
        padding-inline: 0.75em;
        text-transform: none;
        font-size: var(--wp--preset--font-size--medium, 1rem);
        letter-spacing: normal;
        border-radius: var(--wp--preset--border--radius--small, 0.25rem);

        &:hover,
        &:focus {
          color: var(--wp--preset--color--base, #fff);
          background: var(--color-base-alpha-10, rgb(255 255 255 / 0.1));
        }
      }

      .current-menu-item a {
        color: var(--wp--preset--color--primary, #1e40af);
        background: transparent;
        font-weight: 700;
      }

      /* ----- Desktop: parent item layout (link + chevron side-by-side) ----- */

      .menu-item-has-children {
        position: relative;
        display: flex;
        align-items: stretch;

        > a {
          padding-inline-end: 0.25em;
          border-radius: var(--wp--preset--border--radius--small, 0.25rem) 0 0
            var(--wp--preset--border--radius--small, 0.25rem);
          flex: 1;
        }

        &:hover,
        &:focus-within {
          background: var(--color-primary-alpha-10, rgb(30 64 175 / 0.1));
          border-radius: var(--wp--preset--border--radius--small, 0.25rem);
        }

        &:hover > a,
        &:hover > .sub-menu-toggle,
        &:focus-within > a,
        &:focus-within > .sub-menu-toggle {
          background: transparent;
          color: var(--wp--preset--color--primary, #1e40af);
        }
      }

      /* ----- Desktop: sub-menu toggle (inline chevron) ----- */

      .sub-menu-toggle {
        position: static;
        block-size: auto;
        inline-size: auto;
        border-inline-start: 0;
        background: transparent;
        border: 0;
        padding-block: 0.375em;
        padding-inline: 0.125em 0.625em;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        cursor: pointer;
        border-radius: 0 var(--wp--preset--border--radius--small, 0.25rem)
          var(--wp--preset--border--radius--small, 0.25rem) 0;

        &:focus-visible {
          outline: var(--focus-ring, 2px solid #1e40af);
          outline-offset: calc(-1 * var(--focus-ring-offset, 2px));
          border-radius: 0 var(--wp--preset--border--radius--small, 0.25rem)
            var(--wp--preset--border--radius--small, 0.25rem) 0;
        }
      }

      /* ----- Desktop: sub-menu fly-out panel ----- */

      .sub-menu {
        display: block;
        position: absolute;
        inset-block-start: calc(100% + 0.25rem);
        inset-inline-start: 0;
        background: var(--color-surface, var(--wp--preset--color--base, #fff));
        border: 1px solid var(--color-border, rgb(0 0 0 / 0.1));
        border-radius: var(--wp--preset--border--radius--small, 0.25rem);
        box-shadow: var(
          --wp--preset--shadow--md,
          0 4px 6px -1px rgb(0 0 0 / 0.1)
        );
        min-inline-size: 13rem;
        z-index: var(--wp--custom--z-index--dropdown, 300);
        padding-block: var(--wp--preset--spacing--10, 0.25rem);
        margin: 0;

        /* Hidden by default */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.375rem);
        pointer-events: none;
        transition:
          opacity var(--wp--custom--timing--fast)
            var(--wp--custom--easing--standard),
          transform var(--wp--custom--timing--fast)
            var(--wp--custom--easing--standard),
          visibility 0s var(--wp--custom--timing--fast);

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

        a {
          color: var(--wp--preset--color--contrast, #0f172a);
          padding-block: 0.5em;
          padding-inline: 1em;
          font-size: var(--wp--preset--font-size--small, 0.875rem);
          opacity: 1;
          border-radius: 0;
          text-transform: none;
          letter-spacing: normal;
          white-space: nowrap;

          &:hover,
          &:focus {
            color: var(--wp--preset--color--primary, #1e40af);
            background: var(--color-primary-alpha-10, rgb(30 64 175 / 0.1));
          }
        }

        li {
          border-block-end: 1px solid var(--color-border, rgb(0 0 0 / 0.1));

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

        .current-menu-item a {
          color: var(--wp--preset--color--primary, #1e40af);
          font-weight: 700;
          background: transparent;
        }
      }

      /* Show sub-menu: hover (CSS) or keyboard-opened (JS data-state) */
      .menu-item-has-children:hover > .sub-menu,
      .sub-menu[data-state="open"] {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition:
          opacity var(--wp--custom--timing--fast)
            var(--wp--custom--easing--standard),
          transform var(--wp--custom--timing--fast)
            var(--wp--custom--easing--standard);

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

/* HEADER PAINIKE */

.tilaa-ruoka {
	background-color: var(--wp--preset--color--primary);
  	color: var(--wp--preset--color--base);
  	text-decoration: none;
	border: 2px solid currentColor;
	border-radius: 6px;
	
	&:hover {
		background-color: transparent;
		color: var(--wp--preset--color--primary);
	}
}
.tilaa-ruoka a {
	color: var(--wp--preset--color--base);
	text-decoration:none;
	
	&:hover {
		color: var(--wp--preset--color--primary);
	}
}