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

body{font-family:Mulish,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.7;color:#333;margin:0}
header,main,footer{display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

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

/* ========== Header (sticky + animated) ========== */
.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;
}

/* 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:inline-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);
}

/* sticky elevation on scroll (toggled by JS) */
.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;
}

/* ========== Content blocks ========== */
.post-hero{display:grid;gap:18px;padding:28px 0}
.post-hero h1{margin:0;color:var(--ink);font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.25}
.meta{color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:10px}
.hero-img{width:100%;height:auto;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 0;font-size:1rem;color:var(--ink)}
.toc a{color:var(--brand)}

article h2{color:var(--ink);margin-top:28px}
article h3{color:var(--ink);margin-top:24px}
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}
.author-box img{width:56px;height:56px;border-radius:50%;object-fit:cover}

/* Breadcrumbs */
.breadcrumbs{font-size:.9rem;margin:10px 0;color:#7a7a7a}
.breadcrumbs a{color:var(--brand);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}

/* ========== Social share icons ========== */
.social-list{ display:flex; gap:10px; list-style:none; padding:0; margin:0; }
.social-link{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; transition:transform .3s }
.social-link:hover{ transform: translateY(-2px); }
.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-bottom:12px; font-size: clamp(1.1rem, 1.5vw, 1.25rem); color:var(--ink);}
.related-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.related a{color:var(--ink);text-decoration:none}
.related a:hover{text-decoration:underline}

/* Fancy card animation for related items */
.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 ========== */
@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; }
}

/* ========== Responsive ========== */
@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; }
}

@media (max-width: 768px){
  .site-header.container{ flex-direction:column; justify-content:center; text-align:center; }
  .site-header.container > a{ margin-bottom:10px; font-size:1rem; font-weight:700; color:var(--ink); }
  .site-header.container nav[aria-label="Main"]{ justify-content:center; flex-wrap:wrap; gap:12px; }
  .site-header.container nav a{ padding:6px 12px; border-radius:999px; transition: background .3s, transform .3s; }
  .site-header.container nav a:hover{ background: rgba(230,57,70,.1); transform: translateY(-2px); }
}

/* Very small phones */
@media (max-width: 576px){
  .author-box{ flex-wrap:wrap; }
}
@media (max-width: 420px){
  .related-grid{ grid-template-columns:1fr; gap:12px; }
}

/* 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;
  }
}

/* Optional dark mode */
@media (prefers-color-scheme: dark){
  .related-grid a{ background:#121418; border-color:#222631; color:#e8e9ee; }
}

/* --- CENTER & OVERFLOW GUARD (add at end) --- */

/* 1) Hard-center the content containers */
main > .container,
footer.container {
  max-width: var(--max);
  width: min(100%, var(--max));
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
  box-sizing: border-box;
}

/* Keep header full-width but prevent layout shift */
.site-header.container {
  width: 100%;
  box-sizing: border-box;
}

/* 2) Kill horizontal scroll caused by any rogue child */
html, body { overflow-x: hidden; }

/* 3) Elements that commonly overflow on blogs */
.ad-wrap,
.toc,
.post-hero,
article,
.related { overflow: hidden; }

/* 4) Google Ads can inject fixed widths – clamp them */
ins.adsbygoogle,
.adsbygoogle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 5) Safety for images/iframes inside rich content */
article img,
article iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}


/* Blog-only centering to defeat external/global .container rules */
.blog main > .container,
.blog footer.container {
  max-width: var(--max);
  width: min(100%, var(--max));
  margin-inline: auto !important;
  padding-inline: var(--pad) !important;
  box-sizing: border-box;
}

/* Header stays full width */
.blog .site-header.container {
  width: 100%;
  max-width: none;
  padding-inline: var(--pad);
}


@media (max-width: 768px) {
  .site-header.container {
    flex-direction: row;          /* single header row */
    align-items: center;
    gap: 10px;
  }

  .site-header.container > a {
    margin: 0;
    font-size: .95rem;
    white-space: nowrap;
  }

  .site-header.container nav[aria-label="Main"] {
    flex: 1 1 auto;               /* take remaining width */
    display: flex;
    flex-wrap: nowrap;            /* one line */
    gap: 8px;
    justify-content: flex-start;
    overflow-x: auto;             /* side-scroll if needed */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-header.container nav[aria-label="Main"]::-webkit-scrollbar { display: none; }

  .site-header.container nav[aria-label="Main"] a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 10px;
  }
}

/* Breadcrumb chips — keep Home & Blog identical */
.breadcrumbs a{
  background: #f7f8fa;
  border: 1px solid #eef0f3;
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
}



/* 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%);
}