/*
Theme Name: Skylearn
Theme URI: https://wordpress.org/themes/
Author: Skylearn
Description: Thème bloc pour un site de formation des formateurs, de MOOC de formation et de services de digital learning (conception de formations en ligne, capsules vidéo pédagogiques, médiatisation sur la plateforme IMTIYAZ+, suivi des apprenants), avec la charte de la plateforme IMTIYAZ+ : bandeau en dégradé bleu nuit / violet / sarcelle avec grille, titres en deux tons, cartes et tuiles, pied de page sombre et police Roboto Flex.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skylearn
Tags: block-patterns, full-site-editing, education, wide-blocks, custom-colors, custom-logo, editor-style, translation-ready
*/

/* Most of the charter lives in theme.json; this file adds what theme.json cannot express,
   with the same values as the IMTIYAZ+ platform theme. */

body {
	-webkit-font-smoothing: antialiased;
}

/* Navbar: white, sticky, light shadow, active link underlined (platform: .navbar.fixed-top).
   The sticky element is the <header> template part that wraps the group. */
.wp-site-blocks > header:has(.sl-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .wp-site-blocks > header:has(.sl-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}
.sl-header {
	min-height: 72px;
	box-shadow: var(--wp--preset--shadow--navbar);
}
.sl-header .wp-block-navigation-item__content {
	padding: .4rem 0;
	border-bottom: 3px solid transparent;
}
.sl-header .current-menu-item > .wp-block-navigation-item__content,
.sl-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}
.sl-header .wp-block-site-logo img {
	max-height: 44px;
	width: auto;
}

/* Banner: radial gradient with a subtle grid (platform: .sl-hero). Block style "Bandeau" on a group or cover. */
.is-style-sl-hero {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--hero-1);
	background-image:
		radial-gradient(at 40% 22%, var(--wp--preset--color--hero-1), transparent 70%),
		radial-gradient(at 80% 55%, var(--wp--preset--color--hero-2), transparent 70%),
		radial-gradient(at 31% 73%, var(--wp--preset--color--hero-3), transparent 70%);
}
.is-style-sl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 55%, rgba(0, 0, 0, .35));
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 55%, rgba(0, 0, 0, .35));
}
.is-style-sl-hero > * {
	position: relative;
}
.is-style-sl-hero :where(h1, h2, h3, h4, p, li, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}
.is-style-sl-hero .sl-hero-lead {
	color: rgba(255, 255, 255, .82);
}
/* White button on the banner. */
.is-style-sl-hero .wp-block-button:not(.is-style-outline) .wp-element-button {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}
.is-style-sl-hero .wp-block-button:not(.is-style-outline) .wp-element-button:hover {
	background-color: #e8f1fb;
}
.is-style-sl-hero .wp-block-button.is-style-outline .wp-element-button {
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, .6);
}
.is-style-sl-hero .wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: rgba(255, 255, 255, .12);
}

/* Glass panel on the banner (statistics, small cards). */
.sl-glass {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: .75rem;
	backdrop-filter: blur(4px);
}

/* Card: white, thin border, rounded, lifts on hover. Block style "Carte" on a group. */
.is-style-sl-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: .75rem;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.is-style-sl-card:hover {
	border-color: rgba(0, 94, 184, .26);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

/* Tile: white box with a blue tinted border, like the course navigation tiles. Block style "Tuile" on a group. */
.is-style-sl-tile {
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(0, 94, 184, .26);
	border-radius: .5rem;
	transition: background-color .15s ease, border-color .15s ease;
}
.is-style-sl-tile:hover {
	border-color: var(--wp--preset--color--primary);
	background-color: rgba(0, 94, 184, .05);
}

/* Grey rounded band, like the course section headers. Block style "Section grise" on a group. */
.is-style-sl-section {
	background: var(--wp--preset--color--section);
	border-radius: .6rem;
}

/* Round tinted icon (emoji or short text) like the platform activity icons. */
.sl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	background: rgba(0, 94, 184, .1);
	color: var(--wp--preset--color--primary);
	margin: 0;
}
.sl-icon.is-violet { background: rgba(80, 70, 155, .12); color: var(--wp--preset--color--hero-2); }
.sl-icon.is-teal { background: rgba(11, 103, 113, .12); color: var(--wp--preset--color--hero-3); }
.sl-icon.is-green { background: rgba(22, 163, 74, .12); color: var(--wp--preset--color--success); }
.sl-icon.is-glass { background: rgba(255, 255, 255, .15); }

/* Step number. */
.sl-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	margin: 0;
}

/* Pill label. Block style "Pastille" on a paragraph. */
.is-style-sl-pill {
	display: block;
	width: fit-content;
	padding: .3em .9em;
	border-radius: 999px;
	background: rgba(0, 94, 184, .1);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.is-style-sl-pill.has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
}
.is-style-sl-hero .is-style-sl-pill {
	background: rgba(255, 255, 255, .14);
	color: var(--wp--preset--color--base);
}

/* Big figures. */
.sl-stat strong {
	display: block;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* Footer (platform: .sl-footer). */
.sl-footer {
	color: rgba(255, 255, 255, .68);
	font-size: .9rem;
}
.sl-footer a {
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
}
.sl-footer a:hover,
.sl-footer a:focus {
	color: var(--wp--preset--color--base);
}
.sl-footer :where(h2, h3) {
	color: var(--wp--preset--color--base);
	font-size: 1.05rem;
	font-weight: 600;
}
.sl-footer ul {
	list-style: none;
	padding-left: 0;
}
.sl-footer li {
	margin-bottom: .6rem;
}
.sl-footer .wp-block-site-title a {
	color: var(--wp--preset--color--base);
}
.sl-footer .wp-block-social-links .wp-social-link {
	border-radius: .35rem;
	background: rgba(255, 255, 255, .1);
	color: var(--wp--preset--color--base);
	transition: background-color .15s ease;
}
.sl-footer .wp-block-social-links .wp-social-link:hover {
	background: var(--wp--preset--color--primary);
	transform: none;
}
.sl-footer .wp-block-social-links .wp-social-link a {
	color: var(--wp--preset--color--base);
}

/* FAQ (details block). */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: .6rem;
	padding: .9rem 1.15rem;
	background: var(--wp--preset--color--base);
}
.wp-block-details summary {
	font-weight: 600;
	color: var(--wp--preset--color--heading);
	cursor: pointer;
}
.wp-block-details[open] {
	border-color: rgba(0, 94, 184, .26);
}
.wp-block-details[open] summary {
	color: var(--wp--preset--color--primary);
	margin-bottom: .5rem;
}

/* Forms. */
:where(input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea, select) {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: .5rem;
	padding: .55rem .8rem;
}

/* Keyboard focus. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.is-style-sl-hero :where(a, button):focus-visible,
.sl-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-sl-card,
	.is-style-sl-card:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Homepage layout (two-tone headings, mockup, promo band, checklist).
   ------------------------------------------------------------------ */

/* Second part of a heading in the banner gradient: <span class="sl-accent">. */
.sl-accent {
	background: linear-gradient(90deg, var(--wp--preset--color--primary-light), var(--wp--preset--color--hero-2) 60%, var(--wp--preset--color--hero-3));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.is-style-sl-hero .sl-accent {
	background: linear-gradient(90deg, #9cc8ff, #c4b8ff 55%, #7fe0e8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Heading with a short blue bar on its left (class "sl-stroke" on a heading). */
.sl-stroke {
	position: relative;
	padding-left: 1.1rem;
}
.sl-stroke::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 5px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--wp--preset--color--primary-light), var(--wp--preset--color--hero-2));
}

/* Row of keyword chips under the banner title. */
.sl-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-chips li {
	padding: .35rem .9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .06);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Browser-like mockup of a course page on the banner. */
.sl-mockup {
	max-width: 980px;
	margin: 0 auto;
	border-radius: .9rem;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--deep);
	overflow: hidden;
	color: var(--wp--preset--color--contrast);
	font-size: .8rem;
	text-align: left;
}
.sl-mockup-bar {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem .9rem;
	background: var(--wp--preset--color--section);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sl-mockup-bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d6d9de;
}
.sl-mockup-bar em {
	flex: 1;
	margin-left: .8rem;
	padding: .2rem .7rem;
	border-radius: 999px;
	background: #fff;
	color: #8a8f98;
	font-style: normal;
}
.sl-mockup-body {
	display: grid;
	grid-template-columns: 58px 220px 1fr;
	min-height: 330px;
}
.sl-mockup-rail {
	background: var(--wp--preset--gradient--rail);
}
.sl-mockup-index {
	padding: 1rem .8rem;
	border-right: 1px solid var(--wp--preset--color--border);
}
.sl-mockup-index b {
	display: block;
	margin: .2rem 0 .6rem;
	padding: .45rem .6rem;
	border-radius: .45rem;
	background: var(--wp--preset--color--section);
	color: var(--wp--preset--color--heading);
}
.sl-mockup-index i {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .3rem;
	font-style: normal;
}
.sl-mockup-index i::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(0, 94, 184, .15);
}
.sl-mockup-index i.is-done::before {
	background: var(--wp--preset--color--success);
}
.sl-mockup-main {
	padding: 1.1rem 1.3rem;
}
.sl-mockup-video {
	position: relative;
	aspect-ratio: 16 / 7;
	border-radius: .6rem;
	background:
		radial-gradient(at 30% 30%, var(--wp--preset--color--hero-2), transparent 60%),
		radial-gradient(at 80% 70%, var(--wp--preset--color--hero-3), transparent 60%),
		var(--wp--preset--color--hero-1);
}
.sl-mockup-video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.sl-mockup-video::before {
	content: "";
	position: absolute;
	left: calc(50% - 6px);
	top: calc(50% - 10px);
	z-index: 1;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent var(--wp--preset--color--primary);
}
.sl-mockup-title {
	margin: .9rem 0 .4rem;
	font-weight: 700;
	font-size: .95rem;
	color: var(--wp--preset--color--heading);
}
.sl-mockup-progress {
	height: 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--section);
	overflow: hidden;
}
.sl-mockup-progress span {
	display: block;
	width: 62%;
	height: 100%;
	background: var(--wp--preset--color--success);
}
@media (max-width: 781px) {
	.sl-mockup-body {
		grid-template-columns: 1fr;
	}
	.sl-mockup-rail,
	.sl-mockup-index {
		display: none;
	}
}

/* Promo band (rounded, gradient border). */
.sl-promo {
	border-radius: .9rem;
	background:
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) padding-box,
		linear-gradient(90deg, var(--wp--preset--color--primary-light), var(--wp--preset--color--hero-2), var(--wp--preset--color--hero-3)) border-box;
	border: 2px solid transparent;
	box-shadow: var(--wp--preset--shadow--card);
}

/* Checklist with round green ticks (class "sl-checklist" on a list). */
.sl-checklist {
	list-style: none;
	padding-left: 0;
}
.sl-checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: .75rem;
}
.sl-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: rgba(22, 163, 74, .12);
	color: var(--wp--preset--color--success);
	font-weight: 700;
	font-size: .8rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Course card thumbnail (gradient + big icon). */
.sl-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	margin: 0;
	border-radius: .75rem .75rem 0 0;
	font-size: 3.2rem;
	line-height: 1;
	background:
		radial-gradient(at 25% 30%, var(--wp--preset--color--hero-2), transparent 65%),
		radial-gradient(at 80% 75%, var(--wp--preset--color--hero-3), transparent 65%),
		var(--wp--preset--color--hero-1);
}
.sl-thumb.is-blue {
	background: var(--wp--preset--gradient--rail);
}
.sl-thumb.is-teal {
	background:
		radial-gradient(at 30% 30%, #138a96, transparent 65%),
		var(--wp--preset--color--hero-3);
}

/* Small meta line of a card (format, duration...). */
.sl-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

/* Header: outline "Log in" next to the "Contact" pill. */
.sl-header .wp-block-button.is-style-outline .wp-element-button {
	border: 1px solid rgba(0, 94, 184, .35);
	color: var(--wp--preset--color--primary);
	background: transparent;
}
.sl-header .wp-block-button.is-style-outline .wp-element-button:hover {
	background: rgba(0, 94, 184, .06);
}

/* ------------------------------------------------------------------
   Interactions (assets/js/skylearn.js). Without JavaScript the page stays static.
   ------------------------------------------------------------------ */

/* Reveal on scroll. */
.sl-js .sl-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease var(--sl-delay, 0ms), transform .6s ease var(--sl-delay, 0ms);
}
.sl-js .sl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Light following the mouse on cards and tiles. */
.is-style-sl-card,
.is-style-sl-tile {
	position: relative;
	isolation: isolate;
}
.is-style-sl-card::after,
.is-style-sl-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	background: radial-gradient(260px circle at var(--sl-x, 50%) var(--sl-y, 50%), rgba(0, 110, 215, .10), transparent 70%);
}
.is-style-sl-card:hover::after,
.is-style-sl-tile:hover::after {
	opacity: 1;
}

/* Filter buttons above a grid. */
.sl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.25rem;
}
.sl-filters button {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: .45rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 94, 184, .26);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sl-filters button:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.sl-filters button[aria-pressed="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.sl-hidden {
	display: none !important;
}

/* Steps of the design process. */
.sl-steps > * {
	cursor: default;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.sl-steps > .is-active {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .45);
	transform: translateY(-4px);
}
.sl-steps > .is-active .sl-step-number {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}
.sl-steps .sl-step-number {
	transition: background-color .25s ease, color .25s ease;
}

/* Interactive mockup. */
.sl-mockup-index i {
	cursor: pointer;
	border-radius: .4rem;
	transition: background-color .15s ease;
}
.sl-mockup-index i:hover {
	background: rgba(0, 94, 184, .06);
}
.sl-mockup-index i.is-current {
	background: rgba(0, 94, 184, .1);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.sl-mockup-index i.is-done::before {
	content: "✓";
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sl-mockup-video {
	cursor: pointer;
	overflow: hidden;
}
.sl-mockup-video::after,
.sl-mockup-video::before {
	transition: transform .2s ease, opacity .2s ease;
}
.sl-mockup-video:hover::after {
	transform: scale(1.08);
}
.sl-mockup-video.is-playing::after,
.sl-mockup-video.is-playing::before {
	opacity: 0;
}
.sl-mockup-video .sl-mockup-wave {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 0;
	background: var(--wp--preset--color--base);
}
.sl-mockup-video.is-playing .sl-mockup-wave {
	animation: sl-play 2.6s linear forwards;
}
.sl-mockup-video .sl-mockup-bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	opacity: 0;
	transition: opacity .2s ease;
}
.sl-mockup-video.is-playing .sl-mockup-bars {
	opacity: 1;
}
.sl-mockup-bars span {
	width: 6px;
	height: 18px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .85);
	animation: sl-eq .9s ease-in-out infinite;
}
.sl-mockup-bars span:nth-child(2) { animation-delay: .15s; }
.sl-mockup-bars span:nth-child(3) { animation-delay: .3s; }
.sl-mockup-bars span:nth-child(4) { animation-delay: .45s; }
.sl-mockup-progress span {
	transition: width .6s ease;
}
.sl-mockup-meta {
	display: flex;
	justify-content: space-between;
	margin-top: .4rem;
	color: #8a8f98;
}
@keyframes sl-play {
	to { width: 100%; }
}
@keyframes sl-eq {
	0%, 100% { transform: scaleY(.5); }
	50% { transform: scaleY(1.6); }
}

/* Floating hint on the mockup. */
.sl-mockup-hint {
	display: inline-block;
	margin: 0 auto .75rem;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .85);
	font-size: var(--wp--preset--font-size--small);
}

/* Chips of the banner are links. */
.sl-chips a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.sl-chips li:has(a):hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .45);
}

/* Header when scrolled, back to top button. */
.sl-header {
	transition: box-shadow .2s ease, padding .2s ease;
}
.sl-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 29, 98, .12);
}
.sl-totop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--gradient--rail);
	color: #fff;
	font-size: 1.15rem;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 29, 98, .25);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.sl-totop.is-shown {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.sl-totop:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.sl-js .sl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.sl-mockup-bars span {
		animation: none;
	}
}

/* Anchored sections are not hidden under the sticky header. */
main [id] {
	scroll-margin-top: 90px;
}
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Small screens: keep the header on one line (the login link stays in the footer and the menu). */
.sl-header .wp-block-buttons {
	flex-wrap: nowrap;
}
@media (max-width: 600px) {
	.sl-header .wp-block-button.is-style-outline {
		display: none;
	}
	.sl-header .wp-block-site-title {
		font-size: 1.15rem;
	}
}

/* Inline SVG icons (inc/icons.php). */
.sl-svg {
	display: block;
	width: 24px;
	height: 24px;
	flex: none;
}
.sl-icon {
	flex: none;
}
.sl-thumb {
	width: 100%;
	color: var(--wp--preset--color--base);
}
.sl-thumb .sl-svg {
	width: 56px;
	height: 56px;
	stroke-width: 1.4;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
}
.sl-icon.is-glass {
	color: var(--wp--preset--color--base);
}

/* IMTIYAZ+ wordmark (inc/brand.php): "IMTIYAZ" in white, "+" in blue.
   Light backgrounds: dark blue pill so the white stays readable. */
.sl-brand {
	display: inline-block;
	padding: .02em .42em .06em;
	border-radius: .38em;
	background: var(--wp--preset--color--hero-1);
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.25;
	white-space: nowrap;
	-webkit-text-fill-color: initial;
}
.sl-brand-name {
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.sl-brand-plus {
	color: #3d9cff;
	-webkit-text-fill-color: #3d9cff;
	margin-left: .04em;
}
/* Dark backgrounds: no pill. */
.is-style-sl-hero .sl-brand,
.sl-footer .sl-brand,
.sl-glass .sl-brand,
.sl-chips .sl-brand {
	padding: 0;
	background: none;
	border-radius: 0;
}
/* The header site title as a logo badge. */
.sl-header .wp-block-site-title .sl-brand {
	font-size: 1.15em;
	padding: .1em .5em .14em;
}

/* White cards on a blue section keep dark, readable texts. */
.is-style-sl-hero .is-style-sl-card :where(h1, h2, h3, h4),
.is-style-sl-hero .is-style-sl-card :where(h1, h2, h3, h4) a {
	color: var(--wp--preset--color--heading);
}
.is-style-sl-hero .is-style-sl-card :where(p, li, time, .wp-block-post-date, .wp-block-post-excerpt__excerpt) {
	color: var(--wp--preset--color--contrast);
}
.is-style-sl-hero .is-style-sl-card a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary);
}
.is-style-sl-hero .is-style-sl-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}
/* Featured image flush with the top of the card, text with space around it. */
.is-style-sl-card > .wp-block-post-featured-image {
	margin-bottom: 0;
}
.is-style-sl-card > .wp-block-post-featured-image + .wp-block-group {
	padding-top: .25rem !important;
}
/* "No news yet" message on a blue section. */
.is-style-sl-hero .is-style-sl-section {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

/* Gold button with a permanent shine and glow (class "sl-btn-gold" on a button block). */
.sl-btn-gold .wp-element-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, #f7d774 0%, #e9b923 45%, #c99212 100%);
	color: #1f1300;
	font-weight: 700;
	border: 1px solid #b8860b;
	box-shadow: 0 0 0 0 rgba(233, 185, 35, .55), 0 6px 18px rgba(201, 146, 18, .35);
	animation: sl-gold-glow 2.4s ease-in-out infinite;
}
.sl-btn-gold .wp-element-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	z-index: -1;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
	transform: skewX(-20deg);
	animation: sl-gold-shine 2.8s ease-in-out infinite;
}
.sl-btn-gold .wp-element-button:hover,
.sl-btn-gold .wp-element-button:focus {
	background: linear-gradient(135deg, #fbe39a 0%, #f0c63a 45%, #d9a418 100%);
	color: #1f1300;
	transform: translateY(-1px);
}
@keyframes sl-gold-shine {
	0% { left: -60%; }
	60%, 100% { left: 130%; }
}
@keyframes sl-gold-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(233, 185, 35, .55), 0 6px 18px rgba(201, 146, 18, .35); }
	50% { box-shadow: 0 0 0 8px rgba(233, 185, 35, 0), 0 8px 26px rgba(201, 146, 18, .5); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-btn-gold .wp-element-button,
	.sl-btn-gold .wp-element-button::after {
		animation: none;
	}
	.sl-btn-gold .wp-element-button::after {
		display: none;
	}
}

/* ------------------------------------------------------------------
   MOOC promo block (patterns/promo.php).
   ------------------------------------------------------------------ */
.sl-promo2 {
	border-radius: 1.1rem;
	box-shadow: 0 24px 60px rgba(0, 29, 98, .28);
}
/* A soft golden light in the corner. */
.sl-promo2::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(247, 215, 116, .22), transparent 65%);
}

/* Gold pill. */
.sl-pill-gold {
	display: block;
	width: fit-content;
	margin: 0;
	padding: .35em 1em;
	border-radius: 999px;
	background: linear-gradient(135deg, #f7d774, #e9b923 55%, #c99212);
	color: #1f1300 !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 4px 14px rgba(201, 146, 18, .35);
}

/* Inline checklist with light ticks on dark backgrounds. */
.sl-checklist-inline {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0;
}
.sl-checklist-inline li {
	margin: 0;
	font-weight: 500;
}
.is-style-sl-hero .sl-checklist li::before {
	background: rgba(247, 215, 116, .18);
	color: #f7d774;
}

/* Stack of floating course cards. */
.sl-stack {
	position: relative;
	height: 290px;
	max-width: 440px;
	margin-left: auto;
}
.sl-stack-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .9rem;
	width: 82%;
	padding: 1rem 1.1rem;
	border-radius: .9rem;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	backdrop-filter: blur(6px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
	animation: sl-float 6s ease-in-out infinite;
}
.sl-stack-card-1 {
	top: 0;
	left: 12%;
	--sl-rot: -3deg;
}
.sl-stack-card-2 {
	top: 98px;
	left: 0;
	--sl-rot: 2deg;
	animation-delay: -2s;
	background: rgba(255, 255, 255, .16);
}
.sl-stack-card-3 {
	top: 196px;
	left: 16%;
	--sl-rot: -1deg;
	animation-delay: -4s;
}
.sl-stack-text {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
	flex: 1;
}
.sl-stack-text strong {
	color: #fff;
	font-size: .95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sl-stack-text small {
	color: rgba(255, 255, 255, .7);
	font-size: .78rem;
}
.sl-stack-bar {
	display: block;
	height: 6px;
	margin-top: .3rem;
	border-radius: 3px;
	background: rgba(255, 255, 255, .18);
	overflow: hidden;
}
.sl-stack-bar > span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #f7d774, #e9b923);
}
.sl-stack .sl-brand {
	padding: 0;
	background: none;
}
@keyframes sl-float {
	0%, 100% { transform: translateY(0) rotate(var(--sl-rot, 0deg)); }
	50% { transform: translateY(-10px) rotate(var(--sl-rot, 0deg)); }
}
@media (max-width: 781px) {
	.sl-stack {
		height: auto;
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: .75rem;
	}
	.sl-stack-card {
		position: static;
		width: auto;
		min-width: 0;
		animation: none;
		transform: none;
	}
	.sl-stack-text strong {
		white-space: normal;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sl-stack-card {
		animation: none;
		transform: rotate(var(--sl-rot, 0deg));
	}
}

/* ------------------------------------------------------------------
   Avatars, video examples, testimonials.
   ------------------------------------------------------------------ */
.sl-avatar {
	display: block;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
}

/* Community row under the banner buttons. */
.sl-community {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .75rem;
}
.sl-community p {
	margin: 0;
	color: rgba(255, 255, 255, .85);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.sl-avatar-stack {
	display: flex;
}
.sl-avatar-stack .sl-avatar {
	width: 38px;
	height: 38px;
	margin-left: -10px;
	border: 2px solid var(--wp--preset--color--hero-1);
	transition: transform .2s ease;
}
.sl-avatar-stack .sl-avatar:first-child {
	margin-left: 0;
}
.sl-avatar-stack .sl-avatar:hover {
	transform: translateY(-4px);
	z-index: 1;
}

/* Video example thumbnail. */
.sl-video-demo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	border-radius: .75rem .75rem 0 0;
	overflow: hidden;
	cursor: pointer;
	color: #fff;
	background:
		radial-gradient(at 25% 30%, var(--wp--preset--color--hero-2), transparent 65%),
		radial-gradient(at 80% 75%, var(--wp--preset--color--hero-3), transparent 65%),
		var(--wp--preset--color--hero-1);
}
.sl-video-demo.is-violet {
	background:
		radial-gradient(at 70% 25%, #7b6fd6, transparent 60%),
		var(--wp--preset--color--hero-2);
}
.sl-video-demo.is-teal {
	background:
		radial-gradient(at 30% 30%, #138a96, transparent 65%),
		var(--wp--preset--color--hero-3);
}
.sl-video-demo.is-blue {
	background: var(--wp--preset--gradient--rail);
}
.sl-video-demo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 28px 28px;
}
.sl-video-picture {
	position: relative;
	transition: transform .35s ease;
}
.sl-video-picture .sl-avatar {
	width: 104px;
	height: 104px;
	border: 4px solid rgba(255, 255, 255, .85);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
.sl-video-picture .sl-svg {
	width: 70px;
	height: 70px;
	stroke-width: 1.3;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .3));
}
.sl-video-play {
	position: absolute;
	right: .9rem;
	bottom: .9rem;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
	transition: transform .2s ease, opacity .2s ease;
}
.sl-video-play::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 14px;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--wp--preset--color--primary);
}
.sl-video-type,
.sl-video-time {
	position: absolute;
	top: .75rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	background: rgba(0, 0, 0, .35);
	backdrop-filter: blur(4px);
}
.sl-video-type {
	left: .75rem;
}
.sl-video-time {
	right: .75rem;
}
.sl-video-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(255, 255, 255, .2);
	opacity: 0;
}
.sl-video-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #f7d774, #e9b923);
}
.sl-video-demo:hover .sl-video-picture {
	transform: scale(1.06);
}
.sl-video-demo:hover .sl-video-play {
	transform: scale(1.1);
}
.sl-video-demo.is-playing .sl-video-play {
	opacity: 0;
}
.sl-video-demo.is-playing .sl-video-progress {
	opacity: 1;
}
.sl-video-demo.is-playing .sl-video-progress span {
	animation: sl-play 3s linear forwards;
}
.sl-video-demo.is-playing .sl-video-picture {
	animation: sl-talk .6s ease-in-out infinite;
}
@keyframes sl-talk {
	0%, 100% { transform: scale(1.04) translateY(0); }
	50% { transform: scale(1.04) translateY(-3px); }
}

/* Testimonials. */
.sl-quote {
	position: relative;
}
.sl-quote::before {
	content: "\201C";
	position: absolute;
	top: .4rem;
	right: 1.25rem;
	font-size: 4.5rem;
	line-height: 1;
	font-family: Georgia, serif;
	color: rgba(0, 94, 184, .14);
}
.sl-quote-text {
	flex: 1;
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--heading);
}
.sl-quote-author {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.sl-quote-author .sl-avatar {
	width: 52px;
	height: 52px;
}
.sl-quote-author > span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.sl-quote-author strong {
	color: var(--wp--preset--color--heading);
	font-size: .95rem;
}
.sl-quote-author small {
	color: var(--wp--preset--color--contrast);
	font-size: .8rem;
}
.sl-quote-author small .sl-brand {
	font-size: .72rem;
	padding: 0 .35em;
}
@media (prefers-reduced-motion: reduce) {
	.sl-video-demo.is-playing .sl-video-picture {
		animation: none;
	}
}

/* Service cards with an illustration on top and the icon over its bottom edge. */
.sl-service {
	overflow: visible;
}
.sl-card-media {
	position: relative;
	aspect-ratio: 400 / 200;
	border-radius: .75rem .75rem 0 0;
}
.sl-illustration {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: .75rem .75rem 0 0;
	transition: transform .4s ease;
}
.sl-card-img {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: .75rem .75rem 0 0;
}
.sl-card-media .sl-icon {
	position: absolute;
	left: 1.25rem;
	bottom: -26px;
	z-index: 2;
	background: var(--wp--preset--color--base);
	box-shadow: 0 6px 16px rgba(0, 29, 98, .18);
	border: 3px solid var(--wp--preset--color--base);
}
.sl-service:hover .sl-illustration {
	transform: scale(1.05);
}