/*
Theme Name: Curious Courses
Theme URI: https://curious.courses
Description: Custom LearnDash-ready theme for The Digitally Curious Executive Series (curious.courses). Ported functional patterns (homepage builder, testimonials/clients, shortcodes) from the actionablefuturist.com theme, rebuilt from scratch on brand and rebuilt to work natively with LearnDash and Presto Player Pro (Gutenberg-only, no page-builder markup).
Author: The Actionable Futurist
Author URI: https://actionablefuturist.com
Version: 0.7.2
Requires PHP: 7.4
Text Domain: curious-courses
Tags: education, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready

# 0.7.2 – Stray slider inputs hidden site-wide
- Not a theme bug — raw <input type="range"> sliders were found sitting in
  a course profile's post content (the Experimentation course), almost
  certainly leftover markup from copying content over from
  actionablefuturist.com. Added a permanent CSS guard
  (.cc-entry-content input[type="range"] { display:none }) so any stray
  sliders like this are hidden everywhere on the site regardless of which
  page they turn up on, rather than needing to be chased down one at a
  time. The underlying markup is still in that post's content — worth
  removing at the source too, see SETUP-NOTES

# 0.7.1 – Track boxes were burying the Vimeo controls
- FIX .hero__tracks used the same negative-margin overlap as the old
  2-badge design, which worked fine sitting over a static image but was
  covering Vimeo's control bar (play, scrubber, volume, fullscreen) once
  a real video was in that slot — those controls live at the bottom of
  the player, exactly where the boxes were overlapping. Removed the
  overlap entirely (negative margin → normal positive spacing below the
  hero); track boxes now sit cleanly underneath instead of on top of
  anything interactive

# 0.7.0 – Vimeo embed, 4-track hero boxes
- FIX Hero video field was a raw-HTML textarea whose contents got passed
  through wp_kses_post() before output — which strips <iframe> by default,
  so a pasted Vimeo embed would have silently vanished. Replaced with a
  plain "Hero video — Vimeo URL" field; the theme builds the embed itself
  (cc_vimeo_embed_html() in inc/template-helpers.php), so nothing user-
  submitted needs iframe tags to survive sanitisation
- Vimeo URL parser handles plain URLs, unlisted share-link URLs (with the
  /hash suffix), already-a-player-URL, protocol-less, and channel/category
  URLs — tested against all of these before shipping
- Video embed styled as a responsive 16:9 box with the same rounded-top
  treatment as the portrait image, sitting in the same hero slot (video
  takes priority over image when both are set)
- Replaced the two "tick box" hero badges (Andrew Grill/Instructor, Online
  Courses/for Leaders) with four track boxes pulled from CC_TRACKS —
  Track 1–4, each linking to that track's section on the courses page
  (#track-1 etc.). Added matching id="track-N" to the catalogue accordion,
  plus a small JS addition so linking to a closed track section actually
  opens it and scrolls there (native <details> doesn't auto-expand from a
  URL hash on its own)
- 2×2 grid on tablet, single column on mobile

# 0.6.0 – Course catalogue for all 20 courses (Live / Coming Soon)
- New Course Profile post type (cc_course_profile) — a marketing/catalogue
  layer independent of LearnDash's own sfwd-courses, so all 20 courses can
  have a real page and appear in the catalogue before they exist as actual
  LearnDash courses. Fields: Track (1–4), course number, Status (Live /
  Coming Soon), and an optional linked LearnDash course
- [course_catalog] shortcode — accordion by track (matching the pattern on
  actionablefuturist.com's courses page), native <details>/<summary> so no
  JS dependency. Coming Soon items show a pill badge but stay clickable
  through to their own marketing page
- single-cc_course_profile.php — the individual course marketing page.
  Every course gets one regardless of status; the only thing that changes
  is the CTA (Start Course → real LearnDash course, vs a Coming Soon box
  linking back to the full catalogue)
- One-click seeder (admin notice on first visit to Course Profiles) creates
  all 20 stub entries. Only Track 1's five titles are pre-filled — taken
  directly from your actionablefuturist.com screenshot, confirmed accurate.
  Tracks 2–4 are created as clearly-marked placeholders since I don't have
  reliable real titles for courses 6–20 — rename those when ready rather
  than trusting anything I might have guessed
- Add [course_catalog] to your /courses/ page content to use it

# 0.5.1 – Header button sizing
- "My Account" / "Take Free Course" pill in the header scaled down
  (font-size .95rem→.85rem, padding .85em/1.6em→.6em/1.2em) — was
  competing too much for attention against the nav beside it. Scoped to
  .header-cta specifically so the hero and footer CTA buttons, which use
  the same .cc-btn class, stay full-size

# 0.5.0 – /course/ was leftover Kadence/WooCommerce demo content
- Checked live: /course/ was a completely untouched demo page/product
  ("8 Ways to Prevent Your Business from Failing", fake $445/$219
  pricing, "Frequently Bought Together") — not a theme bug, this is
  literal unedited Kadence starter-kit content. /contact/ confirmed the
  same (fake San Francisco office, help@yourdomain.com, a Google Maps pin
  on the Golden Gate Bridge)
- New cc_courses_url() helper centralises what was six separate hardcoded
  /course/ references (front-page.php ×2, 404.php, page.php, header.php,
  default nav) into one function, now pointing at /courses/ instead —
  deliberately a different slug from the contaminated /course/ page, so
  nothing in the theme links to that content anymore
- Filterable via 'cc_courses_url' if the real catalogue page ends up at a
  different slug

# 0.4.0 – Real media picker, jumbo-button fix
- FIX the "Andrew portrait" homepage field was a raw attachment-ID number
  input — replaced with a real WordPress media picker (wp.media): Choose
  Image button, live thumbnail preview, Remove link. This was the actual
  cause of the giant navy placeholder block on the front page — nobody
  was realistically going to hand-type an attachment ID
- Empty-state hero placeholder (shown only if no image/video is set)
  softened to a smaller dashed-border box with a plain-language prompt,
  capped height, instead of a full-bleed solid colour slab
- Hero image/placeholder height capped (max-height) so it can't run away
  regardless of column width on wide viewports
- FIX top-bar "Mark Complete" button rendering as an oversized, wrapping
  pill and overlapping the video — caused by [class*="mark-complete"] /
  [class*="mark_complete"] catching a wrapping container rather than the
  button itself (the bottom-of-lesson pair was unaffected, pointing at
  the exact .learndash_mark_complete_button class working correctly
  there). Both broad guesses dropped; remaining button selectors now
  carry hard sizing constraints (inline-flex, max-content, nowrap) so a
  future wrong match can't balloon the same way
- Still open: the Focus Mode sidebar course-title block was still
  LearnDash's default indigo as of the last screenshot, not navy — still
  waiting on the actual class name from Inspect Element to fix this one
  precisely rather than guessing again

# 0.3.0 – Post-staging fixes from live screenshots
- FIX header.php had an inline style zeroing the header's left/right
  padding, pushing the logo flush to the browser edge — removed
- Logo sized up (46px → 58px max-height) for more presence in the header
- LearnDash buttons (Mark Complete, Next Lesson, etc.) changed from
  turquoise/navy to navy/white per updated brief; selector list broadened
  substantially (incl. [class*=] substring matches) since the exact class
  names on the live site's Focus Mode sidebar/buttons don't match the
  standard ld30 ones assumed in 0.2.0 — still not confirmed exact, see
  the note in assets/css/learndash-theme.css section 8
- Mobile-menu hamburger icon rebuilt on three real <span> elements instead
  of ::before/::after pseudo-elements on a <button> — more reliably
  supported across renderers/older engines; matching CSS updated
- Verified (not just asserted) responsive behaviour: existing breakpoints
  at 880/900/980/780/640/600px confirmed present and correct; nav
  collapse, hero stacking and mobile CTA truncation all checked visually

# 0.2.0 – Iteration after first LearnDash/staging review
- Homepage no longer touches the block editor content area at all (root-cause
  fix for old Kadence content bleeding into the hero) — hero now built
  entirely from Homepage Builder fields, incl. new Hero subheading field
- Bundled default logo (assets/images/logo-digitally-curious.png), used
  automatically until a custom logo is set in Customizer
- Primary nav has default Home/Courses/Account/Contact links so the header
  isn't empty before a menu is assigned at Appearance → Menus
- Client logo marquee: continuous CSS auto-scroll (replacing the static
  row), matching actionablefuturist.com's behaviour; client-cat taxonomy
- [courses] shortcode — the homepage course-picker grid, droppable into
  any page
- Dedicated LearnDash presentation-layer reskin (assets/css/learndash-theme.css)
  — course listing, single-course tabs, lesson/topic nav, progress bar,
  focus mode, quiz — corrected against an actual Thinkific/LD screenshot
  reference (white top bar, coloured sidebar title block, status pills)
- Added screenshot.png for the Appearance → Themes grid
- Theme version now read dynamically from this file (functions.php) rather
  than hardcoded, so this field is the only place version bumps happen

# 0.1.0 – Initial build
- Homepage builder (hero, pillars, course grid, testimonials, clients, CTA)
- Testimonials + Clients custom post types (ported from tf_testimonial / tf_client)
- LearnDash CSS-variable brand override layer
- Presto Player / Gutenberg-only content model (no shortcode-based page builder)
*/

/* =====================================================
   1. BRAND TOKENS
   Deep Navy + Digitally Curious Turquoise, per DCE brand spec.
   Metropolis is not bundled here — drop woff2 files into
   assets/fonts/ and uncomment the @font-face block below.
   Google Sans is a Google-proprietary font not licensed for
   self-hosting; Inter is used as the practical substitute
   until/unless a licensed alternative is sourced.
   ===================================================== */

:root {
	--cc-navy: #0D2145;
	--cc-navy-light: #16305f;
	--cc-turquoise: #00C4B4;
	--cc-turquoise-dark: #00a99c;
	--cc-white: #FFFFFF;
	--cc-off-white: #F5F7FA;
	--cc-ink: #16213A;
	--cc-grey: #5B6478;
	--cc-border: #E3E7EE;

	--cc-font-display: 'Metropolis', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cc-font-body: 'Inter', 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--cc-radius: 10px;
	--cc-max-width: 1200px;
	--cc-header-h: 84px;
}

/* Uncomment once Metropolis woff2 files are added to assets/fonts/
@font-face {
	font-family: 'Metropolis';
	src: url('assets/fonts/Metropolis-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}
@font-face {
	font-family: 'Metropolis';
	src: url('assets/fonts/Metropolis-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
*/

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--cc-ink);
	background: var(--cc-white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cc-navy); text-decoration: none; }
a:hover { color: var(--cc-turquoise-dark); }
ul, ol { padding-left: 1.2em; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--cc-font-display);
	font-weight: 800;
	line-height: 1.15;
	color: var(--cc-navy);
	margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1.2em; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* =====================================================
   3. LAYOUT
   ===================================================== */

.cc-wrap {
	max-width: var(--cc-max-width);
	margin: 0 auto;
	padding: 0 32px;
}
.cc-section { padding: 80px 0; }
.cc-section--tight { padding: 48px 0; }
.cc-section--navy { background: var(--cc-navy); color: var(--cc-white); }
.cc-section--navy h2, .cc-section--navy h3 { color: var(--cc-white); }
.cc-section--off { background: var(--cc-off-white); }
.cc-eyebrow {
	display: block;
	font-family: var(--cc-font-display);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .8rem;
	color: var(--cc-turquoise-dark);
	margin-bottom: .6em;
}
.cc-section--navy .cc-eyebrow { color: var(--cc-turquoise); }

.cc-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--cc-font-display);
	font-weight: 700;
	font-size: .95rem;
	padding: .85em 1.6em;
	border-radius: 999px;
	background: var(--cc-turquoise);
	color: var(--cc-navy);
	border: 2px solid var(--cc-turquoise);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cc-btn:hover { background: var(--cc-turquoise-dark); border-color: var(--cc-turquoise-dark); color: var(--cc-navy); transform: translateY(-1px); }
.cc-btn--ghost {
	background: transparent;
	color: var(--cc-white);
	border-color: rgba(255,255,255,.5);
}
.cc-btn--ghost:hover { border-color: var(--cc-white); background: rgba(255,255,255,.08); color: var(--cc-white); }
.cc-btn--navy { background: var(--cc-navy); color: var(--cc-white); border-color: var(--cc-navy); }
.cc-btn--navy:hover { background: var(--cc-navy-light); border-color: var(--cc-navy-light); color: var(--cc-white); }

/* =====================================================
   4. HEADER / NAV
   ===================================================== */

.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--cc-white);
	border-bottom: 1px solid var(--cc-border);
	height: var(--cc-header-h);
}
.site-header__inner {
	max-width: var(--cc-max-width);
	margin: 0 auto;
	height: 100%;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.site-logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-logo img,
.site-logo__image { max-height: 58px; width: auto; display: block; }
.site-logo .site-logo__text { font-family: var(--cc-font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; color: var(--cc-navy); }
.site-logo .site-logo__text span { color: var(--cc-turquoise-dark); }

.primary-nav { display: flex; align-items: center; gap: 32px; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.primary-nav a {
	font-family: var(--cc-font-display);
	font-weight: 700;
	font-size: .95rem;
	color: var(--cc-ink);
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--cc-turquoise-dark); }
.header-cta { display: flex; align-items: center; gap: 16px; }
.header-cta .cc-btn {
	font-size: .85rem;
	padding: .6em 1.2em;
}

.mobile-menu-toggle {
	display: none;
	background: none; border: 0; cursor: pointer;
	width: 40px; height: 40px;
	flex-direction: column;
	align-items: center; justify-content: center;
	gap: 4px;
}
.mobile-menu-toggle span {
	display: block; width: 22px; height: 2px; background: var(--cc-navy);
}

@media (max-width: 880px) {
	.primary-nav { display: none; }
	.mobile-menu-toggle { display: flex; }
	.header-cta .cc-btn span.long { display: none; }
	.site-header.is-open .primary-nav {
		display: block; position: absolute; top: var(--cc-header-h); left: 0; right: 0;
		background: var(--cc-white); border-bottom: 1px solid var(--cc-border); padding: 20px 32px;
	}
	.site-header.is-open .primary-nav ul { flex-direction: column; gap: 18px; }
}

/* =====================================================
   5. HERO
   ===================================================== */

.hero {
	background: var(--cc-off-white);
	padding: 72px 0 0;
	overflow: hidden;
}
.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 40px;
	align-items: end;
}
.hero__copy { padding-bottom: 64px; max-width: 560px; }
.hero__copy h1 { margin-bottom: .4em; }
.hero__copy p { font-size: 1.15rem; color: var(--cc-grey); max-width: 480px; }
.hero__media { position: relative; }
.hero__media img, .hero__media video { border-radius: var(--cc-radius) var(--cc-radius) 0 0; width: 100%; max-height: 640px; object-fit: cover; }
.cc-video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	border-radius: var(--cc-radius) var(--cc-radius) 0 0;
	overflow: hidden;
	background: var(--cc-navy);
	box-shadow: 0 20px 40px rgba(13,33,69,.15);
}
.cc-video-embed iframe {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.hero__media .cc-hero-empty {
	aspect-ratio: 4/5;
	max-height: 520px;
	background: var(--cc-off-white);
	border: 2px dashed var(--cc-border);
	border-radius: var(--cc-radius) var(--cc-radius) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px;
	color: var(--cc-grey);
	font-family: var(--cc-font-display);
	font-weight: 700;
}
.hero__tracks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 32px;
	position: relative;
	z-index: 2;
}
.hero__track-box {
	display: block;
	background: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	box-shadow: 0 12px 30px rgba(13,33,69,.08);
	padding: 16px 18px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.hero__track-box:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(13,33,69,.14);
}
.hero__track-box .cc-eyebrow { margin-bottom: .3em; }
.hero__track-box strong { display: block; font-family: var(--cc-font-display); font-size: .95rem; line-height: 1.25; color: var(--cc-navy); }

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__copy { padding-bottom: 24px; }
	.hero__tracks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.hero__tracks { grid-template-columns: 1fr; }
}

/* =====================================================
   6. PILLARS / VALUE PROPS
   ===================================================== */

.cc-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 40px;
}
.cc-pillar {
	background: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	padding: 28px;
}
.cc-pillar .cc-pillar__num {
	font-family: var(--cc-font-display);
	font-weight: 800;
	color: var(--cc-turquoise-dark);
	font-size: .85rem;
	letter-spacing: .1em;
}
@media (max-width: 780px) { .cc-pillars { grid-template-columns: 1fr; } }

/* =====================================================
   7. COURSE GRID
   ===================================================== */

.cc-course-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 40px;
}
.cc-course-card {
	display: flex; flex-direction: column;
	background: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease;
}
.cc-course-card:hover { box-shadow: 0 16px 34px rgba(13,33,69,.12); transform: translateY(-2px); }
.cc-course-card__media { aspect-ratio: 16/10; background: var(--cc-navy); position: relative; overflow: hidden; }
.cc-course-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cc-course-card__track {
	position: absolute; top: 14px; left: 14px;
	background: var(--cc-turquoise); color: var(--cc-navy);
	font-family: var(--cc-font-display); font-weight: 700; font-size: .72rem;
	text-transform: uppercase; letter-spacing: .06em;
	padding: 4px 10px; border-radius: 999px;
}
.cc-course-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cc-course-card__body h3 { margin: 0; font-size: 1.15rem; }
.cc-course-card__meta { font-size: .85rem; color: var(--cc-grey); }
.cc-course-card__link { margin-top: auto; font-family: var(--cc-font-display); font-weight: 700; color: var(--cc-turquoise-dark); }
@media (max-width: 980px) { .cc-course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cc-course-grid { grid-template-columns: 1fr; } }

/* =====================================================
   8. TESTIMONIALS
   ===================================================== */

.cc-testimonials { margin-top: 40px; }
.cc-testimonial-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(300px, 1fr);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
}
.cc-testimonial {
	scroll-snap-align: start;
	background: var(--cc-off-white);
	border-radius: var(--cc-radius);
	padding: 28px;
}
.cc-testimonial blockquote { margin: 0 0 20px; font-size: 1.05rem; color: var(--cc-ink); }
.cc-testimonial__person { display: flex; align-items: center; gap: 12px; }
.cc-testimonial__person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cc-testimonial__person strong { display: block; font-family: var(--cc-font-display); }
.cc-testimonial__person span { font-size: .85rem; color: var(--cc-grey); }

/* =====================================================
   9. CLIENTS / LOGO MARQUEE
   Continuous auto-scroll, matching the actionablefuturist.com behaviour.
   The shortcode (inc/shortcodes.php) renders the logo list twice back to
   back; this animates a translateX(-50%) loop across both copies so the
   seam is invisible. Pauses on hover/focus, and sits still entirely for
   anyone with prefers-reduced-motion set.
   ===================================================== */

.cc-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cc-marquee__track {
	display: flex;
	align-items: center;
	gap: 64px;
	width: max-content;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	animation: cc-marquee-scroll var(--cc-marquee-duration, 30s) linear infinite;
}
.cc-marquee:hover .cc-marquee__track,
.cc-marquee:focus-within .cc-marquee__track {
	animation-play-state: paused;
}
.cc-marquee__track li { flex: 0 0 auto; }
.cc-marquee__track img {
	max-height: 34px;
	width: auto;
	filter: grayscale(1);
	opacity: .7;
	transition: opacity .15s ease, filter .15s ease;
}
.cc-marquee__track li:hover img { filter: none; opacity: 1; }

@keyframes cc-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cc-marquee__track { animation: none; overflow-x: auto; }
}

/* =====================================================
   10. FOOTER CTA + FOOTER
   ===================================================== */

.cc-footer-cta { text-align: center; }
.cc-footer-cta h2 { max-width: 700px; margin-inline: auto; }
.cc-footer-cta p { max-width: 560px; margin-inline: auto; color: rgba(255,255,255,.75); }

.site-footer { background: var(--cc-navy); color: rgba(255,255,255,.7); padding: 56px 0 28px; }
.site-footer a { color: var(--cc-white); }
.site-footer a:hover { color: var(--cc-turquoise); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.site-footer__grid h4 { color: var(--cc-white); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1em; }
.site-footer__grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	padding-top: 20px;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	font-size: .85rem;
}
@media (max-width: 780px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }

/* =====================================================
   11. BLOG / SINGLE / PAGE / SEARCH / 404
   ===================================================== */

.cc-content-wrap { padding: 56px 0 96px; }
.cc-content-wrap--narrow { max-width: 760px; margin: 0 auto; padding: 56px 32px 96px; }
.cc-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cc-post-card { border: 1px solid var(--cc-border); border-radius: var(--cc-radius); overflow: hidden; }
.cc-post-card img { aspect-ratio: 16/10; object-fit: cover; }
.cc-post-card__body { padding: 18px; }
@media (max-width: 900px) { .cc-post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cc-post-grid { grid-template-columns: 1fr; } }

.cc-entry-header { margin-bottom: 32px; }
.cc-entry-meta { font-size: .85rem; color: var(--cc-grey); margin-bottom: .6em; }
.cc-entry-content h2 { margin-top: 1.4em; }
.cc-entry-content img { border-radius: var(--cc-radius); }
/* Defensive guard: raw <input type="range"> sliders have no legitimate
   place in ordinary post/page content — they show up when content gets
   copied over from elsewhere with leftover interactive-widget markup
   attached (as on the Experimentation course profile). Hiding the
   element type outright rather than chasing each occurrence down. */
.cc-entry-content input[type="range"] { display: none; }

.cc-404 { text-align: center; padding: 96px 0; }
.cc-404 .cc-404__code { font-family: var(--cc-font-display); font-weight: 800; font-size: 5rem; color: var(--cc-turquoise); margin: 0; }

/* Comments */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list article { border: 1px solid var(--cc-border); border-radius: var(--cc-radius); padding: 20px; margin-bottom: 16px; }
.comment-respond input[type=text], .comment-respond input[type=email], .comment-respond input[type=url], .comment-respond textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--cc-border); border-radius: 8px; font-family: inherit; margin-bottom: 14px;
}

/* =====================================================
   12. WordPress core / Gutenberg alignment support
   ===================================================== */

.alignwide { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
.wp-block-image, .wp-block-embed { margin: 0 0 1.5em; }
.wp-caption-text, figcaption { font-size: .85rem; color: var(--cc-grey); }

/* =====================================================
   13. Course catalogue (accordion by track) + course profile pages
   ===================================================== */

.cc-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--cc-font-display);
	font-weight: 700;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.cc-pill--soon { background: var(--cc-off-white); color: var(--cc-grey); border: 1px solid var(--cc-border); }
.cc-pill--live { background: var(--cc-turquoise); color: var(--cc-navy); }

.cc-catalog { display: flex; flex-direction: column; gap: 16px; }
.cc-catalog__track {
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	overflow: hidden;
	background: var(--cc-white);
}
.cc-catalog__track summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	background: var(--cc-off-white);
	font-family: var(--cc-font-display);
	font-weight: 800;
	color: var(--cc-navy);
}
.cc-catalog__track summary::-webkit-details-marker { display: none; }
.cc-catalog__track-marker {
	width: 22px; height: 22px; flex: 0 0 auto;
	border-radius: 50%;
	background: var(--cc-white);
	border: 1px solid var(--cc-border);
	position: relative;
}
.cc-catalog__track-marker::before, .cc-catalog__track-marker::after {
	content: ''; position: absolute; background: var(--cc-navy);
	top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.cc-catalog__track-marker::before { width: 10px; height: 2px; }
.cc-catalog__track-marker::after { width: 2px; height: 10px; }
.cc-catalog__track[open] .cc-catalog__track-marker::after { display: none; }
.cc-catalog__list { padding: 8px 24px 20px; }
.cc-catalog__list ul { list-style: none; margin: 0; padding: 0; }
.cc-catalog__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cc-border);
}
.cc-catalog__list li:last-child { border-bottom: none; }
.cc-catalog__list a { font-weight: 600; }

.cc-course-profile .cc-pill { margin-top: 12px; }
.cc-coming-soon-box {
	background: var(--cc-off-white);
	border: 1px dashed var(--cc-border);
	border-radius: var(--cc-radius);
	padding: 24px;
}

/* =====================================================
   14. LearnDash brand override layer
   The full reskin lives in assets/css/learndash-theme.css (enqueued in
   functions.php, loaded after this file) — course listing, single-course
   info tabs, lesson/topic nav, progress bar, focus mode, quiz. Kept out of
   this file since it's the one part of the theme written against another
   plugin's markup rather than tested against a real install; see that
   file's header comment for the confidence caveat.
   ===================================================== */