/* Theme layer - colors, backgrounds, shadows only */
@layer theme {
  nav {
    background: light-dark(oklch(100% 0.003 250 / 0.9), oklch(12% 0.015 260 / 0.85));
    backdrop-filter: blur(20px);
    border-block-end: none;
    box-shadow:
      0 1px 0 oklch(from var(--glass-tint) l c h / 0.04),
      0 4px 24px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.3));

    /* Gradient accent line at bottom */
    &::after {
      background: linear-gradient(
        90deg,
        transparent 5%,
        light-dark(
            oklch(from var(--accent-primary) l c h / 0.4),
            oklch(from var(--accent-primary) l c h / 0.6)
          )
          30%,
        light-dark(
            oklch(from var(--accent-warm) l c h / 0.4),
            oklch(from var(--accent-warm) l c h / 0.6)
          )
          70%,
        transparent 95%
      );
    }

    .nav-links a {
      color: var(--text-secondary);

      &:hover {
        color: var(--text-primary);
      }

      &::after {
        background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
        box-shadow: 0 0 8px oklch(from var(--accent-primary) l c h / 0.4);
        transition-property: transform;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }
    }

    .nav-actions a,
    .nav-actions button {
      border-color: oklch(from var(--glass-tint) l c h / 0.08);
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
      color: var(--text-primary);

      &:hover {
        border-color: light-dark(
          oklch(from var(--accent-primary) l c h / 0.3),
          oklch(from var(--accent-primary) l c h / 0.4)
        );
        background: light-dark(
          oklch(from var(--accent-primary) l c h / 0.06),
          oklch(from var(--accent-primary) l c h / 0.1)
        );
        color: var(--accent-primary);
        box-shadow: 0 0 14px
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.08),
            oklch(from var(--accent-primary) l c h / 0.15)
          );
      }
    }

    .profile-button .profile-avatar {
      background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
      color: white;
      box-shadow: 0 2px 10px
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.3)
        );
    }

    #profile-menu {
      background: light-dark(oklch(100% 0 0 / 0.95), oklch(15% 0.02 270 / 0.95));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
      backdrop-filter: blur(20px);
      box-shadow: 0 12px 40px light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.5));

      .profile-menu-header {
        border-block-end-color: oklch(from var(--glass-tint) l c h / 0.06);
      }

      .profile-menu-name {
        color: light-dark(oklch(15% 0 0), oklch(95% 0 0));
      }

      .profile-menu-email {
        color: light-dark(oklch(45% 0 0), oklch(65% 0 0));
      }

      .profile-menu-item {
        color: light-dark(oklch(35% 0 0), oklch(75% 0 0));

        &:hover {
          background: light-dark(
            oklch(from var(--accent-primary) l c h / 0.06),
            oklch(from var(--accent-primary) l c h / 0.1)
          );
          color: light-dark(oklch(15% 0 0), oklch(95% 0 0));
        }

        &:focus-visible {
          outline-color: var(--accent-primary);
        }
      }

      .profile-menu-reset {
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
        text-align: start;
        inline-size: 100%;

        &:hover {
          background: light-dark(
            oklch(from var(--accent-warm) l c h / 0.06),
            oklch(from var(--accent-warm) l c h / 0.1)
          );
          color: light-dark(oklch(55% 0.2 25), var(--accent-warm));
        }
      }

      .profile-menu-logout:hover {
        background: light-dark(
          oklch(from var(--accent-warm) l c h / 0.06),
          oklch(from var(--accent-warm) l c h / 0.1)
        );
        color: light-dark(oklch(55% 0.2 25), var(--accent-warm));
      }
    }
  }

  nav {
    .hamburger {
      border-color: oklch(100% 0 0 / 0.08);
      color: var(--text-primary);

      &:hover {
        border-color: oklch(from var(--accent-primary) l c h / 0.4);
        background: oklch(from var(--accent-primary) l c h / 0.1);
      }

      span {
        background-color: var(--text-primary);
      }
    }

    #nav-menu {
      background: var(--surface-elevated);
      border-color: var(--border-color);
      box-shadow: var(--shadow-lg);

      .close-button {
        color: var(--text-primary);
      }

      a {
        color: var(--text-secondary);

        &:hover {
          background: var(--surface-base);
          color: var(--text-primary);
        }
      }
    }

    .mobile-profile-info {
      .mobile-profile-email {
        color: var(--text-secondary);
      }
    }

    .cta-button.mobile-reset {
      display: flex;
      inline-size: fit-content;
      margin-inline: auto;
      margin-block-end: var(--space-xs);
      background: light-dark(
        oklch(from var(--accent-warm) l c h / 0.1),
        oklch(from var(--accent-warm) l c h / 0.15)
      );
      color: light-dark(oklch(55% 0.2 25), var(--accent-warm));
      border: none;
      cursor: pointer;
      font: inherit;
    }

    .cta-button.mobile-logout {
      display: flex;
      inline-size: fit-content;
      margin-inline: auto;
    }
  }
}

/* Components layer - layout, sizing, spacing only */
@layer components {
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-xl);
    position: sticky;
    inset-block-start: 0;
    z-index: 100;

    /* Gradient accent line at bottom */
    &::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 1px;
    }

    .nav-links {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      gap: var(--space-2xl);

      a {
        position: relative;
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--wire-radius);
        font-size: var(--fs-small);
        letter-spacing: 0.02em;
        transition: all 0.2s ease-out;

        &::after {
          content: '';
          position: absolute;
          inset-block-end: -2px;
          inset-inline-start: 0;
          inline-size: 100%;
          block-size: 2px;
          border-radius: 2px;
          transform: scaleX(0);
          transform-origin: left;
        }

        &:hover::after {
          transform: scaleX(1);
        }
      }
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-md);

      a,
      button {
        padding: var(--space-xs) var(--space-md);
        border: 1px solid;
        border-radius: 100px;
        font-weight: var(--fw-medium);
        font-size: var(--fs-small);
        transition: all 0.25s ease-out;
      }
    }

    .profile-button {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      cursor: pointer;
      anchor-name: --profile-btn;

      .profile-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: var(--space-2xl);
        block-size: var(--space-2xl);
        border-radius: 50%;
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
      }

      .profile-name {
        max-inline-size: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--fs-small);
      }

      .profile-chevron {
        transition: transform var(--time-fast) var(--ease-standard);
      }

      &:has(+ #profile-menu:popover-open) .profile-chevron {
        transform: rotate(180deg);
      }
    }

    #profile-menu {
      position-anchor: --profile-btn;
      position: fixed;
      inset: unset;
      inset-block-start: anchor(bottom);
      inset-inline-end: anchor(right);
      margin-block-start: var(--space-sm);
      padding: var(--space-md);
      border-radius: 12px;
      min-inline-size: 220px;

      /* Animation */
      opacity: 0;
      scale: 0.95;
      transform-origin: top right;
      transition:
        opacity var(--time-fast) var(--ease-out),
        scale var(--time-fast) var(--ease-out),
        display var(--time-fast) allow-discrete;

      &:popover-open {
        opacity: 1;
        scale: 1;

        @starting-style {
          opacity: 0;
          scale: 0.95;
        }
      }

      .profile-menu-header {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
        padding: var(--space-sm) var(--space-sm) var(--space-md);
        border-block-end: 1px solid;
      }

      .profile-menu-name {
        font-weight: var(--fw-semibold);
      }

      .profile-menu-email {
        font-size: var(--fs-small);
      }

      .profile-menu-item {
        display: block;
        padding: var(--space-sm) var(--space-md);
        margin-block-start: var(--space-xs);
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.2s ease-out;

        &:focus-visible {
          outline: 2px solid;
          outline-offset: -2px;
        }
      }
    }

    .mobile-profile-info {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      text-align: center;
      margin-block-end: var(--space-md);

      .mobile-profile-name {
        font-weight: var(--fw-semibold);
      }

      .mobile-profile-email {
        font-size: var(--fs-small);
      }
    }

    .logo img {
      object-fit: contain;
    }

    html[data-theme='light'] & .logo img {
      filter: invert(1);
    }

    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-xs);
      background: transparent;
      border: 1px solid;
      border-radius: 10px;
      cursor: pointer;
      anchor-name: --hamburger;
      inline-size: var(--space-3xl);
      block-size: var(--space-3xl);

      span {
        display: block;
        inline-size: var(--space-2xl);
        block-size: var(--space-2xs);
        transition:
          transform var(--time-fast) var(--ease-standard),
          opacity var(--time-fast) var(--ease-standard);
        transform-origin: center;
      }
    }

    /* Animate hamburger to X when popover is open */
    &:has(#nav-menu:popover-open) .hamburger {
      span:nth-child(1) {
        transform: translateY(calc(var(--space-xs) + var(--space-2xs))) rotate(45deg);
      }
      span:nth-child(2) {
        opacity: 0;
      }
      span:nth-child(3) {
        transform: translateY(calc(-1 * (var(--space-xs) + var(--space-2xs)))) rotate(-45deg);
      }
    }

    #nav-menu {
      position-anchor: --hamburger;
      position: fixed;
      inset: unset;
      inset-block-start: 0;
      inset-inline-end: 0;
      margin: 0;
      padding: var(--wire-gap);
      border: var(--wire-border);
      border-radius: 0;
      block-size: 100cqb;
      inline-size: 70cqi;

      /* Slide animation */
      translate: 100% 0;
      opacity: 0;
      transition:
        translate var(--time-medium) var(--ease-out),
        opacity var(--time-medium) var(--ease-out),
        display var(--time-medium) allow-discrete;

      .close-button {
        position: absolute;
        inset-block-start: var(--space-2xl);
        inset-inline-end: var(--wire-gap);
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border: var(--wire-border);
        border-radius: var(--wire-radius);
        cursor: pointer;
        inline-size: var(--space-3xl);
        block-size: var(--space-3xl);
        font-size: var(--fs-large);
        line-height: 1;
      }

      .popover-nav-links {
        display: flex;
        flex-direction: column;
        gap: var(--wire-gap);
        align-items: center;
        padding-block-start: calc(var(--space-3xl) + var(--space-2xl));

        .theme-toggle-btn {
          margin-block: var(--space-md);
        }

        a {
          padding: var(--space-md) var(--space-lg);
          border-radius: var(--wire-radius);
        }
      }

      &:popover-open {
        display: flex;
        flex-direction: column;
        translate: 0 0;
        opacity: 1;

        @starting-style {
          translate: 100% 0;
          opacity: 0;
        }
      }
    }

    /* Wide container: show nav links, hide hamburger */
    @container root (inline-size > 600px) {
      .nav-links,
      .nav-actions {
        display: flex;
      }

      .hamburger,
      #nav-menu {
        display: none;
      }
    }

    /* Narrow container: hide nav links, show hamburger */
    @container root (inline-size <= 600px) {
      .nav-links,
      .nav-actions {
        display: none;
      }

      .hamburger {
        display: flex;
      }
    }
  }
}