/* ═══════════════════════════════════════════
   THE ERICA EDIT — GLOBAL STYLESHEET
   All pages import this file
═══════════════════════════════════════════ */

/* Fonts are now self-hosted — see css/fonts.css */

:root {
  --black:     #0D0D0D;
  --white:     #F5F2EE;
  --off-white: #EDEAE5;
  --rule:      #E0DBD5;
  --mid-grey:  #B8B2AA;
  --warm-grey: #6E6860;
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--black);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }

/* ── LOGO ── */
.logo { display:flex; flex-direction:column; align-items:center; line-height:1; cursor:pointer; }
.logo-the  { font-family:'Great Vibes',cursive; line-height:1; }
.logo-erica { font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.85; }
.logo-edit  { font-family:'Great Vibes',cursive; line-height:1.1; }

.logo-sm .logo-the  { font-size:14px; }
.logo-sm .logo-erica { font-size:38px; }
.logo-sm .logo-edit  { font-size:16px; }

.logo-lg .logo-the  { font-size:22px; }
.logo-lg .logo-erica { font-size:62px; }
.logo-lg .logo-edit  { font-size:26px; }

/* ── NAV ── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--white); border-bottom:1px solid var(--rule);
  padding:0 48px; height:80px;
  display:flex; align-items:center; justify-content:space-between;
  transition:box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.06); }

.nav-left { display:flex; gap:12px; align-items:center; flex:1; }
.nav-right { display:flex; align-items:center; gap:16px; flex:1; justify-content:flex-end; }
.nav-links { display:flex; gap:0; list-style:none; position:relative; }
.nav-links > li { position:relative; }
.nav-links a {
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--warm-grey);
  padding:8px 16px; display:block; transition:color 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color:var(--black); }

/* dropdown */
.nav-dropdown {
  position:absolute; top:100%; left:0;
  background:var(--white); border:1px solid var(--rule);
  min-width:180px; opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:all 0.25s var(--ease);
  z-index:200;
}
.nav-links li:hover .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown a {
  padding:12px 20px; border-bottom:1px solid var(--rule);
  font-size:11px; color:var(--warm-grey);
}
.nav-dropdown a:last-child { border-bottom:none; }
.nav-dropdown a:hover { color:var(--black); background:var(--off-white); }

.nav-cta {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:900;
  letter-spacing:0.25em; text-transform:uppercase;
  background:var(--black); color:var(--white);
  padding:12px 28px; border:none; cursor:pointer;
  transition:background 0.3s ease; white-space:nowrap;
}
.nav-cta:hover { background:#333; }

.nav-toggle {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:4px; background:none; border:none;
}
.nav-toggle span { display:block; width:24px; height:1.5px; background:var(--black); transition:all 0.3s ease; }

/* Hamburger → X when mobile nav is open */
.site-header:has(+ .mobile-nav.open) .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header:has(+ .mobile-nav.open) .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header:has(+ .mobile-nav.open) .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display:none; position:fixed; inset:80px 0 0;
  background:var(--white); z-index:99; flex-direction:column;
  padding:48px 32px; gap:0; border-top:1px solid var(--rule);
  overflow-y:auto;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--black);
  border-bottom:1px solid var(--rule); padding:20px 0;
}

/* ── FOOTER ── */
.site-footer {
  background:var(--black); color:var(--white);
  padding:56px 48px;
  display:flex; flex-direction:column; align-items:center; gap:28px;
}
.footer-logo { color:var(--white); }
.footer-nav { display:flex; gap:32px; list-style:none; flex-wrap:wrap; justify-content:center; }
.footer-nav a {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase; color:#555;
  transition:color 0.3s ease;
}
.footer-nav a:hover { color:var(--white); }
.footer-contact { display:flex; gap:36px; align-items:center; flex-wrap:wrap; justify-content:center; }
.footer-contact-item {
  display:flex; align-items:center; gap:10px;
  font-family:'Cormorant Garamond',serif; font-size:15px;
  font-style:italic; color:#777; transition:color 0.3s ease;
}
.footer-contact-item:hover { color:var(--white); }
.footer-contact-item svg { width:16px; height:16px; stroke:currentColor; fill:none; flex-shrink:0; }
.footer-rule { width:100%; height:1px; background:#1a1a1a; }
.footer-copy {
  font-family:'Barlow Condensed',sans-serif; font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase; color:#333;
}

/* ── UTILS ── */
.section-label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.45em; text-transform:uppercase; color:var(--mid-grey);
  display:block; margin-bottom:14px;
}
.section-title {
  font-family:'Great Vibes',cursive; font-size:clamp(40px,6vw,72px);
  line-height:1.1; color:var(--black);
}
.section-title-bold {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(48px,8vw,96px); text-transform:uppercase;
  letter-spacing:-0.02em; line-height:0.9; color:var(--black);
}

.btn-primary {
  display:inline-block; font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:900; letter-spacing:0.2em; text-transform:uppercase;
  background:var(--black); color:var(--white);
  padding:16px 36px; border:none; cursor:pointer; transition:background 0.3s ease;
}
.btn-primary:hover { background:#333; }
.btn-outline {
  display:inline-block; font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:900; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--black); border:1.5px solid var(--black);
  padding:14px 38px; transition:all 0.3s ease;
}
.btn-outline:hover { background:var(--black); color:var(--white); }
.btn-outline-white {
  display:inline-block; font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:900; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--black); border:2px solid var(--white);
  background:var(--white);
  padding:16px 44px; transition:all 0.3s ease;
}
.btn-outline-white:hover { background:transparent; color:var(--white); border-color:var(--white); }

/* page top offset */
.page-body { padding-top:80px; }

/* reveal animation */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* placeholder image blocks */
.ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.ph-label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase; color:#3a3a3a; text-align:center; padding:16px;
}
.ph-dark { background:#1e1e1e; }
.ph-dark .ph-label { color:#3a3a3a; }
.ph-mid  { background:#252525; }
.ph-mid  .ph-label { color:#3a3a3a; }

/* ── SHARED CAROUSEL ── */
.carousel-wrap { position:relative; overflow:hidden; }
.carousel-track { display:flex; transition:transform 0.85s cubic-bezier(0.77,0,0.175,1); }
.carousel-slide { flex-shrink:0; width:100%; }
.carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.3);
  color:var(--white); width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.3s ease; z-index:10; font-size:18px;
}
.carousel-btn:hover { background:rgba(255,255,255,0.25); border-color:var(--white); }
.carousel-btn.prev { left:24px; }
.carousel-btn.next { right:24px; }
.carousel-dots { display:flex; gap:8px; justify-content:center; margin-top:24px; }
.carousel-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--mid-grey); border:none; cursor:pointer; padding:0;
  transition:all 0.3s ease;
}
.carousel-dot.active { background:var(--black); width:24px; border-radius:3px; }
.carousel-dots-white .carousel-dot { background:rgba(255,255,255,0.3); }
.carousel-dots-white .carousel-dot.active { background:var(--white); }

/* ── SHARED FORM ── */
.form-field {
  display:flex; flex-direction:column; gap:6px;
}
.form-field label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--warm-grey);
}
.form-field input,
.form-field select,
.form-field textarea {
  width:100%; padding:16px 20px;
  background:var(--white); border:1px solid var(--rule);
  font-family:'Cormorant Garamond',serif; font-size:17px;
  color:var(--black); outline:none; transition:border-color 0.3s ease;
  appearance:none; border-radius:0;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--black); }
.form-field input::placeholder,
.form-field textarea::placeholder { color:var(--mid-grey); }
.form-field textarea { resize:vertical; min-height:120px; }

@media (max-width:900px) {
  .site-header { padding:0 24px; }
  .nav-links, .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .site-footer { padding:48px 24px; }
  .footer-contact { flex-direction:column; gap:16px; }
  .portfolio-grid-6 { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── RELATED SESSIONS (cross-linking) ── */
.related-sessions { padding:56px 48px; background:var(--off-white); text-align:center; }
.related-sessions .related-label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.45em; text-transform:uppercase; color:var(--mid-grey);
  display:block; margin-bottom:14px;
}
.related-sessions h3 {
  font-family:'Great Vibes',cursive; font-size:clamp(28px,4vw,40px);
  color:var(--black); margin-bottom:28px; line-height:1.1;
}
.related-links { display:flex; justify-content:center; gap:36px; flex-wrap:wrap; }
.related-links a {
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--warm-grey);
  padding-bottom:5px; border-bottom:1px solid var(--rule);
  transition:color 0.3s ease, border-color 0.3s ease;
}
.related-links a:hover { color:var(--black); border-color:var(--black); }

/* FAQ accordion */
details > summary::-webkit-details-marker { display:none; }
details > summary::marker { content:''; }
details[open] summary span[aria-hidden] { transform:rotate(45deg); display:inline-block; transition:transform 0.2s ease; }
details summary span[aria-hidden] { transition:transform 0.2s ease; display:inline-block; }

.faq-section { padding:80px 48px; background:var(--white); }
.faq-heading { text-align:center; margin-bottom:56px; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 64px; max-width:1100px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--rule); padding:22px 0; }
.faq-item summary {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  cursor:pointer; list-style:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px;
  color:var(--black); line-height:1.4;
}
.faq-item summary span[aria-hidden] {
  font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:22px;
  color:var(--mid-grey); flex-shrink:0;
}
.faq-item p {
  margin-top:16px; padding-right:28px;
  font-family:'Cormorant Garamond',serif; font-size:16px; line-height:1.8;
  color:var(--warm-grey);
}

@media (max-width:900px) {
  .faq-grid { grid-template-columns:1fr !important; gap:0 !important; }
}