/* ============================================
   SantriDigitalPro — Visual Hierarchy Refinement
   Phase 3: Stronger Depth · Clearer Surfaces
   ============================================
   Inspired by Lynk's visual confidence.
   Translated to: calm, editorial, trustworthy.

   DESIGN INTENT:
   - Create 5 clear surface layers:
     (1) page bg → (2) section alt bg → (3) card bg →
     (4) elevated card → (5) accent panel
   - Give cards physical presence from the first glance
   - Anchor sections clearly via borders and bg shifts
   - Make above-the-fold feel "designed" within 2s on mobile
   ============================================ */

/* ============================================
   EXTENDED DESIGN TOKENS
   ============================================ */
:root {
  /* Card-specific border: slightly stronger than --border */
  --border-card:       #D5D0C7;
  /* Resting card shadow: visible but not heavy */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.04);
  /* Elevated card shadow: for signature/entry blocks */
  --shadow-elevated:   0 2px 16px rgba(26, 122, 110, 0.10), 0 1px 6px rgba(0, 0, 0, 0.07);
  /* Hero section uses a touch more bg depth */
  --bg-hero:           #EDEAE2;
}

[data-theme="dark"] {
  --border-card:       #30364A;
  --shadow-card:       0 1px 4px rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.20);
  --shadow-elevated:   0 2px 16px rgba(34, 168, 151, 0.10), 0 1px 6px rgba(0, 0, 0, 0.25);
  --bg-hero:           #161A28;
}

/* ============================================
   LAYER 1 — NAVBAR
   Crisper white surface, clearly above the page
   ============================================ */
.navbar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border-card);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .navbar {
  background: rgba(25, 30, 45, 0.97);
  border-bottom: 1px solid var(--border-card);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   LAYER 2 — HERO / PAGE HEADER
   Hero now sits in a clearly distinct band
   ============================================ */

/* Home hero: slightly deeper warm tone */
.hero,
.hero.pattern-bg {
  background-color: var(--bg-hero);
  border-bottom: 1px solid var(--border-card);
}

/* Article and materi page header: clean white card surface */
.article-page-header {
  background: var(--bg-card);
  border-bottom: 2px solid var(--border);
}

[data-theme="dark"] .article-page-header {
  background: var(--bg-card);
  border-bottom: 2px solid var(--border-strong);
}

/* ============================================
   LAYER 3 — SECTION RHYTHM
   Clear visual breaks between sections
   ============================================ */
.section--alt {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

/* ============================================
   LAYER 4 — CARDS
   Physical presence at rest, not just on hover
   ============================================ */
.card {
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.05);
  border-color: var(--accent);
}

/* Audience cards: same elevation */
.audience-card {
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.audience-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Link cards: same treatment */
.link-card {
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.link-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Sidebar widgets, CTA boxes, info boxes */
.sidebar-widget,
.cta-box,
.info-box {
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

/* Article prev/next nav items */
.article-nav__item {
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

/* ============================================
   LAYER 5 — ELEVATED / SIGNATURE COMPONENTS
   These stand clearly above normal cards
   ============================================ */

/* Beginner block: the primary entry point */
.beginner-block {
  background: var(--bg-card);
  border-color: var(--border-card);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-elevated);
}

[data-theme="dark"] .beginner-block {
  background: var(--bg-card);
  border-color: var(--border-card);
}

/* CTA banner: keep accent bg, improve shadow */
.cta-banner {
  box-shadow: var(--shadow-elevated);
}

/* ============================================
   SEARCH / FILTER PANEL
   Defined surface, not just floating elements
   ============================================ */
.search-bar {
  border-color: var(--border-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Active search field: clear focus surface */
.search-bar__input:focus {
  outline: none;
}

.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ============================================
   FILTER CHIPS — More deliberate styling
   ============================================ */
.chip {
  background: var(--bg-card);
  border-color: var(--border-card);
  font-weight: var(--weight-medium);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-muted);
  box-shadow: none;
}

.chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 1px 6px rgba(26, 122, 110, 0.28);
}

/* ============================================
   CONTENT TYPE DISTINCTION
   SDP / APP / PRODUK: related but distinguishable
   ============================================ */

/* SDP: Standard green — the primary content type */
.card:has(.badge--sdp) {
  border-left: 3px solid var(--badge-sdp-text);
  border-top-left-radius: calc(var(--radius-xl) - 1px);
  border-bottom-left-radius: calc(var(--radius-xl) - 1px);
}

/* APP: Indigo — tools, interactive */
.card:has(.badge--app) {
  border-left: 3px solid var(--badge-app-text);
}

/* PRODUK: Amber — premium, commercial */
.card:has(.badge--produk) {
  border-left: 3px solid var(--badge-produk-text);
}

/* Dark mode: slightly desaturated left borders */
[data-theme="dark"] .card:has(.badge--sdp)    { border-left-color: rgba(52, 201, 183, 0.55); }
[data-theme="dark"] .card:has(.badge--app)    { border-left-color: rgba(129, 140, 248, 0.55); }
[data-theme="dark"] .card:has(.badge--produk) { border-left-color: rgba(252, 211, 77, 0.45); }

/* ============================================
   ARTICLE TITLE — Editorial anchor
   ============================================ */
.article-title {
  /* Subtle pull-left for strong visual anchoring */
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent);
  margin-left: calc(-1 * var(--space-4) - 3px);
}

@media (max-width: 640px) {
  .article-title {
    /* On mobile: reduce pull to fit container */
    margin-left: 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--accent);
  }
}

/* ============================================
   BREADCRUMB — More visible trail
   ============================================ */
.breadcrumb {
  opacity: 0.85;
}

.breadcrumb__item a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover { color: var(--accent); }

.breadcrumb__sep {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin: 0 4px;
  opacity: 0.5;
}

.breadcrumb__current {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* ============================================
   FOOTER — Clear top anchor
   ============================================ */
.footer {
  border-top: 1px solid var(--border);
}

/* ============================================
   MOBILE NAV — Crisper overlay surface
   ============================================ */
.mobile-nav {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--border-card);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .mobile-nav {
  background: rgba(22, 27, 42, 0.98);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================
   HERO STAT BLOCKS — More visual weight
   ============================================ */
.hero__stat {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 122, 110, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  backdrop-filter: blur(4px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(50% - var(--space-6));
  min-width: 130px;
}

[data-theme="dark"] .hero__stat {
  background: rgba(34, 168, 151, 0.08);
  border: 1px solid rgba(34, 168, 151, 0.2);
}

/* ============================================
   SECTION HEADER EYEBROW — More distinctive
   ============================================ */
.section-header__eyebrow {
  letter-spacing: 0.09em;
}

/* ============================================
   FOCUS STATES — Keyboard accessibility
   ============================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   DARK MODE SURFACE DEPTH
   Cards need to "lift" more from dark bg
   ============================================ */
[data-theme="dark"] .card {
  background: var(--bg-card);  /* #1C2130 */
  border-color: var(--border-card);
}

[data-theme="dark"] .card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

[data-theme="dark"] .audience-card {
  border-color: var(--border-card);
}

[data-theme="dark"] .link-card {
  border-color: var(--border-card);
}