/* ==========================================================================
   BS24 TOC Generator — component styling (v2.9)
   Nested H2 > H3 table of contents with scroll-spy active state and a
   JS-gated collapse. LAYOUT (sticky two-column grid, viewport-capped
   max-height + own scrollbar) lives in the plugin's assets/css/post-toc.css
   — keep only the component look here.
   ========================================================================== */

.toc-generator {
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Title ("Inhaltsverzeichnis" / "Table of contents") */
.toc-generator > h3,
.toc-generator > h3#toc-title,
.toc-generator > .toc-title {
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #6b7280;
}

.toc-generator nav {
  margin: 0;
}

/* Lists — no bullets, no numbering */
.toc-generator__list,
.toc-generator__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-generator__item {
  margin: 0;
}

/* Links. The :visited selectors are required: the theme colours every visited
   anchor blue (style.css "a:where(...):visited{color:var(--text-link)}"), which
   otherwise leaves every clicked TOC row permanently blue. Higher specificity
   (.toc-generator a:visited) overrides it so the row colour stays controlled by
   .is-active alone. */
.toc-generator a,
.toc-generator a:visited {
  display: block;
  padding: 0.34rem 0.55rem;
  border-radius: 6px;
  color: #374151;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.toc-generator a:hover {
  background: #e2e8f0;
  color: #111827;
}

/* Active row (scroll-spy current or just-clicked): grey background, white text. */
.toc-generator a.is-active,
.toc-generator a.is-active:visited {
  background: #4b5563;
  color: #ffffff;
}

/* Nested H3 — Proliance-style left rule on the group; lighter, smaller links. */
.toc-generator__sub {
  margin-left: 0.55rem;
  padding-left: 0.5rem;
  border-left: 2px solid #e5e7eb;
}

.toc-generator__sub .toc-sub-item > a,
.toc-generator__sub .toc-sub-item > a:visited {
  font-weight: 500;
  font-size: 0.92em;
}

/* --------------------------------------------------------------------------
   Collapse — ONLY when JS has run (.is-enhanced). Progressive enhancement:
   without JS the full nested list stays visible (no hidden H3, no FOUC).
   Uses the grid-template-rows 0fr→1fr trick on a single overflow:hidden inner.
   -------------------------------------------------------------------------- */
.toc-generator.is-enhanced .toc-generator__subwrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.toc-generator.is-enhanced .toc-generator__subwrap > .toc-generator__sub {
  overflow: hidden;
  min-height: 0;
}

.toc-generator.is-enhanced .toc-generator__item.has-children.is-expanded > .toc-generator__subwrap {
  grid-template-rows: 1fr;
}

/* --------------------------------------------------------------------------
   Social share widget — sits inside .toc-generator, below the nav, so it rides
   the sticky right column (Proliance-style). Rendered only when enabled in
   Tools → BS24 TOC Generator.
   -------------------------------------------------------------------------- */
.toc-share {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.toc-share__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.toc-share__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.toc-share__item {
  margin: 0;
}

/* The .toc-share scope raises specificity above the generic `.toc-generator a`
   rule (0,1,1) so the round share buttons aren't flattened by the TOC link
   styling (display:block / padding / colour). */
.toc-share .toc-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #4b5563;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.toc-share .toc-share__btn:hover,
.toc-share .toc-share__btn:focus-visible {
  transform: translateY(-1px);
  color: #fff;
}

/* Icon glyph painted via CSS mask (currentColor fill) — NOT inline SVG. A late
   the_content DOMDocument pass (ShortPixel etc.) lowercases case-sensitive SVG
   attributes and breaks inline icons; stylesheet-hosted data-URIs are immune.
   The data-URI's alpha channel is the mask, so the glyph shows in currentColor
   (#4b5563 default → #fff on hover). */
.toc-share .toc-share__btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--toc-share-icon) center / contain no-repeat;
          mask: var(--toc-share-icon) center / contain no-repeat;
}

/* Where CSS masks are unsupported, suppress the ::before so it doesn't show as a
   solid coloured square (the button still works as a labelled link/button). */
@supports not ((-webkit-mask: var(--toc-share-icon)) or (mask: var(--toc-share-icon))) {
  .toc-share .toc-share__btn::before {
    display: none;
  }
}

.toc-share .toc-share__btn--linkedin {
  --toc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z'/%3E%3C/svg%3E");
}
.toc-share .toc-share__btn--email {
  --toc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z'/%3E%3Cpath d='M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z'/%3E%3C/svg%3E");
}
.toc-share .toc-share__btn--instagram {
  --toc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}
.toc-share .toc-share__btn--whatsapp {
  --toc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.36.101 11.945c0 2.096.547 4.142 1.588 5.945L0 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.582 0 11.946-5.36 11.949-11.945a11.821 11.821 0 00-3.421-8.4'/%3E%3C/svg%3E");
}
.toc-share .toc-share__btn--facebook {
  --toc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.toc-share .toc-share__btn--linkedin:hover,
.toc-share .toc-share__btn--linkedin:focus-visible { background: #0a66c2; }
.toc-share .toc-share__btn--facebook:hover,
.toc-share .toc-share__btn--facebook:focus-visible { background: #1877f2; }
.toc-share .toc-share__btn--whatsapp:hover,
.toc-share .toc-share__btn--whatsapp:focus-visible { background: #25d366; }
.toc-share .toc-share__btn--email:hover,
.toc-share .toc-share__btn--email:focus-visible { background: #4b5563; }
.toc-share .toc-share__btn--instagram:hover,
.toc-share .toc-share__btn--instagram:focus-visible {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* Instagram copy-link confirmation. */
.toc-share .toc-share__btn--instagram.is-copied {
  background: #25d366;
  color: #fff;
}

.toc-share__feedback {
  display: block;
  min-height: 1.1em;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: #16a34a;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.toc-share__feedback.is-visible {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Contact CTA — optional block under the share row (Proliance-style). Short
   prompt + a primary filled button. Rendered only when enabled in
   Tools → BS24 TOC Generator.
   -------------------------------------------------------------------------- */
.toc-contact {
  margin-top: 1.25rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid #d1d5db; /* full grey box around the contact area */
  border-radius: 10px;
}

.toc-contact__text {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: #374151;
}

/* Primary filled CTA (#0d6efd = the site's header/CTA blue). Scoped under
   .toc-contact so it outranks the generic `.toc-generator a` link styling. */
.toc-contact .toc-contact__cta,
.toc-contact .toc-contact__cta:visited {
  display: block;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  background: #0d6efd;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.toc-contact .toc-contact__cta:hover,
.toc-contact .toc-contact__cta:focus-visible {
  background: #0b5ed7;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Hide TOC on mobile (the theme layout also collapses to one column there) */
@media (max-width: 767px) {
  .toc-generator {
    display: none;
  }
}