/*
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 reference + reset ---------- */
/* Authoritative breakpoints — written as literals in the @media blocks below because
   CSS var() is NOT valid inside a media query, so custom properties for them would be
   dead weight. Change a breakpoint => update every block that uses the literal:
     mobile (max) 767.98px | tablet range 768px–1023.98px | desktop (base) >=1024px. */
:root {
	--dmtg-text: #111111;
	--dmtg-link: #2361a1;
	--dmtg-bg: #b2ccfa;
	--dmtg-frame: #a0bae8;
	--dmtg-frame-border: #acc6f4;
	--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).
   No forced width:100% — prod lets CF7's cols/size set the field width; max-width
   keeps it from overflowing the column on small screens. */
input, select, textarea { max-width: 100%; }
@media (max-width: 767.98px) { 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) ---------- */
/* Outer = 1046px: the 1032px white card (#page) + Thesis 0.3em(3px) gutter +
   0.4em(4px) #acc6f4 side border each side. border-box keeps the inner card 1032. */
#container,
.dmtg-container {
	max-width: 1046px;
	width: 100%;
	margin: 0 auto;
	padding: 0 3px;             /* Thesis #container padding 0 0.3em */
	border: 0 solid var(--dmtg-frame-border);
	border-left-width: 4px;     /* Thesis 0.4em #acc6f4 side frame */
	border-right-width: 4px;
	background: var(--dmtg-frame);   /* #a0bae8 shows in the 3px gutter beside the white card */
}
#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).
   NB: the legacy Thesis `.post_box` selector was dropped — every template uses
   post_class('dmtg-entry') and nothing (theme, mu-plugins, DB content) ever
   emits post_box, so the extra selector was dead weight in both copies. */
.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 { margin: 0; }   /* desktop branding is display:none; mobile sets its own font-size below */
.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;
}

/* Comments chrome sizing (body is 10px, so size these explicitly).
   Footer sizing lives in the prod-parity footer block lower down. */
.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%; }
	.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; }
	.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 .dmtg-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. */
.dmtg-game-frame { position: relative; width: 100%; margin: 0 auto; background: #1a1a1a; }
.dmtg-game-frame > .ruffle-swf > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; }
.dmtg-skeleton {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 10px, #333 10px, #333 20px);
	animation: dmtg-pulse 1.2s ease-in-out infinite;
}
@keyframes dmtg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
/* Only .dmtg-has-fallback exists. There used to be a sibling `.dmtg-fallback`
   selector here for a wrapper element that theme.js never actually created —
   it appends the <p> and <a> straight onto the frame and flags the frame with
   .dmtg-has-fallback (see theme.js:118-126), so the wrapper rule could never
   match anything. Removed rather than kept "just in case": a selector that can
   never match is indistinguishable from one that is broken. */
.dmtg-has-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1em;
	color: #fff;
}
.dmtg-has-fallback a { color: #9fc0ff; }

/* M7 fix — responsive game embeds below desktop. The legacy game content wraps
   the [swf] in <div style="float:left"> (game beside its text on desktop). Below
   1024px the column is narrower than the 728px game, so the float shrink-fits to
   728px and forces a horizontal scrollbar. Stack the floats and cap the Ruffle
   frame to the column so the game scales down and keeps its aspect ratio.
   (Desktop >=1024 keeps the floated side-by-side layout, matching prod.) */
@media (max-width: 1023.98px) {
	.dmtg-entry-content [style*="float"],
	.format_text [style*="float"] {
		float: none !important;
		max-width: 100% !important;
	}
	.dmtg-game-frame,
	.ruffle-swf {
		max-width: 100% !important;   /* beats the JS inline max-width:{w}px */
		float: none !important;
		margin-left: auto;
		margin-right: auto;
	}
	/* Legacy layout tables (e.g. /school-typing-games/ ships a width=608 table with
	   align="left" nesting three width=600 tables). Below the desktop breakpoint the
	   column is narrower than 608px, so the table used to scroll the whole document
	   (375px viewport measured scrollWidth 622). Turn ONLY the outermost content
	   table into its own horizontal scroll box — the nested ones keep their table
	   layout so the two-column game grid still renders. Desktop (>=1024px) is
	   untouched: the 744px column fits the table and prod parity is preserved. */
	.format_text > table,
	.dmtg-entry-content > table {
		display: block;
		width: auto;
		max-width: 100%;
		overflow-x: auto;
		float: none !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------- 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.
   ============================================================ */
/* NOT position:relative — the mobile search panel is a child of this <nav> and
   would then be positioned against it instead of the app bar. Dropdowns are
   positioned by `.menu > li.tab { position: relative }` below, so the nav needs
   no containing block of its own. */
.dmtg-primary-nav { clear: both; }

.dmtg-menu,
.menu {
	display: flex;
	/* WRAP, never nowrap: prod (Thesis) floats the <li>s, so an over-long menu
	   flows onto a second row. With nowrap the 10 dmtg items (~1139px) burst the
	   988px content column — horizontal document scrollbar at 1024-1300px and a
	   dark bar sticking ~150px out of the white card on wider screens. */
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	/* No bar background here: prod's dark colour lives on each <a> only, so the bar
	   ends at the last item (empty space to the right stays page-blue, not dark). */
}
.menu > li.tab { position: relative; }
.menu a {
	display: block;
	text-transform: uppercase;
	letter-spacing: 2px;
	/* colour comes from --dmtg-nav-link on the 3.2b `.menu a` rule above */
	background: #4f4f4f;
	white-space: nowrap;
}
.menu a:hover,
.menu a:focus { color: var(--dmtg-nav-hl-text); background: var(--dmtg-nav-hl-bg); }
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current-menu-ancestor > a {
	color: var(--dmtg-nav-hl-text);
	background: var(--dmtg-nav-hl-bg);
	border-bottom: 1px solid var(--dmtg-nav-hl-bg);
}

/* 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 / search / submenu toggles / overlay are desktop-hidden by default. */
.dmtg-nav-toggle,
.dmtg-search-toggle,
.dmtg-submenu-toggle,
.dmtg-nav-overlay,
.dmtg-search-panel { 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): tighter items (wrapping is the base behaviour) --- */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.menu a { letter-spacing: 1px; padding: 0.5em 0.7em; }
}

/* --- mobile (<768px): wptouch-Bauhaus-style app bar + off-canvas drawer --- */
@media (max-width: 767.98px) {
	/* The header is a dark app bar: search (left) · centred title · hamburger
	   (right). Buttons fill line 1; the <nav> wraps to a 0-height line below it. */
	.dmtg-site-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		min-height: 54px;
		margin: 0;
		padding: 0 2px;
		background: #2d353f;          /* wptouch Bauhaus dark header */
		position: relative;           /* containing block for the search panel below */
	}
	/* Full-width bar like wptouch: drop the desktop blue frame + page padding on
	   mobile, and give the content its own inset instead. */
	#container,
	.dmtg-container { max-width: 100%; border: 0; padding: 0; background: var(--dmtg-content-bg); }
	#page { padding: 0; }
	.dmtg-entry { margin: 0; padding: 18px 14px 0; }
	/* Centred white site title (desktop hides branding for prod parity). */
	.dmtg-branding {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		text-align: center;
	}
	.dmtg-site-title {
		font-size: 1.8em;
		line-height: 1.6;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dmtg-site-title a { color: #fff; text-decoration: none; }
	.dmtg-site-description { display: none; }

	/* Icon buttons: 44px tap targets, white icons, no chrome.
	   Gated on html.dmtg-js (set by the tiny inline head script in inc/perf.php)
	   so the app bar is already correct on the FIRST paint — see the drawer note. */
	.dmtg-js .dmtg-search-toggle,
	.dmtg-js .dmtg-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		color: #fff;
		background: transparent;
		border: 0;
		cursor: pointer;
	}
	.dmtg-nav-toggle-text {        /* hide the "Menu" label — icon only, like wptouch */
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden; clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.dmtg-nav-toggle-icon {
		width: 22px;
		height: 2px;
		background: currentColor;
		box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
	}
	/* <nav> wraps to its own full-width line; with JS the menu is off-canvas so
	   that line collapses to 0 height (no-JS shows the menu as a list there). */
	.dmtg-primary-nav { flex: 1 1 100%; margin: 0; }

	/* No-JS baseline: visible vertical list of items. */
	.dmtg-menu,
	.menu { flex-direction: column; flex-wrap: nowrap; }
	.menu > li.tab { width: 100%; }
	.menu .submenu { position: static; min-width: 0; display: block; }

	/* --- JS: off-canvas drawer that slides in from the RIGHT (matches wptouch) ---
	   The gate is `html.dmtg-js`, added by the inline <head> script in inc/perf.php
	   BEFORE first paint. It used to be `.dmtg-nav-js` on the header, which theme.js
	   only adds after DOMContentLoaded (deferred, footer): the first frame then
	   showed the whole 27-link menu as a ~814px column and collapsed it seconds
	   later — a measured CLS of 0.97 on every mobile page load. Without JS neither
	   class exists and the plain vertical list above stays visible (no-JS baseline).
	   The same rule set is mirrored in dmtg_critical_css() — edit both copies. */
	.dmtg-js .dmtg-menu {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 270px;
		max-width: 84vw;
		margin: 0;
		padding: 0;
		background: #2d353f;
		box-shadow: -2px 0 14px rgba(0, 0, 0, 0.4);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		z-index: 1001;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		display: flex;                /* stays flex; shown via the transform below */
	}
	.dmtg-js .dmtg-menu.dmtg-open { transform: translateX(0); }

	/* Drawer items. */
	.dmtg-js .menu li.tab { display: flex; flex-wrap: wrap; align-items: center; }
	.dmtg-js .menu a {
		flex: 1 1 auto;
		min-height: 48px;
		display: flex;
		align-items: center;
		padding: 0 18px;
		color: #d6d1cb;
		background: transparent;
		text-transform: none;
		letter-spacing: 0;
		border-bottom: 1px solid #3a434f;
	}
	.dmtg-js .menu a:hover,
	.dmtg-js .menu a:focus,
	.dmtg-js .menu .current-menu-item > a,
	.dmtg-js .menu .current_page_item > a { color: #fff; background: #3a434f; }

	/* Submenus: collapsed until the toggle is tapped. The desktop hover/focus-within
	   reveal is DISABLED on mobile — it kept a tapped submenu stuck open (the button
	   stays :focus-within after the tap), so the arrow could expand but never
	   collapse. Now only the toggle's .dmtg-open class controls the submenu. */
	.dmtg-js .menu .submenu {
		flex: 1 0 100%;
		width: 100%;
		background: #262d36;
		display: none;
	}
	.dmtg-js .menu li:hover > .submenu,
	.dmtg-js .menu li:focus-within > .submenu { display: none; }
	.dmtg-js .menu li.dmtg-open > .submenu { display: block; }
	.dmtg-js .menu .submenu a { padding-left: 32px; border-bottom-color: #313944; }

	/* Big, obvious expand/collapse chevron: points DOWN to expand, flips UP when
	   the submenu is open. */
	.dmtg-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-width: 48px;
		min-height: 48px;
		padding: 0;
		background: rgba(255, 255, 255, 0.06);
		border: 0;
		border-bottom: 1px solid #3a434f;
		border-left: 1px solid #3a434f;
		cursor: pointer;
	}
	.dmtg-submenu-toggle .dmtg-chevron {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-right: 2px solid #ffffff;
		border-bottom: 2px solid #ffffff;
		transform: translateY(-2px) rotate(45deg);     /* chevron pointing down = expand */
		transition: transform 0.2s ease;
	}
	.dmtg-js .menu li.dmtg-open > .dmtg-submenu-toggle .dmtg-chevron {
		transform: translateY(2px) rotate(225deg);     /* flipped up = collapse */
	}

	/* Backdrop sits just BELOW the drawer (1001 drawer > 1000 overlay). */
	.dmtg-js .dmtg-nav-overlay.dmtg-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);
	}

	/* Search field slides down under the bar when the search icon is tapped.
	   top:100% of the RELATIVE .dmtg-site-header = exactly the bar's bottom edge,
	   whatever the bar's measured height turns out to be. (The old `top:54px` was
	   resolved against the <nav> — its own parent — which already starts at the bar
	   bottom, so the panel floated 54px below the bar with the page showing through.) */
	.dmtg-search-panel:not([hidden]) {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		padding: 8px;
		background: #2d353f;
		box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
	}
	/* core's html5 search form is <form><label><input></label><input submit>, so the
	   flex ITEM is the <label> — putting flex:1 on the input did nothing. */
	.dmtg-search-panel form { display: flex; gap: 6px; }
	.dmtg-search-panel form > label { flex: 1 1 auto; min-width: 0; display: block; }
	.dmtg-search-panel input[type="search"],
	.dmtg-search-panel input[name="s"],
	.dmtg-search-panel input[type="text"] { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px; }
}

/* ============================================================
   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) — the visual rules (font-size/list/separator/link
   colour) were removed: the prod-parity block further down hides the whole
   <nav class="dmtg-breadcrumbs"> with display:none !important, so they could never
   render and only misled anyone trying to restyle the trail. If breadcrumbs are
   ever shown again, drop that hide rule and re-add the styling here. */

/* 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). */
	.dmtg-skeleton,
	.dmtg-game-frame > .ruffle-swf > * { display: none !important; }
	.dmtg-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 (7.6) dark mode — MANUAL toggle. Default = light (matches production);
   activated by [data-theme="dark"] on <html>, set by the .dmtg-theme-toggle
   button and restored from localStorage by an inline <head> script before first
   paint. Only theme tokens + chrome colours flip; ad units (.adsbygoogle) and
   the Ruffle game canvas are NEVER recoloured. Every dark text/background pair
   keeps >= WCAG AA. Dark values kept in lockstep with the inlined critical copy
   (inc/perf.php dmtg_critical_css).
   ============================================================ */
:root[data-theme="dark"] {
	--dmtg-text: #eaeaea;
	--dmtg-link: #8ab4f8;
	--dmtg-bg: #16161e;
	--dmtg-frame: #0e0e16;
	--dmtg-frame-border: #2a2a3a;
	--dmtg-content-bg: #1e1e28;
}
[data-theme="dark"] .dmtg-site-description { color: #b9b9c6; }
[data-theme="dark"] #footer,
[data-theme="dark"] .dmtg-site-footer { color: #b6b6c2; }
[data-theme="dark"] #footer a,
[data-theme="dark"] .dmtg-site-footer a { color: #b6b6c2; border-bottom-color: #555; }
[data-theme="dark"] .dmtg-promo:not(.dmtg-promo--empty) { background: #20202c; border-color: #3a3a5a; }
[data-theme="dark"] .dmtg-promo a,
[data-theme="dark"] .dmtg-promo-link { color: #8ab4f8; }
/* .adsbygoogle and .ruffle-swf/.dmtg-game-frame intentionally left untouched. */

/* Printing while dark mode is ON: the tokens above stay live inside @media print,
   so body{color:#000!important} could not help — .format_text / .dmtg-entry-title
   carry their OWN color:var(--dmtg-text) and inheritance never reaches them. Flip
   the tokens back to the light palette for print instead: one rule fixes every
   descendant. Must sit AFTER :root[data-theme="dark"] to win (same specificity).
   Matters for the printable worksheet pages, the site's core print feature. */
@media print {
	:root,
	:root[data-theme="dark"] {
		--dmtg-text: #000000;
		--dmtg-link: #000000;
		--dmtg-bg: #ffffff;
		--dmtg-frame: #ffffff;
		--dmtg-frame-border: #ffffff;
		--dmtg-content-bg: #ffffff;
	}
	#page { background: #fff !important; }
}

/* ---- light/dark toggle button (fixed top-right; prod has none, added on request) ---- */
.dmtg-theme-toggle {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 200;
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	border: 1px solid #a0bae8;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.dmtg-theme-toggle:hover { background: #eef3ff; }
.dmtg-theme-toggle:focus-visible { outline: 2px solid #2361a1; outline-offset: 2px; }
.dmtg-theme-toggle-icon::before { content: "\1F319"; }            /* 🌙 in light mode → click for dark */
[data-theme="dark"] .dmtg-theme-toggle { background: #2a2a36; border-color: #3a3a5a; }
[data-theme="dark"] .dmtg-theme-toggle-icon::before { content: "\2600\FE0F"; }  /* ☀️ in dark mode → click for light */
@media print { .dmtg-theme-toggle { display: none !important; } }
/* The FAB only stays top-right when it clears the content card. Its left edge is
   at (viewport - 50px) and the card's right edge at (viewport + 1046)/2, so they
   overlap for every viewport below 1146px — at ~1060px the button sat ON the last
   nav item and swallowed its click (hit-test: elementFromPoint returned the FAB).
   Below that width it drops to the bottom-right, which is also where the mobile app
   bar's hamburger forces it. Kept in lockstep with the critical copy in inc/perf.php. */
@media (max-width: 1145.98px) {
	.dmtg-theme-toggle { top: auto; bottom: 14px; right: 14px; }
}

/* ============================================================
   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;
	}
	/* Exception: keep the devvn image-hotspot "tap me" pulse running — production
	   (Thesis) animates it regardless of reduce-motion, and on the lesson pages it
	   is the primary cue that the keyboard keys are interactive. Matches prod. */
	.pins_animation.ihotspot_pulse {
		animation-duration: 2s !important;
		animation-iteration-count: infinite !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;
	}
}

/* ============================================================
   Desktop pixel-parity with production Thesis (2026-06-18).
   Reproduces the rendered look of dancemattypingguide.com so visitors
   see no change after migration. Spec = thesis_185/custom/layout.css.
   Values converted from Thesis's 10px em base (1em = 10px). Scoped so
   the responsive mobile reflow below 768px is untouched.
   ============================================================ */

/* prod hides #header entirely (top shows only the nav bar), so the breadcrumb trail
   is display:none here to match. NB display:none removes it from the accessibility
   tree too — it is NOT an a11y/SEO fallback, it is simply hidden; the markup only
   stays in the DOM because the templates emit it. The branding hide is
   desktop/tablet only — on mobile the wptouch-style app bar shows the centred site
   title (see the <=767.98px block). */
.dmtg-breadcrumbs { display: none !important; }
@media (min-width: 768px) {
	.dmtg-branding { display: none !important; }
}

/* Nav bar sits where Thesis's `.custom ul.menu { margin-top: 14px }` placed it.
   Desktop/tablet ONLY: this block is below the mobile @media, and media queries add
   no specificity, so an unscoped rule here silently beat the mobile `margin: 0` and
   padded the phone app bar to 58px. Kept in lockstep with inc/perf.php. */
@media (min-width: 768px) {
	.dmtg-primary-nav { margin-top: 14px; }
}

/* prod's current menu item has no border (just the #bdbdbd highlight) — drop the
   1px border-bottom that made the dmtg bar 1px taller and shifted content down. */
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current-menu-ancestor > a { border-bottom: 0; }

/* Page-title block: Thesis separates the headline from the body with
   .headline_area { margin-bottom: 2.2em (22px) } and a zero-margin h1. The Thesis
   h1 is font-weight:normal (not bold) — bold made the dmtg title wider and ghosted
   against prod. Match both so the content column starts at the same y as prod. */
.dmtg-entry-title,
.headline_area h1,
.headline_area h2 { font-weight: normal; }
/* Specificity (0,2,1): the plain `.dmtg-entry-title` (0,1,0) this replaced could
   never beat `h1.dmtg-entry-title` (0,1,1) in the 3.2b group, so the page title
   really rendered with an 11px bottom margin while the inlined critical copy said
   0 — the exact first-paint drift this file is supposed to avoid. Scoping it to
   .headline_area also stops it from wiping the gap between the archive/search
   <h2 class="dmtg-entry-title"> and its excerpt (they keep the 0.5em above). */
.headline_area h1.dmtg-entry-title,
.headline_area h2.dmtg-entry-title { margin: 0; }
.dmtg-entry-header,
.headline_area { margin-bottom: 22px; }

/* Archive / search result titles are links and live OUTSIDE .format_text, so they
   never picked up the site link colour and fell back to the UA #0000EE — 1.75:1
   against the dark card in dark mode. Token-driven, so dark flips automatically. */
.dmtg-entry-title a { color: var(--dmtg-link); text-decoration: none; }
.dmtg-entry-title a:hover,
.dmtg-entry-title a:focus { text-decoration: underline; }

/* ---- content body: full Thesis .format_text typography (lists, headings, images) ---- */
/* Thesis resets list padding to 0 via *{padding:0} and indents with margin-left
   only; the marker sits in that 1.667em margin. Without padding:0 the browser
   default padding-left:40px narrows the text box and long items wrap (list grew
   20px taller, shifting the whole lower page). Zero it to match prod exactly. */
.format_text ul,
.dmtg-entry-content ul { list-style: square; margin: 0 0 1.667em 1.667em; padding: 0; }
.format_text ol,
.dmtg-entry-content ol { list-style: decimal; margin: 0 0 1.667em 1.667em; padding: 0; }
.format_text ul ul, .format_text ul ol, .format_text ol ul, .format_text ol ol,
.dmtg-entry-content ul ul, .dmtg-entry-content ul ol,
.dmtg-entry-content ol ul, .dmtg-entry-content ol ol { margin: 0 0 0 1.667em; padding: 0; }
.format_text li,
.dmtg-entry-content li { margin: 0; }

/* In-content headings (Thesis: h2 bold, h3 normal; 1.286em of the 12px body). */
.format_text h2, .format_text h3,
.dmtg-entry-content h2, .dmtg-entry-content h3 {
	font-size: 1.286em;
	line-height: 1.222em;
	margin: 1.833em 0 0.611em 0;
}
.format_text h2,
.dmtg-entry-content h2 { font-weight: bold; }
.format_text h3,
.dmtg-entry-content h3 { font-weight: normal; }
/* h4/h5/h6: Thesis sizes them and zeroes the margins via *{margin:0}. Without
   these, the browser-default heading margins (~1.33em each) accumulate — on the
   privacy page (59×h4, 16×h5) that drifted the layout ~1175px. */
.format_text h4,
.dmtg-entry-content h4 { font-size: 1em; font-weight: bold; margin: 0; }
.format_text h5,
.dmtg-entry-content h5 { font-size: 0.786em; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.format_text h6,
.dmtg-entry-content h6 { font-size: 0.786em; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; margin: 0; }

/* Image alignment classes used in the post content (banner is .alignnone). */
.format_text img.alignleft, .format_text img.left,
.dmtg-entry-content img.alignleft { float: left; margin: 0 1.667em 1.667em 0; }
.format_text img.alignright, .format_text img.right,
.dmtg-entry-content img.alignright { float: right; margin: 0 0 1.667em 1.667em; }
.format_text img.aligncenter, .format_text img.center,
.dmtg-entry-content img.aligncenter { display: block; float: none; clear: both; margin: 0 auto 1.667em auto; }
.format_text img.alignnone, .format_text img.block,
.dmtg-entry-content img.alignnone { display: block; clear: both; margin: 0 auto 1.667em 0; }

/* [caption] shortcodes: add_theme_support('html5','caption') makes core emit
   <figure class="wp-caption" style="width:700px">, and an inline width does NOT
   shrink on a phone — /keyboard-ninja/ scrolled the whole document sideways
   (375px viewport, scrollWidth 714). max-width beats the inline width without
   !important because they are different properties. */
.wp-caption,
.format_text figure,
.dmtg-entry-content figure {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.wp-caption img { max-width: 100%; height: auto; }
.wp-caption-text { font-size: 0.9em; line-height: 1.4; margin: 0.4em 0 0; }

/* ---- content helper classes referenced by the existing page HTML ---- */
/* Green "Level" buttons (a.btn) — verbatim look from Thesis custom.css. */
a.btn {
	display: inline-block;
	text-decoration: none;
	padding: 0.5em 1em;
	margin: 0 3px;
	font-size: 20px;
	line-height: 18px;
	color: #333333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	vertical-align: middle;
	cursor: pointer;
	background: #7be03e;
	background: linear-gradient(to bottom, #7be03e 0%, #62ad30 100%);
	border: 1px solid #e6e6e6;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-bottom-color: #b3b3b3;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
a.btn:hover, a.btn:active {
	color: inherit;
	background: #e2ef8f;
	background: linear-gradient(to bottom, #e2ef8f 0%, #d0db3d 100%);
}

/* Coloured CTA buttons (.button1 red / .button2 blue / .button3 yellow).

   The colour declarations below are written as `a.buttonN`, not `.buttonN`, and that is
   load-bearing. Prod (Thesis) can get away with a bare class because its `.format_text a`
   only sets text-decoration — it never sets a colour, so nothing competes with the button's
   own. This theme's `.format_text a` (line 151) DOES set `color: var(--dmtg-link)`, and at
   (0,1,1) that beats a bare `.buttonN` at (0,1,0). The result was measured against prod:
   every CTA rendered in link blue #2361a1 instead of white/#333 — worst on .button2, which
   is blue text on a blue gradient. Adding the element selector brings these to (0,1,1),
   tying with `.format_text a`, and source order (here, far below line 151) decides in their
   favour — the same mechanism that has always kept `a.btn` correct.

   Every use in the content is an <a> (checked: 0 non-anchor uses), so no case is lost.
   Geometry stays on the bare class so a non-anchor button would still be shaped correctly.

   Keep in lockstep with the copy inlined in inc/perf.php. */
.button1, .button2, .button3 {
	display: inline-block;
	cursor: pointer;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 21px;
	font-weight: bold;
	padding: 6px 24px;
	text-decoration: none;
	border-radius: 6px;
}
a.button1 {
	color: #ffffff;
	background: #fc8d83;
	background: linear-gradient(to bottom, #fc8d83 5%, #e4685d 100%);
	border: 1px solid #d83526;
	text-shadow: 0 1px 0 #b23e35;
	box-shadow: inset 0 1px 0 #f7c5c0;
}
.button1:hover { background: #e4685d; background: linear-gradient(to bottom, #e4685d 5%, #fc8d83 100%); }
a.button2 {
	color: #ffffff;
	background: #33bdef;
	background: linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	border: 1px solid #057fd0;
	text-shadow: 0 -1px 0 #5b6178;
	box-shadow: 0 1px 0 #f0f7fa;
}
.button2:hover { background: #019ad2; background: linear-gradient(to bottom, #019ad2 5%, #33bdef 100%); }
a.button3 {
	color: #333333;
	background: #ffec64;
	background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	border: 1px solid #ffaa22;
	text-shadow: 0 1px 0 #ffee66;
	box-shadow: 0 1px 0 #fff6af;
}
.button3:hover { background: #ffab23; background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); }
.button1:active, .button2:active, .button3:active { position: relative; top: 1px; }

/* ---- form fields (contact / search) ---- */
/* Font: Thesis renders form controls in Georgia at 1em(12px) with 0.214em padding.
   Matching the font is what makes the CF7 size=40 input boxes line up to prod's
   width and stops the field rows from drifting vertically. (Not in a colour-scheme
   query — the metrics must match in both light and dark.) *
/* Default (light, = prod): Thesis grey inputs. *
/* Dark toggle override (the [data-theme] ancestor outranks the default rule). *

/* ---- self-hosted contact form: status messages + submit button ---- */
/* inc/contact-form.php redirects (PRG) back with ?dmtg_contact=sent|invalid|slow
   and prints <p class="dmtg-contact-msg dmtg-contact-ok|-err">. Unstyled, success
   and failure were byte-identical 12px body paragraphs — only a screen reader
   could tell them apart via role=status / role=alert. */
/* Descendant selector on purpose: the message is a <p> inside .format_text, whose
   `margin: 0 0 1.667em` is (0,1,1) and would outrank a bare .dmtg-contact-msg. */
.format_text .dmtg-contact-msg,
.dmtg-entry-content .dmtg-contact-msg {
	margin: 0 0 1.2em;
	padding: 0.7em 1em;
	border-left-width: 4px;
	border-left-style: solid;
	border-radius: 3px;
	font-weight: bold;
}
.dmtg-contact-ok { color: #1c5f2b; background: #eaf7ee; border-left-color: #2e7d32; }
.dmtg-contact-err { color: #8a1c1c; background: #fdecec; border-left-color: #c62828; }
[data-theme="dark"] .dmtg-contact-ok { color: #a5d6a7; background: #1d2a20; border-left-color: #4caf50; }
[data-theme="dark"] .dmtg-contact-err { color: #ef9a9a; background: #2b1d1d; border-left-color: #e57373; }
.dmtg-contact-submit {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	padding: 0.4em 1.4em;
	color: #ffffff;
	background: #4f4f4f;
	border: 1px solid #3a3a3a;
	border-radius: 3px;
	cursor: pointer;
}
.dmtg-contact-submit:hover { background: #2d353f; }

/* ---- the_posts_pagination() (archive / search / index) ---- */
/* The nav sits outside .format_text, so it inherited the 10px body size and the
   UA link colour (unreadable on the dark card in dark mode, and far under the
   44px touch target on phones). */
.navigation.pagination { font-size: 1.2em; margin: 1.5em 0; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.page-numbers {
	display: inline-block;
	min-width: 32px;
	min-height: 32px;
	padding: 0 8px;
	line-height: 32px;
	text-align: center;
	color: var(--dmtg-link);
	text-decoration: none;
}
.page-numbers.current { color: var(--dmtg-text); font-weight: bold; }
a.page-numbers:hover, a.page-numbers:focus { text-decoration: underline; }
@media (max-width: 767.98px) {
	.navigation.pagination { font-size: 1.6em; }
	.page-numbers { min-width: 44px; min-height: 44px; line-height: 44px; }
}

/* ---- touch targets inside the legacy games table (/school-typing-games/) ---- */
/* That page is a Thesis-era <table> layout:每个游戏块是一个 td.rtext，里面有三个
   链接 —— 游戏名（<b><span>，行高 17px）、缩略图（235×135）、以及 "play now" 按钮
   （pnow.gif，86×18）。在 390px 视口下实测，标题链接与 play 按钮的真实可点区域只有
   17px 和 18px 高，手机上很难点准；缩略图 135px 本来就够大。

   只在手机断点内提到 44px（与上面分页链接同一约定），桌面完全不受影响 —— 那一侧要
   保持对生产站 Thesis 布局的像素还原，任何改动都不能溢出到 >=768px。

   inline-flex + align-items:center 而不是 line-height:44px：这些锚点里既有纯文本
   （<b><span>）也有替换元素（<img>），line-height 只能撑起文本行盒，对包着图片的那个
   没有作用，而 flex 对两种内容一视同仁。min-height 是下限，不会把 135px 的缩略图压小。

   量的判据：实测把过小目标从 18 个降到 0；WCAG 2.2 AA 的最小值是 24×24，这里取 44
   是因为主题里分页已经用了 44，保持一致比压到底线更好维护。 */
@media (max-width: 767.98px) {
	/* 后代选择器而不是子选择器：wpautop 会把 "play now" 那个 <a> 包进 <p>，
	   所以它不是 td.rtext 的直接子元素。第一版用 `>` 时标题链接修好了、play
	   按钮纹丝不动（仍 18px），就是这个原因。
	   放宽到后代是安全的：整页 27 个正文链接 = 9 个游戏块 × 3 个（标题/缩略图/按钮），
	   描述段 <p class="ntitle"> 里是纯文本、不含链接，没有会被误伤的行内链接。 */
	.format_text td.rtext a,
	.dmtg-entry-content td.rtext a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ---- footer: match prod (right-aligned grey links + copyright line) ---- */
#footer,
.dmtg-site-footer {
	font-size: 1em;            /* reset the old 1.1em base so credit = 1.2em(12px) and padding = 1.1em(11px), matching prod */
	text-align: right;
	color: #6f6f6f;            /* darker than prod #888 to clear WCAG AA (4.5:1) on white */
	padding: 1.1em 11px;
	border: 0;
}
.dmtg-site-footer .dmtg-footer-credit { font-size: 1.2em; line-height: 1.667em; }
#footer a,
.dmtg-site-footer a { color: #6f6f6f; border-bottom: 1px solid #cccccc; text-decoration: none; }
#footer a:hover,
.dmtg-site-footer a:hover { color: #111111; }