/**
 * GluJoy / Scrumptious theme match for TOC + Key Moments.
 * Aligns with Montserrat labels, DM Serif headings, sharp corners, palette1–9.
 */

/* —— Tokens from theme —— */
.mak-article-body,
.mak-toc,
.mak-key-moments {
	--mak-gj-gold: var(--global-palette1, #daaf53);
	--mak-gj-teal: var(--global-palette2, #3d998e);
	--mak-gj-ink: var(--global-palette3, #343434);
	--mak-gj-body: var(--global-palette4, #484848);
	--mak-gj-muted: var(--global-palette5, #727272);
	--mak-gj-leaf: var(--global-palette6, #8eb44f);
	--mak-gj-cream: var(--global-palette7, #f6efdd);
	--mak-gj-soft: var(--global-palette8, #f7f6f5);
	--mak-gj-white: var(--global-palette9, #ffffff);
	--mak-gj-font-label: Montserrat, var(--global-body-font-family, sans-serif);
	--mak-gj-font-heading: "DM Serif Display", Georgia, serif;
}

/*
 * Guide layout:
 * - Desktop: floating left TOC widget + article content
 * - Theme right sidebar stays (has-sidebar)
 */
.entry-content .mak-article-body--toc,
.single-content .mak-article-body--toc,
.mak-article-body--toc {
	display: block;
	max-width: 100%;
	margin: 0;
}

.mak-article-body--toc > .mak-article__content,
.mak-article-body--toc > .entry-content-inner {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Left floating TOC column + content */
@media (min-width: 1100px) {
	body.gj-has-floating-toc .mak-article-body--toc,
	body.gj-guide-layout .mak-article-body--toc {
		display: grid !important;
		grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
		column-gap: 1.75rem;
		align-items: start;
	}

	/* Nudge content container slightly wider when TOC + right sidebar */
	body.gj-has-floating-toc.has-sidebar .content-container {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 22%) !important;
		column-gap: 1.75rem;
	}

	body.gj-has-floating-toc .gj-toc-widget {
		position: sticky;
		top: 1.25rem;
		align-self: start;
		z-index: 5;
		max-height: calc(100vh - 2rem);
		overflow: auto;
		scrollbar-width: thin;
	}

	/* When sticky header chrome exists, leave room */
	body.gj-has-floating-toc .gj-toc-widget {
		top: 1rem;
	}
}

/* Mobile / tablet: TOC collapses above content */
@media (max-width: 1099px) {
	.gj-toc-widget {
		margin: 0 0 1.5rem;
	}
}

/* —— Left TOC — simple / minimal (AR-clean) —— */
.gj-toc-widget {
	width: 100%;
}

.mak-toc {
	order: unset;
	position: relative !important;
	top: auto !important;
	width: 100%;
	margin: 0;
	align-self: stretch;
}

.mak-toc__card {
	background: #ffffff !important;
	border: 1px solid #e8e6e3 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	overflow: hidden;
}

.mak-toc__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 0;
	border-bottom: 1px solid #e8e6e3 !important;
	background: #ffffff !important;
	padding: 12px 14px !important;
	cursor: pointer;
	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #1a1a1a !important;
	text-align: left;
	line-height: 1.3;
}

.mak-toc__title {
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	color: #1a1a1a !important;
	text-transform: uppercase !important;
}

.mak-toc__caret {
	flex-shrink: 0;
	opacity: 0.45;
	color: #1a1a1a !important;
	transition: transform 0.15s ease;
}

.mak-toc.is-collapsed .mak-toc__caret {
	transform: rotate(-90deg);
}

.mak-toc__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 8px 0 !important;
	border-top: 0 !important;
	counter-reset: none;
	max-height: none !important;
	overflow: visible !important;
	background: #ffffff !important;
}

.mak-toc.is-collapsed .mak-toc__list,
.mak-toc.is-collapsed .mak-toc__top,
.mak-toc.is-collapsed .mak-toc__gpref {
	display: none;
}

.mak-toc__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mak-toc__item--h2 {
	counter-increment: none;
}

/* Plain text links — no bullets/counters */
.mak-toc__link {
	display: block !important;
	padding: 9px 14px 9px 12px !important;
	border: 0 !important;
	border-left: 3px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #5c5c5c !important;
	text-decoration: none !important;
	font-family: "Helvetica Neue", Helvetica, Arial, Montserrat, sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, font-weight 0.15s ease;
}

.mak-toc__item--h2 .mak-toc__link::before,
.mak-toc__item--h3 .mak-toc__link::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.mak-toc__item--h3 .mak-toc__link {
	padding-left: 12px !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #5c5c5c !important;
}

.mak-toc__link:hover,
.mak-toc__link:focus-visible {
	background: #faf9f7 !important;
	color: #1a1a1a !important;
	box-shadow: none !important;
	text-decoration: none !important;
	border-left-color: #cfcbc4 !important;
}

/*
 * Active / scrolled-to / clicked item — clear gold hit state
 * (class set by toc.js scrollspy + click)
 */
.mak-toc__link.is-active,
.mak-toc__item--h2 .mak-toc__link.is-active,
.mak-toc__item--h3 .mak-toc__link.is-active,
.entry-content .mak-toc a.mak-toc__link.is-active,
.single-content .mak-toc a.mak-toc__link.is-active {
	background: #faf4e6 !important; /* soft gold wash */
	color: #1a1a1a !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	border-left: 3px solid #daaf53 !important; /* GluJoy gold */
	text-decoration: none !important;
}

.mak-toc__item--h2 .mak-toc__link.is-active::before,
.mak-toc__item--h2 .mak-toc__link:hover::before,
.mak-toc__item--h3 .mak-toc__link.is-active::before {
	content: none !important;
	background: none !important;
}

.mak-toc__top {
	display: block !important;
	margin: 0 !important;
	padding: 10px 14px 12px !important;
	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: #757575 !important;
	text-decoration: none !important;
	background: #ffffff !important;
	border-top: 1px solid #e8e6e3 !important;
	width: 100%;
	box-sizing: border-box;
	box-shadow: none !important;
}

.mak-toc__top:hover {
	color: #1a1a1a !important;
	text-decoration: none !important;
	box-shadow: none !important;
	background: #faf9f7 !important;
}

/* Hide Google preferred CTA leftovers */
.mak-toc__gpref {
	display: none !important;
}

@media (max-width: 1023px) {
	.mak-toc.is-collapsed-mobile .mak-toc__list,
	.mak-toc.is-collapsed-mobile .mak-toc__top {
		display: none;
	}
	.mak-toc.is-collapsed-mobile .mak-toc__caret {
		transform: rotate(-90deg);
	}
}

/* —— Key Moments —— */
.mak-key-moments {
	--mak-km-accent: var(--mak-gj-teal);
	--mak-km-border: rgba(61, 153, 142, 0.28);
	--mak-km-title: var(--mak-gj-ink);
	--mak-km-text: var(--mak-gj-body);
	background: var(--mak-gj-white) !important;
	border: 1px solid rgba(52, 52, 52, 0.12) !important;
	border-top: 3px solid var(--mak-gj-teal) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 1.5rem 1.5rem 0.5rem !important;
	margin: 1.75rem 0 2rem !important;
}

.mak-key-moments__title {
	margin: 0 0 1rem !important;
	font-family: var(--mak-gj-font-heading) !important;
	font-size: 1.65rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	color: var(--mak-gj-ink) !important;
	line-height: 1.25 !important;
}

.mak-key-moments__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mak-key-moments__item {
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid rgba(52, 52, 52, 0.08) !important;
}

.mak-key-moments__item:first-child {
	border-top: 0 !important;
}

.mak-key-moments__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 2px !important;
	text-decoration: none !important;
	color: inherit !important;
	border-radius: 0 !important;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

a.mak-key-moments__row:hover {
	background: var(--mak-gj-cream) !important;
	box-shadow: none !important;
}

.mak-key-moments__num {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	border-radius: 0 !important; /* square markers like theme buttons */
	background: var(--mak-gj-teal) !important;
	color: var(--mak-gj-white) !important;
	font-family: var(--mak-gj-font-label) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 28px !important;
	text-align: center;
	letter-spacing: 0.04em;
}

.mak-key-moments__item-title {
	display: block;
	font-family: var(--mak-gj-font-label) !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: var(--mak-gj-ink) !important;
	line-height: 1.35 !important;
	letter-spacing: 0.02em;
}

.mak-key-moments__item-text {
	display: block;
	font-family: var(--mak-gj-font-label) !important;
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	color: var(--mak-gj-muted) !important;
	font-weight: 400 !important;
}

.mak-key-moments__arrow {
	color: var(--mak-gj-muted) !important;
}

a.mak-key-moments__row:hover .mak-key-moments__arrow {
	color: var(--mak-gj-gold) !important;
}

/* Heading scroll offset under fixed header */
.entry-content h2,
.entry-content h3,
.single-content h2,
.single-content h3 {
	scroll-margin-top: 110px;
}

/* Kill global content-link teal underline inside kit chrome */
.entry-content .mak-toc a,
.entry-content .mak-key-moments a,
.single-content .mak-toc a,
.single-content .mak-key-moments a {
	color: inherit !important;
	text-decoration: none !important;
	font-weight: inherit !important;
	text-decoration-thickness: initial !important;
}

@media (max-width: 600px) {
	.mak-key-moments {
		padding: 1.15rem 1rem 0.35rem !important;
	}
	.mak-toc__toggle {
		padding: 12px 14px !important;
	}
}

/* —— Right sidebar polish (guide layout) —— */
body.gj-guide-layout .primary-sidebar,
body.gj-has-floating-toc .primary-sidebar {
	font-family: Montserrat, sans-serif;
}

body.gj-guide-layout .primary-sidebar .widget,
body.gj-has-floating-toc .primary-sidebar .widget {
	background: #fff;
	border: 1px solid rgba(52, 52, 52, 0.1);
	padding: 1.15rem 1.15rem 1.25rem;
	margin-bottom: 1.25rem !important;
}

body.gj-guide-layout .primary-sidebar .widget-title,
body.gj-has-floating-toc .primary-sidebar h3,
body.gj-has-floating-toc .primary-sidebar .wp-block-heading {
	font-family: Montserrat, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--global-palette3, #343434) !important;
	margin: 0 0 0.85rem !important;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--global-palette1, #daaf53);
}

/* TOC denser for sticky column */
@media (min-width: 1100px) {
	body.gj-has-floating-toc .mak-toc__list {
		max-height: min(60vh, 520px) !important;
		overflow: auto !important;
		scrollbar-width: thin;
	}
	body.gj-has-floating-toc .mak-toc__link {
		padding: 7px 12px !important;
		font-size: 12.5px !important;
	}
	body.gj-has-floating-toc .mak-toc__toggle {
		padding: 11px 12px !important;
		font-size: 10.5px !important;
	}
}

/* Article title area a bit tighter with 3-col feel */
body.gj-has-floating-toc .entry-hero,
body.gj-has-floating-toc .entry-header {
	max-width: 100%;
}

body.gj-has-floating-toc .primary-sidebar .gj-side-links,
body.gj-guide-layout .primary-sidebar ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 1rem !important;
}
body.gj-has-floating-toc .primary-sidebar .gj-side-links li {
	margin: 0 0 0.5rem !important;
	padding: 0 !important;
	list-style: none !important;
}
body.gj-has-floating-toc .primary-sidebar a {
	color: var(--global-palette4, #484848);
	text-decoration: none;
	font-size: 14px;
}
body.gj-has-floating-toc .primary-sidebar a:hover {
	color: var(--global-palette2, #3d998e);
}