@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --cta-glow: 0 0 0 0 rgba(0, 0, 0, 0);
  }

  body {
    font-family:
      "IBM Plex Sans",
      "Avenir Next",
      "Segoe UI",
      sans-serif;
    background:
      radial-gradient(circle at top left, rgba(241, 196, 110, 0.24), transparent 28%),
      radial-gradient(circle at top right, rgba(157, 217, 210, 0.16), transparent 34%),
      linear-gradient(180deg, #fbfaf6 0%, #f5efe3 55%, #f7f3ea 100%);
    @apply text-stone-900;
  }

  h1,
  h2,
  h3 {
    font-family:
      "Cormorant Garamond",
      "IBM Plex Sans",
      serif;
  }
}

@layer components {
  .site-container {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-5 lg:px-8;
  }

  .site-header {
    @apply sticky top-0 z-40 backdrop-blur;
  }

  .utility-bar {
    background: linear-gradient(90deg, rgba(20, 33, 61, 0.98), rgba(37, 58, 89, 0.94));
    @apply border-b border-white/10 text-stone-100;
  }

  .header-locale {
    @apply flex w-full flex-wrap items-center justify-start gap-2 text-sm text-stone-100 sm:w-auto sm:justify-end;
  }

  .locale-picker {
    @apply relative w-full sm:w-auto;
  }

  .locale-picker__summary {
    @apply flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-full border border-white/0 px-3 py-1.5 text-stone-100 transition hover:border-white/20 hover:bg-white/10 hover:text-white sm:w-auto sm:justify-start;
  }

  .locale-picker[open] .locale-picker__summary {
    @apply border-white/20 bg-white/10 text-white;
  }

  .locale-picker__summary::-webkit-details-marker {
    display: none;
  }

  .locale-picker__value {
    @apply font-medium;
  }

  .locale-picker__code,
  .locale-picker__item-meta,
  .locale-picker__chevron {
    @apply text-[0.74rem] uppercase tracking-[0.16em] text-stone-300/80;
  }

  .locale-picker__panel {
    @apply left-0 right-0 z-50 mt-3 min-w-[13rem] rounded-3xl border border-white/70 bg-white/95 p-3 text-stone-900 shadow-[0_22px_48px_rgba(20,33,61,0.18)] backdrop-blur sm:absolute sm:left-auto sm:right-0;
  }

  .locale-picker__title {
    @apply mb-2 px-2 text-[0.68rem] font-semibold uppercase tracking-[0.2em] text-stone-400;
  }

  .locale-picker__item {
    @apply flex w-full items-center justify-between rounded-2xl px-3 py-2 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-stone-900;
  }

  .locale-picker__item--active {
    @apply bg-stone-100 font-medium text-stone-900;
  }

  .main-nav {
    background: rgba(255, 251, 245, 0.82);
    @apply border-b border-white/60 shadow-[0_10px_30px_rgba(20,33,61,0.08)];
  }

  .header-bar {
    @apply flex flex-wrap items-center gap-4 py-4 sm:gap-5 sm:py-5 lg:flex-nowrap;
  }

  .brand-mark {
    @apply inline-flex items-end gap-0.5 text-4xl font-black leading-none tracking-tight text-black transition-transform duration-300 hover:-translate-y-0.5 sm:text-5xl;
  }

  .brand-mark__accent {
    @apply text-amber-500;
  }

  .menu-toggle {
    @apply inline-flex h-11 items-center justify-center rounded-full border border-stone-300/70 bg-white/80 px-5 text-xs font-semibold uppercase tracking-[0.28em] text-stone-900 transition hover:border-amber-500 hover:text-amber-600;
  }

  .menu-panel {
    @apply order-last w-full rounded-3xl border border-white/70 bg-white/95 p-4 shadow-[0_16px_34px_rgba(20,33,61,0.12)] backdrop-blur lg:order-none lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none;
  }

  .desktop-nav {
    @apply flex items-center justify-center gap-8 xl:gap-12;
  }

  .desktop-nav__link {
    @apply inline-flex items-center py-4 text-[1.04rem] font-medium text-stone-800 transition hover:text-amber-600;
  }

  .desktop-nav__toggle {
    @apply inline-flex h-8 w-5 items-center justify-center text-sm text-stone-400 transition hover:text-amber-600;
  }

  .desktop-nav__entry--open .desktop-nav__link,
  .desktop-nav__entry--open .desktop-nav__toggle {
    @apply text-amber-600;
  }

  .mega-menu {
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(252, 248, 240, 0.98));
    @apply absolute inset-x-0 top-full z-50 border-t border-white/70 shadow-[0_28px_60px_rgba(20,33,61,0.16)] backdrop-blur;
  }

  .mega-menu__grid {
    @apply site-container grid grid-cols-2 gap-x-12 gap-y-10 py-10 lg:grid-cols-4 xl:grid-cols-5;
  }

  .mega-menu__heading {
    @apply mb-4 inline-flex text-sm font-semibold uppercase tracking-[0.12em] text-stone-900 transition hover:text-amber-600;
  }

  .mega-menu__link {
    @apply inline-flex text-[1.02rem] leading-7 text-stone-700 transition hover:translate-x-1 hover:text-amber-600;
  }

  .mega-menu__all {
    @apply col-span-full flex items-start justify-end border-t border-stone-200 pt-5;
  }

  .mega-menu__all-link {
    @apply inline-flex text-sm font-semibold uppercase tracking-[0.18em] text-amber-600 transition hover:text-amber-700;
  }

  .header-actions {
    @apply ml-0 flex items-center gap-4 text-2xl text-stone-900 lg:ml-auto;
  }

  .nav-icon {
    @apply flex h-11 w-11 items-center justify-center rounded-full bg-white/70 text-[1.35rem] shadow-[0_10px_24px_rgba(20,33,61,0.08)] transition hover:-translate-y-0.5 hover:text-amber-600;
  }

  @media (max-width: 1023px) {
    .desktop-nav,
    .mega-menu {
      display: none;
    }
  }

  button[type='submit'] {
    box-shadow: var(--cta-glow);
  }
}