/* Derma Care London — Homepage/Treatments redesign (mockup v2)
   Brand tokens match assets/css/main.css (warm ink + antique gold + ivory). */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-ink: #1a1613;
  --color-ink-soft: #4a423a;
  --color-ink-faint: #6b6259;
  --color-gold: #a9832f;
  --color-gold-light: #d4b06a;
  --color-gold-dark: #7c5f23;
  --color-cream: #faf6ef;
  --color-cream-deep: #f2e9db;
  --color-border: #e6dcc9;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Placeholder media block — images intentionally left blank per brief */
.img-placeholder {
  position: relative;
  background: linear-gradient(150deg, var(--color-cream-deep) 0%, #ece1cd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.img-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(26,22,19,0.035) 0 2px, transparent 2px 14px);
}
.img-placeholder svg {
  position: relative;
  width: 15%;
  min-width: 28px;
  max-width: 56px;
  height: auto;
  color: var(--color-gold);
  opacity: 0.35;
}

/* Underline link with animated gold rule */
.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.4,0,0.2,1);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

/* Treatments + Find Your Clinic nav dropdowns (desktop) — share .treatments-dropdown / .treatments-chevron */
.treatments-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  pointer-events: none;
}
#shop-nav-item:hover .treatments-dropdown,
#shop-nav-item:focus-within .treatments-dropdown,
#treatments-nav-item:hover .treatments-dropdown,
#treatments-nav-item:focus-within .treatments-dropdown,
#clinic-nav-item:hover .treatments-dropdown,
#clinic-nav-item:focus-within .treatments-dropdown,
.treatments-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.treatments-chevron {
  transition: transform 180ms ease;
}
#shop-nav-item:hover .treatments-chevron,
#shop-nav-item:focus-within .treatments-chevron,
#shop-menu-toggle[aria-expanded="true"] .treatments-chevron,
#treatments-nav-item:hover .treatments-chevron,
#treatments-nav-item:focus-within .treatments-chevron,
#treatments-menu-toggle[aria-expanded="true"] .treatments-chevron,
#clinic-nav-item:hover .treatments-chevron,
#clinic-nav-item:focus-within .treatments-chevron,
#clinic-menu-toggle[aria-expanded="true"] .treatments-chevron {
  transform: rotate(180deg);
}

/* Treatments accordion (mobile menu) */
.mobile-nav-treatments summary::-webkit-details-marker { display: none; }
.mobile-nav-treatments .mobile-nav-chevron { transition: transform 200ms ease; }
.mobile-nav-treatments[open] .mobile-nav-chevron { transform: rotate(180deg); }

/* Mobile menu */
#mobile-menu {
  transition: max-height 320ms cubic-bezier(0.4,0,0.2,1), opacity 220ms ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobile-menu.open {
  max-height: 1400px;
  opacity: 1;
}

/* Marquee for Instagram strip label spacing (static, decorative only) */
.tracking-widest-sm { letter-spacing: 0.16em; }
.tracking-widest-md { letter-spacing: 0.22em; }

/* Focus visibility (kept even where Tailwind's default is overridden by custom buttons) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 2px;
}

/* Suppress the browser/OS's own default focus ring on the nav toggle buttons and dropdown
   links (WebKit's :focus-visible matching for <button> after a mouse click is inconsistent,
   so without this, the system's own accent-colored ring — pink on some Macs — shows through
   instead of staying invisible on click and relying on the hover states already defined
   above). The gold :focus-visible rule above still layers back in correctly for keyboard use. */
#menu-toggle,
#shop-menu-toggle,
#treatments-menu-toggle,
#clinic-menu-toggle,
.treatments-dropdown a,
#mobile-menu a,
#mobile-menu summary {
  outline: none;
}

/* Hello Elementor's reset.css opinionatedly styles every <button type="button"> with a 1px
   pink (#cc3366) border, 8px/16px padding, a 3px border-radius, and a 16px font-size. Buttons
   that already carry their own Tailwind classes for these properties override that fine on
   source order/specificity, but the hamburger and dropdown-chevron toggle buttons were never
   meant to have any of that (the mockup gives them no border/padding/radius classes at all) and
   have nothing to win the tie with — so the theme's defaults leak through, inflating the header
   row's height and spacing only on WooCommerce pages (the only pages where reset.css loads).
   Reset every property that rule sets, back to the plain, spacing-free control the design
   intends. */
#menu-toggle,
#shop-menu-toggle,
#treatments-menu-toggle,
#clinic-menu-toggle,
button[aria-label="Search"] {
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  text-align: inherit;
  background-color: transparent;
}

/* Hero image scrim for legible overlay text */
.hero-scrim {
  background: linear-gradient(180deg, rgba(26,22,19,0) 35%, rgba(26,22,19,0.55) 78%, rgba(26,22,19,0.72) 100%);
}

/* Page-open entrance — the one authored motion moment, run once at load.
   The rule reuses the .link-underline hover motif as the page's opening gesture
   instead of a generic fade; the media settle is an ambient "held breath" quality,
   not a flashy zoom. prefers-reduced-motion above already collapses all durations
   to ~0, so reduced-motion users land on the correct final state instantly. */
@keyframes entrance-media-settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
@keyframes entrance-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes entrance-rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.entrance-media {
  animation: entrance-media-settle 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.entrance-eyebrow {
  animation: entrance-rise 400ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}
.entrance-rule {
  transform-origin: left;
  animation: entrance-rule-draw 300ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
}
.entrance-rule-center { transform-origin: center; }
.entrance-heading {
  animation: entrance-rise 450ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}
.entrance-cta {
  animation: entrance-rise 350ms cubic-bezier(0.16, 1, 0.3, 1) 550ms both;
}

/* Sticky mobile book bar — fixed CTA row for location pages, clear of the home indicator */
.sticky-book-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* FAQ accordion built on native <details>/<summary> for built-in keyboard + a11y support */
.accordion-item summary {
  cursor: pointer;
  list-style: none;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item .accordion-icon { transition: transform 220ms cubic-bezier(0.4,0,0.2,1); }
.accordion-item[open] .accordion-icon { transform: rotate(45deg); }
.accordion-item[open] .accordion-body {
  animation: accordion-reveal 220ms ease;
}
@keyframes accordion-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}