/* ========== Vars & Base ========== */
:root {
  --ink:#1C2139; 
  --muted:#667085; 
  --brand:#e63946;
  --max: 900px; 
  --pad: 16px;
}

html, body { margin:0; }
body{
  font-family: Mulish,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.7; color:#333;
  font-size: clamp(15px, 0.35vw + 14px, 17px);
}
header,main,footer{display:block;}
.container{ width:min(100%, var(--max)); margin-inline:auto; padding-inline:var(--pad); }

/* Fluid media & safe wrapping */
img, svg, video, canvas, iframe { max-width:100%; height:auto; display:block; }
figure { margin:0; }
.breadcrumbs, .toc, article { overflow-wrap:anywhere; }

/* Global links */
a{ color:#e63946; text-decoration:none; transition:color .3s ease; }
a:hover{ color:#1C2139; text-decoration:underline; }

/* ========== Header ========== */
.site-header.container{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px;
  border-bottom:1px solid rgba(28,33,57,.08);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: headerDrop .6s cubic-bezier(.25,1,.5,1) both; transform-origin: top;
}
.site-header.container.is-scrolled{
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  border-bottom-color: transparent;
}

/* brand link */
.site-header.container > a{
  color:var(--ink); font-weight:800; letter-spacing:.2px; white-space:nowrap;
  display:inline-flex; align-items:center; position:relative;
  opacity:0; transform: translateY(8px);
  animation: itemIn .5s cubic-bezier(.25,1,.5,1) .05s forwards;
}

/* nav layout */
.site-header.container nav[aria-label="Main"]{
  display:flex; align-items:center; gap:14px;
  opacity:0; transform: translateY(8px);
  animation: itemIn .5s cubic-bezier(.25,1,.5,1) .12s forwards;
}

/* nav links: pill + underline */
.site-header.container nav a{
  position:relative; display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px;
  color:var(--ink); background:transparent; border:1px solid transparent;
  transition: transform .35s cubic-bezier(.25,1,.5,1),
             box-shadow .35s cubic-bezier(.25,1,.5,1),
             border-color .25s, color .25s, background .25s;
}
.site-header.container nav a::after{
  content:""; position:absolute; left:50%; bottom:6px; width:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  transform:translateX(-50%); transition: width .35s cubic-bezier(.25,1,.5,1);
}
.site-header.container nav a:hover,
.site-header.container nav a:focus-visible{
  color:var(--brand); background:#fff; border-color:rgba(230,57,70,.35);
  transform: translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,.12); outline:none;
}
.site-header.container nav a:hover::after,
.site-header.container nav a:focus-visible::after { width:70%; }
.site-header.container nav a[aria-current="page"]{
  color:var(--brand); background:#fff; border-color:rgba(230,57,70,.35);
}

/* ========== Content blocks ========== */
.post-hero{ display:grid; gap:18px; padding:28px 0; }
.post-hero h1{ margin:0; color:var(--ink); font-size: clamp(1.35rem, 2.2vw, 2.2rem); line-height:1.25; }
.meta{ color:var(--muted); font-size:.95rem; display:flex; flex-wrap:wrap; gap:10px; }

.hero-img{ border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.06); }

.toc{ background:#f8f9fa; border-left:4px solid var(--brand); padding:12px 14px; border-radius:8px; margin:24px 0; }
.toc h2{ margin:0 0 8px; font-size:1rem; color:var(--ink); }
.toc a{ color:var(--brand); }

article h2{ color:var(--ink); margin-top:28px; font-size: clamp(1.15rem, 1.4vw, 1.6rem); }
article h3{ color:var(--ink); margin-top:24px; font-size: clamp(1.05rem, 1.1vw, 1.35rem); }
article p, article li{ font-size:1.02rem; }

.ad-wrap{ margin:24px 0; display:flex; justify-content:center; }

.tag-list{ margin-top:24px; display:flex; gap:8px; flex-wrap:wrap; }
.tag{ border:1px solid #eee; padding:4px 10px; border-radius:999px; font-size:.9rem; color:#555; }

/* Author */
.author-box{ display:flex; gap:14px; align-items:center; margin:28px 0; padding:16px; border:1px solid #eee; border-radius:12px; background:#fff; flex-wrap:wrap; }
.author-box img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }

/* Breadcrumbs */
.breadcrumbs{ font-size:.95rem; margin:12px 0 18px; color:#7a7a7a; }
.breadcrumbs a{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  color:var(--ink); background:#f7f8fa; border:1px solid #eef0f3;
  transition: transform .28s cubic-bezier(.25,1,.5,1),
              box-shadow .28s cubic-bezier(.25,1,.5,1),
              color .28s, background .28s, border-color .28s;
}
.breadcrumbs a:hover, .breadcrumbs a:focus-visible{
  color:var(--brand); background:#fff; border-color:rgba(230,57,70,.35);
  transform: translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.10); outline:none;
}
/* entrance stagger */
.breadcrumbs a, .breadcrumbs span{ opacity:0; transform: translateY(6px); animation: itemIn .45s cubic-bezier(.25,1,.5,1) forwards; }
.breadcrumbs a:nth-of-type(1){ animation-delay:.02s; }
.breadcrumbs a:nth-of-type(2){ animation-delay:.10s; }
.breadcrumbs span:last-child{ animation-delay:.18s; opacity:0; }

/* Social share */
.social-list{ display:flex; gap:10px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.social-link{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; transition: transform .3s ease; }
.social-link img{ filter: brightness(0) invert(1); width:20px; height:20px; }
.share-x{ background:#000; }
.share-facebook{ background:#1877f2; }
.share-instagram{
  background: radial-gradient(circle at 30% 107%,
  #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Related posts */
.related{ margin:36px 0; }
.related h2{ margin:0 0 14px; font-size: clamp(1.1rem, 1.5vw, 1.25rem); color:var(--ink); }
.related-grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.related-grid a{
  display:block; padding:16px 18px; border:1px solid #eef0f3; border-radius:14px;
  background:#fff; color:var(--ink); text-decoration:none; position:relative; overflow:hidden; isolation:isolate;
  opacity:0; transform: translateY(10px); animation: relatedIn .55s cubic-bezier(.25,1,.5,1) forwards;
  transition: transform .35s cubic-bezier(.25,1,.5,1),
              box-shadow .35s cubic-bezier(.25,1,.5,1),
              border-color .25s, background .25s, color .25s;
  will-change: transform, box-shadow; cursor:pointer;
}
.related-grid a:nth-child(1){ animation-delay:.05s; }
.related-grid a:nth-child(2){ animation-delay:.15s; }
.related-grid a:nth-child(3){ animation-delay:.25s; }
.related-grid a::before{
  content:""; position:absolute; inset:0 0 0 auto; width:0; background:var(--brand); opacity:.12;
  transition: width .35s cubic-bezier(.25,1,.5,1), opacity .25s; z-index:-1;
}
.related-grid a::after{
  content:""; position:absolute; inset:-140% -30%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: rotate(10deg); opacity:0; pointer-events:none;
}
.related-grid a:hover, .related-grid a:focus-visible{
  transform: translateY(-8px) scale(1.02); box-shadow:0 14px 30px rgba(0,0,0,.12);
  border-color:rgba(230,57,70,.35); outline:none;
}
.related-grid a:hover::before, .related-grid a:focus-visible::before{ width:8px; opacity:.18; }
.related-grid a:hover::after{ animation: relShine .9s ease forwards; }

/* Footer */
footer{ border-top:1px solid #eee; margin-top:40px; padding:20px 0; color:#666; }

/* ========== Keyframes & Accessibility ========== */
@keyframes headerDrop{ 0%{opacity:0; transform: translateY(-12px) scaleY(.98);} 100%{opacity:1; transform: translateY(0) scaleY(1);} }
@keyframes itemIn{ to{ opacity:1; transform: translateY(0);} }
@keyframes relatedIn{ to{ opacity:1; transform: translateY(0);} }
@keyframes relShine{
  0%{ transform: translateX(-30%) rotate(10deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateX(60%) rotate(10deg); opacity:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header.container, .site-header.container *, .related-grid a, .related-grid a::after{
    animation:none !important; transition:none !important; transform:none !important; opacity:1 !important;
  }
}

/* ========== Responsive ========== */
/* <= 900: wrap header row */
@media (max-width: 900px){
  .site-header.container{ flex-wrap:wrap; gap:10px 14px; padding:12px 16px; }
  .site-header.container > a{ font-size:.98rem; }
  .site-header.container nav[aria-label="Main"]{ width:100%; justify-content:flex-start; flex-wrap:wrap; gap:10px; }
  .site-header.container nav a{ padding:7px 10px; }
}

/* <= 768: center header & nav */
@media (max-width: 768px){
  :root{ --pad:14px; }
  .site-header.container{ flex-direction:column; text-align:center; }
  .site-header.container > a{ margin-bottom:6px; font-size:1rem; }
  .site-header.container nav[aria-label="Main"]{ justify-content:center; gap:12px; }
  .site-header.container nav a{ padding:6px 12px; border-radius:999px; }
  .site-header.container nav a:hover{ background: rgba(230,57,70,.1); transform: translateY(-2px); }
  .meta{ gap:6px; font-size:.9rem; }
}

/* Very small phones */
@media (max-width: 576px){
  .author-box{ flex-direction:column; align-items:flex-start; gap:10px; }
  .author-box img{ width:64px; height:64px; }
  .ad-wrap{ margin:12px 0; }
}
@media (max-width: 420px){ .related-grid{ grid-template-columns:1fr; gap:12px; } }
@media (max-width: 360px){
  :root{ --pad:12px; }
  .site-header.container nav a{ padding:6px 10px; }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 991px){
  :root{ --max:960px; }
  .post-hero{ padding:24px 0; }
}

/* Desktops */
@media (min-width: 992px){ :root{ --max:1040px; } }

/* Large desktops */
@media (min-width: 1200px){ :root{ --max:1140px; } }



/* --- Blog page scoping to kill collisions with global .container --- */
.blog header.site-header.container {
  max-width: none;          /* header spans full width */
  width: 100%;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.blog main > .container,
.blog footer.container {
  box-sizing: border-box;
  max-width: var(--max);
  width: min(100%, var(--max));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}

/* Safety: stop any horizontal overflow that makes content look shifted */
.blog html, .blog body { overflow-x: hidden; }
*,
*::before,
*::after { box-sizing: border-box; }