/* Taqelah Testing Conference, small overrides on top of Tailwind (CDN).
   Keep this file minimal: prefer Tailwind utility classes in the HTML. */

html {
  scroll-behavior: smooth;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Nicer tabular countdown / price digits. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Prevent any accidental horizontal scroll on small screens. */
body {
  overflow-x: hidden;
}

/* Hero background: a dark brand gradient that a real photo can sit on top of.
   Drop assets/img/hero.jpg to use a photo; if it's missing, the gradient
   layer alone still renders a clean dark hero. */
.hero-bg {
  /* Fallback colour shows through the translucent overlays if the photo is missing. */
  background-color: #0B0B0B;
  background-image:
    /* centered vignette: darkens behind the centered text, keeps photo edges bright */
    radial-gradient(ellipse 100% 80% at 50% 42%, rgba(11,11,11,0.62) 0%, rgba(11,11,11,0.15) 70%),
    /* dark scrim for overall text legibility (translucent) */
    linear-gradient(180deg, rgba(11,11,11,0.35) 0%, rgba(11,11,11,0.50) 55%, rgba(11,11,11,0.90) 100%),
    /* subtle brand-red tint (translucent) */
    linear-gradient(120deg, rgba(139,4,0,0.35) 0%, rgba(11,11,11,0) 55%),
    /* the actual photo */
    url('../img/hero.jpg');
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Extra contrast for the centered hero copy without over-darkening the image. */
.hero-bg h1,
.hero-bg p {
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}