/* ================================================================
   KAPALA BRAND CSS
   Override layer — link after style.css on every page.

   Strategy: Committed emerald. Nunito Sans at 900. Bold.
   Approach: Token overrides + direct utility remap + component reskin.
   ================================================================ */


/* 1 — TOKENS --------------------------------------------------- */
/* Scoped to .theme-light so webapp dark theme is untouched */
.theme-light {
  --brand-p:      oklch(44% 0.13 155);    /* primary emerald ~#047857     */
  --brand-p-dk:   oklch(29% 0.09 155);    /* deep emerald   ~#065f46      */
  --brand-p-lt:   oklch(58% 0.115 155);   /* medium         ~#059669      */
  --brand-p-bg:   oklch(96.5% 0.022 155); /* emerald-tinted near-white    */
  --brand-surf:   oklch(98.5% 0.006 155); /* page background              */
  --brand-ink:    oklch(16% 0.014 155);   /* near-black heading text      */
  --brand-dim:    oklch(44% 0.016 155);   /* muted / body text            */
  --brand-rule:   oklch(90% 0.018 155);   /* borders and rules            */

  /* Reroute existing theme-light accent variables */
  --color-accent:       oklch(44% 0.13 155);
  --color-accent-light: oklch(58% 0.115 155);

  background-color: var(--brand-surf);
}


/* 2 — BLUE PALETTE REMAP --------------------------------------- */
/* Tailwind v4 inlines color values; override each utility directly.
   Covers: text-blue-*, bg-blue-*, border-blue-*, from-blue-*       */

.text-blue-500   { color: var(--brand-p) !important; }
.bg-blue-500     { background-color: var(--brand-p) !important; }
.bg-blue-600     { background-color: var(--brand-p-dk) !important; }
.bg-blue-50      { background-color: var(--brand-p-bg) !important; }
.border-blue-500 { border-color: var(--brand-p) !important; }
.ring-blue-500   { --tw-ring-color: oklch(44% 0.13 155 / 0.5) !important; }
.from-blue-50 {
  --tw-gradient-from: var(--brand-p-bg) var(--tw-gradient-from-position) !important;
}
.focus\:border-blue-500:focus {
  border-color: var(--brand-p) !important;
}


/* 3 — FONT ----------------------------------------------------- */
html, body {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif !important;
}


/* 4 — LINK HOVER ----------------------------------------------- */
.theme-light a:not(.button):not([href="/signup.html"]):hover,
.font-medium:not(ul.text-lg.font-medium):hover {
  color: var(--brand-p) !important;
}


/* 5 — TYPE SCALE ----------------------------------------------- */

/* Primary display heading: bigger, heavier, tighter */
.text-title {
  font-size: clamp(2.6rem, 4.5vw + 0.75rem, 5.5rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
  font-weight: 900 !important;
  border: none !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Stat numbers (100%, 24/7, etc.) */
.text-5xl.font-bold {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

/* "Years Preserved" counter */
#years-counter {
  font-size: clamp(4.5rem, 10vw, 8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
}

/* Stat label line — scoped to the exact class combo used in stats */
.text-3xl.text-gray-600.font-bold {
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--brand-dim) !important;
}


/* 6 — LOADER --------------------------------------------------- */
.loader-wrapper { background-color: var(--brand-surf); }
.path           { stroke: var(--brand-p); }
.letter-k       { color: var(--brand-ink); }


/* 7 — HEADER --------------------------------------------------- */
/* theme-light already sets white bg + border.
   Fix scrolled state: dark bg reverts to brand-surf.              */
.theme-light header.header.scrolled {
  background-color: var(--brand-surf) !important;
  border-bottom-color: var(--brand-rule) !important;
}

/* Nav links: muted ink by default, emerald on hover */
.theme-light header a:not(.button):not([href="/signup.html"]) {
  color: var(--brand-dim) !important;
  font-weight: 700;
}
.theme-light header a:not(.button):not([href="/signup.html"]):hover {
  color: var(--brand-p) !important;
}

/* Logo fill is set in section 26 */


/* 8 — SIGN UP BUTTON ------------------------------------------- */
/* Overrides hardcoded inline style="background:#3b82f6;..."        */
header a[href="/signup.html"],
.header-mobile-nav-menu a[href="/signup.html"] {
  background-color: var(--brand-p) !important;
  color: oklch(97% 0.01 155) !important;
  border-color: var(--brand-p-dk) !important;
  font-weight: 800 !important;
}
header a[href="/signup.html"]:hover,
.header-mobile-nav-menu a[href="/signup.html"]:hover {
  background-color: var(--brand-p-dk) !important;
  color: oklch(97% 0.01 155) !important;
}


/* 9 — MOBILE NAV ----------------------------------------------- */
.theme-light .header-mobile-nav-menu {
  background-color: var(--brand-surf) !important;
}
/* Fix invisible-text bug: bg-blue-500 + text-blue-500 = invisible.
   Now bg is emerald; text must be white.                           */
.theme-light .header-mobile-nav-menu a:not([href="/signup.html"]) {
  color: oklch(97% 0.01 155) !important;
}
.theme-light .header-mobile-nav-menu a:not([href="/signup.html"]):hover {
  background-color: var(--brand-p-dk) !important;
}
/* Hamburger icon lines */
.header-mobile-nav-button-inner,
.header-mobile-nav-button-inner::before,
.header-mobile-nav-button-inner::after {
  background-color: var(--brand-ink) !important;
}


/* 10 — HERO SECTION -------------------------------------------- */
/* Full emerald hero: brand color as the surface, not just accent.  */
.hero-section {
  background-color: var(--brand-p) !important;
  padding-top: clamp(5rem, 10vw, 9rem) !important;
  padding-bottom: 4rem !important;
  position: relative;
  overflow: hidden;
}
/* Radial depth highlight — subtle, not gradient-on-text           */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 65% at 65% 30%,
    oklch(54% 0.115 148 / 0.4) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero-section > * {
  position: relative;
  z-index: 1;
}

/* Hero text on emerald */
.hero-section .text-title,
.hero-section .text-blue-500 {
  color: oklch(97% 0.01 155) !important;
}
.hero-section p,
.hero-section .text-black {
  color: oklch(87% 0.05 155) !important;
  opacity: 1 !important;
}

/* Hero CTA button: inverse (white on emerald) */
.hero-section .button-primary,
.hero-section .download-button {
  background-color: oklch(98% 0.008 155) !important;
  color: var(--brand-p-dk) !important;
  font-weight: 900 !important;
}
.hero-section .button-primary:hover,
.hero-section .download-button:hover {
  background-color: oklch(92% 0.038 155) !important;
  color: var(--brand-p-dk) !important;
  transform: translateY(-1px);
}


/* 11 — YEARS COUNTER CARD ------------------------------------- */
/* Lift the card box; let the giant number breathe               */
.theme-light .card:has(#years-counter) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-top: 3.5rem !important;
  padding-bottom: 0 !important;
}
.theme-light .card:has(#years-counter):hover {
  box-shadow: none !important;
}


/* 12 — STATS SECTION ------------------------------------------ */
.stats-section {
  border-top: 1px solid var(--brand-rule);
  border-bottom: 1px solid var(--brand-rule);
  background-color: var(--brand-surf) !important;
}


/* 13 — GRADIENT FEATURE SECTIONS ------------------------------ */
/* from-blue-50 is already remapped to emerald tint (section 2).
   Give sections more breathing room.                            */
.bg-gradient-to-b.from-blue-50 {
  padding-top: clamp(4rem, 6vw, 6rem) !important;
  padding-bottom: clamp(4rem, 6vw, 6rem) !important;
}
/* Remove the negative-margin overlap that would pull feature section
   up into the emerald hero. Two selectors for reliability:          */
.bg-gradient-to-b.from-blue-50.mt-\[-100px\],
.hero-section + .bg-gradient-to-b {
  margin-top: 0 !important;
}
/* Also reset any immediate sibling of hero that pulls up */
.hero-section + * {
  margin-top: 0 !important;
}


/* 14 — FEATURE CARD GRID -------------------------------------- */
/* Transform from identical floating cards to editorial grid cells */

/* Parent dl: tight grid, single border wraps all cells */
.theme-light .cards > dl {
  gap: 0 !important;
  border: 1px solid var(--brand-rule);
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--brand-surf);
}

/* Each cell (dl-based feature grid only): grid-line borders */
.theme-light .cards dl .card,
.theme-light .cards dl .card-shimmer {
  background-color: var(--brand-surf) !important;
  border: none !important;
  border-right: 1px solid var(--brand-rule) !important;
  border-bottom: 1px solid var(--brand-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.75rem !important;
  transition: background-color 0.15s ease-out;
}
.theme-light .cards dl .card:hover,
.theme-light .cards dl .card-shimmer:hover {
  background-color: var(--brand-p-bg) !important;
  box-shadow: none !important;
}

/* Icons inside feature grid cells (dl structure only) */
.theme-light .cards dl .fa-solid,
.theme-light .cards dl .fa-brands {
  color: var(--brand-p) !important;
  font-size: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  display: block;
}

/* Feature name */
.theme-light .cards dt {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--brand-ink) !important;
}

/* Feature description */
.theme-light .cards dd {
  color: var(--brand-dim) !important;
  margin-top: 0.375rem;
}


/* 15 — CTA BAND ---------------------------------------------- */
/* Full emerald section for the "Ready to modernize?" CTA         */
.cta-section {
  background-color: var(--brand-p) !important;
  color: oklch(97% 0.01 155);
  padding: clamp(5rem, 8vw, 8rem) 0 !important;
  margin-top: 0 !important;
  position: relative;
  overflow: hidden;
}
.cta-section .text-title {
  color: oklch(97% 0.01 155) !important;
}
/* Inverse button in CTA: white bg, emerald text */
.cta-section .button-primary {
  background-color: oklch(98% 0.008 155) !important;
  color: var(--brand-p-dk) !important;
  font-weight: 900 !important;
  font-size: 1.125rem !important;
}
.cta-section .button-primary:hover {
  background-color: oklch(92% 0.04 155) !important;
  color: var(--brand-p-dk) !important;
}


/* 16 — BUTTONS ------------------------------------------------- */
/* Reduce pill radius to match btn-primary style */
.button {
  border-radius: 0.5rem !important;
}
.theme-light .button-primary {
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  transition:
    background-color 0.18s cubic-bezier(0, 0, 0.2, 1),
    transform 0.14s cubic-bezier(0, 0, 0.2, 1);
}
/* Lift on hover outside of special contexts */
.theme-light .button-primary:not(.hero-section .button-primary):not(.cta-section .button-primary):hover {
  transform: translateY(-1px);
}
.theme-light .button-primary:active {
  transform: translateY(0) !important;
}


/* 17 — FOOTER -------------------------------------------------- */
/* Top rule on footer area */
.theme-light [class*="flex-row-reverse"].pt-24 {
  border-top: 1px solid var(--brand-rule);
}
.theme-light .text-gray-500 {
  color: var(--brand-dim) !important;
}


/* 18 — FORMS (partner/signup pages) ----------------------------- */
/* Light-theme inputs override (Tailwind v3-style inputs have dark bg) */
.theme-light select,
.theme-light input:not([type="radio"]):not([type="checkbox"]),
.theme-light textarea,
.theme-light .input {
  background-color: oklch(99% 0.005 155) !important;
  color: var(--brand-ink) !important;
  border: 1px solid var(--brand-rule) !important;
  --tw-ring-color: oklch(44% 0.13 155 / 0.25) !important;
}
.theme-light select:focus,
.theme-light input:not([type="radio"]):not([type="checkbox"]):focus,
.theme-light textarea:focus,
.theme-light .input:focus {
  border-color: var(--brand-p) !important;
  box-shadow: 0 0 0 3px oklch(44% 0.13 155 / 0.18) !important;
  outline: none;
}
.theme-light input::placeholder,
.theme-light textarea::placeholder {
  color: var(--brand-dim) !important;
  opacity: 0.6;
}
/* Partner signup form — override white input bg inline styles */
.theme-light input.w-full.px-4.py-2.rounded-lg,
.theme-light input.w-full.border {
  background-color: oklch(99% 0.005 155) !important;
  border-color: var(--brand-rule) !important;
  color: var(--brand-ink) !important;
}
.theme-light input.w-full.px-4.py-2.rounded-lg:focus,
.theme-light input.w-full.border:focus {
  border-color: var(--brand-p) !important;
  box-shadow: 0 0 0 3px oklch(44% 0.13 155 / 0.18) !important;
}


/* 19 — PARTNER REVENUE CALCULATOR ----------------------------- */
.theme-light .bg-green-100 {
  background-color: var(--brand-p-bg) !important;
}
.theme-light .text-green-800 {
  color: var(--brand-p) !important;
}


/* 20 — FAQ PAGE ----------------------------------------------- */
.theme-light .faq-answer {
  color: var(--brand-dim);
}
#faq > div {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
@media (min-width: 640px) {
  #faq > div {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .faq-question {
    font-size: 1.25rem !important;
  }
}


/* 21 — NEARBY / MAP PAGE -------------------------------------- */
/* Leaflet controls pick up emerald accent through .text-blue-* remap */
.theme-light .bg-blue-600 {
  background-color: var(--brand-p-dk) !important;
}


/* 22 — HOF PAGE ----------------------------------------------- */
.flair {
  background-color: var(--brand-p-dk) !important;
  color: oklch(75% 0.11 155) !important;
}

/* 23 — MISSING TAILWIND UTILITIES ----------------------------- */
/* md:flex-row-reverse is not in the compiled bundle; define here */
@media (min-width: 768px) {
  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }
}

/* 24 — AOS REVEAL ANIMATION ------------------------------------ */
/* Slightly faster ease-out for brand rhythm                      */
[data-aos] {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}


/* 24 — LINK / UNDERLINE COLORS --------------------------------- */
/* Underlined links and <u> tags: emerald decoration, not blue    */
.decoration-blue-500 {
  text-decoration-color: var(--brand-p) !important;
}
.theme-light u {
  text-decoration-color: var(--brand-p) !important;
  color: inherit;
}
/* Body-text links with explicit underline class */
.theme-light a.underline,
.theme-light a.text-blue-500.underline,
.theme-light p a,
.theme-light li a:not([class*="font-bold"]):not([class*="px-"]),
.theme-light .typeset a {
  color: oklch(44% 0.13 155) !important;
  text-decoration-color: oklch(44% 0.13 155) !important;
  transition: color 0.2s;
}
.theme-light a.underline:hover,
.theme-light a.text-blue-500.underline:hover,
.theme-light p a:hover,
.theme-light li a:not([class*="font-bold"]):not([class*="px-"]):hover,
.theme-light .typeset a:hover {
  color: oklch(58% 0.115 155) !important;
  text-decoration-color: oklch(58% 0.115 155) !important;
}


/* 25 — BTN-PRIMARY / BTN-BACK (signup.html) ------------------- */
.btn-primary {
  display: block;
  width: 100%;
  background-color: var(--brand-p) !important;
  color: oklch(97% 0.01 155) !important;
  font-weight: 800 !important;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--brand-p-dk) !important;
  cursor: pointer;
  transition:
    background-color 0.18s cubic-bezier(0, 0, 0.2, 1),
    transform 0.14s cubic-bezier(0, 0, 0.2, 1);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--brand-p-dk) !important;
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) !important;
}
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}
/* flex-1 variant (used in step 2 and 3 next buttons) */
.btn-primary.flex-1 {
  width: auto;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--brand-rule) !important;
  background-color: transparent !important;
  color: var(--brand-dim) !important;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-back:hover {
  background-color: var(--brand-p-bg) !important;
  color: var(--brand-ink) !important;
  border-color: var(--brand-p) !important;
}


/* 26 — LOGO EMERALD -------------------------------------------- */
/* Logo in emerald on the light header (brand mark matches accent) */
.theme-light .header-logo svg g {
  fill: var(--brand-p) !important;
}