/* Custom polish layer (Feb 2026) */
/* Goals: better mobile header/menu, nicer cards/shadows, improved blog typography, safer wrapping */

:root{
  /* Theme tokens (light default) */
  --bg: #f3f4f6;
  --bg2: #ffffff;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --muted2: #64748b;
  --border: rgba(15, 23, 42, .10);
  --primary: #1d4ed8;
  --ring: rgba(29, 78, 216, .25);

  --soft-shadow: 0 10px 30px rgba(17, 24, 39, .06);
  --soft-shadow-hover: 0 14px 45px rgba(17, 24, 39, .10);

  /* Used in a few spots (menu, subtle surfaces) */
  --glass: rgba(249, 250, 251, .88);

  color-scheme: light;
}

html[data-theme="dark"]{
  --bg: #0b1220;
  --bg2: #0f1a2e;
  --surface: #0f1a2e;
  --card: #0f1a2e;
  --text: #e5e7eb;
  --muted: #a3b0c2;
  --muted2: #93a4bd;
  --border: rgba(226, 232, 240, .12);
  --primary: #60a5fa;
  --ring: rgba(96, 165, 250, .35);

  --soft-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  --soft-shadow-hover: 0 18px 60px rgba(0, 0, 0, .55);

  --glass: rgba(15, 26, 46, .72);

  color-scheme: dark;
}


/* Background + max-width framing */
body{
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
  color: var(--text);
}
.wrapper{
  max-width: 1280px;
  margin-inline: auto;
}

/* Header improvements */
header.sticky{
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  background: var(--glass) !important;
  box-shadow: var(--soft-shadow);
}
header.sticky > a svg{
  max-width: 168px;
  width: 168px;
  height: auto;
}
@media (max-width: 420px){
  header.sticky{
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: 68px !important;
  }
  header.sticky > a svg{
    max-width: 140px;
    width: 140px;
  }
}

/* Make secondary blocks feel like modern cards */
.bg-secondary.r{
  box-shadow: var(--soft-shadow);
}
@media (hover:hover){
  .bg-secondary.r:hover{
    box-shadow: var(--soft-shadow-hover);
  }
}

/* Buttons: a bit more “clicky” */
a.inline-flex, button.inline-flex, button[type="button"], button[type="submit"]{
  transform: translateZ(0);
}
@media (hover:hover){
  a.inline-flex:hover, button.inline-flex:hover{
    filter: saturate(1.03);
  }
}

/* Mobile menu: widen, correct positioning, and allow our JS to open it reliably */
header .relative.flex.\32 xl\:hidden > div.absolute{
  right: 0 !important;
  top: 44px !important;
  width: min(92vw, 340px) !important;
  border: 1px solid rgba(29, 78, 216, .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
header .relative.flex.\32 xl\:hidden > div.absolute.custom-open{
  z-index: 60 !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
header .relative.flex.\32 xl\:hidden > div.absolute nav a{
  padding-block: 6px;
}

/* Blog/article typography */
article{
  padding-inline: 2px;
}
article p{
  line-height: 1.75;
}
article p, article li{
  overflow-wrap: anywhere;
  word-break: break-word;
}
article a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
article h2, article h3{
  letter-spacing: -0.01em;
}
article section.flex.flex-col.gap-6 > div{
  padding-bottom: 2px;
}

/* Improve lists if they appear */
article ul, article ol{
  padding-left: 1.25rem;
  margin-top: .35rem;
  margin-bottom: .35rem;
}
article ul{ list-style: disc; }
article ol{ list-style: decimal; }

/* Safer images (if any appear in content later) */
article img{
  border-radius: 18px;
  box-shadow: var(--soft-shadow);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  header.sticky{ backdrop-filter: none; -webkit-backdrop-filter:none; }
}



/* -----------------------------
   Image cards: better captions on photos + shadows
-------------------------------- */
div.text-white[style*="background-image"]{
  position: relative;
  overflow: hidden;
  box-shadow: var(--soft-shadow);
  border: 1px solid rgba(255,255,255,.22);
  transform: translateZ(0);
}
div.text-white[style*="background-image"]:hover{
  box-shadow: var(--soft-shadow-hover);
}
div.text-white[style*="background-image"]::before{
  content: "";
  position: absolute;
  inset: 0;
  /* Stronger overlay for readability on bright photos */
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}
div.text-white[style*="background-image"] > *{
  position: relative;
  z-index: 1;
}
div.text-white[style*="background-image"] > div{
  /* Caption wrapper: keep spacing, but REMOVE the visible plaque.
     User asked for text directly on the photo (no blur/no dark panel). */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 14px 16px;
  max-width: 42ch;
}
div.text-white[style*="background-image"] h3,
div.text-white[style*="background-image"] p{
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
div.text-white[style*="background-image"] p{
  opacity: .96;
  line-height: 1.5;
}

/* -----------------------------
   About block: denser, cleaner, no cut icons
-------------------------------- */
#about{
  scroll-margin-top: 90px;
  position: relative;
}
#about::before{
  content: "";
  position: absolute;
  inset: -40px -12px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(29,78,216,.12), rgba(255,255,255,0)),
              radial-gradient(520px 200px at 80% 40%, rgba(16,185,129,.10), rgba(255,255,255,0));
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
#about > *{
  position: relative;
  z-index: 1;
}
#about ul{
  gap: 18px !important;
}
#about ul > li > div{
  min-height: auto !important; /* remove excessive empty space */
  justify-content: flex-start !important;
  padding: 22px !important;
  border-radius: 26px !important;
  box-shadow: var(--soft-shadow);
  border: 1px solid rgba(17, 24, 39, .06);
  background: rgba(255, 255, 255, .86);
}
#about ul > li > div:hover{
  box-shadow: var(--soft-shadow-hover);
}
#about ul > li > div .bg-primary{
  width: 56px !important;
  height: 56px !important;
  box-shadow: 0 14px 30px rgba(29, 78, 216, .22);
}
#about ul > li > div svg{
  width: 28px !important;
  height: 28px !important;
  display: block;
  overflow: visible;
}
#about ul > li > div h3{
  line-height: 1.15;
}
#about ul > li > div p{
  color: rgba(17,24,39,.78);
  line-height: 1.55;
}

/* make About cards balanced on larger screens */
@media (min-width: 768px){
  #about ul > li > div{
    min-height: 260px !important;
  }
}
@media (max-width: 420px){
  div.text-white[style*="background-image"] > div{
    max-width: none;
    width: 100%;
  }
}


/* --- Icon clipping fix (Feb 2026 v6) --- */

/*
  Why icons were still clipped:
  - Previous CSS selector accidentally escaped the dot ("\.zk-icon-badge"), so rules didn't apply.
  - Some SVGs have strokes very close to the viewBox edge.
  Fix:
  - Ensure badge never uses overflow-hidden.
  - Add padding.
  - Scale SVG to % of badge so it always fits.
*/

.zk-icon-badge{
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;

  /* Make the circle a bit larger so strokes never touch the edge */
  width: 3.5rem !important;   /* 56px */
  height: 3.5rem !important;  /* 56px */
  min-width: 3.5rem !important;
  min-height: 3.5rem !important;

  padding: .65rem !important;
  flex: 0 0 auto !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .18) !important;
}

.zk-icon-badge svg,
.zk-icon-badge img{
  display: block;
  overflow: visible !important;
  width: 58% !important;
  height: 58% !important;
  max-width: 58% !important;
  max-height: 58% !important;
}

/* If icon is rendered as <span> or something else inside the badge, keep it centered */
.zk-icon-badge > *{
  overflow: visible !important;
}

/* Safety: make all inline SVGs in feature/about cards allow overflow */
#about svg,
section svg{
  overflow: visible;
}

/* Firefox-specific SVG clipping fix
   In Firefox (desktop + mobile), inline SVG strokes can be clipped by subpixel rounding,
   especially inside rounded badges. We slightly downscale and nudge the icon to keep
   strokes away from the badge edge.
*/
@supports (-moz-appearance: none) {
  .zk-icon-badge{
    /* a touch more breathing room in FF */
    padding: 0.6rem !important;
  }
  .zk-icon-badge svg,
  .zk-icon-badge img{
    width: 52% !important;
    height: 52% !important;
    max-width: 52% !important;
    max-height: 52% !important;
    transform: translate(-0.5px, -0.5px) scale(0.98);
    transform-origin: 50% 50%;
    overflow: visible !important;
  }
}

/* -------- Dark theme overrides (mostly Tailwind class patching) -------- */
html[data-theme="dark"] .bg-white{ background-color: var(--card) !important; }
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100{ background-color: color-mix(in srgb, var(--card) 92%, #000 8%) !important; }
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-900{ color: var(--text) !important; }
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-700{ color: var(--muted) !important; }
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-gray-500{ color: var(--muted2) !important; }

html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-gray-200{ border-color: var(--border) !important; }

html[data-theme="dark"] header{ background-color: color-mix(in srgb, var(--surface) 88%, transparent) !important; border-color: var(--border) !important; }
html[data-theme="dark"] header a{ color: var(--text) !important; }
html[data-theme="dark"] header a:hover{ color: color-mix(in srgb, var(--text) 82%, var(--primary) 18%) !important; }

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background-color: color-mix(in srgb, var(--card) 92%, #000 8%) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color: color-mix(in srgb, var(--muted2) 88%, #fff 12%) !important; }

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg{ box-shadow: var(--soft-shadow) !important; }

/* Make images/overlays read well in dark mode */
html[data-theme="dark"] [style*="background-image"]::before{
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.70) 100%) !important;
}

/* -------- Theme toggle (floating button) -------- */
#zk-theme-toggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: var(--soft-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#zk-theme-toggle:hover{
  transform: translateY(-1px);
  box-shadow: var(--soft-shadow-hover);
}
#zk-theme-toggle:active{
  transform: translateY(0);
}
#zk-theme-toggle svg{
  width: 20px;
  height: 20px;
  stroke: var(--text);
}
@media (max-width: 420px){
  #zk-theme-toggle{ right: 14px; bottom: 14px; }
}