/* Site-specific CSS shared by all pages. Bootstrap first: only things Bootstrap 6 has no utility for live here. */

/* No Bootstrap equivalent: Bootstrap's yellow scale is hard-coded to oklch(88% 0.24 88deg) in the compiled CSS and this
   site has no Sass build to change it. The scale is re-declared here with Bootstrap's own mixing formulas, but based on the
   yellow of the flag in assets/hero.jpg (top-right corner of the flag). Everything using Bootstrap yellow/"warning"
   (theme-warning buttons and cards, badges, fg-warning, bg-muted-warning, border-warning) follows automatically. */
:root {
  --mfl-yellow: #e8bf0a;
  --bs-yellow-025: color-mix(in oklch, var(--bs-white) 94%, var(--mfl-yellow));
  --bs-yellow-050: color-mix(in oklch, var(--bs-white) 90%, var(--mfl-yellow));
  --bs-yellow-100: color-mix(in oklch, var(--bs-white) 80%, var(--mfl-yellow));
  --bs-yellow-200: color-mix(in oklch, var(--bs-white) 60%, var(--mfl-yellow));
  --bs-yellow-300: color-mix(in oklch, var(--bs-white) 40%, var(--mfl-yellow));
  --bs-yellow-400: color-mix(in oklch, var(--bs-white) 20%, var(--mfl-yellow));
  --bs-yellow-500: var(--mfl-yellow);
  --bs-yellow-600: color-mix(in oklch, var(--bs-black) 16%, var(--mfl-yellow));
  --bs-yellow-700: color-mix(in oklch, var(--bs-black) 32%, var(--mfl-yellow));
  --bs-yellow-800: color-mix(in oklch, var(--bs-black) 48%, var(--mfl-yellow));
  --bs-yellow-900: color-mix(in oklch, var(--bs-black) 64%, var(--mfl-yellow));
  --bs-yellow-950: color-mix(in oklch, var(--bs-black) 70%, var(--mfl-yellow));
  --bs-yellow-975: color-mix(in oklch, var(--bs-black) 76%, var(--mfl-yellow));
}


/* No Bootstrap equivalent: Bootstrap 6 has no scroll-reveal helper and no translate utility.
   Sections marked .reveal fade in and shift up when js/site.js adds .revealed as they scroll into view.
   The hidden state only applies when JavaScript is running (<html class="js">), so no-JS visitors,
   crawlers and print always see the content. */
.js .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js .reveal.revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media print {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* No Bootstrap equivalent: Bootstrap 6 has no countdown or 3D flip-card component.
   Flip-clock countdown (js/countdown.js builds the markup). Cards use the site yellow (--bs-yellow-500) with dark digits in both color modes,
   see "Brand yellow" above. */
.flip-clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.35rem, 2.2vw, 1rem);
}
.flip-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.flip-card {
  --flip-w: clamp(2.6rem, 12.5vw, 4.75rem);
  --flip-h: calc(var(--flip-w) * 1.25);
  position: relative;
  width: var(--flip-w);
  height: var(--flip-h);
  perspective: 22rem;
  font-size: calc(var(--flip-w) * 0.8);
  font-weight: 700;
  line-height: var(--flip-h);
  font-variant-numeric: tabular-nums;
}
.flip-card::after { /* the hinge line across the middle */
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.4);
}
.flip-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: var(--bs-yellow-500); /* the site yellow */
  color: var(--bs-gray-900); /* dark digits on yellow in both light and dark mode */
  text-align: center;
}
.flip-half > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--flip-h);
}
.flip-upper, .flip-leaf-front { top: 0; border-radius: 0.5rem 0.5rem 0 0; }
.flip-upper > span, .flip-leaf-front > span { top: 0; }
.flip-lower, .flip-leaf-back { bottom: 0; border-radius: 0 0 0.5rem 0.5rem; }
.flip-lower > span, .flip-leaf-back > span { bottom: 0; }
.flip-leaf-front, .flip-leaf-back { visibility: hidden; backface-visibility: hidden; }
.flip-leaf-front { transform-origin: bottom; z-index: 4; }
.flip-leaf-back { transform-origin: top; z-index: 3; }
.flip-card.flipping .flip-leaf-front {
  visibility: visible;
  animation: flip-front 0.3s ease-in forwards;
}
.flip-card.flipping .flip-leaf-back {
  visibility: visible;
  animation: flip-back 0.3s ease-out 0.3s both;
}
@keyframes flip-front { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flip-back { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.flip-label {
  font-size: clamp(0.55rem, 2.6vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .flip-card.flipping .flip-leaf-front,
  .flip-card.flipping .flip-leaf-back { animation: none; visibility: hidden; }
}

/* No Bootstrap equivalent: Bootstrap's fg-warning is a darker/lighter shade of yellow chosen for text contrast.
   The footer social icons use the exact site yellow (--bs-yellow-500 = --mfl-yellow) in both color modes. */
.social-link {
  color: var(--bs-yellow-500);
}

/* No Bootstrap equivalent: Bootstrap 6 has no shrink-on-scroll navbar. js/site.js adds .is-shrunk to the navbar once the page
   is scrolled down. The bar goes from 65px to about 49px (75% of its height): half the vertical padding and a smaller logo,
   and its background becomes 10% transparent. The medium drop shadow is Bootstrap's own .shadow class, added by the script as soon as
   scrolling starts; the transition above just fades it in. */
.navbar {
  transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.navbar-brand svg {
  transition: width 0.25s ease, height 0.25s ease;
}
.navbar.is-shrunk {
  --bs-navbar-padding-y: 0.25rem;
  --bs-navbar-min-height: 0; /* Bootstrap floors the bar at 3.5rem (56px) */
  background-color: color-mix(in srgb, var(--bs-bg-2) 90%, transparent); /* 10% transparent (beats .bg-2 on specificity) */
}
.navbar.is-shrunk .navbar-brand svg {
  width: 28px;
  height: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .navbar, .navbar-brand svg { transition: none; }
}

/* No Bootstrap equivalent: Bootstrap 6 only has a JS-driven .fade class (0.15s), no fade-in-on-load animation.
   The hero text fades in and shifts up slightly when the page renders (plain CSS, so it still shows if scripts fail). */
.hero-text {
  animation: hero-fade-in 1.4s ease-out 0.25s backwards; /* backwards: after it ends, normal styles apply (no leftover transform) */
}
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-text { animation: none; }
}