/* Headless "What's new" post (whats-new/single.php). Token names and values: albumteller-cms src/styles.css,
   the same set as facelift/facelift.css. theme.1.css is loaded first for the builder's layout classes; the
   rules below override its dark-site colours, so both ?theme=dark and ?theme=light read correctly. */

:root {
	--at-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--at-radius: 0.5rem;
	--at-primary: #ffdd00;
	--at-primary-foreground: #1b1b1b;
}

:root.at-dark {
	--at-background: #141414;
	--at-foreground: #f5f5f5;
	--at-muted-foreground: #a3a3a3;
	--at-border: #2c2c2c;
	--at-link: var(--at-primary);
	color-scheme: dark;
}

:root.at-light {
	--at-background: #f5f5f5;
	--at-foreground: #1b1b1b;
	--at-muted-foreground: #5f5f5f;
	--at-border: #e3e3e3;
	--at-link: #1b1b1b;
	color-scheme: light;
}

html,
body.at-whats-new {
	background: var(--at-background) !important;
	color: var(--at-foreground) !important;
	font-family: var(--at-font-sans);
	margin: 0;
}

/* Inside the app's dialog the page takes the dialog's own surface. color-scheme goes back to normal because
   Chromium paints an opaque backdrop behind an iframe whose color-scheme differs from its embedder's. */
:root.at-embedded,
:root.at-embedded body.at-whats-new {
	background: transparent !important;
	color-scheme: normal;
}

/* The app's dark dialog is #424242, lighter than our #141414: #a3a3a3 there is ~4.0:1, under WCAG AA. */
:root.at-embedded.at-dark {
	--at-muted-foreground: #c4c4c4;
}

.at-wn {
	max-width: 720px;
	margin: 0 auto;
	padding: 32px 24px 40px;
	box-sizing: border-box;
}

.at-wn .uk-section,
.at-wn .uk-tile {
	padding: 0 !important;
	background: transparent !important;
}

.at-wn .uk-container {
	max-width: none;
	padding: 0;
}

.at-wn :is(h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-heading-small, .uk-heading-medium) {
	color: var(--at-foreground) !important;
	font-family: var(--at-font-sans);
	text-transform: none;
	letter-spacing: normal;
}

/* YOOtheme's .uk-margin-large leaves 40px under each heading; keep the 40px above it, tighten below. */
.at-wn :is(h1, h2, h3) {
	margin-bottom: 0 !important;
}

.at-wn :is(h1, h2, h3) + * {
	margin-top: 12px !important;
}

.at-wn :is(p, li, .uk-text-lead) {
	color: var(--at-muted-foreground) !important;
	line-height: 1.6;
}

.at-wn strong {
	color: var(--at-foreground);
}

.at-wn a {
	color: var(--at-link) !important;
	text-decoration: underline;
	text-decoration-color: var(--at-primary);
	text-underline-offset: 3px;
}

.at-wn img {
	max-width: 100%;
	height: auto;
	border-radius: var(--at-radius);
}

.at-wn .at-wn-label {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--at-radius);
	background: var(--at-primary);
	color: var(--at-primary-foreground) !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.at-wn .uk-list > li::before,
.at-wn .uk-list-disc > li::marker {
	color: var(--at-primary);
}

.at-wn hr,
.at-wn .uk-divider-icon {
	border-color: var(--at-border);
}