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

/* Add your custom styles here */

/* Smooth in-page anchor scrolling (e.g. a hero "Browse Categories" button
   linking to #browse-categories, the [home_categories] section's own id)
   instead of an instant jump. Browsers already disable this automatically
   under prefers-reduced-motion, no extra query needed. */
html {
	scroll-behavior: smooth;
}

/* 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: #3F5D4E;
	width: 12px;
	height: 12px;
	border-top-width: 3px;
	border-left-width: 3px;
}
.mm-spn.mm-spn--navbar:after {
	opacity: 1;
	background: #EEEEE6;
	border-bottom: 1px solid #ddd;
	color: #3F5D4E;
	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: #23261F;
	margin: 0 0 20px;
}

/* Explora por categoría */
.ccp-home-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	max-width: 1080px;
	margin: 28px auto 0;
}
@media (max-width: 900px) {
	.ccp-home-categories-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.ccp-home-categories-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ccp-home-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 16px;
	background: #EEEEE6;
	border-radius: 8px;
	color: #23261F;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 2px 10px rgba(35, 38, 31, 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(35, 38, 31, 0.14);
	transform: translateY(-2px);
}
.ccp-home-category-icon {
	width: 32px;
	height: 32px;
	color: #3F5D4E;
	transition: color 0.15s ease;
}
/* Phosphor Duotone icons: terracotta accent layer under the green
   linework (accent paths carry class="ccp-duo-accent" in the plugin's
   top-level icon map). */
.ccp-home-category-icon .ccp-duo-accent {
	fill: #B85A2A;
	opacity: 0.45;
	transition: fill 0.15s ease, opacity 0.15s ease;
}
.ccp-home-category-card:hover .ccp-home-category-icon .ccp-duo-accent {
	fill: #FFFFFF;
	opacity: 0.35;
}
.ccp-home-category-card:hover .ccp-home-category-icon {
	color: #FFFFFF;
}
.ccp-home-category-card:hover {
	background: #3F5D4E;
	color: #FFFFFF;
}

/* 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: #B85A2A;
	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: #23261F;
}
.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 #7A7368;
	color: #3F5D4E;
	background: #EEEEE6;
	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: #3F5D4E;
	background: #FFFFFF;
}
.ccp-filter-pill.is-active {
	background: #3F5D4E;
	border-color: #3F5D4E;
	color: #FFFFFF;
}
.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: #7A7368;
}

/* 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: #FFFFFF;
	border: 1px solid #EEEEE6;
	border-radius: 50%;
	color: #3F5D4E;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(35, 38, 31, 0.08);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.ccp-platform-carousel-nav:hover {
	border-color: #3F5D4E;
	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: #FFFFFF;
	border: 1px solid #EEEEE6;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(35, 38, 31, 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: #3F5D4E;
	box-shadow: 0 8px 20px rgba(35, 38, 31, 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: #3F5D4E;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.8em;
}
.ccp-home-platform-name {
	color: #23261F;
	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: #7A7368;
	font-size: 0.78em;
}
.ccp-home-platform-pricing {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #EEEEE6;
	color: #3F5D4E;
	font-size: 0.72em;
	font-weight: 700;
}

/* Explora por habilidad — [home_tags]: one course grid per Skill */
/* Cifras del catálogo */
/* [home_stats] styling now ships inline from the plugin
   (ccp_render_home_stats), where the band was redesigned. */

/* CTA final */
.ccp-home-cta {
	text-align: center;
}
.ccp-home-cta-button {
	display: inline-block;
	padding: 14px 36px;
	background: #B85A2A;
	color: #FFFFFF;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.ccp-home-cta-button:hover {
	background: #9c4b22;
	color: #FFFFFF;
}

/* ==========================================================================
   [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: #FFFFFF;
	border: 2px solid #EEEEE6;
	border-radius: 50px;
	padding: 6px 8px 6px 20px;
	box-shadow: 0 4px 18px rgba(35, 38, 31, 0.08);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ccp-cs-input-row:focus-within {
	border-color: #3F5D4E;
	box-shadow: 0 4px 22px rgba(35, 38, 31, 0.14);
}
.ccp-cs-icon {
	color: #7A7368;
	margin-right: 10px;
	flex-shrink: 0;
}
.ccp-cs-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1em;
	padding: 10px 0;
	color: #23261F;
	min-width: 0;
}
.ccp-cs-input::placeholder {
	color: #ADA89B;
}
.ccp-cs-btn {
	flex-shrink: 0;
	background: #3F5D4E;
	color: #FFFFFF;
	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: #2f4739;
}
.ccp-cs-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(35, 38, 31, 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 #f2f0e9;
	transition: background 0.15s ease;
}
.ccp-cs-item:last-child {
	border-bottom: none;
}
.ccp-cs-item:hover {
	background: #EEEEE6;
}
.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: #3F5D4E;
}
.ccp-cs-item-icon--topic {
	background: rgba(184, 90, 42, 0.12);
	color: #B85A2A;
}
.ccp-cs-item-icon--skill {
	background: rgba(122, 115, 104, 0.15);
	color: #7A7368;
}
.ccp-cs-item-icon--course {
	background: rgba(63, 93, 78, 0.12);
	color: #3F5D4E;
}
.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: #23261F;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccp-cs-item-crumb {
	font-size: 0.75em;
	color: #ADA89B;
}
.ccp-cs-empty,
.ccp-cs-loading {
	padding: 16px;
	text-align: center;
	font-size: 0.85em;
	color: #7A7368;
}

/* 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: #B85A2A;
	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;
}
/* "See price [on X]" fallback (no price_amount on file) — same neutral
   gray as .ccp-unrated-badge, deliberately NOT the pink accent used for a
   real price/subscription phrase, so it reads as "go check the platform"
   rather than "here's the deal". Same-specificity rule declared after
   .ccp-price-tag above, so it wins the color/background override. */
.ccp-price-tag--no-price {
	color: #8A8A82;
	background: #F0EFE9;
}

/* 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: #7A7368;
	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: #23261F;
	text-decoration: none;
}
.course-card-title a:hover {
	color: #3F5D4E;
}
.course-card-tagline {
	font-size: 0.9em;
	color: #23261F;
	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: #FFFFFF;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(35, 38, 31, 0.08);
}
.ccp-featured-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	background: #EEEEE6;
}
.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: #23261F;
	font-size: 0.78em;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(35, 38, 31, 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;
}
/* The compact/related card reuses this same pill inside ".ccp-related-card-media",
   which has its OWN "img" reset rule (same 1-class+element specificity,
   declared later in the file) forcing width/height to 100% — that tie was
   winning and blowing the pill's logo up to fill the whole thumbnail.
   Genuinely higher specificity (two classes + element) here wins
   unconditionally regardless of declaration order. */
.ccp-related-card-media .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: #23261F;
	text-decoration: none;
}
.ccp-featured-card-title a:hover {
	color: #3F5D4E;
}
.ccp-featured-card-tagline {
	font-size: 0.95em;
	color: #7A7368;
	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: #B85A2A;
	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;
}
/* Same bottom-anchoring technique for the compact/related card — rating,
   category badge and footer (duration/updated) are grouped together and
   pushed to the bottom of the flex column, so they line up at the same
   height across cards in a row regardless of how many lines the title
   above wraps to. */
.ccp-related-card-bottom {
	margin-top: auto;
}
.ccp-featured-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.82em;
	color: #7A7368;
	padding-top: 14px;
	border-top: 1px solid #EEEEE6;
}
.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 #EEEEE6;
}
/* 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: #B85A2A;
}
.ccp-featured-card-link-external:hover {
	color: #9c4b22;
}
.ccp-featured-card-link-internal {
	color: #3F5D4E;
}
.ccp-featured-card-link-internal:hover {
	color: #23261F;
}
.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: #3F5D4E;
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none;
}
.ccp-category-view-all-link:hover {
	color: #B85A2A;
}
.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: #7A7368;
}
.ccp-skill-view-all-link:hover {
	color: #B85A2A;
}
.ccp-category-view-all-link:hover span {
	transform: translateX(3px);
}

.ccp-related-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #EEEEE6;
	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: #23261F;
	text-decoration: none;
}
.ccp-related-card-title a:hover {
	color: #3F5D4E;
}
.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: #B85A2A;
	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: #7A7368;
	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: #B85A2A;
	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: #B85A2A;
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: underline;
}
.course-review-cta-link:hover {
	color: #9c4b22;
}

/* 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 #EEEEE6;
}
.ccp-course-row-media {
	flex: 0 0 220px;
	width: 220px;
	background: #EEEEE6;
	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;
	}
}

/* Course Review full-width hero band (wraps h1 + header block) */
.course-review-hero-band {
	background: #EEEEE6;
	padding: 16px 0 28px;
	margin-bottom: 8px;
}
.course-review-hero-band h1 {
	margin-bottom: 0;
}
.ccp-topic-back-link {
	display: inline-block;
	margin-bottom: 10px;
	color: #7A7368;
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
}
.ccp-topic-back-link:hover {
	color: #3F5D4E;
}

/* "No courses match these filters" notice (ccp_render_no_courses_notice) */
.ccp-no-results {
	padding: 48px 24px;
	text-align: center;
	background: #FBFAF8;
	border: 1px solid #EEEEE6;
	border-radius: 10px;
}
.ccp-no-results p {
	margin: 0 0 12px;
	color: #7A7368;
	font-size: 1.05em;
}
.ccp-no-results-clear {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background: #3F5D4E;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: none;
}
.ccp-no-results-clear:hover {
	background: #2f4739;
	color: #FFFFFF;
}

/* Theme's .section adds a 90px top padding; .section--npb only removes the
   bottom one. Kill the top padding just for the section that immediately
   follows our hero band, without touching .section elsewhere on the site. */
.course-review-hero-band + .container .section-review-content {
	padding-top: 0;
}

/* 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(35, 38, 31, 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: #B85A2A;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease;
}
.course-review-cta-button:hover {
	background: #9c4b22;
	color: #FFFFFF;
}
@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. */
@media screen and (min-width: 992px) {
	.sticky-col {
		position: sticky;
		top: 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 #EEEEE6;
}
.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 #EEEEE6;
}
.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: #B85A2A;
}
/* 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: #7A7368;
	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: #3F5D4E;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.75em;
}
.ccp-sidebar-platform-inline-name {
	font-weight: 700;
	font-size: 1.05em;
	color: #23261F;
}
.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: #7A7368;
}
/* 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: #23261F;
	text-decoration: none;
	font-size: 0.88em;
}
.ccp-sidebar-topic-list a:hover {
	color: #3F5D4E;
}
.ccp-sidebar-topic-list a.is-current,
.ccp-sidebar-topic-list a.is-current:visited {
	color: #23261F;
	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: #7A7368;
	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: #3F5D4E;
	color: #FFFFFF;
}
.course-review-badge--topic {
	background: transparent;
	color: #B85A2A;
	border: 1px solid #B85A2A;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}
.course-review-badge--tag,
.course-review-badge--tag:visited {
	background: transparent;
	color: #7A7368;
	border: 1px solid #7A7368;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}
.course-review-badge--pricing {
	background: #B85A2A;
	color: #FFFFFF;
}

/* 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 #EEEEE6;
}
.ccp-topic-subcategories-title {
	margin: 0;
	font-size: 1.2em;
	color: #23261F;
}
.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: #23261F;
	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: #7A7368;
	font-weight: 600;
}
.course-review-meta-line--stats .crm-item:not(:first-child) {
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid #7A7368;
}
.course-review-meta-line .crm-item strong {
	color: #23261F;
}
.course-review-meta-line .crm-rating {
	color: #23261F;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.crm-rating-score {
	color: #B85A2A;
	font-weight: 700;
}
.crm-label {
	font-size: 0.75em;
	font-weight: 700;
	color: #B85A2A;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-right: 4px;
}
/* Shown in place of the star rating wherever course_rating is 0 — quiet/
   neutral on purpose (not the accent color used for a real rating), so it
   reads as "no verdict yet" rather than competing with actual ratings. */
.ccp-unrated-badge {
	display: inline-block;
	font-size: 0.78em;
	font-weight: 600;
	color: #8A8A82;
	background: #F0EFE9;
	border-radius: 20px;
	padding: 2px 10px;
}

/* ==========================================================================
   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 #7A7368;
	color: #3F5D4E;
	background: #EEEEE6;
	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: #3F5D4E;
	color: #3F5D4E;
	background: #FFFFFF;
}
/* [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 #7A7368;
	background: transparent;
	color: #7A7368;
	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: #23261F;
	color: #23261F;
}
.ccp-skill-pill.is-active {
	background: #7A7368;
	border-color: #7A7368;
	color: #FFFFFF;
}

.course-tag-pill.is-active {
	background: #3F5D4E;
	border-color: #3F5D4E;
	color: #FFFFFF;
}

/* 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 #7A7368;
	background-color: #EEEEE6;
	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='%233F5D4E' 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: #3F5D4E;
	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: #3F5D4E;
	background-color: #FFFFFF;
}
.ccp-platform-sort-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.ccp-platform-sort-form label {
	color: #7A7368;
	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 #7A7368;
	background: #FFFFFF;
	color: #23261F;
	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: #eeeee6;
  letter-spacing: 2px;
}
.star-rating::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating);
  overflow: hidden;
  color: #b85a2a;
  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: #23261F;
}
.header-menu li a:hover,
.header-menu > li.current-menu-item a {
    color: #3F5D4E;
}
.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: #FFFFFF;
    border-radius: 16px;
    border-top: 3px solid #3F5D4E;
    box-shadow: 0 16px 40px rgba(35, 38, 31, 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: #EEEEE6;
    color: #3F5D4E;
}

/* 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: #EEEEE6;
}

/* 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: #3F5D4E;
    color: #FFFFFF;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.icon-btn.poka-search:hover {
    background-color: #2F4A3D;
    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: #EEEEE6;
    border-radius: 8px;
    color: #23261F;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 2px 10px rgba(35, 38, 31, 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: #3F5D4E;
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(35, 38, 31, 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: #EEEEE6;
}
.footer-section--copyright {
    border-top: 1px solid rgba(35, 38, 31, 0.12);
}

/* Course thumbnail treatment (added 2026-07-22) — platform cover art
   arrives in loud, off-palette colors (neon course covers, stock photos),
   so cards mute it into the site's warm tones: desaturation + a touch of
   sepia, plus a cream ::after veil (multiply blend) so whites print on
   the site's paper color. Full color eases back in when the card is
   hovered. Applies to every card using .ccp-related-card-media (Top
   Rated / filterable / Skills grids, related cards on reviews) and
   .ccp-featured-card-media (featured/AI band cards); platform logos are
   deliberately untouched.
   TO REVERT: delete everything from this comment down to the end of the
   last .ccp-featured-card-media::after hover rule below — thumbnails
   then render in their original full color. The two tuning dials are
   saturate(0.7) (lower = more muted) and the ::after opacity 0.22
   (higher = stronger cream veil). */
.ccp-related-card-media img,
.ccp-featured-card-media img {
	filter: saturate(0.7) sepia(0.12);
	transition: filter 0.25s ease;
}
.ccp-related-card-media::after,
.ccp-featured-card-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #F8EFE3;
	mix-blend-mode: multiply;
	opacity: 0.22;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.ccp-related-card:hover .ccp-related-card-media img,
.ccp-featured-card:hover .ccp-featured-card-media img {
	filter: none;
}
.ccp-related-card:hover .ccp-related-card-media::after,
.ccp-featured-card:hover .ccp-featured-card-media::after {
	opacity: 0;
}