:root{
  --bg:#fff;
  --surface:#fff;
  --text:#111;
  --muted:#666;
  --border:#e5e5e5;
  --brand:#0a7cff;
  --brand-contrast:#fff;
}
html,body{color:var(--text);background:var(--bg);}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.badge{display:inline-block;padding:.2rem .5rem;border:1px solid var(--border);border-radius:999px;font-size:.8rem}
.note{background:#fff8e1}
.quote{background:#f8fbff}

/* -------------------------------------------------------
   GLOBAL RESET & BASE
-------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, Roboto, sans-serif;
    color: #111;
    background: #fff;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Smooth minimal link style */
a {
    color: #0a4b8f;
    text-decoration: underline;
    text-underline-offset: 3px;
}
a:hover {
    opacity: 0.7;
}

/* ----------------------------------------------
   HEADINGS (H1–H6)
   Elegant, clean, low-contrast, editorial spacing
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin: 1.8rem 0 0.8rem;
    line-height: 1.25;
    color: #111;
}

/* Subtle bottom rule for premium touch */
h1, h2 {
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e5e5e5;
}

/* Typography scale */
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

/* -------------------------------------------------------
   PARAGRAPHS & BASIC TEXT
-------------------------------------------------------- */
p {
    margin: 1rem 0;
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

small {
    font-size: 0.85rem;
    color: #555;
}

mark {
    background: #ffff80;
    padding: 0 3px;
}

code {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.95rem;
    background: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
}

pre {
    font-family: "JetBrains Mono", monospace;
    padding: 1rem;
    border-radius: 4px;
    background: #fafafa;
    overflow-x: auto;
}

abbr {
    text-decoration: dotted underline;
    cursor: help;
}

/* -------------------------------------------------------
   BLOCKQUOTES (EDITORIAL STYLE)
-------------------------------------------------------- */
blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #555;
    font-style: italic;
}

/* -------------------------------------------------------
   SUBSCRIPT & SUPERSCRIPT
-------------------------------------------------------- */
sub, sup {
    font-size: 0.75em;
}

/* -------------------------------------------------------
   LISTS (CLEAN SPACING)
-------------------------------------------------------- */
ul, ol {
    margin: 1rem 0 1.2rem 1.5rem;
    padding: 0;
}

li {
    margin-bottom: 0.3rem;
}

/* Description lists */
dl {
    margin: 1rem 0;
}
dt {
    font-weight: 600;
}
dd {
    margin: 0 0 0.8rem 1rem;
    color: #444;
}

/* -------------------------------------------------------
   STRUCTURAL CONTAINERS
-------------------------------------------------------- */
section, article, aside, header, footer, nav {
    margin: 1.5rem 0;
}

/* -------------------------------------------------------
   TEXT DECORATION ADVANCED
-------------------------------------------------------- */
.u-underline      { text-decoration: underline; }
.u-overline       { text-decoration: overline; }
.u-strike         { text-decoration: line-through; }
.u-dotted         { text-decoration-style: dotted; }
.u-dashed         { text-decoration-style: dashed; }
.u-double         { text-decoration-style: double; }
.u-wavy           { text-decoration-style: wavy; }

/* thickness and offset helpers */
.u-thick          { text-decoration-thickness: 3px; }
.u-offset         { text-underline-offset: 6px; }

/* -------------------------------------------------------
   TYPOGRAPHY UTILITY CLASSES
-------------------------------------------------------- */
.text-center      { text-align: center; }
.text-right       { text-align: right; }
.text-left        { text-align: left; }
.uppercase        { text-transform: uppercase; }
.lowercase        { text-transform: lowercase; }
.capitalize       { text-transform: capitalize; }
.tight            { letter-spacing: -0.5px; }
.loose            { letter-spacing: 0.8px; }

/* -------------------------------------------------------
   SHADOWS (SUBTLE, MINIMAL)
-------------------------------------------------------- */
.text-shadow-soft {
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* -------------------------------------------------------
   PSEUDO-ELEMENT ENHANCERS
-------------------------------------------------------- */

/* Drop-cap for first-letter */
.dropcap::first-letter {
    font-size: 3rem;
    float: left;
    line-height: 0.8;
    padding-right: 8px;
    font-weight: 600;
}

/* Highlight first line */
.lead::first-line {
    font-weight: 600;
}

/* Soft selection color */
::selection {
    background: #e0f0ff;
}

/* -------------------------------------------------------
   INTERACTION STATES
-------------------------------------------------------- */
.hover-fade:hover {
    opacity: 0.6;
}

.hover-underline:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* -------------------------------------------------------
   LAYOUT HELPERS
-------------------------------------------------------- */

.flex {
    display: flex;
    gap: 1rem;
}

.grid {
    display: grid;
    gap: 1rem;
}

.columns-2 {
    column-count: 2;
    column-gap: 2rem;
}

.columns-3 {
    column-count: 3;
    column-gap: 2rem;
}

/* -------------------------------------------------------
   SECTION DIVIDERS (UNICODE, MINIMAL)
-------------------------------------------------------- */
.divider {
    text-align: center;
    margin: 2rem 0;
    letter-spacing: 6px;
    color: #999;
}
.divider::before {
    content: "⋯";
}

/* -------------------------------------------------------
   CLEAN CARD-STYLE TEXT BOX
-------------------------------------------------------- */
.text-card {
    padding: 1.2rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fafafa;
}

/* -------------------------------------------------------
   SOFT EMPHASIS BAR (ELEGANT)
-------------------------------------------------------- */
.accent-bar {
    border-left: 4px solid #ddd;
    padding-left: 1rem;
}

/* -------------------------------------------------------
   BLOG LISTING – MODERN LEFT ACCENT CARDS
-------------------------------------------------------- */

.list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.list li {
    padding: 1rem 1.4rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--brand);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.list li:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.list li a {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.list li a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ----- Brand boxed badge in header ----- */
.brand-card{
  display:inline-block;
  background:var(--surface);
  border:2px solid #c7c7c7;
  border-radius:5px;
  padding:.45rem .75rem;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:box-shadow .2s ease, transform .2s ease;
}

.brand-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

.brand-card .brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--text);
  text-decoration:none; /* keep it clean in the box */
  font-weight:600;
  letter-spacing:.2px;
}

.brand-card .brand-icon{
  font-size:1.1rem;
  color: var(--brand-icon, var(--brand)); /* ← now driven by --brand-icon */
  line-height:1;
  transition: color .25s ease;
}

.brand-card .brand-text{
  color:var(--text);
}

/* keep spacing sane on very small screens */
@media (max-width: 520px){
  .brand-card{ padding:.4rem .6rem; }
  .brand-card .brand-icon{ font-size:1rem; }
}

/* -------------------------------------------------------
   TOP NAV: subtle desktop pills (less strong than brand-card)
-------------------------------------------------------- */

@media (min-width: 768px) {

  .site-header .nav .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .4rem;
  }

  .site-header .nav .nav-list li {
    margin: 0;
    padding: 0;
  }

  .site-header .nav .nav-list a {
    display: inline-block;
    background: var(--surface);
    border: 1px solid #dcdcdc;            /* ✅ thinner & lighter than brand-card */
    border-radius: 4px;                   /* ✅ smaller radius */
    padding: .35rem .6rem;                /* ✅ lighter padding */
    box-shadow: 0 1px 1px rgba(0,0,0,.03); /* ✅ very soft shadow */
    color: var(--text);
    font-weight: 500;                      /* ✅ slightly lighter than brand-card */
    letter-spacing: .1px;
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease;
  }

  .site-header .nav .nav-list a:hover {
    background: #fdfdfd;                 
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* ✅ small hover shadow, no lift */
    text-decoration: none;
  }

  /* Optional: current page softly highlighted */
  .site-header .nav .nav-list a[aria-current="page"],
  .site-header .nav .nav-list a.active {
    border-color: var(--brand);
    background: #f5faff;
    color: var(--brand);
  }
}
/* -------------------------------------------------------
   FOOTER: 3-COLUMN GRID (RESPONSIVE MINIMAL LAW STYLE)
-------------------------------------------------------- */

.site-footer {
  background: #fafafa;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding-top: 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem 2rem;
  padding: 1.5rem 1rem;
}

.footer-col h6 {
  margin: 0 0 .6rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--text);
  opacity: .95;
}

.footer-col p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin: .35rem 0;
}

.footer-links a {
  color: var(--text);
  text-decoration: none;
  text-underline-offset: 3px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-meta {
  border-top: 1px solid var(--border);
  padding: .9rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
/* -------------------------------------------------------
   BLOG PAGER (compact, subtle; horizontal)
   Works with: <nav class="pager"><ul class="pager-list"><li class="pager-item">...</li></ul></nav>
-------------------------------------------------------- */

.pager{
  display:flex;               /* nav itself is a flex container so it won’t collapse */
  align-items:center;
  margin:2rem 0 0;
}

/* Make the inner list horizontal */
.pager-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  list-style:none;
  margin:0;                   /* avoid double top margin; pager already has it */
  padding:0;
}

/* Items look like your buttons */
.pager-item a,
.pager-item span{
  display:inline-block;
  min-width:2.2rem;
  text-align:center;
  padding:.45rem .65rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-size:.92rem;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.pager-item a:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  text-decoration:none;
}

/* Wider prev/next pills */
.pager-item.pager-prev a,
.pager-item.pager-next a,
.pager-item.pager-prev span,
.pager-item.pager-next span{
  padding:.45rem .75rem;
}

/* Current + disabled states (match builder classes) */
.pager-item.is-current span{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--brand-contrast);
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  cursor:default;
}

.pager-item.is-disabled span{
  color:var(--muted);
  border-style:dashed;
  background:var(--surface);
  box-shadow:none;
  opacity:.65;
  cursor:not-allowed;
  pointer-events:none;
}

/* Accessibility: focus ring */
.pager-item a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Responsive tweaks */
@media (max-width:520px){
  .pager-list{ gap:.4rem; }
  .pager-item a, .pager-item span{
    padding:.4rem .55rem;
    min-width:2rem;
    font-size:.9rem;
  }
}

@media (max-width:900px){
  .pager-item a, .pager-item span{ padding:.5rem .7rem; }
}

@media (prefers-reduced-motion: reduce){
  .pager-item a, .pager-item span{ transition:none; }
}

/* Back-compat if any old markup is still present */
.pager .current{               /* legacy: <span class="current"> */
  background:var(--brand);
  border-color:var(--brand);
  color:var(--brand-contrast);
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  cursor:default;
}
.pager .disabled{              /* legacy: <span class="disabled"> */
  color:var(--muted);
  border-style:dashed;
  background:var(--surface);
  box-shadow:none;
  opacity:.65;
  cursor:not-allowed;
  pointer-events:none;
}

/* ---------------------------------------------
   MOBILE FIX: force .columns-2 to become 1 column
---------------------------------------------- */
@media (max-width: 768px) {
  main .columns-2,
  .columns-2 {
    columns: 1 !important;   /* HARD override */
    column-count: 1 !important;
    column-gap: 0 !important;
  }
}
/* ---------------------------------------------
   MOBILE FIX: force .columns-3 to become 1 column
---------------------------------------------- */
@media (max-width: 768px) {
  main .columns-3,
  .columns-3 {
    columns: 1 !important;
    column-count: 1 !important;
    column-gap: 0 !important;
  }
}