/* 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;
  }
}

/* ---------------------------------------------------------------------------
   Hide every link into the SME app (app.gifftid.ai).

   We are not authorised to approach SMEs directly — access comes via R3 — so
   the "Sign in" button upstream renders in both the desktop and the mobile nav
   must not be reachable. The href is hardcoded in Grace's bundle, so this
   matches on the destination rather than on a class name that changes with
   every build. enhancements.js then defuses the anchor in place and stamps it
   [data-gf-sme] — which is why the second selector is here: once the href is
   stripped, the first one no longer matches. The CSS is what stops the button
   appearing at all before the JS runs.

   Removing "Sign in" also gives the nav back the width it was short of, which
   is what made it wrap to two lines between 1024px and ~1280px.
--------------------------------------------------------------------------- */
a[href^="https://app.gifftid.ai"],
a[data-gf-sme] {
  display: none !important;
}