/* ASHQUAY. Consultancy — custom styles layered on top of Tailwind utilities */

:root {
  --aq-primary: #EA580C;
  --aq-primary-dark: #C2410C;
  --aq-primary-darker: #9A3412;
  --aq-primary-light: #FDBA74;
  --aq-primary-soft: #FFEDD5;
  --aq-primary-softer: #FFF7ED;
  --aq-ash-dark: #292524;
  --aq-ash-mid: #57534E;
  --aq-ash-light: #78716C;
  --aq-ash-border: #E7E5E4;
  --aq-ash-surface: #F5F5F4;
}

html { scroll-behavior: smooth; }
body { font-family: 'Nunito Sans', system-ui, sans-serif; color: var(--aq-ash-dark); }
.font-display { font-family: 'Fraunces', Georgia, serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--aq-ash-surface); }
::-webkit-scrollbar-thumb { background: var(--aq-primary-light); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--aq-primary); }

/* Decorative blob shapes */
.aq-blob {
  position: absolute;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: blur(0px);
  z-index: 0;
  pointer-events: none;
}
.aq-blob-orange { background: linear-gradient(135deg, var(--aq-primary), var(--aq-primary-dark)); }
.aq-blob-soft { background: var(--aq-primary-soft); }

@keyframes aq-blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  50% { border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%; }
}
.aq-blob-animate { animation: aq-blob-morph 12s ease-in-out infinite; }

/* Hero gradient backgrounds (used when no admin banner image is set) */
.aq-hero-gradient {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.08), transparent 45%),
    linear-gradient(120deg, var(--aq-primary-darker) 0%, var(--aq-primary) 55%, var(--aq-primary-dark) 100%);
}

/* Hero banner slideshow — up to 4 admin-uploaded images per page, three
   selectable transition styles. Each slide is a full-bleed layer; only the
   active one is visible. Deliberately NO z-index here: the slides wrapper is
   the first child inside the hero <section>, so normal stacking order alone
   already paints it beneath the gradient overlay, decorative blobs, and text
   that follow it in the DOM. Giving the active slide its own z-index (as an
   earlier version of this file did) backfires — a declared z-index jumps
   above every sibling that's still on the implicit "auto" level, which is
   every other layer in the hero, including the text. */
.aq-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
.aq-hero-slide.aq-slide-active { opacity: 1; }

[data-transition="fade"] .aq-hero-slide {
  transition: opacity 1.6s ease;
}

[data-transition="zoom"] .aq-hero-slide {
  transform: scale(1);
  transition: opacity 1.8s ease, transform 7s ease-out;
}
[data-transition="zoom"] .aq-hero-slide.aq-slide-active {
  transform: scale(1.09);
}

[data-transition="slide"] .aq-hero-slide {
  transform: translateX(2.5%);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.25,.1,.25,1);
}
[data-transition="slide"] .aq-hero-slide.aq-slide-active {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .aq-hero-slide { transition: opacity .3s ease !important; transform: none !important; }
}

/* Scroll reveal */
.aq-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.aq-reveal.aq-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .aq-reveal { opacity: 1; transform: none; transition: none; }
  .aq-blob-animate { animation: none; }
}

/* Cards */
.aq-card { transition: transform .25s ease, box-shadow .25s ease; }
.aq-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(234,88,12,0.25); }

/* Stat count-up target */
.aq-count { font-variant-numeric: tabular-nums; }

/* Timeline */
.aq-timeline { position: relative; }
.aq-timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(var(--aq-primary-soft), var(--aq-primary), var(--aq-primary-soft));
  border-radius: 999px;
}
.aq-timeline-dot {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--aq-primary), var(--aq-primary-dark));
  color: #fff;
  box-shadow: 0 0 0 6px var(--aq-primary-softer);
  z-index: 1;
  flex-shrink: 0;
}

/* Prose for blog body content */
.aq-prose h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.3rem; color: var(--aq-ash-dark); margin: 1.75rem 0 .75rem; }
.aq-prose p { margin-bottom: 1.1rem; line-height: 1.85; color: var(--aq-ash-mid); }
.aq-prose ul, .aq-prose ol { margin: 0 0 1.1rem 1.4rem; color: var(--aq-ash-mid); }
.aq-prose ul { list-style: disc; }
.aq-prose ol { list-style: decimal; }
.aq-prose li { margin-bottom: .5rem; line-height: 1.75; }
.aq-prose strong { color: var(--aq-ash-dark); }

/* Nav link underline */
.aq-nav-link { position: relative; }
.aq-nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--aq-primary);
  transition: width .25s ease;
}
.aq-nav-link:hover::after, .aq-nav-link.aq-active::after { width: 100%; }
.aq-nav-link.aq-active { color: var(--aq-primary) !important; font-weight: 700; }

/* Mobile menu */
#aqMobileMenu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#aqMobileMenu.aq-open { max-height: 640px; }

/* WhatsApp-style floating action button */
.aq-fab { box-shadow: 0 12px 30px -8px rgba(234,88,12,0.55); }