/* ============================================================
   RAIVACO — Global Design System
   "Modern Corporate Soft UI"
   Palette: deep navy #17324F · corporate blue #00559F (AAA 7.5:1) · white · metallic gray
   Load this file LAST in <head> so it wins the cascade over
   per-page <style> blocks.
   ============================================================ */

:root {
  --rv-navy: #17324F;
  --rv-accent: #00559F; /* 7.5:1 on white — WCAG AAA (was #005AAA @ 6.9:1) */
  --rv-white: #FFFFFF;
  --rv-gray: #E3E7EC;
  --rv-ink: #1A1A1A;
  --rv-muted: #394B5C;

  --rv-radius-sm: 8px;
  --rv-radius: 12px;
  --rv-radius-lg: 16px;
  --rv-radius-xl: 20px;

  --rv-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
  --rv-shadow-lift: 0 22px 48px rgba(23, 50, 79, 0.14);
  --rv-shadow-panel: 0 20px 50px rgba(23, 50, 79, 0.10);

  --rv-glass-navy: rgba(23, 50, 79, 0.55);
  --rv-glass-white: rgba(255, 255, 255, 0.78);

  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   1. CARDS — soft radius, resting soft shadow, hover lift-up
   (replaces the old brutalist hard-offset shadows)
   ------------------------------------------------------------ */
.brutal-hover,
.brutal-hover-light {
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.35s var(--rv-ease), box-shadow 0.35s var(--rv-ease);
}

div.brutal-hover,
article.brutal-hover {
  overflow: hidden; /* clip card imagery to the rounded corners */
}

.brutal-hover:hover,
html[dir="rtl"] .brutal-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--rv-shadow-lift);
}

.brutal-hover-light:hover,
html[dir="rtl"] .brutal-hover-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30);
}

/* Product tiles: same lift language */
.product-tile {
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-soft);
  transition: opacity 0.5s ease, transform 0.5s var(--rv-ease),
              box-shadow 0.35s var(--rv-ease);
}
.product-tile.revealed { transition-duration: 0.35s, 0.35s, 0.35s; }
.product-tile:hover,
html[dir="rtl"] .product-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--rv-shadow-lift);
}

/* Glassmorphism label overlaying product-tile imagery */
span.product-tile-label {
  background-color: var(--rv-glass-navy);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

/* ------------------------------------------------------------
   2. GENERIC BORDERED BOXES — round every flat blocky container
   (skips single-edge borders such as table rows and dividers)
   ------------------------------------------------------------ */
div[class*="border-line"]:not([class*="border-t"]):not([class*="border-b"]):not([class*="border-s"]):not([class*="border-e"]),
a[class*="border-line"]:not([class*="border-t"]):not([class*="border-b"]):not([class*="border-s"]):not([class*="border-e"]) {
  border-radius: var(--rv-radius);
  border-color: var(--rv-gray);
}

img[class*="border-line"],
iframe {
  border-radius: var(--rv-radius);
}

/* Bordered image wrappers (gallery tiles, about visual, card media) */
div[class*="overflow-hidden"][class*="border-line"] {
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-soft);
}

/* Footer social icon squares (bordered white on navy) */
a[class*="border-white"] { border-radius: 10px; }

/* Category header bands (Minerals / Chemicals group headings) */
a[class*="bg-navy"][class*="border-b-4"] { border-radius: var(--rv-radius); }

/* Floating content panel (contact page pull-up card) */
div[class*="-mt-12"][class*="border-line"] {
  border-radius: var(--rv-radius-lg);
  box-shadow: var(--rv-shadow-panel);
}

/* ------------------------------------------------------------
   3. BUTTONS & FORMS
   ------------------------------------------------------------ */
button { border-radius: 10px; }

.btn-sweep { border-radius: 10px; }
.btn-sweep.bg-accent,
a.btn-sweep {
  box-shadow: 0 8px 20px rgba(0, 90, 170, 0.22);
}

.mega-box { border-radius: 10px; }

input, select, textarea {
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--rv-accent);
  box-shadow: 0 0 0 4px rgba(0, 90, 170, 0.12);
}

/* Accessible content, conversion actions, and product data. */
body { color: var(--rv-ink); }
.bg-white, .spec-texture { color: var(--rv-ink); }
.bg-white .font-light, .spec-texture .font-light { font-weight: 400; }
.text-ink { color: var(--rv-ink) !important; }
.text-navy { color: var(--rv-navy) !important; }
.text-accent { color: #00559F !important; }

a.btn-sweep.bg-accent,
button.btn-sweep.bg-accent,
.btn-sweep.border-accent.bg-accent {
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-color: #004985 !important;
  background-color: #00559F !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(0, 66, 122, 0.32) !important;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .2s var(--rv-ease), background-color .2s ease, box-shadow .2s var(--rv-ease);
}
a.btn-sweep.bg-accent:hover,
button.btn-sweep.bg-accent:hover,
.btn-sweep.border-accent.bg-accent:hover {
  background-color: #004985 !important;
  box-shadow: 0 14px 28px rgba(0, 66, 122, 0.38) !important;
  transform: translateY(-2px);
}
a.btn-sweep.bg-accent:focus-visible,
button.btn-sweep.bg-accent:focus-visible { outline: 3px solid #F7B500; outline-offset: 3px; }

table { width: 100%; border-collapse: collapse; color: var(--rv-ink); }
th, td { padding: .875rem 1rem; border: 1px solid #B8C4CF; text-align: start; vertical-align: top; }
th { background: #E8F0F7; color: #17324F; font-weight: 700; }
tr:nth-child(even) td { background: #F8FAFC; }
address { font-style: normal; }

@media (max-width: 767px) {
  /* Header: show the slogan side-by-side with the logo on mobile,
     both scaled down proportionally to fit the header space */
  header a.flex.shrink-0 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  header a.flex.shrink-0 > img[src*="logo-raiva"],
  header a.flex.shrink-0 > .hdr-logo-wrap,
  header a.flex.shrink-0 > .hdr-logo-wrap img {
    height: 40px !important;
    width: auto;
  }
  header a.flex.shrink-0 > img[src*="Slogan"] {
    display: block !important;
    height: 28px !important;
    width: auto;
  }
  header .hdr-divider {
    display: flex !important;
    height: 28px !important;
  }
  header .hdr-divider .hdr-logo-wrap,
  header .hdr-divider img {
    height: 28px !important;
    width: auto;
  }

  section:not(#hero-scroll) { padding-block: 44px; }
  section > .mx-auto { padding-inline: 18px !important; }
  #hero-scroll { min-height: 680px; height: auto; }
  #hero-scroll > .mx-auto { padding-inline: 20px !important; padding-block: 120px 72px; }
  .hero-stage-copy { min-height: 390px; }
  .hero-stage-text h1, .hero-stage-text h2 { font-size: clamp(2rem, 9vw, 2.75rem) !important; line-height: 1.12; }
  .hero-stage-text p { font-size: 1rem !important; line-height: 1.65; color: #FFFFFF !important; }
  .grid[class*="grid-cols-2"], .grid[class*="grid-cols-3"], .grid[class*="grid-cols-4"] { grid-template-columns: minmax(0, 1fr) !important; }
  .flex.items-center.gap-2 { align-items: flex-start; }
  a.btn-sweep, button.btn-sweep { width: 100%; min-height: 48px; padding-inline: 1.25rem !important; }
  .product-tile { min-height: 180px; }
  table, thead, tbody, tr, th, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { margin-bottom: 1rem; border: 1px solid #B8C4CF; }
  td { border-width: 0 0 1px; }
  td:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------
   4. GLASSMORPHISM — header, dropdown panels, banner overlays
   ------------------------------------------------------------ */
header.sticky {
  background-color: var(--rv-glass-white);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(23, 50, 79, 0.08);
}

#langMenu {
  border-radius: 14px;
  overflow: hidden;
  background-color: #FFFFFF;
  border-color: rgba(23, 50, 79, 0.10);
  box-shadow: var(--rv-shadow-panel);
}

#megaMenu {
  border-radius: 0 0 var(--rv-radius-xl) var(--rv-radius-xl);
  background-color: #FFFFFF;
  border-color: rgba(23, 50, 79, 0.08);
  box-shadow: var(--rv-shadow-panel);
}

/* Mega-menu category headings (Minerals / Chemicals) — larger and centered */
#megaMenu p[data-i18n="mega.minerals"],
#megaMenu p[data-i18n="mega.chemicals"] {
  font-size: 1.375rem;
  line-height: 1.3;
  text-align: center;
}

/* Mega-menu product boxes — distinct, well-defined cards */
#megaMenu .mega-box {
  background-color: #FFFFFF;
  border: 1px solid #9FB0C2;
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.10);
}
#megaMenu .mega-box:hover {
  border-color: var(--rv-accent);
  background-color: #F2F7FB;
}

/* Frosted navy scrim behind page-banner headline text */
div.absolute[class*="bg-navy/"] {
  background-color: rgba(23, 50, 79, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* No backdrop-filter support → solid fallbacks keep text readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.sticky { background-color: rgba(255, 255, 255, 0.97); }
  span.product-tile-label { background-color: rgba(23, 50, 79, 0.90); }
  div.absolute[class*="bg-navy/"] { background-color: rgba(23, 50, 79, 0.80); }
}

/* ------------------------------------------------------------
   5. ACCESSIBILITY — respect reduced-motion preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .brutal-hover:hover,
  .brutal-hover-light:hover,
  .product-tile:hover,
  html[dir="rtl"] .brutal-hover:hover,
  html[dir="rtl"] .brutal-hover-light:hover,
  html[dir="rtl"] .product-tile:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------
   6. HERO — benefit-driven headlines wrap normally
   (the old single-line "Processing & Quality Control" nowrap clamp
   was retired with the conversion-copy rewrite)
   ------------------------------------------------------------ */

/* Product tile hover overlay for injected cards (search results page) */
.product-tile-overlay { background: rgba(23, 50, 79, 0); transition: background .3s ease; }
.product-tile:hover .product-tile-overlay { background: rgba(23, 50, 79, 0.12); }

/* ------------------------------------------------------------
   7. ACCESSIBILITY — WCAG 2.2
   ------------------------------------------------------------ */

/* 7a. Skip link (WCAG 2.4.1 Bypass Blocks) — first focusable element,
   visually hidden until keyboard focus brings it on screen */
.skip-link {
  position: fixed;
  top: 1rem;
  inset-inline-start: 1rem;
  z-index: 100; /* above fixed header (z-40) and WhatsApp button (z-50) */
  padding: 0.875rem 1.5rem;
  background-color: var(--rv-navy);
  color: var(--rv-white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 10px;
  box-shadow: var(--rv-shadow-lift);
  transform: translateY(calc(-100% - 2rem));
}
.skip-link:focus {
  transform: none;
  outline: 3px solid #F7B500;
  outline-offset: 3px;
}
main#main-content:focus { outline: none; }

/* 7b. Target size (WCAG 2.5.5 AAA — 44×44px minimum) */
header nav a,
header nav button,
header nav summary,
#megaBtn, #langBtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
header a[aria-label],
#mobileMenuBtn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
header a.flex.shrink-0 { min-height: 44px; } /* logo link: 40px-tall image on mobile */
#langMenu button { min-height: 44px; }
#megaMenu .mega-box { min-height: 44px; }
#mobileMenu nav > a,
#mobileMenu summary,
#mobileMenu select { display: flex; align-items: center; min-height: 44px; }
#mobileMenu details a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-rail-item { min-height: 44px; }
footer ul a,
footer p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Footer social icon squares: 40px → 44px */
footer a[aria-label].flex.h-10.w-10 { height: 2.75rem; width: 2.75rem; }
/* Underlined text links: expand the hit area without moving the underline */
.link-underline { position: relative; }
.link-underline::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* 7c. Contrast (WCAG 1.4.3 AA) — mega-menu product links were #2882C0
   (4.17:1 on white, fails AA for 14px bold); corporate blue passes 6.9:1 */
#megaMenu a.mega-box { color: var(--rv-accent); }
#megaMenu a.mega-box:hover { color: var(--rv-accent); }
/* Hero rail labels over video: white @45% opacity fails — raise resting state */
.hero-rail-item { color: rgba(255, 255, 255, 0.85); }
.hero-rail-item .rail-bar { background: rgba(255, 255, 255, 0.55); }

/* 7d. Typography (WCAG 1.4.8 / 1.4.12) — readable paragraph leading,
   relative units so it scales with user font-size settings */
p { line-height: 1.6; }
p[class*="text-"] { line-height: 1.6; } /* beats Tailwind text-size line-heights */

/* ------------------------------------------------------------
   8. AAA CONTRAST + PRIMARY-CTA PROMINENCE + CONSISTENCY
   ------------------------------------------------------------ */

/* 8a. Retire every hard-coded #005AAA (6.9:1) still set by per-page
   <style> blocks — this file loads last, so these overrides win */
:focus-visible { outline-color: #00559F; }
.link-underline { border-block-end-color: #00559F; }
.link-underline:hover { color: #00559F; }
.btn-sweep::after { background: #00559F; }

/* 8b. Primary CTA ("Get a Quote") — the most visually prominent
   element: filled AAA blue, heavier padding, strongest elevation */
a.btn-sweep.bg-accent,
button.btn-sweep.bg-accent,
.btn-sweep.border-accent.bg-accent {
  padding-inline: 1.625rem;
  font-size: 0.9375rem;
}
main a.btn-sweep.bg-accent,
main .btn-sweep.border-accent.bg-accent {
  box-shadow: 0 14px 30px rgba(0, 66, 122, 0.38) !important;
}

/* 8c. Unified button system — every CTA shares height, radius,
   weight, and focus treatment for a consistent, trustworthy feel */
a.btn-sweep, button.btn-sweep {
  min-height: 48px;
  border-radius: 10px;
  font-weight: 700;
}
a.btn-sweep:focus-visible,
button.btn-sweep:focus-visible { outline: 3px solid #F7B500; outline-offset: 3px; }

/* 8d. Form controls join the 44px target-size floor (WCAG 2.5.5) */
input:not([type="checkbox"]):not([type="radio"]),
select { min-height: 44px; }
textarea { min-height: 88px; }

/* ------------------------------------------------------------
   9. HEADER NAV — single-line guarantee in every locale
   ------------------------------------------------------------ */

/* Nav items, header controls, and every CTA never wrap to two lines */
header nav a,
header nav button,
header nav summary,
.hdr-link,
a.btn-sweep,
button.btn-sweep { white-space: nowrap; }

/* CTAs size to their (single-line) content and center it */
a.btn-sweep,
button.btn-sweep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}
@media (max-width: 767px) {
  a.btn-sweep, button.btn-sweep { width: 100%; } /* keep full-width mobile CTAs */
}

/* Compact header band (1024–1400px): drop the decorative slogan divider,
   scale the logo, tighten gaps — longest locales (RU/TR/AR) keep one row.
   Attribute selectors outrank the Tailwind gap-8/text-sm utilities. */
@media (min-width: 1024px) and (max-width: 1400px) {
  header > div.mx-auto { gap: 0.5rem; padding-inline: 1rem; }
  header .hdr-divider { display: none; }
  header nav[class*="gap-8"] { gap: 0.75rem; }
  header nav[class*="text-sm"] { font-size: 0.75rem; }
  header a.flex.shrink-0 .hdr-logo-wrap,
  header a.flex.shrink-0 .hdr-logo-wrap img,
  header a.flex.shrink-0 > img { height: 56px; width: auto; }
  a.btn-sweep.bg-accent,
  .btn-sweep.border-accent.bg-accent { padding-inline: 0.875rem; font-size: 0.875rem; }
}
/* Wide screens: the 1400px container still can't fit the longest locales
   (RU needs ~1490px in the stock design) — moderate permanent compaction */
@media (min-width: 1401px) {
  header nav[class*="gap-8"] { gap: 1.5rem; }
  header nav[class*="text-sm"] { font-size: 0.8125rem; }
  header a.flex.shrink-0 .hdr-logo-wrap,
  header a.flex.shrink-0 .hdr-logo-wrap img,
  header a.flex.shrink-0 > img { height: 64px; width: auto; }
}

/* ============================================================
   Utility back-fill — the site ships a purged Tailwind build, so
   utilities not used on the original pages are missing. These
   fallbacks restore the ones used by the product sub-pages
   (product-lime*, and any future product pages). Safe: they either
   match Tailwind's own output or apply only where those classes appear.
   ============================================================ */
.flex-1 { flex: 1 1 0%; }
.self-start { align-self: flex-start; }
.items-start { align-items: flex-start; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.min-w-\[720px\] { min-width: 720px; }
.whitespace-nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.h-44 { height: 11rem; }
.w-fit { width: fit-content; }
.gap-px { gap: 1px; }
.bg-line { background-color: var(--rv-gray); }
.border-2 { border-width: 2px; }
.left-0 { left: 0; }
.bottom-0 { bottom: 0; }
.top-0 { top: 0; }
.m-0 { margin: 0; }
.m-3 { margin: 0.75rem; }
.whitespace-nowrap { white-space: nowrap; }
.text-\[11px\] { font-size: 11px; line-height: 1rem; }
.text-\[10px\] { font-size: 10px; line-height: 0.9rem; }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
@media (min-width: 640px) {
  .sm\:h-52 { height: 13rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1\.4fr_1fr\] { grid-template-columns: 1.4fr 1fr; }
  .lg\:border-s { border-inline-start-width: 1px; }
  .lg\:border-t-0 { border-top-width: 0; }
}

/* Horizontal spec-card rail: cards sit side-by-side and share width when
   they fit, and become a horizontal scroll strip when they don't (any number
   of grades). Used by the product sub-pages' grade cards. */
.grade-rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 8px 2px 30px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.grade-rail > .grade-card {
  flex: 1 0 15rem;
  min-width: 15rem;
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .grade-rail > .grade-card { flex-basis: 84%; min-width: 84%; }
}
/* thin, on-brand scrollbar for the rail */
.grade-rail::-webkit-scrollbar { height: 8px; }
.grade-rail::-webkit-scrollbar-thumb { background: var(--rv-gray); border-radius: 4px; }
.grade-rail::-webkit-scrollbar-thumb:hover { background: var(--rv-muted); }

/* ------------------------------------------------------------
   PRODUCT SUB-PAGE COMPONENTS (lime family & future products)
   Secondary accent, geometric banner pattern, grade tabs,
   application icon-cards, elevated hero imagery.
   ------------------------------------------------------------ */
:root {
  --rv-accent2: #0E9F8A;       /* teal — secondary accent for key CTAs */
  --rv-accent2-dark: #0B8071;
}

/* Secondary-accent CTA */
.btn-accent2 {
  background-color: var(--rv-accent2) !important;
  border-color: var(--rv-accent2) !important;
  color: #fff !important;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(14, 159, 138, 0.28);
  transition: background-color 0.25s ease, transform 0.25s var(--rv-ease), box-shadow 0.25s var(--rv-ease);
}
.btn-accent2:hover {
  background-color: var(--rv-accent2-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 159, 138, 0.36);
}

/* Subtle geometric pattern overlay for dark (navy) banners */
.bg-geo { position: relative; }
.bg-geo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 26px);
}
.bg-geo > * { position: relative; }

/* Elevated hero product imagery */
.img-elevated { box-shadow: var(--rv-shadow-panel); }

/* Hero secondary (outline) button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(23, 50, 79, 0.25);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--rv-ease);
}
.btn-outline:hover {
  border-color: var(--rv-navy);
  background-color: #F7F8FA;
  transform: translateY(-2px);
}

/* --- Grade tab system --- */
.grade-tabs .tab-list { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--rv-gray);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: start;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.25s var(--rv-ease), box-shadow 0.25s var(--rv-ease), border-color 0.25s, background-color 0.25s;
}
.tab-btn:hover { border-color: var(--rv-accent); transform: translateY(-2px); }
.tab-btn .tab-kicker { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--rv-muted); }
.tab-btn .tab-title { font-weight: 700; font-size: 0.95rem; color: var(--rv-navy); line-height: 1.15; }
.tab-btn.active { background: var(--rv-navy); border-color: var(--rv-navy); }
.tab-btn.active .tab-kicker { color: #9EC8EE; }
.tab-btn.active .tab-title { color: #fff; }
/* featured tab: distinct badge + subtle glow */
.tab-btn.featured { border-color: rgba(0, 90, 170, 0.55); box-shadow: 0 0 0 3px rgba(0, 90, 170, 0.10), var(--rv-shadow-soft); }
.tab-btn.featured.active { background: var(--rv-accent); border-color: var(--rv-accent); box-shadow: 0 0 0 4px rgba(0, 90, 170, 0.16), 0 12px 26px rgba(0, 90, 170, 0.28); }
.tab-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--rv-accent); color: #fff; padding: 2px 7px; border-radius: 6px;
}
.tab-btn.active .tab-badge { background: #fff; color: var(--rv-accent); }

.tab-panel {
  margin-top: 1.25rem;
  border: 1px solid var(--rv-gray);
  border-radius: var(--rv-radius);
  background: #fff;
  box-shadow: var(--rv-shadow-soft);
  overflow: hidden;
}
.tab-panel.featured-panel {
  border-color: rgba(0, 90, 170, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 90, 170, 0.10), var(--rv-shadow-panel);
}
.tab-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 1.1rem 1.5rem;
  background: var(--rv-navy); color: #fff;
}
.featured-panel .tab-panel-head { background: var(--rv-accent); }
.spec-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rv-gray); }
@media (min-width: 700px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.5rem; background: #fff; }
.spec-row dt { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--rv-navy); }
.spec-row dd { font-family: 'IBM Plex Mono', monospace; font-size: 0.9375rem; font-weight: 500; color: var(--rv-ink); text-align: end; }
.spec-row.spec-highlight { background: rgba(0, 90, 170, 0.06); }
.spec-row.spec-highlight dt, .spec-row.spec-highlight dd { color: var(--rv-accent); }

/* --- Application icon-cards --- */
.app-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--rv-gray);
  border-radius: var(--rv-radius);
  background: #fff;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease), border-color 0.3s;
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow-lift); border-color: rgba(0, 90, 170, 0.35); }
.app-icon {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: rgba(0, 90, 170, 0.08); color: var(--rv-accent);
  transition: transform 0.3s var(--rv-ease), background-color 0.3s;
}
.app-card:hover .app-icon { transform: scale(1.1) rotate(-4deg); background: rgba(0, 90, 170, 0.14); }
@media (prefers-reduced-motion: reduce) {
  .tab-btn:hover, .app-card:hover, .app-card:hover .app-icon, .btn-accent2:hover, .btn-outline:hover { transform: none; }
}

/* --- Textured hero with legibility scrim ---------------------------------
   The lime-lump photograph is very light, so navy body copy needs a strong
   white scrim to stay well above WCAG AA. The scrim is heaviest over the
   text column and thins toward the image side, keeping the industrial
   texture visible without costing contrast. */
.hero-texture {
  position: relative;
  background-color: #EDEFF2;
  background-image: url('assets/images/lime-hero-texture-sm.webp');
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  .hero-texture { background-image: url('assets/images/lime-hero-texture.webp'); }
}
.hero-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(2.5px) saturate(0.92);
  -webkit-backdrop-filter: blur(2.5px) saturate(0.92);
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.95) 38%,
    rgba(255,255,255,0.78) 62%,
    rgba(255,255,255,0.58) 100%
  );
}
html[dir="rtl"] .hero-texture::before {
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.95) 38%,
    rgba(255,255,255,0.78) 62%,
    rgba(255,255,255,0.58) 100%
  );
}
/* Below md the copy spans the full width, so the scrim goes near-solid. */
@media (max-width: 767px) {
  .hero-texture::before { background: rgba(255,255,255,0.94); }
}
.hero-texture > * { position: relative; z-index: 1; }

/* Formula chip — mono formula + plain-language name */
.formula-chip {
  display: inline-flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--rv-gray); border-radius: 10px;
  background: rgba(255,255,255,0.92);
  padding: 0.5rem 1rem;
  box-shadow: var(--rv-shadow-soft);
}

/* Key-figures trust bar */
.figure-strip { display: grid; gap: 1px; background: var(--rv-gray); border: 1px solid var(--rv-gray); border-radius: var(--rv-radius); overflow: hidden; }
.figure-strip > div { background: #fff; padding: 1.15rem 1.25rem; }
.figure-strip .fig-value { font-family: 'IBM Plex Mono', monospace; font-size: 1.15rem; font-weight: 600; color: var(--rv-navy); }
.figure-strip .fig-label { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rv-muted); margin-top: 2px; }

/* TDS / document download card */
.doc-card {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--rv-gray); border-radius: var(--rv-radius);
  background: #fff; padding: 1.15rem 1.35rem;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease), border-color 0.3s;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--rv-shadow-lift); border-color: rgba(0,90,170,0.4); }
.doc-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(14,159,138,0.10); color: var(--rv-accent2); }

/* Trade-terms definition rows */
.trade-grid { display: grid; gap: 1px; background: var(--rv-gray); border: 1px solid var(--rv-gray); border-radius: var(--rv-radius); overflow: hidden; }
.trade-grid > div { background: #fff; padding: 1.25rem 1.4rem; }
.trade-grid dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rv-accent); }
.trade-grid dd { margin-top: 0.4rem; color: var(--rv-ink); font-weight: 300; }

/* FAQ accordion */
.faq-item { border: 1px solid var(--rv-gray); border-radius: var(--rv-radius); background: #fff; box-shadow: var(--rv-shadow-soft); overflow: hidden; }
.faq-item + .faq-item { margin-top: 0.75rem; }
.faq-item > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 600; color: var(--rv-navy);
  transition: background-color 0.2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: #F7F8FA; }
.faq-item > summary::after {
  content: '+';
  flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 1.35rem; line-height: 1;
  color: var(--rv-accent); transition: transform 0.25s var(--rv-ease);
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 1.4rem 1.25rem; color: var(--rv-ink); font-weight: 300; line-height: 1.7; }

/* Grade (datasheet) cards adopt the site's soft-UI language — rounded
   corners, soft resting shadow, lift on hover — with the coloured header
   clipped to the card and larger, clearer analysis text. */
.grade-card {
  border-radius: var(--rv-radius);
  overflow: hidden;
  box-shadow: var(--rv-shadow-soft);
  transition: transform 0.35s var(--rv-ease), box-shadow 0.35s var(--rv-ease);
}
.grade-card:hover,
.grade-card.is-featured:hover {
  transform: translateY(-5px);
  box-shadow: var(--rv-shadow-lift);
}
.grade-card dl > div { padding-top: 0.72rem; padding-bottom: 0.72rem; }
.grade-card dt { font-size: 0.8125rem; line-height: 1.2; letter-spacing: 0.01em; }
.grade-card dd { font-size: 0.9375rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .grade-card:hover, .grade-card.is-featured:hover { transform: none; }
}

/* Utilities the article bodies use that are absent from the trimmed
   tailwind.css build. Tailwind's preflight zeroes list markers and padding on
   every ul/ol, so without .list-disc and .ps-5 the bullet lists in the blog
   posts rendered as unstyled run-on paragraphs. .space-y-2/3/4 ship in the
   build but .space-y-6 does not. Definitions match Tailwind's own output. */
.list-disc { list-style-type: disc; }
.ps-5 { padding-inline-start: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
