/* ============================================================
   FDI World Dental Congress 2027 — Shared Stylesheet
   Used by: index.html  +  innovation-nexus-guidelines.html
   ============================================================ */

/* ---------- Base ---------- */
* {
  font-family: Poppins, sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ---------- Brand tokens ---------- */
:root {
  --color-primary: #05366f;       /* main navy blue — headings, buttons, icons */
  --color-primary-light: #ffffff; /* darkest navy — hero bg, header gradient */
  --color-accent: #f3272d;        /* red — CTAs, highlights */
  --color-accent-dark: #c81f24;   /* darker red — gradient end for red buttons */
  --color-accent-light: #ff9a9d;  /* light pink — hero heading highlight */
  --color-sky: #8dd7f7;           /* light blue — marquee dots, small accents */
  --color-green: #0f8a5f;         /* benefits icon 3 */
  --color-violet: #6b46c1;        /* benefits icon 4 */
  --color-amber: #d97706; 
  ---text-violet-brand:#6639b5;   /* benefits icon 5 */
}

/* ---------- Marquee (index.html) ---------- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.animate-marquee {
  animation: marquee 60s linear infinite;
}

/* ---------- Slide-in overlay (index.html) ---------- */
@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.animate-slide-in-left {
  animation: slide-in-left 1.2s ease-out forwards;
}

/* ---------- Reusable font-size utilities (index.html) ---------- */
.text-12 { font-size: 12px; }
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }
.text-18 { font-size: 18px; }
.text-20 { font-size: 20px; }
.text-24 { font-size: 24px; }
.text-28 { font-size: 28px; }
.text-32 { font-size: 32px; }
.text-36 { font-size: 36px; }
.text-40 { font-size: 40px; }
.text-48 { font-size: 48px; }

/* ---------- Fade-up entrance animation (shared) ---------- */
@keyframes fadeUpIn {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  animation: fadeUpIn 0.8s ease-out forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.7s; }
.delay-6 { animation-delay: 0.85s; }
.delay-7 { animation-delay: 1s; }
.delay-8 { animation-delay: 1.15s; }
.delay-9 { animation-delay: 1.3s; }

/* ---------- Mobile hamburger menu (shared) ---------- */
#mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
#mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Accordion (innovation-nexus-guidelines.html) ---------- */
/* Tailwind's arbitrary grid-rows utility isn't available in the CDN build,
   so the open/close animation is handled with plain CSS here. */
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms ease-out, opacity 250ms ease-out;
}
.accordion-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.accordion-panel > div {
  overflow: hidden;
}
.accordion-icon {
  transition: transform 250ms ease-out;
}
.accordion-icon.is-open {
  transform: rotate(45deg);
}