/* Gifftid.ai — local enhancement layer
 * Sits on top of the Base 44 bundle. Goal: tasteful polish, no fights
 * with framer-motion already in the SPA. Honours prefers-reduced-motion.
 */

:root {
  --gf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gf-dur: 320ms;
  --gf-dur-fast: 180ms;
  --gf-dur-slow: 600ms;
  /* Brand palette (2026 rebrand): cream ground, near-black ink, gold accent,
     pale-blue hover wash — mirrors the constants in the upstream bundle. */
  --gf-cream: #fffbf4;
  --gf-ink: #161313;
  --gf-ink-solid: #1e1a19;
  --gf-gold: #b49c04;
  --gf-wash: #ccf5ff;
  --gf-hair: rgba(22, 19, 19, 0.12);
  --gf-accent: rgba(180, 156, 4, 0.5);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: rgba(180, 156, 4, 0.22);
  color: inherit;
}

a,
button,
[role="button"],
input,
select,
textarea,
summary {
  transition:
    color var(--gf-dur) var(--gf-ease),
    background-color var(--gf-dur) var(--gf-ease),
    border-color var(--gf-dur) var(--gf-ease),
    box-shadow var(--gf-dur) var(--gf-ease),
    transform var(--gf-dur-fast) var(--gf-ease-out),
    opacity var(--gf-dur) var(--gf-ease);
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gf-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* CTA-style buttons get a subtle lift on hover.
 * Scoped via Tailwind bg- prefix so inline-text buttons (nav items) stay still. */
button[class*="bg-"]:not(:disabled):not([aria-disabled="true"]):hover,
a[class*="bg-"][class*="text-white"]:hover,
a[class*="rounded"][class*="bg-"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.22);
}

button[class*="bg-"]:not(:disabled):active,
a[class*="bg-"][class*="text-white"]:active,
a[class*="rounded"][class*="bg-"]:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

/* Card-ish containers (rounded + bordered) gain a quiet elevation on hover */
[class*="rounded-"][class*="border"]:not(nav):not(input):not(button):not(a[class*="bg-"]):hover {
  box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18);
}

img {
  transition:
    opacity var(--gf-dur-slow) var(--gf-ease),
    filter var(--gf-dur-slow) var(--gf-ease),
    transform var(--gf-dur-slow) var(--gf-ease);
}

img:not([data-gf-loaded]) {
  opacity: 0;
  filter: blur(6px);
  transform: scale(1.01);
}

img[data-gf-loaded] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Slight zoom for "feature" imagery sitting inside hover containers */
[class*="rounded-"][class*="overflow-hidden"]:hover img,
[class*="group"]:hover img[class*="group-hover"] {
  transform: scale(1.02);
}

/* Smooth dropdown / popover appearance — generic; nav dropdowns also benefit */
[role="menu"],
[role="listbox"],
[data-state="open"][class*="rounded"][class*="shadow"] {
  animation: gf-fade-rise 220ms var(--gf-ease) both;
}

@keyframes gf-fade-rise {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page swap polish — the React tree fades up gently on route change.
 * Restricted to opacity + small translate so it stacks cleanly with
 * framer-motion's whileInView entrances inside components. */
#root > * {
  animation: gf-route-in 480ms var(--gf-ease-out) backwards;
}

@keyframes gf-route-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo + small interactive icons */
nav img,
header img {
  transition: transform var(--gf-dur) var(--gf-ease), opacity var(--gf-dur) var(--gf-ease);
}

nav a:hover img,
header a:hover img {
  transform: scale(1.04);
}

/* Smooth scrollbar (WebKit only — harmless elsewhere) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 6px;
  transition: background-color var(--gf-dur) var(--gf-ease);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.32);
}

/* ---- "Apps" dropdown — local nav addition. The trigger pill uses .gf-launch;
   the menu links to the SME app + the Finance and Procurement app.
   Styled to read as one of upstream's secondary nav pills (outlined, ink text,
   pale-blue hover wash) so it sits natively beside Self Serve / Enterprise and
   doesn't compete with the solid "Start free" primary CTA. ---- */
.gf-launch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 13px;
  border-radius: 9999px;
  background: transparent;
  color: var(--gf-ink) !important;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--gf-hair);
  cursor: pointer;
}

.gf-launch:hover {
  background: var(--gf-wash);
  border-color: var(--gf-wash);
  color: var(--gf-ink) !important;
}

.gf-apps--open > .gf-launch {
  background: var(--gf-wash);
  border-color: var(--gf-wash);
}

.gf-launch:active {
  transition-duration: 80ms;
}

/* --- "Apps" dropdown (trigger reuses the .gf-launch pill) --- */
.gf-apps {
  position: relative;
  display: inline-flex;
}

.gf-apps__btn {
  gap: 5px;
  padding-right: 13px;
}

.gf-apps__chev {
  transition: transform var(--gf-dur-fast) var(--gf-ease-out);
}

.gf-apps--open .gf-apps__chev {
  transform: rotate(180deg);
}

.gf-apps__menu {
  position: absolute;
  top: 100%;
  right: 0;
  /* transparent bridge so the panel reads as attached to the trigger */
  padding-top: 8px;
  display: none;
  z-index: 60;
}

.gf-apps--open .gf-apps__menu {
  display: block;
}

.gf-apps__panel {
  min-width: 230px;
  background: var(--gf-cream);
  border-radius: 14px;
  border: 1px solid var(--gf-hair);
  box-shadow: 0 14px 32px -12px rgba(22, 19, 19, 0.28);
  padding: 6px;
  animation: gf-fade-rise 180ms var(--gf-ease) both;
}

.gf-apps__item {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--gf-ink) !important;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.gf-apps__item + .gf-apps__item {
  margin-top: 2px;
}

.gf-apps__item:hover {
  background: var(--gf-wash);
  color: var(--gf-ink) !important;
}

/* Mobile dropdown shows only below lg (desktop instance lives in the cluster).
   The bar is `justify-between` and the two link clusters are display:none below
   lg, so without this the pill would strand itself mid-bar; the auto margin
   parks it next to the hamburger instead. */
.gf-apps--m {
  margin-left: auto;
}

@media (min-width: 1024px) {
  .gf-apps--m {
    display: none;
  }
}

/* Drop the circular badge from the wordmark lockup everywhere it appears —
   nav and footer — leaving just "GIFFTID". Client preference; in the nav it
   also buys back ~36px of a row that had none to spare.

   Keyed on the mark's own 64x64 viewBox as a direct child of the lockup span,
   so it can't catch the icon set (lucide ships 24x24). !important is
   load-bearing: the bundle sets style="display:block" inline on that SVG,
   which beats a plain stylesheet rule. No gap override is needed — a flex
   gap draws nothing once one of the two children is display:none. */
span[class*="inline-flex"][class*="items-center"] > svg[viewBox="0 0 64 64"] {
  display: none !important;
}

/* ---- Top-nav geometry ----------------------------------------------------
   The 2026 nav is three groups inside a `justify-between` bar: logo, the link
   cluster (gap-7), then the CTA cluster (gap-2.5). Upstream sizes that row at
   ~1078px inside a 1076px box (max-w-content 1140 minus px-8) — i.e. exactly
   full, with no slack, which is why gifftid.ai's own nav wraps to two lines
   below ~1140px. Adding the Apps pill needs ~80px we don't have.

   Fix: let the nav bar alone run wider than the 1140px content column (the
   page body is untouched), and tighten the gaps below that. At >=1280px the
   full row including Apps sits on one line; between lg and 1280px it wraps
   less than upstream does, though it still wraps — see README. */
nav[class*="fixed top-0"] > div {
  max-width: 1280px !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  nav[class*="fixed top-0"] > div {
    gap: 0.5rem !important;
  }

  nav[class*="fixed top-0"] > div > div[class*="lg:flex"]:first-of-type {
    gap: 1rem !important;
  }

  nav[class*="fixed top-0"] > div > div[class*="lg:flex"]:last-of-type {
    gap: 0.375rem !important;
  }
}

/* Respect reduced-motion: kill everything we added. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}