/*
Theme Name: AmazingDarjeelingTheme
Theme URI: https://generatepress.com
Author: Custom build for GeneratePress
Author URI: https://generatepress.com
Description: A bold editorial news-magazine child theme for GeneratePress. Inspired by modern city-news publications: heavy Archivo headlines, a red accent system, image-led post cards, and an endless-scrolling homepage feed. Every section — colours, typography, header, homepage blocks, cards, sidebar and footer — is controlled from Appearance > Customize. Requires the GeneratePress parent theme.
Template: generatepress
Version: 2.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amazing-darjeeling-theme
Tags: blog, news, magazine, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   AmazingDarjeelingTheme
   --------------------------------------------------------------------------
   Every custom value below is re-declared at runtime from the Customizer
   (see inc/customizer-css.php). The values here are safe fallbacks so the
   theme still looks right if a setting is ever empty.
   ========================================================================== */

:root {
	/* Brand */
	--adt-accent: #c8102e;
	--adt-accent-hover: #9e0c24;
	--adt-accent-contrast: #ffffff;

	/* Ink + surfaces */
	--adt-ink: #15171a;
	--adt-ink-soft: #3d4148;
	--adt-muted: #5c6370;
	--adt-line: #e3e6ea;
	--adt-surface: #f5f6f8;
	--adt-card-bg: #ffffff;
	--adt-page-bg: #ffffff;

	/* Type */
	--adt-font-heading: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--adt-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--adt-font-meta: var(--adt-font-body);
	--adt-heading-weight: 800;
	--adt-heading-tracking: -0.02em;
	--adt-card-title-size: 1.125rem;
	--adt-section-title-size: 1.75rem;

	/* Shape + rhythm */
	--adt-radius: 4px;
	--adt-radius-lg: 8px;
	--adt-gutter: 28px;
	--adt-block-gap: 56px;
	--adt-shadow: 0 1px 2px rgba(15, 18, 22, 0.06);
	--adt-shadow-hover: 0 10px 30px rgba(15, 18, 22, 0.12);
	--adt-container: 1240px;

	/* Header */
	--adt-header-bg: #ffffff;
	--adt-header-height: 84px;
	--adt-brand-size: 1.75rem;
	--adt-nav-link: #15171a;
	--adt-nav-link-hover: var(--adt-accent);
	--adt-nav-size: 0.8125rem;
	--adt-nav-tracking: 0.06em;
	--adt-nav-align: center;

	/* Feed + sidebar */
	--adt-feed-title-size: 1.5rem;
	--adt-sticky-top: 24px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/*
 * The parent theme resets box-sizing globally, but this design must not
 * depend on that — a padded, width:100% container overflows without it.
 */
.adt-active *,
.adt-active *::before,
.adt-active *::after {
	box-sizing: border-box;
}

body.adt-active {
	font-family: var(--adt-font-body);
	color: var(--adt-ink);
	background-color: var(--adt-page-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.adt-active h1,
.adt-active h2,
.adt-active h3,
.adt-active h4,
.adt-active h5,
.adt-active h6 {
	font-family: var(--adt-font-heading);
	font-weight: var(--adt-heading-weight);
	letter-spacing: var(--adt-heading-tracking);
	color: var(--adt-ink);
	line-height: 1.15;
}

.adt-active a {
	text-decoration: none;
}

.adt-active a:hover,
.adt-active a:focus-visible {
	color: var(--adt-accent);
}

.adt-active :focus-visible {
	outline: 2px solid var(--adt-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.adt-container {
	width: 100%;
	max-width: var(--adt-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.adt-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Section headings ("The Toronto Feed" style)
   -------------------------------------------------------------------------- */

.adt-section {
	margin-bottom: var(--adt-block-gap);
}

.adt-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--adt-ink);
}

.adt-section-head--accent {
	border-bottom-color: var(--adt-accent);
}

.adt-section-title {
	font-size: var(--adt-section-title-size);
	margin: 0;
	line-height: 1.1;
}

.adt-section-title .adt-section-title-mark {
	color: var(--adt-accent);
}

.adt-section-link {
	font-family: var(--adt-font-meta);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--adt-muted);
	white-space: nowrap;
}

.adt-section-link:hover {
	color: var(--adt-accent);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.adt-grid {
	display: grid;
	gap: var(--adt-gutter);
}

.adt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.adt-card {
	display: flex;
	flex-direction: column;
	background: var(--adt-card-bg);
	border-radius: var(--adt-radius);
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.adt-card--boxed {
	box-shadow: var(--adt-shadow);
	border: 1px solid var(--adt-line);
}

.adt-card--boxed .adt-card-body {
	padding: 18px;
}

.adt-cards-lift .adt-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--adt-shadow-hover);
}

.adt-card-media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--adt-surface);
	border-radius: var(--adt-radius);
	aspect-ratio: var(--adt-card-ratio, 16 / 9);
}

.adt-card--boxed .adt-card-media {
	border-radius: 0;
}

.adt-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.adt-cards-zoom .adt-card:hover .adt-card-media img {
	transform: scale(1.05);
}

.adt-card-media--placeholder {
	background: linear-gradient(135deg, var(--adt-surface), var(--adt-line));
}

.adt-card-body {
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

/* Category eyebrow */
.adt-eyebrow {
	font-family: var(--adt-font-meta);
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--adt-accent);
	line-height: 1;
}

.adt-eyebrow a {
	color: inherit;
}

.adt-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.adt-eyebrow--pill {
	align-self: flex-start;
	background: var(--adt-accent);
	color: var(--adt-accent-contrast);
	padding: 5px 9px;
	border-radius: 2px;
}

.adt-eyebrow--pill a {
	color: var(--adt-accent-contrast);
}

.adt-card-title {
	font-size: var(--adt-card-title-size);
	line-height: 1.28;
	margin: 0;
	letter-spacing: var(--adt-heading-tracking);
}

.adt-card-title a {
	color: var(--adt-ink);
	background-image: linear-gradient(var(--adt-accent), var(--adt-accent));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.3s ease, color 0.2s ease;
}

.adt-card-title a:hover {
	color: var(--adt-accent);
	background-size: 100% 2px;
}

.adt-card-excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--adt-muted);
	margin: 0;
}

.adt-card-meta {
	font-family: var(--adt-font-meta);
	font-size: 0.75rem;
	color: var(--adt-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

.adt-card-meta a {
	color: var(--adt-ink-soft);
	font-weight: 700;
}

.adt-card-meta a:hover {
	color: var(--adt-accent);
}

.adt-meta-sep::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	opacity: 0.6;
}

.adt-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

/* Horizontal / list card */
.adt-card--list {
	flex-direction: row;
	gap: 16px;
	align-items: flex-start;
}

.adt-card--list .adt-card-media {
	flex: 0 0 38%;
	max-width: 38%;
}

.adt-card--list .adt-card-body {
	padding-top: 0;
}

/* Numbered rank card */
.adt-card--rank {
	flex-direction: row;
	gap: 14px;
	align-items: flex-start;
}

.adt-rank-num {
	font-family: var(--adt-font-heading);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--adt-accent);
	flex: 0 0 auto;
	min-width: 1.4em;
}

/* Overlay / hero card */
.adt-card--overlay {
	min-height: 460px;
	justify-content: flex-end;
	border-radius: var(--adt-radius-lg);
	isolation: isolate;
}

.adt-card--overlay .adt-card-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: inherit;
	z-index: -2;
}

.adt-card--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 10, 12, 0.92) 0%, rgba(8, 10, 12, 0.55) 42%, rgba(8, 10, 12, 0) 78%);
	z-index: -1;
	border-radius: inherit;
}

.adt-card--overlay .adt-card-body {
	padding: 28px;
	flex: 0 0 auto;
}

.adt-card--overlay .adt-card-title a,
.adt-card--overlay .adt-card-excerpt,
.adt-card--overlay .adt-card-meta,
.adt-card--overlay .adt-card-meta a {
	color: #fff;
}

.adt-card--overlay .adt-card-title {
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	line-height: 1.08;
}

.adt-card--overlay .adt-eyebrow {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.adt-hero {
	margin-bottom: var(--adt-block-gap);
}

.adt-hero-grid {
	display: grid;
	gap: var(--adt-gutter);
	grid-template-columns: 2fr 1fr;
	align-items: stretch;
}

.adt-hero-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.adt-hero-side .adt-card--list .adt-card-media {
	flex-basis: 42%;
	max-width: 42%;
}

.adt-hero--stacked .adt-hero-grid {
	grid-template-columns: 1fr;
}

.adt-hero--split .adt-hero-grid {
	grid-template-columns: 1fr 1fr;
}

/* --------------------------------------------------------------------------
   Trending strip
   -------------------------------------------------------------------------- */

.adt-trending {
	border-block: 1px solid var(--adt-line);
	padding-block: 14px;
	margin-bottom: var(--adt-block-gap);
	display: flex;
	align-items: center;
	gap: 18px;
}

.adt-trending-label {
	font-family: var(--adt-font-meta);
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: var(--adt-accent);
	color: var(--adt-accent-contrast);
	padding: 6px 10px;
	border-radius: 2px;
	flex: 0 0 auto;
}

.adt-trending-track {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}

.adt-trending-track::-webkit-scrollbar {
	display: none;
}

.adt-trending-track li {
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.adt-trending-track a {
	color: var(--adt-ink);
}

/* --------------------------------------------------------------------------
   Feed + endless scroll
   -------------------------------------------------------------------------- */

.adt-feed-layout {
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
}

.adt-feed-layout--full {
	grid-template-columns: minmax(0, 1fr);
}

.adt-feed-layout--left {
	grid-template-columns: 320px minmax(0, 1fr);
}

.adt-feed-layout--left .adt-feed-main { order: 2; }
.adt-feed-layout--left .adt-feed-aside { order: 1; }

.adt-feed-list {
	display: grid;
	gap: 34px;
}

.adt-feed-list--grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adt-feed-list--grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
 * Feed headlines run larger than the smaller grid/section cards — this is the
 * main reading surface of the homepage, so it gets its own size control.
 */
.adt-feed-list .adt-card-title {
	font-size: var(--adt-feed-title-size, 1.5rem);
	line-height: 1.22;
}

.adt-feed-list .adt-card-excerpt {
	font-size: 1rem;
}

.adt-feed-list--stream .adt-card {
	padding-bottom: 34px;
	border-bottom: 1px solid var(--adt-line);
}

/* In the stream layout the thumbnail takes a fixed, generous share. */
.adt-feed-list--stream .adt-card--list .adt-card-media {
	flex: 0 0 36%;
	max-width: 36%;
}

.adt-feed-list--stream .adt-card:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* In-feed widget slot */
.adt-feed-inline-widget {
	background: var(--adt-surface);
	border-radius: var(--adt-radius-lg);
	padding: 24px;
	grid-column: 1 / -1;
}

/* Loader */
.adt-feed-sentinel {
	height: 1px;
}

.adt-feed-status {
	text-align: center;
	padding: 34px 0 8px;
	min-height: 40px;
}

.adt-spinner {
	width: 30px;
	height: 30px;
	border: 3px solid var(--adt-line);
	border-top-color: var(--adt-accent);
	border-radius: 50%;
	animation: adt-spin 0.7s linear infinite;
	margin: 0 auto;
	display: none;
}

.adt-feed-status.is-loading .adt-spinner {
	display: block;
}

@keyframes adt-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.adt-spinner { animation-duration: 2s; }
	.adt-active * { transition-duration: 0.01ms !important; }
}

.adt-feed-end {
	font-family: var(--adt-font-meta);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--adt-muted);
	display: none;
}

.adt-feed-status.is-done .adt-feed-end {
	display: block;
}

/* Load more button */
.adt-btn {
	display: inline-block;
	font-family: var(--adt-font-meta);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 15px 34px;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	background: var(--adt-ink);
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease;
	line-height: 1;
}

.adt-btn:hover,
.adt-btn:focus-visible {
	background: var(--adt-accent);
	color: var(--adt-accent-contrast);
}

.adt-btn--accent {
	background: var(--adt-accent);
	color: var(--adt-accent-contrast);
}

.adt-btn--accent:hover {
	background: var(--adt-accent-hover);
	color: var(--adt-accent-contrast);
}

.adt-btn--outline {
	background: transparent;
	color: var(--adt-ink);
	box-shadow: inset 0 0 0 2px var(--adt-ink);
}

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

.adt-btn[hidden] {
	display: none;
}

/* No-JS pagination fallback */
.adt-noscript-nav {
	text-align: center;
	padding-top: 28px;
}

/* --------------------------------------------------------------------------
   Newsletter / CTA band
   -------------------------------------------------------------------------- */

.adt-cta {
	background: var(--adt-cta-bg, var(--adt-ink));
	color: var(--adt-cta-text, #fff);
	border-radius: var(--adt-radius-lg);
	padding: clamp(30px, 5vw, 56px);
	margin-bottom: var(--adt-block-gap);
	text-align: center;
}

/*
 * Scoped with .adt-active so it outranks the base heading colour rule —
 * without it the heading inherits the ink colour and vanishes on a dark band.
 */
.adt-active .adt-cta-title {
	color: inherit;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0 0 10px;
}

.adt-cta-text {
	max-width: 56ch;
	margin: 0 auto 22px;
	opacity: 0.85;
	line-height: 1.6;
}

.adt-cta-form {
	max-width: 520px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.adt-topbar {
	background: var(--adt-topbar-bg, var(--adt-ink));
	color: var(--adt-topbar-text, #fff);
	font-family: var(--adt-font-meta);
	font-size: 0.75rem;
	font-weight: 600;
}

.adt-topbar .adt-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 34px;
	padding-block: 6px;
}

.adt-topbar a { color: inherit; }
.adt-topbar a:hover { opacity: 0.75; color: inherit; }

.adt-topbar-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.adt-header {
	background: var(--adt-header-bg);
	position: relative;
	z-index: 90;
}

.adt-header.is-sticky {
	position: sticky;
	top: 0;
}

body.admin-bar .adt-header.is-sticky { top: 32px; }

.adt-header-main {
	border-bottom: 1px solid var(--adt-line);
}

.adt-header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--adt-header-height);
}

/* Three tracks so the brand stays optically centred. */
.adt-header-left,
.adt-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
}

.adt-header-right { justify-content: flex-end; }

.adt-header-brand {
	flex: 0 1 auto;
	min-width: 0;
	text-align: center;
}

/* Stacked: brand centred on its own row, nav on the bar below. */
.adt-header--stacked .adt-header-inner { justify-content: space-between; }

/* Inline: brand left, menu beside it. */
.adt-header--left .adt-header-brand {
	order: -1;
	text-align: start;
	flex: 0 0 auto;
}

.adt-header--left .adt-header-left { flex: 1 1 auto; }

.adt-logo-link {
	display: block;
	line-height: 0;
}

.adt-brand-logo img {
	display: block;
	max-height: calc(var(--adt-header-height) - 28px);
	width: auto;
	max-width: min(100%, var(--adt-logo-width, 220px));
}

/*
 * Light/dark logo swap. Both files are in the DOM and CSS picks one, so the
 * correct logo is painted on first render rather than swapped in by script.
 * These rules only apply when both versions have actually been uploaded.
 */
/*
 * Scoped with :root so these outrank ".adt-brand-logo img { display: block }".
 * Without that the dark logo stays visible in light mode and the two stack.
 */
:root .adt-logo--dark { display: none; }

:root[data-adt-theme="dark"] .adt-logo--light { display: none; }
:root[data-adt-theme="dark"] .adt-logo--dark { display: block; }

@media (prefers-color-scheme: dark) {
	:root[data-adt-theme="auto"] .adt-logo--light { display: none; }
	:root[data-adt-theme="auto"] .adt-logo--dark { display: block; }
}

/* Editor-only warning when no menu is assigned to the main navigation. */
.adt-navbar--hint { background: var(--adt-surface); }

.adt-menu-hint {
	margin: 0;
	padding-block: 10px;
	font-family: var(--adt-font-meta);
	font-size: 0.8125rem;
	color: var(--adt-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.adt-menu-hint a {
	font-weight: 700;
	color: var(--adt-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.adt-menu-hint-note {
	font-size: 0.75rem;
	opacity: 0.7;
}

.adt-brand-text {
	font-family: var(--adt-font-heading);
	font-weight: 800;
	font-size: var(--adt-brand-size, 1.75rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--adt-ink);
	margin: 0;
	/* Long titles shrink instead of pushing the header apart. */
	overflow-wrap: break-word;
}

.adt-brand-text a { color: inherit; }

.adt-brand-tagline {
	font-family: var(--adt-font-meta);
	font-size: 0.6875rem;
	color: var(--adt-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 4px 0 0;
	line-height: 1.3;
}

/* ---- Navigation ---- */

.adt-nav ul {
	display: flex;
	align-items: center;
	gap: var(--adt-nav-gap, 26px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.adt-nav a {
	display: block;
	font-family: var(--adt-font-meta);
	font-size: var(--adt-nav-size);
	font-weight: 700;
	text-transform: var(--adt-nav-transform, uppercase);
	letter-spacing: var(--adt-nav-tracking);
	color: var(--adt-nav-link);
	white-space: nowrap;
	position: relative;
	padding-block: 6px;
}

.adt-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--adt-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.adt-nav a:hover,
.adt-nav .current-menu-item > a,
.adt-nav .current-menu-ancestor > a {
	color: var(--adt-nav-link-hover);
}

.adt-nav a:hover::after,
.adt-nav .current-menu-item > a::after,
.adt-nav .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.adt-nav li { position: relative; }

.adt-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--adt-card-bg);
	border: 1px solid var(--adt-line);
	box-shadow: var(--adt-shadow-hover);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 20;
}

.adt-nav li:hover > .sub-menu,
.adt-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.adt-nav .sub-menu a {
	padding: 9px 16px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.875rem;
	white-space: normal;
}

.adt-nav .sub-menu a::after { display: none; }
.adt-nav .sub-menu a:hover { background: var(--adt-surface); }

/* The dedicated navigation bar under the brand row. */
.adt-navbar {
	background: var(--adt-navbar-bg, transparent);
	border-bottom: 1px solid var(--adt-line);
}

.adt-navbar .adt-nav {
	display: flex;
	justify-content: var(--adt-nav-align, center);
}

.adt-navbar .adt-nav ul {
	min-height: 48px;
	flex-wrap: wrap;
	justify-content: inherit;
	row-gap: 0;
}

/* ---- Buttons + icon buttons ---- */

.adt-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 8px;
	background: transparent;
	border: 0;
	color: var(--adt-nav-link);
	cursor: pointer;
	font-family: var(--adt-font-meta);
	font-size: var(--adt-nav-size);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--adt-nav-tracking);
	line-height: 1;
}

.adt-icon-btn:hover { color: var(--adt-accent); }

.adt-icon-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.adt-header-btn {
	padding: 10px 16px;
	font-size: 0.6875rem;
	white-space: nowrap;
}

/* Button styles offered in the Customizer. */
.adt-btn--solid {
	background: var(--adt-accent);
	color: var(--adt-accent-contrast);
}

.adt-btn--solid:hover {
	background: var(--adt-accent-hover);
	color: var(--adt-accent-contrast);
}

.adt-btn--dark {
	background: var(--adt-ink);
	color: #fff;
}

.adt-btn--dark:hover {
	background: var(--adt-accent);
	color: var(--adt-accent-contrast);
}

.adt-btn--outline {
	background: transparent;
	color: var(--adt-ink);
	box-shadow: inset 0 0 0 2px currentColor;
}

.adt-btn--outline:hover {
	background: var(--adt-ink);
	color: var(--adt-page-bg);
	box-shadow: inset 0 0 0 2px var(--adt-ink);
}

.adt-btn--text {
	background: transparent;
	color: var(--adt-ink);
	padding-inline: 6px;
}

.adt-btn--text:hover { color: var(--adt-accent); }

.adt-btn--custom {
	background: var(--adt-btn-bg, var(--adt-accent));
	color: var(--adt-btn-color, #fff);
}

.adt-btn--custom:hover { filter: brightness(1.12); }

/* Dark-mode toggle: show whichever icon represents the *next* state. */
.adt-dark-toggle .adt-icon-moon { display: none; }
.adt-dark-toggle .adt-icon-sun { display: inline-flex; }

:root[data-adt-theme="dark"] .adt-dark-toggle .adt-icon-sun { display: none; }
:root[data-adt-theme="dark"] .adt-dark-toggle .adt-icon-moon { display: inline-flex; }

/* ---- Mobile drawer ---- */

.adt-drawer {
	position: fixed;
	inset: 0;
	z-index: 999;
	visibility: hidden;
	pointer-events: none;
}

.adt-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.adt-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 15, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.adt-drawer.is-open .adt-drawer-backdrop { opacity: 1; }

.adt-drawer-panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(360px, 88vw);
	background: var(--adt-card-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px;
	transform: translateX(-100%);
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.adt-drawer.is-open .adt-drawer-panel { transform: translateX(0); }

.adt-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--adt-ink);
}

.adt-drawer-title {
	font-family: var(--adt-font-heading);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	color: var(--adt-ink);
	line-height: 1.15;
	min-width: 0;
	overflow-wrap: break-word;
}

.adt-drawer-search input[type="search"] {
	width: 100%;
	padding: 11px 13px;
	border: 2px solid var(--adt-line);
	border-radius: var(--adt-radius);
	font-family: var(--adt-font-body);
	font-size: 1rem;
	background: var(--adt-card-bg);
	color: var(--adt-ink);
}

.adt-drawer-search input[type="search"]:focus {
	border-color: var(--adt-accent);
	outline: none;
}

.adt-drawer nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adt-drawer nav li { border-bottom: 1px solid var(--adt-line); }

.adt-drawer nav a {
	display: block;
	padding: 13px 2px;
	font-family: var(--adt-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--adt-ink);
}

.adt-drawer nav a:hover { color: var(--adt-accent); }

.adt-drawer nav .sub-menu a {
	font-size: 0.9375rem;
	font-weight: 500;
	padding-inline-start: 16px;
	color: var(--adt-muted);
}

.adt-drawer-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.adt-drawer-buttons:empty { display: none; }

.adt-drawer-buttons .adt-btn {
	text-align: center;
	width: 100%;
}

/* ---- Header search panel ---- */

.adt-search-panel {
	display: none;
	border-bottom: 1px solid var(--adt-line);
	background: var(--adt-card-bg);
	padding-block: 16px;
}

.adt-search-panel.is-open { display: block; }

.adt-search-panel input[type="search"] {
	width: 100%;
	font-size: 1.0625rem;
	padding: 13px 15px;
	border: 2px solid var(--adt-line);
	border-radius: var(--adt-radius);
	font-family: var(--adt-font-body);
	background: var(--adt-card-bg);
	color: var(--adt-ink);
}

.adt-search-panel input[type="search"]:focus {
	border-color: var(--adt-accent);
	outline: none;
}
/* --------------------------------------------------------------------------
   Sidebar + widgets

   Covers our homepage sidebar and GeneratePress's own sidebars, so widget
   content (Recent Posts, category lists, plugin "Top Posts" blocks) picks up
   the same typography as the rest of the site instead of the browser default.
   -------------------------------------------------------------------------- */

.adt-feed-aside .widget,
.adt-active .sidebar .widget,
.adt-active .widget-area .widget {
	margin-bottom: 34px;
	background: transparent;
	padding: 0;
}

.adt-feed-aside .widget-title,
.adt-active .sidebar .widget-title,
.adt-active .widget-area .widget-title {
	font-family: var(--adt-font-heading);
	font-size: 0.9375rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--adt-ink);
	padding-bottom: 10px;
	margin-bottom: 16px;
	border-bottom: 3px solid var(--adt-accent);
}

/* Sticky behaviour is opt-in and desktop-only (see the responsive section). */
.adt-feed-aside.is-sticky,
.adt-active.adt-sticky-sidebar .sidebar.is-right-sidebar,
.adt-active.adt-sticky-sidebar .sidebar.is-left-sidebar {
	position: sticky;
	top: var(--adt-sticky-top, 24px);
	align-self: start;
	/* Never taller than the viewport, or the bottom becomes unreachable. */
	max-height: calc(100vh - var(--adt-sticky-top, 24px) - 20px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Widget lists — the "Top News" style list of posts. */
.adt-feed-aside ul,
.adt-active .sidebar ul,
.adt-active .widget-area ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adt-feed-aside li,
.adt-active .sidebar li,
.adt-active .widget-area li {
	padding: 11px 0;
	border-bottom: 1px solid var(--adt-line);
	font-family: var(--adt-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.adt-feed-aside li:last-child,
.adt-active .sidebar li:last-child,
.adt-active .widget-area li:last-child {
	border-bottom: 0;
}

/*
 * Post links in widgets. WordPress's Recent Posts widget and most "popular
 * posts" plugins emit a bare <a>, which otherwise inherits the browser's blue
 * link styling and default font.
 */
.adt-feed-aside li > a,
.adt-active .sidebar li > a,
.adt-active .widget-area li > a,
.adt-feed-aside .wp-block-latest-posts__post-title,
.adt-active .sidebar .wp-block-latest-posts__post-title,
.adt-active .widget-area .wp-block-latest-posts__post-title {
	font-family: var(--adt-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: var(--adt-heading-tracking);
	color: var(--adt-ink);
	display: block;
}

.adt-feed-aside li > a:hover,
.adt-active .sidebar li > a:hover,
.adt-active .widget-area li > a:hover,
.adt-feed-aside .wp-block-latest-posts__post-title:hover,
.adt-active .sidebar .wp-block-latest-posts__post-title:hover,
.adt-active .widget-area .wp-block-latest-posts__post-title:hover {
	color: var(--adt-accent);
}

/* Thumbnails inside widget post lists. */
.adt-feed-aside li img,
.adt-active .sidebar li img,
.adt-active .widget-area li img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--adt-radius);
	margin-bottom: 8px;
}

.adt-feed-aside .wp-block-latest-posts__featured-image,
.adt-active .sidebar .wp-block-latest-posts__featured-image,
.adt-active .widget-area .wp-block-latest-posts__featured-image {
	margin-bottom: 8px;
}

/* Dates / meta lines that widgets append. */
.adt-feed-aside .post-date,
.adt-feed-aside .wp-block-latest-posts__post-date,
.adt-active .sidebar .post-date,
.adt-active .sidebar .wp-block-latest-posts__post-date,
.adt-active .widget-area .post-date,
.adt-active .widget-area .wp-block-latest-posts__post-date {
	display: block;
	font-family: var(--adt-font-meta);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--adt-muted);
	margin-top: 4px;
}

/* Numbered "top posts" lists. */
.adt-feed-aside ol,
.adt-active .sidebar ol,
.adt-active .widget-area ol {
	counter-reset: adt-rank;
	list-style: none;
	margin: 0;
	padding: 0;
}

.adt-feed-aside ol > li,
.adt-active .sidebar ol > li,
.adt-active .widget-area ol > li {
	counter-increment: adt-rank;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.adt-feed-aside ol > li::before,
.adt-active .sidebar ol > li::before,
.adt-active .widget-area ol > li::before {
	content: counter(adt-rank);
	font-family: var(--adt-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--adt-accent);
	flex: 0 0 auto;
	min-width: 1.2em;
}
/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.adt-footer {
	background: var(--adt-footer-bg, var(--adt-ink));
	color: var(--adt-footer-text, rgba(255, 255, 255, 0.78));
	padding-top: 48px;
	margin-top: 64px;
}

.adt-footer a { color: inherit; }
.adt-footer a:hover { color: var(--adt-accent); }

.adt-footer .widget-title,
.adt-footer h2,
.adt-footer h3 {
	color: var(--adt-footer-heading, #fff);
	font-family: var(--adt-font-heading);
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 14px;
	line-height: 1.3;
	border: 0;
	padding: 0;
}

/*
 * Column count comes from --adt-footer-cols (set inline by PHP). Declaring it
 * this way — rather than writing grid-template-columns inline — is what lets
 * the media queries below actually take effect on small screens.
 */
.adt-footer-cols {
	display: grid;
	grid-template-columns: repeat(var(--adt-footer-cols, 3), minmax(0, 1fr));
	gap: 32px;
	padding-bottom: 40px;
}

.adt-footer .widget { margin: 0; }

.adt-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adt-footer li {
	padding: 6px 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	border: 0;
}

.adt-footer li > a {
	font-family: var(--adt-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	color: inherit;
	letter-spacing: 0;
}

.adt-footer-brand { min-width: 0; }

.adt-footer-brand .adt-brand-text,
.adt-footer-brand .adt-brand-text a {
	color: var(--adt-footer-heading, #fff);
	font-size: 1.375rem;
}

.adt-footer-brand p {
	line-height: 1.6;
	margin: 10px 0 0;
}

.adt-footer-brand img,
.adt-footer-logo img {
	max-width: min(100%, var(--adt-footer-logo-width, 200px));
	height: auto;
	width: auto;
}

.adt-footer-logo {
	margin-bottom: 12px;
}

.adt-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.adt-social li { padding: 0; }

.adt-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: background-color 0.2s ease;
}

.adt-social a:hover {
	background: var(--adt-accent);
	color: #fff;
}

.adt-social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.adt-footer-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-block: 20px;
	font-size: 0.8125rem;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: center;
	justify-content: space-between;
}

.adt-footer-bar .adt-topbar-links {
	gap: 10px 18px;
	flex-wrap: wrap;
}

.adt-footer-bar li { padding: 0; }
/* --------------------------------------------------------------------------
   Article header (single posts)
   -------------------------------------------------------------------------- */

.adt-article-head {
	margin-bottom: 32px;
}

.adt-article-head--center {
	text-align: center;
}

.adt-article-head .adt-eyebrow {
	margin-bottom: 12px;
}

.adt-article-head--center .adt-eyebrow--pill {
	align-self: center;
	display: inline-block;
}

.adt-article-title {
	/* Never wider than the viewport allows, never larger than the setting. */
	font-size: clamp(1.75rem, 5.2vw, var(--adt-article-title-size, 44px));
	line-height: 1.06;
	margin: 0;
	letter-spacing: var(--adt-heading-tracking);
}

.adt-article-dek {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--adt-muted);
	margin: 16px 0 0;
	max-width: 62ch;
}

.adt-article-head--center .adt-article-dek {
	margin-inline: auto;
}

/* Featured image */

.adt-article-figure {
	margin: 26px 0 0;
}

.adt-article-figure--contained {
	max-width: 680px;
}

.adt-article-head--center .adt-article-figure--contained {
	margin-inline: auto;
}

.adt-article-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--adt-radius);
}

.adt-article-figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-family: var(--adt-font-meta);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--adt-muted);
	padding-top: 10px;
	text-align: start;
}

.adt-article-head--center .adt-article-figcaption {
	justify-content: center;
}

.adt-figcaption-credit {
	opacity: 0.75;
}

/* Share row */

.adt-share {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-block: 16px;
	border-block: 1px solid var(--adt-line);
}

.adt-article-head--center .adt-share {
	justify-content: center;
}

.adt-share-label {
	font-family: var(--adt-font-meta);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--adt-ink);
}

.adt-share-list {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.adt-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--adt-share-color, var(--adt-muted));
	color: #fff;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.adt-share-btn:hover,
.adt-share-btn:focus-visible {
	transform: translateY(-2px);
	opacity: 0.88;
	color: #fff;
}

.adt-share-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.adt-share-copied {
	font-family: var(--adt-font-meta);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--adt-accent);
}

/* Byline */

.adt-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.adt-article-head--center .adt-byline {
	justify-content: center;
}

.adt-byline-avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.adt-byline-avatar img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

.adt-byline-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-align: start;
}

.adt-byline-name a {
	font-family: var(--adt-font-heading);
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--adt-ink);
}

.adt-byline-name a:hover {
	color: var(--adt-accent);
}

.adt-byline-role,
.adt-byline-meta {
	font-family: var(--adt-font-meta);
	font-size: 0.8125rem;
	color: var(--adt-muted);
}

.adt-byline-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

/* --------------------------------------------------------------------------
   Single post polish
   -------------------------------------------------------------------------- */

.adt-active.page .entry-title {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	line-height: 1.08;
}

.adt-active.single .entry-content > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: var(--adt-ink-soft);
}

.adt-active.single .entry-content blockquote {
	border-left: 4px solid var(--adt-accent);
	padding-left: 22px;
	margin-inline: 0;
	font-family: var(--adt-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Dark mode

   Only the variables change — every component already reads from them.
   Applied by the toggle (data-adt-theme) or by the OS preference when the
   visitor has not chosen explicitly.
   -------------------------------------------------------------------------- */

:root[data-adt-theme="dark"] {
	color-scheme: dark;
	--adt-ink: #f1f3f5;
	--adt-ink-soft: #ccd2d9;
	--adt-muted: #98a1ac;
	--adt-line: #2b3138;
	--adt-surface: #191d23;
	--adt-card-bg: #14171c;
	--adt-page-bg: #0f1216;
	--adt-header-bg: #14171c;
	--adt-navbar-bg: #14171c;
	--adt-nav-link: #f1f3f5;
	--adt-footer-bg: #0b0d10;
	--adt-footer-text: #98a1ac;
	--adt-footer-heading: #f1f3f5;
	--adt-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	--adt-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
	:root[data-adt-theme="auto"] {
		color-scheme: dark;
		--adt-ink: #f1f3f5;
		--adt-ink-soft: #ccd2d9;
		--adt-muted: #98a1ac;
		--adt-line: #2b3138;
		--adt-surface: #191d23;
		--adt-card-bg: #14171c;
		--adt-page-bg: #0f1216;
		--adt-header-bg: #14171c;
		--adt-navbar-bg: #14171c;
		--adt-nav-link: #f1f3f5;
		--adt-footer-bg: #0b0d10;
		--adt-footer-text: #98a1ac;
		--adt-footer-heading: #f1f3f5;
	}
}

/* Keep the parent theme's surfaces in step with ours. */
:root[data-adt-theme="dark"] body.adt-active,
:root[data-adt-theme="dark"] .adt-active .site-content,
:root[data-adt-theme="dark"] .adt-active .inside-article,
:root[data-adt-theme="dark"] .adt-active .entry-content {
	background-color: var(--adt-page-bg);
	color: var(--adt-ink-soft);
}

/* --------------------------------------------------------------------------
   Responsive

   Ordered widest-first so each block narrows what came before it.
   -------------------------------------------------------------------------- */

/* Nothing may push the page wider than the viewport. */
.adt-active img,
.adt-active video,
.adt-active iframe,
.adt-active embed,
.adt-active object {
	max-width: 100%;
}

.adt-active img,
.adt-active video {
	height: auto;
}

.adt-active pre,
.adt-active table {
	max-width: 100%;
	overflow-x: auto;
	display: block;
}

.adt-active .entry-content a {
	overflow-wrap: break-word;
}

@media (max-width: 1024px) {
	.adt-feed-layout,
	.adt-feed-layout--left,
	.adt-feed-layout--right {
		grid-template-columns: minmax(0, 1fr);
	}

	.adt-feed-layout--left .adt-feed-main,
	.adt-feed-layout--left .adt-feed-aside {
		order: 0;
	}

	.adt-hero-grid,
	.adt-hero--split .adt-hero-grid {
		grid-template-columns: 1fr;
	}

	.adt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.adt-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.adt-feed-list--grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/*
	 * Sticky sidebars are desktop-only. On a narrow screen the sidebar sits
	 * above or below the content in normal flow, where sticking it would
	 * pin an ad over the article.
	 */
	.adt-feed-aside.is-sticky,
	.adt-active.adt-sticky-sidebar .sidebar.is-right-sidebar,
	.adt-active.adt-sticky-sidebar .sidebar.is-left-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* Point at which the inline menu gives way to the drawer. */
@media (max-width: 900px) {
	.adt-nav,
	.adt-navbar,
	.adt-header-btn:not(.adt-btn--mobile-only) {
		display: none;
	}

	.adt-menu-toggle { display: inline-flex; }

	.adt-header--left .adt-header-brand { order: 0; }

	.adt-header-inner {
		gap: 8px;
		min-height: 64px;
	}

	.adt-header-left,
	.adt-header-right { gap: 2px; }

	/* Give the brand the room the menu just gave up. */
	.adt-header-brand { flex: 1 1 auto; }

	.adt-brand-text { font-size: clamp(1.05rem, 4.4vw, 1.5rem); }

	.adt-brand-tagline {
		font-size: 0.5625rem;
		letter-spacing: 0.06em;
	}

	.adt-brand-logo img { max-height: 40px; }

	.adt-icon-btn { padding: 0 6px; }

	/* The word next to the hamburger costs width we need. */
	.adt-menu-toggle span:not(.adt-screen-reader-text) { display: none; }

	.adt-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
	.adt-menu-toggle { display: none; }
	.adt-btn--mobile-only { display: none; }
}

@media (max-width: 782px) {
	body.admin-bar .adt-header.is-sticky { top: 46px; }
}

@media (max-width: 767px) {
	:root {
		--adt-block-gap: 40px;
		--adt-gutter: 20px;
	}

	.adt-grid--2,
	.adt-grid--3,
	.adt-grid--4,
	.adt-feed-list--grid2,
	.adt-feed-list--grid3 {
		grid-template-columns: 1fr;
	}

	.adt-card--overlay { min-height: 320px; }
	.adt-card--overlay .adt-card-body { padding: 18px; }

	.adt-card--list { gap: 14px; }

	.adt-card--list .adt-card-media {
		flex-basis: 40%;
		max-width: 40%;
	}

	.adt-trending {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.adt-trending-track { width: 100%; }

	.adt-section-head {
		flex-wrap: wrap;
		gap: 6px;
	}

	.adt-home-wrap { padding-block: 22px 0; }

	/* Article header */
	.adt-share {
		gap: 10px;
		margin-top: 18px;
	}

	.adt-share-list { gap: 6px; }

	.adt-share-btn {
		width: 36px;
		height: 36px;
	}

	.adt-byline { gap: 10px; }

	.adt-byline-avatar img {
		width: 40px;
		height: 40px;
	}

	.adt-article-figcaption { font-size: 0.75rem; }

	/* Footer */
	.adt-footer {
		padding-top: 36px;
		margin-top: 44px;
	}

	.adt-footer-cols {
		gap: 26px;
		padding-bottom: 30px;
	}

	.adt-footer-bar {
		justify-content: center;
		text-align: center;
		gap: 12px;
	}

	.adt-footer-bar .adt-topbar-links { justify-content: center; }

	.adt-topbar .adt-container {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

@media (max-width: 600px) {
	/* One column: any more and the words start stacking on top of each other. */
	.adt-footer-cols { grid-template-columns: 1fr; }

	.adt-footer-brand { text-align: start; }

	.adt-cta { padding: 26px 20px; }
}

@media (max-width: 480px) {
	.adt-card--list {
		flex-direction: column;
	}

	.adt-card--list .adt-card-media {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}

	.adt-share-label { display: none; }

	.adt-byline {
		align-items: flex-start;
	}
}