/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Armin Hümbert
 Author URI:   https://mandantenfilter.de
 Template:     generatepress
 Version:      0.3
*/

/* =========================================
   1 Global Variables (:root)
   ========================================= */
:root {
   /* --- 1.1 Colors --- */
   --primary-50:  var(--mint-50); 
   --primary-100: var(--mint-100);
   --primary-200: var(--mint-200);
   --primary-300: var(--mint-300);
   --primary-400: var(--mint-400);
   --primary-500: var(--mint-500);
   --primary-600: var(--mint-600);
   --primary-700: var(--mint-700);
   --primary-800: var(--mint-800);
   --primary-900: var(--mint-900);
   --primary-950: var(--mint-950);

   --accent-50:  var(--razz-50); 
   --accent-100: var(--razz-100);
   --accent-200: var(--razz-200);
   --accent-300: var(--razz-300);
   --accent-400: var(--razz-400);
   --accent-500: var(--razz-500);
   --accent-600: var(--razz-600);
   --accent-700: var(--razz-700);
   --accent-800: var(--razz-800);
   --accent-900: var(--razz-900);
   --accent-950: var(--razz-950);

   --secondary-50:  var(--purple-50);
   --secondary-100: var(--purple-100);
   --secondary-200: var(--purple-200);
   --secondary-300: var(--purple-300);
   --secondary-400: var(--purple-400);
   --secondary-500: var(--purple-500);
   --secondary-600: var(--purple-600);
   --secondary-700: var(--purple-700);
   --secondary-800: var(--purple-800);
   --secondary-900: var(--purple-900);
   --secondary-950: var(--purple-950);

   /* --- 1.2 Borders Radius - Primitives --- */
   --radius-xs:   1px;
   --radius-s:    2px;
   --radius-m:    4px;
   --radius-l:    8px;
   --radius-xl:   16px;
   --radius-full: 999px;

   /* --- 1.3 Borders Radius - Semantic --- */
	--button-radius:        var(--radius-xs);
	--card-radius-tiny:     var(--radius-xs);
	--card-radius-compact:  var(--radius-s);
	--card-radius-default:  var(--radius-m);
	--card-radius-big: 		var(--radius-l);
	--card-callout-radius:  var(--radius-xs);
	--card-quote-radius:    var(--radius-l);
	--image-radius-default: var(--radius-xs);

   /* --- 1.4 Shadows --- */
   /* Schattenfarbe und Intensität als Variablen für konsistente Schatten über die Seite hinweg */
   /* Utility Klassen finden sich weiter unten, hier werden nur die Farb- und Intensitätsvariablen definiert */
   --shadow-color: 216 43% 9%; /* entspricht --neutral-900 */
   --shadow-strength: 1.0; /* Schattenintensität hier konfigurieren. Werte zwischen 0 und 2 empfohlen. Default 0.8 */

   --shadow-s:
      0 1px 2px  hsl(var(--shadow-color) / calc(0.10 * var(--shadow-strength))),
      0 2px 6px  hsl(var(--shadow-color) / calc(0.06 * var(--shadow-strength)));

   --shadow-m:
      0 1px 2px  hsl(var(--shadow-color) / calc(0.10 * var(--shadow-strength))),
      0 4px 10px hsl(var(--shadow-color) / calc(0.07 * var(--shadow-strength))),
      0 8px 20px hsl(var(--shadow-color) / calc(0.04 * var(--shadow-strength)));

   --shadow-l:
      0 1px 2px   hsl(var(--shadow-color) / calc(0.10 * var(--shadow-strength))),
      0 4px 10px  hsl(var(--shadow-color) / calc(0.08 * var(--shadow-strength))),
      0 12px 28px hsl(var(--shadow-color) / calc(0.07 * var(--shadow-strength)));

   /* --- 1.5 Spacing & Layout Primitives --- */
	--space-xxs: 4px;
	--space-xs: 8px;
	--space-s: 16px;
	--space-sm: 24px;
	--space-m: 32px;
	--space-l: 64px;
	--space-xl: 128px;
	--space-xxl: 256px;

   /* --- 1.6 Spacing & Layout Semantic --- */
	--layout-max-width: 1280px;
	--page-gutter-mobile: var(--space-s);
	--column-gutter: var(--space-s);

	--section-v-gap-desktop: calc(var(--space-xl) /2);
	--section-v-gap-mobile: var(--space-l);
	--section-header-gap: var(--space-m);

	--header-padding-desktop: var(--space-s);
	--header-margin-top-desktop: var(--space-l);
	--header-margin-top-mobile: var(--space-m);

	--card-padding-tiny: var(--space-xxs);
	--card-padding-compact: var(--space-xs);
	--card-padding-default: var(--space-s);
	--card-padding-big: var(--space-m);
	--card-padding-vbig: var(--space-l);
	--card-sidebar: var(--space-xxs);

	--component-stack-gap-tiny: var(--space-xs);
	--component-stack-gap-compact: var(--space-s);
	--component-stack-gap-default: var(--space-m);
	--component-stack-gap-big: var(--space-l);

	--text-paragraph-gap: var(--space-s);
	--text-heading-gap: var(--space-xs);
	--list-item-gap: var(--space-xxs);
	--image-caption-gap: var(--space-xxs);

	--button-group-gap: var(--space-s);
	--button-padding-h: var(--space-m);
	--button-padding-v: var(--space-s);

	--icon-text-gap: var(--space-xs);

	--form-input-padding-h: var(--space-s);
	--form-input-padding-v: var(--space-xs);
	--form-input-label-gap: var(--space-xxs);

	--category-pill-padding-h: var(--space-xxs);
	--category-pill-padding-v: var(--space-xs);

	--slide-up-distance: var(--space-s);

   }
   

   /* =========================================
   2 Base Layout & Resets
   ========================================= */

/* --- 2.1 HTML/Body Defaults --- */
html {
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: var(--primary-500) var(--neutral-50);
    scroll-margin-top: calc(var(--header-height) + 20px);
}

body {
	overflow-x: hidden;
	width: 100%;
}

/* Custom Scrollbar (Webkit) */
body::-webkit-scrollbar {
   width: 8px;
}
body::-webkit-scrollbar-track {
   background: var(--neutral-200);
}
body::-webkit-scrollbar-thumb {
	background-color: var(--primary-900);
	border-radius: 6px;
	border: 3px solid var(--neutral-300);
}

.generate-back-to-top {
	border: 1px solid var(--neutral-400);
}

/* Shift header down for the WP Admin Bar on Desktop */
body.admin-bar .custom-header {
    top: 32px;
}

/* Shift header down for the thicker WP Admin Bar on Mobile (WP native breakpoint) */
@media screen and (max-width: 782px) {
    body.admin-bar .custom-header {
        top: 46px;
    }
}


/* Text Selection */
::selection {
	background-color: var(--primary-700);
	color: var(--neutral-100);
}

/* --- 2.2 Structural Overrides --- */
/* Set main content area height */
#main {
	min-height: 65vh;
}

/* =========================================
3 Typography
========================================= */

/* --- 3.1 Typography Variables --- */
:root {
   --fs-h1: clamp(2.313rem, 1.772rem + 2.706vw, 3.802rem);
   --fs-h2: clamp(2.011rem, 1.614rem + 1.985vw, 3.103rem);
   --fs-h3: clamp(1.749rem, 1.464rem + 1.426vw, 2.533rem);
   --fs-h4: clamp(1.521rem, 1.322rem + 0.995vw, 2.068rem);
   --fs-h5: clamp(1.323rem, 1.19rem + 0.665vw, 1.688rem);
   --fs-h6: clamp(1.15rem, 1.067rem + 0.415vw, 1.378rem);
   --fs-p: clamp(1rem, 0.955rem + 0.227vw, 1.125rem);
   --fs-small: clamp(0.87rem, 0.83rem + 0.198vw, 0.978rem);
}

/* --- 3.2 Font Families --- */
.ff-body {
   font-family: var(--gp-font--body);
}

.ff-heading {
   font-family: var(--gp-font--heading);
}


h1, .fs-h1 {
	/* 37,01 px → 60,83 px */
	font-size: var(--fs-h1);
	font-family: var(--gp-font--heading);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
   color: var(--neutral-900);
}

h2, .fs-h2 {
	/* 32,18px -> 49,65px */
	font-size: var(--fs-h2);
	font-family: var(--gp-font--heading);
	font-weight: 700;
   letter-spacing: -0.01em;
	line-height: 1.1;
   color: var(--neutral-900);
}

h3, .fs-h3 {
	/* 27,98px -> 40,53px */
	font-size: var(--fs-h3);
	font-family: var(--gp-font--heading);
   letter-spacing: -0.01em;
	font-weight: 700;
	line-height: 1.1;
   color: var(--neutral-900);
}

h4, .fs-h4 {
	/* 24,88px -> 33,09px */
	font-size: var(--fs-h4);
	font-family: var(--gp-font--heading);
   letter-spacing: -0.01em;
	font-weight: 700;
	line-height: 1.1;
   color: var(--neutral-900);
}

h5, .fs-h5 {
	/* 21,16px -> 27,01px */
	font-size: var(--fs-h5  );
	font-family: var(--gp-font--heading);
   letter-spacing: -0.01em;
	font-weight: 700;
	line-height: 1.1;
   color: var(--neutral-900);
}

h6, .fs-h6 {
	/* 18,40px -> 22,05px */
	font-size: var(--fs-h6);
	font-family: var(--gp-font--heading);
   letter-spacing: -0.01em;
	font-weight: 700;
	line-height: 1.2;
   color: var(--neutral-900);
}

p, .fs-p, li, .btn, figcaption {
	/* 16,00px -> 18,00px */
	font-size: var(--fs-p);
	font-family: var(--gp-font--body);
	font-weight: 400;
	line-height: 1.6;
	color: var(--neutral-900);
}

.eyebrow {
	font-size: var(--fs-small);
	font-family: var(--gp-font--body);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.3;
	color: var(--neutral-900);
	margin-bottom: var(--text-heading-gap);
}

.fs-small {
	font-size: var(--fs-small);
}

/* =========================================
   4. Components
   ========================================= */

/* --- 4.1 Buttons (Base & Variants) --- */

.btn {
   /* Box Model & Sizing */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--button-padding-v) var(--button-padding-h);
	position: relative;
	overflow: visible !important;
	isolation: isolate;
   
   /* Typography */
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	letter-spacing: .5px;
	text-decoration: none;
	overflow-wrap: normal;
   
   /* Appearance */
	background-color: transparent;
	border: 1px solid transparent; 
	border-radius: var(--button-radius);
	cursor: pointer;
   
   /* Transitions */
	transition: background-color 0.1s ease-in-out,
	            color 0.1s ease-in-out,
	            border-color 0.1s ease-in-out;
}


@media (max-width: 767px) {
   .btn {
	   
		display: flex;
		row-gap: var(--component-stack-gap-tiny);
		flex-wrap: wrap;
		text-wrap: wrap;
		}
}

/* Shadow */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--button-radius);
	box-shadow: var(--shadow-s);
	opacity: 1;
	transition: opacity 0.1s ease-in-out;
}

/* Hover shadow */
.btn::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: var(--button-radius);
   box-shadow: var(--shadow-m);
   opacity: 0;
   transition: opacity 0.1s ease-in-out;
}

.btn:is(:hover, :focus)::before { opacity: 0; }
.btn:is(:hover, :focus)::after { opacity: 1; }

.btn:active::before { opacity: 1; }
.btn:active::after { opacity: 0; }

/* Varianten */

/* Aktion */
.btn-action {
    background-color: var(--accent-700);
    color: var(--accent-50);
}

.btn-action:is(:hover,:focus), .nav-cta:is(:hover,:focus) {
   background-color: var(--accent-800);
   color: var(--accent-50);
}

.btn-action:active, .nav-cta:active {
	background-color: var(--accent-900);
}

/* Primär */
.btn-primary {
   background-color: var(--primary-300);
   color: var(--primary-950);
}

.btn-primary:is(:hover,:focus) {
   background-color: var(--primary-400);
   color: var(--primary-950);
}

.btn-primary:active {
   background-color: var(--primary-500);
}

/* Sekundär */
.btn-secondary {
   background-color: var(--neutral-50);
   color: var(--neutral-700);
   border: 1px solid var(--neutral-500);
}

.btn-secondary:is(:hover,:focus) {
   background-color: var(--neutral-200);
   color: var(--neutral-800);
}

.btn-secondary:active {
   background-color: var(--neutral-300);
   color: var(--neutral-900);
}

/* Ghost */
.btn-ghost {
   background-color: transparent;
   color: var(--primary-800);
   text-decoration: underline;
}

.btn-ghost:is(:hover,:focus) {
   background-color: var(--primary-100);
   color: var(--primary-800);
}

.btn-ghost:active {
   background-color: var(--primary-200);
   color: var(--primary-800);
}

.btn-ghost::before { opacity: 0; } /* no resting shadow */ 

/* Ghost Dark Background */
.btn-ghost-dark-bg {
   background-color: transparent;
   color: var(--primary-200);
   text-decoration: underline;
}

.btn-ghost-dark-bg:is(:hover,:focus) {
   background-color: var(--primary-100);
   color: var(--primary-800);
}

.btn-ghost-dark-bg:active {
   background-color: var(--primary-200);
   color: var(--primary-800);
}

.btn-ghost-dark-bg::before { opacity: 0; } /* no resting shadow */

/* Disabled State */
.btn:disabled {
	background-color: var(--neutral-200) !important;
	border-color: var(--neutral-200) !important;
	color: var(--neutral-400) !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

/* --- 4.2 Navigation & Menu Tweaks --- */

/* GP Menu Accessibility Tweak */

#site-navigation ul.sub-menu, .navigation-clone #primary-menu ul.sub-menu {
	display: block;
   box-shadow: var(--shadow-s);
}

#site-navigation li:hover .gp-icon svg, .navigation-clone #primary-menu li:hover .gp-icon svg {
	transform: rotate(180deg);
}

#site-navigation li:hover .sub-menu, .navigation-clone #primary-menu li:hover .sub-menu {
	visibility: visible;
}

.main-navigation.navigation-stick .sticky-navigation-logo a img {
   max-width: 196px;
   object-fit: contain;
}

/* Aktueller Menüpunkt Underline & Textfarbe (nur Hauptmenü / 1. Ebene) */
.gb-navigation ul > li.current-menu-item:not(.nav-cta) > a,
.gb-navigation ul > li.current-menu-ancestor:not(.nav-cta) > a,
.gb-navigation ul > li.current_page_parent:not(.nav-cta) > a,
.gb-navigation ul > li.current-post-ancestor:not(.nav-cta) > a {
    text-decoration: underline;
    text-decoration-color: var(--primary-300);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    color: var(--primary-300); /* NEU: Erzwingt die aktive Textfarbe für den Blog */
}

/* Kein Underline bei Eltern von aktuellen Menüpunkten, aber trotzdem aktive Textfarbe (nur Hauptmenü / 1. Ebene) */
.main-navigation .main-nav > ul:has(li.current-menu-ancestor) > li.current_page_parent:not(.current-menu-ancestor) > a,
.main-navigation .main-nav > ul:has(li.current-menu-item) > li.current_page_parent:not(.current-menu-item):not(.current-menu-ancestor) > a {
    text-decoration: none;
    color: unset; 
}

/* Aktueller Menüpunkt im Dropdown (Linie links statt Underline) */
.main-navigation .main-nav ul ul li.current-menu-item > a {
    text-decoration: none; /* Verhindert das Unterstreichen */
    box-shadow: inset 3px 0 0 0 var(--primary-600);
}


/* --- 4.3 Table of Contents / Inhaltsverzeichnis --- */


.toc-placeholder {
/* gets replaced */
	display: none;
}

.toc { 
	/* the outer <nav> */
	padding-right: var(--card-padding-compact);
	padding-left: var(--card-padding-compact);
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: var(--neutral-400);
}

.toc-list {
/* top-level <ul> */
	list-style: none;
	margin-left: 0;
	margin-bottom: 0;
}

.toc-item {
	font-size: var(--fs-small);
}

.toc-link {
	display: flex;
	text-decoration: none;
	font-size: var(--fs-small);
	border-left-width: 4px;
	margin-bottom: var(--component-stack-gap-tiny);
	padding: var(--card-padding-compact);
	transition: all 0.15s ease-in-out;
}

.toc-link:hover, .toc-link:focus {
	text-decoration: underline;
}

.toc-link--active {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: var(--mint-500);
	padding-top: var(--card-padding-compact);
	padding-right: var(--card-padding-compact);
	padding-bottom: var(--card-padding-compact);
	padding-left: var(--card-padding-compact);
	background-color: var(--mint-900);
	color: var(--mint-50);
	margin-bottom: var(--component-stack-gap-tiny);
}

.toc-link--active:hover, .toc-link--active:focus {
	color: var(--mint-50);
}

/* =========================================
   5 Utility Classes
   ========================================= */

/* --- 5.3. Screen reader only utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- 5.4. Spacing Helpers --- */
.section-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.section-tiny  { padding-top: var(--space-s);  padding-bottom: var(--space-s); }
.section-compact  { padding-top: var(--space-m);  padding-bottom: var(--space-m); }
/* .section-default  { padding-top: var(--space-l);  padding-bottom: var(--space-l); } Defined in global style */
.section-big { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }


/* --- 5.6. Card Stretch Links --- */
/* usage: add class .stretch-link to the container that is suposed to be clickable */
.stretch-link {
	position: relative;
}

.stretch-link a::after{
	content:'';
	position: absolute;
	inset: 0;
}

.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}
/* 
.stretch-link:hover a {
	color: var(--color-accent-900);
} */

/* --- 5.7. Typing Text Effect / Typewriter Effect --- */

/* Container fixes layout shifting by mimicking the longest word */
.typing-wrapper {
  display: inline-grid;
  grid-template-areas: "stack";
  vertical-align: baseline; /* Ensures it aligns seamlessly with surrounding text */
}

/* Invisible anchors that take up maximum width space */
.size-anchor {
  grid-area: stack;
  visibility: hidden;
  white-space: nowrap;
  /* Add a matching transparent border so the anchors include the cursor's width */
  border-right: 2px solid transparent; 
}

/* Active animated text sits directly over the anchors */
.tg-rotator {
  grid-area: stack;
  justify-self: start;
  border-right: 2px solid; /* Blinking cursor */
  animation: tg-blink 0.75s step-end infinite;
  white-space: nowrap;
}

@keyframes tg-blink {
  from, to { border-color: transparent }
  50% { border-color: currentColor }
}

@media (prefers-reduced-motion: reduce) {
  /* 1. Fix the gap by removing the anchors from the layout */
  .size-anchor {
    display: none !important;
  }
  
  /* 2. Stop the cursor blink and remove the line */
  #tg-rotator {
    animation: none; 
    border-right: none; 
  }

  /* 3. Style the word to look clickable when the JS adds this class */
  #tg-rotator.a11y-clickable {
    cursor: pointer;
    border-bottom: 2px dotted currentColor;
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
  }

  #tg-rotator.a11y-clickable:hover,
  #tg-rotator.a11y-clickable:focus {
    opacity: 0.7;
    outline: none;
  }
}

/* =========================================
6 Plugin integrations
========================================= */

/* --- 6.2. FluentForms --- */

.ff-el-form-control {
	caret-color: var(--primary-600)
}



.ff-default .ff-el-input--label label {
   font-size: var(--fs-small, 0.875rem);
   color: var(--neutral-800);
}

.ff-el-tc input[type="checkbox"] {
    accent-color: var(--primary-600);
}

.fluentform .ff-el-is-error .text-danger {
   font-size: var(--fs-small, 0.875rem) !important;
   color: var(--razz-700) !important;
}

.fluentform .ff-el-is-error .ff-el-form-control {
   border-color: var(--razz-700) !important;
}

:root {
   --fluentform-primary: var(--primary-600) !important;
   --fluentform-secondary: var(--neutral-600) !important;
   --fluentform-danger: var(--razz-600) !important;
   --fluentform-border-color: var(--neutral-300) !important;
   --fluentform-border-radius: var(--radius-s) !important;
}

.form-submit-wrapper {
   display: flex;
   align-items: center;
   gap: var(--icon-text-gap);
}

@media (max-width: 767px) {
	.form-submit-wrapper {
		flex-direction: column-reverse;
	}
}

/* Buttons */

.ff-btn-secondary {
	border-radius: var(--button-radius);
   background-color: var(--primary-100) !important;
   color: var(--primary-800) !important;
   border: 1px solid var(--primary-700) !important;
}

.ff-btn-secondary:is(:hover,:focus) {
   background-color: var(--primary-200) !important;
   color: var(--primary-800) !important;
}

.ff-btn-secondary:active {
   background-color: var(--primary-300) !important;
   color: var(--primary-800) !important;
}

/* --- 6.3. Search and Filter Pro / general search functionality --- */

.search-for {
   color: var(--primary-50);
}

.search-title {
   color: var(--primary-50);
}

.search-section-header {
   scroll-margin-top: 86px;
}

.query-scroll-fix {
   scroll-margin-top: calc(86px + var(--component-stack-gap-default));
}

.wp-block-search-filter-control-submit {
   padding: 0px !important; 
}

.search-filter-input-button{
   padding: var(--button-padding-v) var(--button-padding-h) !important;
}

/* =========================================
7 Artikel Konfiguration
========================================= */

/* ==========================================================================
   Article layout: sticky TOC column + text measure + margin space
   ==========================================================================

   Three stages, driven by container queries on a full-width wrapper
   that sits OUTSIDE the grid (no circularity: the wrapper's width never
   depends on what the grid does with it).

     Stage 1  wide     [TOC] [text] [margin notes]
     Stage 2  medium   TOC on top, [text] [margin notes]
     Stage 3  narrow   TOC on top, text full width, notes inline

   The whole sidenote system is one variable: --sn-total.
   It is simultaneously
     - the space reserved to the right of the text, and
     - the negative margin that throws floats into that space.
   They cannot drift apart because they are the same number.
   Setting it to 0rem collapses the system. That is all Stage 3 does.

   Unit discipline: --sn-width and --sn-gap MUST stay in rem/px, never ch.
   Custom properties resolve length units at the point of USE, so a ch
   value would compute differently on a paragraph than on a sidenote
   (different font-size) and the margin would no longer match the gutter.
   Only --measure uses ch, and only on .article-body.
   ========================================================================== */

.article-container {
    container-type: inline-size;
    container-name: article;
}

.article-layout {
    --toc-width: 14rem;
    --shell-gap: 2rem;

    --sn-width: 14rem;
    --sn-gap: 1.5rem;
    --sn-total: calc(var(--sn-gap) + var(--sn-width));

    --article-font-size: var(--fs-p);
    --note-font-size: calc(var(--fs-small)*0.9);
	
	--notes-mode: margin;

    display: grid;
    grid-template-columns: var(--toc-width) minmax(0, 1fr);
    gap: var(--shell-gap);
	
	max-width: 1440px;
	margin-right: auto;
	margin-left: auto;
	
	padding-right: var(--column-gutter);
	padding-left: var(--column-gutter);

    /* Required for the sticky TOC: with the default `stretch`, the item
       is exactly as tall as its grid area and has zero travel room, so
       position: sticky silently does nothing. With `start`, the box is
       content-height while its containing block stays the full row. */
    align-items: start;
}

/* --------------------------------------------------------------------------
   TOC column
   -------------------------------------------------------------------------- */

.toc-column {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--component-stack-gap-big));
    max-height: calc(100vh - var(--header-height, 0px) - 2rem);
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Body

   max-width does double duty:
     min()  -> 70ch when there is room
     calc() -> yields to protect the margin gutter when there is not
   so sidenotes can never overflow the grid area. This means the container
   query breakpoints below are a matter of taste, not correctness.

   font-size must be set HERE, because 70ch resolves against this element's
   own font. If .article-body inherited 16px while paragraphs rendered at
   18px, the measure would be computed from the wrong font.
   -------------------------------------------------------------------------- */

.article-body {
    font-size: var(--article-font-size);
    line-height: 1.7;
    max-width: min(70ch, calc(100% - var(--sn-total)));
    counter-reset: sidenote;
}

/* --------------------------------------------------------------------------
   Sidenotes

   float:right puts the right edge at the paragraph's right edge (= measure).
   margin-right: -(gap + width) moves that edge to measure + gap + width,
   which places the left edge at exactly measure + gap.

   clear:right is the collision avoidance: two notes close together stack
   instead of overlapping. Free, no JS. It only works while no ancestor
   between the notes establishes a block formatting context, so do NOT put
   overflow:hidden or display:flex on anything inside .article-body.
   -------------------------------------------------------------------------- */

.sidenote,
.marginnote {
    float: right;
    clear: right;
    width: var(--sn-width);
    margin-right: calc(-1 * var(--sn-total));
    margin-top: 0.3rem;
    margin-bottom: 0.6rem;
	padding: 0.15rem;
	border: 1px solid transparent;
    font-size: var(--note-font-size);
    line-height: 1.5;
    text-align: left;
    position: relative;
	transition: 
		background 0.15s ease-in-out,
		border-color 0.15s ease-in-out;
}

.article-body .sidenote a,
.article-body .marginnote a,
.article-body .figure-margin figcaption a {
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.06em;
}

/* The counter is incremented by the in-text marker, then read by the note.
   Because the shortcode emits the note immediately after the marker,
   nothing increments in between and both print the same number. */
.sn-ref {
    counter-increment: sidenote;
    line-height: 0;
}

.sn-ref::after,
.sn-ref .note-toggle::after {
    content: counter(sidenote);
    font-size: calc(var(--note-font-size) * 0.8);
    padding-right: 2px;
}

.sidenote::before {
    content: counter(sidenote);
    vertical-align: super;
    line-height: 0;
    margin-right: 0.35em;
	font-size: calc(var(--note-font-size)*0.8);
}

/* Marker buttons (JS-injected; the no-JS page has no controls) */
.note-toggle {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
	line-height: 1.5;
    color: var(--primary-700); /* hardcode your theme link color */
    cursor: pointer;
    position: relative;
}

.note-toggle:active {
	color: var(--primary-800);
}

/* With JS, the number moves from the sup onto the button so the
   clickable thing and the visible thing are the same element. */
.js .sn-ref::after {
    content: none;
}

.sn-ref .note-toggle::after {
    content: counter(sidenote);
}

/* Enlarged hit area, grown mostly upward into the leading. Coarse
   pointers only, so desktop text selection is never affected. */
@media (pointer: coarse) {
	.sn-ref--stacked {
        margin-left: 0.45em;
    }
    .note-toggle::before {
        content: "";
        position: absolute;
        inset: -0.9em -0.225em -0.225em;
    }
}

/* ⊕ marker for marginnotes: hidden in margin mode */
.mn-ref {
    display: none;
    line-height: 0;
}

/* Expand/collapse all: only meaningful in collapsed mode */
.notes-toggle-all {
    display: none;
}

/* --------------------------------------------------------------------------
   Blockquote

   Left padding only. Never a right margin. The inner paragraph is narrower
   but its RIGHT EDGE still lands at the measure, so sidenote math inside a
   blockquote is identical to sidenote math in body text and needs no special
   case. (This is the entire reason Tufte CSS needs `-82%` here and we don't.)
   -------------------------------------------------------------------------- */

.article-body blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--neutral-400);
    font-style: italic;
}

.article-body blockquote p:last-child {
    margin-bottom: 0;
}

.article-body blockquote em {
    font-style: normal;
}

.article-body blockquote cite {
    display: block;
    margin-top: 0.6rem;
    font-size: var(--note-font-size);
}

/* --------------------------------------------------------------------------
   Figures

   .figure-margin      image + caption, both living in the margin space
   .figure-content     image in the text column, caption floated to margin

   figcaption comes FIRST in the DOM so the float lands at the figure's top
   edge rather than its bottom. Both orders are valid HTML.
   -------------------------------------------------------------------------- */

.figure-margin {
    float: right;
    clear: right;
    width: var(--sn-width);
    margin: 0.3rem calc(-1 * var(--sn-total)) 1.2rem 0;
}

.figure-content {
    margin: 2rem 0;
}

.figure-margin img,
.figure-content img {
    display: block;
    width: 100%;
    height: auto;
}

.figure-margin figcaption {
    margin-top: 0.5rem;
    font-size: var(--note-font-size);
    line-height: 1.5;
}

.article-body .figure-content figcaption {
    margin-top: 0.6rem;
    font-size: var(--note-font-size);
    line-height: 1.5;
}

/* .figure-content's caption carries class="marginnote" and is styled above. */

/* ==========================================================================
   Stage 2: TOC moves to the top. Sidenotes stay.

   The TOC is first in the DOM, so it lands on top with no reordering.
   It is width-matched to the text column rather than centred in the grid
   area: centring it would include the margin space and push it visibly
   right of the text it belongs to.
   ========================================================================== */

@container article (max-width: 1100px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc-column {
        position: static;
        max-height: none;
        overflow-y: visible;
        max-width: min(70ch, calc(100% - var(--sn-total)));
        margin-bottom: 2.5rem;
    }
}

/* ==========================================================================
   Stage 3: sidenotes collapse inline.

   --sn-total: 0rem releases the reserved gutter and zeroes the negative
   margin in one move; the rest is just un-floating.
   ========================================================================== */

@container article (max-width: 768px) {
    .article-layout {
        --sn-total: 0rem;	
		--notes-mode: collapsible;
    }

	.figure-margin {
		float: none;
		clear: none;
		width: 100%;
		margin-right: 0;
		margin-block: 2rem;
	}
	
	.sidenote,
	.marginnote {
		float: left;
		clear: both;
		width: 100%;
		margin-right: 0;
		margin-block: 1rem;
		padding-left: 1rem;
		border-left: 2px solid var(--neutral-300);
	}

    .figure-margin {
        width: 100%;
        margin-block: 2rem;
    }
	/* JS present: notes are born collapsed (the js class lands before
   first paint, so this is the first painted state, no flash) */
	.js .article-body .sidenote,
	.js .article-body .marginnote {
		display: none;
	}

	.js .article-body .sidenote.is-active,
	.js .article-body .marginnote.is-active {
		display: block;
	}

	.js .mn-ref {
		display: inline;
	}

	.js .notes-toggle-all {
		display: inline-block;
	}
}

@container article (width > 767px) {
    .article-body .sidenote.is-active,
    .article-body .marginnote.is-active {
        background: var(--neutral-200);
		border: 1px solid var(--neutral-400);
	}
}