/* =====================================================================
   Pony Party - Formal / Posh theme
   Loaded AFTER site.css on the formal page (body.formal) to override the
   playful look with an elegant, wedding-website aesthetic.
   Fonts: Cormorant (display serif) + Montserrat (body)
   ===================================================================== */

body.formal {
  --sky: #c6a15b;          /* gold becomes the "primary" */
  --sky-dark: #a9853f;
  --sky-soft: #f3ece0;
  --pink: #b98e73;         /* muted taupe-rose accent */
  --pink-soft: #efe6da;
  --cream: #fbf8f3;
  --cream-2: #f5efe6;
  --ink: #2e2a24;
  --ink-soft: #7c6f5f;
  --line: #e8ddcb;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  --shadow: 0 10px 30px rgba(46,42,36,.07);
  --shadow-lg: 0 26px 60px rgba(46,42,36,.12);

  --font-display: 'Cormorant', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  background: var(--cream);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
}

/* Elegant display type */
body.formal h1, body.formal h2, body.formal h3, body.formal h4 { font-weight: 600; letter-spacing: .01em; }
body.formal h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; }
body.formal h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; }
body.formal .eyebrow {
  background: transparent; color: var(--gold, #a9853f); letter-spacing: .28em;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem; padding: 0;
  margin-bottom: 1.25rem;
}
body.formal .eyebrow::before, body.formal .eyebrow::after {
  content: ""; display: inline-block; width: 34px; height: 1px; background: var(--sky); vertical-align: middle;
}
body.formal .lead { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--ink-soft); font-style: italic; }

/* Refined buttons - thin, no chunky clay shadow */
body.formal .btn {
  background: var(--sky); color: #fff; box-shadow: none; border-radius: 2px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-size: .78rem; padding: 1.05em 2.2em; border: 1px solid var(--sky);
}
body.formal .btn:hover { background: var(--sky-dark); border-color: var(--sky-dark); transform: none; box-shadow: 0 8px 20px rgba(169,133,63,.25); }
body.formal .btn:active { transform: none; }
body.formal .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
body.formal .btn--ghost:hover { background: var(--ink); color: #fff; }
body.formal .btn--pink { background: var(--pink); border-color: var(--pink); }

/* Header refined */
body.formal .site-header { background: rgba(251,248,243,.9); border-bottom: 1px solid var(--line); }
body.formal .brand-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--ink);
  max-width: 15ch;
}
body.formal .brand:hover .brand-text { color: var(--sky-dark); }
body.formal .nav-links a { font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
body.formal .nav-links a:hover, body.formal .nav-links a.active { background: transparent; color: var(--sky-dark); }

/* Cards - quiet & elegant */
body.formal .card { border: 1px solid var(--line); box-shadow: none; border-radius: var(--radius); }
body.formal .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
body.formal .card-tag { background: transparent; color: var(--gold, #a9853f); border: 1px solid var(--line); letter-spacing: .18em; }
body.formal .card h3 { font-weight: 600; }
body.formal .link-arrow { font-family: var(--font-body); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }

/* Hero - elegant frame instead of playful blob */
body.formal .hero { background: linear-gradient(180deg, #f6efe4, var(--cream)); }
body.formal .hero-media .photo-blob { border-radius: 4px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
body.formal .hero-media .photo-blob::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.7); pointer-events: none;
}

/* Page hero */
body.formal .page-hero { background: linear-gradient(135deg, #f3ece0, #efe6da); }

/* Section tints */
body.formal .section--tint { background: #f6efe4; }
body.formal .section--sky { background: linear-gradient(180deg, #f3ece0, #f6efe4); }

/* CTA band - muted, refined */
body.formal .cta-band { background: linear-gradient(135deg, #6f5f4a, #2e2a24); border-radius: var(--radius-lg); }
body.formal .cta-band .btn { background: var(--sky); color: #fff; border-color: var(--sky); }

/* Counters */
body.formal .counter { border: 1px solid var(--line); box-shadow: none; border-radius: var(--radius); }
body.formal .counter .num { font-family: var(--font-display); color: var(--sky-dark); font-weight: 600; }

/* Softer floats (gold, subtle) */
body.formal .float { opacity: .32; color: var(--sky); }

/* Footer - deep espresso rather than navy */
body.formal .site-footer { background: #2b2620; color: #d8cdba; }
body.formal .footer-col a:hover { color: var(--sky); }
body.formal .footer-social a:hover { background: var(--sky); }

/* Contact form validation: the bubble shadow and invalid-field ring are
   hard-coded pink in site.css, so retheme them to the muted formal palette. */
body.formal .field-bubble { box-shadow: 0 12px 26px rgba(46,42,36,.16); }
body.formal .field--shake input, body.formal .field--shake textarea { box-shadow: 0 0 0 3px var(--pink-soft); }