/* ==========================================================================
   TMFOJ Design System — reference, not a build step. This is the de facto
   system already followed across the site's 45 pages; documented here so
   future edits stay consistent instead of drifting into one-off values.

   TYPOGRAPHY
     Display/headings : Fraunces (serif) — h1-h6 and .font-serif, set below.
     Body/UI          : Inter (sans) — body default.
     Scale (Tailwind utilities, overridden in tailwind-config.js):
       text-xs   13px/18px  — small print, sidebar links, table cells
       text-sm   16px/24px  — card descriptions, checklist/body copy
       text-base 16px       — Tailwind default, unchanged
       H1 (hero)  : text-5xl md:text-7xl (48px/72px), font-light, tracking-tight
       H2 (section): text-4xl md:text-5xl (36px/48px), font-light, tracking-tight
       H3 (card)  : text-xl/2xl/3xl (20/24/30px) by card importance —
                    timeline steps < standard cards < flagship cards.
       Eyebrows   : text-xs uppercase font-bold tracking-widest text-accent
     Every section intro follows: eyebrow -> mt-2 -> H2 -> mt-4 -> paragraph.

   SPACING (section vertical padding, by section weight)
     py-12          — slim stat strips
     py-16 lg:py-24 — hero, closing CTA banner (bookend sections)
     py-20 lg:py-28 — flagship spotlight
     py-20 lg:py-32 — standard content sections (majority of sections)
     Card grids     : gap-8. Card padding: p-8 standard, p-10 flagship-tier.

   CONTAINERS
     max-w-7xl (1280px) — all major section widths.
     max-w-4xl / max-w-5xl — narrower single-column sections (FAQ, CTA copy).
     max-w-xl / max-w-2xl / max-w-3xl — prose/paragraph measure within a section.

   RADIUS
     rounded-full — pills, badges, avatar circles.
     rounded-xl (16px) — buttons, icon tiles.
     rounded-2xl (20px) — cards (.premium-card, .flagship-card, and the
       plain bg-white cards used site-wide), image frames, popovers.

   SHADOWS — restrained by default; most components carry none at rest.
     Hover-only lift  : .premium-card / .flagship-card / plain service cards.
     Always-on subtle : shadow-sm (testimonial cards, small info cards).
     Elevated         : shadow-xl/2xl — floating overlays only (nav mega-menu,
       hero image frame), never in-flow content cards.

   MOTION — 300-400ms cubic-bezier(0.4,0,0.2,1) for hover/card transitions;
     .reveal scroll-fade (opacity + 24px translateY, 800ms) for section entry.
     Nothing bounces, floats, or parallaxes.
   ========================================================================== */

/* Import Premium Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Configurations */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #FAF9F6; /* Warm White */
  color: #3A3A3A; /* Charcoal */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04"; /* Inter alternate a/g/l — quieter, more editorial */
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Fraunces', serif;
  letter-spacing: -0.015em; /* tightened tracking reads more custom-set than default */
}

/* Glassmorphism Navigation */
.nav-glass {
  background-color: rgba(250, 249, 246, 0.85); /* Semi-transparent Warm White */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(27, 67, 50, 0.05); /* Very faint primary color border */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(27, 67, 50, 0.1);
  background-color: rgba(250, 249, 246, 0.95);
}

/* Scroll-triggered Micro-Animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), 
              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers for stagger effects */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

/* Custom Premium Buttons */
.btn-primary {
  background-color: #1B4332; /* Deep Forest Green */
  color: #FAF9F6; /* Warm White */
  font-weight: 500;
  border: 1px solid #1B4332;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background-color: #123024;
  border-color: #123024;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(27, 67, 50, 0.15);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: transparent;
  color: #1B4332; /* Deep Forest Green */
  font-weight: 500;
  border: 1px solid rgba(27, 67, 50, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
  background-color: rgba(27, 67, 50, 0.03);
  border-color: #1B4332;
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* Golden Accent Details */
.accent-gold {
  color: #D4A017;
}

.bg-gold {
  background-color: #D4A017;
}

.border-gold {
  border-color: #D4A017;
}

/* Accordion Transitions */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Premium Card hover lifts
   Radius matches the site-wide card convention (Tailwind's rounded-2xl,
   20px via the borderRadius override in tailwind-config.js) used on
   plain bg-white cards across all 45 pages — this class used to say 16px,
   a real inconsistency since both are the same "card" concept sitting
   side by side on the homepage. Aligned to the more prevalent standard
   (35 files use rounded-2xl cards vs. this class appearing only here on
   index.html) rather than the other way around, to keep the fix
   low-risk and avoid touching every page. */
.premium-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(27, 67, 50, 0.06);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(27, 67, 50, 0.04);
  border-color: rgba(27, 67, 50, 0.15);
}

/* Flagship-tier card: same footprint as .premium-card (same radius,
   transition, hover lift) but reads as a distinct, more important tier
   than the plain-white .premium-card cards used in "Why Choose TMFOJ".
   Two signals, not one: a soft primary-tinted background (reuses the
   existing primary-light token, no new color) plus a 3px inset gold
   top accent — the tint alone (#F0F5F2 vs #FFFFFF) turned out too close
   to white to read as a real difference once actually viewed, so the
   accent stripe is the primary signal and the tint is a secondary touch.
   The accent is an inset box-shadow rather than border-top specifically
   so it doesn't fight the rounded corners the way a differing per-side
   border width can. */
.flagship-card {
  background-color: #F0F5F2;
  border: 1px solid rgba(27, 67, 50, 0.10);
  border-radius: 20px;
  box-shadow: inset 0 3px 0 0 #D4A017;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.flagship-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 3px 0 0 #D4A017, 0 14px 34px rgba(27, 67, 50, 0.07);
  border-color: rgba(27, 67, 50, 0.2);
}

/* Timeline Custom Connector styling */
.timeline-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: #FAF9F6;
  border-radius: 50%;
}

/* Article & Legal Page Typography */
.article-content h2,
.legal-content h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: #1B4332;
  font-size: 1.75rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}

.article-content h3,
.legal-content h3 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: #1B4332;
  font-size: 1.375rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.article-content p,
.legal-content p {
  color: rgba(58, 58, 58, 0.8);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
}

.article-content ul,
.article-content ol,
.legal-content ul,
.legal-content ol {
  color: rgba(58, 58, 58, 0.8);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
}

.article-content ul { list-style-type: disc; }
.article-content ol { list-style-type: decimal; }
.legal-content ul { list-style-type: disc; }
.legal-content ol { list-style-type: decimal; }

.article-content li,
.legal-content li {
  margin-bottom: 0.5rem;
}

.article-content strong,
.legal-content strong {
  color: #1B4332;
  font-weight: 600;
}

.article-content blockquote {
  border-left: 2px solid #D4A017;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-style: italic;
  color: rgba(58, 58, 58, 0.85);
  margin: 2rem 0;
  font-size: 1.0625rem;
}

.article-content a,
.legal-content a {
  color: #1B4332;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-content a:hover,
.legal-content a:hover {
  color: #D4A017;
}

/* Visible keyboard-focus indicator for controls that suppress the default
   outline (accordion/mobile-nav toggles use focus:outline-none because the
   browser default ring looks broken against their custom hit areas). Form
   inputs already get a visible cue via focus:border-primary; these three
   button patterns had none. */
.accordion-header:focus-visible,
.nav-accordion-header:focus-visible,
#mobile-menu-btn:focus-visible {
  outline: 2px solid #D4A017;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip Link (accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background-color: #1B4332;
  color: #FAF9F6;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 8px 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* Tab / Chip pill buttons — shared pattern for filter tabs and small link pills
   (e.g. services.html anchor tabs, blog.html category tabs) */
.btn-tab {
  background-color: #FFFFFF;
  color: #1B4332;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  border: 1px solid #F3F2EC;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-tab:hover,
.btn-tab.active {
  background-color: #1B4332;
  color: #FAF9F6;
  border-color: #1B4332;
}

.chip {
  background-color: #F3F2EC;
  color: #1B4332;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chip:hover {
  background-color: #1B4332;
  color: #FAF9F6;
}

/* Heading-level override: lets a semantically-correct h3 keep the small
   uppercase label look of the surrounding utility classes instead of
   inheriting the larger .article-content/.legal-content h3 treatment.
   Higher specificity than the base h3 rule above, so margin must be
   restated explicitly here too (it can't fall through to the mt/mb
   utility classes once this rule wins on the element). */
.article-content .h3-label,
.legal-content .h3-label {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1B4332;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #FAF9F6;
}

::-webkit-scrollbar-thumb {
  background: rgba(27, 67, 50, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 67, 50, 0.4);
}