/* Blog article layout + decorative stickers.
   Shared by every post in /blog/ — link this after birthday.css and the prose,
   FAQ and decoration styling all come along. */

/* ---------- prose ---------- */
.article { max-width: 860px; margin: 0 auto; position: relative; z-index: 2; }
.article p { color: rgba(255, 255, 255, 0.82); line-height: 1.75; margin: 0 0 1.1rem; }
.article h3 { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.25rem; color: #fff; margin: 2rem 0 0.6rem; }
.article h3 em { font-style: normal; color: var(--cyan); }
.facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0; }
.faq dt { font-family: "Fredoka", sans-serif; font-weight: 600; color: #fff; margin-top: 1.4rem; }
.faq dd { margin: 0.4rem 0 0; color: rgba(255, 255, 255, 0.82); line-height: 1.7; }

/* ---------- pricing tables in articles ----------
   Wide tables must scroll inside their own container, never widen the page. */
.table-wrap { overflow-x: auto; margin: 1.2rem 0 1.4rem; -webkit-overflow-scrolling: touch; }
.cost-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 0.94rem; }
.cost-table th, .cost-table td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.cost-table th {
  font-family: "Fredoka", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink); /* yellow header needs dark text */
  background: var(--yellow);
}
.cost-table th:first-child { border-top-left-radius: 10px; }
.cost-table th:last-child { border-top-right-radius: 10px; }
.cost-table td { color: rgba(255, 255, 255, 0.84); }
.cost-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.035); }
.cost-table small { color: var(--pink); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- blog index: post cards ---------- */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.post-card a {
  display: block;
  padding: 1.5rem 1.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.post-card a:hover { border-color: var(--pink); background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); }
.post-card__tag {
  display: inline-block;
  font-family: "Fredoka", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink); /* yellow is light — dark text, never white */
  background: var(--yellow);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.post-card__title { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.3rem; color: #fff; margin: 0.8rem 0 0.5rem; }
.post-card__ex { color: rgba(255, 255, 255, 0.78); line-height: 1.65; margin: 0 0 0.9rem; }
.post-card__more { color: var(--cyan); font-weight: 600; font-size: 0.95rem; }
.blog-index__foot { margin-top: 2rem; }
.article a { color: var(--cyan); }

/* ---------- decorative doodles & character stickers ----------
   Purely ornamental: aria-hidden, non-interactive, and confined to the empty
   gutters either side of the 860px prose column. They're hidden below 1100px,
   where those gutters no longer exist — on a phone there is no empty space to
   decorate and they'd only collide with the text. All offsets stay >= 0 so a
   sticker can never widen the page (see the visit-scrapbook overflow trap). */
.blog-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.blog-deco > * { position: absolute; }

.blog-star { color: var(--yellow); opacity: 0.9; }
.blog-star--cyan { color: var(--cyan); }
.blog-star--pink { color: var(--pink); }

.blog-char {
  width: 150px;
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

/* sections need a positioning context for the absolute layer */
.bd-section, .bd-hero, .bd-cta { position: relative; }

/* per-slot placement */
.blog-deco--article .blog-char { top: 8%; right: 1.5%; transform: rotate(4deg); }
.blog-deco--article .blog-star { top: 4%; left: 3%; width: 54px; }
.blog-deco--article .blog-star--cyan { top: auto; bottom: 8%; left: 5%; width: 38px; }

.blog-deco--faq .blog-char { top: 12%; left: 2%; transform: rotate(-5deg); width: 135px; }
.blog-deco--faq .blog-star { top: 10%; right: 4%; width: 46px; }
.blog-deco--faq .blog-star--pink { top: auto; bottom: 12%; right: 7%; width: 34px; }

.blog-hero-star { position: absolute; top: 14%; right: 6%; width: 70px; color: var(--yellow); opacity: 0.95; pointer-events: none; z-index: 2; }

@media (max-width: 1100px) {
  .blog-deco, .blog-hero-star { display: none; }
}