/*
Theme Name: Skole Child
Author: VamTam
Author URI: https://vamtam.com
Template: skole
*/


/* ==========================================================================
   Blooming Prep — site-wide typographic craft
   Governed by BRAND.md / DESIGN.md. Keep this file small and rule-based;
   anything page-specific belongs in Elementor, not here.
   ========================================================================== */

/* Headings balance their line breaks instead of leaving one orphaned word.
   `balance` is capped by browsers at ~6 lines, which is why it is scoped to
   headings and other short display strings rather than body copy. */
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title,
.elementor-widget-theme-page-title .elementor-heading-title,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-post__title,
blockquote,
figcaption {
	text-wrap: balance;
}

/* Running text gets `pretty` instead: it prevents single-word orphans on the
   last line without the line-count ceiling that `balance` carries. */
p,
li,
.elementor-widget-text-editor,
.elementor-image-box-description,
.elementor-icon-box-description,
.elementor-post__excerpt {
	text-wrap: pretty;
}

/* Site chrome always paints above page content.
   Skole's demo pages pull their first section up with a negative top margin
   (About's is -60px) so it could tuck under the theme's *transparent* header.
   The Phase 2 header is opaque and in flow, so without this the page draws
   over the logo and the CTA. Legacy pages are rebuilt in Phases 4 and 6; this
   rule keeps the chrome correct until then, and is right regardless. */
.elementor-location-header {
	position: relative;
	z-index: 100;
}

/* Nav pointer dot is centred on its item.
   Skole renders Elementor's "overline" pointer as a small round dot sized from
   the pointer-width control, but leaves it pinned to the item's left padding,
   so it floated over the first letter instead of the middle of the word.
   left/right:0 plus auto margins centres an absolutely positioned fixed-width
   box without touching `transform`, which the bounce animation drives.

   `!important` is load-bearing, not laziness. VamTam's all.css ships
     .elementor-widget-nav-menu .elementor-nav-menu--main:not(...):not(...)
     > .elementor-nav-menu > .current-menu-ancestor .elementor-item:not(:hover)
     :not(:focus):not(.elementor-item-active):not(.highlighted)::before
   with `left: auto`. That is roughly ten selector levels deep, so it cannot be
   beaten on specificity by anything reasonable, and it only applies on pages
   whose menu branch is the CURRENT ANCESTOR -- which is why the dot looked
   centred on /about/ and pinned hard right on the front page. */
.elementor-location-header .elementor-widget-nav-menu .e--pointer-overline .elementor-item:before,
.elementor-location-header .elementor-widget-nav-menu .e--pointer-overline .elementor-item:after {
	left: 0 !important;
	right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Motion: the three approved effects collapse to static for anyone who has
   asked their OS to reduce motion. See BRAND.md > Motion. */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Elementor entrance animations start invisible and are revealed by JS;
	   force them visible so nothing is lost when animation is suppressed. */
	.elementor-invisible {
		visibility: visible !important;
		animation: none !important;
	}

	/* Parallax / motion-fx transforms are applied inline by Elementor Pro. */
	.elementor-motion-effects-element {
		transform: none !important;
	}
}