/* ==========================================================================
   Articulet Child Theme — Custom Styles
   ========================================================================== */

/* ---------- Sitewide Layout Override ---------- */
/*
 * The parent Uppercase theme uses a 2-column CSS grid on .cs-main-content:
 *   Column 1: cs-page-header-area (sticky left panel, 100vh, contains nav)
 *   Column 2: page content
 *
 * We collapse this sitewide into a single-column layout where the nav sits
 * on top and content flows below. This applies to ALL pages.
 */

/* Collapse the 2-column grid into a single column — ALL pages */
.cs-main-content {
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Tame the page header area sitewide: no sticky, no full-height */
.cs-page-header-area {
	position: relative !important;
	height: auto !important;
	min-height: 0 !important;
	width: 100% !important;
	align-self: stretch !important;
}

.cs-page-header-overlay {
	height: auto !important;
	min-height: 0 !important;
}

.cs-page-header-item {
	height: auto !important;
	min-height: 0 !important;
}

.cs-site-primary {
	max-width: 100% !important;
}

.cs-site-content {
	max-width: 100% !important;
}

/* Single posts: constrain content width for readability */
body.single-post .cs-content-area {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Homepage-specific overrides ---------- */

/* Hide the default page title/header on homepage (we have our own hero) */
body.home .cs-page-header-inner,
body.home .cs-page__header,
body.home .cs-entry-header {
	display: none !important;
}

/* Remove padding on fullwidth template pages */
body.home .cs-main-content,
body.page-template-template-about .cs-main-content,
body.page-template-template-articles .cs-main-content,
body.page-template-template-stories .cs-main-content,
body.page-template-template-meet .cs-main-content,
body.page-template-template-courses .cs-main-content,
body.post-type-archive-video .cs-main-content,
body.single-video .cs-main-content {
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide default page title on custom templates (they render their own) */
body.page-template-template-about .cs-page-header-inner,
body.page-template-template-articles .cs-page-header-inner,
body.page-template-template-stories .cs-page-header-inner,
body.page-template-template-meet .cs-page-header-inner,
body.page-template-template-courses .cs-page-header-inner,
body.post-type-archive-video .cs-page-header-inner {
	display: none !important;
}

/* ---------- CSS Variables ---------- */
:root {
	--articulet-primary: #2563eb;
	--articulet-primary-hover: #1d4ed8;
	--articulet-text: #1a1a2e;
	--articulet-text-muted: #64748b;
	--articulet-bg: #ffffff;
	--articulet-bg-alt: #f8fafc;
	--articulet-bg-dark: #0f172a;
	--articulet-border: #e2e8f0;
	--articulet-radius: 8px;
	--articulet-max-width: 1200px;
	--articulet-section-pad: 80px;
}

[data-scheme="dark"] {
	--articulet-primary: #60a5fa;
	--articulet-primary-hover: #93c5fd;
	--articulet-text: #e2e8f0;
	--articulet-text-muted: #94a3b8;
	--articulet-bg: #0f172a;
	--articulet-bg-alt: #1e293b;
	--articulet-bg-dark: #020617;
	--articulet-border: #334155;
}

/* ---------- Buttons ---------- */
.articulet-btn {
	display: inline-block;
	padding: 12px 28px;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--articulet-radius);
	transition: all 0.2s ease;
	cursor: pointer;
	border: 2px solid transparent;
}

.articulet-btn-primary {
	background: var(--articulet-primary);
	color: #fff;
	border-color: var(--articulet-primary);
}

.articulet-btn-primary:hover {
	background: var(--articulet-primary-hover);
	border-color: var(--articulet-primary-hover);
	color: #fff;
}

.articulet-btn-secondary {
	background: transparent;
	color: var(--articulet-text);
	border-color: var(--articulet-border);
}

.articulet-btn-secondary:hover {
	border-color: var(--articulet-primary);
	color: var(--articulet-primary);
}

.articulet-btn-outline {
	background: transparent;
	color: var(--articulet-primary);
	border-color: var(--articulet-primary);
}

.articulet-btn-outline:hover {
	background: var(--articulet-primary);
	color: #fff;
}

.articulet-btn-large {
	padding: 16px 40px;
	font-size: 1.1rem;
}

/* ---------- Hero ---------- */
.articulet-hero {
	text-align: center;
	padding: 100px 24px 80px;
	background: var(--articulet-bg-alt);
}

.articulet-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.articulet-hero__heading {
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	font-weight: 800;
	margin: 0 0 16px;
	color: var(--articulet-text);
	line-height: 1.15;
}

.articulet-hero__subheading {
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	color: var(--articulet-text-muted);
	margin: 0 0 32px;
	line-height: 1.6;
}

.articulet-hero__ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Pathways ---------- */
.articulet-pathways {
	padding: 48px 24px;
	background: var(--articulet-bg);
}

.articulet-pathways__inner {
	max-width: var(--articulet-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.articulet-pathway {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 16px;
	border: 1px solid var(--articulet-border);
	border-radius: var(--articulet-radius);
	text-decoration: none;
	color: var(--articulet-text);
	transition: all 0.2s ease;
}

.articulet-pathway:hover {
	border-color: var(--articulet-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.articulet-pathway__icon {
	font-size: 2rem;
}

.articulet-pathway__label {
	font-size: 1rem;
	font-weight: 600;
}

/* ---------- Sections ---------- */
.articulet-section {
	padding: var(--articulet-section-pad) 24px;
}

.articulet-section__inner {
	max-width: var(--articulet-max-width);
	margin: 0 auto;
}

.articulet-section__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 32px;
}

.articulet-section__header h2 {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0;
	color: var(--articulet-text);
}

.articulet-section__more {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--articulet-primary);
	text-decoration: none;
}

.articulet-section__more:hover {
	text-decoration: underline;
}

.articulet-section--articles {
	background: var(--articulet-bg);
}

.articulet-section--stories {
	background: var(--articulet-bg-alt);
}

.articulet-section--videos {
	background: var(--articulet-bg);
}

.articulet-section--about {
	background: var(--articulet-bg-alt);
}

.articulet-section--work {
	text-align: center;
	background: var(--articulet-bg);
}

.articulet-section--work h2 {
	margin-bottom: 12px;
}

.articulet-section--work p {
	max-width: 600px;
	margin: 0 auto 24px;
	color: var(--articulet-text-muted);
}

/* ---------- Card Grid ---------- */
.articulet-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.articulet-card-grid--videos {
	grid-template-columns: repeat(3, 1fr);
}

.articulet-card {
	background: var(--articulet-bg);
	border: 1px solid var(--articulet-border);
	border-radius: var(--articulet-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.articulet-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.articulet-card__thumb {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.articulet-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.articulet-card:hover .articulet-card__thumb img {
	transform: scale(1.03);
}

.articulet-card__duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 500;
}

.articulet-card__body {
	padding: 20px;
}

.articulet-card__category {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--articulet-primary);
	margin-bottom: 8px;
}

.articulet-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.35;
}

.articulet-card__title a {
	color: var(--articulet-text);
	text-decoration: none;
}

.articulet-card__title a:hover {
	color: var(--articulet-primary);
}

.articulet-card__excerpt {
	font-size: 0.9rem;
	color: var(--articulet-text-muted);
	margin: 0 0 12px;
	line-height: 1.55;
}

.articulet-card__date {
	font-size: 0.8rem;
	color: var(--articulet-text-muted);
}

.articulet-card__cta {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--articulet-primary);
	text-decoration: none;
	margin-top: 8px;
}

.articulet-card__cta:hover {
	text-decoration: underline;
}

/* ---------- About Block (Homepage) ---------- */
.articulet-about-block {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.articulet-about-block__text {
	flex: 1;
}

.articulet-about-block__text h2 {
	margin-top: 0;
}

.articulet-about-block__text p {
	color: var(--articulet-text-muted);
	line-height: 1.7;
	margin-bottom: 20px;
}

.articulet-about-block__points {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.articulet-about-block__points li {
	padding: 6px 0 6px 20px;
	position: relative;
	color: var(--articulet-text);
}

.articulet-about-block__points li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--articulet-primary);
	font-weight: 700;
}

/* ---------- CTA Band ---------- */
.articulet-cta-band {
	padding: 60px 24px;
	background: var(--articulet-bg-dark);
	text-align: center;
}

.articulet-cta-band__inner {
	max-width: var(--articulet-max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.articulet-cta-band__social {
	display: flex;
	gap: 16px;
	margin-top: 8px;
}

.articulet-cta-band__social a {
	color: #94a3b8;
	text-decoration: none;
	font-size: 0.9rem;
}

.articulet-cta-band__social a:hover {
	color: #fff;
}

/* ---------- Footer ---------- */
.articulet-footer {
	padding: 48px 24px 32px;
	background: var(--articulet-bg-alt);
	border-top: 1px solid var(--articulet-border);
}

.articulet-footer__inner {
	max-width: var(--articulet-max-width);
	margin: 0 auto;
	text-align: center;
}

.articulet-footer__menu {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
}

.articulet-footer__menu li a {
	color: var(--articulet-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
}

.articulet-footer__menu li a:hover {
	color: var(--articulet-primary);
}

.articulet-footer__social {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 20px;
}

.articulet-footer__social-link {
	color: var(--articulet-text-muted);
	text-decoration: none;
	font-size: 0.85rem;
}

.articulet-footer__social-link:hover {
	color: var(--articulet-primary);
}

.articulet-footer__copy p {
	color: var(--articulet-text-muted);
	font-size: 0.8rem;
	margin: 0;
}

/* ---------- Page Templates ---------- */
.articulet-page {
	padding: var(--articulet-section-pad) 24px;
}

.articulet-page__inner {
	max-width: 900px;
	margin: 0 auto;
}

.articulet-page--archive .articulet-page__inner {
	max-width: var(--articulet-max-width);
}

.articulet-page__header {
	margin-bottom: 48px;
}

.articulet-page__title {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	font-weight: 800;
	margin: 0 0 12px;
	color: var(--articulet-text);
}

.articulet-page__description {
	font-size: 1.1rem;
	color: var(--articulet-text-muted);
	margin: 0;
}

.articulet-page__content {
	margin-bottom: 48px;
}

.articulet-page__links h3 {
	margin-bottom: 12px;
}

.articulet-page__links ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.articulet-page__links ul li a {
	color: var(--articulet-primary);
	text-decoration: none;
	font-weight: 500;
}

.articulet-page__links ul li a:hover {
	text-decoration: underline;
}

/* ---------- Meet Page ---------- */
.articulet-meet__booking {
	text-align: center;
	padding: 24px 0 40px;
}

.articulet-meet__fallback {
	padding: 32px;
	background: var(--articulet-bg-alt);
	border-radius: var(--articulet-radius);
}

.articulet-meet__section-heading {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 48px 0 16px;
	color: var(--articulet-text);
}

/* Services grid */
.articulet-meet__services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.articulet-meet__service {
	padding: 20px 22px;
	background: var(--articulet-bg-alt);
	border: 1px solid var(--articulet-border);
	border-radius: var(--articulet-radius);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.articulet-meet__service:hover {
	border-color: var(--articulet-primary);
	transform: translateY(-2px);
}

.articulet-meet__service h3 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--articulet-text);
}

.articulet-meet__service p {
	font-size: 0.95rem;
	color: var(--articulet-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* Contact form */
.articulet-meet__contact {
	max-width: 640px;
	margin: 16px auto 64px;
	padding: 32px;
	background: var(--articulet-bg-alt);
	border: 1px solid var(--articulet-border);
	border-radius: var(--articulet-radius);
}

.articulet-meet__contact-intro {
	color: var(--articulet-text-muted);
	margin: 0 0 20px;
}

.articulet-meet__form label {
	display: block;
	margin-bottom: 14px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--articulet-text);
}

.articulet-meet__form label > span {
	display: block;
	margin-bottom: 6px;
}

.articulet-meet__form input[type="text"],
.articulet-meet__form input[type="email"],
.articulet-meet__form textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	color: var(--articulet-text);
	border: 1px solid var(--articulet-border);
	border-radius: var(--articulet-radius);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.articulet-meet__form input:focus,
.articulet-meet__form textarea:focus {
	outline: none;
	border-color: var(--articulet-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.articulet-meet__form textarea {
	resize: vertical;
	min-height: 120px;
}

.articulet-meet__form-row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.articulet-meet__form-row--two > label {
	margin-bottom: 14px;
}

@media (max-width: 600px) {
	.articulet-meet__form-row--two {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.articulet-meet__form button[type="submit"] {
	margin-top: 8px;
	cursor: pointer;
}

/* Honeypot — visually hidden but kept in DOM for bots */
.articulet-meet__honeypot {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.articulet-meet__form-success {
	padding: 16px 18px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
	border-radius: var(--articulet-radius);
	font-size: 0.95rem;
}

.articulet-meet__form-error {
	padding: 12px 14px;
	margin-bottom: 14px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	border-radius: var(--articulet-radius);
	font-size: 0.9rem;
}

/* ---------- Courses Catalog ---------- */
.articulet-courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 24px;
	margin-bottom: 48px;
}

.articulet-course-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 28px 24px;
	background: var(--articulet-bg);
	border: 1px solid var(--articulet-border);
	border-radius: var(--articulet-radius);
	text-decoration: none;
	color: var(--articulet-text);
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.articulet-course-card:hover {
	border-color: var(--articulet-primary);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.articulet-course-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.articulet-course-card__tag {
	display: inline-block;
	padding: 3px 10px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #065f46;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 999px;
}

.articulet-course-card__meta {
	font-size: 0.85rem;
	color: var(--articulet-text-muted);
}

.articulet-course-card__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 4px 0 0;
	color: var(--articulet-text);
	line-height: 1.2;
}

.articulet-course-card__tagline {
	font-size: 1rem;
	font-weight: 500;
	color: var(--articulet-text);
	margin: 0;
	line-height: 1.4;
}

.articulet-course-card__subtitle {
	font-size: 0.9rem;
	color: var(--articulet-primary);
	font-weight: 500;
	margin: 0;
}

.articulet-course-card__desc {
	font-size: 0.95rem;
	color: var(--articulet-text-muted);
	margin: 6px 0 12px;
	line-height: 1.55;
}

.articulet-course-card__cta {
	margin-top: auto;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--articulet-primary);
}

.articulet-courses-soon {
	margin: 12px 0 64px;
	color: var(--articulet-text-muted);
	font-size: 0.95rem;
	font-style: italic;
}

/* ---------- Single Video ---------- */
.articulet-video__player {
	margin-bottom: 32px;
}

.articulet-video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--articulet-radius);
}

.articulet-video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.articulet-video__duration {
	display: inline-block;
	font-size: 0.9rem;
	color: var(--articulet-text-muted);
	margin-top: 4px;
}

.articulet-video__cta {
	margin: 32px 0;
	text-align: center;
}

.articulet-video__nav {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--articulet-border);
}

.articulet-video__nav a {
	color: var(--articulet-primary);
	text-decoration: none;
	font-weight: 500;
}

.articulet-video__nav a:hover {
	text-decoration: underline;
}

/* ---------- Pagination ---------- */
.articulet-pagination {
	margin-top: 48px;
	text-align: center;
}

.articulet-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 4px;
	border: 1px solid var(--articulet-border);
	border-radius: 4px;
	color: var(--articulet-text);
	text-decoration: none;
	font-size: 0.9rem;
}

.articulet-pagination .page-numbers.current {
	background: var(--articulet-primary);
	color: #fff;
	border-color: var(--articulet-primary);
}

.articulet-pagination .page-numbers:hover:not(.current) {
	border-color: var(--articulet-primary);
}

.articulet-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--articulet-text-muted);
	font-size: 1.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.articulet-pathways__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.articulet-card-grid {
		grid-template-columns: 1fr;
	}

	.articulet-card-grid--videos {
		grid-template-columns: 1fr;
	}

	.articulet-hero {
		padding: 64px 20px 48px;
	}

	:root {
		--articulet-section-pad: 48px;
	}

	.articulet-section__header {
		flex-direction: column;
		gap: 8px;
	}

	.articulet-about-block {
		flex-direction: column;
	}

	.articulet-footer__menu {
		flex-direction: column;
		gap: 12px;
	}
}

@media (max-width: 600px) {
	body.home {
		overflow-x: hidden;
	}

	body.home .cs-site,
	body.home .cs-site-inner,
	body.home .cs-site-primary,
	body.home .cs-site-content,
	body.home .cs-main-content,
	.articulet-homepage {
		min-width: 0 !important;
		max-width: 100vw !important;
		overflow-x: hidden;
	}

	.articulet-hero,
	.articulet-pathways,
	.articulet-section,
	.articulet-about-strip,
	.articulet-cta-strip {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.articulet-hero {
		padding: 64px 20px 48px;
	}

	.articulet-hero__inner,
	.articulet-pathways__inner,
	.articulet-section__inner,
	.articulet-about-strip__inner,
	.articulet-cta-strip__inner {
		width: 350px !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.articulet-hero__heading {
		font-size: 1.8rem;
		line-height: 1.18;
		overflow-wrap: normal;
	}

	.articulet-hero__subheading {
		font-size: 1rem;
	}

	.articulet-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.articulet-hero__ctas .articulet-btn {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
		text-align: center;
		white-space: normal;
	}

	.articulet-pathways {
		padding: 40px 20px;
	}

	.articulet-pathways__inner {
		gap: 14px;
	}

	.articulet-pathway {
		min-width: 0;
		padding: 28px 10px;
	}
}

@media (max-width: 360px) {
	.articulet-pathways__inner {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.articulet-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   Inline header navigation (added 2026-04-27)
   Surfaces primary menu inline on desktop instead of behind
   the slide-out MENU toggle. Mobile keeps the drawer.
   ============================================================ */
@media (min-width: 1024px) {
	.cs-header-primary .cs-header__menu-toggle { display: none !important; }

	.articulet-inline-menu {
		display: flex;
		align-items: center;
		margin-right: 24px;
	}

	.articulet-inline-menu ul {
		display: flex;
		align-items: center;
		gap: 28px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.articulet-inline-menu li { position: relative; list-style: none; }

	.articulet-inline-menu > ul > li > a {
		text-decoration: none;
		text-transform: uppercase;
		font-size: 13px;
		letter-spacing: 0.04em;
		font-weight: 500;
		color: #1a1a1a;
		padding: 6px 0;
		transition: color .15s ease;
		white-space: nowrap;
	}

	.articulet-inline-menu > ul > li > a:hover,
	.articulet-inline-menu > ul > li.current-menu-item > a,
	.articulet-inline-menu > ul > li.menu-item-has-children:hover > a {
		color: #2541d2;
	}

	/* Dropdown caret */
	.articulet-inline-menu .menu-item-has-children > a::after {
		content: " \25BE";
		font-size: 0.75em;
		opacity: 0.6;
		margin-left: 4px;
	}

	/* Submenu */
	.articulet-inline-menu li ul {
		position: absolute;
		top: 100%;
		left: 0;
		background: #fff;
		border: 1px solid #e8e8e8;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
		min-width: 260px;
		padding: 8px 0;
		flex-direction: column;
		gap: 0;
		opacity: 0;
		pointer-events: none;
		transform: translateY(4px);
		transition: opacity .15s ease, transform .15s ease;
		z-index: 100;
	}

	.articulet-inline-menu li:hover > ul,
	.articulet-inline-menu li:focus-within > ul {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.articulet-inline-menu li ul li { width: 100%; }

	.articulet-inline-menu li ul a {
		display: block;
		padding: 8px 18px;
		text-transform: none;
		letter-spacing: 0;
		font-size: 14px;
		font-weight: 400;
		color: #1a1a1a;
		text-decoration: none;
	}

	.articulet-inline-menu li ul a:hover { background: #f6f7fb; color: #2541d2; }
}

@media (max-width: 1023px) {
	.articulet-inline-menu { display: none; }
}

/* === Header refinements (added 2026-04-27) === */
@media (min-width: 1024px) {
	/* Center-align the inline menu within the header */
	.cs-header-primary .cs-header__inner-desktop { position: relative; }
	.articulet-inline-menu {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
	}

	/* Tagline beneath the logo */
	.cs-logo .cs-header__logo {
		display: inline-block;
		line-height: 1.1;
	}
	.cs-logo .cs-header__logo::after {
		content: "Suchayan's arena";
		display: block;
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		font-weight: 400;
		color: #888;
		margin-top: 4px;
	}
}

/* === Responsive override (added 2026-04-27, clarification) ===
   Show inline menu starting at tablet width (768px+), with adaptive gaps.
   Drawer remains the fallback below 768px. */
@media (max-width: 767px) {
	.articulet-inline-menu { display: none !important; }
	/* MENU toggle remains visible on mobile (let drawer take over) */
	.cs-header-primary .cs-header__menu-toggle { display: flex !important; }
}

@media (min-width: 768px) {
	.cs-header-primary .cs-header__menu-toggle { display: none !important; }
	.articulet-inline-menu { display: flex !important; }
}

/* Tighter gap and smaller text on tablet/small-desktop so the centered nav fits */
@media (min-width: 768px) and (max-width: 1199px) {
	.articulet-inline-menu ul { gap: 18px !important; }
	.articulet-inline-menu > ul > li > a {
		font-size: 12px !important;
		letter-spacing: 0.03em !important;
	}
	/* On narrow widths, hide the social-icons + search wrapper so center nav has room */
	@media (max-width: 991px) {
		.cs-header-primary .cs-navbar-social-links,
		.cs-header-primary .cs-search { display: none !important; }
	}
}

/* === Override: center menu relative to FULL viewport (added 2026-04-27) === */
@media (min-width: 768px) {
	/* Use the outer header (full-width) as positioning context */
	.cs-header-primary { position: relative !important; }
	.cs-header-primary .cs-header__inner-desktop { position: static !important; }
	.articulet-inline-menu {
		left: 50vw !important;
	}
}

/* === Override v2: clean viewport-centered menu (added 2026-04-27) ===
   Now the menu is injected as a direct child of .cs-header-primary
   (full-viewport-width), so simple left:50% centers it on viewport. */
@media (min-width: 768px) {
	.cs-header-primary { position: relative !important; }
	/* Restore inner-desktop default flex layout */
	.cs-header-primary .cs-header__inner-desktop { position: static !important; }

	.articulet-inline-menu {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		z-index: 5;
	}
}

/* === FINAL Override v3: flexbox-based center column (added 2026-04-27) ===
   Menu is now injected as a middle child between cs-col-left and cs-col-right.
   Use flex:1 + justify-content:center for natural centering — no absolute positioning. */
@media (min-width: 768px) {
	.cs-header-primary { position: static !important; }
	.cs-header-primary .cs-header__inner-desktop {
		position: static !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.cs-header-primary .cs-header__inner-desktop > .cs-col-left,
	.cs-header-primary .cs-header__inner-desktop > .cs-col-right {
		flex: 0 0 auto !important;
	}
	.articulet-inline-menu {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		flex: 1 1 auto !important;
		display: flex !important;
		justify-content: center !important;
		margin: 0 24px !important;
	}
}

/* === Final: stretch header to full viewport so menu centers on viewport === */
@media (min-width: 768px) {
	.cs-header-primary {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* === FINAL: extend menu styles down to 768px (added 2026-04-27) === */
@media (min-width: 768px) {
	.articulet-inline-menu > ul {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 24px !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.articulet-inline-menu > ul > li {
		list-style: none !important;
		position: relative !important;
		margin: 0 !important;
	}
	.articulet-inline-menu > ul > li > a {
		text-decoration: none !important;
		text-transform: uppercase !important;
		font-size: 13px !important;
		letter-spacing: 0.04em !important;
		font-weight: 500 !important;
		color: #1a1a1a !important;
		padding: 6px 0 !important;
		white-space: nowrap !important;
	}
	.articulet-inline-menu > ul > li > a:hover,
	.articulet-inline-menu > ul > li.current-menu-item > a {
		color: #2541d2 !important;
	}
	.articulet-inline-menu .menu-item-has-children > a::after {
		content: " \25BE";
		font-size: 0.75em;
		opacity: 0.6;
		margin-left: 4px;
	}

	/* Submenu — hidden by default, shown on hover/focus */
	.articulet-inline-menu li ul {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		background: #fff !important;
		border: 1px solid #e8e8e8 !important;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
		min-width: 240px !important;
		padding: 8px 0 !important;
		margin: 0 !important;
		list-style: none !important;
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateY(4px) !important;
		transition: opacity .15s, transform .15s !important;
		z-index: 100 !important;
	}
	.articulet-inline-menu li:hover > ul,
	.articulet-inline-menu li:focus-within > ul {
		opacity: 1 !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}
	.articulet-inline-menu li ul li {
		width: 100% !important;
		list-style: none !important;
	}
	.articulet-inline-menu li ul a {
		display: block !important;
		padding: 8px 18px !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #1a1a1a !important;
		text-decoration: none !important;
		white-space: normal !important;
	}
	.articulet-inline-menu li ul a:hover {
		background: #f6f7fb !important;
		color: #2541d2 !important;
	}

	/* Tighter gap on tablet/small-desktop */
	@media (max-width: 1199px) {
		.articulet-inline-menu > ul { gap: 14px !important; }
		.articulet-inline-menu > ul > li > a { font-size: 11.5px !important; }
	}
}

/* === Refinements 2026-04-27 (round 2) ===
   1. Trim the empty gray banner above the header on home + archives
   2. Bump menu font size
   3. Hide the WhatsApp social icon (personal phone number)
   4. Update tagline text to "Suchayan Mitra's Arena"
*/

/* 1. Trim top padding on the page-header banner — applies sitewide
   (parent theme adds calc(var(--cs-header-height) + 3rem) of top padding
   for the sidebar layout we collapsed; we want a tight banner everywhere). */
.cs-page-header-item {
	padding-top: 24px !important;
	padding-bottom: 0 !important;
}

/* 3. Hide the WhatsApp icon (personal info) */
.pk-social-links-link[aria-label="WhatsApp"],
.pk-social-links-list-item:has(.pk-icon-whatsapp),
.cs-navbar-social-links li:has(a[href^="tel:"]) {
	display: none !important;
}

/* Override tagline text and font size */
@media (min-width: 768px) {
	/* 2. Bigger menu font */
	.articulet-inline-menu > ul > li > a {
		font-size: 15px !important;
		letter-spacing: 0.05em !important;
	}
	@media (max-width: 1199px) {
		.articulet-inline-menu > ul > li > a { font-size: 13px !important; }
	}
}

@media (min-width: 1024px) {
	/* 4. Update tagline beneath logo */
	.cs-logo .cs-header__logo::after {
		content: "Suchayan Mitra's Arena" !important;
		font-size: 12px !important;
	}
}

/* === Fix Topics dropdown clipping (added 2026-04-27 round 3) ===
   .cs-page-header-item has overflow:auto which was clipping the
   absolutely-positioned dropdown when it extended past the banner. */
.cs-page-header-item,
.cs-page-header-overlay,
.cs-page-header-area {
	overflow: visible !important;
}

/* Also raise the inline menu's stacking so the dropdown sits above page content */
.articulet-inline-menu { z-index: 50 !important; }
.articulet-inline-menu li ul { z-index: 1000 !important; }

/* === Menu refinements (added 2026-04-27 round 4) ===
   1. Right-anchor the dropdown so it never overflows the viewport
   2. Active-page highlight inside the dropdown
   3. Caret rotates 180° when the parent is hovered
*/
@media (min-width: 768px) {
	/* 1. Right-anchor: tuck dropdown under the Topics label */
	.articulet-inline-menu > ul > li.menu-item-has-children > ul {
		left: auto !important;
		right: 0 !important;
	}

	/* 2. Active-page highlight in dropdown items */
	.articulet-inline-menu li ul li.current-menu-item > a,
	.articulet-inline-menu li ul li.current-menu-parent > a,
	.articulet-inline-menu li ul li.current-category-ancestor > a {
		background: #f6f7fb !important;
		color: #2541d2 !important;
		font-weight: 500 !important;
	}

	/* 3. Animated caret — rotate when parent is hovered/focused */
	.articulet-inline-menu .menu-item-has-children > a::after {
		display: inline-block;
		transition: transform .2s ease;
		transform-origin: 50% 55%;
	}
	.articulet-inline-menu .menu-item-has-children:hover > a::after,
	.articulet-inline-menu .menu-item-has-children:focus-within > a::after {
		transform: rotate(180deg);
	}
}