/* ============================================================
   RAIVACO — Global Design System
   "Modern Corporate Soft UI"
   Palette: deep navy #17324F · corporate blue #005AAA · 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: #005AAA;
  --rv-white: #FFFFFF;
  --rv-gray: #E3E7EC;
  --rv-ink: #333333;

  --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);
}

/* ------------------------------------------------------------
   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);
}

#searchPanel,
#langMenu {
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--rv-glass-white);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  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: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: rgba(23, 50, 79, 0.08);
  box-shadow: var(--rv-shadow-panel);
}

/* 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, #searchPanel, #langMenu, #megaMenu { 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;
  }
}
