/*
 * SR Labels — additions.css
 * Day 1 + Day 2 CSS additions
 * Link from index.html  → <link rel="stylesheet" href="assets/css/additions.css">
 *           blog/*.html → <link rel="stylesheet" href="../assets/css/additions.css">
 */

/* ── Day 2 · #6  Floating WhatsApp Button ─────────────────────── */
.wa-float {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 9999;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.25rem .75rem 1rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .88rem;
  font-family: 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: wa-pulse 2.8s ease-in-out infinite;
}
.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(37, 211, 102, .62);
}
.wa-float svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: #fff;
}
.wa-float span { white-space: nowrap; }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,.45); }
  50%       { box-shadow: 0 8px 36px rgba(37,211,102,.72); }
}

@media (max-width: 600px) {
  .wa-float span { display: none; }
  .wa-float {
    padding: .9rem;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    justify-content: center;
    bottom: 1.2rem;
    right: 1.2rem;
  }
}

/* ── Day 2 · #7  Breadcrumb Navigation ─────────────────────────── */
.breadcrumb { margin-bottom: 1.1rem; }
.breadcrumb ol {
  list-style: none;
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  align-items: center;
}
.breadcrumb li {
  font-size: .76rem;
  color: #8888A0;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.breadcrumb li:not(:last-child)::after {
  content: '›';
  color: #555570;
  margin-left: .1rem;
}
.breadcrumb a { color: #D4A017; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: #F0C040; text-decoration: underline; }
.breadcrumb li:last-child { color: #A8A8C0; }

/* ── Day 2 · #9  Keyword-rich hero subtitle (index.html only) ──── */
.hero-sub-kw {
  font-size: .92rem;
  font-weight: 500;
  color: #8888A0;
  margin-top: -.3rem;
  margin-bottom: 1.4rem;
  line-height: 1.5;
}

/* ── LCP / CLS  Hero image aspect-ratio reservation ────────────── */
.hero-img-wrap {
  aspect-ratio: 820 / 420;
  overflow: hidden;
  background: #1A1A26;
}
.art-img figure,
.art-img-row figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1A1A26;
  border-radius: 12px;
}
.art-img figure img,
.art-img-row figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── TOC active state ───────────────────────────────────────────── */
.toc-list a { transition: color .2s, padding-left .2s; }
.toc-list a.toc-active { color: #D4A017; padding-left: .5rem; font-weight: 700; }

/* ── Mobile nav open state (used by blog.js) ────────────────────── */
.nav-links.nav-open {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  background: rgba(9, 9, 14, .98);
  border-bottom: 1px solid rgba(212, 160, 23, .15);
  padding: 1.2rem 5%;
  gap: .8rem;
  z-index: 899;
}