/* ══════════════════════════════════════════════════════════════
   Jayalath Hardware — custom styles
   Design tokens (from Figma Make design):
   dark #0C1852 · dark-deep #07103A · hero-ink #080E3A
   ink #1A1C5C · muted #64668A · brand #E85D04 · cream #F5F0EA
   cream-2 #EDE8E0 · whatsapp #25D366
   ══════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

/* ── Language-aware typography ─────────────────────────────────
   EN  : DM Serif Display (headings) + DM Sans (body)
   SI  : Noto Sans Sinhala everywhere (bold headings)          */

.body-font {
  font-family: 'DM Sans', sans-serif;
}

html[data-lang="si"] .body-font,
html[data-lang="si"] body {
  font-family: 'Noto Sans Sinhala', 'DM Sans', sans-serif;
}

.heading-font {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}

html[data-lang="si"] .heading-font {
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-weight: 700;
}

/* Sub-headings (feature card titles): serif in EN, semibold Sinhala in SI */
.heading-font-sub {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}

html[data-lang="si"] .heading-font-sub {
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-weight: 600;
}

/* Italic only in English (Sinhala script has no italics) */
.en-italic {
  font-style: italic;
}

html[data-lang="si"] .en-italic {
  font-style: normal;
}

/* Sinhala script carries stacked diacritics — needs taller line-height
   than the Latin design values so nothing clips or collides. */
html[data-lang="si"] h1,
html[data-lang="si"] h2,
html[data-lang="si"] blockquote {
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
}

/* Sinhala hero headline runs long — scale it down slightly on desktop */
@media (min-width: 768px) {
  html[data-lang="si"] main h1 {
    font-size: 3.1rem; /* down from md:text-6xl (3.75rem) */
  }
}

@media (min-width: 1024px) {
  html[data-lang="si"] main h1 {
    font-size: 3.6rem; /* down from lg:text-7xl (4.5rem) */
  }
}

/* "Why choose us" heading: let it use the full row width on desktop
   so the Sinhala version wraps to two lines instead of four */
@media (min-width: 768px) {
  html[data-lang="si"] #why-us h2 {
    max-width: none;
  }
}

/* ── Logo (white version via filter) ───────────────────────── */
.logo-white {
  filter: brightness(0) invert(1);
}

/* ── Header states ─────────────────────────────────────────── */
#site-header.scrolled {
  background-color: rgba(12, 24, 82, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Language toggle buttons */
.lang-btn {
  color: rgba(255, 255, 255, 0.6);
}

.lang-btn:hover {
  color: #fff;
}

.lang-btn.active {
  background: #fff;
  color: #0C1852;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(
    to top,
    #080E3A 30%,
    rgba(8, 14, 58, 0.6) 65%,
    rgba(8, 14, 58, 0.2) 100%
  );
}

.hero-enter {
  opacity: 0;
  transform: translateY(35px);
  animation: heroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-hint {
  opacity: 0;
  animation: fadeIn 1s ease 2s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ── Scroll-reveal (replaces framer-motion whileInView) ────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }

.reveal.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

/* Product chip pop */
.chip-reveal {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.chip-reveal.in-view {
  opacity: 1;
  transform: scale(1);
}

/* ── Story mini-quote card ─────────────────────────────────── */
.mini-quote-card {
  background: linear-gradient(140deg, #06103A 0%, #152068 100%);
}

/* ── Star icons ────────────────────────────────────────────── */
.star-fill {
  color: #E85D04;
  fill: #E85D04;
}

.star-fill svg,
svg.star-fill {
  fill: #E85D04;
  stroke: #E85D04;
}

/* ── Floating WhatsApp entrance ────────────────────────────── */
#wa-fab {
  opacity: 0;
  transform: scale(0);
  animation: fabIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s forwards;
  box-shadow: 0 25px 50px -12px rgba(20, 83, 45, 0.3);
}

@keyframes fabIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Mobile sticky bar ─────────────────────────────────────── */
.sticky-bar {
  background-color: rgba(12, 24, 82, 0.976);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Contact / inquiry form ────────────────────────────────── */
.form-field {
  width: 100%;
  border: 1px solid rgba(26, 28, 92, 0.15);
  border-radius: 0.75rem;
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  background: #FDFCFA;
  color: #1A1C5C;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field:focus {
  outline: none;
  border-color: #E85D04;
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.12);
}

.form-field::placeholder {
  color: #9A9BB5;
}

select.form-field {
  cursor: pointer;
}

/* ── Accessibility: reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-enter,
  .scroll-hint,
  #wa-fab {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .reveal,
  .chip-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-bounce {
    animation: none;
  }
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #E85D04;
  outline-offset: 3px;
  border-radius: 4px;
}