/*
 * Inspire Hub — free advice section (parents/guardians, teachers/tutors,
 * headteachers/school leaders). Enqueued conditionally, only on Inspire Hub
 * pages, by Learnaroo_Inspire_Hub::enqueue_assets(). Reuses the theme's real
 * :root custom properties (style.css) rather than redefining the palette.
 */

.lh-ih-badge,
.lh-ih-tag,
.lh-ihgrid__type,
.lh-inspire-sidebar__cta-btn {
	font-family: var( --lh-font, 'Nunito', sans-serif );
}

/* ---------- Single article: audience badge, tag row, image credit ---------- */

.lh-ih-badge {
	display: inline-block;
	margin-bottom: .75rem;
	padding: 5px 12px;
	border-radius: var( --lwh-radius-pill, 999px );
	background: var( --lwh-purple-light, #F3E5F5 );
	color: var( --lwh-purple-dark, #4A148C );
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.lh-ih-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1rem 0 1.5rem;
}

.lh-ih-tag {
	padding: 4px 11px;
	border-radius: var( --lwh-radius-pill, 999px );
	background: var( --lwh-grey-light, #F3F4F6 );
	color: var( --lwh-ink-soft, #4A4A6A );
	font-size: .78rem;
	font-weight: 700;
	text-decoration: none;
}

.lh-ih-tag:hover {
	background: var( --lwh-purple-light, #F3E5F5 );
	color: var( --lwh-purple-dark, #4A148C );
}

.lh-ih-tag--sen {
	background: var( --lwh-coral-light, #FCE4EC );
	color: var( --lwh-coral-dark, #C2185B );
}

.lh-ih-figure {
	margin: 0 0 1.5rem;
}

.lh-ih-figure img {
	width: 100%;
	height: auto;
	border-radius: var( --lwh-radius, 16px );
	display: block;
}

.lh-ih-credit {
	margin: .5rem 0 0;
	font-size: .75rem;
	color: var( --lwh-grey, #6B7280 );
}

.lh-ih-credit a {
	color: inherit;
}

/* ---------- Layout: article + sidebar ---------- */

.lh-ih-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 2rem;
	max-width: var( --lwh-container, min( 95%, 1200px ) );
	margin: 0 auto;
	padding: 1.5rem 0;
}

@media ( min-width: 960px ) {
	.lh-ih-layout {
		grid-template-columns: minmax( 0, 1fr ) 320px;
		align-items: start;
	}
}

/* ---------- Audience archive grid (category.php) ---------- */

.lh-ihgrid {
	max-width: var( --lwh-container, min( 95%, 1200px ) );
	margin: 0 auto;
	padding: 0 0 3.5rem;
	color: var( --lwh-ink, #1A1A2E );
}

.lh-ihgrid__hero {
	padding: 2.5rem 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
	color: #fff;
	background: var( --lwh-grad-hero, linear-gradient( 135deg, #4A148C 0%, #6B2FA0 45%, #B5179E 80%, #E91E63 100% ) );
	border-radius: var( --lwh-radius, 16px );
}

.lh-ihgrid__hero h1 {
	margin: 0 0 .5rem;
	font-family: var( --lh-display, 'Fredoka', sans-serif );
	font-size: clamp( 1.8rem, 4.5vw, 2.6rem );
	color: #fff;
}

.lh-ihgrid__hero p {
	margin: 0 auto;
	max-width: 640px;
	color: rgba( 255, 255, 255, .92 );
	font-weight: 600;
}

.lh-ihgrid__tagchips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.75rem;
}

.lh-ihgrid__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1.25rem;
}

@media ( max-width: 960px ) {
	.lh-ihgrid__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 640px ) {
	.lh-ihgrid__grid { grid-template-columns: 1fr; }
}

.lh-ihgrid__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1.5px solid var( --lwh-border, #E5E7EB );
	border-radius: var( --lwh-radius, 16px );
	background: #fff;
	box-shadow: var( --lwh-shadow-sm, 0 1px 3px rgba( 26,26,46,.06 ) );
	text-decoration: none;
	color: inherit;
	transition: transform .16s, box-shadow .16s;
}

.lh-ihgrid__card:hover {
	transform: translateY( -3px );
	box-shadow: var( --lwh-shadow-hover, 0 8px 24px rgba( 233,30,99,.15 ) );
}

.lh-ihgrid__card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.lh-ihgrid__card-body {
	padding: 1.1rem 1.25rem 1.35rem;
}

.lh-ihgrid__type {
	display: inline-block;
	margin-bottom: .5rem;
	padding: 3px 10px;
	border-radius: var( --lwh-radius-pill, 999px );
	background: var( --lwh-grey-light, #F3F4F6 );
	color: var( --lwh-purple-dark, #4A148C );
	font-size: .7rem;
	font-weight: 800;
}

.lh-ihgrid__card h2 {
	margin: 0 0 .4rem;
	font-family: var( --lh-display, 'Fredoka', sans-serif );
	font-size: 1.1rem;
	line-height: 1.3;
	color: var( --lwh-ink, #1A1A2E );
}

.lh-ihgrid__card p {
	margin: 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var( --lwh-grey, #6B7280 );
}

.lh-ihgrid__empty {
	padding: 2.5rem;
	text-align: center;
	border: 1.5px solid var( --lwh-border, #E5E7EB );
	border-radius: var( --lwh-radius, 16px );
	background: #fff;
}

/* ---------- Sidebar (template-parts/inspire-hub-sidebar.php) ---------- */

.lh-inspire-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.lh-inspire-sidebar__search {
	display: flex;
	gap: 8px;
}

.lh-inspire-sidebar__search-input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1.5px solid var( --lwh-border, #E5E7EB );
	border-radius: var( --lwh-radius-sm, 10px );
	font-size: .92rem;
}

.lh-inspire-sidebar__search-btn {
	padding: 10px 14px;
	border: none;
	border-radius: var( --lwh-radius-sm, 10px );
	background: var( --lwh-purple, #6B2FA0 );
	color: #fff;
	cursor: pointer;
}

.lh-inspire-sidebar__filterdrop {
	border: 1.5px solid var( --lwh-border, #E5E7EB );
	border-radius: var( --lwh-radius-sm, 10px );
	padding: 0;
	overflow: hidden;
}

.lh-inspire-sidebar__filterdrop summary {
	padding: 12px 14px;
	font-weight: 800;
	font-size: .88rem;
	color: var( --lwh-ink, #1A1A2E );
	cursor: pointer;
	list-style: none;
}

.lh-inspire-sidebar__filterdrop summary::-webkit-details-marker { display: none; }

.lh-inspire-sidebar__filterdrop-body {
	padding: 0 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lh-inspire-sidebar__filterdrop-body a {
	font-size: .85rem;
	color: var( --lwh-grey, #6B7280 );
	text-decoration: none;
}

.lh-inspire-sidebar__filterdrop-body a:hover,
.lh-inspire-sidebar__filterdrop-body a.is-active {
	color: var( --lwh-purple-dark, #4A148C );
	font-weight: 700;
}

.lh-inspire-sidebar__cta {
	padding: 1.25rem;
	border-radius: var( --lwh-radius, 16px );
	text-align: center;
}

.lh-inspire-sidebar__cta--guest {
	background: var( --lwh-purple-light, #F3E5F5 );
	color: var( --lwh-purple-dark, #4A148C );
}

.lh-inspire-sidebar__cta--user {
	background: var( --lwh-grey-light, #F3F4F6 );
	color: var( --lwh-ink, #1A1A2E );
}

.lh-inspire-sidebar__cta-title {
	display: block;
	margin-bottom: .35rem;
	font-family: var( --lh-display, 'Fredoka', sans-serif );
	font-weight: 700;
}

.lh-inspire-sidebar__cta-text {
	margin: 0 0 .85rem;
	font-size: .85rem;
	line-height: 1.5;
}

@media ( prefers-reduced-motion: reduce ) {
	.lh-ihgrid__card { transition: none; }
}

/* ---------- Landing page (page-inspire-hub.php) ---------- */

.lh-ih-landing {
	max-width: var( --lwh-container, min( 95%, 1200px ) );
	margin: 0 auto;
	padding: 0 0 3.5rem;
}

.lh-ih-landing__hero {
	padding: 3rem 1.5rem;
	margin-bottom: 2rem;
	text-align: center;
	color: #fff;
	background: var( --lwh-grad-hero, linear-gradient( 135deg, #4A148C 0%, #6B2FA0 45%, #B5179E 80%, #E91E63 100% ) );
	border-radius: var( --lwh-radius, 16px );
}

.lh-ih-landing__hero h1 {
	margin: 0 0 .5rem;
	font-family: var( --lh-display, 'Fredoka', sans-serif );
	font-size: clamp( 2rem, 5vw, 3rem );
	color: #fff;
}

.lh-ih-landing__hero > p {
	margin: 0 auto 1.5rem;
	max-width: 640px;
	color: rgba( 255, 255, 255, .92 );
	font-weight: 600;
}

.lh-ih-landing__search {
	display: flex;
	gap: 8px;
	max-width: 560px;
	margin: 0 auto;
}

.lh-ih-landing__search-input {
	flex: 1;
	min-width: 0;
	padding: 13px 16px;
	border: none;
	border-radius: var( --lwh-radius-sm, 10px );
	font-size: 1rem;
}

.lh-ih-landing__search-btn {
	padding: 13px 20px;
	border: none;
	border-radius: var( --lwh-radius-sm, 10px );
	background: var( --lwh-yellow, #FFD700 );
	color: var( --lwh-purple-dark, #4A148C );
	font-weight: 800;
	cursor: pointer;
}

.lh-ih-landing__panels {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1.25rem;
	margin: 2rem 0;
}

@media ( max-width: 900px ) {
	.lh-ih-landing__panels { grid-template-columns: 1fr; }
}

.lh-ih-landing__panel {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1.5px solid var( --lwh-border, #E5E7EB );
	border-radius: var( --lwh-radius, 16px );
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: transform .16s, box-shadow .16s;
}

.lh-ih-landing__panel:hover {
	transform: translateY( -3px );
	box-shadow: var( --lwh-shadow-hover, 0 8px 24px rgba( 233,30,99,.15 ) );
}

.lh-ih-landing__panel h2 {
	margin: 0 0 .5rem;
	font-family: var( --lh-display, 'Fredoka', sans-serif );
	font-size: 1.25rem;
	color: var( --lwh-ink, #1A1A2E );
}

.lh-ih-landing__panel p {
	margin: 0 0 1rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var( --lwh-grey, #6B7280 );
}

.lh-ih-landing__panel-count {
	margin-top: auto;
	font-weight: 800;
	font-size: .85rem;
	color: var( --lwh-purple-dark, #4A148C );
}

.lh-ih-landing__section-title {
	margin: 2.5rem 0 1.25rem;
	font-family: var( --lh-display, 'Fredoka', sans-serif );
	font-size: 1.4rem;
	color: var( --lwh-ink, #1A1A2E );
}

/* ---------- Breadcrumbs / "go back" wayfinding (single.php, category.php, search.php) ---------- */

.lh-ih-crumbs {
	max-width: var( --lwh-container, min( 95%, 1200px ) );
	margin: 0 auto;
	padding: 1rem 0 0;
	font-size: .85rem;
	color: var( --lwh-grey, #6B7280 );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}

.lh-ih-crumbs a {
	color: var( --lwh-purple-dark, #4A148C );
	text-decoration: none;
	font-weight: 700;
}

.lh-ih-crumbs a:hover {
	text-decoration: underline;
}

.lh-ih-crumbs__sep {
	color: var( --lwh-border, #E5E7EB );
}

.lh-ih-crumbs__current {
	color: var( --lwh-grey, #6B7280 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 40ch;
}

/* ---------- Sticky sidebar (desktop) / reordered-first (mobile) ---------- */
/* Matches the exact sticky convention already used by the resource catalogue
   sidebar (.lh-catalogue__sidebar) elsewhere in this theme, for consistency. */

@media ( min-width: 960px ) {
	.lh-inspire-sidebar {
		position: sticky;
		top: 1rem;
		max-height: calc( 100vh - 2rem );
		max-height: calc( 100dvh - 2rem );
		overflow-y: auto;
	}
}

@media ( max-width: 959px ) {
	/* Search + audience filters surface above the article on mobile, so a
	   reader doesn't have to scroll past 2,000+ words to find them — the
	   sidebar stays after the article in the underlying markup (so screen
	   readers meet the content first), only its visual position moves. */
	.lh-inspire-sidebar {
		order: -1;
	}
}

/* ---------- Search results (search.php) ---------- */

.lh-ih-search-hero {
	padding: 2.5rem 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
	color: #fff;
	background: var( --lwh-grad-hero, linear-gradient( 135deg, #4A148C 0%, #6B2FA0 45%, #B5179E 80%, #E91E63 100% ) );
	border-radius: var( --lwh-radius, 16px );
}

.lh-ih-search-hero h1 {
	margin: 0 0 1.25rem;
	font-family: var( --lh-display, 'Fredoka', sans-serif );
	font-size: clamp( 1.6rem, 4vw, 2.4rem );
	color: #fff;
}

.lh-ih-search-hero .lh-ih-landing__search {
	margin: 0 auto;
}

.lh-ih-search-hero .lh-ih-landing__search-input {
	color: var( --lwh-ink, #1A1A2E );
}