/**
 * Tutorial UI — readable, on-brand styling.
 *
 * The site's brand colour is a pale mint (#C2FFC2) — unreadable as text
 * on white. So inside every tutorial scope we treat it as an *accent*
 * (badge background, hover, current-item border) and use neutral dark
 * grays for body/link text. All tokens match the theme:
 *   radius .br-5 = 5px, shadow .box-sh, font var(--ff-p).
 */

.tutorials-discovery,
.tutorial-detail,
.tutorial-topic,
.tutorials-archive,
.related-tutorials {
	--tw-radius: 5px;
	--tw-shadow: 6px 15px 30px 0 rgba(229, 234, 239, .5);
	--tw-text: #1a1f29;          /* near-black body / link colour      */
	--tw-muted: #6b7280;         /* secondary / meta                   */
	--tw-line: #e9edf1;          /* subtle borders                     */
	--tw-mint: #c2ffc2;          /* brand accent (backgrounds only)    */
	--tw-mint-deep: #1f6f3a;     /* readable mint for hover text       */
	color: var(--tw-text);
	font-family: var(--ff-p);
}

/* ---------- typography ---------- */
.tutorial-title {
	font-size: clamp(1.6rem, 2.2vw + 1rem, 2.1rem);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--tw-text);
}
.tutorial-content { color: var(--tw-text); font-size: 1.02rem; line-height: 1.75; }
.tutorial-content h2 {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -.005em;
	margin: 2.2rem 0 .6rem;
	line-height: 1.35;
	color: var(--tw-text);
}
.tutorial-content h2 + p { margin-top: .25rem; }
.tutorial-content p { margin: 0 0 1rem; }
.tutorial-content ul,
.tutorial-content ol { margin: 0 0 1rem 1.25rem; }
.tutorial-content ul li,
.tutorial-content ol li { margin-bottom: .35rem; }
.tutorial-content img { max-width: 100%; height: auto; border-radius: var(--tw-radius); }
.tutorial-content table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.tutorial-content th,
.tutorial-content td { border: 1px solid var(--tw-line); padding: .55rem .8rem; text-align: left; }

/* ---------- links inside tutorial content ---------- */
.tutorial-content a,
.tutorial-detail a,
.tutorial-topic a,
.tutorials-archive a,
.related-tutorials a {
	color: var(--tw-text);
	text-decoration-color: var(--tw-line);
	text-underline-offset: 3px;
}
.tutorial-content a:hover,
.tutorial-detail a:hover,
.tutorial-topic a:hover,
.tutorials-archive a:hover,
.related-tutorials a:hover {
	color: var(--tw-mint-deep);
	text-decoration-color: var(--tw-mint-deep);
}

/* ---------- meta row + topic badge ---------- */
.tutorial-detail .entry-meta { color: var(--tw-muted); }
.tutorial-detail .entry-meta time { color: var(--tw-muted); }
.tutorial-topic-badge {
	display: inline-block;
	background: var(--tw-mint);
	color: var(--tw-text);
	font-size: .82rem;
	font-weight: 600;
	padding: .18em .7em;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.4;
}
.tutorial-topic-badge:hover { background: #afe8af; color: var(--tw-text); }

/* ---------- accent link ("All Python tutorials →" / "Start learning →") ---------- */
.tutorial-link {
	color: var(--tw-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s, border-color .15s;
}
.tutorial-link:hover {
	color: var(--tw-mint-deep);
	border-bottom-color: var(--tw-mint-deep);
}

/* ---------- inline code chip ---------- */
.tutorial-content :not(pre) > code {
	background: #f4f6f8;
	border: 1px solid var(--tw-line);
	border-radius: 4px;
	padding: .12em .42em;
	font-size: .9em;
	color: #2a3140;
}

/* ---------- code blocks (light Prism, framed to the theme) ---------- */
.tutorial-content pre[class*="language-"],
.tutorial-content pre.line-numbers {
	background: #f8f9fb;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	box-shadow: var(--tw-shadow);
	padding: 1rem 1.1rem;
	margin: 0 0 1.25rem;
	font-size: .92rem;
	line-height: 1.65;
	overflow: auto;
}
.tutorial-content pre[class*="language-"] code { text-shadow: none; }
.tutorial-content .line-numbers .line-numbers-rows { border-right-color: #dde2e7; }

/* ---------- breadcrumb ---------- */
.tutorial-breadcrumb,
.tutorial-breadcrumb a { color: var(--tw-muted); text-decoration: none; }
.tutorial-breadcrumb a:hover { color: var(--tw-text); text-decoration: underline; }

/* ---------- prev / next pager ---------- */
.tutorial-pager a {
	display: block;
	flex: 1 1 0;
	max-width: 48%;
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	padding: .9rem 1rem;
	text-decoration: none;
	color: var(--tw-text);
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tutorial-pager a:hover {
	border-color: var(--tw-mint);
	transform: translateY(-2px);
	box-shadow: var(--tw-shadow);
}
.tutorial-pager .pager-next { text-align: right; }

/* ---------- course outline sidebar ---------- */
.tutorial-outline-list {
	max-height: 62vh;
	overflow-y: auto;
	margin: 0;
	padding-right: .25rem;
}
.tutorial-outline-list li { line-height: 1.45; padding: .15rem 0; }
.tutorial-outline-list a {
	color: var(--tw-text);
	text-decoration: none;
	display: block;
	padding: .15rem .5rem .15rem .65rem;
	border-left: 2px solid transparent;
	border-radius: 3px;
}
.tutorial-outline-list a:hover { color: var(--tw-mint-deep); background: #fafbfc; }
.tutorial-outline-list .tutorial-outline-current,
.tutorial-outline-list a.tutorial-outline-current {
	font-weight: 600;
	color: var(--tw-text);
	border-left-color: var(--tw-mint);
	background: #fafbfc;
}
.tutorial-outline-list::-webkit-scrollbar { width: 6px; }
.tutorial-outline-list::-webkit-scrollbar-thumb { background: #dde2e7; border-radius: 3px; }

/* sidebar card heading */
.tutorial-detail .position-sticky .h5 {
	font-weight: 600;
	color: var(--tw-text);
	letter-spacing: -.005em;
	font-size: 1.1rem;
}

/* ---------- topic / discovery cards ---------- */
.tutorial-topic-card,
.tutorials-discovery .row a,
.tutorial-course-list li a,
.related-tutorials li a {
	color: var(--tw-text);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	border: 1px solid transparent;
}
.tutorial-topic-card:hover,
.tutorial-pager a:hover,
.tutorial-course-list li a:hover,
.tutorials-discovery .row a:hover {
	transform: translateY(-3px);
	box-shadow: var(--tw-shadow);
	border-color: var(--tw-mint);
}
.tutorials-archive .tutorial-topic-card { height: 100%; }

/* course list step number (a mint pill) */
.tutorial-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .5rem;
	background: var(--tw-mint);
	color: var(--tw-text);
	border-radius: 999px;
	font-size: .9rem;
}

/* ---------- related box in blog posts ---------- */
.related-tutorials {
	border-radius: var(--tw-radius);
	box-shadow: var(--tw-shadow);
	background: #fff;
}
.related-tutorials li { margin-bottom: .55rem; }
.related-tutorials li a { text-decoration: none; }

/* ---------- share ---------- */
.tutorial-share-links .share_media { margin: 0; }
.tutorial-share-links .share_media li { margin-right: .5rem; }

/* ---------- page titles ---------- */
.tutorials-archive .page-title,
.tutorial-topic .page-title {
	font-family: var(--ff-p);
	font-weight: 600;
	color: var(--tw-text);
	letter-spacing: -.01em;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.tutorial-detail .position-sticky { position: static !important; }
	.tutorial-outline-list { max-height: none; }
}
@media (max-width: 575px) {
	.tutorial-pager { flex-direction: column; }
	.tutorial-pager a { max-width: 100%; }
	.tutorial-pager .pager-next { text-align: left; }
}