﻿/*
Theme Name: PokaTheme Child
Template: pokatheme
Version: 1.0.0
*/

/* AiTools brand palette — dark "Nocturne" redesign (2026-08-22), matching
   design_handoff_aitoolsexam_homepage. These are the STATIC fallback
   values only; the live, admin-editable colors come from
   atc_output_dynamic_theme_css() in aitools-custom-plugin.php (Appearance
   -> Customize -> AiTools Brand & Style), which prints a <style> block
   late in wp_head using these exact hexes as its own get_theme_mod()
   defaults — so nothing visually changes until an admin actually picks a
   different color, but every value here is one theme_mod away from being
   site-editable without touching code. --on-accent is a new role (was
   previously just reusing --surface): the color for text sitting on a
   solid accent/cta fill, e.g. .course-review-badge--platform's white-on-
   navy text — that stopped working the moment --surface stopped being a
   light color, so it's now its own token instead of overloading --surface
   for two different jobs.
   --*-dark variants are hand-picked hover/active shades, not computed,
   since this file has no build step (no Sass color functions available).

   Was previously a light navy/teal/orange theme (see git history) — this
   same token architecture ("introduced here... so this palette swap is a
   one-time job, not a recurring find-and-replace") is exactly what made
   this dark swap a single block edit instead of a file-wide rewrite. */
:root {
	--primary: #3fb4ce;
	--primary-dark: #2a90a9;
	--secondary: #3fb4ce;
	--secondary-dark: #2a90a9;
	--accent: #d97a3d;
	--accent-dark: #b3602a;
	--text: #e9e9ed;
	--text-muted: #9397ab;
	--background: #161826;
	--surface: #232532;
	--border: #3f424d;
	--on-accent: #0b1220;
	/* Semantic pros/cons colors — added for products.css's review-pro-item/
	   review-con-item badges, which used literal light-mode green/red
	   before this dark pass (#e6f7ee/#1b5e3c, #fbeaea/#7a1f1f). Light
	   enough to read as text on a dark tinted fill, not just a copy of
	   --accent/--cta (those are brand roles, not status roles). */
	--success: #34d399;
	--danger: #f87171;

	/* Site-wide layout tuning, matching ThanksDarling: parent theme ships
	   with --container-width: 1210px fixed at every breakpoint (pokatheme
	   bundle.css :root). Overriding it here instead of editing the parent's
	   compiled CSS so a theme update doesn't silently revert it. */
	--container-width: 1320px;

	/* Typography unification (2026-08-22): the parent theme's bundle.css
	   pins --headings-font-family to "Roboto" at :root, while the ath-*
	   dark system (homepage-dark.css, .ath-home scope) uses Inter for
	   everything via --font-heading/--font-body. Since .ath-home is on
	   <body> site-wide (header.php:58, unconditional body_class), both
	   token sets are in scope on every page at once — headings were
	   rendering in Roboto while .ath-home's own elements rendered in Inter,
	   two typefaces live on the same page. Overriding the parent's token
	   here (same technique as --container-width above) instead of picking
	   a font in Contento's Brand Palette & Fonts setting (Setup > Identity)
	   — that setting only constrains font-family declarations inside
	   Contento-generated HTML-element snippets, it doesn't drive the theme's
	   own body/heading font anywhere, so it wouldn't have closed this gap
	   on its own. Revisit if that setting is ever pointed at a font other
	   than Inter. */
	--main-font-family: "Inter", system-ui, sans-serif;
	--headings-font-family: "Inter", system-ui, sans-serif;
}

/* Add your custom styles here */

/* Product single: widen the sidebar from the grid's default col-9/col-3
   (75/25) to ~70/30, matching ThanksDarling — without touching the shared
   col-9/col-3 classes used elsewhere on the site. Scoped to .review-style-3
   (the class affiliates-single-style1.php's post_class() puts on <main> for
   this exact template) rather than a custom column class, since this child
   theme doesn't override that template file — the parent theme's default
   markup is used as-is. Threshold matches the parent grid's own split
   point — bundle.css stacks col-9/col-3 into full-width via .col-xl-12 at
   max-width:1210px, so this only needs to apply once the row is actually
   side-by-side. */
@media screen and (min-width: 1211px) {
	.review-style-3 .col-9 {
		flex: 70%;
		max-width: 70%;
	}
	.review-style-3 .col-3 {
		flex: 30%;
		max-width: 30%;
	}
}

/* Mobile menu "back" bar (mmenu-light — vendor/_mmenu.scss). The theme's
   own .mm-spn--navbar rules render a back-chevron + submenu title at the
   top of a drilled-into panel (e.g. "Platforms"), but at opacity:0.4 with
   no background it's effectively invisible on a white panel — users can't
   tell there's a way back, even though the whole bar is already clickable
   (mmenu-light handles the back navigation natively, no JS change needed
   here — this is purely a visibility fix).

   IMPORTANT: background/color must be set on the :before/:after
   PSEUDO-ELEMENTS, not on the .mm-spn.mm-spn--navbar host itself. That host
   selector IS the whole <nav id="header-mobile-menu"> element (100% height,
   wraps the entire menu, not just the top bar). vendor/_mmenu.scss uses
   `background: inherit` on .mm-spn ul/li and `color: inherit` on .mm-spn a,
   so a background/color declared on the host cascades down and recolors
   every submenu list item and link in the whole drawer instead of just
   showing a distinct strip at the top — the "bar" ends up the same colour
   as everything below it, so it never reads as a tappable back button even
   though the tap target was technically still there and functional. Scoping
   the paint to :after (already absolutely positioned to exactly the top
   50px band: top:0/left:0/right:0/height:var(--mm-spn-item-height)) keeps
   it fully self-contained. */
.mm-spn.mm-spn--navbar {
	cursor: pointer;
}
.mm-spn.mm-spn--navbar:before {
	opacity: 1;
	border-color: var(--primary);
	width: 12px;
	height: 12px;
	border-top-width: 3px;
	border-left-width: 3px;
}
.mm-spn.mm-spn--navbar:after {
	opacity: 1;
	background: var(--background);
	border-bottom: 1px solid var(--border);
	color: var(--primary);
	font-weight: 700;
}

/* True full-bleed helper for blocks — add "ccp-hero-band" as an Additional
   CSS class in the block editor (Advanced panel) instead of using the
   block's own Wide/Full alignment, which this theme implements as
   margin: 0 calc(-1 * padding) (only cancels the container's own padding,
   not a real 100vw edge-to-edge stretch). This does a genuine full-bleed. */
.ccp-hero-band {
	/* !important needed to beat the theme's own
	   .wp-site-blocks > * { max-width:...; margin-left/right: auto !important; }
	   rule, which otherwise re-centers and caps this block's width since
	   it's a direct child of <main class="wp-site-blocks">. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
	padding: 60px var(--container-pad, 15px);
}
/* Keep the inner content (Columns block etc.) at the site's normal reading
   width, centered — otherwise it stretches edge-to-edge along with the
   background and the heading/paragraph/image get uncomfortably wide. */
.ccp-hero-band > .wp-block-columns,
.ccp-hero-band > .wp-block-group__inner-container {
	max-width: var(--container-width, 1210px);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Homepage — shared section rhythm
   ========================================================================== */
.ccp-home section {
	margin: 56px 0;
}
.ccp-home section h2 {
	font-size: 1.5em;
	color: var(--text);
	margin: 0 0 20px;
}

/* Explora por categoría */
.ccp-home-categories-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}
.ccp-home-category-card {
	flex: 1 1 180px;
	max-width: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 16px;
	background: var(--background);
	border-radius: 8px;
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ccp-home-category-card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}
.ccp-home-category-icon {
	color: var(--primary);
	transition: color 0.15s ease;
}
.ccp-home-category-card:hover .ccp-home-category-icon {
	color: var(--on-accent);
}
.ccp-home-category-card:hover {
	background: var(--primary);
	color: var(--on-accent);
}

/* Cursos destacados / Mejor valorados — shared course grid */
.ccp-home-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}
/* Bigger featured cards get more room per column than the compact ones. */
.ccp-category-top-courses {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
}
/* Tablet: force exactly 2 columns and let the first card (top result) span
   full width above the other two, instead of leaving a lone card stranded
   next to empty space. */
@media (min-width: 600px) and (max-width: 1023px) {
	.ccp-category-top-courses {
		grid-template-columns: repeat(2, 1fr);
	}
	.ccp-category-top-courses > :first-child {
		grid-column: 1 / -1;
	}
}
/* Phone: the base auto-fill minmax(320px,1fr) floor is wider than the
   available content width on a 320-375px screen (container padding alone
   leaves well under 320px), which would otherwise pin the grid to a
   too-wide single track and push it past the viewport edge. Force an
   explicit single column so cards just stack full-width instead. */
@media (max-width: 599px) {
	.ccp-category-top-courses {
		grid-template-columns: 1fr;
	}
}
.ccp-home-see-all {
	display: inline-block;
	color: var(--accent);
	font-weight: 700;
	text-decoration: underline;
}

/* [filterable_courses] — title (left) + Top Rated/Recent/Free pills (right)
   with an AJAX-swapped grid of compact cards below. */
.ccp-filterable-courses-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.ccp-filterable-courses-title {
	margin: 0;
	color: var(--text);
}
.ccp-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* [home_tags]: pills sit alone (no title), so they need their own
   bottom margin before the grid — .ccp-filterable-courses-head normally
   provided that, but there's no head wrapper here. */
.ccp-home-tags-pills {
	margin-bottom: 24px;
}
@media (max-width: 600px) {
	.ccp-filterable-courses-head {
		flex-direction: column;
		align-items: flex-start;
	}
}
.ccp-filter-pill {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--text-muted);
	color: var(--primary);
	background: var(--background);
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ccp-filter-pill:hover {
	border-color: var(--primary);
	background: var(--surface);
}
.ccp-filter-pill.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--on-accent);
}
.ccp-filterable-courses-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	transition: opacity 0.15s ease;
}
@media (max-width: 999px) {
	.ccp-filterable-courses-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 420px) {
	.ccp-filterable-courses-grid {
		grid-template-columns: 1fr;
	}
}
.ccp-filterable-courses-empty {
	color: var(--text-muted);
}

/* Explora por plataforma — horizontal carousel */
.ccp-platform-carousel {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ccp-platform-carousel-nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	border: 1px solid var(--background);
	border-radius: 50%;
	color: var(--primary);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.ccp-platform-carousel-nav:hover {
	border-color: var(--primary);
	transform: translateY(-1px);
}
@media (max-width: 600px) {
	.ccp-platform-carousel-nav {
		display: none;
	}
}
.ccp-home-platforms-grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px;
	/* overflow-x:auto implicitly turns overflow-y into 'auto' too (per the
	   CSS overflow computed-value rule), so this track clips its own
	   children — without this padding, the hover state's translateY(-3px)
	   lift + border get cut off at the top. */
	padding: 6px 2px 10px;
	margin: -6px -2px -10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ccp-home-platforms-grid::-webkit-scrollbar {
	display: none;
}
.ccp-home-platform-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* 5 cards per view on desktop: subtract the 4 gaps between them (16px
	   each) from the track width, then divide by 5. */
	flex: 0 0 calc((100% - 64px) / 5);
	scroll-snap-align: start;
	padding: 30px 20px;
	background: var(--surface);
	border: 1px solid var(--background);
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ccp-home-platform-card:hover {
	border-color: var(--primary);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
	transform: translateY(-3px);
}
@media (max-width: 1023px) {
	.ccp-home-platform-card {
		/* 3 per view: 2 gaps of 16px. */
		flex-basis: calc((100% - 32px) / 3);
	}
}
@media (max-width: 600px) {
	.ccp-home-platform-card {
		/* 2 per view: 1 gap of 16px. */
		flex-basis: calc((100% - 16px) / 2);
		padding: 22px 14px;
	}
}
.ccp-home-platform-logo {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.ccp-home-platform-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ccp-home-platform-logo-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--primary);
	color: var(--on-accent);
	font-weight: 700;
	font-size: 1.8em;
}
.ccp-home-platform-name {
	color: var(--text);
	font-weight: 700;
	font-size: 1.15em;
}
.ccp-home-platform-badges {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.ccp-home-platform-type {
	color: var(--text-muted);
	font-size: 0.78em;
}
.ccp-home-platform-pricing {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--background);
	color: var(--primary);
	font-size: 0.72em;
	font-weight: 700;
}

/* Explora por habilidad — [home_tags]: one course grid per Skill */
/* Cifras del catálogo */
.ccp-home-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 48px;
	text-align: center;
	padding: 56px 0;
	margin-top: 24px;
	border-top: 1px solid var(--background);
	border-bottom: 1px solid var(--background);
}
.ccp-home-stat strong {
	display: block;
	font-size: 3em;
	color: var(--primary);
	line-height: 1;
	margin-bottom: 8px;
}
.ccp-home-stat span {
	color: var(--text-muted);
	font-size: 0.9em;
}

/* CTA final */
.ccp-home-cta {
	text-align: center;
}
.ccp-home-cta-button {
	display: inline-block;
	padding: 14px 36px;
	background: var(--accent);
	color: var(--on-accent);
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.ccp-home-cta-button:hover {
	background: var(--accent-dark);
	color: var(--on-accent);
}

/* ==========================================================================
   [course_search] shortcode
   ========================================================================== */
.ccp-course-search {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 24px auto 0;
	font-family: inherit;
}
/* The theme's mobile breakpoint sets overflow:hidden on this wrapper for
   its slide-down animation, and never resets it when .open is applied —
   which clips our absolutely-positioned results dropdown, making it look
   like search "does nothing" on mobile even though it's actually working.
   Force it visible, at any viewport. */
.header-search-form-wrapper {
	overflow: visible !important;
}
/* The header's own search overlay is a flex container that otherwise
   shrinks our box well below its max-width — give it a fixed target width
   there and stop it from being squeezed. */
.header-search-form-wrapper .ccp-course-search {
	width: 500px;
	max-width: 90vw;
	flex-shrink: 0;
	margin: 0;
}
@media (max-width: 600px) {
	.ccp-cs-input-row {
		padding: 5px 5px 5px 14px;
	}
	.ccp-cs-input {
		font-size: 0.9em;
	}
	.ccp-cs-btn {
		padding: 9px 14px;
		font-size: 0.78em;
	}
	.header-search-form-wrapper .ccp-course-search {
		width: 100%;
		max-width: 100%;
	}
}
.ccp-cs-input-row {
	display: flex;
	align-items: center;
	background: var(--surface);
	border: 2px solid var(--background);
	border-radius: 50px;
	padding: 6px 8px 6px 20px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ccp-cs-input-row:focus-within {
	border-color: var(--primary);
	box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}
.ccp-cs-icon {
	color: var(--text-muted);
	margin-right: 10px;
	flex-shrink: 0;
}
.ccp-cs-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1em;
	padding: 10px 0;
	color: var(--text);
	min-width: 0;
}
.ccp-cs-input::placeholder {
	color: var(--text-muted);
}
.ccp-cs-btn {
	flex-shrink: 0;
	background: var(--primary);
	color: var(--on-accent);
	border: none;
	border-radius: 50px;
	padding: 10px 22px;
	font-size: 0.85em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
	white-space: nowrap;
}
.ccp-cs-btn:hover {
	background: var(--primary-dark);
}
.ccp-cs-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--surface);
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	z-index: 999;
	text-align: left;
}
.ccp-cs-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--border);
	transition: background 0.15s ease;
}
.ccp-cs-item:last-child {
	border-bottom: none;
}
.ccp-cs-item:hover {
	background: var(--background);
}
.ccp-cs-item-icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	flex-shrink: 0;
}
.ccp-cs-item-icon--platform {
	background: rgba(63, 93, 78, 0.12);
	color: var(--primary);
}
.ccp-cs-item-icon--topic {
	background: rgba(184, 90, 42, 0.12);
	color: var(--accent);
}
.ccp-cs-item-icon--skill {
	background: rgba(122, 115, 104, 0.15);
	color: var(--text-muted);
}
.ccp-cs-item-icon--course {
	background: rgba(63, 93, 78, 0.12);
	color: var(--primary);
}
.ccp-cs-item-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.ccp-cs-item-name {
	font-size: 0.92em;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccp-cs-item-crumb {
	font-size: 0.75em;
	color: var(--text-muted);
}
.ccp-cs-empty,
.ccp-cs-loading {
	padding: 16px;
	text-align: center;
	font-size: 0.85em;
	color: var(--text-muted);
}

/* Price tag — shared across header, archive row, and related card.
   Light pill/badge treatment: pale accent background, accent text. */
.ccp-price-tag {
	display: inline-block;
	font-weight: 700;
	color: var(--accent);
	background: rgba(184, 90, 42, 0.12);
	border-radius: 999px;
	padding: 4px 14px;
	text-align: center;
}
.ccp-course-row-media .ccp-price-tag {
	margin-top: 10px;
}
.ccp-related-card-body .ccp-price-tag {
	text-align: left;
	margin-top: 10px;
}
.ccp-price-tag--value {
	font-size: 0.85em;
}
.ccp-price-tag--phrase {
	font-size: 0.75em;
}

/* Price inside the header's stats meta line (Duration · Rating · Price) */
.course-review-meta-line--stats .ccp-price-tag {
	padding: 2px 10px;
}
.ccp-price-qualifier {
	font-size: 0.75em;
	color: var(--text-muted);
	margin-left: 4px;
}

/* Compact Course Review card summary (Reviews archive rows, Related reviews cards) */
.course-card-summary {
	text-align: left;
}
.course-card-title {
	margin: 0 0 6px;
	font-size: 1.05em;
}
.course-card-title a {
	color: var(--text);
	text-decoration: none;
}
.course-card-title a:hover {
	color: var(--primary);
}
.course-card-tagline {
	font-size: 0.9em;
	color: var(--text);
	margin: 0 0 10px;
}
.course-card-summary .course-review-meta-line--stats {
	margin-top: 0;
	margin-bottom: 10px;
	gap: 0;
}
.course-card-summary .course-review-badges {
	margin-top: 0;
}

/* Related reviews card — compact, typical-WP-related-posts style.
   Image + body live inside ONE box (overflow:hidden clips the image to
   the box's top corners; the body has no background of its own). */
/* Featured card (bigger) — used by [category_top_courses]. White background
   since it's meant to sit on top of a neutral EEEEE6 section band, unlike
   the compact related-card which IS the neutral surface itself. */
.ccp-featured-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.ccp-featured-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	background: var(--background);
}
.ccp-featured-card-media img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
.ccp-featured-card-platform-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 24px);
	box-sizing: border-box;
	padding: 5px 12px 5px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--text);
	font-size: 0.78em;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ccp-featured-card-platform-pill img {
	position: static !important;
	width: 18px !important;
	height: 18px !important;
	object-fit: contain !important;
	border-radius: 50% !important;
}
.ccp-featured-card-body {
	padding: 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ccp-featured-card-title {
	margin: 0 0 8px !important;
	font-size: 1.2em !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}
.ccp-featured-card-title a {
	color: var(--text);
	text-decoration: none;
}
.ccp-featured-card-title a:hover {
	color: var(--primary);
}
.ccp-featured-card-tagline {
	font-size: 0.95em;
	color: var(--text-muted);
	margin: 0 0 12px;
}
.ccp-featured-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}
.ccp-featured-card-rating .crm-rating-score {
	font-size: 0.9em;
	color: var(--accent);
	font-weight: 700;
}
.ccp-featured-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.ccp-featured-card-price {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
/* Wraps the Duration/Updated footer + the two bottom links as one unit,
   so the pair always sticks to the card's bottom edge together — even
   when the footer itself is absent (it's conditional on duration/updated
   data existing) — instead of drifting up to wherever a shorter card's
   content happens to end. */
.ccp-featured-card-bottom {
	margin-top: auto;
}
.ccp-featured-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.82em;
	color: var(--text-muted);
	padding-top: 14px;
	border-top: 1px solid var(--background);
}
.ccp-featured-card-footer-left,
.ccp-featured-card-footer-right {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ccp-featured-card-body .course-review-cta-link {
	display: inline-block;
	margin-top: 12px;
}
.ccp-featured-card-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--background);
}
/* Each link's own icon+text stays on one line (white-space:nowrap below),
   but "View on <Platform>" can run long on a narrow card (this grid gets
   as narrow as ~240px via minmax(240px,1fr)) — letting the row itself wrap
   drops "Read Review" to its own line instead of clipping/overflowing the
   card when both links can't fit side by side. */
.ccp-featured-card-link-external,
.ccp-featured-card-link-internal {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.ccp-featured-card-link-external {
	color: var(--accent);
}
.ccp-featured-card-link-external:hover {
	color: var(--accent-dark);
}
.ccp-featured-card-link-internal {
	color: var(--primary);
}
.ccp-featured-card-link-internal:hover {
	color: var(--text);
}
.ccp-featured-card-link-internal span {
	transition: transform 0.15s ease;
}
.ccp-featured-card-link-internal:hover span {
	transform: translateX(2px);
}

/* [category_view_all_link] — companion link for a [category_top_courses]
   section title (e.g. in a Columns block's right column). */
.ccp-category-view-all-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	color: var(--primary);
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none;
}
.ccp-category-view-all-link:hover {
	color: var(--accent);
}
.ccp-category-view-all-link span {
	transition: transform 0.15s ease;
}
/* [home_tags]: gray instead of the shared green, matching the pills'
   fully-neutral color scheme. Hover stays orange, same as everywhere
   else — orange is reserved for the "action" moment, not the resting
   state. */
.ccp-skill-view-all-link {
	color: var(--text-muted);
}
.ccp-skill-view-all-link:hover {
	color: var(--accent);
}
.ccp-category-view-all-link:hover span {
	transform: translateX(3px);
}

.ccp-related-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--background);
	border-radius: 8px;
	overflow: hidden;
}
.ccp-related-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
}
.ccp-related-card-media img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
.ccp-related-card-body {
	padding: 16px;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ccp-related-card-title {
	margin: 0 0 8px !important;
	font-size: 1em !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}
.ccp-related-card-title a {
	color: var(--text);
	text-decoration: none;
}
.ccp-related-card-title a:hover {
	color: var(--primary);
}
/* Added on a self-review pass alongside the post_excerpt fix in
   atc_render_tool_card_compact() — matches .ccp-featured-card-tagline's
   sizing/color, just tighter margin for this more compact card. */
.ccp-related-card-excerpt {
	font-size: 0.85em;
	color: var(--text-muted);
	line-height: 1.4;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ccp-related-card-rating-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.ccp-related-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ccp-related-card-rating .crm-rating-score {
	font-size: 0.85em;
	color: var(--accent);
	font-weight: 700;
}
.ccp-related-card-badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 10px;
}
.ccp-related-card-badge-row {
	display: flex;
	flex-wrap: wrap;
}
.ccp-related-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.78em;
	color: var(--text-muted);
	margin-top: auto;
	padding-top: 10px;
}
.ccp-related-card-footer-left,
.ccp-related-card-footer-right {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Compact meta line: icons instead of text labels, smaller than title/tagline */
.ccs-compact-meta {
	gap: 0;
}
.ccs-compact-meta .crm-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8em;
}
.ccs-compact-meta .crm-rating {
	gap: 4px;
}
.ccs-icon {
	color: var(--accent);
	flex-shrink: 0;
}
.ccs-compact-badges {
	gap: 6px;
}
.course-review-badge--sm {
	padding: 2px 9px;
	font-size: 0.68em;
}

/* CTA as a plain link (compact cards) instead of the solid hero button */
.course-review-cta-link {
	display: inline-block;
	color: var(--accent);
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: underline;
}
.course-review-cta-link:hover {
	color: var(--accent-dark);
}

/* Reviews archive row: two columns (image+actions | info), matching the header */
.review-box--two-col .review-box-wrap {
	align-items: stretch;
}
.ccp-course-row {
	display: flex;
	align-items: stretch;
	gap: 20px;
	background: transparent;
	padding: 0;
}
.review-box.ccp-course-row + .review-box.ccp-course-row {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--background);
}
.ccp-course-row-media {
	flex: 0 0 220px;
	width: 220px;
	background: var(--background);
	border-radius: 8px;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.ccp-course-row-media .course-card-thumbnail {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
}
.ccp-course-row-media img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	border-radius: 4px !important;
	margin: 0 !important;
	max-width: none !important;
}
.ccp-course-row-media .course-review-cta-link {
	display: block;
}
.ccp-course-row-info {
	flex: 1;
	min-width: 0;
	padding: 20px 0;
}
@media (max-width: 782px) {
	.ccp-course-row {
		flex-direction: column;
	}
	.ccp-course-row-media {
		width: 100%;
		max-width: 100%;
	}
}

/* Alternate image side per row (zig-zag) — desktop only, so it doesn't
   fight the mobile column-stack rule above. */
@media (min-width: 783px) {
	.review-box.ccp-course-row:nth-child(even) {
		flex-direction: row-reverse;
	}
}

.ccp-topic-back-link {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--text-muted);
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
}
.ccp-topic-back-link:hover {
	color: var(--primary);
}

/* "No courses match these filters" notice (ccp_render_no_courses_notice) */
.ccp-no-results {
	padding: 48px 24px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--background);
	border-radius: 10px;
}
.ccp-no-results p {
	margin: 0 0 12px;
	color: var(--text-muted);
	font-size: 1.05em;
}
.ccp-no-results-clear {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--primary);
	color: var(--on-accent);
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: none;
}
.ccp-no-results-clear:hover {
	background: var(--primary-dark);
	color: var(--on-accent);
}

/* Theme's .section adds a 90px top padding; .section--npb only removes
   the bottom one. .section-review-content is also used by the PARENT
   theme's own (unmodified) affiliates-single-style2.php/-style3.php,
   which still have their own separate hero band above it and may still
   want that top padding — so this can't be a blanket ".section-review-content"
   rule. Scoped to .review-style-3, the class this child theme's own
   affiliates-single-style1.php stamps on <main> via post_class() (yes,
   "review-style-3" on the style1 file — a pre-existing, unrelated-to-
   this-change naming quirk, not a typo introduced here). Used to be
   scoped to "immediately follows .course-review-hero-band" via a sibling
   selector, back when the review header lived in a separate full-width
   band above this section; now the header renders inside this section's
   own col-9 (2026-08-22).

   28px, not 0: col-9 (header) and col-3 (sidebar) are both direct
   children of this section, so its own top padding is the one place
   that gives BOTH columns breathing room from the sticky .ath-header on
   initial page load — .sticky-col's own `top` offset (homepage-dark.css)
   only takes effect once the sidebar actually starts sticking during
   scroll, not for its normal-flow starting position, so without this
   the header text and the Quick Facts card both rendered flush against
   the navbar before any scrolling happened. */
.review-style-3 .section-review-content {
	padding-top: 28px;
}

/* Course Review hero: two-column row (text left, featured image right) */
.course-review-hero-row {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}
.course-review-hero-main {
	flex: 1 1 auto;
	min-width: 0;
}
.course-review-hero-image-col {
	flex: 0 0 280px;
	text-align: center;
}
.course-review-hero-image-col .course-review-featured-image {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	aspect-ratio: 4 / 3;
}
.course-review-hero-image-col .course-review-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.course-review-cta-button {
	display: block;
	text-align: center;
	margin-top: 18px;
	padding: 10px 20px;
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease;
}
.course-review-cta-button:hover {
	background: var(--accent-dark);
	color: var(--on-accent);
}
@media (max-width: 782px) {
	.course-review-hero-row {
		flex-direction: column;
	}
	.course-review-hero-image-col {
		flex-basis: auto;
		width: 100%;
	}
}

/* .sticky-col: the theme applies this class to the review sidebar column
   (affiliates-single-style1.php) but never actually defines it anywhere —
   neither the SCSS source nor the compiled bundle has a rule for it, so it
   was a dead class name. The theme's own equivalent for other sticky
   elements (.review-cta-wrapper--sticky) uses `top: 20px` on screens
   ≥992px only, so matching that here rather than inventing a new offset.
   Updated 2026-08-22: the site now has its own sticky .ath-header
   (pokatheme_child/header.php, site-wide) sitting at top:0 with
   z-index:20 — a plain top:20px let the sidebar scroll up underneath it,
   since 20px is less than the header's own ~65px height. Offsetting by
   --ath-header-height (homepage-dark.css) + the original 20px breathing
   room stops the sidebar's resting position from going under the header;
   the var has a literal-px fallback for the (currently theoretical) case
   this file loads on a page without homepage-dark.css enqueued. */
@media screen and (min-width: 992px) {
	.sticky-col {
		position: sticky;
		top: calc(var(--ath-header-height, 65px) + 20px);
	}
}

/* Same fix, same reason, for the parent theme's own equivalent sticky CTA
   box (affiliates-single-style4.php) — pokatheme/assets/public/css/
   bundle.css defines review-cta-wrapper--sticky with the same bare
   top:20px this site's .sticky-col had, so it has the same "scrolls
   under the sticky header" bug. Overridden here (not edited in the
   parent's compiled CSS, which a theme update would just revert) — this
   file already loads after bundle.css (see functions.php's enqueue
   dependency array), so the higher-specificity concern doesn't even
   apply: same selector, later in the cascade, wins on source order alone. */
@media screen and (min-width: 992px) {
	.review-cta-wrapper--sticky {
		top: calc(var(--ath-header-height, 65px) + 20px);
	}
}

/* Course Review sidebar shortcodes: [course_sidebar_quickfacts],
   [course_sidebar_topics] */

.ccp-sidebar-quickfacts {
	margin-bottom: 28px;
}
.ccp-sidebar-topic-nav {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--background);
}
.ccp-sidebar-skills-nav {
	margin-bottom: 20px;
}
.ccp-sidebar-skills-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ccp-sidebar-quickfacts-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--background);
}
.ccp-sidebar-quickfacts-row:last-of-type {
	border-bottom: none;
}
.ccp-sidebar-quickfacts-label {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.ccp-sidebar-row-icon {
	flex-shrink: 0;
	color: var(--accent);
}
/* Row value text now takes the smaller/lighter format the text labels
   used to have, now that the label itself is icon-only. Sits right next
   to the icon (no more space-between spreading them across the row, now
   that there's no label text to justify the gap). */
.ccp-sidebar-quickfacts-value {
	color: var(--text-muted);
	font-size: 0.95em;
	font-weight: 600;
}
/* Visually hidden but still available to screen readers/search engines —
   standard clip technique. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ccp-sidebar-rating-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ccp-sidebar-platform-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ccp-sidebar-platform-inline-logo {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccp-sidebar-platform-inline-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ccp-sidebar-platform-inline-logo .ccp-home-platform-logo-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--primary);
	color: var(--on-accent);
	font-weight: 700;
	font-size: 0.75em;
}
.ccp-sidebar-platform-inline-name {
	font-weight: 700;
	font-size: 1.05em;
	color: var(--text);
}
.ccp-sidebar-quickfacts .course-review-cta-button {
	margin-top: 16px;
}
.ccp-cta-external-icon {
	margin-left: 6px;
	vertical-align: -2px;
}

.ccp-sidebar-title {
	margin: 0 0 12px;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-muted);
}
/* Related Topics / Related Skills headers: smaller + lighter than "Course
   Details" so they read as secondary, lower-priority sections. */
.ccp-sidebar-title--sub {
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ccp-sidebar-topic-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* :visited explicitly overridden — without it, the browser's default
   visited-link color (often a muted purple/teal) shows through on any
   topic the reader has already clicked, which reads as a random color
   bug rather than intentional design. Orange stays reserved for
   price/CTA, so "current" is shown via weight, not a second accent color. */
.ccp-sidebar-topic-list a,
.ccp-sidebar-topic-list a:visited {
	color: var(--text);
	text-decoration: none;
	font-size: 0.88em;
}
.ccp-sidebar-topic-list a:hover {
	color: var(--primary);
}
.ccp-sidebar-topic-list a.is-current,
.ccp-sidebar-topic-list a.is-current:visited {
	color: var(--text);
	font-weight: 700;
}

/* Course Review badge row (Platform / Topic / Skills groups) */
.course-review-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}
.crb-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.crb-label {
	font-size: 0.75em;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.course-review-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.course-review-badge--platform {
	background: var(--primary);
	color: var(--on-accent);
}
.course-review-badge--topic {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--accent);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}
.course-review-badge--tag,
.course-review-badge--tag:visited {
	background: transparent;
	color: var(--text-muted);
	border: 1px solid var(--text-muted);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}
.course-review-badge--pricing {
	background: var(--accent);
	color: var(--on-accent);
}

/* Platform archive header (ccp_render_platform_archive_header) — reuses
   the course-review-hero-band/-row/-main/-image-col layout, but the image
   column holds a logo box (contain-fit, not cropped) instead of a course
   thumbnail. */
.ccp-platform-header-logo {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccp-platform-header-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* L1 Course Topic archive: "Browse <Parent> subcategories" — sits right
   below the header band, above the tag/platform pills + course grid, so a
   reader can narrow down before scrolling a mixed grid spanning every L2
   child. Reuses the exact [home_categories] card look. */
.ccp-topic-subcategories {
	padding: 32px 0;
	border-bottom: 1px solid var(--background);
}
.ccp-topic-subcategories-title {
	margin: 0;
	font-size: 1.2em;
	color: var(--text);
}
.ccp-topic-subcategories .ccp-home-categories-grid {
	margin-top: 20px;
}
.ccp-topic-skills-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* Course Review header block (tagline, meta row) */
.course-review-header {
	margin-top: 16px;
	margin-bottom: 0;
}
.course-review-tagline {
	font-size: 1.15em;
	color: var(--text);
	margin: 8px 0 0;
}
.course-review-meta-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin-top: 18px;
}
.course-review-meta-line .crm-item {
	font-size: 0.95em;
	color: var(--text-muted);
	font-weight: 600;
}
.course-review-meta-line--stats .crm-item:not(:first-child) {
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid var(--text-muted);
}
.course-review-meta-line .crm-item strong {
	color: var(--text);
}
.course-review-meta-line .crm-rating {
	color: var(--text);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.crm-rating-score {
	color: var(--accent);
	font-weight: 700;
}
.crm-label {
	font-size: 0.75em;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-right: 4px;
}

/* ==========================================================================
   Neutralize theme's icon-font list bullet (.wysiwyg-part ul > li::before)
   for our own Contento components. Placed here (not in Contento's own CSS
   box) because style.css has an explicit dependency on 'poka-bundle', so it
   always loads after the theme's bundle.css and reliably wins the tie —
   Contento's inline style has no declared dependency, so its load order
   relative to bundle.css isn't guaranteed.
   ========================================================================== */

.contento-section {
	margin-top: 40px;
}

.contento-section .cto-wf-list {
	padding-left: 0;
}

.contento-section .cto-wf-list > li {
	list-style: none;
	position: relative;
	padding-left: 1.2em;
}

.contento-section .cto-wf-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}


/* Tag pills filter (Course Topic archives) */
.course-tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 24px;
	position: relative;
	z-index: 1;
}
/* affiliates-taxonomy.php's sidebar wrapper uses a negative margin-top
   (.gap-50/.gap-lg-20 grid-gutter trick) that, right after our pills with
   no buffer in between, pulls it up over their bottom half and steals
   clicks. Neutralize just the vertical offset here — leave margin-left
   alone, it's still needed for the row's own horizontal gutter. */
.course-tag-pills + .row.gap-50 {
	margin-top: 0;
}
.course-tag-pill {
	/* Originally only used on <a>, which gets a pointer cursor and no
	   native chrome for free. [home_tags] also uses this class on
	   <button> elements, which need their own browser button styling
	   (background/border/appearance) explicitly reset or it can show
	   through underneath these rules. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	font-family: inherit;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--text-muted);
	color: var(--primary);
	background: var(--background);
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.course-tag-pill:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: var(--surface);
}
/* [home_tags] pills: fully neutral gray throughout, no green at all —
   unlike every other filter-pill in the site, whose active/selected
   state is the brand green. Resting matches the Skill/Tag badges shown
   on course cards (.course-review-badge--tag); active is just a solid
   fill of the same gray, not a color swap. */
.ccp-skill-pill {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	font-family: inherit;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--text-muted);
	background: transparent;
	color: var(--text-muted);
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ccp-skill-pill:hover {
	border-color: var(--text);
	color: var(--text);
}
.ccp-skill-pill.is-active {
	background: var(--text-muted);
	border-color: var(--text-muted);
	color: var(--on-accent);
}

.course-tag-pill.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--on-accent);
}

/* Platform archive toolbar (Course Topic pills + Sort dropdown) */
.ccp-platform-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	position: relative;
	z-index: 1;
	margin: 16px 0 24px;
}
/* Courses archive toolbar has only the Sort dropdown (no Platform/Topic
   select), so push it to the right instead of the default space-between
   collapsing it to the left with nothing to balance against. */
.ccp-courses-toolbar-selects {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.ccp-platform-toolbar .course-tag-pills {
	margin: 0;
	flex: 1 1 auto;
}
/* Same negative-margin-grid-gutter fix as the tag pills on Course Topic
   archives — here the sidebar row sits right after the whole toolbar. */
.ccp-platform-toolbar + .row.gap-50 {
	margin-top: 0;
}
/* Course Topic filter, styled as a pill even though it's a <select> —
   scales better than a wrapping row of pill links once a platform spans
   a dozen leaf-level topics. */
.ccp-pill-dropdown-form {
	flex: 0 0 auto;
	max-width: 100%;
}
/* A native <select> sizes itself to its currently-selected option text with
   no inherent cap — a longer Course Topic/Platform name (this is a Spanish-
   language site, so names run longer than their English equivalents) can
   render wider than a 320-375px phone viewport and force the whole toolbar
   row past the edge, since flex:0 0 auto above also refuses to shrink it.
   max-width:100% caps it to whatever room the flex-wrap row has left. */
.ccp-pill-dropdown {
	appearance: none;
	-webkit-appearance: none;
	max-width: 100%;
	box-sizing: border-box;
	padding: 6px 32px 6px 16px;
	border-radius: 999px;
	border: 1px solid var(--text-muted);
	background-color: var(--background);
	/* Arrow stroke is a literal hex baked into the data URI (can't read a
	   CSS custom property from inside one) — %239397AB is --text-muted's
	   #9397ab URL-encoded; was #3F5D4E, a dark green invisible against
	   this theme's now-dark --background. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239397AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: var(--primary);
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ccp-pill-dropdown:hover {
	border-color: var(--primary);
	background-color: var(--surface);
}
.ccp-platform-sort-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.ccp-platform-sort-form label {
	color: var(--text-muted);
	font-size: 0.9em;
	white-space: nowrap;
}
.ccp-platform-sort-form select {
	max-width: 100%;
	box-sizing: border-box;
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid var(--text-muted);
	background: var(--surface);
	color: var(--text);
	font-size: 0.9em;
}
@media (max-width: 600px) {
	.ccp-platform-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
	/* Complete the stack: the toolbar itself already goes column, but its
	   two children (the Category/Platform select pair and the Sort form)
	   were never told to take the full row width, so on a phone they were
	   left as shrink-to-content pills sitting side by side under each
	   other — cramped and inconsistent widths. Give every direct row here
	   the full width so the whole toolbar reads as one clean stacked list. */
	.ccp-platform-toolbar .course-tag-pills,
	.ccp-courses-toolbar-selects,
	.ccp-pill-dropdown-form,
	.ccp-platform-sort-form {
		width: 100%;
	}
	.ccp-pill-dropdown,
	.ccp-platform-sort-form select {
		width: 100%;
	}
}

/* Estrellas de rating */
.star-rating {
  display: inline-block;
  position: relative;
  font-size: 1.1em;
  line-height: 1;
  letter-spacing: 2px;
  font-family: Arial, sans-serif;
  vertical-align: middle;
  margin-right: 6px;
}
.star-rating::before {
  content: "★★★★★";
  color: var(--background);
  letter-spacing: 2px;
}
.star-rating::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating);
  overflow: hidden;
  color: var(--accent);
  letter-spacing: 2px;
  white-space: nowrap;
}

/* Header navigation — brand alignment (Musgo & Arcilla) over the
   parent theme's generic .header-menu/.sub-menu markup. Colors are
   redeclared here (not just left to the Customizer) so the header
   always matches the palette regardless of Customizer settings. */
.header-menu li a,
.header-menu > li.menu-item-has-children > a::after {
    color: var(--text);
}
.header-menu li a:hover,
.header-menu > li.current-menu-item a {
    color: var(--primary);
}
.header-menu > li.menu-item-has-children > a::after {
    transition: transform 0.2s ease;
}
.header-menu > li.menu-item-has-children:hover > a::after {
    -webkit-transform: translate(0, -50%) rotate(270deg);
            transform: translate(0, -50%) rotate(270deg);
}
.header-menu .sub-menu {
    background-color: var(--surface);
    border-radius: 16px;
    border-top: 3px solid var(--primary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    padding: 0.75rem;
}
.header-menu .sub-menu li {
    margin-bottom: 0;
}
.header-menu .sub-menu li a {
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.header-menu .sub-menu li a:hover {
    background-color: var(--background);
    color: var(--primary);
}

/* Top-level nav: drop the breadcrumb-style "/" separators (odd fit for a
   flat primary nav) in favor of a rounded hover pill per item, matching
   the sub-menu treatment above. Also tightens li padding since the pill's
   own padding now provides the visual spacing that the separators used
   to create. */
.header-menu > li::before {
    content: none;
}
.header-menu > li {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
.header-menu > li:first-child {
    padding-left: 0;
}
.header-menu > li.menu-item-has-children {
    padding-right: calc(0.35rem + 18px);
}
.header-menu li a {
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
}
.header-menu > li > a:hover {
    background-color: var(--background);
}

/* Header logo: the uploaded logo's own aspect ratio makes it render very
   wide at the theme's default max-height:60px (no max-width was set), so
   it was eating over half the header row. Capping max-width forces it to
   scale down further (height follows automatically, object-fit:contain
   already set by the parent theme) without touching the logo file itself. */
.header-logo img,
.header-logo .custom-logo {
    max-width: 300px;
    width: auto;
    height: auto;
}

/* Give the nav some breathing room before the search button, so the two
   don't feel glued together at the right edge of the header. */
.header-top-flex-part--right .header-menu {
    margin-right: 2.5rem;
}

/* Search toggle: was a near-invisible gray circle (same treatment as the
   mobile hamburger button) — filled in Primary so it reads as an actual
   button instead of blending into the header background. */
.icon-btn.poka-search {
    background-color: var(--primary);
    color: var(--on-accent);
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.icon-btn.poka-search:hover {
    background-color: var(--primary-dark);
    opacity: 1;
}

/* All Platforms index page (grid of every Platform's logo/name/count),
   same visual language as .ccp-home-category-card but for a logo image
   instead of an SVG icon. */
.ccp-platform-index-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}
.ccp-platform-index-card {
    flex: 1 1 180px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 16px;
    background: var(--background);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ccp-platform-index-card img {
    max-height: 40px;
    max-width: 100%;
    object-fit: contain;
}
.ccp-platform-index-card:hover {
    background: var(--primary);
    color: var(--on-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}
.ccp-platform-index-name {
    font-weight: 700;
}
.ccp-platform-index-count {
    font-size: 0.85em;
    opacity: 0.75;
}

/* Footer background + separator — the theme leaves .site-footer
   transparent by default (sits directly on the white page background),
   so it blended into the page above it with no visual boundary. */
.site-footer {
    background-color: var(--background);
}
.footer-section--copyright {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* [tool_comparison] shortcode — new to AiTools, no CoursesArchive/
   products.css equivalent existed to reuse (checked: products.css's
   table-like classes are all single-product hero/feature markup, not a
   comparison grid). Wide content (up to 3 tool columns) scrolls inside
   its own container rather than the page body, per the responsive rule
   already followed elsewhere on this site. */
.ccp-comparison-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
}
.ccp-comparison-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
}
.ccp-comparison-table th,
.ccp-comparison-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.ccp-comparison-table thead th {
    background: var(--background);
    border-bottom: 2px solid var(--border);
}
.ccp-comparison-row-label {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    background: var(--background);
}
.ccp-comparison-tool-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    text-align: center;
}
.ccp-comparison-tool-header img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
}