/* ==============================================================
   Inward Bound Counseling · Custom Stylesheet
   Layers on top of Tailwind CDN with brand-specific motion,
   typography refinements, and the hand-drawn trail-arrow system.
   ============================================================== */

:root {
  --ibc-cream:     #FAF6EE;
  --ibc-parchment: #F2EADB;
  --ibc-sand:      #E6DAC2;
  --ibc-fog:       #C8C5B8;
  --ibc-moss:      #7C8B6E;
  --ibc-moss-deep: #4F5A45;
  --ibc-bark:      #3A332C;
  --ibc-bark-soft: #5A4F44;
  --ibc-red:       #C84B4B;
  --ibc-red-deep:  #A8362F;
  --ibc-gold:      #BC8F4A;
  --ibc-gold-soft: #E1C28D;
}

/* ── Typography refinements ─────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "ss02", "kern"; }

.font-display { font-optical-sizing: auto; }

/* Italic styling for Fraunces · gentler slope */
.font-display em,
.font-display .italic {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}


/* ── Floating Nav ───────────────────────────────────────────── */
#site-nav .nav-link {
  position: relative;
  color: rgba(250, 246, 238, 0.88);
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: color .3s ease;
}
#site-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
#site-nav .nav-link:hover { color: var(--ibc-gold-soft); }
#site-nav .nav-link:hover::after { transform: scaleX(1); }

#site-nav .cta-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.1rem .6rem 1.25rem;
  background: var(--ibc-red);
  color: var(--ibc-cream);
  border-radius: 9999px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background .25s ease, transform .25s ease;
}
#site-nav .cta-pill:hover { background: var(--ibc-red-deep); transform: translateY(-1px); }

/* Nav state once user scrolls past hero */
#site-nav.is-scrolled {
  background: rgba(250, 246, 238, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(58, 51, 44, 0.06);
}
#site-nav.is-scrolled .nav-link { color: var(--ibc-bark); }
#site-nav.is-scrolled .nav-link:hover { color: var(--ibc-red); }
#site-nav.is-scrolled #mobile-toggle { color: var(--ibc-bark); }
#site-nav.is-scrolled .group span.text-ibc-cream\/80,
#site-nav.is-scrolled span.text-ibc-cream {
  color: var(--ibc-bark) !important;
}
#site-nav.is-scrolled span.text-ibc-cream\/80 {
  color: var(--ibc-bark-soft) !important;
}


/* ── Hero ────────────────────────────────────────────────────── */
.hero-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: heroReveal 1.1s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-parallax img {
  will-change: transform;
  transition: transform .15s linear;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%       { transform: translateY(6px); opacity: 1; }
}
.animate-scroll-bounce {
  animation: scrollBounce 2.2s ease-in-out infinite;
}


/* ── Grain texture overlay ───────────────────────────────────── */
.grain {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}


/* ── Trail Arrows · the signature moment ────────────────────── */
.trail-arrow-wrap {
  padding: 1.5rem 0;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .trail-arrow-wrap { padding: 2.5rem 0; }
}

.trail-arrow {
  width: 90px;
  height: auto;
}
@media (min-width: 768px) {
  .trail-arrow { width: 120px; }
}

.trail-arrow .trail-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 2.4s cubic-bezier(.5,.05,.2,1);
}
.trail-arrow .trail-head {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity .55s ease 1.6s, transform .55s ease 1.6s;
}
.trail-arrow.is-drawn .trail-line {
  stroke-dashoffset: 0;
}
.trail-arrow.is-drawn .trail-head {
  opacity: 1;
  transform: scale(1);
}


/* ── Scroll-reveal utility ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1.1s cubic-bezier(.2,.7,.2,1),
    transform 1.1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── Specialty cards ────────────────────────────────────────── */
.specialty-card {
  position: relative;
  background: var(--ibc-cream);
  padding: 2.5rem 2rem;
  border: 1px solid rgba(58, 51, 44, 0.08);
  border-radius: 2px;
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.specialty-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(58, 51, 44, 0.25);
  border-color: rgba(200, 75, 75, 0.25);
}
.card-number {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--ibc-red);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ibc-bark);
  font-weight: 500;
  transition: color .25s ease, gap .25s ease;
}
.card-link:hover {
  color: var(--ibc-red);
  gap: .85rem;
}


/* ── Modality chips (Approach section) ──────────────────────── */
.modality-chip {
  padding: 1.5rem 1.5rem 1.4rem;
  background: rgba(250, 246, 238, 0.65);
  border: 1px solid rgba(58, 51, 44, 0.08);
  border-radius: 2px;
  transition: background .3s ease, transform .3s ease;
}
.modality-chip:hover {
  background: rgba(250, 246, 238, 0.95);
  transform: translateY(-2px);
}
.modality-num {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  color: var(--ibc-red);
  font-weight: 600;
  letter-spacing: 0.04em;
}


/* ── Contact widget rows ────────────────────────────────────── */
.ibc-widget-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--ibc-parchment);
  border: 1px solid rgba(58, 51, 44, 0.06);
  border-radius: 2px;
  transition: background .25s ease, border-color .25s ease;
}
.ibc-widget-row:hover {
  background: var(--ibc-sand);
  border-color: rgba(200, 75, 75, 0.2);
}
.ibc-widget-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ibc-cream);
  color: var(--ibc-red);
  border-radius: 999px;
  flex-shrink: 0;
}
.ibc-pill-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: var(--ibc-bark);
  color: var(--ibc-cream);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s ease, transform .25s ease;
}
.ibc-pill-link:hover {
  background: var(--ibc-red);
  transform: translateY(-1px);
}


/* ── Mobile drawer animation ────────────────────────────────── */
#mobile-drawer {
  transform: translateY(-10px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
#mobile-drawer.is-open {
  display: block !important;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


/* ── Accessibility ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .trail-arrow .trail-line { stroke-dashoffset: 0 !important; }
  .trail-arrow .trail-head { opacity: 1 !important; transform: scale(1) !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ── SimplePractice widget branding (OAR + Contact form, sitewide) ──
   The widget JS auto-binds to .spwidget-button regardless of where we place it.
   We override the default light-blue button with brand-aligned IBC styling. */
.spwidget-button-wrapper { text-align: center; }

a.spwidget-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 2.5rem !important;
  background: var(--ibc-red) !important;
  color: var(--ibc-cream) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px -10px rgba(168, 54, 47, 0.45);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
a.spwidget-button:hover {
  background: var(--ibc-red-deep) !important;
  color: var(--ibc-cream) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(168, 54, 47, 0.55);
}
a.spwidget-button:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px -8px rgba(168, 54, 47, 0.5);
}

/* Compact variant for inline/secondary contact widget placements */
.ibc-widget-compact a.spwidget-button {
  padding: 0.75rem 1.5rem !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  box-shadow: 0 6px 18px -10px rgba(168, 54, 47, 0.4);
}

/* Outlined variant — useful when paired next to a solid-red primary button */
.ibc-widget-outline a.spwidget-button {
  background: transparent !important;
  color: var(--ibc-bark) !important;
  border: 1px solid rgba(58, 51, 44, 0.3) !important;
  box-shadow: none !important;
}
.ibc-widget-outline a.spwidget-button:hover {
  background: var(--ibc-bark) !important;
  color: var(--ibc-cream) !important;
  border-color: var(--ibc-bark) !important;
}


/* ── Mobile refinements ─────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-parallax img { object-position: 50% 30%; }
  #hero h1 { letter-spacing: -0.015em; }
  .specialty-card { padding: 2rem 1.75rem; }
}