/* ========== Vars & Base (only what's used) ========== */
:root{
  --ink:#1C2139;
  --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);}
img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block;}
figure{margin:0;}
a{color:#e63946;text-decoration:none;transition:color .3s ease;}
a:hover{color:#1C2139;}

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

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

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

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

/* ========== Responsive ========== */
@media (max-width:900px){
  .site-header.container{ flex-wrap:wrap; gap:10px 14px; padding:12px 16px; }
}
@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; flex-wrap:wrap; }
  .site-header.container nav a{ padding:6px 12px; }
  .site-header.container nav a:hover{ background:rgba(230,57,70,.1); transform:translateY(-2px); }
}

/* --- Scope for this blog page --- */
body.blog header.site-header.container{
  max-width:none; width:100%;
  padding-left:var(--pad); padding-right:var(--pad);
}
body.blog main > .container,
body.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;
}
body.blog{ overflow-x:hidden; }

/* Global box sizing safety */
*,*::before,*::after{ box-sizing:border-box; }

/* Phones: brand on first line, nav on second single line */
@media (max-width: 768px){
  .site-header.container{
    display:flex;
    flex-direction: column;   /* stack brand, then nav */
    align-items: center;
  }

  /* brand */
  .site-header.container > a{
    margin: 0 0 6px;          /* space below brand */
    font-size: 1rem;
    text-align: center;
  }

  /* nav: one horizontal row with sideways scroll if needed */
  .site-header.container nav[aria-label="Main"]{
    width: 100%;
    display: flex;
    justify-content: center;  /* center the links; use flex-start for left */
    gap: 12px;
    flex-wrap: nowrap;        /* keep on one line */
    white-space: nowrap;      /* prevent wrapping */
    overflow-x: auto;         /* allow horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }

  .site-header.container nav a{
    flex: 0 0 auto;           /* don't shrink to new lines */
    padding: 6px 10px;
  }

  /* optional: hide scrollbar on iOS/Chrome */
  .site-header.container nav::-webkit-scrollbar{ display:none; }
}


/* CTA row layout */
.cta-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

/* Base button */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;            /* equal widths inside the grid */
  min-height: 44px;       /* equal height */
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(230,57,70,.35);
  background: #fff;
  color: #1C2139;
  text-decoration: none;
  position: relative;
  overflow: hidden;       /* needed for animation overlays */
  transition:
    transform .35s cubic-bezier(.25,1,.5,1),
    box-shadow .35s cubic-bezier(.25,1,.5,1),
    background .25s, color .25s, border-color .25s;
}

/* Primary variant */
.btn-primary{
  background: var(--brand);   /* #e63946 */
  color: #fff;
  border-color: rgba(230,57,70,.6);
}

/* Hover lift */
.btn:hover,
.btn:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  outline: none;
}

/* --- Animation like "Related" cards (bar + shine) --- */
.btn-animated::before{
  content:"";
  position:absolute;
  inset:0 0 0 auto;           /* right edge */
  width:0;
  background: var(--brand);
  opacity:.12;
  transition: width .35s cubic-bezier(.25,1,.5,1), opacity .25s;
  z-index:0;
}
.btn-animated::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;
}
.btn-animated:hover::before,
.btn-animated:focus-visible::before{
  width:8px;                  /* same side bar effect as related cards */
  opacity:.18;
}
.btn-animated:hover::after{
  animation: relShine .9s ease forwards; /* shiny sweep */
}

/* keyframes reused from related cards */
@keyframes relShine{
  0%{ transform: translateX(-30%) rotate(10deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateX(60%) rotate(10deg); opacity:0; }
}

/* Mobile: stack, center, full-width */
@media (max-width: 600px){
  .cta-row{
    grid-template-columns: 1fr;   /* one per line */
    justify-items: stretch;
  }
  .cta-row .btn{
    width: 100%;                  /* full width buttons */
  }
}