/*
Theme Name: I Am That, I Am Muse
Theme URI: https://shaylehv.com/
Author: Muse
Author URI:
Description: An original, lightweight WordPress design inspired by shaylehv.com. Slim top utility bar with social icons, white header with sea-green accents, a featured posts slider and four-column photo strip, card-style content on a soft gray background, right sidebar, and dark footer. No license key, no upsells, no external requests.
Version: 1.9.27
Requires at least: 5.8
Tested up to: 7.1
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: shay-lehv
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   TABLE OF CONTENTS
   1. Variables & reset
   2. Typography
   3. Layout
   4. Header (branding, navigation, tools, search panel)
   5. Featured posts strip
   6. Cards & post listings
   7. Single post & page
   8. Sidebar & widgets
   9. Footer
   10. Comments
   11. Pagination & post navigation
   12. Forms, buttons & search
   13. Breadcrumbs & share buttons
   14. Accessibility helpers
   15. Responsive
   16. Sticky posts & post formats
   17. Related posts
   18. Back-to-top button
   19. Animations & motion
   20. Top utility bar
   21. Featured slider
   22. Custom widgets: Most Viewed & News in Pictures
   ============================================================ */

/* 1. Variables & reset
   ------------------------------------------------------------ */
:root {
	--sl-accent: #5fb89b;
	--sl-accent-dark: #469e7f;
	--sl-text: #4a4a4a;
	--sl-heading: #333333;
	--sl-muted: #999999;
	--sl-bg: #f1f1f1;
	--sl-card: #ffffff;
	--sl-border: #e5e5e5;
	--sl-footer-bg: #2c2c2c;
	--sl-footer-text: #bbbbbb;
	--sl-serif: Georgia, "Times New Roman", Times, serif;
	--sl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sl-bg);
	color: var(--sl-text);
	font-family: var(--sl-sans);
	font-size: 16px;
	line-height: 1.7;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--sl-accent);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--sl-accent-dark);
}

/* 2. Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sl-serif);
	color: var(--sl-heading);
	line-height: 1.3;
	font-weight: 400;
	margin: 0 0 0.6em;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.2em; }

blockquote {
	margin: 0 0 1.2em;
	padding: 0.6em 0 0.6em 1.2em;
	border-left: 4px solid var(--sl-accent);
	color: var(--sl-heading);
	font-style: italic;
}

/* 3. Layout
   ------------------------------------------------------------ */
.sl-container {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.sl-site-main {
	padding: 40px 0 60px;
}

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

/* v1.9.22: full-width layout when the sidebar is hidden (Gallery page option). */
.sl-layout.sl-no-sidebar {
	grid-template-columns: 1fr;
}

.sl-card {
	background: var(--sl-card);
	padding: 40px;
	margin-bottom: 32px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	position: relative;
}

/* 4. Header (v1.6.6: Nucleare-style order — utility bar, plain-text nav row,
   then the branding on a pale panel)
   ------------------------------------------------------------ */
.sl-site-header {
	background: #f5f5f4;
	transition: box-shadow 0.25s ease;
}

.sl-site-header.sl-scrolled {
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
}

.sl-branding {
	padding: 34px 0 30px;
	text-align: center;
}

/* 4b. Knowledge banner (v1.9.10): Shay's Website Knowledge text, shown
   below the site title/tagline on every page.
   v1.9.18: edge-to-edge — the banner now lives outside .sl-container
   (see header.php), so its background and borders stretch the full
   viewport width with no side gaps. The text keeps its readable width. */
.sl-knowledge-banner {
	margin: 0;
	padding: 14px 20px;
	text-align: center;
	background: rgba(95, 184, 155, 0.12);
	border-top: 2px solid var(--sl-accent);
	border-bottom: 2px solid var(--sl-accent);
}

.sl-knowledge-banner p {
	margin: 0 auto;
	max-width: 72ch;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--sl-text);
}

.sl-site-title {
	font-family: var(--sl-serif);
	font-size: 1.9rem;
	margin: 0;
}

.sl-site-title a {
	color: var(--sl-heading);
}

.sl-site-description {
	margin: 4px 0 0;
	color: var(--sl-muted);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
}

.custom-logo {
	max-height: 90px;
	width: auto;
}

/* Primary navigation (v1.6.6): Nucleare-style plain-text menu row — white
   background, no bar; mint-green uppercase links; the green square search
   button sits at the right of the same row.
   v1.7.0: the whole row is sticky — it stays put at the top while the page
   scrolls beneath it. Disable via the "Keep the menu bar fixed" Customizer
   toggle (adds body.sl-sticky-off). */
/* v1.8.0: the two header rows (utility bar + menu bar) stick together as
   one unit, like the reference header's sticky bar. Disable via the "Keep
   the menu bar fixed" Customizer toggle (adds body.sl-sticky-off). */
.sl-sticky-head {
	position: sticky;
	top: 0;
	z-index: 300;
}

body.sl-sticky-off .sl-sticky-head {
	position: static;
}

/* Keep the sticky header clear of the WordPress admin bar for logged-in users. */
.admin-bar .sl-sticky-head {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sl-sticky-head {
		top: 46px;
	}
}

.sl-primary-nav {
	background: #ffffff;
	border-bottom: 1px solid var(--sl-border);
}

.sl-nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* v1.6.9: nowrap (was wrap). Flex line-breaking happens BEFORE shrinking,
	   using each item's flex-basis: the long menu's base width overflowed the
	   row, so it claimed a line all alone and the search button dropped to
	   its own line. With nowrap there is a single line: the menu shrinks in
	   place (see #sl-primary-menu) and the buttons stay pinned at the right. */
	flex-wrap: nowrap;
	/* v1.7.0: full-width row like the reference header (no container cap).
	   v1.9.19: side padding restored — only the green knowledge banner
	   goes edge-to-edge, the menu bar keeps its spacing as before. */
	padding-left: 18px;
	padding-right: 18px;
}

/* v1.7.0: a single row — the links never wrap to a second line.
   v1.7.4: the list is NOT a scroll container on desktop (overflow visible)
   because a scroll container clips the absolutely-positioned hover
   dropdowns. The single scrollable line is kept only on small screens
   (see media query below), where tapped submenus open as a fixed panel
   under the nav instead of an absolutely-positioned dropdown. */
.sl-primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: visible;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* v1.8.0: the menu list is never a scroll container — on desktop the
   hover dropdowns need overflow visible, and on small screens the whole
   menu bar is hidden (the drawer carries the menu as an accordion). */

.sl-primary-nav ul::-webkit-scrollbar {
	display: none;
}

/* v1.6.7 + v1.6.9: the menu list flexes to fill the row and may shrink below
   its content width (min-width:0), so the buttons stay pinned at the right
   of the same single row. */
#sl-primary-menu {
	flex: 1 1 auto;
	min-width: 0;
}

.sl-primary-nav li {
	position: relative;
	flex-shrink: 0;
}

.sl-primary-nav a {
	display: block;
	padding: 15px 9px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sl-accent);
}

.sl-primary-nav a:hover,
.sl-primary-nav a:focus {
	color: var(--sl-accent-dark);
}

.sl-primary-nav .current-menu-item > a,
.sl-primary-nav .current-menu-ancestor > a {
	color: var(--sl-accent-dark);
}

/* v1.9.4: small down-arrow on top-menu links that have a submenu, like
   the Nucleare theme's caret indicator. A pure-CSS chevron (original
   code), sized in em so it scales with the menu type; decorative only
   (pointer-events: none) so taps and clicks still hit the link toggle. */
.sl-primary-nav li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.5em;
	vertical-align: 0.1em;
	border-right: 0.13em solid currentColor;
	border-bottom: 0.13em solid currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}
/* The arrow points up while its submenu panel is open. */
.sl-primary-nav li.menu-item-has-children.sl-sub-open > a::after {
	transform: rotate(225deg);
	vertical-align: 0;
}

/* House icon used as the entire Home link label (added via wp_nav_menu_items filter). */
.sl-home-icon {
	width: 17px;
	height: 17px;
	fill: currentColor;
	vertical-align: -3px;
}

.sl-primary-nav ul ul {
	display: flex;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--sl-card);
	border: 1px solid var(--sl-border);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	z-index: 50;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.sl-primary-nav li:not(.sl-sub-dismissed):hover > ul,
.sl-primary-nav li:not(.sl-sub-dismissed):focus-within > ul,
.sl-primary-nav li.sl-sub-open > ul {
	display: flex;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.sl-primary-nav ul ul a {
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	color: var(--sl-text);
}

.sl-primary-nav ul ul a:hover,
.sl-primary-nav ul ul a:focus {
	color: var(--sl-accent-dark);
	background: rgba(95, 184, 155, 0.1);
}

/* v1.8.0: the small-screen fixed submenu panel is gone — Row 2 (the menu
   bar) is hidden on small screens and the drawer carries the menu as a
   tap-to-expand accordion instead, so there is nothing to pin. */

/* v1.7.4: hover dropdowns are back in the top row (the v1.7.0 kill-switch
   below was removed — it had disabled them because the scrollable row
   clipped them, but the drawer no longer carries the menu tree, so the
   submenu links were unreachable anywhere). The menu list is no longer a
   scroll container on desktop (see overflow change above); on small screens
   a tapped parent opens its submenu as a fixed panel under the nav. */

/* Hamburger button (v1.7.0): always visible on every screen size — it opens
   the slide-in drawer, like the reference header. Icon only. */
.sl-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	padding: 0;
	margin-left: 10px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--sl-heading);
}

.sl-menu-toggle:hover .sl-bars,
.sl-menu-toggle:hover .sl-bars::before,
.sl-menu-toggle:hover .sl-bars::after {
	background: var(--sl-accent);
}

.sl-menu-toggle .sl-bars {
	display: inline-block;
	width: 22px;
	height: 2px;
	background: var(--sl-heading);
	position: relative;
}

.sl-menu-toggle .sl-bars::before,
.sl-menu-toggle .sl-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--sl-heading);
}

.sl-menu-toggle .sl-bars::before { top: -7px; }
.sl-menu-toggle .sl-bars::after { top: 7px; }

.sl-social-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.sl-social-menu a {
	display: block;
	padding: 8px 7px;
	color: var(--sl-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sl-social-menu a:hover {
	color: var(--sl-accent);
}

/* Social Links icon row (v1.3.0): hand-drawn SVG icons from Customizer URLs. */
.sl-social-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}

.sl-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 7px;
	color: var(--sl-muted);
	transition: color 0.2s ease, transform 0.2s ease;
}

.sl-social-icon:hover {
	color: var(--sl-accent);
	transform: translateY(-1px);
}

.sl-social-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.sl-search-toggle {
	background: var(--sl-accent);
	border: none;
	border-radius: 3px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	padding: 0;
	color: #fff;
	margin-left: 12px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sl-search-toggle:hover {
	background: var(--sl-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}

.sl-search-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: none;
	stroke: currentColor;
}

.sl-header-search {
	background: var(--sl-card);
	border-top: 1px solid var(--sl-border);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	transition: max-height 0.28s ease, opacity 0.28s ease, padding 0.28s ease;
}

.sl-topbar.sl-search-open .sl-header-search {
	max-height: 220px;
	opacity: 1;
	padding: 18px 0;
}

.sl-header-search .sl-container {
	max-width: 640px;
}

/* 20. Top utility bar (v1.8.0: first row of the final two-row header)
   ------------------------------------------------------------
   Slim white bar at the very top with a mint-green top border. LEFT: the
   hamburger button, which slides the Recent / Popular / Random drawer in
   from the left. RIGHT: the social icons and the green search button.
   On small screens the social icons hide (they also live in the drawer's
   Follow section) leaving hamburger + search. All styles below are
   original. */
.sl-topbar {
	background: #ffffff;
	border-top: 3px solid var(--sl-accent);
	border-bottom: 1px solid var(--sl-border);
	position: relative;
}

.sl-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	min-height: 48px;
}

.sl-topbar-right {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

/* The hamburger and search button sit in a slimmer bar here than the old
   nav row, so they render slightly smaller. */
.sl-topbar .sl-menu-toggle {
	width: 40px;
	height: 40px;
	margin-left: 0;
}

.sl-topbar .sl-search-toggle {
	width: 38px;
	height: 38px;
	margin-left: 8px;
}

.sl-topbar .sl-search-toggle svg {
	width: 17px;
	height: 17px;
}

.sl-topbar .sl-social-icons {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.sl-topbar .sl-social-icon {
	padding: 5px 6px;
	color: #bdbdbd;
}

.sl-topbar .sl-social-icon:hover,
.sl-topbar .sl-social-icon:focus {
	color: var(--sl-accent);
}

.sl-topbar .sl-social-icon svg {
	width: 15px;
	height: 15px;
}

.sl-topbar .sl-social-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.sl-topbar .sl-social-menu a {
	display: block;
	padding: 5px 8px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sl-muted);
}

.sl-topbar .sl-social-menu a:hover,
.sl-topbar .sl-social-menu a:focus {
	color: var(--sl-accent);
}

/* v1.9.0: tablet-landscape sliding menu (e.g. iPad mini at 1133px wide).
   The full 10-item desktop menu bar no longer fits at these widths — items
   bled past the right edge with no way to reach them. In this range the
   menu list becomes a horizontally sliding strip (touch momentum, hidden
   scrollbar) so every item can be reached. v1.9.1 locked the strip to
   horizontal-only movement (overflow-y hidden + touch-action pan-x).
   v1.9.2: a tapped parent opens its submenu as a fixed overlay panel
   pinned under the sticky header (positioned by navigation.js) — the
   v1.9.0 in-flow accordion made the menu bar grow and shrink vertically,
   which is the up/down movement to eliminate. The bar now never changes
   height: it only ever slides left/right. Hover/focus dropdowns stay
   exactly as before above 1400px. All styles below are original. */
@media (max-width: 1400px) {
	.sl-primary-nav ul#sl-primary-menu {
		overflow-x: auto;
		overflow-y: hidden; /* v1.9.1: the bar slides left/right ONLY — never up/down. */
		/* v1.9.16: REMOVED -webkit-overflow-scrolling: touch (was here).
		   On iOS, a fixed-position descendant of a -webkit-overflow-scrolling
		   container resolves against the scroll strip instead of the viewport —
		   that parked the open dropdown panel ~120px below the menu bar,
		   underneath the hero section. The property is legacy (a no-op since
		   iOS 13 — overflow:auto momentum-scrolls natively), so removing it
		   costs nothing and lets the panel pin to the viewport correctly. */
		touch-action: pan-x; /* touch pans horizontally only; vertical swipes scroll the page. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.sl-primary-nav ul#sl-primary-menu::-webkit-scrollbar {
		display: none;
	}
	/* Slightly tighter type so more items show before sliding.
	   v1.9.16: tighter horizontal padding (was 7px) — items sit closer,
	   as requested. */
	.sl-primary-nav a {
		padding: 13px 5px;
		font-size: 10.5px;
		letter-spacing: 0.05em;
		touch-action: manipulation;
	}
	/* No hover/focus dropdowns in the sliding range — tap toggles. */
	.sl-primary-nav li:not(.sl-sub-dismissed):hover > ul,
	.sl-primary-nav li:not(.sl-sub-dismissed):focus-within > ul {
		display: none;
		opacity: 0;
		visibility: hidden;
	}
	/* v1.9.2: tapped submenu opens as a fixed overlay panel pinned under
	   the sticky header (its top is set by navigation.js), so the scroll
	   container never clips it AND the menu bar never changes height —
	   the bar only ever slides left/right, never up/down.
	   v1.9.5: the open panel must ALSO win when the tapped item keeps a
	   :hover/:focus-within (touch screens leave a sticky :hover on the
	   tapped link). The hover-kill rule above out-specifies the plain open
	   rule, so a tap then looked like nothing happened; the stronger
	   :hover/:focus-within selectors below tie-or-beat it (later in source
	   wins ties), so the tapped panel always shows.
	   v1.9.14: the tripled class on the first selector below out-specifies
	   the hover-kill rule outright — the open panel wins with no tie-break
	   needed, on every browser. */
	.sl-primary-nav li.sl-sub-open.sl-sub-open.sl-sub-open > ul,
	.sl-primary-nav li.sl-sub-open:hover > ul,
	.sl-primary-nav li.sl-sub-open:focus-within > ul {
		display: flex;
		position: fixed;
		left: var(--sl-nav-panel-left, 0);
		right: auto;
		top: var(--sl-nav-panel-top, 120px);
		min-width: 220px;
		max-width: 90vw;
		bottom: auto;
		min-width: 0;
		max-height: 60vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 250;
		background: var(--sl-card);
		border: none;
		border-top: 1px solid var(--sl-border);
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition: opacity 0.22s ease;
	}
}

/* v1.9.17: the separate caret buttons (v1.9.13–v1.9.16) are removed —
   back to the clean look from before: each parent is just its link with
   the small decorative CSS chevron (::after, v1.9.4, which was hidden
   while the buttons existed and now shows again). One tap on the parent
   link toggles the dropdown (see navigation.js). Nothing else takes up
   space, so the menu items sit close together again.
   v1.9.20: the arrow is back in BLACK (Shay's preference) — a compact
   inline ▾ inside the parent link instead of a separate button, so the
   menu keeps its tight spacing. Tapping the link (arrow included)
   toggles the dropdown, and the arrow flips when open. */
@media (max-width: 1400px) {
	.sl-primary-nav li.menu-item-has-children > a::after {
		content: '▾';
		width: auto;
		height: auto;
		margin-left: 6px;
		border: none;
		transform: none;
		opacity: 1;
		color: #000;
		font-size: 11px;
		line-height: 1;
	}
	.sl-primary-nav li.sl-sub-open > a::after {
		transform: rotate(180deg);
	}
}

@media (max-width: 1025px) {
	.sl-topbar .sl-social-icons,
	.sl-topbar .sl-social-menu {
		display: none;
	}
	/* v1.8.0: on small screens the menu bar (Row 2) is hidden entirely —
	   the drawer carries the menu as a tap-to-expand accordion. */
	.sl-primary-nav {
		display: none;
	}
}

/* 22. Slide-in drawer (v1.7.0; v1.8.0: slides in from the LEFT)
   ------------------------------------------------------------
   Left-side panel opened by the hamburger button in the top utility bar.
   Holds the Recent / Popular / Random post tabs and the Follow social
   icons; on small screens it also carries the primary menu as a
   tap-to-expand accordion (the top menu bar is hidden there). Slides in
   over a dimmed overlay. All styles below are original. */
.sl-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 28, 26, 0.5);
	z-index: 350;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.sl-drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	height: 100dvh;
	width: min(340px, 88vw);
	background: #ffffff;
	z-index: 400;
	display: flex;
	flex-direction: column;
	box-shadow: 10px 0 34px rgba(0, 0, 0, 0.14);
	transform: translateX(-103%);
	transition: transform 0.32s ease;
}

/* The [hidden] attribute must win over the flex display above. */
.sl-drawer[hidden],
.sl-drawer-overlay[hidden] {
	display: none !important;
}

body.sl-drawer-open .sl-drawer {
	transform: translateX(0);
}

body.sl-drawer-open .sl-drawer-overlay {
	opacity: 1;
}

.sl-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--sl-border);
	flex-shrink: 0;
}

.sl-drawer-title {
	margin: 0;
	font-family: var(--sl-serif);
	font-size: 1.15rem;
	color: var(--sl-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sl-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--sl-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--sl-heading);
}

.sl-drawer-close:hover {
	border-color: var(--sl-accent);
	color: var(--sl-accent);
}

.sl-drawer-close svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	display: block;
}

.sl-drawer-body {
	padding: 8px 20px 28px;
	overflow-y: auto;
}

.sl-drawer-section {
	margin-top: 20px;
}

.sl-drawer-heading {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-muted);
}

.sl-drawer .sl-social-icons {
	gap: 6px;
}

.sl-drawer .sl-social-icon {
	padding: 9px;
	border: 1px solid var(--sl-border);
	border-radius: 50%;
}

.sl-drawer .sl-social-icon:hover,
.sl-drawer .sl-social-icon:focus {
	border-color: var(--sl-accent);
}

.sl-drawer .sl-social-icon svg {
	width: 17px;
	height: 17px;
}

/* Drawer tabs: Recent / Popular / Random (v1.7.2). */
.sl-drawer-tabs {
	display: flex;
	gap: 18px;
	border-bottom: 1px solid var(--sl-border);
	margin-bottom: 14px;
}

.sl-drawer-tab {
	background: none;
	border: none;
	padding: 10px 2px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.sl-drawer-tab:hover {
	color: var(--sl-accent);
}

.sl-drawer-tab.is-active {
	color: var(--sl-accent-strong);
	border-bottom-color: var(--sl-accent);
	font-weight: 700;
}

/* Drawer post lists shown under each tab (v1.7.2). */
.sl-drawer-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-drawer-posts li {
	border-bottom: 1px solid var(--sl-border);
}

.sl-drawer-posts a {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 2px;
	text-decoration: none;
}

.sl-drawer-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--sl-accent-soft);
}

.sl-drawer-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sl-drawer-thumb-empty {
	background: linear-gradient(135deg, var(--sl-accent-soft), var(--sl-border));
}

.sl-drawer-posttext {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sl-drawer-posttitle {
	font-size: 14px;
	font-weight: 600;
	color: var(--sl-accent-strong);
	line-height: 1.35;
}

.sl-drawer-posts a:hover .sl-drawer-posttitle {
	text-decoration: underline;
}

.sl-drawer-postdate {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sl-muted);
}

/* v1.8.0: the drawer's mobile menu accordion. Hidden on desktop (the menu
   bar shows the menu there); on small screens it is the menu. Parent items
   get a +/- expander button (wired in js/navigation.js); tapping it opens
   the submenu in place, accordion-style. */
.sl-drawer-menu {
	display: none;
	border-bottom: 1px solid var(--sl-border);
	margin-bottom: 14px;
	padding-bottom: 6px;
}

.sl-drawer-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-drawer-menu > ul > li {
	border-bottom: 1px solid var(--sl-border);
}

.sl-drawer-menu > ul > li:last-child {
	border-bottom: none;
}

.sl-drawer-menu a {
	display: block;
	padding: 12px 40px 12px 2px;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-heading);
	text-decoration: none;
}

.sl-drawer-menu a:hover,
.sl-drawer-menu a:focus {
	color: var(--sl-accent);
}

.sl-drawer-menu li {
	position: relative;
}

.sl-drawer-menu ul ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.sl-drawer-menu li.sl-msub-open > ul {
	max-height: 1200px;
}

.sl-drawer-menu ul ul a {
	padding: 10px 40px 10px 16px;
	font-size: 12px;
	color: var(--sl-muted);
}

.sl-drawer-menu ul ul ul a {
	padding-left: 30px;
}

.sl-sub-expand {
	position: absolute;
	top: 2px;
	right: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-left: 1px solid var(--sl-border);
	cursor: pointer;
	color: var(--sl-accent);
	font-size: 18px;
	line-height: 1;
	padding: 0;
}

.sl-sub-expand:hover,
.sl-sub-expand:focus {
	color: var(--sl-accent-dark);
}

.sl-sub-expand .sl-plus {
	display: block;
	transition: transform 0.25s ease;
}

li.sl-msub-open > .sl-sub-expand .sl-plus {
	transform: rotate(45deg);
}

@media (max-width: 1025px) {
	.sl-drawer-menu {
		display: block;
	}
}

/* 21. Featured slider (v1.9.0)
   ------------------------------------------------------------
   Single-panel FEATURED hero below the menu bar — the site owner's
   preferred look (replaces the v1.6.4 3-up carousel): one large photo
   panel with a dark gradient overlay carrying a "Featured" kicker and
   the post title, round side arrows, and dot indicators. Shows random
   posts with featured images; the server renders a pool of candidates
   and js/slider.js shuffles them on every visit (a page cache would
   freeze one fixed pick) and keeps the configured count. Appears on all
   pages when the Customizer "Show slider on all pages" option is on.
   Auto-advance and pause behavior live in js/slider.js.
   All styles below are original. */

/* Guard for the full-bleed slider: viewport rounding must never create a
   horizontal scrollbar. */
html,
body {
	overflow-x: clip;
}

/* v1.9.3: the hero floats as an inset card — slightly narrower than the
   page edges, with rounded corners — instead of stretching edge to edge. */
.sl-featured-slider {
	position: relative;
	margin: 8px 22px 30px;
	border-radius: 20px;
	overflow: hidden;
	background: #232323;
}
@media (max-width: 600px) {
	.sl-featured-slider {
		margin: 6px 12px 24px;
		border-radius: 14px;
	}
}

.sl-slides {
	position: relative;
	aspect-ratio: 21 / 8;
	min-height: 260px;
	max-height: 480px;
}

.sl-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.sl-slide.sl-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity 0.6s ease;
}

body.sl-animations-off .sl-slide {
	transition: none;
}

.sl-slide-link {
	display: block;
	width: 100%;
	height: 100%;
}

.sl-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sl-slide-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 70px 26px 22px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.sl-slide-kicker {
	display: block;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sl-accent);
	margin-bottom: 6px;
}

.sl-slide-title {
	display: block;
	font-family: var(--sl-serif);
	font-size: clamp(1.25rem, 2.6vw, 2rem);
	line-height: 1.25;
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.sl-slide-link:hover .sl-slide-title,
.sl-slide-link:focus .sl-slide-title {
	color: var(--sl-accent);
}

/* Round side arrows shared with the picture strip. */
.sl-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	transition: background 0.2s ease;
}

.sl-featured-slider .sl-slider-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
}

.sl-slider-arrow:hover,
.sl-slider-arrow:focus {
	background: var(--sl-accent);
	color: #ffffff;
}

.sl-slider-arrow:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

.sl-slider-arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}

.sl-slider-arrow[hidden] {
	display: none;
}

.sl-featured-slider .sl-slider-prev {
	left: 14px;
}

.sl-featured-slider .sl-slider-next {
	right: 14px;
}

.sl-slider-dots {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-slider-dot {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sl-slider-dot:hover {
	background: #ffffff;
}

.sl-slider-dot[aria-current="true"] {
	background: #ffffff;
	transform: scale(1.25);
}


/* 5. Featured picture strip (v1.9.0)
   ------------------------------------------------------------
   Full-width 4-up photo slider below the header, in the spirit of the
   reference theme's featured area: large photo cards tiled edge-to-edge,
   each with a dark gradient overlay carrying the date and the linked
   title. Slim edge arrows scroll one card at a time and wrap around.
   The server renders a pool of posts with featured images and
   js/strip.js shuffles the pool on every visit (a page cache would
   freeze one fixed random pick), so the pictures are different each
   time. 4 cards on desktop, 2 on tablet, 1 on phone. Auto-advance and
   pause behavior live in js/strip.js. All styles below are original. */
.sl-featured-strip {
	position: relative;
	background: #222222;
	overflow: hidden;
}

.sl-pstrip-viewport {
	overflow: hidden;
}

.sl-pstrip-track {
	display: flex;
	transition: transform 0.55s ease;
}

body.sl-animations-off .sl-pstrip-track {
	transition: none;
}

.sl-pstrip-card {
	flex: 0 0 25%;
	max-width: 25%;
	min-width: 0;
}

.sl-pstrip-link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #2a2a2a;
	color: #ffffff;
}

.sl-pstrip-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.sl-pstrip-card:hover .sl-pstrip-link img {
	transform: scale(1.06);
}

.sl-pstrip-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 18px 16px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.sl-pstrip-date {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 6px;
}

.sl-pstrip-title {
	display: block;
	display: -webkit-box;
	font-family: var(--sl-serif);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1.3;
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sl-pstrip-link:hover .sl-pstrip-title,
.sl-pstrip-link:focus .sl-pstrip-title {
	color: var(--sl-accent);
}

/* Slim arrows overlaid at the strip's left/right edges. */
.sl-featured-strip .sl-slider-arrow {
	width: 46px;
	height: 72px;
	background: rgba(0, 0, 0, 0.35);
}

.sl-featured-strip .sl-slider-prev {
	left: 0;
}

.sl-featured-strip .sl-slider-next {
	right: 0;
}

/* Tablet: 2 cards side-by-side. */
@media (max-width: 1025px) {
	.sl-pstrip-card {
		flex-basis: 50%;
		max-width: 50%;
	}
}

/* Phone: 1 card. */
@media (max-width: 600px) {
	.sl-pstrip-card {
		flex-basis: 100%;
		max-width: 100%;
	}

	.sl-featured-strip .sl-slider-arrow {
		width: 40px;
		height: 60px;
	}
}


/* 6. Cards & post listings
   ------------------------------------------------------------ */
.sl-post-card .sl-entry-thumbnail {
	margin: -40px -40px 28px;
	overflow: hidden;
}

.sl-post-card .sl-entry-thumbnail img {
	display: block;
	width: 100%;
	transition: transform 0.55s ease;
}

.sl-post-card:hover .sl-entry-thumbnail img {
	transform: scale(1.045);
}

.sl-entry-title {
	margin-bottom: 10px;
}

.sl-entry-title a {
	color: var(--sl-heading);
}

.sl-entry-title a:hover {
	color: var(--sl-accent-dark);
}

.sl-entry-meta {
	font-size: 0.82rem;
	color: var(--sl-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 18px;
}

.sl-entry-meta a {
	color: var(--sl-muted);
}

.sl-entry-meta a:hover {
	color: var(--sl-accent);
}

.sl-entry-meta .sl-meta-sep {
	margin: 0 8px;
	color: #d5d5d5;
}

.sl-entry-summary p:last-child {
	margin-bottom: 0;
}

.sl-read-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--sl-accent);
	color: var(--sl-accent);
	padding: 9px 20px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sl-read-more:hover {
	background: var(--sl-accent);
	color: #fff;
}

/* Archive headers ("Category: ...", "Search Results for: ..."). */
.sl-archive-header {
	background: var(--sl-card);
	padding: 34px 40px;
	margin-bottom: 32px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sl-archive-header .sl-archive-title {
	margin: 0;
	font-size: 1.9rem;
}

.sl-archive-description {
	margin-top: 10px;
	color: var(--sl-muted);
}

.sl-archive-description p:last-child {
	margin-bottom: 0;
}

/* 7. Single post & page
   ------------------------------------------------------------ */
.sl-entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.sl-entry-content > *:last-child {
	margin-bottom: 0;
}

/* Video embeds keep a readable width. */
.sl-entry-content .wp-block-embed,
.sl-entry-content iframe[src*="youtube"],
.sl-entry-content iframe[src*="vimeo"] {
	max-width: 720px;
}

.sl-post-thumbnail {
	margin-bottom: 28px;
}

.sl-post-thumbnail img {
	display: block;
	width: 100%;
}

.sl-entry-footer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--sl-border);
	font-size: 0.9rem;
	color: var(--sl-muted);
}

.sl-entry-footer .sl-cat-links,
.sl-entry-footer .sl-tag-links {
	display: block;
	margin-bottom: 6px;
}

.sl-author-box {
	display: flex;
	gap: 20px;
	margin-top: 32px;
	padding: 26px;
	background: #fafafa;
	border: 1px solid var(--sl-border);
}

.sl-author-box .avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.sl-author-name {
	font-family: var(--sl-serif);
	font-size: 1.1rem;
	color: var(--sl-heading);
	margin: 0 0 6px;
}

.sl-author-bio {
	margin: 0;
	font-size: 0.95rem;
}

/* 8. Sidebar & widgets
   ------------------------------------------------------------ */
.sl-sidebar .widget {
	margin-bottom: 42px;
}

.widget-title {
	font-family: var(--sl-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-heading);
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.widget-title::before {
	content: "";
	width: 9px;
	height: 9px;
	background: var(--sl-accent);
	flex-shrink: 0;
}

.widget-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sl-border);
}

.sl-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-sidebar li {
	padding: 7px 0;
	border-bottom: 1px dotted var(--sl-border);
	font-size: 0.95rem;
}

.sl-sidebar li:last-child {
	border-bottom: none;
}

/* 9. Footer
   ------------------------------------------------------------ */
.sl-site-footer {
	background: var(--sl-footer-bg);
	color: var(--sl-footer-text);
}

.sl-footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	padding: 50px 0 30px;
}

.sl-footer-widgets .widget-title {
	color: #fff;
}

.sl-footer-widgets .widget-title::after {
	background: #444;
}

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

.sl-footer-widgets li {
	padding: 6px 0;
	font-size: 0.93rem;
}

.sl-footer-widgets a {
	color: var(--sl-footer-text);
}

.sl-footer-widgets a:hover {
	color: var(--sl-accent);
}

.sl-footer-nav {
	border-top: 1px solid #3d3d3d;
	padding: 18px 0;
}

.sl-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 22px;
}

.sl-footer-nav a {
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sl-footer-text);
}

.sl-footer-nav a:hover {
	color: var(--sl-accent);
}

.sl-copyright {
	text-align: center;
	padding: 0 0 30px;
	font-size: 0.85rem;
	color: #8f8f8f;
}

.sl-copyright p {
	margin: 0;
}

.sl-theme-credit {
	margin: 0 0 6px;
	font-size: 0.8rem;
	color: #a8a8a8;
}

.sl-theme-credit a {
	color: #8f8f8f;
	text-decoration: underline;
}

.sl-theme-credit a:hover {
	color: var(--sl-accent);
}

.sl-referral {
	margin: 0 0 8px;
	font-size: 0.78rem;
	color: #a8a8a8;
}

.sl-referral strong {
	color: #8f8f8f;
	letter-spacing: 0.06em;
}

/* 10. Comments
   ------------------------------------------------------------ */
.sl-comments {
	margin-top: 40px;
}

.sl-comments-title {
	font-size: 1.4rem;
	margin-bottom: 24px;
}

.comment-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin-left: 40px;
	padding: 0;
}

.comment-body {
	border: 1px solid var(--sl-border);
	padding: 22px;
	margin-bottom: 18px;
	background: #fff;
}

.comment-meta {
	font-size: 0.85rem;
	color: var(--sl-muted);
	margin-bottom: 10px;
}

.comment-author .avatar {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 8px;
}

.comment-reply-link {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.comment-respond {
	margin-top: 10px;
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.9rem;
}

.comment-form .required {
	color: #c0392b;
}

/* 11. Pagination & post navigation
   ------------------------------------------------------------ */
.sl-pagination {
	text-align: center;
	margin: 10px 0 40px;
}

.sl-pagination .page-numbers {
	display: inline-block;
	min-width: 42px;
	padding: 9px 12px;
	margin: 0 3px;
	border: 1px solid var(--sl-border);
	background: var(--sl-card);
	color: var(--sl-text);
	font-size: 0.9rem;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.sl-pagination a.page-numbers:hover {
	border-color: var(--sl-accent);
	color: var(--sl-accent);
}

.sl-pagination .page-numbers.current {
	background: var(--sl-accent);
	border-color: var(--sl-accent);
	color: #fff;
}

.sl-post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 36px 0 0;
}

.sl-post-navigation a {
	display: block;
	background: var(--sl-card);
	border: 1px solid var(--sl-border);
	padding: 18px 22px;
	color: var(--sl-text);
	transition: border-color 0.2s ease;
}

.sl-post-navigation a:hover {
	border-color: var(--sl-accent);
}

.sl-post-navigation .sl-nav-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-muted);
	margin-bottom: 6px;
}

.sl-post-navigation .sl-nav-next {
	text-align: right;
}

/* 12. Forms, buttons & search
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea {
	font-family: var(--sl-sans);
	font-size: 1rem;
	color: var(--sl-text);
	border: 1px solid #d8d8d8;
	background: #fff;
	padding: 11px 14px;
	max-width: 100%;
}

input:focus,
textarea:focus {
	outline: 2px solid var(--sl-accent);
	outline-offset: -1px;
	border-color: var(--sl-accent);
}

button,
input[type="submit"],
input[type="button"] {
	font-family: var(--sl-sans);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: #333333;
	color: #fff;
	border: none;
	padding: 13px 26px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
	background: var(--sl-accent-dark);
}

/* Classic search form + search block. */
.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	gap: 10px;
}

.search-form label,
.wp-block-search__label {
	flex: 1;
}

.search-form .search-field,
.wp-block-search__input {
	width: 100%;
}

.search-form .search-submit,
.wp-block-search__button {
	flex-shrink: 0;
}

.sl-sidebar .wp-block-search__button,
.sl-header-search .wp-block-search__button {
	background: #333333;
	color: #fff;
	border: none;
}

/* 13. Breadcrumbs & share buttons
   ------------------------------------------------------------ */
.sl-breadcrumbs {
	font-size: 0.9rem;
	margin-bottom: 22px;
	color: var(--sl-muted);
}

.sl-breadcrumbs .sl-sep {
	margin: 0 8px;
	color: #cfcfcf;
}

.sl-share {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--sl-border);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sl-share-label {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-muted);
	margin-right: 4px;
}

.sl-share a {
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--sl-border);
	color: var(--sl-text);
	padding: 7px 14px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sl-share a:hover {
	border-color: var(--sl-accent);
	color: var(--sl-accent);
}

/* 14. Accessibility helpers
   ------------------------------------------------------------ */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--sl-accent-dark);
	color: #fff;
	padding: 12px 20px;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
	color: #fff;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* 15. Responsive
   ------------------------------------------------------------ */
@media (max-width: 960px) {
	.sl-layout {
		grid-template-columns: 1fr;
	}

	.sl-sidebar {
		margin-top: 8px;
	}


	.sl-footer-widgets {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 700px) {
	/* v1.7.0: the nav row is a single scrollable line on every screen size —
	   the hamburger opens the slide-in drawer, so the old mobile dropdown
	   rules are gone. */

	.sl-card {
		padding: 26px 22px;
	}

	.sl-post-card .sl-entry-thumbnail {
		margin: -26px -22px 22px;
	}

	.sl-archive-header {
		padding: 26px 22px;
	}

	.sl-post-navigation {
		grid-template-columns: 1fr;
	}

	.sl-footer-widgets {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.sl-author-box {
		flex-direction: column;
	}
}

/* 16. Sticky posts & post formats
   ------------------------------------------------------------ */
.sl-post-card.sticky {
	border-top: 3px solid var(--sl-accent);
}

.sl-sticky-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	background: var(--sl-accent);
	color: #fff;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
}

.sl-format-label {
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
}

/* 17. Related posts
   ------------------------------------------------------------ */
.sl-related {
	margin-top: 44px;
}

.sl-related-title {
	font-size: 1.5rem;
	margin-bottom: 20px;
}

.sl-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.sl-related-card {
	background: var(--sl-card);
	border: 1px solid var(--sl-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sl-related-card a {
	display: block;
	color: var(--sl-text);
}

.sl-related-thumb {
	display: block;
	overflow: hidden;
}

.sl-related-thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.5s ease;
}

.sl-related-card:hover .sl-related-thumb img {
	transform: scale(1.05);
}

.sl-related-meta {
	display: block;
	padding: 14px 18px 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sl-muted);
}

.sl-related-name {
	display: block;
	padding: 6px 18px 18px;
	font-family: var(--sl-serif);
	color: var(--sl-heading);
	font-size: 1.02rem;
	line-height: 1.4;
}

.sl-related-card:hover .sl-related-name {
	color: var(--sl-accent-dark);
}

@media (max-width: 700px) {
	.sl-related-grid {
		grid-template-columns: 1fr;
	}
}

/* 18. Back-to-top button
   ------------------------------------------------------------ */
.sl-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--sl-accent);
	color: #fff;
	border: none;
	cursor: pointer;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.2s ease;
}

.sl-back-to-top.sl-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.sl-back-to-top:hover {
	background: var(--sl-accent-dark);
}

.sl-back-to-top svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* 19. Animations & motion
   ------------------------------------------------------------ */
/* Scroll-reveal: elements start hidden and fade/slide in when scrolled
   into view. The class is added by JS only when animations are enabled,
   so content is always visible without JS. */
.sl-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.sl-reveal.sl-revealed {
	opacity: 1;
	transform: none;
}

/* Animations off via Customizer. */
body.sl-animations-off .sl-reveal {
	opacity: 1;
	transform: none;
}

body.sl-animations-off *,
body.sl-animations-off *::before,
body.sl-animations-off *::after {
	transition: none !important;
	animation: none !important;
}

/* Respect the operating system's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.sl-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}

/* 22. Custom widgets: Most Viewed & News in Pictures (v1.5.0)
   ------------------------------------------------------------ */

/* Most Viewed: thumbnail + title rows. */
.sl-most-viewed {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-most-viewed-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px dotted var(--sl-border);
}

.sl-most-viewed-item:last-child {
	border-bottom: none;
}

.sl-most-viewed-thumb {
	flex-shrink: 0;
	line-height: 0;
}

.sl-most-viewed-thumb img {
	width: 58px;
	height: 58px;
	object-fit: cover;
	display: block;
	border-radius: 3px;
}

.sl-most-viewed-title {
	font-family: var(--sl-serif);
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--sl-heading);
}

.sl-most-viewed-title:hover {
	color: var(--sl-accent);
}

.sl-footer-widgets .sl-most-viewed-item {
	border-bottom-color: #3d3d3d;
}

.sl-footer-widgets .sl-most-viewed-title {
	color: #e8e8e8;
}

.sl-footer-widgets .sl-most-viewed-title:hover {
	color: var(--sl-accent);
}

/* News in Pictures: small picture grid with overlaid titles. */
.sl-news-pictures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.sl-news-picture {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	line-height: 0;
}

.sl-news-picture img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sl-news-picture:hover img {
	transform: scale(1.06);
}

.sl-news-picture-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 8px 8px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
	color: #fff;
	font-family: var(--sl-serif);
	font-size: 0.8rem;
	line-height: 1.3;
}