/* ============================================================
   base.css — shared design tokens, typography, nav, footer,
   buttons, forms, FAQ, reveal animations, and basic page chrome.
   Used by all pages OTHER than the four legacy pages (which
   ship their own inline styles for now).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 400; line-height: 1.6;
  color: #2a2520; background: #faf8f5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

:root {
  --cream: #FAF6EE; --warm-white: #FFFFFF; --blush: #EBDDC5;
  --ink: #1F2540; --ink-soft: #3D4D60; --muted: #7A8B95;
  --terracotta: #E89A7A; --terracotta-dark: #C97A5C;
  --sage: #4A8590; --rose: #E89A7A; --gold: #B59556;
  --forest: #2A5560; --forest-soft: #3D6E78;
  --border: #D4C5A8;
  --shadow-sm: 0 2px 8px rgba(42,37,32,0.06);
  --shadow-md: 0 8px 24px rgba(42,37,32,0.08);
  --shadow-lg: 0 20px 50px rgba(42,37,32,0.12);
  --radius: 4px; --radius-lg: 12px; --container: 1240px;
}

h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.15rem; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 16px;
  display: inline-block;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.02em; border-radius: var(--radius);
  transition: all 0.25s ease; white-space: nowrap; cursor: pointer;
}
.btn-primary { background: var(--terracotta); color: white; }
.btn-primary:hover { background: var(--terracotta-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: white; }
.btn-ghost { color: var(--ink); padding: 8px 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; }
.btn-ghost:hover { color: var(--terracotta); border-color: var(--terracotta); }
.btn-large { padding: 18px 36px; font-size: 1rem; }

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(250,248,245,0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: all 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo {
  font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 500;
  font-style: italic; letter-spacing: -0.01em;
}
.logo span { color: var(--terracotta); }
.nav-links { display: flex; list-style: none; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  transition: color 0.2s; position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--terracotta); }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger::after {
  content: '▾'; margin-left: 6px; font-size: 0.7rem; color: var(--muted);
}
.nav-dropdown-menu {
  position: absolute; top: 100%; left: -16px;
  background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 12px; min-width: 220px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.2s ease; margin-top: 12px;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: var(--radius);
  font-size: 0.9rem; color: var(--ink-soft);
}
.nav-dropdown-menu a:hover { background: var(--cream); color: var(--terracotta); }
.nav-dropdown-menu a.active { background: var(--cream); color: var(--terracotta); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-phone { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.nav-phone:hover { color: var(--terracotta); }
.lang-toggle {
  font-size: 0.85rem; font-weight: 500; color: var(--muted);
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px; transition: all 0.2s;
}
.lang-toggle:hover { border-color: var(--terracotta); color: var(--terracotta); }
.nav-cta-btn { padding: 10px 18px !important; font-size: 0.85rem !important; }
.hamburger { display: none; width: 28px; height: 20px; position: relative; }
.hamburger span { position: absolute; width: 100%; height: 2px; background: var(--ink); left: 0; transition: all 0.3s; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
.hamburger.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ===== Sections ===== */
section { padding: 96px 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { font-size: 1.1rem; color: var(--ink-soft); }

/* ===== Page header (top of inner pages) ===== */
.page-hero {
  padding: 160px 0 64px; background: var(--warm-white);
  border-bottom: 1px solid var(--border); text-align: center;
}
.page-hero .eyebrow { color: var(--terracotta); }
.page-hero h1 { margin-bottom: 16px; max-width: 900px; margin-inline: auto; }
.page-hero p {
  font-size: 1.15rem; color: var(--ink-soft);
  max-width: 720px; margin: 0 auto;
}

/* ===== Generic content / prose =====
   Shared blog/article typography. Matches the look used on about.php so
   every blog post inherits the same italic deep-teal headers, terracotta
   inline lead-ins, and roomy paragraph spacing without each post having
   to redeclare the rules in its own extra_css block. */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.85rem;
  color: #1F3F4A;
  margin: 48px 0 16px;
}
.prose h3 {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #1F3F4A;
  font-size: 1.4rem;
  margin: 32px 0 12px;
}
.prose p { margin-bottom: 18px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.85; }
.prose p strong { color: var(--terracotta); font-weight: 700; letter-spacing: 0.01em; }
.prose ul, .prose ol { margin: 0 0 24px 24px; }
.prose li { margin-bottom: 10px; color: var(--ink-soft); line-height: 1.7; }
.prose ul li strong, .prose ol li strong { color: var(--terracotta); }
.prose blockquote {
  margin: 32px 0; padding: 20px 28px;
  background: var(--blush); border-left: 4px solid var(--terracotta);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic; color: var(--ink-soft);
}
.prose a { color: var(--terracotta); border-bottom: 1px dotted var(--terracotta); }
.prose figure { margin: 40px 0; }
/* Every inline blog-post image renders at the SAME display height regardless
   of source dimensions. We use a fixed responsive height (clamp scales it
   between 240px on the smallest mobile and 460px on desktop) plus
   `object-fit: cover` so portrait, square, and landscape sources all fill the
   identical rectangle — center-cropped, never stretched. !important defeats
   any stray inline styles or stale browser CSS cache from earlier rules. */
.prose figure img {
  width: 100% !important;
  height: clamp(240px, 38vw, 460px) !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-md);
}
.prose figure figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--muted); font-style: italic; text-align: center; line-height: 1.5; }

/* ===== Forms ===== */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-row.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  margin-bottom: 8px; letter-spacing: 0.02em;
}
.form-group .req { color: var(--terracotta); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 0.95rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(184,92,58,0.12);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group .help { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }

.form-card {
  max-width: 760px; margin: 0 auto; padding: 40px;
  background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}

/* ===== Alert / banner ===== */
.alert {
  max-width: 760px; margin: 24px auto;
  padding: 18px 22px; border-radius: var(--radius-lg);
  display: flex; gap: 12px; align-items: flex-start;
}
.alert-success { background: #ecf5e8; color: #2d4a1f; border: 1px solid #b9d4ab; }
.alert-error   { background: #fbe8e2; color: #6e1f0a; border: 1px solid #e0b5a8; }
.alert-info    { background: #fff5ed; color: #5a2e15; border: 1px solid #e4c8a8; }

/* ===== Footer ===== */
footer { background: #1a1612; color: rgba(255,255,255,0.7); padding: 80px 0 32px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 64px;
}
.footer-brand h3 { color: white; font-style: italic; margin-bottom: 16px; font-size: 1.5rem; }
.footer-brand p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 24px; }
.footer-contact { font-size: 0.9rem; line-height: 2; }
.footer-contact a:hover { color: var(--gold); }
footer h4 {
  color: white; font-family: 'Inter', sans-serif; font-size: 0.85rem;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px;
}
.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a { font-size: 0.92rem; transition: color 0.2s; }
.footer-nav a:hover { color: var(--gold); }
.footer-social { display: flex; gap: 12px; margin-top: 8px; }
.footer-social a {
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; font-size: 0.85rem;
}
.footer-social a:hover { background: var(--terracotta); border-color: var(--terracotta); color: white; }
.footer-bottom {
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; font-size: 0.85rem;
}
.footer-bottom a:hover { color: var(--gold); }

/* ===== FAQ ===== */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: white; border-radius: var(--radius-lg); margin-bottom: 12px;
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.faq-question {
  width: 100%; padding: 22px 26px; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 1rem; font-weight: 500; color: var(--ink); transition: color 0.2s;
}
.faq-question:hover { color: var(--terracotta); }
.faq-icon {
  width: 22px; height: 22px; border: 1.5px solid var(--ink);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.3s; position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--ink); transition: all 0.3s;
}
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 10px; }
.faq-item.open .faq-icon { background: var(--terracotta); border-color: var(--terracotta); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: white; }
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 26px;
}
.faq-item.open .faq-answer { max-height: 600px; padding: 0 26px 24px; }
.faq-answer p { color: var(--ink-soft); line-height: 1.7; }

/* ===== Reveal animation ===== */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .nav-links { gap: 18px; }
  /* Note: removed `.nav-links li { font-size: 0.85rem }` — it caused
     pages that use base.css (contact, faq, blog, etc.) to render the
     nav at a smaller size than the self-contained pages (index,
     weddings, quinceañeras, vendors, corporate) whose inline CSS
     doesn't include this breakpoint. Keeping nav font-size consistent
     at 0.9rem across all pages. */
}
@media (max-width: 960px) {
  /* Mobile nav drawer styles live in includes/header.php so they
     reach all pages (including index/vendors/corporate/quinceaneras
     which embed their own head and don't load this file). The only
     rules left here are ones unrelated to the drawer itself. */
  .nav-phone { display: none; }
  .hamburger { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  section { padding: 72px 0; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-card { padding: 28px 22px; }
}