/* Siskon Siivous — single-article custom template
   Scoped to .ss-article and friends. Inherits site fonts and palette
   from Breakdance globals where possible, falls back to safe defaults. */

:root {
  --ss-color-text: #212121;
  --ss-color-muted: #595959;
  --ss-color-border: #e8e6e1;
  --ss-color-bg-soft: #faf7f1;
  --ss-color-bg-cta: #fff8ec;
  --ss-color-brand: #f90; /* matches existing .wp-block-button background */
  --ss-color-brand-dark: #d97c00;
  /* Use --ss-color-brand-deep for small-text accents (eyebrows,
     attributions, kategoria-pillut). #a04f00 hits WCAG AA contrast
     5.0+ on white where the brand-dark variant only manages 3.07. */
  --ss-color-brand-deep: #a04f00;
  --ss-color-accent: #fcb900;
  --ss-radius: 12px;
  --ss-radius-sm: 8px;
  --ss-shadow: 0 8px 24px rgba(20, 20, 20, 0.08);
  --ss-shadow-lg: 0 24px 48px rgba(20, 20, 20, 0.12);
  --ss-max: 78rem;
  --ss-content: 50rem;
  --ss-font-display: "Platypi", "Times New Roman", Georgia, serif;
  --ss-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Reading-progress bar — slim brand-orange strip pinned to the top of the
   viewport, scaled horizontally from scroll position within <article>. */
.ss-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 10000;
  pointer-events: none;
}
.ss-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ss-color-brand) 0%, var(--ss-color-brand-dark) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.05s linear;
  box-shadow: 0 0 8px rgba(217, 124, 0, 0.4);
}
@media print {
  .ss-progress { display: none; }
}

/* Layout container ------------------------------------------------------- */
.ss-article-main {
  display: block;
  background: var(--ss-color-bg-soft);
  color: var(--ss-color-text);
  font-family: var(--ss-font-body);
  line-height: 1.6;
}

.ss-article {
  max-width: none;
  margin: 0;
  padding: 0 0 4rem;
}

/* Hero — featured image background + orange overlay, BD-style cinematic --- */
.ss-article__hero {
  position: relative;
  isolation: isolate;
  /* Extra top padding so the BD sticky header sits well above the
     breadcrumb instead of pressing against it. Visually "breathes". */
  padding: 11rem 1.5rem 6rem;
  background-color: #1d1d1f;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-bottom: none;
}
@media (max-width: 760px) {
  .ss-article__hero { padding: 7.5rem 1.25rem 4.5rem; }
}
.ss-article__hero--has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.ss-article__hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(20,20,20,0.55) 0%, rgba(217,124,0,0.55) 100%),
    radial-gradient(circle at 80% 20%, rgba(255,153,0,0.45), transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.ss-article__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 64rem;
  margin: 0 auto;
  color: #fff;
}

.ss-article__hero .ss-breadcrumb {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 1.25rem;
}
.ss-article__hero .ss-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.ss-article__hero .ss-breadcrumb li + li::before {
  content: "›";
  margin-right: 0.6rem;
  color: rgba(255,255,255,0.6);
}
.ss-article__hero .ss-breadcrumb a {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
}
.ss-article__hero .ss-breadcrumb a:hover { color: #fff !important; text-decoration: underline; }
.ss-article__hero .ss-breadcrumb [aria-current="page"] { color: #fff !important; font-weight: 500; }

.ss-article__eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 999px;
}

.ss-article-main h1.ss-article__title,
.ss-article h1.ss-article__title {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
  color: #fff;
  max-width: 56rem;
}

.ss-article__deck {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.92);
  margin: 0 0 1.75rem;
  max-width: 50rem;
}

.ss-article__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}
.ss-article__author-avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
.ss-article__meta-text { margin: 0; color: rgba(255,255,255,0.95); }
.ss-article__meta-text p { margin: 0; }
.ss-article__byline-label { color: rgba(255,255,255,0.7); font-size: 0.85rem; margin-right: 0.35rem; }
.ss-article__author { color: #fff; }
.ss-article__author strong { font-weight: 600; color: #fff; }
.ss-article__dates {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.ss-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ss-article__meta-item .ss-icon {
  flex-shrink: 0;
  color: rgba(255,255,255,0.85);
}
.ss-article__author-avatar {
  border: 2px solid rgba(255,255,255,0.6);
}

.ss-article__hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 2rem;
}

/* Key facts ribbon — sits right under the hero, lifts into the hero ----- */
.ss-keyfacts {
  background: transparent;
  padding: 0 1.5rem;
  margin-top: -3rem;
  position: relative;
  z-index: 3;
}
.ss-keyfacts__inner {
  max-width: var(--ss-max);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--ss-radius);
  padding: 2rem 2rem 2.25rem;
  box-shadow: var(--ss-shadow-lg);
}
.ss-keyfacts__heading {
  margin: 0 0 1.5rem;
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.2;
  color: var(--ss-color-text);
  text-align: center;
}
.ss-keyfacts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .ss-keyfacts__grid--n1 { grid-template-columns: 1fr; max-width: 32rem; margin: 0 auto; }
  .ss-keyfacts__grid--n2 { grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 48rem; margin: 0 auto; }
  .ss-keyfacts__grid--n3 { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .ss-keyfacts__grid--n4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.ss-keyfacts__item {
  padding: 0.5rem 0.25rem;
  border-top: 3px solid var(--ss-color-brand);
  display: flex;
  flex-direction: column;
}
.ss-keyfacts__item h3 {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: 1.05rem;          /* slightly smaller to fit "Siskon Siivouksella" etc. */
  margin: 0.5rem 0 0.6rem;
  color: var(--ss-color-text);
  line-height: 1.25;
  /* Reserve a uniform height for ~2 lines so cards line up even when
     one title is markedly longer than the others. */
  min-height: 2.6em;
}
@media (max-width: 759px) {
  .ss-keyfacts__item h3 { min-height: 0; }
}
.ss-keyfacts__item p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ss-color-text);
  line-height: 1.5;
}
.ss-keyfacts__num {
  display: inline-block;
  font-family: var(--ss-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ss-color-brand-deep);  /* WCAG AA 5.0+ on white */
  letter-spacing: 1px;
}

/* Layout (TOC + content) ------------------------------------------------ */
.ss-article__layout {
  max-width: var(--ss-max);
  margin: 3.5rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  background: transparent;
}

@media (min-width: 980px) {
  .ss-article__layout {
    grid-template-columns: 15rem minmax(0, var(--ss-content));
    justify-content: center;
    gap: 3rem;
    /* Note: do NOT add `align-items: start` here — it would collapse the
       left grid cell to the TOC's intrinsic height and the sticky TOC
       would scroll away as soon as the reader passed it. Leaving the
       default (stretch) keeps the cell as tall as the whole layout. */
  }
  .ss-article__content-col { grid-column: 2; }
}

/* TOC ------------------------------------------------------------------- */
.ss-article__toc {
  font-size: 0.95rem;
}
.ss-article__toc-sticky {
  background: var(--ss-color-bg-soft);
  border-radius: var(--ss-radius);
  padding: 1.25rem 1.25rem 1.5rem;
}
@media (min-width: 980px) {
  .ss-article__toc-sticky {
    position: sticky;
    top: 6rem;
  }
}
.ss-article__toc-title {
  font-family: var(--ss-font-display);
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  color: var(--ss-color-text);
}
.ss-article__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ss-toc;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ss-article__toc ol li {
  counter-increment: ss-toc;
  padding-left: 1.6rem;
  position: relative;
  line-height: 1.4;
}
.ss-article__toc ol li::before {
  content: counter(ss-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--ss-color-brand-dark);
  font-weight: 600;
  font-size: 0.8rem;
}
.ss-article__toc a {
  color: var(--ss-color-text);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.ss-article__toc a:hover { border-bottom-color: var(--ss-color-brand-dark); color: var(--ss-color-brand-dark); }
.ss-article__toc-cta { margin-top: 1.5rem; }
.ss-article__toc-cta .ss-btn {
  display: flex;            /* full-width inside the TOC card */
  width: 100%;
  padding: 0.85rem 1rem;    /* ≥ 44px touch target */
}

/* Article content ------------------------------------------------------- */
.ss-article__content {
  font-size: 1.08rem;
  color: var(--ss-color-text);
  background: #fff;
  padding: 2.5rem 2.5rem 2rem;
  border-radius: var(--ss-radius);
  box-shadow: 0 2px 16px rgba(20,20,20,0.04);
}
@media (max-width: 760px) {
  .ss-article__content { padding: 1.5rem 1.25rem; }
}
.ss-article__content > * { max-width: var(--ss-content); }
.ss-article__content > .wp-block-image,
.ss-article__content > figure { max-width: none; }

.ss-article__content h2,
.ss-article .ss-article__content h2 {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.2;
  margin: 3rem 0 1rem;
  scroll-margin-top: 6rem;
  /* BD's presets.css forces brand-orange on h2 which fails WCAG AA
     (2.14 contrast on white). Override with dark for body H2s. */
  color: #212121 !important;
}
.ss-article__content h2 strong { font-weight: 500; }
.ss-article__content h3 {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}
.ss-article__content p { margin: 0 0 1.1rem; }
.ss-article__content a {
  color: var(--ss-color-brand-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ss-article__content a:hover { color: #b85f00; }
.ss-article__content ul, .ss-article__content ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.ss-article__content li { margin-bottom: 0.5rem; }
.ss-article__content li strong { color: var(--ss-color-text); }
.ss-article__content figure {
  margin: 1.75rem auto;
  border-radius: var(--ss-radius);
  overflow: hidden;
}
.ss-article__content figure img {
  width: 100%;
  height: auto;
  display: block;
}
.ss-article__content .wp-block-spacer { max-width: 100%; }

/* Inherit lightweight-accordion styling but tighten the spacing inside the article */
.ss-article__content .lightweight-accordion {
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius-sm);
  margin-bottom: 0.5rem;
}
.ss-article__content .lightweight-accordion[open] { background: var(--ss-color-bg-soft); }

/* Customer story callout — sits inline inside .ss-article__content but
   visually breaks out of the white content card with its peach-orange
   gradient. Negative margins let it span the full content-card width
   minus its own padding. */
.ss-story {
  margin: 3rem -2.5rem;
  padding: 0;
  max-width: none;
}
@media (max-width: 760px) {
  .ss-story { margin: 2rem -1.25rem; }
}
.ss-story__inner {
  position: relative;
  background: linear-gradient(135deg, #fff5e1 0%, #ffdfac 100%);
  border-radius: var(--ss-radius);
  padding: 3rem 2.5rem 2.5rem;
  overflow: hidden;
  isolation: isolate;
}
.ss-story__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 110%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(circle at 10% 0%, rgba(217,124,0,0.18), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
.ss-story__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ss-color-brand-deep);
}
.ss-story__title {
  position: relative;
  z-index: 1;
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 1.5rem;
  color: var(--ss-color-text);
  max-width: 38rem;
}
.ss-story__quote {
  position: relative;
  z-index: 1;
  margin: 0 0 1.5rem;
  padding-left: 4.5rem;
  min-height: 4rem;
}
.ss-story__mark {
  position: absolute;
  top: -1.25rem;
  left: 0;
  font-family: var(--ss-font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--ss-color-brand);
  font-weight: 700;
  user-select: none;
}
.ss-story__quote p {
  font-family: var(--ss-font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.4;
  margin: 0 0 0.75rem;
  color: var(--ss-color-text);
  font-style: italic;
}
.ss-story__attribution {
  font-family: var(--ss-font-body);
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ss-color-brand-deep);
  letter-spacing: 0.5px;
}
.ss-story__followup {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 48rem;
  font-size: 1rem;
  color: var(--ss-color-text);
}
.ss-story__followup a {
  color: var(--ss-color-brand-dark);
  font-weight: 600;
}
@media (max-width: 600px) {
  .ss-story__inner { padding: 2.25rem 1.5rem 1.75rem; }
  .ss-story__quote { padding-left: 0; padding-top: 2rem; }
  .ss-story__mark { font-size: 5rem; top: -0.5rem; left: -0.25rem; }
}

/* Author card ---------------------------------------------------------- */
.ss-author-card {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.25rem;
  align-items: start;
  margin: 3rem auto 2rem;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  max-width: var(--ss-content);
}
.ss-author-card__avatar {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.ss-author-card__label { margin: 0; color: var(--ss-color-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.ss-author-card__name { margin: 0.15rem 0 0.5rem; font-family: var(--ss-font-display); font-size: 1.35rem; }
.ss-author-card__bio { margin: 0 0 0.75rem; color: var(--ss-color-text); }
.ss-author-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.ss-author-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ss-color-brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.ss-author-card__link:hover { text-decoration: underline; }

/* Share row */
.ss-share {
  max-width: var(--ss-content);
  margin: 2.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius);
  background: #fff;
}
.ss-share__label {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ss-color-muted);
}
.ss-share__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ss-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.1rem;       /* ↑ from 0.5/0.95 — meet 44px touch-target */
  min-height: 44px;
  border: 1px solid var(--ss-color-border);
  background: #fff;
  border-radius: 999px;
  font-family: var(--ss-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ss-color-text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ss-share__btn:hover {
  border-color: var(--ss-color-brand-dark);
  background: var(--ss-color-bg-cta);
  color: var(--ss-color-brand-dark);
}
.ss-share__btn--linkedin:hover { color: #0077b5; border-color: #0077b5; background: #f0f7fb; }
.ss-share__btn.is-copied { background: var(--ss-color-bg-cta); color: var(--ss-color-brand-dark); border-color: var(--ss-color-brand-dark); }

/* Bottom CTA ----------------------------------------------------------- */
.ss-article__bottom-cta {
  margin: 3rem 1.5rem;
  max-width: var(--ss-max);
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, #fff5e1 0%, #ffe2b2 100%);
  border-radius: var(--ss-radius);
  padding: 2.5rem 2rem;
}
.ss-article__bottom-cta-inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}
.ss-article__bottom-cta-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ss-color-brand-dark);
}
.ss-article__bottom-cta h2 {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  margin: 0 auto 0.75rem;
  line-height: 1.15;
  max-width: 38rem;
}
.ss-article__bottom-cta p {
  margin: 0 0 1.5rem;
  color: var(--ss-color-text);
  font-size: 1.08rem;
}
.ss-article__bottom-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.ss-trust-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--ss-color-text);
}
.ss-trust-row li span { color: var(--ss-color-brand-dark); margin-right: 0.4rem; font-weight: 700; }

/* Related -------------------------------------------------------------- */
.ss-related {
  margin: 3rem auto 0;
  max-width: var(--ss-max);
  padding: 0 0.25rem;
}
.ss-related h2 {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
  margin: 0 0 1.5rem;
  text-align: center;
}
.ss-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .ss-related__grid { grid-template-columns: repeat(3, 1fr); }
}
.ss-related__card {
  display: block;
  background: #fff;
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius);
  overflow: hidden;
  color: var(--ss-color-text);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ss-related__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ss-shadow);
}
.ss-related__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ss-color-bg-soft);
}
.ss-related__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-related__body { padding: 1rem 1.25rem 1.25rem; }
.ss-related__cat { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ss-color-brand-deep); }
.ss-related .ss-related__title,
.ss-related .ss-related__card .ss-related__title {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.3;
  color: var(--ss-color-text);
}

/* Buttons -------------------------------------------------------------- */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  line-height: 1;
  border: 2px solid transparent;
}
.ss-btn:active { transform: translateY(1px); }
.ss-btn--primary { background: var(--ss-color-brand); color: #fff; }
.ss-btn--primary:hover { background: var(--ss-color-brand-dark); }
.ss-btn--ghost { background: transparent; color: var(--ss-color-text); border-color: var(--ss-color-text); }
.ss-btn--ghost:hover { background: var(--ss-color-text); color: #fff; }
.ss-btn--ghost-light { background: #fff; color: #000; border-color: #fff; }
.ss-btn--ghost-light:hover { background: #f2f2f2; color: #000 !important; border-color: #f2f2f2; }
.ss-btn--lg { padding: 1rem 1.75rem; font-size: 1.05rem; }
.ss-btn--sm { padding: 0.6rem 1rem; font-size: 0.9rem; }

/* Sticky mobile CTA ---------------------------------------------------- */
.ss-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: none;
  justify-content: center;
  gap: 0;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ss-color-border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
  z-index: 9999;
  transform: translateY(0);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.ss-sticky-cta--hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
.ss-sticky-cta__btn {
  /* Keskitetty, ei koko leveyttä — jättää alanurkat vapaaksi
     Cookiebotin kelluvalle evästekuvakkeelle. */
  flex: 0 1 auto;
  min-width: 14rem;
  max-width: 22rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  margin: 0 0.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.ss-sticky-cta__btn--primary { background: var(--ss-color-brand); color: #fff; }

@media (max-width: 760px) {
  .ss-sticky-cta { display: flex; }
  body.single-post { padding-bottom: 4.5rem; } /* leave room for the sticky bar */
}

/* Small screen tweaks -------------------------------------------------- */
@media (max-width: 760px) {
  .ss-article { padding: 0 1rem 3rem; }
  .ss-article__hero { padding-top: 1.5rem; }
  .ss-author-card { grid-template-columns: 1fr; text-align: left; }
  .ss-author-card__avatar { width: 72px; height: 72px; }
  .ss-article__bottom-cta { padding: 1.75rem 1.25rem; }
}

/* Focus styles — accessible keyboard focus for all interactive elements
   inside the article. Uses :focus-visible so mouse users don't see the
   outline, only keyboard navigators. */
.ss-article-main :focus-visible,
.ss-sticky-cta :focus-visible {
  outline: 2px solid var(--ss-color-brand-dark);
  outline-offset: 3px;
  border-radius: 4px;
}
.ss-btn:focus-visible,
.ss-share__btn:focus-visible,
.ss-sticky-cta__btn:focus-visible {
  outline-offset: 4px;
}

/* Mobile author-bar stack — narrow viewports get avatar above the meta
   text instead of beside it, so labels never wrap awkwardly. */
@media (max-width: 480px) {
  .ss-article__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .ss-article__author-avatar { width: 56px; height: 56px; }
}

/* Print ---------------------------------------------------------------- */
@media print {
  .ss-sticky-cta,
  .ss-article__hero-cta,
  .ss-article__bottom-cta,
  .ss-article__toc,
  .ss-related { display: none !important; }
}


/* Fix: articles without a TOC (<3 H2s) use a single centered content column
   instead of leaving the 16rem TOC track empty on desktop. */
@media (min-width: 980px) {
  .ss-article__layout--no-toc {
    grid-template-columns: minmax(0, var(--ss-content));
    justify-content: center;
  }
  .ss-article__layout--no-toc .ss-article__content-col {
    grid-column: 1;
  }
}


/* Fix: BD presets.css forces brand-orange (fails WCAG) + 44px on h3/h4 in
   article content. Force dark + correct size. Separate single-selector rules
   so WP Rocket's minify cannot collapse a comma group and drop the override. */
.ss-article__content h3 { color: #212121 !important; font-size: 1.35rem !important; }
.ss-article__content h4 { color: #212121 !important; font-size: 1.15rem !important; }
.ss-article__content h2 { color: #212121 !important; }

/* Sidebar sales CTA */
.ss-article__toc-cta-lead {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: #212121;
  margin: 0 0 0.4rem;
}
.ss-article__toc-cta-sub {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4b4b4b;
  margin: 0 0 0.9rem;
}
.ss-article__toc-cta-phone {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ss-color-brand-dark);
  text-decoration: none;
}
.ss-article__toc-cta-phone:hover { text-decoration: underline; }