/* ==========================================================================
   rootsLegal — custom styles
   Tailwind (CDN) handles layout/utilities; this file holds what Tailwind
   can't express: brand tokens, scroll-reveal animation, scrollbar polish.
   ========================================================================== */

:root {
  /* Brand palette */
  --c-navy:   #002D5D;   /* Pantone 648 C  — CMYK 100 83 39 31 */
  --c-indigo: #4338CA;   /* Pantone 2736 C — CMYK 87 78 00 00 */
  --c-cyan:   #00ABC8;   /* Pantone 3125 C — CMYK 91 00 21 00 */
  --c-mint:   #00A887;   /* Pantone Green C — CMYK 100 00 60 00 */
  --c-gold:   #F9BE14;   /* Pantone 7408 C — CMYK 02 27 97 00 */
  --c-cream:  #F6F8FB;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Selection + focus ------------------------------------------------------- */
::selection { background: var(--c-cyan); color: #fff; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Material icon baseline fix --------------------------------------------- */
.material-icons-round { line-height: 1; vertical-align: middle; }

/* Hide scrollbar on the exam-chip rail ------------------------------------ */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Page scrollbar ---------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-navy); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-cyan); }

/* Scroll reveal ----------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* WhatsApp FAB sizing (no Tailwind step for 3.25rem) ---------------------- */
.w-13 { width: 3.25rem; }
.h-13 { height: 3.25rem; }

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

/* Header stays solid white at all scroll positions — the hero background is
   now split blue/cream, so a transparent header loses contrast on one side. */
#site-header {
  background-color: #fff !important;
  box-shadow: none !important;
}


/* ==========================================================================
   Homepage sections — overlays, accordion, scroll-spy
   What Tailwind can't express for the faculty modal, the events lightbox,
   the marketplace modal + cart drawer, the FAQ accordion and the nav
   scroll-spy. Everything below is driven by classes the JS toggles.
   ========================================================================== */

/* Body scroll lock while an overlay is open ------------------------------- */
/* JS also sets document.body.style.overflow; this class carries the extras. */
body.is-locked { overflow: hidden; overscroll-behavior: none; }

/* Overlay + panel entrance ------------------------------------------------ */
#faculty-modal:not(.hidden),
#product-modal:not(.hidden),
#gallery-lightbox:not(.hidden),
#cart-backdrop:not(.hidden) {
  animation: overlay-in .18s ease-out both;
}

#faculty-modal:not(.hidden) #faculty-modal-panel,
#product-modal:not(.hidden) [role="dialog"],
#gallery-lightbox:not(.hidden) figure {
  animation: panel-in .26s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Cart drawer -------------------------------------------------------------
   The slide itself is Tailwind (translate-x-full + transition-transform);
   this only smooths the compositing and the inner scroll. */
#cart-drawer { will-change: transform; }
#cart-drawer .overflow-y-auto { overscroll-behavior: contain; }

/* FAQ answer reveal -------------------------------------------------------
   The panel is toggled with the plain 'hidden' class (no height maths), so
   the open state gets a short fade-and-settle instead. */
.faq-a:not(.hidden) { animation: faq-open .26s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.faq-item.is-open { border-color: rgba(0, 171, 200, .35); }

/* Snap rails (events gallery, exam chips) --------------------------------- */
.snap-x { scroll-padding-left: 1.25rem; scroll-padding-right: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .snap-x { scroll-behavior: smooth; }
}

/* Header nav scroll-spy ---------------------------------------------------- */
#site-header a.nav-active { color: var(--c-navy); }
@media (min-width: 1024px) {
  #site-header nav a.nav-active { position: relative; }
  #site-header nav a.nav-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 999px;
    background: var(--c-cyan);
  }
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #faculty-modal:not(.hidden),
  #product-modal:not(.hidden),
  #gallery-lightbox:not(.hidden),
  #cart-backdrop:not(.hidden),
  #faculty-modal:not(.hidden) #faculty-modal-panel,
  #product-modal:not(.hidden) [role="dialog"],
  #gallery-lightbox:not(.hidden) figure,
  .faq-a:not(.hidden) {
    animation: none !important;
  }
  #cart-drawer { transition: none !important; }
}

/* ==========================================================================
   Product detail page (product.html)
   Only the two states the JS toggles by attribute — the rest of the page is
   Tailwind. Attribute selectors keep product.js from having to juggle class
   lists the way the homepage tab modules do.
   ========================================================================== */

/* Detail tabs -------------------------------------------------------------- */
.pd-tab {
  border-bottom: 2px solid transparent;
  color: #64748b;                                     /* slate-500 */
  margin-bottom: -1px;                                /* sit on the rail */
}
.pd-tab:hover { color: var(--c-navy); }
.pd-tab[aria-selected="true"] {
  color: var(--c-navy);
  border-bottom-color: var(--c-cyan);
}

/* Panel swap --------------------------------------------------------------- */
.pd-panel:not(.hidden) { animation: faq-open .26s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .pd-panel:not(.hidden) { animation: none !important; }
}

/* ==========================================================================
   Square button mode
   Every real <button> and every anchor styled as a button/pill (inline-flex
   + a rounded-* utility) loses its corner radius sitewide, overriding the
   Tailwind rounded-* utility classes authored in the markup.
   ========================================================================== */
button,
a[class*="inline-flex"][class*="rounded"] {
  border-radius: 0 !important;
}