/******************************************************************
Theme Name: Lightly Optimized
Theme URI: https://fancythemes.com/themes/lightly
Description: Lightly is a WordPress theme for news or magazine website, neatly designed, well coded, and more importantly easy to use. The theme comes with a responsive design and easy to use customization options that are available via WordPress Theme Customizer. This SEO friendly theme is perfect for travel, lifestyle, fashion, food, sports, magazine, tech, or almost any type of blog. Lightly Optimized is a faster, mobile-first edition of the Lightly theme: no jQuery, no icon font, Noto Serif Thai typography, light/dark mode and a collapsible mobile menu.
Author: FancyThemes
Author URI: https://fancythemes.com/
Version: 2.2.0
Requires at least: 5.9
Requires PHP: 7.0
License: GPLv2 or later
License URI: license.txt
Tags: blog, custom-background, custom-menu, entertainment, featured-images, footer-widgets, news, right-sidebar, theme-options, translation-ready, two-columns
Text Domain: lightly
******************************************************************/

/******************************************************************
DESIGN TOKENS
Change the colors / fonts of the whole theme here.
******************************************************************/
:root {
	--paper: #fff;
	--text: #222;
	--heading: #000;
	--accent: #c22;
	--muted: #6f6f6f;
	--line: #ddd;
	--line-strong: #bbb;
	--soft: #fafafa;
	--footer-bg: #111;
	--footer-bottom: #000;
	--footer-text: #ddd;
	--footer-link: #f0645a;
	--page-bg: #eee;
	--heading-link: #130e0e;
	--code-bg: #eee;
	--code-line: #cecece;
	--rule: #888;
	--button-bg: #222;
	--button-text: #fff;
	--shadow: rgba(0, 0, 0, .4);
	color-scheme: light;

	--font-body: 'Noto Serif Thai', 'Noto Serif', Georgia, 'Leelawadee UI', Thonburi, Tahoma, serif;
	--font-heading: var(--font-body);
	--weight-heading: 600;

	--gutter: 16px;
	--max-width: 1140px;
}

@media (min-width: 768px) {
	:root { --gutter: 24px; }
}

/* Dark mode (data-theme is set by the small script in header.php: saved choice, else the device setting) */
:root[data-theme="dark"] {
	--paper: #1c1c1e;
	--text: #e4e4e4;
	--heading: #f5f5f5;
	--accent: #ff6b5e;
	--muted: #a0a0a0;
	--line: #3a3a3c;
	--line-strong: #555;
	--soft: #242426;
	--footer-bg: #111;
	--footer-bottom: #000;
	--footer-text: #ccc;
	--footer-link: #ff7a6e;
	--page-bg: #0e0e0f;
	--heading-link: #f0f0f0;
	--code-bg: #2a2a2d;
	--code-line: #444;
	--rule: #666;
	--button-bg: #e4e4e4;
	--button-text: #111;
	--shadow: rgba(0, 0, 0, .8);
	color-scheme: dark;
}

/* Keep the dark page colour even when a custom background colour is set */
:root[data-theme="dark"] body.custom-background { background-color: var(--page-bg); }

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

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

body {
	margin: 0;
	background-color: var(--page-bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.8; /* Thai needs room for tone marks above and vowels below */
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

img, video, svg { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }
figure { margin: 0 0 1.25em; }
hr { height: 0; border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
abbr[title] { text-decoration: underline dotted; }
b, strong { font-weight: 700; }
small, sub, sup { font-size: 75%; }
sub, sup { line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
mark, ins { background-color: #ebe16f; color: #000; text-decoration: none; padding: 0 .15em; }
table { border-collapse: collapse; border-spacing: 0; }
ul, ol { margin: 1.5em 0; padding: 0; }
dd { margin: 0; }
nav ul, nav ol, .widget ul, .widget ol, .commentlist { list-style: none; margin: 0; padding: 0; }
pre, code, kbd, samp { font-family: Menlo, Consolas, 'Courier New', monospace; font-size: .9em; }
[hidden] { display: none !important; }

/* Links */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a, button { -webkit-tap-highlight-color: transparent; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Headings */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	color: var(--heading);
	line-height: 1.45;
	margin: 1.25em 0 .5em;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { color: var(--heading-link); }
h1, .h1 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.25rem); }
h2, .h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.6rem); }
h3, .h3 { font-size: 1.143em; }
h4, .h4 { font-size: 1em; }
h5, .h5 { font-size: .846em; text-transform: uppercase; letter-spacing: 2px; }

/* Accessibility */
.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;
}
.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	left: 8px;
	top: 8px;
	z-index: 100000;
	padding: 12px 18px;
	background: var(--paper);
	color: var(--text);
	box-shadow: 0 0 4px rgba(0, 0, 0, .4);
}

/* Helpers */
.clearfix::after, .clear { content: ""; display: table; clear: both; }
.hide { display: none; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Notices */
.help, .info, .error, .success { margin: 10px 0; padding: 5px 18px; border: 1px solid #cecece; color: #222; }
.help a, .info a, .error a, .success a { color: #a01818; }
.help { border-color: #e0c618; background-color: #ebe16f; }
.info { border-color: #92cae4; background-color: #d5edf8; }
.error { border-color: #fbc2c4; background-color: #fbe3e4; }
.success { border-color: #c6d880; background-color: #e6efc2; }

/******************************************************************
LAYOUT
******************************************************************/
#container {
	max-width: var(--max-width);
	margin: 0 auto;
	background-color: var(--paper);
}

@media (min-width: 768px) {
	#container {
		width: 95%;
		box-shadow: 0 0 6px var(--shadow);
	}
}

#content {
	border-top: 4px solid var(--line-strong);
}

#inner-content {
	padding: 0 var(--gutter);
}

#main {
	padding-top: 20px;
	min-width: 0;
}

.sidebar {
	min-width: 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
	#inner-content {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: stretch;
	}

	#breadcrumbs { grid-column: 1 / -1; }

	#main {
		grid-column: 1;
		padding-right: var(--gutter);
	}

	#inner-content:not(:has(.sidebar)) #main {
		grid-column: 1 / -1;
		width: 100%;
		max-width: 780px;
		margin: 0 auto;
		padding-right: 0;
	}

	.sidebar {
		grid-column: 2;
		border-top: 0;
		border-left: 1px solid var(--line);
		padding-left: var(--gutter);
	}
}

/******************************************************************
HEADER
******************************************************************/
.header {
	position: relative;
	z-index: 100;
	background-color: var(--paper);
}

#inner-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 16px;
	padding: 0 var(--gutter);
}

#logo {
	flex: 1 1 0;
	min-width: 0;
	margin: 16px 0;
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.1rem + 3vw, 3.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}
#logo .site-title {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	overflow-wrap: anywhere;
}
#logo a { color: var(--heading); text-decoration: none; }
#logo .site-description {
	display: block;
	margin-top: 4px;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--muted);
}
#logo .custom-logo-link { display: inline-block; }
#logo .custom-logo { max-height: 90px; width: auto; }

#search-header,
#sidebar-top {
	flex: 1 1 100%;
	margin-bottom: 16px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

#sidebar-top { text-align: center; }
#sidebar-top .widget { margin: 0; }
#sidebar-top .widgettitle { display: none; }
#sidebar-top .widget ul ul { display: none; }
#sidebar-top .widget li { display: inline; }
#sidebar-top .widget li + li::before { content: "/"; margin: 0 10px; color: var(--line); }

/* Phones: the search box lives inside the menu panel */
@media (max-width: 767px) {
	.js .header.has-menu:not(.menu-open) #search-header { display: none; }
	.header.menu-open #search-header { margin: 0 0 12px; }
}

@media (min-width: 768px) {
	#logo { margin: 30px 0; flex-basis: auto; }
	.header-actions { order: 3; }

	#search-header {
		flex: 0 0 33.333%;
		max-width: 320px;
		margin: 0 0 0 auto;
	}

	#sidebar-top {
		flex: 0 1 auto;
		max-width: 50%;
		margin: 0 0 0 auto;
		text-align: right;
	}
}


/* Light / dark switch */
.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: var(--paper); border: 1px solid var(--line); border-radius: 50%;
	color: var(--text); cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Mobile menu button */
.menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 14px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--text);
	font-family: var(--font-heading);
	font-size: 1rem;
	cursor: pointer;
}
/* Small phones: icon only, so the logo keeps its room */
@media (max-width: 419px) {
	.menu-toggle { width: 44px; padding: 0; justify-content: center; }
	.menu-toggle-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease, background-color .2s ease;
}
.menu-toggle-icon { position: relative; }
.menu-toggle-icon::before,
.menu-toggle-icon::after { content: ""; position: absolute; left: 0; }
.menu-toggle-icon::before { top: -6px; }
.menu-toggle-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

/******************************************************************
NAVIGATION
******************************************************************/
.primary-nav {
	font-family: var(--font-heading);
	border-top: 1px dotted var(--line);
}

.primary-menu .menu a {
	display: block;
	color: var(--text);
	text-decoration: none;
}
.primary-menu .menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
	color: var(--accent);
}

/* Small screens: collapsible list */
@media (max-width: 767px) {
	.js .menu-toggle { display: inline-flex; }
	.js .primary-nav { display: none; }
	.js .primary-nav.is-open { display: block; }

	.primary-menu .menu a {
		padding: 12px var(--gutter);
		border-bottom: 1px dotted var(--line);
		font-size: 1.05rem;
	}
	.primary-menu .sub-menu a {
		padding-left: calc(var(--gutter) * 2);
		font-size: .95rem;
	}
	.primary-menu .sub-menu .sub-menu a {
		padding-left: calc(var(--gutter) * 3);
	}
}

/* Larger screens: horizontal bar with drop-downs */
@media (min-width: 768px) {
	.primary-nav { border-bottom: 1px solid var(--line); }

	.primary-menu .menu {
		display: flex;
		flex-wrap: wrap;
	}
	.primary-menu .menu > li {
		position: relative;
		border-left: 1px dotted var(--line);
	}
	.primary-menu .menu > li:last-child { border-right: 1px dotted var(--line); }
	.primary-menu .menu > li > a {
		padding: .65em 1.071em;
		font-size: 1.143em;
	}

	.primary-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: -1px;
		z-index: 10;
		width: 220px;
		background-color: var(--paper);
		border: 1px solid var(--line);
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
	}
	.primary-menu .sub-menu .sub-menu {
		top: -1px;
		left: 100%;
	}
	/* Set by scripts.js when a menu would leave the page on the right: open it to the left */
	.primary-menu .menu > li.submenu-left > .sub-menu { left: auto; right: -1px; }
	.primary-menu .sub-menu li.submenu-left > .sub-menu { left: auto; right: 100%; }
	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .2s ease, transform .2s ease, visibility 0s;
	}
	.primary-menu .sub-menu li { position: relative; }
	.primary-menu .sub-menu a {
		margin: 0 1.25em;
		padding: .55em 1em .55em 0;
		border-bottom: 1px solid var(--line);
		color: var(--heading);
	}
	.primary-menu .sub-menu li:last-child > a { border-bottom: 0; }
	.primary-menu .sub-menu .menu-item-has-children > a { position: relative; }
	.primary-menu .sub-menu .menu-item-has-children > a::after {
		content: "\203A";
		position: absolute;
		right: 0;
	}
}

/******************************************************************
BREADCRUMBS
******************************************************************/
#breadcrumbs {
	margin: 0 calc(var(--gutter) * -1);
	padding: 14px var(--gutter);
	background-color: var(--soft);
	border-bottom: 1px solid var(--line);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--muted);
}
nav#breadcrumbs > a::after {
	content: "\203A";
	padding: 0 .6em;
	color: var(--line-strong);
}

/******************************************************************
POSTS & CONTENT
******************************************************************/
.hentry { position: relative; }

.meta {
	margin: 0 0 1em;
	font-size: .82em;
	color: var(--muted);
}
.meta a { color: var(--muted); }
.meta a:hover { color: var(--accent); }

.post-title, .post-title-small {
	margin-top: 0;
	margin-bottom: .25em;
	font-weight: 400;
}
.post-title a { color: var(--heading); }
.post-title-small a { color: var(--text); }
.post-title a:hover, .post-title-small a:hover { color: var(--accent); text-decoration: none; }

/* Post list (home, archives, search) */
.default-post {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 1.5em;
	padding-bottom: .5em;
	border-bottom: 1px dotted var(--line);
}
.default-post .post-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.default-post .home-thumb {
	display: block;
	margin-bottom: 1em;
}
.default-post .home-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.default-post.has-post-thumbnail {
	grid-template-columns: 112px minmax(0, 1fr);
	column-gap: 16px;
}
.default-post.has-post-thumbnail .post_content { grid-column: 1 / -1; }

@media (min-width: 600px) {
	.default-post.has-post-thumbnail {
		grid-template-columns: 35% minmax(0, 1fr);
		column-gap: 1.5em;
	}
	.default-post.has-post-thumbnail .home-thumb { grid-row: 1 / span 2; }
	.default-post.has-post-thumbnail .post_content { grid-column: 2; }
}

.read-more { margin-top: 0; }

/* Single post / page */
.single-title {
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.857rem);
	line-height: 1.2;
}
.single #main, .page #main { padding-top: 30px; }
.single .hentry > header,
.page .hentry > header {
	margin-bottom: 30px;
	padding-bottom: 10px;
	border-bottom: 1px dotted var(--line);
}
.home-thumb.boxed { margin-bottom: 1.5em; }
.home-thumb.boxed img { display: block; width: 100%; }

/* Content typography */
.post_content a:not(.wp-block-button__link):not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.post_content .read-more a,
.post_content a:has(> img) { text-decoration: none; }
.post_content::after { content: ""; display: table; clear: both; }
.post_content p { margin: 0 0 1.25em; }
.post_content ul, .post_content ol {
	margin: 1.5em 0 1.5em 1.4em;
	line-height: 1.5;
}
.post_content ul li { list-style-type: disc; }
.post_content ol li { list-style-type: decimal; }
.post_content li { margin-bottom: .35em; }
.post_content blockquote {
	margin: 1.5em 0;
	padding: 1em 1.3em .1em;
	background-color: var(--soft);
	border-left: 2px dotted var(--line-strong);
	color: var(--text);
	line-height: 1.6;
}
.post_content dl { margin: 1.75em 0; }
.post_content dt { margin-top: 1.25em; font-weight: 700; }
.post_content dd { margin-top: .5em; font-size: .9em; }
.post_content img { margin-bottom: 1.5em; }
.post_content pre {
	padding: 12px;
	overflow-x: auto;
	white-space: pre;
	background-color: var(--code-bg);
	border: 1px solid var(--code-line);
}
.post_content code {
	padding: 2px 4px;
	background-color: var(--code-bg);
}
.post_content pre code { padding: 0; background: none; }
.post_content table {
	width: 100%;
	margin: 1.5em 0;
}
.post_content th, .post_content td {
	padding: 8px 10px;
	border: 1px solid var(--line);
	text-align: left;
}
@media (max-width: 599px) {
	.post_content table:not(.wp-block-table table) {
		display: block;
		overflow-x: auto;
	}
}

/* Embeds & media: full width, correct ratio, no JavaScript needed */
.post_content video, .post_content object, .post_content iframe, .post_content embed {
	max-width: 100%;
	border: 0;
}
.post_content > iframe,
.post_content > p > iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* WordPress alignment */
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; clear: both; margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 479px) {
	.post_content .alignleft,
	.post_content .alignright {
		float: none;
		display: block;
		margin: 0 auto 1em;
	}
}

.wp-caption {
	max-width: 100% !important;
	padding: 5px;
	background-color: var(--soft);
}
.wp-caption img { display: block; width: 100%; margin-bottom: 0; }
.wp-caption-text, .wp-caption .wp-caption-text, .wp-element-caption {
	margin: 6px 0;
	font-size: .85em;
	text-align: center;
	color: var(--muted);
}

/* Galleries */
.gallery {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 1.5em;
}
.gallery-columns-1 { --cols: 1; }
.gallery-columns-2 { --cols: 2; }
.gallery-columns-4 { --cols: 4; }
.gallery-columns-5 { --cols: 5; }
.gallery-columns-6 { --cols: 6; }
.gallery-columns-7 { --cols: 7; }
.gallery-columns-8 { --cols: 8; }
.gallery-columns-9 { --cols: 9; }
@media (max-width: 599px) {
	.gallery[class*="gallery-columns-"]:not(.gallery-columns-1):not(.gallery-columns-2) { --cols: 3; }
}
.gallery-item { margin: 0; }
.gallery img { display: block; width: 100%; margin: 0 !important; }
.gallery .gallery-caption { display: none; }

/******************************************************************
FEATURED SLIDER (swipeable on touch screens)
******************************************************************/
#featured-posts {
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
#featured-posts .loop-items {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
#featured-posts .loop-items::-webkit-scrollbar { display: none; }
#featured-posts .item {
	flex: 0 0 100%;
	min-width: 0;
	overflow: hidden; /* stops glyphs of the next slide peeking in */
	scroll-snap-align: start;
}
#featured-posts .carousel-thumb { display: block; margin-bottom: 12px; }
#featured-posts .carousel-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: contain; /* featured images come in several shapes: show all of it, never cut text off */
	background-color: var(--soft);
}
#featured-posts .item .h1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
	line-height: 1.45;
}
#featured-posts .slider-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dotted var(--line);
}
#featured-posts .slider-nav button {
	min-width: 36px;
	min-height: 36px;
	padding: 0 10px;
	background: none;
	border: 0;
	border-right: 1px dotted var(--line);
	color: var(--text);
	font-size: .857em;
	cursor: pointer;
}
#featured-posts .slider-nav button:last-child { border-right: 0; }
#featured-posts .slider-nav button:hover { color: var(--accent); }
#featured-posts .slider-nav .active-index { color: var(--accent); font-weight: 700; }
@media (max-width: 479px) {
	#featured-posts .slider-nav .nav-index { display: none; }
	#featured-posts .slider-nav .slider-prev { border-right: 1px dotted var(--line); }
}

/******************************************************************
SINGLE POST FOOTER
******************************************************************/
.post-footer { padding-bottom: .714em; }

#article-footer-meta {
	margin-bottom: 20px;
	padding-top: 12px;
	border-top: 1px dotted var(--line);
}
#article-footer-meta p { margin: 0; }
#article-footer-meta .tags-title {
	display: inline-block;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px dotted var(--line);
}

/* Previous / next post */
.post-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 20px;
	border-top: 1px dotted var(--line);
	border-bottom: 1px dotted var(--line);
}
.post-nav a {
	display: block;
	padding: 15px 0;
	text-decoration: none;
}
.post-nav a + a { border-top: 1px dotted var(--line); }
.post-nav .meta { display: block; margin: 0 0 4px; }
.post-nav .post-title-small {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.143em;
	line-height: 1.35;
	color: var(--heading);
}
.post-nav a:hover .post-title-small { color: var(--accent); text-decoration: underline; }
.post-nav a[rel="next"] { text-align: right; }

@media (min-width: 600px) {
	.post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-nav a[rel="prev"] { grid-column: 1; padding-right: 20px; }
	.post-nav a[rel="next"] {
		grid-column: 2;
		padding-left: 20px;
		border-left: 1px dotted var(--line);
	}
	.post-nav a + a { border-top: 0; }
}

/* Author box */
#author-box {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	margin-bottom: 20px;
}
#author-box .widgettitle { grid-column: 1 / -1; }
#author-box .author-avatar { border-radius: 50%; }
#author-box .post-title { margin: 0 0 3px; font-size: 1.143em; }
#author-box p { margin: 0 0 .5em; }

/* Small post lists: related posts & recent posts widget */
.type-3 {
	display: flow-root;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px dotted var(--line);
}
.type-3:last-child { margin-bottom: 0; border-bottom: 0; }
.type-3 .home-thumb {
	float: left;
	width: 64px;
	margin: 4px 12px 0 0;
}
.type-3 .home-thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
}
.type-3 header { margin: 0; padding: 0; border: 0; }
.type-3 .post-title-small { font-size: 1.05em; line-height: 1.35; }
.type-3 .meta { margin: 0; }

/******************************************************************
PAGINATION
******************************************************************/
.pagination { clear: both; padding-bottom: 20px; }
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
}
.pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current {
	background-color: var(--button-bg);
	border-color: var(--button-bg);
	color: var(--button-text);
}
.pagination .page-numbers.dots { border: 0; }

.comment-navigation .nav-links { justify-content: space-between; margin-bottom: 20px; }

.page-navigation { margin: 0 0 20px; }
.page-navigation .post-page-numbers { display: inline-block; padding: 0 8px; }

/******************************************************************
COMMENTS
******************************************************************/
.comments-area { margin-top: 20px; }

.commentlist { margin-bottom: 20px; }
.commentlist .children { margin: 0 0 0 12px; padding-left: 12px; border-left: 1px dotted var(--line); list-style: none; }
@media (min-width: 600px) {
	.commentlist .children { margin-left: 24px; }
}
.commentlist li.comment { list-style: none; }
.commentlist article {
	padding: 1em 0;
	border-bottom: 1px dotted var(--line-strong);
}
.commentlist .vcard {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
}
.commentlist .vcard .avatar {
	grid-row: 1 / span 2;
	border-radius: 50%;
}
.commentlist .vcard cite.fn { font-style: normal; font-size: 1.143em; font-weight: 700; }
.commentlist .meta { margin: 0; }
.commentlist .comment_content { padding-top: .5em; }
.commentlist .comment_content p { margin: 0 0 .75em; }
.commentlist .comment-reply-link { font-size: .857em; }
.bypostauthor > article .fn::after {
	content: "\2713";
	margin-left: 6px;
	color: var(--accent);
}

/* Comment form */
#respond { margin: 0 0 20px; }
.commentlist #respond { margin-left: 12px; }
#cancel-comment-reply-link { margin-left: 10px; font-size: .75em; }

.comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 16px;
}
.comment-form > * { grid-column: 1 / -1; margin: 0 0 14px; }
@media (min-width: 600px) {
	.comment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.comment-form > .comment-form-author { grid-column: 1; }
	.comment-form > .comment-form-email { grid-column: 2; }
}
.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-size: .875em;
	color: var(--muted);
}
.comment-form .required { color: var(--accent); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	font-size: 16px; /* prevents iOS zoom on focus */
	-webkit-appearance: none;
	appearance: none;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--line-strong); outline: 2px solid var(--line); }
.comment-form textarea { height: 150px; resize: vertical; }
.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.comment-form-cookies-consent input { margin-top: .35em; }
.comment-form-cookies-consent label { display: inline; margin: 0; }

#submit, .wpcf7-submit {
	min-height: 44px;
	padding: 10px 20px;
	background-color: var(--button-bg);
	border: 0;
	color: var(--button-text);
	font-size: 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
#submit:hover, .wpcf7-submit:hover { background-color: var(--accent); }

.nocomments { margin: 0 0 1.1em; color: var(--muted); }

/******************************************************************
SEARCH FORM
******************************************************************/
.searchform {
	display: flex;
	align-items: stretch;
	background-color: var(--paper);
	border: 1px solid var(--line);
}
.searchform input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	background: none;
	border: 0;
	font-size: 16px; /* prevents iOS zoom on focus */
	-webkit-appearance: none;
	appearance: none;
}
.searchform input[type="search"]:focus { outline: none; }
.searchform:focus-within { border-color: var(--line-strong); }
.searchform .searchsubmit {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 0 12px;
	background: none;
	border: 0;
	color: var(--muted);
	cursor: pointer;
}
.searchform .searchsubmit:hover { color: var(--text); }

/******************************************************************
WIDGETS & SIDEBAR
******************************************************************/
.widget {
	display: flow-root;
	margin: 0 0 1.75em;
}
.widget li { margin-bottom: .6em; }
.widget li ul { margin-top: .6em; padding-left: 1em; }
.widget select { max-width: 100%; }
.widget iframe { max-width: 100%; }
.widget table { width: 100%; }
.widget_calendar th, .widget_calendar td { text-align: center; padding: 4px; }

.widgettitle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-family: var(--font-heading);
	font-size: 18px;
	color: var(--heading);
}
.widgettitle::after {
	content: "";
	flex: 1 0 24px;
	height: 3px;
	border-top: 1px dotted var(--rule);
	border-bottom: 1px dotted var(--rule);
}
.widgettitle > span:empty { display: none; }
.widgettitle mark { background: none; color: var(--accent); }

/* Tabs widget */
.tabs-widget .widgettitle > span { display: none; }
.tabs-widget > .widgettitle { margin-bottom: 20px; }
.tabs { margin-top: -8px; }
.tabs .nav-tab {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px dotted var(--line);
}
.tabs .nav-tab li { margin: 0; padding: 0 10px; }
.tabs .nav-tab li:first-child { padding-left: 0; }
.tabs .nav-tab li + li { border-left: 1px dotted var(--line); }
.tabs .nav-tab a {
	display: inline-block;
	padding: 6px 0;
	color: var(--muted);
	font-size: 15px;
	text-decoration: none;
}
.tabs .nav-tab .tab-active a { color: var(--text); }
.tabs .tab-content { margin-top: 20px; }
.tabs .tab-content.hide { display: none; }

/* Recent comments widget */
.widget_comments li {
	display: flow-root;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px dotted var(--line);
}
.widget_comments li:first-child { padding-top: 0; }
.widget_comments li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget_comments .avatar { margin: 4px 12px 0 0; border-radius: 50%; }
.widget_comments .post-title { margin: 0; font-size: 1em; }

/******************************************************************
FOOTER
******************************************************************/
.footer {
	clear: both;
	background-color: var(--footer-bg);
	border-top: 4px solid var(--footer-bottom);
	color: var(--footer-text);
}
.footer a { color: var(--footer-link); }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5,
.footer .widgettitle, .footer .post-title a, .footer .post-title-small a { color: #bbb; }
.footer .widgettitle::after { border-color: #555; }
.footer .meta, .footer .meta a { color: #999; }
.footer .type-3, .footer .widget_comments li, .footer .tabs .nav-tab,
.footer .tabs .nav-tab li + li { border-color: #333; }
.footer .tabs .nav-tab a { color: #999; }
.footer .tabs .nav-tab .tab-active a { color: #fff; }

#footer-widgets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 32px;
	padding: 24px var(--gutter) 0;
}
@media (min-width: 600px) {
	#footer-widgets:not(.footer-cols-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	#footer-widgets.footer-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#footer-widgets.footer-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.attribution {
	padding: 24px var(--gutter);
	background-color: var(--footer-bottom);
	color: #fff;
	font-size: .8125rem;
	text-align: center;
}
.attribution p { margin: 0; }
.footer-links { margin-bottom: 10px; }
.footer-links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 0;
}
.footer-links li + li::before {
	content: "|";
	margin: 0 .6em;
	color: #555;
}

/******************************************************************
CONTACT FORM 7
******************************************************************/
.wpcf7-text, .wpcf7 textarea {
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: 16px;
}
.wpcf7 textarea { width: 100%; }


/******************************************************************
SHARE LINKS (below single posts)
******************************************************************/
.share-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding-top: 16px;
	border-top: 1px dotted var(--line);
}
.share-title { margin-right: 4px; font-size: .9em; color: var(--muted); }
.share-links a,
.share-links button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 14px;
	border: 0;
	border-radius: 20px;
	color: #fff;
	font: inherit;
	font-size: .875em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.share-links a:hover,
.share-links button:hover { text-decoration: none; filter: brightness(1.1); }
.share-facebook { background: #1877f2; }
.share-line { background: #06c755; }
.share-x { background: #000; }
:root[data-theme="dark"] .share-x { background: #333; }
.share-links .share-copy { background: var(--soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.share-links .share-copy.is-copied { background: #e6f4ea; color: #1e7e34; box-shadow: inset 0 0 0 1px #9fd5ad; }
@media (max-width: 419px) {
	/* Small phones: icons only (names stay available to screen readers) */
	.share-links a span,
	.share-links button span {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.share-links a, .share-links button { width: 44px; height: 44px; padding: 0; justify-content: center; }
}

/******************************************************************
IN-ARTICLE WIDGET AREA (e.g. an ad after the first paragraph)
******************************************************************/
.in-article {
	clear: both;
	margin: 1.5em 0;
	text-align: center;
}
.in-article .widget { margin: 0; }
.in-article .widgettitle { justify-content: center; font-size: .75rem; color: var(--muted); margin-bottom: 8px; }
.in-article .widgettitle::after { display: none; }

/******************************************************************
DARK MODE: content made in the editor
Colours picked in the block editor were chosen for a white page,
so the most common ones are adjusted to stay readable.
******************************************************************/
:root[data-theme="dark"] .post_content .has-black-color,
:root[data-theme="dark"] .post_content .has-contrast-color,
:root[data-theme="dark"] .post_content [style*="color:#000"],
:root[data-theme="dark"] .post_content [style*="color: #000"],
:root[data-theme="dark"] .post_content [style*="color:rgb(0,0,0)"],
:root[data-theme="dark"] .post_content [style*="color: rgb(0, 0, 0)"] {
	color: var(--text) !important;
}
:root[data-theme="dark"] .post_content .has-white-background-color,
:root[data-theme="dark"] .post_content .has-base-background-color,
:root[data-theme="dark"] .post_content .has-very-light-gray-background-color,
:root[data-theme="dark"] .post_content .has-cyan-bluish-gray-background-color,
:root[data-theme="dark"] .post_content [style*="background-color:#fff"],
:root[data-theme="dark"] .post_content [style*="background-color: #fff"] {
	background-color: var(--soft) !important;
	color: var(--text) !important;
}
:root[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--soft); }
:root[data-theme="dark"] .wp-block-table thead { border-bottom-color: var(--line-strong); }
:root[data-theme="dark"] .wp-block-table tfoot { border-top-color: var(--line-strong); }
:root[data-theme="dark"] .wp-block-code,
:root[data-theme="dark"] .wp-block-preformatted { background-color: var(--code-bg); color: var(--text); }
:root[data-theme="dark"] .wp-block-separator { border-color: var(--line-strong); }
:root[data-theme="dark"] .wp-block-pullquote,
:root[data-theme="dark"] .wp-block-quote { border-color: var(--line-strong); }
:root[data-theme="dark"] .post_content img { opacity: .92; }
:root[data-theme="dark"] .post_content img:hover { opacity: 1; }

/******************************************************************
REDUCED MOTION & PRINT
******************************************************************/
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

@media print {
	* { background: transparent !important; color: #000 !important; box-shadow: none !important; }
	.header .menu-toggle, .primary-nav, #search-header, #sidebar-top, .sidebar, #breadcrumbs,
	.post-nav, #related-box, .share-links, .comment-form, .footer #footer-widgets, .pagination { display: none !important; }
	#inner-content { display: block !important; }
	#main { padding: 0 !important; }
	a { text-decoration: underline; }
	img { max-width: 100% !important; page-break-inside: avoid; }
}