/* ============================================================
   Bitcoin Friesland - visual polish layer
   Additive only. Loads AFTER styles.css. Brand colors:
   friesland-blue #0066cc, bitcoin-orange #f97316, friesland-red #ea384c
   Safe to remove this one file + its <link> to fully revert.
   ============================================================ */

:root {
  --bf-blue: #0066cc;
  --bf-blue-dark: #0a4f9e;
  --bf-orange: #f97316;
  --bf-red: #ea384c;
  --bf-ink: #0f172a;
  --bf-ring: 0 0 0 3px rgba(0, 102, 204, .35);
}

/* ---------- Typography ---------- */
html, body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { letter-spacing: -0.022em; }
h1 { line-height: 1.08; }
html { scroll-behavior: smooth; }
::selection { background: var(--bf-blue); color: #fff; }

/* ---------- Softer, modern shadow system (applied site-wide) ---------- */
.shadow-sm { box-shadow: 0 1px 2px rgba(2,6,23,.05), 0 1px 3px rgba(2,6,23,.05) !important; }
.shadow-md { box-shadow: 0 6px 18px -8px rgba(2,6,23,.14), 0 2px 6px -3px rgba(2,6,23,.08) !important; }
.shadow-lg { box-shadow: 0 12px 32px -14px rgba(2,6,23,.16), 0 3px 8px -4px rgba(2,6,23,.08) !important; }
.shadow-xl { box-shadow: 0 26px 56px -20px rgba(2,6,23,.24), 0 6px 14px -8px rgba(2,6,23,.10) !important; }

/* slightly larger, more contemporary radii */
.rounded-lg { border-radius: 0.7rem; }
.rounded-xl { border-radius: 1rem; }

/* ---------- Sticky nav: glassmorphism ---------- */
nav.sticky {
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
nav.sticky.shadow-md {
  box-shadow: 0 6px 24px -12px rgba(2, 6, 23, 0.18) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
/* animated gradient underline on text nav links (skips the bordered CTA buttons) */
.nav-menu a[href]:not([class*="border"]) { position: relative; }
.nav-menu a[href]:not([class*="border"])::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bf-blue), var(--bf-orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-menu a[href]:not([class*="border"]):hover::after { transform: scaleX(1); }

/* language selector pill */
[onclick="toggleLanguageDropdown()"] {
  border-radius: 9999px !important;
  transition: background-color .2s ease, box-shadow .2s ease;
}
[onclick="toggleLanguageDropdown()"]:hover {
  background-color: #f3f4f6;
  box-shadow: 0 1px 4px rgba(2,6,23,.10);
}
#language-dropdown {
  border-radius: 14px;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 16px 44px -16px rgba(2,6,23,.32) !important;
  overflow: hidden;
}
#language-dropdown a { transition: background-color .15s ease; }

/* ---------- Hero: richer on-brand mesh gradient ---------- */
.bg-gradient-to-br.from-white.to-gray-50 {
  background:
    radial-gradient(1100px 480px at 82% -12%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(900px 460px at -5% 0%, rgba(0,102,204,.13), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
}

/* ---------- Button system ---------- */
/* shared polish for any button-like link/button */
a[class*="rounded-lg"][class*="font-medium"],
button[class*="rounded-lg"][class*="font-medium"] {
  border-radius: 0.8rem !important;
  font-weight: 600;
  letter-spacing: .005em;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease,
              background-color .2s ease, color .2s ease, filter .2s ease;
  will-change: transform;
}
/* solid primary buttons */
a.bg-friesland-blue, button.bg-friesland-blue {
  box-shadow: 0 10px 24px -10px rgba(0,102,204,.55) !important;
}
a.bg-bitcoin-orange, button.bg-bitcoin-orange {
  box-shadow: 0 10px 24px -10px rgba(249,115,22,.55) !important;
}
a.bg-friesland-blue:hover, button.bg-friesland-blue:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 16px 30px -12px rgba(0,102,204,.6) !important;
}
a.bg-bitcoin-orange:hover, button.bg-bitcoin-orange:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 16px 30px -12px rgba(249,115,22,.6) !important;
}
/* outline buttons (Consumenten / Bedrijven) */
a.border-friesland-blue, a.border-bitcoin-orange {
  border-width: 1.5px;
  border-radius: 0.7rem;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
a.border-friesland-blue:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(0,102,204,.5); }
a.border-bitcoin-orange:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(249,115,22,.5); }

/* dark "view all" button */
a.bg-gray-800 { border-radius: 0.8rem !important; }
a.bg-gray-800:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(2,6,23,.4); }

/* ---------- Cards ---------- */
/* tame the heavy glow behind the "why join" cards */
.blur.opacity-25 { opacity: .16 !important; }
.group:hover .blur.opacity-25,
.blur.group-hover\:opacity-40 { opacity: .28 !important; }

/* smoother card hover everywhere */
.rounded-xl.shadow-lg, .rounded-xl.shadow-md, .rounded-xl.shadow-sm {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}

/* ---------- Telegram CTA: on-brand blue gradient ---------- */
.telegram-cta {
  background: linear-gradient(135deg, var(--bf-blue) 0%, var(--bf-blue-dark) 100%) !important;
}

/* ---------- Tables (business map) ---------- */
table#businessTable thead th { letter-spacing: .01em; }
table#businessTable tbody tr { transition: background-color .15s ease; }

/* ---------- Focus states (accessibility + polish) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
[onclick]:focus-visible {
  outline: none;
  box-shadow: var(--bf-ring);
  border-radius: 8px;
}

/* ---------- Footer: subtle brand accent line on top ---------- */
footer { position: relative; }
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bf-blue), var(--bf-orange));
}

/* ---------- Blog list cards: gentle image zoom on hover (cards only, not the article body) ---------- */
article[class*="border"] { overflow: hidden; }
article[class*="border"] img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
article[class*="border"]:hover img { transform: scale(1.04); }

/* ---------- FAQ accordion: smoother, tactile ---------- */
.space-y-4 > .rounded-lg.border, .space-y-4 > .bg-white.rounded-lg {
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.space-y-4 > .rounded-lg.border:hover, .space-y-4 > .bg-white.rounded-lg:hover {
  border-color: rgba(0,102,204,.30);
}

/* ---------- Links page cards: hover lift ---------- */
.link-item { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.link-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(2,6,23,.22); }

/* ---------- In-content links (blog body): readable underline ---------- */
.prose-content a {
  text-decoration: underline;
  text-decoration-color: rgba(0,102,204,.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.prose-content a:hover { text-decoration-color: var(--bf-orange); }

/* ---------- Business map table: zebra rows + brand hover ---------- */
table#businessTable tbody tr:nth-child(even) { background: rgba(2, 6, 23, .025); }
table#businessTable tbody tr:hover { background: rgba(0, 102, 204, .06) !important; }

/* ---------- Buttons: tactile pressed state ---------- */
a[class*="rounded-lg"][class*="font-medium"]:active,
button[class*="rounded-lg"][class*="font-medium"]:active {
  transform: translateY(0) scale(.985);
}

/* ---------- Small touches ---------- */
* { -webkit-tap-highlight-color: transparent; }          /* no grey flash on mobile tap */
.animate-bounce { opacity: .6; }                          /* soften the hero scroll hint */

/* slim, on-brand scrollbar (desktop) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 102, 204, .35);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 102, 204, .55); background-clip: content-box; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}