/*
Theme Name: Bright English Words
Theme URI: https://brightenglishwords.com/
Author: Bright English Words
Author URI: https://brightenglishwords.com/
Description: Ad-hoc block theme (Full Site Editing) for Bright English Words. Built only with core blocks, no page builders. Designed for WCAG 2.1 AA and a very low page weight: two self-hosted subset fonts, about 1 KB of deferred JavaScript only for the dark theme and text size controls, no images bundled in templates. Structure inspired by Frost (WP Engine).
Tags: block-patterns, block-styles, custom-logo, custom-menu, editor-style, full-site-editing, accessibility-ready, one-column, template-editing, translation-ready, wide-blocks
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: bright-english-words
*/


/* Defaults
---------------------------------------- */

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

/* Text size chosen by the visitor (A− / A+ in the header). Every size,
   spacing and width in the theme is in rem, so the whole layout scales. */
html {
	font-size: calc(var(--bew-font-scale, 1) * 100%);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
}

a,
button,
.wp-element-button {
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, text-decoration-color 0.15s ease-in-out;
}

/* Links in running text are underlined (WCAG 1.4.1): the link colour has
   the same luminance as body text, so colour alone cannot identify a link. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	text-decoration-thickness: 2px;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--bold);
}

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

/* -- Focus (WCAG 2.4.7) -- */

:focus {
	outline: none;
}

:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--contrast);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: 2px;
}

.is-style-section-dark :focus-visible,
.has-primary-background-color :focus-visible,
.has-primary-dark-background-color :focus-visible,
.has-contrast-background-color :focus-visible,
.wp-block-cover :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* -- Screen reader text -- */

.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.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--primary);
	display: block;
	font-weight: var(--wp--custom--font-weight--bold);
	height: auto;
	left: 0.5rem;
	padding: 0.75rem 1.25rem;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

/* -- Forms -- */

input,
select,
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: var(--wp--custom--line-height--medium);
	max-width: 100%;
	padding: 0.625rem 0.875rem;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
	height: 1.25rem;
	width: 1.25rem;
}

/* Placeholder at 4.5:1 – never use it as the only label. */
::placeholder {
	color: var(--wp--preset--color--contrast-3);
	opacity: 1;
}

label {
	font-weight: var(--wp--custom--font-weight--bold);
}

/* Blocks
---------------------------------------- */

/* -- Header -- */

.site-header {
	position: relative;
	z-index: 10;
}

/* -- Navigation: current page also marked by underline, not colour only -- */

.wp-block-navigation .current-menu-item > a,
.wp-block-navigation [aria-current="page"] {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-block;
	padding-block: 0.5rem;
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base-3)!important;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast-2);
}

/* -- Mobile menu (core/details, no JavaScript) -- */

.wp-block-details.is-style-mobile-menu > summary {
	align-items: center;
	border: 2px solid currentColor;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--bold);
	gap: 0.5rem;
	list-style: none;
	min-height: 2.75rem;
	padding: 0.375rem 0.75rem;
}

.wp-block-details.is-style-mobile-menu > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-mobile-menu > summary::before {
	background: currentColor;
	box-shadow: 0 -0.375rem 0 currentColor, 0 0.375rem 0 currentColor;
	content: "";
	display: block;
	height: 0.1875rem;
	width: 1.25rem;
}

.wp-block-details.is-style-mobile-menu[open] > summary::before {
	background: none;
	box-shadow: none;
	content: "\00D7";
	content: "\00D7" / "";
	font-size: 1.75rem;
	height: auto;
	line-height: 1;
	text-align: center;
}

.wp-block-details.is-style-mobile-menu[open] > :not(summary) {
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--header);
	left: 0;
	padding: var(--wp--preset--spacing--small) var(--wp--custom--spacing--gutter);
	position: absolute;
	right: 0;
	top: 100%;
}

.wp-block-details.is-style-mobile-menu .wp-block-navigation__container {
	gap: 0;
}

.wp-block-details.is-style-mobile-menu .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	padding-block: 0.625rem;
}

/* -- "Read more →" links -- */

.is-style-link-arrow a,
.wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: var(--wp--custom--font-weight--regular);
	min-height: 1.5rem;
}

.is-style-link-arrow a::after,
.wp-block-read-more::after {
	content: "\2192";
	content: "\2192" / "";
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.15s ease-in-out;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--tertiary);	
}

.is-style-link-arrow a:hover::after,
.is-style-link-arrow a:focus::after,
.wp-block-read-more:hover::after,
.wp-block-read-more:focus::after {
	transform: translateX(0.25rem);
}

/* -- Query Loop Grid **/
.queryGrid li {
	background-color: var(--wp--preset--color--base);
    border-radius: var(--wp--custom--radius--medium);
    color: var(--wp--preset--color--contrast-2);
    padding-top: var(--wp--preset--spacing--small);
    padding-right: var(--wp--preset--spacing--small);
    padding-bottom: var(--wp--preset--spacing--small);
    padding-left: var(--wp--preset--spacing--small);
    box-shadow: var(--wp--preset--shadow--card);
    justify-content: space-between;
}

.queryGrid li h2,
.queryGrid li div.entry-content {
	margin-bottom: auto;
}

/* -- Post, query grids images, card images -- */
.wp-singular article figure img,
.wp-singular article p img,
.wp-singular > figure > img,
.wp-block-post-featured-image :where(img),
.page-template-wine-translator .wp-block-column.is-vertically-aligned-center.wp-block-column-is-layout-flow figure img {
	border-radius: var(--wp--custom--radius--medium)!important;
}
.wp-singular article p img {
	width: 100%!important;
}

/* -- Wine Translator page - Testimonials image -- */
.wine-testimonials img {
	width: auto!important;
}

/* -- Lists -- */

.is-style-no-disc {
	list-style: none;
	padding-left: 0 !important;
}

.is-style-no-disc li + li {
	margin-top: 0.5rem;
}

/* Contact list: icons are decorative (labels are the visible text). */
.is-style-contact-list {
	list-style: none;
	padding-left: 0 !important;
}

.is-style-contact-list li {
	align-items: center;
	display: flex;
	gap: 1rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
}

.is-style-contact-list li:nth-child(even) {
	background-color: var(--wp--preset--color--base-3);
}

.is-style-contact-list li::before {
	background-color: var(--wp--preset--color--contrast-3);
	content: "";
	flex: none;
	height: 1.125rem;
	-webkit-mask: var(--bew-icon, none) center / contain no-repeat;
	mask: var(--bew-icon, none) center / contain no-repeat;
	width: 1.125rem;
}

.is-style-contact-list .icon-email { --bew-icon: url(assets/icons/mail.svg); }
.is-style-contact-list .icon-phone { --bew-icon: url(assets/icons/phone.svg); }
.is-style-contact-list .icon-instagram { --bew-icon: url(assets/icons/instagram.svg); }
.is-style-contact-list .icon-linkedin { --bew-icon: url(assets/icons/linkedin.svg); }

/* -- Social links: grey circles, dark icons (non-text contrast 13:1) -- */

.wp-block-social-links.is-style-default .wp-social-link {
	background-color: var(--wp--preset--color--base-2) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.wp-block-social-links .wp-social-link a {
	padding: 0.5rem;
}

/* -- Wave divider (decorative, loads a 300-byte SVG only where used) -- */

.has-wave-top {
	position: relative;
}

.has-wave-top::before {
	aspect-ratio: 1440 / 60;
	background-color: var(--wp--preset--color--primary);
	bottom: calc(100% - 1px);
	content: "";
	left: 0;
	-webkit-mask: url(assets/images/wave.svg) bottom / 100% 100% no-repeat;
	mask: url(assets/images/wave.svg) bottom / 100% 100% no-repeat;
	pointer-events: none;
	position: absolute;
	right: 0;
}

/* -- Cover: text and headings inherit the light text colour -- */

.wp-block-cover:not(.is-light) :is(h1, h2, h3, h4, h5, h6),
.wp-block-cover:not(.is-light) a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
}

/* -- Icon in circle -- */

.wp-block-image.is-style-icon-circle img {
	background-color: var(--wp--preset--color--base);
	padding: 1.5rem;
}

/* -- Footer link lists: navigation context, underline on hover/focus -- */

.site-footer .is-style-no-disc a {
	color: var(--wp--preset--color--contrast);
	display: inline-block;
	padding-block: 0.125rem;
	text-decoration: none;
}

.site-footer .is-style-no-disc a:hover,
.site-footer .is-style-no-disc a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* -- Query loop cards -- */

.wp-block-post-template.is-layout-grid > li {
	display: flex;
	flex-direction: column;
}

.wp-block-post-template .wp-block-read-more {
	margin-top: auto;
}

/* -- Testimonial quote -- */

.wp-block-quote.is-style-plain cite {
	display: block;
	margin-top: var(--wp--preset--spacing--small);
}

.wp-block-quote.is-style-plain cite strong {
	color: var(--wp--preset--color--contrast);
	display: block;
}

/* -- Display preferences (header) -- */
@media (min-width: 768px) {
	.wp-block-site-logo img {
		height: 140px!important;
		width: auto!important;
	}
}
.bew-prefs {
	align-items: center;
	display: flex;
	gap: 0.375rem;
}

.bew-prefs[hidden] {
	display: none;
}

.bew-prefs__btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: var(--wp--custom--font-weight--bold);
	height: 2.75rem;
	justify-content: center;
	line-height: 1;
	min-width: 2.75rem;
	padding: 0 0.5rem;
}

.bew-prefs__btn:hover {
	background-color: var(--wp--preset--color--base-3);
}

.bew-prefs__btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.45;
}

/* Moon (light theme active) / sun (dark theme active), drawn with CSS. */
.bew-prefs__theme::before {
	background-color: currentColor;
	content: "";
	height: 1.25rem;
	-webkit-mask: var(--bew-theme-icon) center / contain no-repeat;
	mask: var(--bew-theme-icon) center / contain no-repeat;
	width: 1.25rem;
	--bew-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}

.bew-prefs__theme[aria-pressed="true"]::before {
	--bew-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M11 1h2v3h-2zM11 20h2v3h-2zM1 11h3v2H1zM20 11h3v2h-3zM4.2 2.8l2.1 2.1-1.4 1.4-2.1-2.1zM17.7 16.3l2.1 2.1-1.4 1.4-2.1-2.1zM2.8 19.8l2.1-2.1 1.4 1.4-2.1 2.1zM16.3 6.3l2.1-2.1 1.4 1.4-2.1 2.1z'/%3E%3C/svg%3E");
}

/* Inside the mobile menu the controls sit under the links. */
.wp-block-details.is-style-mobile-menu .bew-prefs {
	border-top: 1px solid var(--wp--preset--color--base-3);
	padding-top: var(--wp--preset--spacing--x-small);
}

/* -- Narrow measure for centred intros (Passions, page header) -- */

.bew-measure-narrow {
	margin-inline: auto !important;
	max-width: 28rem !important;
}

/* Dark theme
---------------------------------------- */

/* The palette is remapped, so every block, style and pattern follows.
   All pairs are WCAG AA (body text 11.3:1, muted 7.1:1, links 7.9:1,
   button text 7.9:1, borders 4.7:1). */
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #222222;
	--wp--preset--color--base-2: #141414;
	--wp--preset--color--base-3: #2C2C2C;
	--wp--preset--color--contrast: #F2F2F2;
	--wp--preset--color--contrast-2: #D9D9D9;
	--wp--preset--color--contrast-3: #ADADAD;
	--wp--preset--color--border: #8C8C8C;
	--wp--preset--color--primary: #F4A196;
	--wp--preset--color--primary-hover: #F8C3BB;
	--wp--preset--color--primary-dark: #FAD4CE;
	--wp--preset--color--secondary-text: #F5A372;
	--wp--preset--color--tertiary: #3D2620;
}

/* Sections that are already dark (photos with overlay, wine gradient,
   dark cards) keep the light palette, so their white text stays white. */
:root[data-theme="dark"] :is(.wp-block-cover, .is-style-section-dark, .has-wine-gradient-background, .has-primary-dark-background-color) {
	--wp--preset--color--base: #FFFFFF;
	--wp--preset--color--base-2: #E6E6E6;
	--wp--preset--color--base-3: #F2F2F2;
	--wp--preset--color--contrast: #1A1A1A;
	--wp--preset--color--contrast-2: #404040;
	--wp--preset--color--contrast-3: #595959;
	--wp--preset--color--border: #767676;
	--wp--preset--color--primary: #7F1613;
	--wp--preset--color--primary-hover: #651711;
	--wp--preset--color--primary-dark: #4D150E;
	--wp--preset--color--secondary-text: #B2430B;
	--wp--preset--color--tertiary: #F5DDCC;
}

/* The logo and the passion icons are dark red artwork: show them on a light chip. */
:root[data-theme="dark"] .wp-block-site-logo img,
:root[data-theme="dark"] .wp-block-image.is-style-icon-circle img {
	background-color: #FFFFFF;
}

:root[data-theme="dark"] .wp-block-site-logo img {
	border-radius: var(--wp--custom--radius--small);
	padding: 1rem;
}

/* Utility
---------------------------------------- */

.bew-mobile-only {
	display: none !important;
}

/* Header menu breakpoint: 64em (1024px), in em so it also follows browser zoom. */
@media (max-width: 63.99em) {
	.bew-desktop-only {
		display: none !important;
	}

	.bew-mobile-only {
		display: block !important;
	}
}

/* Same breakpoint at which core stacks the Columns block (781px). */
@media (max-width: 48.8125em) {
	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}
}

/* Footer: between phone and desktop the four columns would be too narrow,
   so the logo takes a full row and the three link lists share the next. */
@media (min-width: 48.875em) and (max-width: 74.99em) {
	.site-footer > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.site-footer > .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}
}

/* Reduced motion (WCAG 2.3.3 best practice)
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Forced colors (Windows High Contrast)
---------------------------------------- */

@media (forced-colors: active) {
	.wp-element-button,
	.wp-block-button__link {
		border: 2px solid ButtonText;
	}

	.is-style-contact-list li::before,
	.wp-block-details.is-style-mobile-menu:not([open]) > summary::before {
		background-color: CanvasText;
		forced-color-adjust: none;
	}
}