/*
Theme Name: Profitable Online Store V4
Theme URI: https://profitableonlinestore.com/
Description: Responsive redesign of the Profitable Online Store membership theme. Modernized navy/green brand identity, fluid type scale, mobile-first layout. Successor to Profitable Online Store SSL V3.
Author: Profitable Online Store
Version: 4.0
Tags: responsive, two-columns, custom-menu, membership, translation-ready
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Links & buttons
   5.  Forms
   6.  Layout shell
   7.  Site header & navigation
   8.  Content & entries
   9.  Media, tables, code
   10. Post navigation & pagination
   11. Comments
   12. Widget areas / sidebar
   13. Site footer
   14. Membership & lesson UI
   15. Utilities
   16. Legacy compatibility shims
   17. Print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* --- Brand: navy (refined around the legacy #1a5088) --- */
	--navy-50:  #eef4fb;
	--navy-100: #d6e4f5;
	--navy-200: #adc8e9;
	--navy-300: #7ea6d8;
	--navy-400: #4b7fc0;
	--navy-500: #1a5088;   /* legacy brand navy — preserved exactly */
	--navy-600: #164575;
	--navy-700: #123760;
	--navy-800: #0e2b4b;
	--navy-900: #0a2038;
	/* --- Brand: green (legacy #0c8442) — success + accent --- */
	--green-50:  #eaf7ef;
	--green-100: #cbebd7;
	--green-200: #97d7b0;
	--green-300: #5bbd85;
	--green-400: #23a061;
	--green-500: #0c8442;   /* legacy brand green — preserved exactly */
	--green-600: #0a7038;
	--green-700: #085a2d;
	--green-800: #064522;
	/* --- Neutrals --- */
	--gray-0:   #ffffff;
	--gray-25:  #fbfcfd;
	--gray-50:  #f5f7fa;
	--gray-100: #eaeef3;
	--gray-200: #dbe1e9;
	--gray-300: #c2cbd6;
	--gray-400: #94a1b1;
	--gray-500: #6b7889;
	--gray-600: #4f5a69;
	--gray-700: #3a434f;
	--gray-800: #252c36;
	--gray-900: #151a21;
	/* --- Semantic ---
	   The page is one flat surface: no card backgrounds, no section boxes. */
	--color-bg:            var(--gray-0);
	--color-surface:       var(--gray-0);
	--color-surface-alt:   var(--gray-0);
	--color-border:        var(--gray-200);
	--color-border-strong: var(--gray-300);
	--color-text:          var(--gray-800);
	--color-text-muted:    var(--gray-500);
	--color-text-inverse:  var(--gray-0);
	--color-heading:       var(--gray-900);
	--color-primary:        var(--navy-500);
	--color-primary-hover:  var(--navy-600);
	--color-primary-active: var(--navy-700);
	--color-accent:         var(--green-500);
	--color-accent-hover:   var(--green-600);
	--color-link:       var(--navy-600);
	--color-link-hover: var(--navy-800);
	--color-success:    var(--green-500);
	--color-success-bg: var(--green-50);
	--color-warning:    #b45309;
	--color-warning-bg: #fef3c7;
	--color-danger:     #b42318;
	--color-danger-bg:  #fee4e2;
	/* --- Typography --- */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, "Noto Sans", sans-serif,
	             "Apple Color Emoji", "Segoe UI Emoji";
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	             "Liberation Mono", monospace;
	/* Fluid type scale — min at ~360px viewport, max at ~1200px */
	--text-xs:   0.8125rem;                                    /* 13px */
	--text-sm:   0.875rem;                                     /* 14px */
	--text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);     /* 16 → 17px */
	--text-lg:   clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);  /* 18 → 19px */
	--text-xl:   clamp(1.25rem, 1.17rem + 0.36vw, 1.4375rem);  /* 20 → 23px */
	--text-2xl:  clamp(1.5rem, 1.36rem + 0.6vw, 1.875rem);     /* 24 → 30px */
	--text-3xl:  clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);     /* 28 → 38px */
	--text-4xl:  clamp(2rem, 1.62rem + 1.7vw, 3rem);           /* 32 → 48px */
	/* Dedicated h1 step, deliberately between 3xl and 4xl. 3xl (38px max) sat
	   only 1.27x above h2 and read as the same level; 4xl (48px) overshot. This
	   lands at 1.33-1.4x above h2 across the whole range. Both the base h1 and
	   h1.entry-title reference this, so the two can never drift apart. */
	--text-h1:   clamp(2rem, 1.7rem + 1.25vw, 2.625rem);       /* 32 → 42px */
	--leading-tight:   1.2;
	--leading-snug:    1.35;
	--leading-normal:  1.6;
	--leading-relaxed: 1.75;
	--weight-normal:   400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;
	/* --- Spacing (4px base) --- */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	/* --- Radii --- */
	--radius-sm:   4px;
	--radius:      8px;
	--radius-md:   10px;
	--radius-lg:   14px;
	--radius-full: 999px;
	/* --- Elevation --- */
	--shadow-xs: 0 1px 2px rgba(10, 32, 56, 0.06);
	--shadow-sm: 0 1px 3px rgba(10, 32, 56, 0.08), 0 1px 2px rgba(10, 32, 56, 0.04);
	--shadow:    0 4px 12px rgba(10, 32, 56, 0.08), 0 1px 3px rgba(10, 32, 56, 0.05);
	--shadow-lg: 0 12px 28px rgba(10, 32, 56, 0.12), 0 4px 10px rgba(10, 32, 56, 0.06);
	/* --- Layout --- */
	--container-max: 1200px;
	--gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
	--sidebar-width: 300px;
	/* The width the content column resolves to on a two-column page: the
	   container minus its gutters, the sidebar, and the column gap (812px at
	   full size). Sidebar-less pages reuse it so content is the same width
	   site-wide whether or not a sidebar is present. */
	--content-column: calc(var(--container-max) - (var(--gutter) * 2)
	                       - var(--sidebar-width) - var(--space-6));
	--content-measure: 72ch;
	--transition-fast: 120ms ease;
	--transition:      180ms ease;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

svg { fill: currentColor; }

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

hr {
	height: 1px;
	margin: var(--space-10) 0;
	background: var(--color-border);
}

::selection {
	background: var(--navy-100);
	color: var(--navy-900);
}

/* Visible focus ring for keyboard users only */
:focus-visible {
	outline: 3px solid var(--navy-400);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-4);
	color: var(--color-heading);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

/* Headings that follow content get breathing room above */
* + h2 { margin-top: var(--space-12); }
* + h3 { margin-top: var(--space-10); }
* + h4,
* + h5,
* + h6 { margin-top: var(--space-8); }

p { margin: 0 0 var(--space-5); }

p:last-child,
ul:last-child,
ol:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--weight-semibold); }
em, i     { font-style: italic; }

small {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

mark {
	padding: 0.1em 0.3em;
	border-radius: var(--radius-sm);
	background: #fef3c7;
	color: var(--gray-900);
}

blockquote {
	margin: var(--space-8) 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	font-style: italic;
	line-height: var(--leading-relaxed);
}

blockquote cite {
	display: block;
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-style: normal;
	font-weight: var(--weight-medium);
}

/* 32px rather than 24px: at 24 the markers sat almost flush with the body text
   above them, so a list did not read as indented at a glance. The sidebar and
   the card grids set their own padding:0, so this only affects prose lists. */
ul, ol {
	margin: 0 0 var(--space-5);
	padding-left: var(--space-8);
}

li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

ul ul, ul ol,
ol ol, ol ul { margin: var(--space-2) 0 0; }

dl { margin: 0 0 var(--space-5); }
dt { font-weight: var(--weight-semibold); color: var(--color-heading); }
dd { margin: 0 0 var(--space-4); padding-left: var(--space-4); }


/* ==========================================================================
   4. LINKS & BUTTONS
   ========================================================================== */

a {
	color: var(--color-link);
	text-decoration-color: var(--navy-200);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	transition: color var(--transition-fast),
	            text-decoration-color var(--transition-fast);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	text-decoration-color: currentColor;
}

/* --- Buttons --- */
.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-xs);
	transition: background var(--transition-fast),
	            box-shadow var(--transition-fast),
	            transform var(--transition-fast);
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background: var(--color-primary-hover);
	color: var(--color-text-inverse);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
}

.btn:active,
.button:active,
input[type="submit"]:active {
	background: var(--color-primary-active);
	transform: translateY(1px);
	box-shadow: none;
}

.btn:disabled,
.button:disabled,
input[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.btn--accent { background: var(--color-accent); }
.btn--accent:hover { background: var(--color-accent-hover); }

.btn--outline {
	background: transparent;
	color: var(--color-primary);
	box-shadow: none;
}

.btn--outline:hover {
	background: var(--navy-50);
	color: var(--color-primary-active);
}

.btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-lg);
}

.btn--block {
	display: flex;
	width: 100%;
}

/* Skip link for keyboard + screen reader users */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	z-index: 999;
	padding: var(--space-3) var(--space-5);
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	transition: top var(--transition);
}

.skip-link:focus {
	top: 0;
	color: var(--color-text-inverse);
}


/* ==========================================================================
   5. FORMS
   ========================================================================== */

label {
	display: inline-block;
	margin-bottom: var(--space-2);
	color: var(--color-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-base);
	line-height: 1.5;
	transition: border-color var(--transition-fast),
	            box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--navy-400);
	box-shadow: 0 0 0 3px var(--navy-100);
}

input::placeholder,
textarea::placeholder {
	color: var(--gray-400);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

select {
	appearance: none;
	padding-right: var(--space-10);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7889' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
}

fieldset {
	margin: 0 0 var(--space-6);
	padding: var(--space-5);
	border-radius: var(--radius);
}

legend {
	padding: 0 var(--space-2);
	font-weight: var(--weight-semibold);
}

/* --- Search form --- */
.search-form,
#searchform {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
}

.search-form label,
#searchform label {
	flex: 1;
	margin: 0;
}

.search-form input[type="search"],
.search-form input[type="text"],
#searchform input[type="text"],
#searchform input[type="search"] {
	flex: 1;
	min-width: 0;
}

#searchform input[type="submit"],
.search-form input[type="submit"],
.search-form button {
	flex-shrink: 0;
	padding-inline: var(--space-4);
}


/* ==========================================================================
   6. LAYOUT SHELL
   ========================================================================== */

#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: auto;
	margin: 0;
	background: transparent;
}

#main {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-10) var(--gutter) var(--space-16);
	clear: none;
	overflow: visible;
}

/* Two columns once there is room for a real sidebar.
   :has() lets templates opt in simply by calling get_sidebar() — no PHP flag
   needed. .has-sidebar stays available as an explicit override, and browsers
   without :has() fall back to the stacked single-column layout, which is
   still perfectly readable. */
@media (min-width: 62rem) {
	#main:has(> .sidebar-column),
	#main.has-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
		/* Column gap pulls the sidebar in toward the content; the row gap
		   only matters in the stacked mobile case. */
		column-gap: var(--space-6);
		row-gap: var(--space-10);
	}

	/* The 72ch measure is what actually held the sidebar away: it capped the
	   text at ~612px inside an ~812px column, leaving ~200px of dead space
	   that no amount of gap-shrinking could close. In the two-column layout
	   the grid column already constrains the line length, so the cap comes
	   off and the text runs to meet the sidebar. */
	#main:has(> .sidebar-column) .entry-content,
	#main:has(> .sidebar-column) .entry-summary,
	#main.has-sidebar .entry-content,
	#main.has-sidebar .entry-summary {
		max-width: none;
	}

	/* 35px of breathing room on the sidebar's own left edge, on top of the
	   24px column gap -> 59px total between body text and widget text.
	   Desktop only; in the stacked mobile layout it would just push the
	   sidebar out of alignment with the content above it. */
	.sidebar-column {
		padding-left: 35px;

		/* Sticky sidebar. Two things make this work:
		   - #main already sets align-items:start. Without it the grid would
		     stretch this column to the full row height and sticky would have
		     no slack to move in, so it would appear to do nothing.
		   - --header-h is published by theme.js from the live height of the
		     sticky .site-header, because the banner is fluid and a fixed
		     offset would be wrong at most widths. The 0px fallback means a
		     JS failure degrades to sticking at the very top, not to broken. */
		position: sticky;
		top: calc(var(--header-h, 0px) + var(--space-6));

		/* Deliberately NO max-height/overflow here. Capping the height made the
		   column scroll internally, which put a scrollbar down its right edge on
		   shorter viewports -- not wanted. The widget stack measures ~623px, so
		   it fits under the header on most screens; on a short window the last
		   widget simply sits below the fold while the column is pinned, which is
		   a better trade than a permanent bar. */
	}
}

/* --- Sidebar-less pages: centre the content column -----------------------
   Without a sidebar #main is a single full-width column, so content sat flush
   left with a large empty gutter on the right. Constraining to --content-column
   and centring gives those pages the same measure as a two-column page, just
   centred, so the site reads consistently either way.

   Scope notes:
   - Keyed on #main, so the checkout/signup/forum templates that ship their own
     header (and never emit #main) are untouched.
   - salespagev3.php is served legacy-v3.css instead of this file, so it is
     excluded automatically.

   cpolv3 sized every no-sidebar layout explicitly on #content:

       .wide-column       1000px      .wide                800px
       .one-column         640px      .single-attachment   full width

   cpolv4 shipped .wide-column and .onecolumn but never .wide, .one-column
   (note the hyphen) or .single-attachment -- so ~19 templates, classroom and
   workshop among them, silently lost their width and fell back to the 72ch
   .entry-content measure, rendering about 17% narrower than in v3. Those
   widths are restored below and centred. */
@media (min-width: 62rem) {
	#main:not(:has(> .sidebar-column)) > #container > #content {
		max-width: var(--content-column);
		margin-inline: auto;
	}

	#main > #container.wide-column > #content { max-width: 1000px; }
	#main > #container.one-column  > #content,
	#main > #container.onecolumn   > #content { max-width: 640px; }

	/* Deliberately edge-to-edge. */
	#main > #container.single-attachment > #content,
	#main > #container.saleswide         > #content,
	#main > #container.long_form_sales   > #content { max-width: none; }

	/* The 72ch prose measure is only correct when a sidebar is competing for
	   the row. Without one it just makes the text narrower than the column it
	   sits in, which is what caused the regression above. */
	#main:not(:has(> .sidebar-column)) .entry-content,
	#main:not(:has(> .sidebar-column)) .entry-summary {
		max-width: none;
	}
}

/* All widget areas share one grid cell, so any number of them can be active
   without pushing a column onto a new row. */
.sidebar-column {
	display: flex;
	flex-direction: column;
	/* At least as large as the 36px between widgets, so crossing from the
	   primary widget area into the secondary one never reads as tighter
	   than moving between two widgets inside the same area. */
	gap: var(--space-10);
	min-width: 0;
}

/* The legacy float layout is replaced by grid — neutralize the old rules */
#container {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

#content {
	margin: 0;
	padding: 0;
	min-width: 0;
	color: var(--color-text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

#content input,
#content textarea {
	color: var(--color-text);
	font-size: var(--text-base);
}

/* One-column page template */
.wide-column #content,
.onecolumn #content,
body.page-template-onecolumn-page #content {
	max-width: none;
}


/* ==========================================================================
   7. SITE HEADER & NAVIGATION
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-4) var(--gutter);
}

/* --- Branding ---
   The header art is a wide 1000x130 banner (7.7:1), not a compact logo, so
   the branding block takes the available width and the banner scales into
   it rather than sitting at a fixed size. */
#header_banner,
.site-branding {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.site-branding h1,
#header_banner h1 {
	margin: 0;
	font-size: inherit;
	line-height: 0;
	letter-spacing: normal;
}

.site-branding a,
#header_banner h1 a {
	display: block;
	width: auto;
	height: auto;
	overflow: visible;
	text-indent: 0;
	background: none;
	text-decoration: none;
	border-radius: var(--radius-sm);
}

/* Banner scales with the header, capped at its natural 1000px so it is never
   upscaled and blurry. aspect-ratio holds the space before the image loads,
   so the header does not jump. */
.site-logo {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	aspect-ratio: 1000 / 130;
	object-fit: contain;
	object-position: left center;
}

/* Text fallback when no logo image is available */
.site-title-text {
	display: block;
	color: var(--color-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	text-decoration: none;
}

.site-title-text:hover { color: var(--color-primary); }

/* --- Mobile nav toggle --- */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none;
}

.nav-toggle:hover {
	background: var(--gray-50);
	color: var(--color-primary);
	box-shadow: none;
}

.nav-toggle:active { transform: none; }

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background var(--transition);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--transition), top var(--transition);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (min-width: 62rem) {
	.nav-toggle { display: none; }
}

/* On narrow screens the toggle drops its text label and becomes icon-only,
   so the wide banner keeps as much width as possible instead of being
   squeezed to an unreadable height. The label stays in the accessibility
   tree, so the button still announces as "Menu". */
@media (max-width: 34rem) {
	.site-header__inner {
		gap: var(--space-3);
		padding-block: var(--space-3);
	}

	.nav-toggle {
		padding: var(--space-2) var(--space-3);
	}

	.nav-toggle__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --- Primary navigation --- */
#menu,
.site-nav {
	padding: 0;
	background: var(--color-primary);
	box-sizing: border-box;
}

.site-nav__inner {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

#menu ul,
.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li,
.site-nav li {
	display: block;
	margin: 0;
	font-weight: var(--weight-semibold);
}

#menu a,
.site-nav a {
	display: flex;
	align-items: center;
	padding: var(--space-4);
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--color-text-inverse);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--transition-fast),
	            border-color var(--transition-fast);
}

#menu a strong,
.site-nav a strong {
	color: inherit;
	font-weight: inherit;
}

#menu a:hover,
#menu a:focus,
#menu a:active,
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:active {
	background: var(--navy-600);
	color: var(--color-text-inverse);
	border-bottom-color: var(--color-accent);
}

#menu .current_page_item > a,
#menu .current-menu-item > a,
#menu li.current_page_item a:link,
#menu li.current_page_item a:visited,
.site-nav .is-current > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-item > a {
	background: var(--navy-700);
	color: var(--color-text-inverse);
	border-bottom-color: var(--color-accent);
}

/* Push account/logout links to the right edge on desktop */
@media (min-width: 62rem) {
	.site-nav .nav-item--end { margin-left: auto; }
}

/* Collapse the nav into a toggle-driven panel on small screens */
@media (max-width: 61.99rem) {
	#menu,
	.site-nav { display: none; }

	#menu.is-open,
	.site-nav.is-open { display: block; }

	.site-nav__inner { padding: 0; }

	#menu ul,
	.site-nav ul { flex-direction: column; }



	#menu a,
	.site-nav a {
		padding: var(--space-4) var(--gutter);
		border-bottom: 0;
		border-left: 3px solid transparent;
	}

	#menu a:hover,
	#menu a:focus,
	.site-nav a:hover,
	.site-nav a:focus {
		border-bottom-color: transparent;
		border-left-color: var(--color-accent);
	}

	#menu .current_page_item > a,
	#menu .current-menu-item > a,
	.site-nav .is-current > a,
	.site-nav .current_page_item > a,
	.site-nav .current-menu-item > a {
		border-bottom-color: transparent;
		border-left-color: var(--color-accent);
	}
}

/* Without JS the nav must never be hidden */
.no-js .site-nav,
.no-js #menu {
	display: block !important;
}


/* ==========================================================================
   8. CONTENT & ENTRIES
   ========================================================================== */

.hentry,
#content .post,
#content .page {
	margin: 0 0 var(--space-12);
	padding: 0;
	background: none;
	box-shadow: none;
}

.hentry:last-child { margin-bottom: 0; }

/* In a listing, a hairline is all that separates one post from the next. */
.blog .hentry + .hentry,
.archive .hentry + .hentry,
.search .hentry + .hentry,
#content .hentry + .hentry {
	padding-top: var(--space-12);
}

body.single .hentry,
body.page .hentry { margin-bottom: var(--space-10); }

/* --- Entry titles --- */
.entry-title,
#content .entry-title {
	margin: 0 0 var(--space-3);
	color: var(--color-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
}

.entry-title a,
#content .entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus,
#content .entry-title a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

/* The display size keys off the TAG, not a body class.
 *
 * This was `body.single .entry-title` (0,2,1), which lost to the
 * `#content .entry-title` rule above (1,1,0) — an ID outranks any number of
 * classes — so the display size never applied and every entry title rendered
 * at --text-2xl, identical to an h2.
 *
 * Qualifying by tag fixes the specificity (1,1,1 beats 1,1,0) and is also more
 * accurate: loop.php marks up listing titles as h2.entry-title (they stay at
 * --text-2xl), while single.php, page.php and the ~20 legacy templates
 * (classroom, workshop, welcome, member, modulename…) all use h1.entry-title
 * and now get the display size consistently — which the body-class version
 * never covered. The checkout templates carry inline font-size, so they are
 * unaffected either way. */
h1.entry-title,
#content h1.entry-title {
	font-size: var(--text-h1);
}

/* --- Page titles (archive, search, category headers) --- */
.page-title,
#content .page-title {
	margin: 0 0 var(--space-8);
	padding-bottom: var(--space-5);
	color: var(--color-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: -0.015em;
}

.page-title span { color: var(--color-primary); }

.archive-meta {
	margin-bottom: var(--space-8);
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--navy-50);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.archive-meta p:last-child { margin-bottom: 0; }

/* --- Entry meta --- */
.entry-meta,
#content .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

.entry-meta:empty { display: none; }

.entry-meta a {
	color: var(--color-text-muted);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.entry-meta a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

/* --- Entry content --- */
.entry-content,
.entry-summary,
#content .entry-content {
	max-width: var(--content-measure);
	color: var(--color-text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

/* Full-bleed templates need the full width */
.entry-content--wide,
.wide-column .entry-content,
body.page-template-onecolumn-page .entry-content {
	max-width: none;
}

#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr { margin-bottom: var(--space-5); }

#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul { margin-bottom: 0; }

#content dt,
#content th {
	color: var(--color-heading);
	font-weight: var(--weight-semibold);
}

.entry-content > *:last-child,
.entry-summary > *:last-child { margin-bottom: 0; }

.page-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.page-link a {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.page-link a:hover {
	background: var(--navy-50);
}

/* --- Entry utility (categories, tags, comment link) --- */
.entry-utility,
#content .entry-utility {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.entry-utility:empty {
	margin: 0;
	padding: 0;
}

.entry-utility a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.entry-utility a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.meta-sep { color: var(--color-border-strong); }

.entry-utility-prep {
	color: var(--color-text-muted);
	font-weight: var(--weight-semibold);
}

.edit-link a {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--gray-100);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
}

.edit-link a:hover {
	background: var(--navy-100);
	color: var(--navy-700);
	text-decoration: none;
}

/* --- Author bio --- */
#entry-author-info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin: var(--space-10) 0;
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--gray-50);
}

#author-avatar { flex-shrink: 0; }

#author-avatar img {
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
}

#author-description {
	flex: 1;
	min-width: 15rem;
}

#author-description h2 {
	margin: 0 0 var(--space-2);
	font-size: var(--text-lg);
}

#author-description p {
	margin-bottom: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

#author-link {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

/* --- Empty states (404, no results) --- */
.not-found .entry-content,
.no-results .entry-content { max-width: 40rem; }

.not-found .entry-content p,
.no-results .entry-content p {
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
}


/* ==========================================================================
   9. MEDIA, TABLES, CODE
   ========================================================================== */

#content img,
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* --- Alignment classes --- */
.alignleft,
#content .alignleft,
#content img.alignleft {
	display: inline;
	float: left;
	margin: var(--space-1) var(--space-6) var(--space-4) 0;
}

.alignright,
#content .alignright,
#content img.alignright {
	display: inline;
	float: right;
	margin: var(--space-1) 0 var(--space-4) var(--space-6);
}

.aligncenter,
#content .aligncenter,
#content img.aligncenter {
	display: block;
	clear: both;
	margin: var(--space-6) auto;
}

.alignnone { margin: var(--space-6) 0; }

/* Floats collapse on narrow screens so text is never crushed */
@media (max-width: 40rem) {
	.alignleft,
	.alignright,
	#content .alignleft,
	#content .alignright,
	#content img.alignleft,
	#content img.alignright {
		float: none;
		display: block;
		margin: var(--space-6) auto;
	}
}

/* --- Captions --- */
#content .wp-caption,
.wp-caption {
	max-width: 100%;
	margin-bottom: var(--space-6);
	padding: var(--space-3);
	border-radius: var(--radius);
	background: var(--gray-50);
}

#content .wp-caption img,
.wp-caption img {
	display: block;
	margin: 0;
	border-radius: var(--radius-sm);
}

#content .wp-caption p.wp-caption-text,
.wp-caption-text {
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	text-align: center;
}

#content .wp-smiley,
.wp-smiley {
	display: inline;
	margin: 0;
	padding: 0;
}

/* --- Galleries --- */
#content .gallery,
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--space-4);
	margin: var(--space-8) 0;
}

#content .gallery .gallery-item,
.gallery .gallery-item {
	float: none;
	width: auto;
	margin: 0;
	text-align: center;
}

#content .gallery img,
.gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

#content .gallery .gallery-caption,
.gallery-caption {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

#content .gallery br + br { display: none; }

.gallery-thumb {
	float: left;
	margin: 0 var(--space-5) var(--space-4) 0;
}

/* --- Responsive video embeds --- */
#content .video-player,
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"],
.entry-content iframe[src*="wistia"],
.entry-content iframe[src*="loom"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	background: var(--gray-900);
}

.video-wrap,
.embed-responsive {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: var(--space-8) 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--gray-900);
	box-shadow: var(--shadow);
}

.video-wrap iframe,
.video-wrap video,
.video-wrap embed,
.video-wrap object,
.embed-responsive iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Tables --- */
.table-scroll {
	width: 100%;
	margin-bottom: var(--space-6);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#content table,
.entry-content table {
	width: 100%;
	margin-bottom: var(--space-6);
	border-radius: var(--radius);
	border-collapse: collapse;
	border-spacing: 0;
	font-size: var(--text-sm);
	text-align: left;
	overflow: hidden;
}

#content caption,
.entry-content caption {
	padding-bottom: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: left;
}

#content tr th,
#content thead th,
.entry-content th {
	padding: var(--space-3) var(--space-4);
	background: var(--gray-50);
	color: var(--color-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.05em;
	line-height: var(--leading-snug);
	text-transform: uppercase;
}

#content tr td,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	vertical-align: top;
}


#content tr.odd td,
#content tbody tr:nth-child(odd) td { background: var(--gray-25); }

#content tbody tr:hover td { background: var(--navy-50); }

/* --- Code --- */
#content code,
code {
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	background: var(--gray-50);
	color: var(--navy-800);
	font-family: var(--font-mono);
	font-size: 0.9em;
}

#content pre,
pre {
	margin: 0 0 var(--space-6);
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--gray-900);
	color: var(--gray-100);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#content pre code,
pre code {
	padding: 0;
	background: none;
	color: inherit;
	font-size: inherit;
}

#content kbd,
kbd {
	padding: 0.15em 0.45em;
	border-radius: var(--radius-sm);
	background: var(--gray-50);
	font-family: var(--font-mono);
	font-size: 0.85em;
}

#content tt,
#content var,
tt, var, samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}


/* ==========================================================================
   10. POST NAVIGATION & PAGINATION
   ========================================================================== */

.navigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin: var(--space-8) 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.navigation:empty,
#nav-above:empty,
#nav-below:empty {
	display: none;
	margin: 0;
}

/* :empty only matches an element with NO child nodes at all — a whitespace
   text node disqualifies it, while comments are ignored. In single.php both
   navs wrap their prev/next links in an HTML comment but still contain the
   surrounding newlines and tabs, so they are whitespace-only, NOT :empty:
   the collapse above never fired and #nav-above's 2rem bottom margin pushed
   the entry title 32px below the top of the sidebar column. Collapse on
   "contains no link" instead, which is what the rule above meant to say. */
#nav-above:not(:has(a)),
#nav-below:not(:has(a)) {
	display: none;
	margin: 0;
}

#nav-above { margin-top: 0; }

.nav-previous,
.nav-next { max-width: 100%; }

.nav-next {
	margin-left: auto;
	text-align: right;
}

.navigation a {
	display: inline-block;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-link);
	text-decoration: none;
	box-shadow: var(--shadow-xs);
	transition: background var(--transition-fast),
	            border-color var(--transition-fast),
	            box-shadow var(--transition-fast);
}

.navigation a:hover,
.navigation a:focus {
	background: var(--navy-50);
	color: var(--color-link-hover);
	box-shadow: var(--shadow-sm);
}

.meta-nav { color: var(--color-text-muted); }


/* ==========================================================================
   11. COMMENTS
   ========================================================================== */

#comments {
	margin-top: var(--space-12);
	padding: var(--space-8) clamp(var(--space-5), 3vw, var(--space-10));
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

#comments-title,
#reply-title {
	margin: 0 0 var(--space-6);
	font-size: var(--text-xl);
}

.commentlist {
	margin: 0 0 var(--space-8);
	padding: 0;
	list-style: none;
}

.commentlist li.comment {
	margin: 0 0 var(--space-5);
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--gray-25);
	list-style: none;
}

.commentlist .children {
	margin: var(--space-5) 0 0;
	padding-left: clamp(var(--space-3), 2vw, var(--space-8));
	list-style: none;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	font-weight: var(--weight-semibold);
}

.comment-author img,
.comment-author .avatar {
	flex-shrink: 0;
	border-radius: var(--radius-full);
}

.comment-author .says {
	color: var(--color-text-muted);
	font-weight: var(--weight-normal);
}

.comment-meta,
.comment-meta a {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-decoration: none;
}

.comment-body {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

.comment-body p { margin-bottom: var(--space-3); }

.reply {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.comment-reply-link {
	display: inline-block;
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-full);
	text-decoration: none;
}

.comment-reply-link:hover {
	background: var(--navy-50);
}

.commentlist .bypostauthor {
	background: var(--green-50);
}

/* .nocomments is gone -- the "Comments are closed." notice is no longer
   rendered at all. This styles the password-required notice only. */
.nopassword {
	padding: var(--space-5);
	background: var(--gray-50);
	color: var(--color-text-muted);
	text-align: center;
}

#respond {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
}

#respond p { margin-bottom: var(--space-4); }
#respond label { display: block; }

.form-allowed-tags {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.comment-navigation,
#comment-nav-above,
#comment-nav-below {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
}


/* ==========================================================================
   12. WIDGET AREAS / SIDEBAR
   ========================================================================== */

/* Sidebar: the V4 layout, with the spacing reworked and larger headings.
   Flat throughout -- no boxes, no borders, no fills. Separation comes from
   rhythm alone, so the vertical steps have to be deliberate. */

#primary,
#secondary,
.widget-area {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	overflow: visible;
	font-size: 0.9375rem;   /* 15px */
	line-height: 1.5;
}

#secondary { clear: none; }

/* 36px from the last line item of one widget to the next widget's heading.
   This has to stay clearly larger than the 16px heading-to-list gap inside a
   cluster -- at the previous 20px the ratio was only 1.25x, so a heading sat
   almost as close to the list above it as to its own, and the groups blurred
   together. 36px puts it at 2.25x, where the grouping reads unambiguously.

   NOTE: the widget containers are themselves <li> elements, so this has to
   outrank `.widget-area li` below (0,1,1) or the row margin would win and
   collapse this to 5px. Hence the .widget-area prefix -> (0,2,0). */
.widget-area .widget-container,
.widget-area .widget {
	margin: 0 0 36px;
	padding: 0;
	background: none;
	box-shadow: none;
	list-style: none;
}

.widget-area .widget-container:last-child,
.widget-area .widget:last-child { margin-bottom: 0; }

.widget-container:last-child,
.widget:last-child { margin-bottom: 0; }

/* Larger, readable section headings. No uppercase micro-label, no stray
   padding left behind by the removed underline. */
.widget-title,
.widget-container h3,
.widget h3 {
	margin: 0 0 var(--space-4);
	padding: 0;
	color: var(--color-heading);
	font-size: 1.125rem;    /* 18px */
	font-weight: var(--weight-bold);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
}

.widget-area > ul,
.widget-area ul.xoxo,
.widget-area ul,
#main .widget-area ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget-area ul ul {
	margin: var(--space-2) 0 0;
	padding-left: var(--space-4);
}

/* Row rhythm: line box plus a small explicit gap. Scoped to lists INSIDE a
   widget so it cannot hit the widget containers, which are <li> themselves.
   Margin rather than padding, so the last row can zero itself out and leave
   the 20px gap to the next heading exact. */
.widget-area .widget-container li,
.widget-area .widget li {
	margin: 0 0 5px;
	padding: 0;
	line-height: 1.5;
}

.widget-area .widget-container li:last-child,
.widget-area .widget li:last-child { margin-bottom: 0; }

/* Widget text blocks are tighter than body copy too. */
.widget-area p {
	margin: 0 0 var(--space-3);
}

.widget-area p:last-child { margin-bottom: 0; }

/* The sidebar holds two different kinds of link and they should not look
   alike:

   1. NAVIGATION links -- Archives, Categories, Meta. The <a> is the entire
      row, so every item is a link and colouring them all blue conveys
      nothing except noise. These stay near-black.

   2. PROSE links -- inside Text and SiteOrigin editor widgets, where an <a>
      sits within a sentence. These are exceptions in running text and must
      look like links, exactly as they do in post content.

   Matching on `li > a` keeps this structural, so it holds regardless of what
   markup a given widget plugin emits. */

.widget-area li > a:link,
.widget-area li > a:visited {
	color: var(--navy-800);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.widget-area li > a:hover,
.widget-area li > a:focus,
.widget-area li > a:active {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Prose links inside editor-driven widgets keep the normal content-link
   appearance: navy plus underline, same as the body copy. */
.widget-area p a,
.widget-area li p a,
.widget-area .textwidget a,
.widget-area .so-widget-sow-editor a,
.widget-area .siteorigin-widget-tinymce a,
.widget-area .panel-widget-style a {
	color: var(--color-link);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-color: var(--navy-200);
	text-underline-offset: 0.15em;
}

.widget-area p a:hover,
.widget-area li p a:hover,
.widget-area .textwidget a:hover,
.widget-area .so-widget-sow-editor a:hover,
.widget-area .siteorigin-widget-tinymce a:hover,
.widget-area .panel-widget-style a:hover {
	color: var(--color-link-hover);
	text-decoration-color: currentColor;
}

.widget-area .entry-meta {
	margin: var(--space-1) 0 0;
	font-size: var(--text-xs);
}

.widget-area select { max-width: 100%; }

/* Tag cloud */
.wp-tag-cloud,
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.wp-tag-cloud li { padding: 0; }

.tagcloud a,
.wp-tag-cloud a {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--gray-50);
	font-size: var(--text-xs) !important;
	text-decoration: none;
}

.tagcloud a:hover,
.wp-tag-cloud a:hover {
	background: var(--navy-100);
	color: var(--navy-700);
	text-decoration: none;
}

/* Nothing in the sidebar draws a border or a box, whatever the source
   (Bootstrap 4.3.1 is enqueued site-wide; widget plugins add their own). */
.sidebar-column,
.sidebar-column *,
.widget-area,
.widget-area * {
	border: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
}

/* The search field is the one control that must stay visible without a
   border, so it keeps a soft fill. */
.widget-area input[type="text"],
.widget-area input[type="search"] {
	padding: var(--space-2) var(--space-3);
	background: var(--gray-50) !important;
	font-size: 0.9375rem;
}

.widget-area input[type="text"]:focus,
.widget-area input[type="search"]:focus {
	background: var(--gray-0) !important;
	box-shadow: 0 0 0 3px var(--navy-100) !important;
}


/* ==========================================================================
   13. SITE FOOTER
   ========================================================================== */

#footer,
.site-footer {
	flex-shrink: 0;
	clear: both;
	width: 100%;
	margin-top: auto;
	background: var(--navy-800);
	color: var(--navy-100);
}

#colophon {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-12) var(--gutter) var(--space-8);
}

/* --- Footer widgets --- */
#footer-widget-area {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-8);
	margin-bottom: var(--space-10);
	padding-bottom: var(--space-10);
	overflow: visible;
}

#footer-widget-area .widget-area {
	float: none;
	width: auto;
	margin: 0;
}

#footer-widget-area #fourth { margin-right: 0; }

#footer-widget-area .widget-container,
#footer-widget-area .widget {
	margin-bottom: var(--space-6);
	padding: 0;
	background: none;
	box-shadow: none;
}

#footer-widget-area .widget-title,
#footer-widget-area .widget-container h3 {
	color: var(--gray-0);
}


#footer-widget-area .widget-area a:link,
#footer-widget-area .widget-area a:visited,
#footer-widget-area a {
	color: var(--navy-100);
}

#footer-widget-area .widget-area a:hover,
#footer-widget-area a:hover {
	color: var(--gray-0);
}

/* --- Site info --- */
#site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	float: none;
	width: auto;
	color: var(--navy-200);
	font-size: var(--text-sm);
	font-weight: var(--weight-normal);
}

#site-info a {
	margin-left: 0 !important;
	color: var(--navy-100);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

#site-info a:hover,
#site-info a:focus {
	color: var(--gray-0);
	text-decoration: underline;
}

.site-info__brand {
	color: var(--gray-0) !important;
	font-weight: var(--weight-semibold) !important;
}

.site-info__sep {
	color: rgba(255, 255, 255, 0.25);
}

#site-generator {
	float: none;
	width: auto;
	margin-top: var(--space-4);
	color: var(--navy-300);
	font-size: var(--text-xs);
}

#site-generator:empty { display: none; }


/* ==========================================================================
   14. MEMBERSHIP & LESSON UI
   ========================================================================== */

/* Lesson completion badge */
.lesson-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-success-bg);
	color: var(--green-700);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.lesson-status i,
.lesson-status .fas,
.lesson-status .fa {
	color: var(--color-success);
	font-size: 1em;
}

/* Mark complete / incomplete action */
.lesson-action {
	display: flex;
	justify-content: center;
	margin: var(--space-10) 0 var(--space-4);
}

.mark_as_read,
a.mark_as_read {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-text-inverse) !important;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-fast),
	            box-shadow var(--transition-fast),
	            transform var(--transition-fast);
}

.mark_as_read:hover,
a.mark_as_read:hover,
.mark_as_read:focus {
	background: var(--color-accent-hover);
	color: var(--color-text-inverse) !important;
	box-shadow: var(--shadow);
	text-decoration: none;
}

.mark_as_read:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* The "mark incomplete" variant reads as a quieter, secondary action */
.lesson-action--undo .mark_as_read {
	background: var(--color-surface);
	color: var(--color-text-muted) !important;
	font-size: var(--text-base);
	box-shadow: none;
}

.lesson-action--undo .mark_as_read:hover {
	background: var(--gray-50);
	color: var(--color-text) !important;
	box-shadow: none;
}

/* Generic notices */
.notice,
.alert {
	margin: 0 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius);
	background: var(--gray-50);
	font-size: var(--text-sm);
}

.notice--success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.notice--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.notice--danger  { border-left-color: var(--color-danger);  background: var(--color-danger-bg); }
.notice--info    { border-left-color: var(--color-primary); background: var(--navy-50); }


/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

.screen-reader-text,
.visually-hidden,
.assistive-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.screen-reader-text:focus,
.visually-hidden:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

.clear::after,
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-muted  { color: var(--color-text-muted); }



/* ==========================================================================
   16. LEGACY COMPATIBILITY SHIMS
   Templates not rebuilt in this pass (classroom, workshop, welcome, stevebot,
   member, etc.) still emit the old markup. These rules keep them coherent
   with the new design instead of falling back to unstyled defaults.
   ========================================================================== */

/* Old header decorations that no longer apply */
#header { margin-bottom: 0; }

#header_banner h1 a {
	width: auto;
	height: auto;
	background-image: none;
	text-indent: 0;
	overflow: visible;
}

/* Legacy fixed-height shells */
#content .long_header,
#content .long_headerv3 {
	position: relative;
	width: 100%;
	height: auto;
}

#smalllogoimage {
	position: static;
	max-width: 320px;
	height: auto;
}

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

/* Legacy inline widths must not blow out the viewport */
#content [width],
#content > table,
#content div[style*="width:"],
.entry-content div[style*="width:"] {
	max-width: 100%;
}

/* Bootstrap is enqueued globally for the sales/checkout templates. Keep its
   fixed-width container from re-entering our fluid layout. */
#content .container,
#main .container {
	width: auto;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Legacy inline-styled green buttons scattered through page content */
#content a[style*="background-color:#0c8442"],
#content a[style*="background-color: #0c8442"] {
	display: inline-block;
	border-radius: var(--radius);
	text-decoration: none;
}


/* ==========================================================================
   17. PRINT
   ========================================================================== */

@media print {
	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
		line-height: 1.5;
	}

	.site-header,
	.site-nav,
	#menu,
	.nav-toggle,
	.skip-link,
	#primary,
	#secondary,
	.widget-area,
	#footer-widget-area,
	.navigation,
	#respond,
	.reply,
	.edit-link,
	.lesson-action,
	#comments {
		display: none !important;
	}

	#main {
		display: block;
		max-width: none;
		padding: 0;
	}

	.hentry {
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.entry-content { max-width: none; }

	#footer,
	.site-footer {
		background: none;
		color: #000;
}

	#site-info,
	#site-info a { color: #000; }

	a {
		color: #000;
		text-decoration: underline;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	h1, h2, h3, h4 { page-break-after: avoid; }

	blockquote, pre, table { page-break-inside: avoid; }
}


/* ==========================================================================
   15. COURSE INDEX CARDS
   Used by page 2991 "Course Videos". Replaces a 26-row layout <table> and the
   float/alignleft image tiles with a responsive grid of real links.

   NOTE ON SPECIFICITY: the grids are <ul>s living inside #content, where
   `#content ul` (1,0,1) sets padding-left and a bottom margin and `li` adds
   its own margin. Every reset below is #content-qualified on purpose so it
   outranks those — an unqualified `.pos-grid` (0,1,0) would silently lose.
   ========================================================================== */

/* --- Colour families ---------------------------------------------------
   Every card used to be white + hairline + navy icon, so 33 cards landed at
   identical visual weight and the grid read as a spreadsheet. Each group now
   sets --fam/--fam-dark/--fam-bg on its wrapper and the cards inherit them,
   so one class recolours a whole group. Every consumer passes a fallback, so
   a card outside any family still works.

   Cut from five hues to two. Teal and amber were invented to give each group
   its own colour, which made the page read as a category-coding system rather
   than a brand. The groups now alternate the two real brand colours, with a
   neutral for Resources so the support material sits back from the four
   course-progression groups. Repetition reads as system; five hues read as
   assignment. */
.pos-fam--navy  { --fam: var(--navy-500);  --fam-dark: var(--navy-700);  --fam-bg: var(--navy-50); }
.pos-fam--green { --fam: var(--green-600); --fam-dark: var(--green-800); --fam-bg: var(--green-50); }
.pos-fam--slate { --fam: var(--gray-600);  --fam-dark: var(--gray-800);  --fam-bg: var(--gray-100); }

/* Sprite holder: defines the symbols, must never occupy layout space. */
#content .pos-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

#content .pos-lede {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--gray-700);
}

#content .pos-h { margin-top: var(--space-12); }

/* No measure cap here on purpose.
   An earlier version pinned .entry-content back to --content-measure (72ch,
   ~612px) to make the live page match the preview. That was chasing the wrong
   cause: the real difference was wpautop injecting <br> into every card, which
   inflated card height. With that fixed, the content column is left at its
   normal full width beside the sidebar, as section 6 intends. */

.pos-h__eyebrow {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-accent);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Tinted ground so the cards read as objects on a surface rather than white
   shapes on white. --color-surface-alt is literally #fff in this theme, so
   the gray-50 gradient is doing the work. */
#content .pos-band {
	margin: var(--space-6) 0 var(--space-10);
	padding: var(--space-8) var(--space-6);
	border: 1px solid var(--gray-100);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--gray-50), var(--gray-0) 55%);
}

/* Group heading: a filled bar, not a dot and a hairline. The previous version
   spent ~10px of colour on a heading 700px wide, which is why the groups
   didn't register. Solid fill gives each family real presence. */
#content .pos-grouph {
	display: block;
	margin: var(--space-10) 0 var(--space-5);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius);
	background: var(--fam, var(--navy-500));
	color: var(--color-text-inverse);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	letter-spacing: .07em;
	text-transform: uppercase;
	box-shadow: var(--shadow-xs);
}

#content .pos-band > .pos-grouph:first-child { margin-top: 0; }

#content .pos-grid {
	display: grid;
	gap: var(--space-5);
	margin: 0 0 var(--space-10);
	padding: 0;
	list-style: none;
}

#content .pos-grid > li { margin: 0; }

/* Safety net against wpautop. It converts every single newline in post content
   into a <br />, so a card whose spans sit on separate lines gains 4-5 line
   breaks and grows by ~90px. The stored markup keeps each card anchor on one
   line to avoid this, but anyone re-formatting the page in wp-admin would
   reintroduce it invisibly -- so neutralise the breaks here as well. */
#content .pos-card br { display: none; }

/* min() keeps a card from forcing horizontal overflow on narrow phones. */
#content .pos-grid--feature { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* The category groups run 3, 4, 5, 9 and 5 cards, pinned to a fixed
   1 -> 2 -> 3 column ladder: uniform band width down the whole page, with any
   remainder left short on the last row.

   Note: a flex-wrap version that centred short last rows was tried and
   rejected -- left-aligned remainders are the intended behaviour here. */
#content .pos-grid--cat { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 34rem) {
	#content .pos-grid--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	#content .pos-grid--cat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Quantity queries ---------------------------------------------------
   Auto-fit packs as many cards per row as will fit, which leaves ragged
   trailing rows (a 4-card group breaking 3 + 1). These pin the two counts
   that matter so the groups read as deliberate blocks:

     exactly 3 -> one row of 3
     exactly 4 -> two rows of 2

   `li:first-child:nth-last-child(n)` is the standard "this element is both
   the first and the nth-from-last child" test, i.e. the list has exactly n
   items; :has() lifts that answer up to the container so it can set its own
   columns. Both stay inside min-width queries so narrow screens keep the
   auto-fit stacking, and browsers without :has() simply fall back to it.

   The :not(.pos-grid--cat) is load-bearing: :has() takes the specificity of
   its argument, so `#content .pos-grid:has(> li:first-child:nth-last-child(4))`
   scores (1,3,1) and would otherwise beat the (1,1,0) category ladder above
   and drag a 4-card group back to 2x2. */
@media (min-width: 34rem) {
	#content .pos-grid:not(.pos-grid--cat):has(> li:first-child:nth-last-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	#content .pos-grid:not(.pos-grid--cat):has(> li:first-child:nth-last-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

#content .pos-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	/* The family colour enters as a spine on the leading edge — enough to
	   group the cards at a glance without turning the page into confetti. */
	border-left: 3px solid var(--fam, var(--navy-500));
	border-radius: var(--radius);
	/* Tinted body rather than pure white. The first version faded to white by
	   72% and simply vanished at real size -- the cards still read as white.
	   Holding the family tint flat across the first 55% and only then fading
	   makes it actually visible while the text keeps full contrast. */
	background: linear-gradient(150deg,
	            var(--fam-bg, var(--navy-50)) 0%,
	            var(--fam-bg, var(--navy-50)) 55%,
	            var(--color-surface) 100%);
	color: var(--color-text);
	text-decoration: none;
	box-shadow: var(--shadow-xs);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#content .pos-card:hover,
#content .pos-card:focus-visible {
	border-color: var(--fam, var(--navy-500));
	box-shadow: var(--shadow);
	transform: translateY(-3px);
	text-decoration: none;
}

/* The old markup put the click handler on a <tr>, so there was nothing to
   focus. These are anchors now and get a real focus ring. */
#content .pos-card:focus-visible {
	outline: 3px solid var(--navy-400);
	outline-offset: 2px;
}

/* Solid filled tile, not a pale circle. A 58px circle tinted at ~8% put almost
   no colour on the card; a solid 64px square in the family colour puts real
   area behind the glyph, which is what stops 26 cards reading as a white wall. */
.pos-card__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius);
	background: var(--fam, var(--color-primary));
	color: var(--color-text-inverse);
	box-shadow: var(--shadow-xs);
	transition: transform .15s ease;
}

.pos-card__icon svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#content .pos-card:hover .pos-card__icon,
#content .pos-card:focus-visible .pos-card__icon {
	transform: scale(1.06) rotate(-3deg);
}

.pos-card__title {
	color: var(--color-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
}

/* --text-sm in --color-text-muted (gray-500) was the weakest element on the
   page at real size. Base size and a darker grey; still clearly subordinate to
   the title, but readable rather than decorative. */
.pos-card__text {
	color: var(--gray-700);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

/* margin-top:auto pins the CTA to the bottom so it lines up across a row of
   cards whose descriptions are different lengths. */
.pos-card__cta {
	margin-top: auto;
	padding-top: var(--space-3);
	color: var(--fam, var(--color-primary));
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.pos-card__cta::after { content: "\00a0\2192"; }


/* --- Solid-fill cards ---------------------------------------------------
   The workshops and To Do Lists are the two primary actions on the page, so
   they get saturated fills rather than a white card with a tint wash. This is
   what actually breaks the sterility: colour covering real area, and a clear
   size/weight step down to the category grid below. --- */
#content .pos-card--feature,
#content .pos-card--todo {
	border: 1px solid transparent;
	padding: var(--space-6);
	color: var(--color-text-inverse);
	box-shadow: var(--shadow-sm);
}

#content .pos-card--feature {
	background: linear-gradient(155deg, var(--navy-600), var(--navy-800));
}

#content .pos-card--todo {
	background: linear-gradient(155deg, var(--green-500), var(--green-700));
}

#content .pos-card--feature:hover,
#content .pos-card--feature:focus-visible,
#content .pos-card--todo:hover,
#content .pos-card--todo:focus-visible {
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

/* Children inherit the inverse colour rather than the light-card palette. */
#content .pos-card--feature .pos-card__title,
#content .pos-card--todo .pos-card__title { color: var(--color-text-inverse); }

#content .pos-card--feature .pos-card__text,
#content .pos-card--todo .pos-card__text { color: rgba(255, 255, 255, .82); }

#content .pos-card--feature .pos-card__cta { color: var(--color-text-inverse); }

/* Translucent white badge reads correctly on any fill, no per-family rule. */
#content .pos-card--feature .pos-card__icon {
	background: rgba(255, 255, 255, .16);
	color: var(--color-text-inverse);
}

#content .pos-card--feature:hover .pos-card__icon,
#content .pos-card--feature:focus-visible .pos-card__icon {
	background: var(--color-text-inverse);
	color: var(--navy-700);
}

/* --- To Do List numerals: the point is that they run in order. --- */
#content .pos-grid--todo {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.pos-card__num {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background: var(--color-text-inverse);
	color: var(--green-700);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}


/* --- Optional artwork slot ----------------------------------------------
   Sized and ready, but unused until real images exist. Drop
   <img class="pos-card__media" src="..." alt="" width="640" height="360">
   in as the first child of a .pos-card and it seats itself: full-bleed to the
   card edges, fixed 16:9 box so a row of cards cannot go ragged while the
   images load. Nothing else needs to change. --- */
.pos-card__media {
	display: block;
	width: calc(100% + var(--space-6) * 2);
	margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--gray-100);
}

#content .pos-card:not(.pos-card--feature):not(.pos-card--todo) .pos-card__media {
	width: calc(100% + var(--space-5) * 2);
	margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
	#content .pos-card,
	.pos-card__icon { transition: none; }
	#content .pos-card:hover,
	#content .pos-card:hover .pos-card__icon,
	#content .pos-card:focus-visible .pos-card__icon { transform: none; }
}