/*
 * Beaver Builder Theme, Canvas engine.
 *
 * Tier 3 of the styling chain: bare, accessible, unbranded. Everything
 * here reads from --fl-theme-* variables, which the theme defines per
 * request from the design system, then Global Styles, then these
 * defaults. Selectors are wrapped in :where() so builder CSS, Global
 * Styles and design-system CSS always win on specificity.
 */

/* Reset, the short version
------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; }
:where(body) { margin: 0; }
:where(img, video, svg) { max-width: 100%; height: auto; }
:where(figure) { margin: 0; }

/* Base typography and colour
------------------------------------------------------ */
:where(body.fl-canvas) {
	background: var(--fl-theme-surface);
	color: var(--fl-theme-text-color);
	font-family: var(--fl-theme-text-font);
	font-size: var(--fl-theme-text-size);
	font-weight: var(--fl-theme-text-weight);
	line-height: 1.6;
}
:where(.fl-canvas) :where(h1, h2, h3, h4, h5, h6) {
	color: var(--fl-theme-heading-color);
	font-family: var(--fl-theme-heading-font);
	font-weight: var(--fl-theme-heading-weight);
	line-height: 1.2;
	margin: 0 0 .5em;
}
:where(.fl-canvas) :where(h1) { font-size: 2.25rem; }
:where(.fl-canvas) :where(h2) { font-size: 1.75rem; }
:where(.fl-canvas) :where(h3) { font-size: 1.375rem; }
:where(.fl-canvas) :where(h4) { font-size: 1.125rem; }
:where(.fl-canvas) :where(h5, h6) { font-size: 1rem; }
:where(.fl-canvas) :where(p, ul, ol, blockquote, pre, table, figure) { margin: 0 0 1.25em; }
:where(.fl-canvas) :where(a) { color: var(--fl-theme-link-color); text-decoration: underline; text-underline-offset: .15em; }
:where(.fl-canvas) :where(a:hover) { color: var(--fl-theme-link-hover-color); }
:where(.fl-canvas) :where(blockquote) { border-left: 3px solid var(--fl-theme-line); margin-left: 0; padding-left: 1.25em; }
:where(.fl-canvas) :where(hr) { border: 0; border-top: 1px solid var(--fl-theme-line); margin: 2em 0; }
:where(.fl-canvas) :where(code, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
:where(.fl-canvas) :where(table) { border-collapse: collapse; width: 100%; }
:where(.fl-canvas) :where(th, td) { border-bottom: 1px solid var(--fl-theme-line); padding: .5em .75em; text-align: left; }
:where(.fl-canvas) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea, select) {
	border: 1px solid var(--fl-theme-line); border-radius: var(--fl-theme-button-radius); font: inherit; padding: .5em .75em; max-width: 100%;
}

/* Buttons: theme buttons and the builder button floor.
   Beaver Builder omits its own button defaults when this theme is
   active, so this floor stands in until Global Styles or a design
   system takes over (both outrank :where()). */
:where(.fl-canvas) :where(button, input[type=submit], input[type=button], .fl-canvas-button),
:where(.fl-canvas .fl-builder-content) :where(.fl-button:is(a, button)) {
	background: var(--fl-theme-button-bg);
	border: 1px solid transparent;
	border-radius: var(--fl-theme-button-radius);
	color: var(--fl-theme-button-color);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	padding: .7em 1.2em;
	text-decoration: none;
}
:where(.fl-canvas .fl-builder-content) :where(.fl-button:is(a, button)) * { color: inherit; }
:where(.fl-canvas) :where(button, input[type=submit], input[type=button], .fl-canvas-button):hover,
:where(.fl-canvas .fl-builder-content) :where(.fl-button:is(a, button)):hover {
	background: var(--fl-theme-button-hover-bg);
	color: var(--fl-theme-button-hover-color);
}

/* Accessibility: always on
------------------------------------------------------ */
.fl-screen-reader-text {
	position: absolute !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important;
}
.fl-screen-reader-text:focus {
	clip: auto; clip-path: none; height: auto; width: auto; overflow: visible; position: fixed !important; top: 8px; left: 8px; z-index: 100000;
	background: var(--fl-theme-surface); color: var(--fl-theme-text-color); padding: .75em 1em; border-radius: var(--fl-theme-button-radius); box-shadow: 0 2px 12px rgba(0,0,0,.2); text-decoration: none;
}
:where(.fl-canvas) :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--fl-theme-primary); outline-offset: 2px;
}

/* Layout: width parity with the builder's global row width
------------------------------------------------------ */
.fl-canvas-container {
	margin-left: auto; margin-right: auto;
	max-width: var(--fl-theme-content-width);
	padding-left: var(--fl-theme-content-padding);
	padding-right: var(--fl-theme-content-padding);
	width: 100%;
}
.fl-canvas-narrow { max-width: min(var(--fl-theme-content-width), 46rem); }
.fl-canvas-content { padding-top: 3rem; padding-bottom: 3rem; }
.fl-canvas-content-builder { padding-top: 0; padding-bottom: 0; }
.fl-canvas-with-sidebar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }
@media (max-width: 767px) { .fl-canvas-with-sidebar { grid-template-columns: 1fr; } }
.fl-canvas-sidebar .fl-widget { margin-bottom: 2rem; }

/* Built-in header
------------------------------------------------------ */
.fl-canvas-header { border-bottom: 1px solid var(--fl-theme-line); background: var(--fl-theme-surface); }
.fl-canvas-header-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
.fl-canvas-brand { display: flex; flex-direction: column; gap: .15rem; flex: 0 1 auto; max-width: 60%; }
.fl-canvas-brand img { display: block; max-height: 80px; width: auto; max-width: 100%; }
.fl-canvas-site-title { font-size: 1.375rem; font-weight: 700; margin: 0; line-height: 1.2; }
.fl-canvas-site-title a { color: var(--fl-theme-heading-color); text-decoration: none; }
.fl-canvas-tagline { margin: 0; font-size: .875rem; opacity: .75; }
.fl-canvas-nav { margin-left: auto; }
.fl-canvas-menu, .fl-canvas-menu ul { list-style: none; margin: 0; padding: 0; }
.fl-canvas-menu { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.fl-canvas-menu li { position: relative; }
.fl-canvas-menu a { color: var(--fl-theme-text-color); display: block; padding: .5rem .75rem; text-decoration: none; }
.fl-canvas-menu a:hover, .fl-canvas-menu .current-menu-item > a { color: var(--fl-theme-link-color); }
.fl-canvas-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 12rem; background: var(--fl-theme-surface); border: 1px solid var(--fl-theme-line); border-radius: var(--fl-theme-button-radius); padding: .25rem 0; z-index: 20; }
.fl-canvas-menu li:hover > .sub-menu, .fl-canvas-menu li:focus-within > .sub-menu { display: block; }
.fl-canvas-nav-toggle { display: none; align-items: center; gap: .5rem; background: transparent; color: var(--fl-theme-text-color); border: 1px solid var(--fl-theme-line); font-weight: 500; margin-left: auto; }
.fl-canvas-nav-toggle-bars { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

/* Header layouts */
.fl-canvas-header-stacked .fl-canvas-header-inner { flex-direction: column; text-align: center; gap: .75rem; }
.fl-canvas-header-stacked .fl-canvas-brand { align-items: center; }
.fl-canvas-header-stacked .fl-canvas-nav { margin-left: 0; }
.fl-canvas-header-stacked .fl-canvas-menu { justify-content: center; }
.fl-canvas-header-below .fl-canvas-nav { flex-basis: 100%; margin-left: 0; border-top: 1px solid var(--fl-theme-line); padding-top: .5rem; }
.fl-canvas-header-below .fl-canvas-menu > li:first-child > a { padding-left: 0; }

/* Sticky */
.fl-canvas-sticky .fl-canvas-header { position: sticky; top: 0; z-index: 30; }
.admin-bar.fl-canvas-sticky .fl-canvas-header { top: 32px; }
@media (max-width: 782px) { .admin-bar.fl-canvas-sticky .fl-canvas-header { top: 46px; } }

/* Mobile nav: a disclosure, no jQuery */
@media (max-width: 767px) {
	.fl-canvas-nav-toggle { display: inline-flex; }
	.fl-canvas-header-stacked .fl-canvas-nav-toggle { margin-left: 0; }
	.fl-canvas-nav { display: none; flex-basis: 100%; margin-left: 0; }
	.fl-canvas-nav.is-open { display: block; }
	.fl-canvas-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.fl-canvas-menu a { padding: .6rem 0; border-top: 1px solid var(--fl-theme-line); }
	.fl-canvas-menu .sub-menu { display: block; position: static; border: 0; padding: 0 0 0 1rem; min-width: 0; }
	.fl-canvas-header-below .fl-canvas-nav { border-top: 0; padding-top: 0; }
}

/* Built-in footer
------------------------------------------------------ */
.fl-canvas-footer { border-top: 1px solid var(--fl-theme-line); font-size: .9rem; }
.fl-canvas-footer-inner { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.fl-canvas-copyright { margin: 0; }
.fl-canvas-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.fl-canvas-footer-menu a { color: var(--fl-theme-text-color); text-decoration: none; }
.fl-canvas-footer-menu a:hover { color: var(--fl-theme-link-color); text-decoration: underline; }

/* Archives, entries, comments
------------------------------------------------------ */
.fl-canvas-archive-header { margin-bottom: 2.5rem; }
.fl-canvas-archive-title { font-size: 2rem; }
.fl-canvas-loop { display: grid; gap: 2.5rem; }
.fl-canvas-loop-item { display: grid; gap: 1rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; border-bottom: 1px solid var(--fl-theme-line); }
.fl-canvas-loop-item:has(.fl-canvas-loop-thumb) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 599px) { .fl-canvas-loop-item:has(.fl-canvas-loop-thumb) { grid-template-columns: 1fr; } }
.fl-canvas-loop-thumb img { border-radius: var(--fl-theme-button-radius); display: block; width: 100%; }
.fl-canvas-loop-title { font-size: 1.5rem; margin-bottom: .25em; }
.fl-canvas-loop-title a { color: inherit; text-decoration: none; }
.fl-canvas-loop-title a:hover { color: var(--fl-theme-link-color); }
.fl-canvas-entry-meta { font-size: .875rem; opacity: .8; margin: 0 0 1em; }
.fl-canvas-entry-meta a { color: inherit; }
.fl-canvas-loop-excerpt p:last-child { margin-bottom: 0; }
.fl-canvas-entry-header { margin-bottom: 2rem; }
.fl-canvas-entry-thumb { margin-bottom: 2rem; }
.fl-canvas-entry-content > :last-child { margin-bottom: 0; }
.fl-canvas-entry-content :where(.alignwide) { margin-left: calc(50% - 50vw + var(--fl-theme-content-padding)); margin-right: calc(50% - 50vw + var(--fl-theme-content-padding)); max-width: none; }
.fl-canvas-entry-footer { margin-top: 3rem; border-top: 1px solid var(--fl-theme-line); padding-top: 1.5rem; }
.fl-canvas-tags { font-size: .9rem; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1.5rem; }
.post-navigation .nav-links a { text-decoration: none; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.fl-canvas-nav-label { display: block; font-size: .8rem; opacity: .7; }
.fl-canvas-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.fl-canvas-pagination .page-numbers { padding: .4em .8em; border: 1px solid var(--fl-theme-line); border-radius: var(--fl-theme-button-radius); text-decoration: none; }
.fl-canvas-pagination .page-numbers.current { background: var(--fl-theme-primary); color: var(--fl-theme-button-color); border-color: transparent; }
.fl-canvas-page-links { margin-top: 1.5rem; }
.fl-canvas-no-results { max-width: 30rem; }
.search-form, .fl-canvas .search-form { display: flex; gap: .5rem; max-width: 30rem; }
.search-form input[type=search] { flex: 1; }

/* Comments (root comments.php + includes/comment.php markup) */
.fl-comments { margin-top: 3rem; border-top: 1px solid var(--fl-theme-line); padding-top: 2rem; }
.fl-comments-list, .fl-comments-list ul { list-style: none; margin: 0; padding: 0; }
.fl-comments-list .comment { margin-bottom: 1.5rem; }
.fl-comments-list ul.children { margin-left: 2rem; margin-top: 1rem; }
.fl-comment-avatar img { border-radius: 50%; }
.fl-comment-meta { font-size: .875rem; opacity: .8; }
.comment-form label { display: block; margin-bottom: .25rem; }
.comment-form textarea, .comment-form input:not([type=submit]):not([type=checkbox]) { width: 100%; }
.comment-form p { margin-bottom: 1rem; }