/* ==========================================================================
   FAE Components
   --------------------------------------------------------------------------
   Ported directly from Base44 source (src/index.css @layer components +
   standalone classes below it). Original Tailwind @apply / utility values
   translated 1:1 into plain CSS using tokens from fae-tokens.css where a
   token exists, and literal values where the source used a one-off.

   Class names prefixed `fae-` per project convention (original Base44 class
   name kept in comments for traceability back to source).
   ========================================================================== */

/* Base44: .section-shell — max-width container + responsive section padding */
.fae-section-shell {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--fae-container-max);
  padding-left: var(--fae-section-padding-x);
  padding-right: var(--fae-section-padding-x);
  padding-top: var(--fae-section-padding-y);
  padding-bottom: var(--fae-section-padding-y);
}
@media (min-width: 640px) {
  .fae-section-shell {
    padding-left: var(--fae-section-padding-x-sm);
    padding-right: var(--fae-section-padding-x-sm);
    padding-top: var(--fae-section-padding-y-sm);
    padding-bottom: var(--fae-section-padding-y-sm);
  }
}

/* Base44: .nav-link — pill nav item */
.fae-nav-link {
  display: inline-flex;
  min-height: 2.75rem; /* min-h-11 */
  align-items: center;
  border-radius: var(--fae-radius-pill);
  padding-left: 1rem;  /* px-4 */
  padding-right: 1rem;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;    /* font-medium */
  color: var(--fae-color-gray-nav);
  transition: color 0.15s ease;
  text-decoration: none;
}
.fae-nav-link:hover {
  color: var(--fae-color-white);
}
.fae-nav-link:focus-visible {
  outline: 2px solid var(--fae-color-white);
  outline-offset: 2px;
}

/* Base44: .lime-button — primary white-on-lime pill CTA
   NOTE: per project brief this is used for "Book a Call" style buttons.
   Brief specifies WHITE pill CTA (bg white / text black) as the general
   pill-button style, but this source class is actually LIME bg / black
   text specifically — kept faithful to source here. If a separate white
   pill button appears in hero/nav JSX it will get its own class
   (fae-white-button) rather than overloading this one. Flagging for
   confirmation when nav/hero JSX is pasted. */
.fae-lime-button {
  display: inline-flex;
  min-height: 3rem; /* min-h-12 */
  align-items: center;
  justify-content: center;
  border-radius: var(--fae-radius-pill);
  background-color: var(--fae-color-lime);
  padding-left: 1.75rem; /* px-7 */
  padding-right: 1.75rem;
  font-size: 0.875rem;   /* text-sm */
  font-weight: 800;      /* font-extrabold */
  color: var(--fae-color-black);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.fae-lime-button:hover {
  transform: translateY(-0.125rem); /* -translate-y-0.5 */
  background-color: var(--fae-color-lime-hover);
  box-shadow: var(--fae-shadow-lime-button-hover);
}
.fae-lime-button:focus-visible {
  outline: 2px solid var(--fae-color-white);
  outline-offset: 2px;
}

/* Base44: .ghost-link — secondary text link with icon gap */
.fae-ghost-link {
  display: inline-flex;
  min-height: 3rem; /* min-h-12 */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--fae-radius-pill);
  padding-left: 1.25rem; /* px-5 */
  padding-right: 1.25rem;
  font-size: 0.875rem;   /* text-sm */
  font-weight: 700;      /* font-bold */
  color: var(--fae-color-gray-ghost);
  text-decoration: none;
  transition: color 0.15s ease;
}
.fae-ghost-link:hover {
  color: var(--fae-color-white);
}
.fae-ghost-link:focus-visible {
  outline: 2px solid var(--fae-color-white);
  outline-offset: 2px;
}

/* Base44: .hero-title — gradient white-to-gray clipped text, hero headline */
.fae-hero-title {
  background: var(--fae-gradient-hero-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Base44: .nav-shell — drop shadow under pill nav bar */
.fae-nav-shell {
  box-shadow: var(--fae-shadow-nav);
}

/* Base44: .lift-card — dark rounded card, lifts + lightens on hover */
.fae-lift-card {
  transition: var(--fae-transition-lift);
}
.fae-lift-card:hover {
  transform: translateY(-0.625rem); /* -10px */
  border-color: var(--fae-color-card-border-hover);
  background-color: var(--fae-color-card-bg);
}

/* Base44: .cta-glow — dark section bg with soft lime radial glow at top */
.fae-cta-glow {
  background:
    radial-gradient(circle at 50% 0%, var(--fae-color-lime-glow-soft), transparent 46%),
    var(--fae-color-cta-glow-base);
}

/* Base44: .location-hero — gradient hero bg used on Stuart/Jupiter/Palm Beach pages */
.fae-location-hero {
  background: var(--fae-gradient-location-hero);
  box-shadow: var(--fae-shadow-location-hero);
}

/* Base44: .founder-quote — gradient clipped text, same treatment as hero-title
   but different fade stop (8% vs 12%) */
.fae-founder-quote {
  background: var(--fae-gradient-founder-quote);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Base44: .reveal / .is-visible — scroll-triggered fade-up entrance.
   JS-driven: fae-main.js toggles .fae-is-visible via IntersectionObserver
   when an element enters the viewport. */
.fae-reveal {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.985); /* translateY(24px) */
  transition: var(--fae-transition-reveal);
}
.fae-reveal.fae-is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Reduced motion: disable scroll-behavior smoothness and entrance/hover
   animation per source's accessibility handling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .fae-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fae-lift-card,
  .fae-lime-button {
    transition: none;
  }
}

/* ==========================================================================
   Section Heading (eyebrow / title / copy)
   Used by: Process, Services, Trust Strip, Founder, Locations, FAQ sections
   ========================================================================== */

.fae-section-heading {
	display: grid;
	gap: 24px;
	margin-bottom: 48px;
}

.fae-section-heading__eyebrow {
	margin: 0 0 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: #6f6f74;
}

.fae-section-heading__title {
	max-width: 720px;
	margin: 0;
	font-size: 36px;
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.05em;
	color: #ffffff;
}

.fae-section-heading__copy {
	max-width: 470px;
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: #a8a8b0;
}

/* Title scales up at sm (640px), matching source's text-4xl sm:text-6xl */
@media (min-width: 640px) {
	.fae-section-heading__title {
		font-size: 60px;
	}
}

/* Desktop: title takes left 7 cols, copy sits right-aligned in remaining 5 cols, bottom-aligned
   Matches source's lg:grid-cols-12 lg:items-end (1024px) */
@media (min-width: 1024px) {
	.fae-section-heading {
		grid-template-columns: repeat(12, 1fr);
		align-items: end;
	}

	.fae-section-heading__main {
		grid-column: span 7;
	}

	.fae-section-heading__copy {
		grid-column: span 5;
		justify-self: end;
	}
}

/* Base44: .white-button — secondary white-bg/black-text pill CTA.
   NOT present in any pasted JSX source yet (Hero/Nav/Process/Services all
   use .fae-lime-button or .fae-ghost-link only). Defined here per the
   project brief's explicit spec instead: "white pill CTA (bg white / text
   black)". First real usage: ServicesSection's "Learn more" button.
   Structure mirrors .fae-lime-button 1:1, colors swapped — revisit/adjust
   if real source turns up showing different sizing. */
.fae-white-button {
  display: inline-flex;
  min-height: 3rem; /* min-h-12 */
  align-items: center;
  justify-content: center;
  border-radius: var(--fae-radius-pill);
  background-color: var(--fae-color-white);
  padding-left: 1.75rem; /* px-7 */
  padding-right: 1.75rem;
  font-size: 0.875rem;   /* text-sm */
  font-weight: 800;      /* font-extrabold */
  color: var(--fae-color-black);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.fae-white-button:hover {
  transform: translateY(-0.125rem); /* -translate-y-0.5, matches lime-button hover lift */
  background-color: #ececec;
}
.fae-white-button:focus-visible {
  outline: 2px solid var(--fae-color-lime);
  outline-offset: 2px;
}