/*
Theme Name: Bare SEO Seven
Author: Asher Wolfstein
Description: A semantic block theme for WordPress 7.x with accessible display preferences, self-hosted hyperlegible fonts, and no-JavaScript fallbacks.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.14.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bare-seo-seven
Tags: blog, one-column, full-site-editing, rtl-language-support
*/

/*
 * Permanent outer site gutter.
 *
 * Keep all frontend content 1.33rem from the viewport edge even when saved
 * Global Styles override the theme.json root-spacing declaration.
 */
:root {
	--bare-seo-seven-site-gutter: 1.33rem;
}

body > .wp-site-blocks {
	box-sizing: border-box;
	width: 100%;
	padding: var(--bare-seo-seven-site-gutter) !important;
}

/* Full-alignment blocks remain inside the permanent site gutter. */
body > .wp-site-blocks .alignfull {
	margin-inline: 0 !important;
}

.language-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.language-switcher select,
.language-switcher button {
	font: inherit;
}

.language-switcher [hidden] {
	display: none;
}

/*
 * Site Settings
 *
 * Closed:
 * ┌─────────────────────────────┬──────────────┐
 * │ Site Settings               │ Reset button │
 * └─────────────────────────────┴──────────────┘
 *
 * Open:
 * ┌─────────────────────────────┬──────────────┐
 * │ Site Settings               │ Reset button │
 * ├────────────────────────────────────────────┤
 * │ Tabs                                       │
 * └────────────────────────────────────────────┘
*/

#site-settings {
	--site-settings-header-height: 2.75rem;

	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	align-items: start;
	column-gap: 1rem;
	width: 100%;
	min-width: 0;
	position: relative;
}

/*
 * Details spans both outer columns so its expanded content can
 * occupy the complete width.
 */
#site-settings-details {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	grid-row: 1;
	align-self: start;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
}

/*
 * Give the summary the same minimum height as the reset button,
 * then center its text vertically within that height.
 */
#site-settings-details > summary {
	display: list-item;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--site-settings-header-height);
	margin: 0;
	line-height: var(--site-settings-header-height);
	cursor: pointer;
}


/*
 * Everything after <summary> is rendered inside the browser's
 * generated ::details-content box.
 */
#site-settings-details::details-content {
	grid-column: 1 / -1;
	grid-row: 2;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: none;
}

/* Make the tabs fill the expanded region. */
#site-settings-details > .object-blocks-tabs {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin-inline: 0;
}

/*
 * The reset block stays at the top of the outer grid. Do not use
 * align-self: center here because the Details block becomes much
 * taller when expanded.
 */
#site-settings > .wp-block-bare-seo-seven-reset-preferences {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	justify-self: end;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	margin: 0;
}

/* Remove any default form margin. */
#site-settings .reset-preferences {
	margin: 0;
}

/*
 * Match the reset button's height to the summary header height.
 */
#site-settings .reset-preferences button {
	box-sizing: border-box;
	min-height: var(--site-settings-header-height);
	margin: 0;
}

/*
 * Override WordPress constrained-layout width limits for the two
 * direct children participating in this custom grid.
 */
#site-settings > #site-settings-details,
#site-settings > .wp-block-bare-seo-seven-reset-preferences {
	max-width: none;
}

/*
 * On small screens, place the reset control after the complete
 * Details region so it cannot overlap the tabs.
 */
@media (max-width: 600px) {
	#site-settings {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.75rem;
	}

	#site-settings-details {
		grid-template-columns: minmax(0, 1fr);
		grid-column: 1;
		grid-row: 1;
	}

	#site-settings-details > summary {
		grid-column: 1;
		grid-row: 1;
	}

	#site-settings-details::details-content {
		grid-column: 1;
		grid-row: 2;
	}

	#site-settings > .wp-block-bare-seo-seven-reset-preferences {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}
}

body {
	font-synthesis: none;
}

/* Keep false conditional blocks available when the editor's reveal option is on. */
.editor-styles-wrapper .bare-seo-seven-visibility-preview-hidden {
	opacity: 0.4;
	outline: 2px dashed currentColor;
	outline-offset: 3px;
}

strong { font-weight: 700; }

.search-result-content-type-label {
	font-weight: 650;
}

.query-result-metadata {
	gap: 0.25rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

main#main-content .query-result-metadata :where(p, .wp-block-post-date, .wp-block-post-author-name, .wp-block-post-terms) {
	width: auto;
	margin: 0;
}

.query-result-author,
.query-result-categories {
	gap: 0.25rem;
}

.query-result-metadata-label {
	font-weight: 650;
}

.article-introduction {
	border-inline-start: 0.25rem solid var(--control-border);
	padding-inline-start: 1rem;
}

.author-biography,
.content-callout,
.newsletter-signup {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50, 1.25rem);
	border: 1px solid var(--control-border);
}

.code-example-caption {
	font-style: italic;
}

.related-posts ul,
.table-of-contents :where(ul, ol),
.object-seo-navigation__list {
	padding-inline-start: 1.5rem;
}

.related-posts li + li {
	margin-block-start: 0.5rem;
}

.related-posts time {
	margin-inline-start: 0.5rem;
	font-size: 0.875em;
}

.preference-section-label {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 650;
	line-height: 1.2;
}

html[data-theme="light"],
html[data-theme="light"] body {
	color-scheme: light;
	background: var(--wp--preset--color--light-canvas);
	color: var(--wp--preset--color--light-text);
	--control-background: var(--wp--preset--color--light-surface);
	--control-background-hover: var(--wp--custom--color--light--control-hover);
	--control-background-active: var(--wp--custom--color--light--control-active);
	--control-border: var(--wp--preset--color--light-border);
	--control-foreground: var(--wp--preset--color--light-text);
	--control-focus: var(--wp--preset--color--light-link);
	--code-background: var(--wp--preset--color--light-surface);
	--code-border: var(--wp--custom--color--light--code-border);
	--code-foreground: var(--wp--preset--color--light-text);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
	color-scheme: dark;
	background: var(--wp--preset--color--dark-canvas);
	color: var(--wp--preset--color--dark-text);
	--control-background: var(--wp--preset--color--dark-surface);
	--control-background-hover: var(--wp--custom--color--dark--control-hover);
	--control-background-active: var(--wp--custom--color--dark--control-active);
	--control-border: var(--wp--preset--color--dark-border);
	--control-foreground: var(--wp--custom--color--dark--control-foreground);
	--control-focus: var(--wp--preset--color--dark-link);
	--code-background: var(--wp--custom--color--dark--code-background);
	--code-border: var(--wp--custom--color--dark--code-border);
	--code-foreground: var(--wp--custom--color--dark--control-foreground);
}

button,
input[type="submit"],
select {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.5em 0.75em;
	border: 2px solid var(--control-border);
	border-radius: 0.2rem;
	background: var(--control-background);
	color: var(--control-foreground);
	font: inherit;
	line-height: 1.25;
}

input:is([type="text"], [type="email"], [type="url"]),
textarea {
	box-sizing: border-box;
	width: min(100%, 40rem);
	min-height: 44px;
	padding: 0.5em 0.75em;
	border: 2px solid var(--control-border);
	border-radius: 0.2rem;
	background: var(--control-background);
	color: var(--control-foreground);
	font: inherit;
	line-height: 1.4;
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

button:not(:disabled),
input[type="submit"]:not(:disabled),
select:not(:disabled) {
	cursor: pointer;
}

:where(
	a,
	button,
	input:not([type="hidden"]),
	select,
	textarea,
	summary,
	[role="button"],
	.wp-block-navigation-item__content,
	.wp-block-button__link,
	.wp-element-button
):focus-visible {
	outline: 3px solid var(--control-focus);
	outline-offset: 3px;
}

.post-comments {
	margin-block-start: var(--wp--preset--spacing--60, 2rem);
}

.post-comments .comment-entry {
	padding-block: var(--wp--preset--spacing--40, 0.75rem);
	border-block-end: 1px solid var(--control-border);
}

.post-comments :where(.comment-form label) {
	display: block;
	font-weight: 650;
}

.post-comments .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.post-comments input[type="checkbox"] {
	min-width: 1.25rem;
	min-height: 1.25rem;
}

@media (hover: hover) {
	button:not(:disabled):hover,
	input[type="submit"]:not(:disabled):hover,
	select:not(:disabled):hover {
		background: var(--control-background-hover);
	}
}

button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
select:not(:disabled):active {
	background: var(--control-background-active);
}

button:disabled,
input[type="submit"]:disabled,
select:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

a {
	text-decoration: none;
}

:where(main#main-content) :where(a:not(.wp-element-button, .wp-block-button__link)) {
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
}

:where(main#main-content) :where(nav, h1, h2, h3, h4, h5, h6) a {
	text-decoration: none;
}

html[data-theme="light"] a,
html[data-theme="light"] .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--light-link);
}

html[data-theme="dark"] a,
html[data-theme="dark"] .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--dark-link);
}

html[data-accessibility~="large-text"] {
	font-size: 125%;
}

html[data-accessibility~="high-contrast"],
html[data-accessibility~="high-contrast"] body {
	color-scheme: dark;
	background: var(--wp--preset--color--high-contrast-canvas);
	color: var(--wp--preset--color--high-contrast-text);
}

html[data-accessibility~="high-contrast"] a,
html[data-accessibility~="high-contrast"] .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--high-contrast-accent);
}

html[data-accessibility~="underline-links"] a {
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.15em;
}

/*
 * Content-width preferences.
 *
 * The page always retains the 1.33rem site padding defined in
 * theme.json. "Full" means all available space inside that padding.
 */
html[data-content-width="60ch"] {
	--text-column-width: 60ch;
	--wide-canvas-width: 75ch;
}

html[data-content-width="80ch"] {
	--text-column-width: 80ch;
	--wide-canvas-width: 100ch;
}

html[data-content-width="100ch"] {
	--text-column-width: 100ch;
	--wide-canvas-width: 125ch;
}

html[data-content-width="120ch"] {
	--text-column-width: 120ch;
	--wide-canvas-width: 150ch;
}

html[data-content-width]:not([data-content-width="full"]) body main#main-content {
	box-sizing: border-box;
	width: min(100%, var(--wide-canvas-width));
	max-width: var(--wide-canvas-width);
	margin-inline: auto;
}

html[data-content-width="full"] {
	--text-column-width: 100%;
	--wide-canvas-width: 100%;
}

html[data-content-width="full"] body main#main-content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

main#main-content :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
	box-sizing: border-box;
	width: min(100%, var(--text-column-width));
	max-width: var(--text-column-width);
	margin-inline: auto;
}

html[data-content-width="full"] main#main-content :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

main#main-content :where(.alignwide, .alignfull) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

main#main-content :where(.alignwide, .alignfull) :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Remove WordPress's normal content-size limit from constrained Groups in Full Width mode. */
html[data-content-width="full"] main#main-content .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	width: 100%;
	max-width: none;
}

:where(code, pre, kbd, samp) {
	font-family: var(--wp--preset--font-family--atkinson-hyperlegible-mono);
	font-variant-ligatures: none;
}

code {
	padding: 0.1em 0.3em;
	border: 1px solid var(--code-border);
	border-radius: 0.2rem;
	background: var(--code-background);
	color: var(--code-foreground);
	font-size: 0.92em;
	overflow-wrap: anywhere;
}

pre {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	tab-size: 4;
	-webkit-overflow-scrolling: touch;
}

pre:not(.wp-block-code) {
	padding: 1rem;
	border: 1px solid var(--code-border);
	border-radius: 0.2rem;
	background: var(--code-background);
	color: var(--code-foreground);
	font-size: 0.92rem;
	line-height: 1.55;
}

pre code,
.wp-block-code code {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	overflow-wrap: normal;
	word-break: normal;
	white-space: pre;
}

kbd {
	display: inline-block;
	padding: 0.1em 0.4em;
	border: 1px solid var(--code-border);
	border-bottom-width: 3px;
	border-radius: 0.2rem;
	background: var(--code-background);
	color: var(--code-foreground);
	font-size: 0.88em;
	line-height: 1.25;
}

.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

:where(th, td) {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--code-border);
	text-align: start;
	vertical-align: top;
}

th {
	background: var(--code-background);
	color: var(--code-foreground);
	font-weight: 700;
}

main#main-content :where(p, li, dt, dd, td, th, a) {
	overflow-wrap: anywhere;
	word-break: normal;
}

@media (max-width: 600px) {
	pre:not(.wp-block-code) {
		padding: 0.75rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

.theme-mode-switch,
.content-width-switch {
	margin-block: 0.5rem;
}

.display-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.theme-mode-switch button,
.content-width-switch button,
.content-width-switch select,
.accessibility-option-buttons button {
	font: inherit;
}

.content-width-switch label {
	margin-inline-end: 0.25rem;
}

.content-width-switch noscript button {
	margin-inline-start: 0.5rem;
}

.accessibility-option-buttons form {
	display: inline-block;
	margin-block: 0.25rem;
	margin-inline: 0 0.5rem;
}

.theme-mode-switch br,
.content-width-switch br,
.accessibility-option-buttons form br {
	display: none;
}

.screen-reader-text:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.display-controls,
form.theme-mode-switch,
form.content-width-switch,
section.site-preferences {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.display-controls { gap: 1.33rem; }
form.theme-mode-switch,
form.content-width-switch { gap: 0.33rem; }
section.site-preferences { gap: 2rem; }

details.accessibility-options > summary {
	box-sizing: border-box;
	min-height: 44px;
	padding-block: 0.5em;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 650;
	line-height: 1.2;
}

details.accessibility-options .accessibility-option-buttons {
	margin-block-start: 0.5rem;
}

details.display-settings > summary {
	box-sizing: border-box;
	min-height: 44px;
	padding-block: 0.5em;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 650;
}

.display-settings-controls {
	gap: 0.75rem;
	margin-block-start: 0.5rem;
}

.display-settings-controls form,
.display-settings-controls .wp-block-bare-seo-seven-reset-preferences {
	margin: 0;
}

.preference-current-state {
	display: block;
	font-weight: 650;
}

.object-lingo-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0;
	margin-block: 0.5rem;
	list-style: none;
}

.object-seo-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	padding: 0;
	margin-block: 0.5rem 1rem;
	list-style: none;
}

.object-seo-breadcrumbs__separator {
	user-select: none;
}

@media (forced-colors: none) {
	html[data-accessibility~="high-contrast"] button,
	html[data-accessibility~="high-contrast"] input[type="submit"],
	html[data-accessibility~="high-contrast"] select,
	html[data-accessibility~="high-contrast"] input:is([type="text"], [type="email"], [type="url"]),
	html[data-accessibility~="high-contrast"] textarea {
		background: var(--wp--preset--color--high-contrast-canvas);
		color: var(--wp--preset--color--high-contrast-text);
		border: 2px solid var(--wp--preset--color--high-contrast-text);
	}

	html[data-accessibility~="high-contrast"] :where(code, pre, kbd, th) {
		border-color: var(--wp--preset--color--high-contrast-text);
		background: var(--wp--preset--color--high-contrast-canvas);
		color: var(--wp--preset--color--high-contrast-text);
	}

	html[data-accessibility~="high-contrast"] button:not(:disabled):hover,
	html[data-accessibility~="high-contrast"] input[type="submit"]:not(:disabled):hover,
	html[data-accessibility~="high-contrast"] select:not(:disabled):hover,
	html[data-accessibility~="high-contrast"] button:not(:disabled):active,
	html[data-accessibility~="high-contrast"] input[type="submit"]:not(:disabled):active,
	html[data-accessibility~="high-contrast"] select:not(:disabled):active {
		background: var(--wp--preset--color--high-contrast-text);
		color: var(--wp--preset--color--high-contrast-canvas);
	}

	html[data-accessibility~="high-contrast"] :where(
		a,
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[role="button"],
		.wp-block-navigation-item__content,
		.wp-block-button__link,
		.wp-element-button
	):focus-visible {
		outline-color: var(--wp--preset--color--high-contrast-accent);
	}
}

@media (forced-colors: active) {
	html,
	body {
		forced-color-adjust: auto;
		background: Canvas;
		color: CanvasText;
		--control-background: ButtonFace;
		--control-background-hover: Highlight;
		--control-background-active: Highlight;
		--control-border: ButtonText;
		--control-foreground: ButtonText;
		--control-focus: Highlight;
		--code-background: Canvas;
		--code-border: CanvasText;
		--code-foreground: CanvasText;
	}

	html[data-accessibility],
	html[data-accessibility] body {
		background: Canvas;
		color: CanvasText;
	}

	html[data-theme] a,
	html[data-accessibility] a,
	html[data-theme] .wp-block-navigation .wp-block-navigation-item__content,
	html[data-accessibility] .wp-block-navigation .wp-block-navigation-item__content {
		color: LinkText;
	}

	:where(
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		.wp-block-button__link,
		.wp-element-button,
		[role="button"]
	) {
		forced-color-adjust: auto;
		border-color: ButtonText;
		background: ButtonFace;
		color: ButtonText;
	}

	html[data-accessibility] :where(
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		.wp-block-button__link,
		.wp-element-button,
		[role="button"]
	) {
		border-color: ButtonText;
		background: ButtonFace;
		color: ButtonText;
	}

	:where(
		button:not(:disabled),
		input[type="submit"]:not(:disabled),
		.wp-block-button__link,
		.wp-element-button,
		[role="button"]
	):is(:hover, :active) {
		background: Highlight;
		color: HighlightText;
	}

	html[data-accessibility] :where(
		button:not(:disabled),
		input[type="submit"]:not(:disabled),
		.wp-block-button__link,
		.wp-element-button,
		[role="button"]
	):is(:hover, :active) {
		background: Highlight;
		color: HighlightText;
	}

	:where(button, input, select, textarea):disabled {
		color: GrayText;
		border-color: GrayText;
	}

	:where(code, pre, kbd, th, td, .content-callout, .author-biography, .newsletter-signup) {
		forced-color-adjust: auto;
		border-color: CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	:where(
		a,
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[role="button"],
		.wp-block-navigation-item__content,
		.wp-block-button__link,
		.wp-element-button
	):focus-visible {
		outline-color: Highlight;
	}
}