/* Editorial/Magazine Landing — Supplemental Styles */

html { scroll-behavior: smooth; }

/* Scroll-triggered fade-in */
.animate-hidden { opacity: 0; transition: opacity 0.5s ease; }
.animate-visible { opacity: 1; }

/* Header scroll state */
#site-header.scrolled {
  background-color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  border-bottom: 1px solid #f3f4f6;
}

/* Details marker reset */
details summary::-webkit-details-marker { display: none; }

/* Button hover / focus-visible */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #ec4899; /* brand-500 */
  outline-offset: 2px;
}
button:hover { opacity: 0.9; }

/* Form input focus */
input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgb(236 72 153 / 0.15);
}

/* Text selection */
::selection { background: #fce7f3; color: #500724; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fbcfe8; }
::-webkit-scrollbar-thumb { background: #f472b6; border-radius: 4px; }
html { scrollbar-width: thin; scrollbar-color: #f472b6 #fbcfe8; }

/* Off-canvas mobile menu */
#mobile-panel {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
#mobile-panel.open {
  transform: translateX(0);
}

/* Double-line divider */
.divider-double {
  height: 4px;
  border-top: 1px solid #fbcfe8;
  border-bottom: 1px solid #fbcfe8;
  margin: 0 auto;
  width: 80px;
}

/* Pull-quote / testimonial */
.pull-quote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  position: relative;
  padding-left: 2rem;
}
.pull-quote::before {
  content: "\201C";
  font-size: 4rem;
  line-height: 1;
  position: absolute;
  left: -0.25rem;
  top: -0.75rem;
  color: #fbcfe8;
  font-family: Georgia, serif;
}