/*
Theme Name: Webzill Lite
Author: Gabriel
Description: Ultra-lightweight, turnkey classic WordPress theme for Pinterest-driven listicle blogs. No jQuery, no page builder, no external fonts. Install and publish.
Version: 1.4.18
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webzill-lite
*/

/* Webzill Lite - main stylesheet. Single file, no imports, system fonts. */

:root {
	--ql-accent: #c96f4a;
	--ql-accent-dark: #a85636;
	--ql-ink: #2b2622;
	--ql-muted: #6f655c;
	--ql-bg: #fffdfb;
	--ql-soft: #faf3ee;
	--ql-surface: #fff;
	--ql-heading: #2b2622;
	--ql-line: #eadfd6;
	--ql-radius: 8px;
	--ql-radius-lg: 14px;
	--ql-wrap: 1200px;
	--ql-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ql-font-size: 18px; /* v1.4.7: Mediavine body-size guidance (18-20px) */
}

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

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

body {
	margin: 0;
	background: var(--ql-bg);
	color: var(--ql-ink);
	font-family: var(--ql-font-body);
	font-size: var(--ql-font-size);
	line-height: 1.6;
}

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

a {
	color: var(--ql-link, var(--ql-accent-dark));
	text-decoration-color: rgba(201, 111, 74, .4);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--ql-link-hover, var(--ql-accent));
}

h1, h2, h3, h4 {
	line-height: 1.25;
	color: var(--ql-heading);
	font-family: var(--ql-font-head, var(--ql-font-body));
	margin: 1.4em 0 .5em;
	font-weight: 700;
	letter-spacing: -.01em;
}

h1 { font-size: var(--ql-h1-size, 2.1rem); margin-top: 0; font-weight: var(--ql-h1-weight, 700); }
h2 { font-size: var(--ql-h2-size, 1.55rem); font-weight: var(--ql-h2-weight, 700); }
h3 { font-size: var(--ql-h3-size, 1.25rem); font-weight: var(--ql-h3-weight, 700); }
h4 { font-size: var(--ql-h4-size, 1em); font-weight: var(--ql-h4-weight, 700); }
h5 { font-size: var(--ql-h5-size, .83em); font-weight: var(--ql-h5-weight, 700); }
h6 { font-size: var(--ql-h6-size, .67em); font-weight: var(--ql-h6-weight, 700); }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.4em; }
li { margin-bottom: .35em; }
blockquote {
	margin: 0 0 1.2em;
	padding: .8em 1.1em;
	border-left: 4px solid var(--ql-accent);
	background: var(--ql-soft);
	border-radius: 0 var(--ql-radius) var(--ql-radius) 0;
}
blockquote p:last-child { margin-bottom: 0; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: static;
	width: auto; height: auto;
	clip: auto;
}

.ql-wrap {
	max-width: var(--ql-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.ql-header {
	border-bottom: 1px solid var(--ql-line);
	background: var(--ql-header-bg, var(--ql-surface));
}
.ql-header-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: wrap;
}
.ql-branding a {
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--ql-header-text, var(--ql-ink));
	text-decoration: none;
	letter-spacing: -.02em;
}
.ql-branding .custom-logo { max-height: 52px; width: auto; max-width: var(--ql-logo-w, none); }
.ql-tagline { margin: 0; color: var(--ql-muted); font-size: .9rem; }
.ql-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; gap: 24px; flex-wrap: wrap;
}
.ql-nav a {
	color: var(--ql-header-muted, var(--ql-ink));
	text-decoration: none;
	font-weight: 500;
	font-size: var(--ql-menu-size, .875rem); /* v1.4.14: Customizer menu size, default 14px */
}
.ql-nav a:hover { color: var(--ql-accent); }
/* v1.4.17: the mobile-menu eyebrow is mobile-only; it leaked onto desktop. */
.ql-nav-eyebrow { display: none; }
/* Menu items flagged "Style as CTA button" in Menus admin (v1.4.1):
   a pill in the header CTA color, like the CMS header CTA links. */
.ql-nav .ql-menu-cta a {
	background: var(--ql-header-cta, var(--ql-accent));
	color: #fff;
	padding: 9px 18px;
	border-radius: 999px;
}
.ql-nav .ql-menu-cta a:hover { color: #fff; opacity: .92; }
.ql-social { display: flex; gap: 10px; }
.ql-social a {
	font-size: .85rem;
	font-weight: 700;
	padding: 6px 12px;
	border: 1px solid var(--ql-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ql-ink);
	background: var(--ql-soft);
}

/* Hero (front page) */
.ql-hero {
	background: var(--ql-heading);
	color: #f5f1ea;
	padding: 88px 0 64px;
	text-align: left;
}
.ql-hero h1 { font-size: 2.5rem; margin-bottom: .3em; color: #fff; }

/* Design A — Magazine homepage (v1.4.18): light split hero + room tiles. */
.ql-hero-split { background: var(--ql-bg); border-bottom: 1px solid var(--ql-line); padding: 56px 0 48px; }
.ql-hero-split-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.ql-hero-split-noimg { grid-template-columns: 1fr; }
.ql-hero-eyebrow { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 12px; }
.ql-hero-eyebrow a { color: var(--ql-accent); text-decoration: none; }
.ql-hero-split h1 { font-size: 2.5rem; line-height: 1.15; margin: 0 0 .3em; color: var(--ql-heading); }
.ql-hero-split p { max-width: 560px; margin: 0 0 1.4em; color: var(--ql-ink); font-size: 1.12rem; }
.ql-hero-split-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ql-hero-split-img img { display: block; width: 100%; border-radius: var(--ql-radius-lg, var(--ql-radius)); aspect-ratio: 4 / 3; object-fit: cover; }
.ql-rooms { padding: 40px 0 8px; }
.ql-rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ql-room-tile { display: block; background: var(--ql-surface); border: 1px solid var(--ql-line); border-radius: var(--ql-radius-lg, var(--ql-radius)); padding: 20px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ql-room-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35, 32, 28, .10); border-color: var(--ql-accent); }
.ql-room-tile h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ql-heading); }
.ql-room-tile p { margin: 0; color: var(--ql-muted); font-size: .9rem; }
.ql-room-arrow { color: var(--ql-accent); font-weight: 700; }
@media (max-width: 900px) {
	.ql-hero-split-in { grid-template-columns: 1fr; gap: 24px; }
	.ql-hero-split { padding: 40px 0 32px; }
	.ql-hero-split h1 { font-size: 2rem; }
}
.ql-hero p {
	max-width: 560px;
	margin: 0 0 1.4em;
	color: rgba(255, 255, 255, .78);
	font-size: 1.12rem;
}
.ql-btn {
	display: inline-block;
	background: var(--ql-accent);
	color: var(--ql-btn-color, #fff) !important;
	font-weight: 700;
	padding: var(--ql-btn-pad, 12px 26px);
	border-radius: 999px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-size: 1rem;
}
.ql-btn:hover { background: var(--ql-accent-dark); }
.ql-btn-outline {
	background: transparent;
	color: var(--ql-accent-dark) !important;
	border: 2px solid var(--ql-accent);
}
/* v1.4.10: the generic hover above darkens the background, but the
   outline button's text was staying dark — dark on dark, invisible
   on hover. Same fix for the footer-band button below, whose text
   is also dark on a white button. */
.ql-btn-outline:hover,
.ql-btn-outline:focus {
	background: var(--ql-accent-dark);
	color: #fff !important;
	border-color: var(--ql-accent-dark);
}
.ql-footer-band:not(.ql-footer-band-floating) .ql-btn:hover,
.ql-footer-band:not(.ql-footer-band-floating) .ql-btn:focus {
	background: var(--ql-accent-dark);
	color: #fff !important;
}

/* Layout */
.ql-main { padding: 36px 0 56px; }
.ql-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ql-sidebar-w, 320px);
	gap: 40px;
	align-items: start;
}
.ql-section-title {
	margin-top: 0;
	font-size: 1.7rem;
	display: flex;
	align-items: center;
	gap: 16px;
}
.ql-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ql-line);
}

/* Cards grid */
.ql-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ql-card {
	background: var(--ql-surface);
	border: 1px solid var(--ql-line);
	border-radius: var(--ql-radius-lg, var(--ql-radius));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.ql-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}
.ql-card-thumb img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ql-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ql-card-cat {
	font-size: .69rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ql-accent);
}
.ql-card-cat a { text-decoration: none; color: var(--ql-secondary, var(--ql-accent-dark)); }
.ql-card-title { margin: 0; font-size: 1.06rem; }
.ql-card-title a { color: var(--ql-ink); text-decoration: none; }
.ql-card-title a:hover { color: var(--ql-accent-dark); }
.ql-card-excerpt { color: var(--ql-muted); font-size: .875rem; margin: 0; }
.ql-card-meta { margin-top: auto; color: var(--ql-muted); font-size: .75rem; }

/* Breadcrumbs */
.ql-breadcrumbs {
	font-size: .88rem;
	color: var(--ql-muted);
	margin-bottom: 18px;
}
.ql-breadcrumbs a { color: var(--ql-muted); }
.ql-breadcrumbs .ql-crumb-sep { margin: 0 6px; }

/* Single article */
.ql-byline {
	color: var(--ql-muted);
	font-size: .92rem;
	margin-bottom: 18px;
}
.ql-byline a { color: var(--ql-muted); font-weight: 600; }
.ql-hero-img { border-radius: var(--ql-radius-lg, var(--ql-radius)); margin-bottom: 22px; width: 100%; }
.ql-disclosure {
	font-size: .86rem;
	color: var(--ql-muted);
	font-style: italic;
	border: 1px dashed var(--ql-line);
	background: var(--ql-soft);
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 22px;
}
.ql-quick-answer {
	font-size: var(--ql-qa-size, inherit); /* v1.4.14 */
	background: color-mix(in srgb, var(--ql-secondary, var(--ql-accent)) 13%, var(--ql-surface));
	border: 1px solid color-mix(in srgb, var(--ql-secondary, var(--ql-accent)) 35%, transparent);
	border-radius: var(--ql-radius-lg, var(--ql-radius));
	padding: 24px 28px;
	margin-bottom: 26px;
}
.ql-quick-answer .ql-qa-label {
	display: block;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .8rem;
	color: var(--ql-secondary, var(--ql-accent-dark));
	margin-bottom: 6px;
}
.ql-quick-answer p:last-child { margin-bottom: 0; }

.ql-toc {
	font-size: var(--ql-toc-size, inherit); /* v1.4.14 */
	background: var(--ql-surface);
	border: 1px solid var(--ql-line);
	border-left: 5px solid var(--ql-accent);
	border-radius: var(--ql-radius);
	margin-bottom: 28px;
}
.ql-toc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	cursor: pointer;
	list-style: none;
}
.ql-toc summary::-webkit-details-marker { display: none; }
.ql-toc .ql-toc-title {
	font-weight: 800;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.ql-toc-pill {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ql-accent);
	border: 1px solid var(--ql-line);
	border-radius: 999px;
	padding: 4px 12px;
}
.ql-toc-pill::after { content: "Show"; }
.ql-toc[open ] .ql-toc-pill::after { content: "Hide"; }
.ql-toc ol { margin: 0; padding: 0 24px 20px 52px; }
.ql-toc a { text-decoration: none; }

.ql-entry-content { font-size: 1.05em; line-height: 1.85; } /* v1.4.7: em so article text follows the Customizer base size (18px -> 18.9px, inside Mediavine's 18-20px) */
.ql-entry-content p { margin-bottom: 1.8rem; }
.ql-entry-content h2 { scroll-margin-top: 20px; }

.ql-ad {
	margin: 26px 0;
	text-align: center;
}
.ql-ad:empty { margin: 0; }

/* FAQ */
.ql-faq { margin-top: 36px; }
.ql-faq details {
	border-top: 1px solid var(--ql-line);
	margin-bottom: 0;
}
.ql-faq details:last-of-type { border-bottom: 1px solid var(--ql-line); }
.ql-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	padding: 9px 0;
	list-style: none;
}
.ql-faq summary::-webkit-details-marker { display: none; }
.ql-faq summary::after { content: "+"; float: right; color: var(--ql-accent); font-weight: 800; }
.ql-faq details[open ] summary::after { content: "\2212"; }
.ql-faq .ql-faq-a { padding-bottom: 18px; color: var(--ql-muted); }
.ql-faq .ql-faq-a p:last-child { margin-bottom: 0; }

/* Author box */
.ql-author-box {
	display: flex;
	gap: 20px;
	border: 1px solid var(--ql-line);
	border-radius: var(--ql-radius-lg, var(--ql-radius));
	padding: 24px;
	margin-top: 36px;
	background: var(--ql-surface);
	align-items: flex-start;
}
.ql-author-box img { border-radius: 50%; flex: none; }
.ql-author-box .ql-author-name { font-weight: 800; margin: 0 0 4px; }
.ql-author-box p { margin: 0; color: var(--ql-muted); font-size: .95rem; }

/* Newsletter */
.ql-newsletter {
	background: var(--ql-soft);
	border: 1px solid var(--ql-line);
	border-radius: var(--ql-radius);
	padding: 26px;
	margin: 32px 0;
	text-align: center;
}
.ql-newsletter h2, .ql-newsletter h3 { margin-top: 0; }
.ql-newsletter p { color: var(--ql-muted); }
.ql-newsletter form {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 520px;
	margin: 0 auto;
}
.ql-newsletter input[type="email"] {
	flex: 1 1 240px;
	padding: 12px 16px;
	border: 1px solid var(--ql-line);
	border-radius: 999px;
	font-size: 1rem;
	background: var(--ql-surface);
}

/* Sidebar */
.ql-sidebar .widget {
	background: var(--ql-surface);
	border: 1px solid var(--ql-line);
	border-radius: var(--ql-radius-lg, var(--ql-radius));
	padding: 20px;
	margin-bottom: 24px;
}
.ql-sidebar .widget-title {
	margin-top: 0;
	font-size: .68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ql-muted);
}
.ql-sidebar ul { padding-left: 1.1em; margin-bottom: 0; }
.ql-sticky {
	position: sticky;
	top: 24px;
}
body.ql-has-sticky-header .ql-sticky { top: 100px; }

/* Pagination */
.ql-pagination { margin-top: 36px; text-align: center; }
.ql-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 3px;
	border: 1px solid var(--ql-line);
	border-radius: 8px;
	text-decoration: none;
	background: var(--ql-surface);
	color: var(--ql-ink);
}
.ql-pagination .page-numbers.current {
	background: var(--ql-accent);
	color: #fff;
	border-color: var(--ql-accent);
}
.ql-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 36px;
	font-weight: 600;
}

/* Archive / search / 404 */
.ql-page-head { margin-bottom: 28px; }
.ql-page-head p { color: var(--ql-muted); }
.ql-search-form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 18px 0;
}
.ql-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 11px 16px;
	border: 1px solid var(--ql-line);
	border-radius: 999px;
	font-size: 1rem;
	background: var(--ql-surface);
}
.ql-sidebar .ql-search-form {
	max-width: none;
	width: 100%;
	margin: 0;
}
.ql-none { text-align: center; padding: 40px 0; color: var(--ql-muted); }

/* Footer */
.ql-footer {
	background: var(--ql-footer-bg, var(--ql-heading));
	color: var(--ql-footer-text, #ede6dc);
	margin-top: 20px;
}
.ql-footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	padding: 44px 0 10px;
}
.ql-footer-widgets .widget-title {
	margin-top: 0;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ql-footer-text, #fff);
}
.ql-footer-widgets a { color: var(--ql-footer-muted, #a89e90); }
.ql-footer-widgets a:hover { color: var(--ql-footer-text, #fff); }
.ql-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--ql-footer-muted, #a89e90);
	font-size: .81rem;
}
.ql-footer-nav ul {
	list-style: none;
	display: flex;
	gap: 18px;
	margin: 0; padding: 0;
	flex-wrap: wrap;
}
.ql-footer-nav a { color: var(--ql-footer-muted, #a89e90); text-decoration: none; }
.ql-footer-nav a:hover { color: var(--ql-footer-text, #fff); }

/* WordPress core helpers */
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--ql-muted); text-align: center; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sticky { border-color: var(--ql-accent); }
.bypostauthor { font-weight: inherit; }

/* Responsive */
/* v1.4.13: breakpoints aligned to the CMS (site/css/*.css): desktop
   above 1200px, tablet 681–1200px, mobile 680px and below, with the
   CMS's 900px tablet step and 600px phone step. The sidebar already
   stacked at 1200px and the share rail already switched at 1440px /
   680px like the CMS; the mobile header and hero cap moved from
   700/701px to 680/681px and the phone step from 560px to 600px. */
/* Like the CMS, the sidebar layout goes single-column at 1200px. */
@media (max-width: 1200px) {
	.ql-layout { grid-template-columns: minmax(0, 1fr); }
	.ql-sticky { position: static; }
}

@media (max-width: 900px) {
	.ql-grid { grid-template-columns: repeat(2, 1fr); }
	.ql-footer-widgets { grid-template-columns: repeat(2, 1fr); }
	.ql-hero h1 { font-size: 2rem; }
	h1 { font-size: 1.8rem; }
}

@media (max-width: 600px) {
	.ql-grid { grid-template-columns: 1fr; }
	.ql-header-in { flex-direction: column; align-items: flex-start; }
	.ql-author-box { flex-direction: column; }
	body { font-size: var(--ql-font-size); } /* v1.4.7: follow the base-size setting on phones too (was a hardcoded 16px that pinned mobile text below Mediavine guidance) */
}

/* v1.1 Customizer-driven variants (only rendered when a control differs
   from the defaults above) */

/* Header: sticky, centered layout, search, button */
.ql-header-sticky {
	position: sticky;
	top: 0;
	z-index: 60;
}
body.admin-bar .ql-header-sticky { top: 32px; }
body.ql-has-sticky-header .ql-entry-content h2 { scroll-margin-top: 96px; }
.ql-header-centered {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.ql-header-centered .ql-nav ul { justify-content: center; }
.ql-header-centered .ql-branding { display: flex; flex-direction: column; align-items: center; }
.ql-header-search .ql-search-form { margin: 0; }
.ql-header-search .ql-search-form input[type="search"] { padding: 8px 14px; }
.ql-header-search .ql-search-form .ql-btn { padding: 8px 16px; }
.ql-header-btn { padding: 8px 18px; font-size: .875rem; font-weight: 500; background: var(--ql-header-cta, var(--ql-accent)); }

/* Layout: sidebar left / none */
.ql-layout-left { grid-template-columns: var(--ql-sidebar-w, 320px) minmax(0, 1fr); }
.ql-layout-left .ql-sidebar { order: -1; }
.ql-layout-none { grid-template-columns: minmax(0, 1fr); }

/* Homepage grid columns */
.ql-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ql-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Archive list layout */
.ql-grid-list { grid-template-columns: 1fr; gap: 20px; }
.ql-grid-list .ql-card { flex-direction: row; }
.ql-grid-list .ql-card-thumb { flex: 0 0 280px; }
.ql-grid-list .ql-card-thumb img { height: 100%; }

/* Category intro (term field) */
.ql-term-intro { color: var(--ql-muted); max-width: 720px; }
.ql-term-intro p:last-child { margin-bottom: 0; }

/* Author archive header + socials */
.ql-author-head { display: flex; gap: 20px; align-items: flex-start; }
.ql-author-head img { border-radius: 50%; flex: none; }
.ql-author-head h1 { margin-bottom: .2em; }
.ql-author-head p { color: var(--ql-muted); margin-bottom: .4em; }
.ql-author-socials { font-size: .92rem; font-weight: 600; margin: 6px 0 0; }
.ql-author-box .ql-author-socials { color: var(--ql-muted); }

@media (max-width: 1200px) {
	.ql-layout-left { grid-template-columns: minmax(0, 1fr); }
	.ql-layout-left .ql-sidebar { order: 0; }
}

@media (max-width: 900px) {
	.ql-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
	body.admin-bar .ql-header-sticky { top: 46px; }
}

@media (max-width: 600px) {
	.ql-grid-cols-2, .ql-grid-cols-4 { grid-template-columns: 1fr; }
	.ql-grid-list .ql-card { flex-direction: column; }
	.ql-grid-list .ql-card-thumb { flex: none; }
	.ql-author-head { flex-direction: column; }
	.ql-header-centered { align-items: flex-start; text-align: left; }
	.ql-header-centered .ql-branding { align-items: flex-start; }
}

/* v1.2 Posts/Pages Layout panel variants (only rendered when a control
   differs from the defaults above) */

/* Title band (title layout: above content) */
.ql-title-band {
	background: var(--ql-band, var(--ql-soft));
	border-bottom: 1px solid var(--ql-line);
	padding: 34px 0 30px;
	margin-bottom: 34px;
}
.ql-title-band .ql-page-head { margin-bottom: 0; }
.ql-title-band .ql-byline { margin-bottom: 0; }
.ql-title-band.ql-title-center { text-align: center; }

/* Centered titles (in-content placement) */
.ql-title-center > h1,
.ql-title-center > .ql-byline,
.ql-title-center > .ql-breadcrumbs,
.ql-title-center > .ql-post-cats,
.ql-title-center > .ql-standfirst { text-align: center; }
.ql-page-head.ql-title-center { text-align: center; }
.ql-title-center .ql-term-intro { margin-left: auto; margin-right: auto; }

/* Layout modes: narrow content + boxed content style */
.ql-content-narrow { max-width: var(--ql-narrow, 760px); margin-left: auto; margin-right: auto; width: 100%; }
.ql-boxed {
	background: var(--ql-surface);
	border: 1px solid var(--ql-line);
	border-radius: var(--ql-radius-lg, var(--ql-radius));
	padding: 26px 28px;
}

/* Single post title elements */
.ql-post-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}
.ql-post-cats a {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ql-accent);
	background: color-mix(in srgb, var(--ql-accent) 12%, var(--ql-surface));
	border: 1px solid color-mix(in srgb, var(--ql-accent) 25%, transparent);
	padding: 5px 12px;
	border-radius: 999px;
	text-decoration: none;
}
.ql-title-center > .ql-post-cats { justify-content: center; }
.ql-standfirst { font-size: 1.14rem; color: var(--ql-muted); margin: 0 0 16px; }
.ql-post-tags { margin-top: 28px; font-size: .92rem; color: var(--ql-muted); }

/* Author box: centered style */
.ql-author-box-center { flex-direction: column; align-items: center; text-align: center; }

/* Archive cards: unboxed style, 1-column grid, Read more link */
.ql-grid-unboxed .ql-card { background: transparent; border-color: transparent; }
.ql-grid-cols-1 { grid-template-columns: 1fr; }
.ql-card-more { font-weight: 700; margin-top: 6px; align-self: flex-start; }

@media (max-width: 600px) {
	.ql-boxed { padding: 20px 18px; }
}

/* v1.3 Templates (only rendered when a non-default template is chosen) */

/* Post template: Story — hero spans the full container above the
   narrow content column */
.ql-hero-wide { margin-bottom: 26px; }
.ql-hero-wide .ql-hero-img { display: block; margin-bottom: 0; }

/* v1.4.8: cap the single-post hero height on desktop so the Quick
   Answer and article start on the first screen. Full width is kept;
   the image is center-cropped, not squashed. Phones keep their
   natural 3:2 height (already short at phone widths). */
@media (min-width: 681px) {
	.ql-hero-img { height: 480px; object-fit: cover; object-position: center; }
}

/* Archive template: Pinterest Board — CSS-columns masonry, unboxed
   minimal cards with rounded pin-ratio images */
.ql-grid-board { display: block; column-count: 3; column-gap: 26px; }
.ql-grid-board .ql-card {
	display: block;
	break-inside: avoid;
	margin-bottom: 26px;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
}
.ql-grid-board .ql-card-thumb { display: block; }
.ql-grid-board .ql-card-thumb img { aspect-ratio: auto; border-radius: var(--ql-radius); display: block; }
.ql-grid-board .ql-card-body { padding: 10px 2px 0; }

/* Archive template: Featured — first card spans the whole grid row */
.ql-card-featured { grid-column: 1 / -1; flex-direction: row; max-height: 440px; }
.ql-card-featured .ql-card-thumb { flex: 0 0 55%; min-height: 280px; }
.ql-card-featured .ql-card-thumb img { height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }
.ql-card-featured .ql-card-body { justify-content: center; padding: 26px 30px; }
.ql-card-featured .ql-card-title { font-size: 1.55rem; }

/* Author template: Profile — centered card, large avatar, social
   links as accent buttons (font-size: 0 hides the " · " separators
   between the buttons) */
.ql-author-head-profile {
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--ql-surface);
	border: 1px solid var(--ql-line);
	border-radius: var(--ql-radius-lg, var(--ql-radius));
	padding: 30px 26px;
}
.ql-author-head-profile h1 { margin: 10px 0 .2em; }
.ql-author-head-profile p { max-width: 560px; }
.ql-author-head-profile .ql-author-socials { font-size: 0; margin-top: 14px; }
.ql-author-head-profile .ql-author-socials a {
	display: inline-block;
	font-size: .92rem;
	font-weight: 700;
	background: var(--ql-accent);
	color: #fff;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: 999px;
	margin: 0 4px;
}
.ql-author-head-profile .ql-author-socials a:hover { background: var(--ql-accent-dark); }

/* Author template: Minimal — name and bio on one line, nothing else */
.ql-author-head-minimal { align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.ql-author-head-minimal h1 { margin: 0; }
.ql-author-head-minimal p { margin: 0; }

@media (max-width: 900px) {
	.ql-grid-board { column-count: 2; }
}

@media (max-width: 600px) {
	.ql-grid-board { column-count: 1; }
	.ql-card-featured { flex-direction: column; max-height: none; }
	.ql-card-featured .ql-card-thumb { flex: none; }
	.ql-card-featured .ql-card-body { padding: 18px 20px 20px; }
}

/* v1.4.0 additions (only rendered when a non-default control is used,
   unless noted) */

/* Link styles (body classes from the Design → Colors link style) */
body.ql-links-none a { text-decoration: none; }
body.ql-links-hover a { text-decoration: none; }
body.ql-links-hover a:hover { text-decoration: underline; }

/* Shadows (body classes from Design → Buttons / General) */
body.ql-btn-shadow .ql-btn { box-shadow: 0 6px 18px rgba(35, 32, 28, .20); }
body.ql-card-shadow .ql-card,
body.ql-card-shadow .ql-boxed { box-shadow: 0 10px 26px rgba(35, 32, 28, .10); }

/* Topbar */
.ql-topbar {
	background: var(--ql-topbar-bg, var(--ql-accent));
	color: var(--ql-topbar-color, #fff);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
}
.ql-topbar-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 8px;
}
.ql-topbar-text { text-align: center; }
.ql-topbar-text p { margin: 0; }
/* With a secondary menu in the bar: message centers in the space left of the menu. */
.ql-topbar-in.ql-topbar-has-nav { justify-content: space-between; }
.ql-topbar-in.ql-topbar-has-nav .ql-topbar-text { flex: 1; }
.ql-topbar a { color: inherit; text-decoration: underline; }
.ql-topbar-nav ul {
	list-style: none;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0; padding: 0;
}
.ql-topbar-nav a { text-decoration: none; font-weight: 600; }
.ql-topbar-nav a:hover { text-decoration: underline; }

/* Header styles: Glass, SaaS, Transparent */
.ql-header-glass {
	background: color-mix(in srgb, var(--ql-header-bg, var(--ql-surface)) 82%, transparent);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.ql-header-saas .ql-header-btn { padding: 10px 24px; box-shadow: 0 4px 14px rgba(35, 32, 28, .16); }
.ql-header-transparent {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 50;
	background: transparent;
	border-bottom-color: transparent;
}
body.admin-bar .ql-header-transparent { top: 32px; }
body.ql-transparent-header .ql-hero { padding-top: 118px; }

/* Secondary menu bar (below-header placement) */
.ql-secondary-bar {
	background: var(--ql-surface);
	border-bottom: 1px solid var(--ql-line);
}
.ql-secondary-nav ul {
	list-style: none;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0; padding: 10px 0;
}
.ql-secondary-nav a {
	color: var(--ql-header-muted, var(--ql-ink));
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
}
.ql-secondary-nav a:hover { color: var(--ql-accent); }

/* Mobile menu (pure CSS checkbox toggle; the toggle input and burger
   label render whenever a primary menu exists, v1.4.6) */
.ql-nav-toggle {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.ql-nav-burger { display: none; }
.ql-nav-backdrop { display: none; } /* v1.4.14: label for the menu toggle; tapping it closes the menu */

@media (max-width: 680px) {
	.ql-nav-burger {
		display: flex;
		flex-direction: column;
		gap: 5px;
		cursor: pointer;
		padding: 10px 6px;
		margin-left: auto;
	}
	.ql-nav-burger span {
		display: block;
		width: 24px; height: 2px;
		background: var(--ql-header-text, var(--ql-ink));
		border-radius: 2px;
	}
	.ql-mmenu-drawer .ql-nav-toggle ~ .ql-nav {
		position: fixed;
		top: 0; right: 0;
		z-index: 80;
		width: var(--ql-drawer-w, min(320px, 85vw));
		height: 100dvh;
		background: var(--ql-mobile-panel-bg, var(--ql-surface)); /* v1.4.14: panel color control */
		box-shadow: -12px 0 32px rgba(35, 32, 28, .20);
		padding: 72px 26px 26px;
		transform: translateX(105%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
	.ql-mmenu-drawer .ql-nav-toggle:checked ~ .ql-nav { transform: none; }
	.ql-header:has(.ql-nav-toggle:checked) .ql-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(35,32,28,.35); cursor: pointer; } /* v1.4.16: outside-click close; behind the open panel (header-in z 61 / drawer z 80 / burger z 90), in front of page content */
	.ql-nav-toggle:checked ~ .ql-nav a { color: var(--ql-mobile-panel-text, var(--ql-header-muted, var(--ql-ink))); } /* v1.4.14: panel text color, mobile only */
	.ql-mmenu-drawer .ql-nav-toggle:checked ~ .ql-nav-burger {
		position: fixed;
		top: 12px; right: 14px;
		z-index: 90;
	}
	.ql-mmenu-drawer .ql-nav-toggle ~ .ql-nav ul { flex-direction: column; gap: 16px; }
	/* v1.4.17: in drawer style the extras belong INSIDE the drawer. Pin
	   them to its bottom (button, then socials, then search) so they are
	   never hidden behind the fixed panel. */
	.ql-mmenu-drawer .ql-nav-toggle:checked ~ .ql-header-btn { position: fixed; right: 26px; bottom: 24px; z-index: 81; margin: 0; }
	.ql-mmenu-drawer .ql-nav-toggle:checked ~ .ql-social { position: fixed; right: 26px; bottom: 84px; z-index: 81; }
	.ql-mmenu-drawer .ql-nav-toggle:checked ~ .ql-header-search { position: fixed; right: 26px; bottom: 132px; z-index: 81; width: calc(var(--ql-drawer-w, min(320px, 85vw)) - 52px); }
	.ql-nav-eyebrow {
		display: block;
		font-size: .78rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .07em;
		color: var(--ql-muted);
		margin: 0 0 14px;
	}
}

@media (max-width: 680px) {
	/* v1.4.6 compact mobile header (like the CMS): when a primary menu
	   exists, the bar is just the logo + hamburger. Nav, socials, search
	   and the header button collapse into the toggled panel below the
	   bar — in card style the nav expands in place; in drawer style it
	   keeps its slide-in panel and the extras expand the same way. */
	.ql-header-in:has(.ql-nav-toggle) {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}
	.ql-header-in:has(.ql-nav-toggle:checked) { flex-wrap: wrap; }
	/* v1.4.15: card style — the opened menu is ONE panel. The header
	   container itself takes the panel background/radius/shadow when
	   open (so nav, search, socials and button all sit on it, with no
	   header-bg stripes between rows), and sits above the backdrop so
	   the logo, X and button stay bright and tappable. */
	.ql-header-in:has(.ql-nav-toggle:checked) { position: relative; z-index: 61; } /* v1.4.16: panel (both styles) above the backdrop */
	.ql-mmenu-card .ql-header-in:has(.ql-nav-toggle:checked) {
		z-index: 61;
		background: var(--ql-mobile-panel-bg, var(--ql-surface));
		border-radius: 14px;
		box-shadow: 0 12px 32px rgba(35, 32, 28, .18);
		gap: 0;
		padding-bottom: 18px;
	}
	.ql-nav-toggle:not(:checked) ~ .ql-social,
	.ql-nav-toggle:not(:checked) ~ .ql-header-search,
	.ql-nav-toggle:not(:checked) ~ .ql-header-btn { display: none; }
	.ql-mmenu-card .ql-nav-toggle:not(:checked) ~ .ql-nav { display: none; }
	.ql-mmenu-card .ql-nav-toggle:checked ~ .ql-nav {
		flex-basis: 100%;
		order: 5;
		background: transparent;
		border-top: 1px solid var(--ql-line);
		padding: 14px 18px 8px;
		margin-top: 10px;
	}
	/* v1.4.15: links as separated rows inside the panel, not a loose
	   stack with gaps. */
	.ql-mmenu-card .ql-nav-toggle:checked ~ .ql-nav ul { flex-direction: column; gap: 0; }
	.ql-mmenu-card .ql-nav-toggle:checked ~ .ql-nav li + li { border-top: 1px solid var(--ql-line); }
	.ql-mmenu-card .ql-nav-toggle:checked ~ .ql-nav a { display: block; padding: 12px 0; }
	/* v1.4.15: search/socials rows share the panel (same padding, no
	   header-bg stripe between them and the nav). */
	.ql-mmenu-card .ql-nav-toggle:checked ~ .ql-header-search,
	.ql-mmenu-card .ql-nav-toggle:checked ~ .ql-social { padding: 8px 18px; }
	.ql-mmenu-card .ql-nav-toggle:checked ~ .ql-header-btn { margin: 10px 18px 0; }
	.ql-nav-toggle:checked ~ .ql-header-search { flex-basis: 100%; order: 6; }
	.ql-nav-toggle:checked ~ .ql-social { flex-basis: 100%; order: 7; }
	.ql-nav-toggle:checked ~ .ql-header-btn { order: 8; }
	.ql-nav-burger span { transition: transform .2s ease, opacity .2s ease; }
	.ql-nav-toggle:checked ~ .ql-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ql-nav-toggle:checked ~ .ql-nav-burger span:nth-child(2) { opacity: 0; }
	.ql-nav-toggle:checked ~ .ql-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.ql-branding .custom-logo { max-height: 44px; }
}

/* Pin It overlay */
.ql-pin-wrap { position: relative; display: block; }
.ql-pin-btn {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 2;
	background: #e60023;
	color: #fff;
	font-weight: 700;
	font-size: .875rem;
	padding: 9px 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
	border-radius: 999px;
	text-decoration: none;
	opacity: 0;
	transition: opacity .15s ease;
}
.ql-pin-wrap:hover .ql-pin-btn,
.ql-pin-wrap:focus-within .ql-pin-btn { opacity: 1; }
@media (hover: none) {
	.ql-pin-btn { opacity: .92; }
}

/* Share buttons */
.ql-share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 22px 0;
}
.ql-share-label {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .78rem;
	color: var(--ql-muted);
}
.ql-share-link {
	border: 1px solid var(--ql-line);
	background: var(--ql-surface);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--ql-ink);
}
.ql-share-link:hover { border-color: var(--ql-accent); color: var(--ql-accent-dark); }
.ql-share-rail {
	position: fixed;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	z-index: 55;
}
.ql-share-rail .ql-share-label {
	font-size: .63rem;
	letter-spacing: .18em;
	color: var(--ql-muted);
}
.ql-share-rail .ql-share-link {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
@media (max-width: 1440px) {
	/* Like the CMS: below wide screens the rail becomes a static row
	   under the byline instead of floating over the content. */
	.ql-share-rail {
		position: static;
		transform: none;
		flex-direction: row;
		align-items: center;
		margin: 18px 0;
	}
}

@media (max-width: 680px) {
	/* Like the CMS: on phones the share rail is a fixed bottom bar.
	   The footer gets matching bottom spacing so the bar never covers
	   the legal row at the end of the page. */
	.ql-share-rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		transform: none;
		flex-direction: row;
		justify-content: center;
		gap: 14px;
		margin: 0;
		padding: 8px 12px;
		background: var(--ql-surface);
		border-top: 1px solid var(--ql-line);
		z-index: 90;
	}
	.ql-share-rail .ql-share-label { display: none; }
	.ql-share-rail .ql-share-link { width: 40px; height: 40px; }
	body:has(.ql-share-rail) .ql-footer { margin-bottom: 57px; }
}

/* Footer band */
.ql-footer-band {
	background: transparent;
	padding: 0;
	margin: 34px 0 24px;
}
/* CMS-style band: a floating gradient card, 800px wide (the raw-HTML
   band keeps the plain wrapper — no card styling without .ql-band-in). */
.ql-footer-band:not(.ql-footer-band-floating):has(.ql-band-in) .ql-wrap {
	max-width: min(800px, calc(100% - 32px));
	background: linear-gradient(135deg, var(--ql-band, var(--ql-accent)), color-mix(in srgb, var(--ql-band, var(--ql-accent)) 68%, black));
	color: #fff;
	border-radius: 18px;
	padding: 34px 32px;
}
@media (max-width: 768px) {
	.ql-footer-band:not(.ql-footer-band-floating):has(.ql-band-in) .ql-wrap { padding: 24px 22px; }
	.ql-footer-band:not(.ql-footer-band-floating) .ql-band-in h2 { font-size: 1.25rem; }
}
.ql-footer-band:not(.ql-footer-band-floating) .ql-band-in h2 {
	color: #fff;
	font-size: 1.44rem;
}
.ql-footer-band:not(.ql-footer-band-floating) .ql-band-copy p {
	color: rgba(255, 255, 255, .95);
	font-size: .84rem;
	line-height: 1.6;
}
.ql-footer-band:not(.ql-footer-band-floating) .ql-band-copy .ql-band-eyebrow {
	color: rgba(255, 255, 255, .92);
	font-size: .63rem;
	font-weight: 700;
	letter-spacing: .18em;
}
.ql-footer-band:not(.ql-footer-band-floating) .ql-btn {
	background: #fff;
	color: var(--ql-accent-dark) !important;
	padding: 12px 24px;
	font-size: .84rem;
	font-weight: 600;
}
.ql-band-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	flex-wrap: wrap;
}
.ql-band-in h2 { margin: 0 0 6px; }
.ql-band-copy p { margin: 0; color: var(--ql-muted); }
.ql-band-copy .ql-band-eyebrow {
	font-size: .78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--ql-secondary, var(--ql-accent-dark));
	margin: 0 0 8px;
}
/* SaaS band: the band floats as a card overlapping the footer */
.ql-footer-band-floating {
	background: transparent;
	border-top: 0;
	padding: 0;
}
.ql-footer-band-floating .ql-wrap {
	background: var(--ql-band, var(--ql-soft));
	border: 1px solid var(--ql-line);
	border-radius: var(--ql-radius-lg, var(--ql-radius));
	box-shadow: 0 18px 40px rgba(35, 32, 28, .16);
	padding: 28px 30px;
	margin-bottom: -30px;
	position: relative;
	z-index: 2;
}

/* Footer: brand, socials, columns, centered bottom */
.ql-footer-brand { padding: 44px 0 0; }
.ql-footer-brand img { max-height: 44px; width: auto; }
.ql-footer-brand span {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ql-footer-text, #fff);
}
.ql-footer-socials { padding-top: 14px; }
.ql-footer-cols-1 { grid-template-columns: 1fr; }
.ql-footer-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ql-footer-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ql-footer-bottom-center {
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.ql-footer-bottom-center .ql-footer-nav ul { justify-content: center; }

@media (max-width: 900px) {
	.ql-footer-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.ql-footer-cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.ql-footer-cols-4 { grid-template-columns: 1fr; }
	.ql-footer-widgets { grid-template-columns: 1fr; }
	.ql-band-in { flex-direction: column; align-items: flex-start; }
	body.admin-bar .ql-header-transparent { top: 46px; }
}

/* Reduced motion: never smooth-scroll (the Customizer smooth-scroll
   toggle only ever ADDS the off override on top of this) */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ql-pin-btn, .ql-nav-toggle ~ .ql-nav { transition: none; }
}