/* ═══════════════════════════════════════════════════════════════════════════
   assets/durandal-theme.css  —  Durandal Steel dark/gold skin
   Loaded AFTER each page's inline <style> block so these values win.
   Covers: artikel/landing/legal/404 pages. index.html uses styles.css instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Design-token reset ──────────────────────────────────────────────── */
:root {
  /* Modern article / landing page tokens */
  --surface:            #131313;
  --surface-low:        #1c1b1b;
  --surface-lowest:     #0e0e0e;
  --surface-high:       #0a0a0a;
  --surface-variant:    #2a2520;
  --on-surface:         #e5e2e1;
  --on-surface-var:     #b3aaa0;
  --muted:              #9a8f80;
  --primary:            #e9c176;
  --primary-container:  #c5a059;
  --primary-lt:         #ffdea5;
  --on-primary:         #412d00;
  --sec-container:      #2a2520;
  --on-sec-container:   #d4c4a8;
  --sec-fixed:          #e9c176;
  --hero-bg:            #0a0a0a;
  --hero-mid:           #101010;
  --footer-bg:          #080808;

  /* Legacy legal-page tokens (privacy-policy.html, terms.html) */
  --bg:       #0a0a0a;
  --card:     #131313;
  --text:     #e5e2e1;
  --line:     #2a2520;
  --primary-2:#c5a059;
}

/* ─── 2. Scrolled nav (JS sets class="scrolled" after patch) ─────────────── */
#nav.scrolled,
.site-nav.scrolled,
nav.scrolled {
  background: rgba(19,19,19,0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 1px 0 rgba(233,193,118,0.12) !important;
}

/* 404.html: static sticky nav — always dark */
.site-nav {
  background: rgba(19,19,19,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: var(--line) !important;
}

/* ─── 3. Contrast: dark text on gold primary backgrounds ─────────────────── */
.nav-cta,
.btn-primary,
.article-cta-btn,
.fab,
.cta-primary,
.data-table thead tr,
.data-table thead th { color: var(--on-primary) !important; }

/* CTA anchor links with inline background:var(--primary) */
[style*="background:var(--primary)"],
[style*="background: var(--primary)"] { color: var(--on-primary) !important; }

/* ─── 4. Hero overlays — replace blue tint with neutral dark ─────────────── */
/* artikel / baja-ringan / wiremesh artikel pages */
.article-hero::before {
  background: linear-gradient(
    105deg,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.50) 45%,
    rgba(0,0,0,0.60) 100%
  ) !important;
}

/* ─── 5. Blueprint grid overlays: gold hairlines ─────────────────────────── */
/* artikel pages hero grid */
.hero-grid-bg {
  background-image:
    radial-gradient(ellipse 80% 70% at 75% 50%, rgba(233,193,118,.08) 0%, transparent 70%),
    linear-gradient(rgba(233,193,118,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,193,118,.04) 1px, transparent 1px) !important;
}

/* panduan.html hero grid */
.hero-grid {
  background-image:
    linear-gradient(rgba(233,193,118,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,193,118,.04) 1px, transparent 1px) !important;
}

/* panduan.html hero radial tint */
.hero-tint {
  background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(233,193,118,.12) 0%, transparent 65%) !important;
}

/* panduan.html CTA band grid */
.cta-band-grid {
  background-image:
    linear-gradient(rgba(233,193,118,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,193,118,.04) 1px, transparent 1px) !important;
}

/* artikel pages kontak section grid */
#kontak::before {
  background-image:
    linear-gradient(rgba(233,193,118,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,193,118,.04) 1px, transparent 1px) !important;
}

/* ─── 6. Pill / icon / stat accents — warm gold tint ────────────────────── */
.hero-stat-pill-icon           { background: rgba(233,193,118,.18) !important; }
.stats-band-item:hover         { background: rgba(233,193,118,.06) !important; }
.stats-band-sep                { background: rgba(233,193,118,.12) !important; }
.svc-icon                      { background: rgba(233,193,118,.14) !important; }
.svc-item:hover .svc-icon      { background: rgba(233,193,118,.25) !important; }
.svc-item:hover                { background: rgba(233,193,118,.06) !important; }

/* ─── 7. Box-shadows: replace blue glow with warm gold ──────────────────── */
.nav-cta            { box-shadow: 0 8px 24px rgba(233,193,118,.18) !important; }
.article-cta-btn    { box-shadow: 0 8px 24px rgba(233,193,118,.20) !important; }
.cta-primary        { box-shadow: 0 12px 32px rgba(233,193,118,.28) !important; }
.related-card       { box-shadow: 0 8px 24px rgba(233,193,118,.10) !important; }
.related-card:hover { box-shadow: 0 4px 20px rgba(233,193,118,.18) !important; }
/* panduan.html article cards */
.article-card:hover { box-shadow: 0 24px 48px rgba(233,193,118,.10), 0 4px 12px rgba(0,0,0,.2) !important; }
/* 404.html buttons */
.btn-primary        { box-shadow: 0 4px 16px rgba(233,193,118,.16) !important; }
.btn-primary:hover  { box-shadow: 0 6px 20px rgba(233,193,118,.26) !important; }

/* ─── 8. CTA pulse animation: warm gold ─────────────────────────────────── */
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(233,193,118,0); }
  25%  { box-shadow: 0 0 0 8px rgba(233,193,118,.28), 0 0 32px rgba(233,193,118,.12); }
  100% { box-shadow: 0 0 0 0   rgba(233,193,118,0); }
}

/* ─── 9. Inline-attribute blue-shadow override ───────────────────────────── */
/* Catches onmouseover-set and static inline style box-shadows containing blue rgba.
   !important in a stylesheet overrides inline style for the same property. */
[style*="rgba(0, 67, 124"], [style*="rgba(0,67,124"],
[style*="rgba(0, 91, 164"], [style*="rgba(0,91,164"],
[style*="rgba(0, 30, 60"],  [style*="rgba(0,30,60"]  {
  box-shadow: 0 4px 20px rgba(233,193,118,.14) !important;
}

/* ─── 10. Rebrand banner ─────────────────────────────────────────────────── */
.rebrand-banner {
  position: sticky; top: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 16px;
  background: #1c1b1b;
  border-bottom: 1px solid rgba(233,193,118,0.28);
  color: #e5e2e1;
  font-size: 14px; line-height: 1.4;
  font-family: inherit;
}
.rebrand-banner p { margin: 0; }
.rebrand-banner strong { color: #e9c176; font-weight: 600; }
.rebrand-banner-close {
  background: none; border: none; color: #b3aaa0; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 4px; flex-shrink: 0;
}
.rebrand-banner-close:hover { color: #e9c176; }
@media (max-width: 600px) {
  .rebrand-banner { font-size: 12px; padding: 8px 12px; gap: 8px; }
}