/* ============================================
   HARA — FAQ + Work With Us
   Premium, brand-aware. Both pages share the same minimal
   visual language as About / Contact.
   ============================================ */

/* --- Visibility gates (driven by body[data-*]) ---
   Nav links + dropdown items hide instantly when the admin toggles
   the page off. No re-render, no flicker — pure CSS. */
body[data-faq-visible="false"] [data-nav-gate="faq"],
body[data-work-visible="false"] [data-nav-gate="work"] {
  display: none !important;
}

/* If the More dropdown ends up empty (both items hidden), drop the
   trigger too so the bar stays clean. */
body[data-faq-visible="false"][data-work-visible="false"] .site-header__more {
  display: none;
}

/* Same for whole mobile groups: if every link in a group is gated off,
   shrink the label too. We can't easily detect that in CSS so the rule
   below removes the empty-feel of the Discover group when both gated
   items disappear; "Journal" still anchors it so it never fully empties. */

/* ============================================
   FAQ page
   ============================================ */

.faq-shell {
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius-xl);
}

.faq-loading {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-item {
  border-bottom: 1px solid var(--glass-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  padding: var(--space-lg) var(--space-md);
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-primary);
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq-item__trigger:hover {
  color: var(--accent);
}

.faq-item__q {
  flex: 1;
  line-height: 1.4;
}

.faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.faq-item.open .faq-item__icon {
  transform: rotate(180deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ivory);
}

.faq-item__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-base) var(--ease-out);
}

.faq-item__answer {
  padding: 0 var(--space-md) var(--space-xl);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.75;
  max-width: 64ch;
}

.faq-item__answer p {
  margin: 0 0 var(--space-md);
}

.faq-item__answer p:last-child {
  margin-bottom: 0;
}

.faq-empty {
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  color: var(--text-secondary);
}

.faq-empty p {
  margin-bottom: var(--space-lg);
  font-size: var(--text-base);
}

.faq-cta {
  margin-top: var(--space-3xl);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  border-top: 1px solid var(--glass-border);
}

.faq-cta__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.faq-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.faq-cta__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto var(--space-xl);
}

@media (min-width: 768px) {
  .faq-shell {
    padding: var(--space-lg) var(--space-2xl);
  }

  .faq-item__trigger {
    padding: var(--space-xl) var(--space-lg);
    font-size: var(--text-xl);
  }

  .faq-item__answer {
    padding: 0 var(--space-lg) var(--space-2xl);
  }
}

/* ============================================
   FAQ hero — scrapbook cutout collage + floating ?'s
   ============================================ */

.hero--faq {
  min-height: 80vh;
  padding: var(--space-5xl) var(--container-padding);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* faq-4 used as a ghosted figure-watermark behind the text column.
   Heavily desaturated + low opacity + slight blur so it adds atmosphere
   without competing with the foreground collage. */
.hero__faq-backdrop {
  position: absolute;
  bottom: 0;
  left: -10%;
  height: 90vh;
  width: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1) sepia(0.2) brightness(0.95) contrast(1.05) blur(2px);
  opacity: 0.08;
  object-fit: contain;
  object-position: left bottom;
}

[data-brand="wellness"] .hero__faq-backdrop {
  /* Wellness page bg is ivory — figures need to read as faint dark shapes.
     Slightly stronger sepia + lower brightness + lower opacity. */
  filter: grayscale(1) sepia(0.25) brightness(0.7) contrast(1.08) blur(2px);
  opacity: 0.07;
}

/* Floating "?" watermarks — luxury ghost type behind the collage */
.hero__faq-mark {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--ivory);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

[data-brand="wellness"] .hero__faq-mark {
  color: var(--dark);
  opacity: 0.06;
}

.hero__faq-mark--1 {
  font-size: clamp(8rem, 22vw, 26rem);
  top: -4%;
  left: 1%;
  /* Italic "?" has a visual slant even at rotate(0) — set upright explicitly */
  font-style: normal;
}

/* Floating "?"s — JS positions/sizes/rotates each cycle, animates fade + drift */
.hero__faq-float {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--ivory);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: opacity, transform;
}

[data-brand="wellness"] .hero__faq-float {
  color: var(--dark);
}

/* Foreground grid */
.hero__faq-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(var(--space-2xl), 6vw, var(--space-5xl));
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.hero__faq-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Collage stage — anchors the three absolutely-positioned cutouts.
   overflow:visible (default) lets the floating "?"s drift outside this box. */
.hero__faq-collage {
  position: relative;
  width: 100%;
  height: clamp(500px, 56vw, 680px);
  /* Nudge the whole collage rightward on desktop to balance the headline
     column. Reset to 0 below the mobile breakpoint where the layout
     stacks. */
  transform: translateX(clamp(0px, 4vw, 56px));
}

.scrap {
  position: absolute;
  margin: 0;
}

.scrap img {
  display: block;
  width: 100%;
  height: auto;
  /* Ivory paper halo around the silhouette + dark grounding shadow */
  filter:
    drop-shadow(3px 0 0 var(--ivory))
    drop-shadow(-3px 0 0 var(--ivory))
    drop-shadow(0 3px 0 var(--ivory))
    drop-shadow(0 -3px 0 var(--ivory))
    drop-shadow(0 0 6px var(--ivory))
    drop-shadow(0 14px 28px rgba(20, 25, 18, 0.45));
}

/* Wellness — bright white halo so cutouts stay defined against the ivory page bg
   + warm taupe drop-shadow per saved feedback rule */
[data-brand="wellness"] .scrap img {
  filter:
    drop-shadow(3px 0 0 #ffffff)
    drop-shadow(-3px 0 0 #ffffff)
    drop-shadow(0 3px 0 #ffffff)
    drop-shadow(0 -3px 0 #ffffff)
    drop-shadow(0 0 6px #ffffff)
    drop-shadow(0 14px 28px rgba(88, 70, 50, 0.4));
}

/* faq-3: the base — biggest, almost upright, anchored bottom and shifted slightly left
   so the three pictures read as an overlapping mosaic */
.scrap--center {
  width: 96%;
  bottom: 5%;
  left: 44%;
  transform: translateX(-50%) rotate(1.5deg);
  z-index: 3;
}

/* faq-1 (provider + patient, landscape): upper-left, behind */
.scrap--top-left {
  width: 62%;
  top: 0;
  left: -8%;
  transform: rotate(-6deg);
  z-index: 1;
}

/* faq-2 (solo doctor at desk, portrait): upper-right, behind */
.scrap--bottom-right {
  width: 44%;
  top: 0;
  right: -6%;
  transform: rotate(7deg);
  z-index: 2;
}

/* Film grain over everything */
.hero__faq-grain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 200px 200px;
  background-repeat: repeat;
}

@media (max-width: 900px) {
  .hero--faq {
    min-height: auto;
    padding-top: calc(var(--space-5xl) + 24px);
    padding-bottom: var(--space-3xl);
  }

  .hero__faq-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .hero__faq-collage {
    height: clamp(440px, 100vw, 580px);
    transform: none;
  }

  .scrap--center {
    width: 102%;
    left: 44%;
    transform: translateX(-50%) rotate(1deg);
  }

  .scrap--top-left {
    width: 66%;
    left: -10%;
    transform: rotate(-5deg);
  }

  .scrap--bottom-right {
    width: 50%;
    right: -8%;
    transform: rotate(6deg);
  }

  /* Pull the giant top-left "?" in so it doesn't crash off-screen */
  .hero__faq-mark--1 { font-size: clamp(7rem, 32vw, 16rem); top: -2%; left: -3%; }

  /* Scale backdrop down on mobile, shift further off-left so it doesn't crowd the text */
  .hero__faq-backdrop {
    height: 60vh;
    left: -25%;
    bottom: 8%;
    opacity: 0.06;
  }
}

/* ============================================
   Work With Us page
   ============================================ */

.work-loading {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-inline: auto;
  max-width: 920px;
}

.work-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-2xl);
  gap: var(--space-lg);
}

.work-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.work-card__brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(136, 146, 109, 0.15);
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-primary);
  letter-spacing: 0.005em;
  margin: 0;
}

.work-card__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 0;
}

.work-card__summary {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.work-card__body {
  display: grid;
  gap: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
}

.work-card__section h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.work-card__section p,
.work-card__list {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.work-card__list {
  padding-left: 1.1em;
}

.work-card__list li {
  margin-bottom: 4px;
}

.work-card__foot {
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: flex-end;
}

.work-empty {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

.work-empty h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.work-empty p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-card__body {
    grid-template-columns: 1fr 1fr;
  }
}