/* ============================
   CSS
   ============================ */


/* ---------- base.css ---------- */
/* Base (mobile-first) */
*{box-sizing:border-box;}
html{line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
img{max-width:100%;height:auto}
.container{max-width:960px;margin:2rem auto;padding:1rem}
h1,h2,h3{line-height:1.2;margin:.5rem 0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.muted{color:var(--muted)}

/* ---------- layout.css ---------- */
/* Header, nav, footer, and main layout */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }

.brand { font-weight: 800; letter-spacing: 0.2px; }

/* Nav basics */
.nav-toggle {
  display: none;
  font: inherit;
  background: none;
  border: 0;
  line-height: 1;
  cursor: pointer;
  font-size: 1.6rem;      
  padding: 0.5rem 0.75rem;
}
.nav { display: none; }
.nav.open { display: block; }
.nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }

/* DESKTOP LINKS */
.nav .nav-list li a { 
  display: block; 
  padding: 0.5rem 0.75rem; 
  color: var(--text); 
  font-weight: 500;
  text-decoration: none;
}

/* Desktop (≥768px) */
@media (min-width: 768px){
  .nav { display: flex; }
  .nav .nav-list { display: flex; gap: 1rem; }
}

/* Mobile (<768px) */
@media (max-width: 767.98px){
  .site-header .bar { flex-wrap: wrap; }
  .brand { order: 1; }

  /* BIGGER HAMBURGER BUTTON */
  .nav-toggle {
    display: inline-block;
    order: 2;
    margin-left: auto;
    font-size: 2.2rem;      
    padding: 0.75rem 1rem;
    min-width: 44px;
    min-height: 44px;
  }

  .nav { 
    order: 3; 
    width: 100%; 
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: .5rem;
    overflow: hidden;
  }

  .nav.open { display: block; }
  .nav .nav-list { display: block; }

  /* MOBILE LINKS — clean borders + desktop color */
  .nav .nav-list li a {
    padding: 0.9rem 1.1rem;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }

  .nav .nav-list li:first-child a {
    border-top: 0;
  }

  .nav .nav-list li a:hover {
    background: #fdfdfd;
  }

  /* ACTIVE PAGE (mobile highlight) */
  .nav .nav-list li a[aria-current="page"],
  .nav .nav-list li a.active {
    background: #f5faff;
    color: var(--brand);
    border-left: 4px solid var(--brand);
    padding-left: calc(1.1rem - 4px);
  }
}

/* Main + basic surfaces */
main { padding: 1rem; }
.section { padding: 1.5rem 0; }
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }

/* Footer */
.site-footer { margin-top: 2rem; border-top: 1px solid var(--border); color: var(--muted); }
.site-footer .bar { padding: 1rem; }

/* Simple grids */
.grid { display: grid; gap: 1rem; }
@media (min-width: 768px){
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Inline nav shortcode */
.inline-nav .nav-list { list-style: none; margin: 1rem; padding: 1rem; display: flex; gap: 1rem; }
@media (max-width: 767.98px){
  .inline-nav .nav-list { display: block; }
}

/* spacing above footer widgets */
.above-footer { margin-top: 2rem; }

/* ---------- site.css ---------- */
/* -------------------------------------------------------
   CARDS (soft, minimal, editorial)
-------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem;
  margin: 1rem 0;
}

.card h3 {
  margin-top: 0.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* -------------------------------------------------------
   ACCORDION (clean lines, soft edges, minimal contrast)
-------------------------------------------------------- */
.accordion {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  margin: 1.2rem 0;
}

/* Accordions stacked back-to-back look unified */
.accordion + .accordion {
  margin-top: -1px;
}

/* INDIVIDUAL ITEMS */
.accordion .acc-item {
  border-bottom: 1px solid var(--border);
}

.accordion .acc-item:last-child {
  border-bottom: 0;
}

/* BUTTON (HEADER ROW) */
.acc-button {
  width: 100%;
  background: var(--surface);
  border: 0;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hover state – subtle, minimal */
.acc-button:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ICON (PLUS/MINUS) */
.acc-button::after {
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.25s ease, color 0.25s ease;
}

/* When open */
.acc-item.open .acc-button::after {
  transform: rotate(45deg);
  color: var(--brand);
}

/* PANEL (CONTENT AREA) */
.acc-panel {
  max-height: 0;
  overflow: hidden;
  background: var(--surface);
  padding: 0 1.2rem;
  transition: max-height 0.35s ease;
  color: var(--muted);
}

/* When open */
.acc-item.open .acc-panel {
  padding: 0 1.2rem 1rem;
  max-height: 500px;
}

/* TYPOGRAPHY INSIDE PANEL */
.acc-panel p {
  margin: 1rem 0 0;
  line-height: 1.55;
  color: var(--text);
}

.acc-panel ul,
.acc-panel ol {
  margin: 0.75rem 0 0.75rem 1.4rem;
}

/* -------------------------------------------------------
   NOTES & QUOTES
-------------------------------------------------------- */
.note {
  background: #fff8e1;
  border: 1px solid #f2d28b;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  color: #444;
}

.quote {
  background: #f8fbff;
  border-left: 4px solid var(--brand);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin: 1.2rem 0;
  color: #333;
  font-style: italic;
  line-height: 1.5;
}

/* -------------------------------------------------------
   ICONS (minimal alignment)
-------------------------------------------------------- */
.icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  margin-right: 4px;
}

/* -------------------------------------------------------
   BANDS (below-header & above-footer)
-------------------------------------------------------- */

.below-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Give the above-footer a top divider so it separates from content */
.above-footer{
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

/* Inner spacing */
.below-header .container,
.above-footer .container{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* -------------------------------------------------------
   GRID
-------------------------------------------------------- */
.below-header-grid,
.above-footer-grid{
  display: grid;
  gap: 1rem;
}

/* 3-up on medium+ screens, stacked on mobile */
@media (min-width: 768px){
  .below-header-grid,
  .above-footer-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Columns */
.widget-col h6{
  margin: .25rem 0 .4rem;
  font-weight: 700;
}
.widget-col p{
  margin: 0;
  color: var(--muted);
}

/* ---------- utilities.css ---------- */
.u-container{max-width:960px;margin:0 auto;padding:0 1rem}
.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}
.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}



/* ==========================================
   THEME.CSS (OVERRIDES & EXTRA UTILITIES)
   Comes AFTER base/layout/site/utilities
   so it overrides on conflict.
   ========================================== */

: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}

/* -------------------------------------------------------
   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;
  font-weight:600;
  letter-spacing:.2px;
}

.brand-card .brand-icon{
  font-size:1.1rem;
  color: var(--brand-icon, var(--brand));
  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
-------------------------------------------------------- */

@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;
    border-radius: 4px;
    padding: .35rem .6rem;
    box-shadow: 0 1px 1px rgba(0,0,0,.03);
    color: var(--text);
    font-weight: 500;
    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);
    text-decoration: none;
  }

  .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
-------------------------------------------------------- */

.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)
-------------------------------------------------------- */

.pager{
  display:flex;
  align-items:center;
  margin:2rem 0 0;
}

.pager-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}

.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;
}

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

.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;
}

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

@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; }
}

.pager .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{
  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;
    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;
  }
}