/* ============================================================
   Comfort Circle — public site styles (new multi-page website)
   Supplements Tailwind: fonts, motion, focus, small components.
   ============================================================ */

:root {
  --cc-blue: #1e40af;
  --cc-blue-deep: #1e3a8a;
  --cc-green: #059669;
  --cc-gold: #f59e0b;
  /* Full logo palette — the six figures of the circle */
  --cc-cyan: #29abe2;
  --cc-lime: #7fb92e;
  --cc-yellow: #f7c815;
  --cc-orange: #f47b20;
  --cc-red: #c1272d;
  /* Signature: the circle of colors, in logo order */
  --cc-circle: linear-gradient(90deg, #1e40af, #29abe2 18%, #059669 36%, #7fb92e 52%, #f7c815 68%, #f47b20 84%, #c1272d);
}

/* Typography roles */
.font-heading { font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3, h4 { font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; text-wrap: balance; }
.tabular { font-variant-numeric: tabular-nums; }

/* Visible keyboard focus everywhere (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sticky header shadow once scrolled (toggled by site.js) */
#site-header.is-scrolled { box-shadow: 0 4px 20px -8px rgb(15 23 42 / 0.12); }

/* Dropdown chevron rotation */
[data-dropdown].open .fa-chevron-down { transform: rotate(180deg); }

/* ---------- Scroll-reveal (site.js adds .rv-in) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.rv-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   DEPTH & COLOR LAYER — Trust & Authority treatment
   (loads after Tailwind, enriches utility hooks on every page)
   ============================================================ */

::selection { background: #1e40af; color: #fff; }

/* ---------- Page heroes: aurora glows + dot grid + keyline ---------- */
.hero-gradient {
  position: relative;
  background:
    radial-gradient(52rem 26rem at 88% -12%, rgb(30 64 175 / 0.32), transparent 58%),
    radial-gradient(40rem 22rem at -8% 115%, rgb(5 150 105 / 0.28), transparent 58%),
    radial-gradient(26rem 14rem at 55% -20%, rgb(245 158 11 / 0.17), transparent 62%),
    linear-gradient(180deg, #d2e3f9 0%, #edf6f1 100%);
}
.hero-gradient::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(30 64 175 / 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, black 85%);
          mask-image: linear-gradient(115deg, transparent 45%, black 85%);
}
.hero-gradient::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--cc-circle);
  opacity: .75;
}
.hero-gradient > * { position: relative; }

/* ---------- Homepage soft hero (light, mint/blue wash) ---------- */
.hero-soft {
  position: relative;
  background:
    radial-gradient(44rem 32rem at 98% 6%, rgb(5 150 105 / 0.33), transparent 58%),
    radial-gradient(34rem 24rem at 0% 104%, rgb(30 64 175 / 0.24), transparent 58%),
    radial-gradient(20rem 12rem at 45% -10%, rgb(245 158 11 / 0.14), transparent 62%),
    linear-gradient(180deg, #e6effc 0%, #cfe8dc 100%);
}
.hero-soft > * { position: relative; }

/* Circular photo with navy->green crescent ring */
.hero-photo { position: relative; max-width: 34rem; margin-inline: auto; }
.hero-photo::before {
  content: ""; position: absolute; inset: -3.5%;
  border-radius: 9999px;
  background: linear-gradient(140deg, #0f2b5b 8%, #1e40af 42%, #059669 88%);
  transform: translate(4.5%, 1.5%);
  filter: drop-shadow(0 24px 40px rgb(15 43 91 / 0.25));
}
.hero-photo img {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 9999px;
  box-shadow: inset 0 0 0 6px #fff;
  border: 6px solid #fff;
}

/* Stat card row (white card on the hero wash) */
.stat-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.5rem;
  box-shadow: 0 2px 6px rgb(15 23 42 / 0.04), 0 24px 48px -24px rgb(30 64 175 / 0.18);
}

/* ---------- Mobile hero alignment: center everything below lg ---------- */
@media (max-width: 1023px) {
  .hero-gradient > div, .hero-soft > div { text-align: center; }
  .hero-gradient .flex-wrap, .hero-soft .flex-wrap { justify-content: center; }
  /* gold underline accents follow the centered text */
  .hero-gradient span[class*="bg-comfort-gold"],
  .hero-soft span[class*="bg-comfort-gold"] {
    left: 50%; transform: translateX(-50%);
  }
  /* constrained blocks center themselves */
  .hero-gradient .max-w-xl, .hero-gradient .max-w-2xl,
  .hero-soft .max-w-xl, .hero-soft .max-w-2xl { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .hero-photo { max-width: 21rem; }
  .about-photo::before { inset: -4% -6% 4% 6%; }
}

/* About-page photo: soft gradient sweep behind rounded image */
.about-photo { padding-bottom: 1.5rem; }
.about-photo::before {
  content: ""; position: absolute; inset: -8% -14% 6% 12%;
  border-radius: 42% 58% 55% 45% / 48% 45% 55% 52%;
  background: linear-gradient(135deg, rgb(5 150 105 / 0.28), rgb(30 64 175 / 0.22));
  filter: blur(2px);
}

/* ---------- Homepage dark hero ---------- */
.hero-dark {
  background:
    radial-gradient(46rem 26rem at 90% -10%, rgb(245 158 11 / 0.16), transparent 55%),
    radial-gradient(44rem 26rem at -6% 110%, rgb(16 185 129 / 0.20), transparent 58%),
    linear-gradient(160deg, #101c45 0%, #1e3a8a 48%, #1e40af 100%);
}
.hero-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, black 90%);
          mask-image: linear-gradient(115deg, transparent 40%, black 90%);
}

/* ---------- Brand bands & buttons: flat -> gradient ---------- */
.bg-comfort-blue {
  background-image: linear-gradient(135deg, #1e40af 0%, #1e3a8a 60%, #172f6e 100%);
}
.bg-comfort-green {
  background-image: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
}
a.bg-comfort-blue, button.bg-comfort-blue,
a.bg-comfort-green, button.bg-comfort-green {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
a.bg-comfort-blue:hover, button.bg-comfort-blue:hover { filter: brightness(1.08); transform: translateY(-1px); }
a.bg-comfort-green:hover, button.bg-comfort-green:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  a.bg-comfort-blue:hover, a.bg-comfort-green:hover,
  button.bg-comfort-blue:hover, button.bg-comfort-green:hover { transform: none; }
}

/* ---------- Tinted section grounds (replaces flat slate-50) ---------- */
section.bg-slate-50 {
  background: linear-gradient(180deg, #c7dbf6 0%, #d7e3f6 55%, #c2e6d5 100%);
}
section.bg-emerald-50\/40 {
  background: linear-gradient(180deg, #b7e9d1 0%, #d2f2e3 100%);
}

/* ---------- Cards: real depth ---------- */
.card-hover {
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 6px 18px -10px rgb(30 64 175 / 0.14);
}
.card-hover:hover {
  box-shadow: 0 4px 10px rgb(15 23 42 / 0.06), 0 22px 44px -18px rgb(30 64 175 / 0.30);
  border-color: rgb(30 64 175 / 0.28);
}

/* ---------- Icon chips: gradient tints + rings ---------- */
span[class*="bg-blue-50"][class*="text-comfort-blue"] {
  background-image: linear-gradient(135deg, #e8efff 0%, #dbeafe 100%);
  box-shadow: inset 0 0 0 1px rgb(30 64 175 / 0.14);
}
span[class*="bg-emerald-50"][class*="text-comfort-green"] {
  background-image: linear-gradient(135deg, #e5faf1 0%, #d1fae5 100%);
  box-shadow: inset 0 0 0 1px rgb(5 150 105 / 0.16);
}

/* ---------- Hybrid gradient text (brand signature) ---------- */
.text-gradient {
  background: linear-gradient(90deg, #1e40af 15%, #059669 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- FAQ accordions: accent when open ---------- */
details.faq { transition: box-shadow .2s ease; }
details.faq[open] {
  border-left: 4px solid #1e40af;
  background: linear-gradient(180deg, #fbfdff, #ffffff);
  box-shadow: 0 10px 26px -16px rgb(30 64 175 / 0.25);
}

/* ---------- Testimonials: decorative quote ---------- */
figure blockquote { position: relative; }
figure blockquote::before {
  content: "\201C"; position: absolute; top: -0.55em; left: -0.15em;
  font-family: Georgia, serif; font-size: 3.2em; line-height: 1;
  color: rgb(30 64 175 / 0.14); pointer-events: none;
}

/* ---------- Footer: brand keyline ---------- */
footer.bg-slate-900 { position: relative; }
footer.bg-slate-900::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cc-circle);
}

/* Section-heading underline bars: the circle of colors */
span[class*="w-14"][class*="bg-comfort-green"][class*="rounded-full"] {
  background-image: var(--cc-circle);
  width: 4.5rem;
}

/* ---------- Accordions (native <details>) ---------- */
details.faq { border-radius: 0.75rem; }
details.faq > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary .faq-icon { transition: transform .25s ease; flex: none; }
details.faq[open] > summary .faq-icon { transform: rotate(45deg); }
details.faq .faq-body { overflow: hidden; }

/* ---------- Testimonial carousel (scroll-snap) ---------- */
.carousel {
  display: grid; grid-auto-flow: column; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 1rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .5rem;
}
.carousel > * { scroll-snap-align: start; }

/* ---------- Gallery lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgb(2 6 23 / 0.9); padding: 2rem;
}
.lightbox img, .lightbox iframe { max-width: min(90vw, 72rem); max-height: 82vh; border-radius: .5rem; }
.lightbox figcaption { color: #cbd5e1; text-align: center; margin-top: .75rem; font-size: .875rem; }

/* ---------- Horizontal timeline (about page history) ---------- */
@media (min-width: 1024px) {
  .htimeline { position: relative; }
  .htimeline::before {
    content: ""; position: absolute; top: 1.75rem; left: 12%; right: 12%;
    border-top: 2px dashed rgb(5 150 105 / 0.35);
  }
  .htimeline li { position: relative; }
  .htimeline .htimeline-dot { position: relative; z-index: 1; }
}

/* ---------- Timeline (about page) ---------- */
.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 1.05rem; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(#1e40af33, #05966933);
}
.timeline-dot {
  position: absolute; left: 0.45rem; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  background: #fff; border: 3px solid var(--cc-blue);
}

/* ============================================================
   MOTION LAYER — professional, subtle, reduced-motion aware
   ============================================================ */

@keyframes ccFadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ccFadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ccScaleIn  { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: none; } }
@keyframes ccPulse    { 0% { box-shadow: 0 0 0 0 rgb(37 211 102 / .40); }
                        70% { box-shadow: 0 0 0 14px rgb(37 211 102 / 0); }
                        100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); } }
@keyframes ccSpin     { to { transform: rotate(360deg); } }

/* Hero entrance choreography (pure CSS, staggered) */
.hero-soft > div > div:first-child > *,
.hero-gradient > div > div:first-child > *,
.hero-gradient > div > *:only-child > * {
  animation: ccFadeUp .55s ease backwards;
}
.hero-soft > div > div:first-child > *:nth-child(1), .hero-gradient > div > div:first-child > *:nth-child(1) { animation-delay: .05s; }
.hero-soft > div > div:first-child > *:nth-child(2), .hero-gradient > div > div:first-child > *:nth-child(2) { animation-delay: .14s; }
.hero-soft > div > div:first-child > *:nth-child(3), .hero-gradient > div > div:first-child > *:nth-child(3) { animation-delay: .23s; }
.hero-soft > div > div:first-child > *:nth-child(4), .hero-gradient > div > div:first-child > *:nth-child(4) { animation-delay: .32s; }
.hero-soft > div > div:first-child > *:nth-child(5), .hero-gradient > div > div:first-child > *:nth-child(5) { animation-delay: .41s; }
.hero-soft > div > div:first-child > *:nth-child(6), .hero-gradient > div > div:first-child > *:nth-child(6) { animation-delay: .50s; }
.hero-soft .hero-photo, .hero-gradient .about-photo { animation: ccScaleIn .7s ease .28s backwards; }

/* Section-heading underline bars draw in with the reveal */
.rv span[class*="bg-comfort-green"][class*="rounded-full"] {
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .6s ease .25s;
}
.rv-in span[class*="bg-comfort-green"][class*="rounded-full"] { transform: scaleX(1); }

/* Card imagery: gentle zoom on hover */
.card-hover { overflow: hidden; }
.card-hover img { transition: transform .45s ease; }
.card-hover:hover img { transform: scale(1.04); }

/* Icon chips: micro-lift when their card is hovered */
.card-hover span[class*="inline-flex"][class*="rounded"] { transition: transform .25s ease; }
.card-hover:hover span[class*="inline-flex"][class*="rounded"] { transform: translateY(-2px) scale(1.06); }

/* Dropdown / mobile menu entrance */
.dropdown-panel:not(.hidden) { animation: ccFadeDown .18s ease; }
#mobile-menu:not(.hidden) { animation: ccFadeDown .22s ease; }

/* FAQ body slides in when opened */
details.faq[open] .faq-body { animation: ccFadeDown .28s ease; }

/* Floating WhatsApp button: soft attention pulse */
a[aria-label="Chat with Comfort Circle on WhatsApp"] { animation: ccPulse 3.2s ease-out infinite; }

/* Buttons: tactile press */
a[class*="rounded-xl"]:active, button[class*="rounded-xl"]:active { transform: scale(.98); }

/* Form focus: glow ring + label warm-up */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgb(30 64 175 / 0.12);
  border-color: #1e40af !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* Submit-button loading state (applied by site.js) */
.btn-loading { pointer-events: none; opacity: .75; }
.btn-loading .fa-paper-plane, .btn-loading .fa-arrow-right { display: none; }
.btn-loading::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .4em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ccSpin .7s linear infinite; vertical-align: -0.15em;
}

/* Back-to-top control (injected by site.js) */
#cc-top {
  position: fixed; left: 1.1rem; bottom: 1.4rem; z-index: 40;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  background: linear-gradient(135deg, #1e40af, #1e3a8a); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgb(30 64 175 / .5);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease; cursor: pointer; border: 0;
}
#cc-top.show { opacity: 1; pointer-events: auto; transform: none; }
#cc-top:hover { filter: brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
  .hero-soft > div > div:first-child > *, .hero-gradient > div > div:first-child > *,
  .hero-gradient > div > *:only-child > *,
  .hero-soft .hero-photo, .hero-gradient .about-photo,
  .dropdown-panel:not(.hidden), #mobile-menu:not(.hidden),
  details.faq[open] .faq-body,
  a[aria-label="Chat with Comfort Circle on WhatsApp"] { animation: none !important; }
  .rv span[class*="bg-comfort-green"][class*="rounded-full"] { transform: scaleX(1); transition: none; }
  .card-hover:hover img,
  .card-hover:hover span[class*="inline-flex"][class*="rounded"] { transform: none; }
}

/* ---------- Misc ---------- */
.prose-cc p { margin-bottom: 1rem; line-height: 1.75; }
.prose-cc ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
img { height: auto; }
.card-hover { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.card-hover:hover { box-shadow: 0 18px 40px -18px rgb(15 23 42 / 0.22); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card-hover:hover { transform: none; } }