/* 
  PRECIOUS CAKERY - SHARED STYLES
  Consolidated CSS for all pages
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root {
  --black:#0A0A0A;--surface:#141414;--card:#1A1A1A;
  --pink:#FFB6C1;--pink2:#FFC8D0;--rose:#B76E79;--rose-dim:#6B3F45;
  --white:#F5F0EB;--muted:#C4A8AD;
  --ff-display:'Fraunces',serif;--ff-body:'DM Sans',sans-serif;--ff-accent:'Cormorant Garamond',serif;
  --ease:.3s ease;--r:14px;
}

body {
  background:var(--black);color:var(--white);font-family:var(--ff-body);font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}

h1,h2,h3,h4 { font-family:var(--ff-display);line-height:1.1;font-weight:400 }
h1 { font-size:clamp(2.8rem,7vw,5.5rem) }
h2 { font-size:clamp(2rem,4.5vw,3.5rem) }
h3 { font-size:clamp(1.2rem,2.5vw,1.7rem) }
em { font-style:italic;color:var(--pink) }
p { color:var(--muted);line-height:1.7}
a { text-decoration:none }

.eyebrow {
  font-family:var(--ff-body);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose);margin-bottom:.75rem;display:block;
}

.section-heading { color:var(--white);margin-bottom:1rem }
.container { max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem) }
section { padding:clamp(4rem,8vw,7rem) 0 }

/* BUTTONS */
.btn-primary {
  display:inline-flex;align-items:center;justify-content:center;padding:.85rem 2.2rem;
  background:var(--pink);color:var(--black);font-family:var(--ff-body);font-weight:600;
  font-size:.9rem;letter-spacing:.05em;border:none;border-radius:50px;cursor:pointer;
  transition:background var(--ease),transform var(--ease),box-shadow var(--ease);
}
.btn-primary:hover {
  background:var(--pink2);transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,182,193,.3);
}

.btn-secondary {
  display:inline-flex;align-items:center;justify-content:center;padding:.85rem 2.2rem;
  background:transparent;color:var(--white);font-family:var(--ff-body);font-weight:500;
  font-size:.9rem;border:1px solid var(--rose-dim);border-radius:50px;cursor:pointer;
  transition:all var(--ease);
}
.btn-secondary:hover { border-color:var(--pink);color:var(--pink);transform:translateY(-2px) }

.btn-outline {
  display:inline-flex;align-items:center;justify-content:center;padding:.85rem 2.2rem;
  background:transparent;color:var(--pink);font-family:var(--ff-body);font-weight:500;
  font-size:.9rem;border:1.5px solid var(--pink);border-radius:50px;cursor:pointer;
  transition:all var(--ease);
}
.btn-outline:hover { background:var(--pink);color:var(--black);transform:translateY(-2px) }

/* NAVBAR */
.navbar { position:fixed;top:0;left:0;width:100%;z-index:1000;transition:background var(--ease),backdrop-filter var(--ease);padding:0 }
.navbar.scrolled { background:rgba(10,10,10,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(183,110,121,.2) }
.nav-inner { display:flex;align-items:center;justify-content:space-between;padding:1.2rem clamp(1.25rem,5vw,3rem);max-width:1280px;margin:0 auto }
.nav-logo { display:flex;align-items:center;text-decoration:none }
.nav-logo img { height:48px;width:auto }
.nav-links { display:flex;align-items:center;gap:2.5rem;list-style:none }
.nav-links a { font-family:var(--ff-body);font-size:.9rem;color:var(--white);letter-spacing:.02em;transition:color var(--ease);position:relative }
.nav-links a::after { content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--pink);transition:width var(--ease) }
.nav-links a:hover::after, .nav-links a.active::after { width:100% }
.nav-links a:hover, .nav-links a.active { color:var(--pink) }
.nav-cta { background:var(--pink)!important;color:var(--black)!important;padding:.6rem 1.5rem;border-radius:50px;font-weight:600!important;font-size:.85rem!important }
.nav-cta:hover { background:var(--pink2)!important }

.hamburger { 
  display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;
  padding:4px;min-width:44px;min-height:44px;align-items:center;justify-content:center;
}
.hamburger span { display:block;width:24px;height:2px;background:var(--white);transition:all .3s ease;transform-origin:center }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

.mobile-menu { 
  display:none;flex-direction:column;background:rgba(10,10,10,.97);backdrop-filter:blur(20px);
  border-top:1px solid var(--rose-dim);max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;
}
.mobile-menu.open { display:flex;max-height:400px;padding:1.5rem clamp(1.25rem,5vw,3rem);gap:1.5rem }
.mobile-menu a { font-family:var(--ff-body);font-size:1.1rem;color:var(--white);padding:.25rem 0;border-bottom:1px solid rgba(183,110,121,.1) }
.mobile-menu a:hover { color:var(--pink) }
.mobile-cta { background:var(--pink);color:var(--black)!important;padding:.75rem 1.5rem!important;border-radius:50px;font-weight:600!important;text-align:center;border-bottom:none!important }

/* FAQ */
.faq-section { background:var(--surface) }
.faq-header { text-align:center;margin-bottom:3rem }
.faq-list { max-width:720px;margin:0 auto }
.faq-item { border-bottom:1px solid rgba(183,110,121,.2) }
.faq-q { 
  width:100%;display:flex;justify-content:space-between;align-items:center;background:none;
  border:none;color:var(--white);font-family:var(--ff-body);font-size:1rem;font-weight:500;
  padding:1.25rem 0;cursor:pointer;text-align:left;gap:1rem;
}
.faq-icon { font-size:1.4rem;color:var(--rose);transition:transform var(--ease);flex-shrink:0 }
.faq-item.open .faq-icon { transform:rotate(45deg);color:var(--pink) }
.faq-a { max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease }
.faq-item.open .faq-a { max-height:300px;padding-bottom:1.25rem }
.faq-cta { text-align:center;margin-top:2rem }

/* FOOTER */
.footer { background:#050505;border-top:1px solid rgba(183,110,121,.15);padding-top:clamp(3rem,6vw,5rem) }
.footer-inner { display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:3rem;padding-bottom:3rem }
.footer-logo { height:30px;width:auto }
.footer-tagline { font-family:var(--ff-accent);font-style:italic;color:var(--rose);font-size:.9rem;margin:.5rem 0 }
.footer-location { font-size:.8rem;color:var(--rose-dim);margin:.5rem 0 }
.footer-socials { display:flex;gap:1rem;margin-top:1rem }
.footer-socials a { color:var(--muted);transition:color var(--ease) }
.footer-socials a:hover { color:var(--pink) }
.footer-links h4 { font-family:var(--ff-body);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--rose);margin-bottom:1.2rem }
.footer-links ul { list-style:none;display:flex;flex-direction:column;gap:.75rem }
.footer-links a { color:var(--muted);font-size:.9rem;transition:color var(--ease) }
.footer-links a:hover { color:var(--pink) }
.footer-newsletter h4 { font-family:var(--ff-body);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--rose);margin-bottom:.75rem }
.footer-newsletter p { font-size:.85rem;margin-bottom:1rem }
.footer-form { display:flex;gap:.5rem }
.footer-form input { flex:1;padding:.7rem 1rem;background:rgba(255,255,255,.05);border:1px solid var(--rose-dim);border-radius:50px;color:var(--white);font-family:var(--ff-body);font-size:.85rem;outline:none }
.footer-form button { padding:.7rem 1.1rem;background:var(--pink);color:var(--black);border:none;border-radius:50px;font-size:1rem;cursor:pointer;font-weight:700 }
.footer-bottom { border-top:1px solid rgba(183,110,121,.1);padding:1.5rem clamp(1.25rem,5vw,3rem);text-align:center }
.footer-bottom p { font-size:.8rem;color:var(--rose-dim) }

/* TESTIMONIAL CAROUSEL (Common) */
.test-carousel-wrapper { position:relative;display:flex;align-items:center;gap:20px;margin:0 -40px;padding:40px }
.test-nav {
  background:rgba(183, 110, 121, 0.1);border:1px solid rgba(183, 110, 121, 0.3);color:#FFB6C1;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.3s ease;z-index:10;flex-shrink:0;position:relative;
}
.test-nav:hover { background:#B76E79;color:#0A0A0A;transform:scale(1.1) }
.test-carousel { overflow-x: clip;overflow-y: visible;width:100%;min-width:0 }
.test-track { display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 15px);gap:30px;width:100%;transition:transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);will-change:transform;pointer-events:none }
.single-testimonial { flex-shrink:0;border:5px solid #B76E79;text-align:center;border-radius:45px;position:relative;z-index:2;background:#141414 }
.single-testimonial::before, .single-testimonial::after { 
  font-family:'Fraunces', serif;font-size:6rem;line-height:1;color:#FFB6C1;position:absolute;
  width:90px;height:70px;background:#141414;display:flex;align-items:center;justify-content:center;z-index:4;
}
.single-testimonial::before { content: "\201C"; left: -20px; top: -40px; }
.single-testimonial::after { content: "\201D"; right: -20px; bottom: -40px; }
.single-testimonial p { color:#F5F0EB;font-family:'Cormorant Garamond', serif;font-style:italic;font-size:1.15rem;padding:4rem 2.5rem 2rem;position:relative;z-index:3 }
.client-info { display:flex;align-items:center;justify-content:center;text-align:left;padding:0 2.5rem 4rem;gap:1rem;position:relative;z-index:3 }
.client-avatar { width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg, #B76E79, #FFB6C1);color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;flex-shrink:0 }
.client-details h6 { color:#F5F0EB;font-weight:600;font-size:1rem;margin:0 }
.client-details span { color:#B76E79;font-size:0.85rem;display:block }
.test-dots { display:flex;justify-content:center;align-items:center;gap:12px;margin-top:2rem }
.tdot { background:rgba(183, 110, 121, 0.3);width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;transition:all 0.3s ease;padding:0 }
.tdot.active { width:30px;background:#FFB6C1;border-radius:10px }

/* MEDIA QUERIES (Global) */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr }
}
@media (max-width: 768px) {
  .nav-links { display: none }
  .hamburger { display: flex }
  .footer-inner { grid-template-columns: 1fr }
  .test-carousel-wrapper { margin: 0; padding: 40px 10px; gap: 10px; }
  .test-nav { width: 36px; height: 36px; }
  .test-track { grid-auto-columns: 100%; }
  .single-testimonial p { padding: 3rem 1.5rem 1.5rem; font-size: 1rem; }
  .client-info { padding: 0 1.5rem 3rem; }
}
@media (max-width: 480px) {
  .newsletter-form { flex-direction: column }
  .newsletter-form input { min-width: unset; width: 100% }
}

/* MOBILE ACCESSIBILITY: 16px INPUTS */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 16px !important;
  }
}
/* ── DESKTOP DROPDOWN ───────────────────────────────── */
.nav-dropdown { position: relative }

.dropdown-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  transition: transform .25s ease;
}
.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 10, 12, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(183, 110, 121, 0.25);
  border-radius: 14px;
  padding: .5rem;
  list-style: none;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 999;
}

/* tiny arrow pointing up toward the nav link */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(183, 110, 121, 0.25);
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu li a {
  display: block;
  padding: .6rem 1rem;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--muted);
  transition: all .2s ease;
  white-space: nowrap;
}
.dropdown-menu li a:hover {
  background: rgba(255, 182, 193, .1);
  color: var(--pink);
  padding-left: 1.25rem;
}
/* Hide the underline animation on dropdown trigger */
.nav-dropdown > a::after { display: none }
/* Bridge the gap between the trigger and dropdown */
.nav-dropdown > a::before {
  content: '';
  position: absolute;
  bottom: -14px; /* same as the gap (top: calc(100% + 14px)) */
  left: -20px;
  right: -20px;
  height: 14px;
  background: transparent;
}
.dropdown-menu:hover,
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


/* ── MOBILE ACCORDION ───────────────────────────────── */
.mob-dropdown { border-bottom: 1px solid rgba(183,110,121,.1) }

.mob-dropdown-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--ff-body);
  font-size: 1.1rem;
  padding: .25rem 0;
  cursor: pointer;
  text-align: left;
}
.mob-arrow {
  color: var(--rose);
  font-size: 1.2rem;
  transition: transform .3s ease;
  display: inline-block;
}
.mob-dropdown-toggle.open .mob-arrow { transform: rotate(45deg) }

.mob-dropdown-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .3s ease;
  display: flex;
  flex-direction: column;
}
.mob-dropdown-items.open {
  max-height: 400px;
  padding-bottom: .75rem;
}
.mob-dropdown-items a {
  padding: .5rem 0 .5rem 1rem !important;
  font-size: .95rem !important;
  color: var(--muted) !important;
  border-bottom: none !important;
}
.mob-dropdown-items a:hover { color: var(--pink) !important }
.navbar {
  transition: background 0.3s ease, backdrop-filter 0.3s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar.nav-hidden {
  transform: translateY(-110%);
}