/* ========= Azranta v20 Design System ========= */
:root{
  /* Color tokens */
  --bg: #0b0d10;
  --surface: #0f1318;
  --card: #121821;
  --elev: #0a0d12;
  --text: #eef2f7;
  --muted: #9aa6b2;
  --border: #1e2732;
  --accent: {{@site.accent_color}};
  --hanuman: #ff6f00;
  --brown: #795548;
  --dark-brown: #4e342e;

  /* Effects */
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.25);
  --shadow-2: 0 16px 40px rgba(0,0,0,.35);

  /* Type scale */
  --step--1: clamp(.82rem, .80rem + .1vw, .9rem);
  --step-0: clamp(.95rem, .92rem + .15vw, 1rem);
  --step-1: clamp(1.15rem, 1rem + .6vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.2rem + 1.2vw, 1.8rem);
  --step-3: clamp(1.85rem, 1.4rem + 2.4vw, 2.4rem);
  --step-4: clamp(2.4rem, 1.6rem + 4vw, 3.1rem);
}
:root[data-theme="light"]{
  --bg:#ffffff; --surface:#f6f8fa; --card:#ffffff; --elev:#fff;
  --text:#0b0d10; --muted:#4b5662; --border:#e5eaf0;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: var(--bg); color: var(--text);
  font: 400 var(--step-0)/1.65 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}

/* Containers */
.container{ width: min(1180px, 92vw); margin-inline:auto; }
.page .block{ margin: clamp(1.2rem,2vw,2rem) 0; }
.hero-bg{ background: radial-gradient(1200px 500px at 10% -10%, rgba(255,111,0,.15), transparent 60%),
                       radial-gradient(1000px 500px at 110% -20%, rgba(121,85,72,.15), transparent 60%); }

/* Header */
.site-header{ position:sticky; top:0; z-index:60; background: color-mix(in srgb, var(--surface), transparent 0%);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; gap:.6rem; padding:.6rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800 }
.brand .logo-img{ height:28px; width:auto }
.nav{ display:flex; align-items:center; gap:1rem }
.nav a{ opacity:.9; font-weight:600 }
.nav a:hover{ opacity:1; color:var(--accent) }
.nav a.active{ color:var(--accent) }
#themeToggle{ margin-left:auto }

.header-actions{ display:inline-flex; align-items:center; gap:.35rem; margin: 0 .35rem; }
.hdr-btn,.search-btn,.burger,#themeToggle{
  background: var(--card); border:1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: .48rem .6rem; cursor:pointer;
  box-shadow: var(--shadow-1);
}
.hdr-btn:hover,.search-btn:hover,#themeToggle:hover{ border-color: var(--accent) }

/* Mobile nav */
.burger{ display:none }
@media (max-width: 860px){
  .burger{ display:inline-flex; }
  .nav{ position: fixed; top: 56px; right: 0; background: var(--surface);
        border-left:1px solid var(--border); border-bottom:1px solid var(--border);
        width: min(320px, 86vw); height: calc(100vh - 56px); padding: 1rem;
        transform: translateX(100%); transition: transform .25s ease;
        display:flex; flex-direction:column; gap:.9rem; }
  .nav.open{ transform: translateX(0) }
}

/* Grids */
.grid2,.grid3,.grid4,.posts-grid{ display:grid; gap: 1rem }
.grid2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.grid4{ grid-template-columns: repeat(4, minmax(0,1fr)) }
.posts-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 980px){ .grid3,.posts-grid{ grid-template-columns:repeat(2,1fr) } .grid4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 680px){ .grid2,.grid3,.grid4,.posts-grid{ grid-template-columns:1fr } }

/* Blocks */
.block.hero h1{ font-size: var(--step-4); margin: .2rem 0 .4rem }
.block.hero .eyebrow{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:800 }
.block h2{ font-size: var(--step-2) }
.block h3{ font-size: var(--step-1) }
.muted{ color: var(--muted) }

/* Cards */
.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow-1); transition: transform .15s ease, border-color .15s ease;
}
.card:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent), var(--border) 70%) }
.badge{ display:inline-block; padding:.25rem .5rem; border-radius: 999px; border:1px solid var(--border); background: var(--elev); font-size:.8rem }

/* Post cards */
.post-card .card-image{ width:100%; height:200px; object-fit:cover }
.post-card .card-body{ padding:1rem }
.card-title{ font-weight:800; margin:0 0 .3rem }
.card-excerpt{ color:var(--muted); margin:0 0 .5rem }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.65rem 1rem; border-radius: 12px;
      border:1px solid var(--border); background: var(--surface); color: var(--text); font-weight:700 }
.btn.primary{ background: var(--accent); border-color: var(--accent); color:#fff }
.btn.ghost{ background:transparent }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset: 2px }

/* Progress bar */
.scroll-progress{ appearance:none; position:fixed; top:0; left:0; width:100%; height:4px; z-index:1000; background:transparent; border:0 }
.scroll-progress::-webkit-progress-value{ background: var(--accent) }
.scroll-progress::-webkit-progress-bar{ background: transparent }
.scroll-progress::-moz-progress-bar{ background: var(--accent) }

/* Koenig essentials */
.kg-width-wide{ width:min(1180px,92vw); margin: clamp(1rem,2vw,2rem) auto }
.kg-width-full{ width:100vw; margin-left:50%; transform: translateX(-50%) }
.kg-image{ border-radius: 12px }

/* Footer */
.site-footer{ border-top:1px solid var(--border); margin-top: clamp(2rem,5vw,4rem); background: var(--surface) }
.footer-inner{ padding: 2rem 0 }
.footer-columns{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1rem }
.footer-col h4{ margin:0 0 .6rem }
.footer-col ul{ list-style:none; margin:0; padding:0 }
.footer-col li{ margin:.35rem 0 }
.footer-col a:hover{ color:var(--accent) }
.footer-meta{ display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap; color:var(--muted); margin-top:1rem }
.partner-badges .badge{ background: var(--elev) }

/* Accessibility & motion */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important }
}

/* Utilities */
.max-w-prose{ max-width: 68ch }
.center{ text-align:center }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }


/* v22 hero shading refinement */
.block.hero{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 90%) 0%, transparent 100%);
  padding: clamp(1.2rem, 4vw, 2rem);
  border-radius: var(--radius-lg);
}