/*
Theme Name: Dance Mat Typing Guide
Author: Dance Mat Typing Guide
Description: Custom responsive theme for Dance Mat Typing Guide. Desktop pixel-faithful to the legacy Thesis layout, mobile responsive reflow; classic editor, zero content migration. Replaces Thesis 1.8.5.
Version: 1.0.0
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dmtg
Tags: classic-editor, custom-menu, featured-images, responsive-layout, translation-ready
*/

/* ============================================================
   Dance Mat Typing Guide — main stylesheet (Stage 3 / M2 + M3).
   Desktop-first: BASE rules ARE the desktop (>=1024px) target state.
   Tablet / mobile are max-width / range overrides layered below.
   Pixel restoration of legacy Thesis 1.8.5 (PRD 4.2.A): body 10px em base
   (1em = 10px), so legacy inline-em content renders identically.
   No hardcoded domain anywhere (PHP builds URLs via get_template_directory_uri).
   ============================================================ */

/* ---------- 3.1 breakpoint variables + reset ---------- */
:root {
	--bp-tablet: 768px;
	--bp-desktop: 1024px;
	--dmtg-text: #111111;
	--dmtg-link: #2361a1;
	--dmtg-bg: #b2ccfa;
	--dmtg-frame: #a0bae8;
	--dmtg-content-bg: #ffffff;
	--dmtg-nav-link: #d6d1cb;
	--dmtg-nav-hl-bg: #bdbdbd;
	--dmtg-nav-hl-text: #171624;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Thesis em reference: 1em = 10px across the document. */
body {
	margin: 0;
	font-size: 10px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: var(--dmtg-text);
	background: var(--dmtg-bg);
}

img { max-width: 100%; height: auto; }

/* Form controls never exceed their column (keeps comment box / inputs on-screen at <768px). */
input, select, textarea { max-width: 100%; }
textarea { width: 100%; }

/* Accessible hidden text + skip link (full focus styling in M12/7.x) */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);  /* a11y visually-hidden only, not layout clipping */
	white-space: nowrap; border: 0;
}
.dmtg-skip-link:focus {
	/* !important to override the .screen-reader-text position:absolute!important (kept in lockstep with the inlined critical copy in inc/perf.php). */
	position: fixed !important; top: 8px; left: 8px; z-index: 1000;
	width: auto; height: auto; clip: auto;
	padding: 8px 16px; background: #fff; color: var(--dmtg-link);
	font-size: 1.4em;
}

/* ---------- 3.2 desktop container / columns / colours (BASE = desktop) ---------- */
#container,
.dmtg-container {
	max-width: 1032px;          /* PRD 4.2.A outer width */
	width: 100%;
	margin: 0 auto;
	background: var(--dmtg-frame);   /* #a0bae8 outer frame */
}
#page {
	padding: 22px;              /* -> 988px inner content */
	background: var(--dmtg-content-bg);   /* #ffffff content area */
}
#content_box,
.dmtg-row {
	width: 100%;
	max-width: 988px;          /* PRD 4.2.A content_box width */
}
#content_box::after,
.dmtg-row::after { content: ""; display: block; clear: both; }   /* float clearfix */

/* Main column: % scales 1024-1031 (no overflow, review #1); max-width pins the
   exact 744px at >=1032 (pixel restoration + literal grep target). */
#content,
.dmtg-col-main {
	width: 75.4%;
	max-width: 744px;          /* PRD 4.2.A main column */
	float: left;
}
#sidebars,
.dmtg-col-side {
	width: 24.6%;
	max-width: 243px;          /* PRD 4.2.A sidebar */
	float: right;
}
#sidebar_1 {
	width: 100%;
	max-width: 243px;          /* inner sidebar wrapper fills #sidebars */
}

/* Post gutter (PRD 4.2.A: margin 0 23px 0 11px, padding-top 36px). */
.post_box,
.dmtg-entry {
	margin: 0 23px 0 11px;
	padding-top: 36px;
}

/* Templates without a sidebar (index/archive/search/404): main spans full width. */
.dmtg-no-sidebar #content,
.dmtg-no-sidebar .dmtg-col-main {
	width: 100%;
	max-width: none;
	float: none;
}

/* ---------- 3.2b desktop typography (Thesis em values, 1em = 10px) ---------- */
.format_text,
.dmtg-entry-content {
	font-size: 1.2em;          /* 12px */
	line-height: 1.667em;      /* ~20px */
	color: var(--dmtg-text);   /* #111111 */
}
.format_text p,
.dmtg-entry-content p { margin: 0 0 1.667em; }
.format_text a,
.dmtg-entry-content a { color: var(--dmtg-link); text-decoration: underline; }  /* #2361a1 */
.format_text a:hover,
.dmtg-entry-content a:hover { text-decoration: none; }

.headline_area h1,
.headline_area h2,
h1.dmtg-entry-title,
.dmtg-entry-title {
	font-size: 2.2em;          /* 22px */
	line-height: 1.364em;      /* 30px */
	color: var(--dmtg-text);   /* #111111 */
	font-weight: bold;
	margin: 0 0 0.5em;
}

#sidebars .widget,
#sidebar_1 .widget,
.dmtg-col-side .widget {
	font-size: 1.3em;          /* 13px */
	line-height: 1.385em;      /* ~18px */
	color: var(--dmtg-text);   /* #111111 */
	margin-bottom: 1.5em;
}
.widget-title { font-size: 1.231em; }   /* ~16px within a 13px widget */

/* Branding + nav link typography (M5/4.3 adds the bar background, hover, current). */
.dmtg-site-title { font-size: 2.4em; margin: 0; }
.dmtg-site-title a { color: var(--dmtg-text); text-decoration: none; }
.dmtg-site-description { font-size: 1.2em; color: #444; margin: 0.3em 0 0; }

.dmtg-menu,
.menu { list-style: none; margin: 0; padding: 0; }
.menu a,
.dmtg-menu a {
	font-size: 1.1em;          /* 11px */
	line-height: 1.273em;      /* 14px */
	padding: 0.636em 0.818em;  /* 7px 9px (em is relative to this 11px) */
	font-family: Calibri, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	color: var(--dmtg-nav-link);   /* #d6d1cb */
	text-decoration: none;
}

/* Footer + comments chrome sizing (body is 10px, so size these explicitly). */
#footer,
.dmtg-site-footer { font-size: 1.1em; padding: 1.5em 11px; color: #333; }
.dmtg-comments { font-size: 1.2em; }
.dmtg-no-results { font-size: 1.2em; }

/* Desktop (>=1024px) is the BASE state above — no min-width:1024 block needed
   (the former one only re-asserted the base #container max-width:1032px). */

/* ---------- 3.3 tablet (768-1023.98px): fluid, columns stay side by side ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
	#container,
	.dmtg-container { max-width: 100%; }
	#content,
	.dmtg-col-main { width: 74%; }
	#sidebars,
	.dmtg-col-side { width: 23%; }
	#sidebar_1 { width: 100%; }
	.post_box,
	.dmtg-entry { margin: 0 2% 0 1%; }
}

/* ---------- 3.4 mobile (<768px): single column, sidebar after content ---------- */
@media (max-width: 767.98px) {
	#page { padding: 12px; }
	#content,
	.dmtg-col-main {
		width: 100%;
		max-width: none;
		float: none;
	}
	#sidebars,
	.dmtg-col-side {
		width: 100%;
		max-width: none;
		float: none;
	}
	#sidebar_1 { width: 100%; max-width: none; }
	.post_box,
	.dmtg-entry { margin: 0; padding-top: 18px; }
	/* DOM order is content -> sidebar already, so the sidebar stacks below. */
}

/* ---------- 3.6 responsive media + self-hosted Ruffle game frame ---------- */
/* .ruffle-swf keeps the mu-plugin's intrinsic WxH inline size; only cap width.
   Never override width/height, never clip it, never touch the canvas. */
iframe,
embed,
object,
video { max-width: 100%; }
.ruffle-swf { max-width: 100%; height: auto; }

/* M7 (5.8/5.9): responsive game frame. The .m7-game-frame holds the aspect ratio
   (set by JS from data-w/data-h); the Ruffle player fills it absolutely. Keeps
   the game letterboxed at its native ratio with no fixed-height distortion. */
.m7-game-frame { position: relative; width: 100%; margin: 0 auto; background: #1a1a1a; }
.m7-game-frame > .ruffle-swf > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; }
.m7-skeleton {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 10px, #333 10px, #333 20px);
	animation: m7-pulse 1.2s ease-in-out infinite;
}
@keyframes m7-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.m7-fallback,
.m7-has-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1em;
	color: #fff;
}
.m7-has-fallback a,
.m7-fallback a { color: #9fc0ff; }

/* ---------- 3.7 protected third-party classes + long-content guards ---------- */
/* .adsbygoogle / .ins and devvn hotspot classes (.devvn_ihotspot/.pins_image/
   .pins_image_hover/.pins_animation/.ihotspot_*) are intentionally NOT reset
   here: no display:none, no clipping, no fixed width, position kept. */
.dmtg-entry-content,
.format_text {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ---------- 3.8 the_content compatibility: never clip games/hotspots ---------- */
.entry-content,
.dmtg-entry-content {
	overflow: visible;
	max-width: none;
}

/* ============================================================
   M5 navigation (quests 4.3-4.6): desktop bar + dropdowns,
   mobile hamburger drawer, submenu toggles, keyboard focus.
   Colours from Thesis layout3.css: link #d6d1cb on #4f4f4f bar,
   hover/current #171624 on #bdbdbd.
   ============================================================ */
.dmtg-primary-nav { position: relative; clear: both; }

.dmtg-menu,
.menu {
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	background: #4f4f4f;
}
.menu > li.tab { position: relative; }
.menu a {
	display: block;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #d6d1cb;        /* 3.2b set font; 4.3 sets bar colours */
	background: #4f4f4f;
	white-space: nowrap;
}
.menu a:hover,
.menu a:focus { color: #171624; background: #bdbdbd; }
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current-menu-ancestor > a {
	color: #171624;
	background: #bdbdbd;
	border-bottom: 1px solid #bdbdbd;
}

/* Sub-menus: drop down on hover or keyboard focus (4.3 / 4.4). */
.menu .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 12em;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #4f4f4f;
	display: none;
}
.menu li:hover > .submenu,
.menu li:focus-within > .submenu { display: block; }
.menu .submenu li { width: 100%; }
.menu .submenu a { letter-spacing: 1px; border-bottom: 1px solid #5d5d5d; }

/* Hamburger / submenu toggles / overlay are desktop-hidden by default. */
.dmtg-nav-toggle,
.dmtg-submenu-toggle,
.dmtg-nav-overlay { display: none; }

/* 4.4 visible focus on every interactive nav element. */
.menu a:focus-visible,
.dmtg-nav-toggle:focus-visible,
.dmtg-submenu-toggle:focus-visible {
	outline: 2px solid #2361a1;
	outline-offset: 2px;
}

/* --- tablet (768-1023.98px): bar wraps instead of overflowing --- */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.menu { flex-wrap: wrap; }
	.menu a { letter-spacing: 1px; padding: 0.5em 0.7em; }
}

/* --- mobile (<768px): hamburger drawer (no-JS shows a vertical list) --- */
@media (max-width: 767.98px) {
	/* No-JS baseline: menu is a visible vertical list, all items reachable. */
	.dmtg-menu,
	.menu { flex-direction: column; flex-wrap: nowrap; }
	.menu > li.tab { width: 100%; }
	.menu a { min-height: 44px; display: flex; align-items: center; }
	.menu .submenu {
		position: static;
		min-width: 0;
		display: block;
	}

	/* JS enabled: collapse into a real hamburger drawer. */
	.dmtg-nav-js .dmtg-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 44px;
		min-height: 44px;
		padding: 0 12px;
		font-size: 1.4em;
		color: #d6d1cb;
		background: #4f4f4f;
		border: 0;
		cursor: pointer;
	}
	.dmtg-nav-toggle-icon {
		width: 20px;
		height: 2px;
		background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}
	.dmtg-nav-js .dmtg-menu { display: none; }
	.dmtg-nav-js .dmtg-menu.dmtg-open { display: flex; }
	.dmtg-nav-js .menu .submenu { display: none; }
	.dmtg-nav-js .menu li.dmtg-open > .submenu { display: block; }
	.dmtg-nav-js .menu a { flex: 1 1 auto; }
	.dmtg-nav-js .menu li.tab { display: flex; flex-wrap: wrap; align-items: center; }
	.dmtg-nav-js .menu li.tab > .submenu { flex: 1 0 100%; }
	.dmtg-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		color: #d6d1cb;
		background: #4f4f4f;
		border: 0;
		border-left: 1px solid #5d5d5d;
		cursor: pointer;
	}
	.dmtg-nav-js .dmtg-nav-overlay.dmtg-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(0, 0, 0, 0.4);
	}
}

/* ============================================================
   M6 self-promo boxes (quest 5.4). Deliberately NOT styled like an
   AdSense unit (own dashed frame + tint), reserved height to avoid CLS.
   Empty positions collapse to zero height.
   ============================================================ */
.dmtg-promo {
	display: block;
	margin: 1.5em auto;
	padding: 10px;
	text-align: center;
	border: 1px dashed #a0bae8;
	background: #f4f8ff;
	min-height: 90px;          /* reserve space before content fills (CLS guard) */
}
.dmtg-promo--empty {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.dmtg-promo img { max-width: 100%; height: auto; }
.dmtg-promo-link { display: inline-block; }

/* ============================================================
   M7 (quest 5.10) — devvn image-hotspot lesson pages responsive.
   The plugin floats .wrap_svl and uses large fixed-px pin graphics that do not
   scale; we un-float + centre, make the base image fluid, let the powerTip wrap,
   give pins a 44px tap target, and contain the oversized pin overflow so it
   never scrolls the page. devvn hotspot classes are preserved, not reset.
   ============================================================ */
.wrap_svl {
	float: none;
	margin: 0 auto;
	max-width: 100%;
}
.wrap_svl_center,
.wrap_svl_center_box,
.images_wrap { max-width: 100%; }
.images_wrap img {
	width: 100%;
	height: auto;
	display: block;
}
/* powerTip tooltips must wrap on small screens, not run off-viewport. */
#powerTip,
.powerTip,
.ihotspot_tooltop_html .box_view_html {
	white-space: normal;
	max-width: 90vw;
}
/* Oversized devvn pin graphics must not force a horizontal scrollbar. The pins
   are absolutely positioned inside .wrap_svl; clip to the image box. (Element-
   level overflow per §3.5 — purpose: contain non-responsive plugin pins.) */
.wrap_svl { overflow: hidden; }

@media (max-width: 767.98px) {
	/* Keep hotspot pins large enough to tap. */
	.point_style,
	.drag_element > a,
	.pins_image { min-width: 44px; min-height: 44px; }
}


/* M10 breadcrumbs (quest 6.7) */
.dmtg-breadcrumbs { font-size: 1.1em; margin: 0 0 1em; }
.dmtg-breadcrumbs ol { list-style: none; margin: 0; padding: 0; }
.dmtg-breadcrumbs li { display: inline; }
.dmtg-breadcrumbs li + li::before { content: " \203A "; color: #888; padding: 0 0.3em; }
.dmtg-breadcrumbs a { color: #2361a1; }

/* M12 (7.3) global visible keyboard focus (outline contrasts on the light bg the
   focused element shows; nav links flip to the light #bdbdbd background on focus). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.ruffle-swf:focus-visible {
	outline: 2px solid #2361a1;
	outline-offset: 2px;
}

/* M12 (7.5) print styles: drop chrome/ads/games, show link URLs. */
@media print {
	.dmtg-primary-nav,
	.dmtg-nav-toggle,
	.dmtg-nav-overlay,
	#sidebars,
	.dmtg-col-side,
	.dmtg-promo,
	.dmtg-site-footer,
	.dmtg-breadcrumbs { display: none !important; }
	/* Games can't print — show a placeholder, not a blank block or a frozen frame (7.5). */
	.m7-skeleton,
	.m7-game-frame > .ruffle-swf > * { display: none !important; }
	.m7-game-frame,
	.ruffle-swf { display: block !important; height: auto !important; min-height: 0 !important; background: none !important; }
	.ruffle-swf::before { content: "[ Interactive game — view it online ]"; display: block; border: 1px dashed #000; padding: 0.5em; text-align: center; }
	#content,
	.dmtg-col-main { width: 100% !important; max-width: 100% !important; float: none !important; }
	body { background: #fff !important; color: #000 !important; font-size: 12pt; }
	#container,
	.dmtg-container { background: #fff !important; max-width: 100% !important; }
	.format_text a[href]::after,
	.dmtg-entry-content a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
	a[href^="#"]::after,
	a[href^="/"]::after { content: ""; }
}

/* ============================================================
   M12 (quest 7.6) — optional dark mode. Follows the OS (prefers-color-scheme),
   no toggle. Only theme tokens + chrome colours flip; ad units (.adsbygoogle)
   and the Ruffle game canvas (.ruffle-swf/.m7-game-frame) are NEVER recoloured.
   Every dark text/background pair keeps >= WCAG AA (4.5:1), so no fallback.
   Dark token values are kept in lockstep with the inlined critical copy
   (inc/perf.php dmtg_critical_css).
   ============================================================ */
@media (prefers-color-scheme: dark) {
	:root {
		--dmtg-text: #eaeaea;
		--dmtg-link: #8ab4f8;
		--dmtg-bg: #16161e;
		--dmtg-frame: #0e0e16;
		--dmtg-content-bg: #1e1e28;
	}
	.dmtg-site-description { color: #b9b9c6; }
	#footer,
	.dmtg-site-footer { color: #b6b6c2; }
	.dmtg-breadcrumbs a { color: #8ab4f8; }
	.dmtg-breadcrumbs li + li::before { color: #888; }
	.dmtg-promo:not(.dmtg-promo--empty) { background: #20202c; border-color: #3a3a5a; }
	.dmtg-promo a,
	.dmtg-promo-link { color: #8ab4f8; }
	input,
	textarea,
	select { background: #2a2a36; color: #eaeaea; border-color: #555; }
	/* .adsbygoogle and .ruffle-swf/.m7-game-frame intentionally left untouched. */
}

/* ============================================================
   Design audit fixes (design-flow D1/D2, 2026-06-18)
   ============================================================ */

/* D1 — honour prefers-reduced-motion: stop the loading-skeleton pulse and any
   transitions/animations for users who ask for reduced motion (a11y). */
@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;
	}
}

/* D2 — bump body copy to ~16px on phones for this kids' typing site. §4.2.A
   note ② explicitly allows mobile up-sizing; desktop pixel restoration (12px)
   is untouched. Kept in lockstep with the critical copy in inc/perf.php. */
@media (max-width: 767.98px) {
	.format_text,
	.dmtg-entry-content {
		font-size: 1.6em;       /* 16px (desktop stays 12px) */
		line-height: 1.55;
	}
}