/* ════════════════════════════════════════════════════════════════
   TEMPLATE — Anchored text box
   ────────────────────────────────────────────────────────────────
   File:   .obsidian/plugins/slides-extended/css/template-textbox.css
   Requires: base.css, fonts.css, typography.css loaded first

   Standalone component — independent of .tpl-cover / .slide-sidebar /
   .split / .col-*. No flex, no percentage-height ancestors, no
   nesting requirements. Same proven technique as .overlay and
   .global-logo: position: absolute directly inside the <section>.

   Place this div directly in the slide content — do NOT nest it
   inside .split/.col-*.
   ════════════════════════════════════════════════════════════════ */

/* -- Tokens ---------------------------------------------------------
 * All positioning/sizing is controlled via inline custom properties
 * on the element itself. Defaults below assume a right-side,
 * bottom-anchored box (the most common case in this deck).
 *
 *   --box-bottom   distance from slide bottom edge   (default: 40px)
 *   --box-top      distance from slide top edge      (used with .anchor-top)
 *   --box-left     distance from slide left edge     (default: auto)
 *   --box-right    distance from slide right edge    (default: 40px)
 *   --box-w        box width                         (default: 35%)
 *   --panel-bg     background color                  (default: rgba(0,0,0,0.50))
 *   --box-padding  inner padding                      (default: 40px 44px)
 *
 * Usage (bottom-right, default):
 *   <div class="mag-textbox text-left" style="--panel-bg: #00000050;">
 *     <h2 class="mag-h2">TITLE</h2>
 *     <div class="body-text">...</div>
 *   </div>
 *
 * Usage (anchored to top instead of bottom):
 *   <div class="mag-textbox anchor-top text-left" style="--panel-bg: #00000050;">
 *     ...
 *   </div>
 *
 * Usage (anchored left instead of right):
 *   <div class="mag-textbox text-left" style="--box-left: 40px; --box-right: auto;">
 *     ...
 *   </div>
 */
.mag-textbox {
	position:   absolute;
	bottom:     var(--box-bottom, 40px);
	top:        var(--box-top, auto);
	left:       var(--box-left,  auto);
	right:      var(--box-right, 40px);
	width:      var(--box-w,     35%);
	background: var(--panel-bg,  rgba(0, 0, 0, 0.50));
	padding:    var(--box-padding, 40px 44px);
	box-sizing: border-box;
	z-index:    5;
}

.mag-textbox.anchor-top {
	bottom: auto;
	top:    var(--box-top, 40px);
}