/*
 * Montessori Bees brand: fonts, colours, type scale and buttons.
 *
 * Loaded as-is on the site and in the block editor's canvas, after Twenty Twenty's own styles.
 * Selectors cover both places: `.entry-content` on the site, `.editor-styles-wrapper` in the editor
 * (the parent styles the editor with `.editor-styles-wrapper …` rules, so equal specificity is needed to win).
 *
 * Sizes are in px on purpose: the parent's 62.5% root size (1rem = 10px) only exists on the site.
 * Values come from the live Wix site at 1440px (desktop) and an iPhone at 390px (mobile);
 * clamp() scales linearly between the two.
 */

/*
 * Questrial (headings) and Karla (body), both SIL Open Font License: see ../fonts/OFL.txt and
 * ../fonts/OFL-karla.txt. Self-hosted to avoid Google Fonts requests. Karla is a variable font, so
 * one file per subset covers every weight from 400 to 700.
 *
 * Neither family draws Greek, so the Greek letters come from Didact Gothic (headings) and
 * Commissioner (body), which are next in the stacks below (decision H26). Their unicode-range is the
 * Greek block alone, so an English page never asks for them, and Latin words inside Greek copy
 * ("Montessori Bees", "Live") stay in Questrial and Karla.
 */
@font-face {
	font-family: "Questrial";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/questrial-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Questrial";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/questrial-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/karla-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/karla-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Greek (Didact Gothic and Commissioner, both SIL Open Font License: see ../fonts/OFL-didact-gothic.txt
 * and ../fonts/OFL-commissioner.txt). Monotonic Greek only, which is all the site writes; polytonic
 * (U+1F00-1FFF) would fall back to the system font. Commissioner is variable, like Karla.
 */
@font-face {
	font-family: "Didact Gothic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/didact-gothic-greek.woff2) format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Commissioner";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/commissioner-greek.woff2) format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/*
 * The design system's palette (the canvas at https://claude.ai/artifact/NKLJ3cagq7mz4t7VdsPqgx),
 * adopted as the site's colours on 2026-09-20 in place of the Wix maroon and blush.
 * Keep these in sync with the editor palette in functions.php.
 */
:root {
	--mb-primary: #68869a;     /* Logo, large headings, icons. Large text only: 3.5-3.8:1 on cream. */
	--mb-deep: #435d6c;        /* Buttons, header, panels, strong text. Carries anything body-sized. */
	--mb-deep-shade: #37505e;  /* A step under Deep Blue-Grey: the About band, drop-downs, dividers. */
	--mb-cream: #f7f3ec;       /* The page. */
	--mb-beige: #e8ded1;       /* Bands, cards and dividers that need to lift off the page. */
	--mb-honey: #d6ae5d;       /* Accents: quote marks, social icons, highlights. Dark text only. */
	--mb-sage: #a7b5a0;        /* Secondary accent. Dark text only. */
	--mb-charcoal: #3e4142;    /* Body text. */
	--mb-pale-green: #e8efe7;  /* The testimonial columns. */
	--mb-white: #fff;
	--mb-highlight: rgb(104 134 154 / 45%); /* Highlight overlay (language switcher); not in the editor palette. */

	--mb-radius: 8px; /* Cards, panels and fields. Buttons stay square. */

	/* The page's measure: a 1120px column inside 80px margins on a 1440px screen. */
	--mb-gutter: 80px;
	--mb-page: 1280px;

	--mb-font-heading: "Questrial", "Didact Gothic", Helvetica, Arial, sans-serif;
	--mb-font-body: "Karla", "Commissioner", Helvetica, Arial, sans-serif;
}


@media (max-width: 781px) {

	:root {
		--mb-gutter: 20px;
	}
}


/* Base -------------------------------------- */

html :is(body, .editor-styles-wrapper),
.entry-content {
	font-family: var(--mb-font-body);
	font-size: 16px;
	letter-spacing: -0.01em;
	line-height: 1.5;
}

html :is(body, .editor-styles-wrapper) {
	background: var(--mb-cream);
	color: var(--mb-charcoal);
}

/* Editor only: the parent gives the canvas's top-level containers Inter at 21px. */
html .editor-styles-wrapper > * {
	font-family: var(--mb-font-body);
	font-size: 16px;
}

p,
ol,
ul,
dl,
dt,
:is(.entry-content, .editor-styles-wrapper) :is(p, li, ol, ul, dl, dt) {
	font-family: var(--mb-font-body);
	font-size: inherit;
	letter-spacing: inherit;
	line-height: 1.5;
}

a,
:is(.entry-content, .editor-styles-wrapper) a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* Headings ---------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
:is(.entry-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .wp-block-post-title {
	color: inherit;
	font-family: var(--mb-font-heading);
	font-feature-settings: normal;
	font-weight: 400; /* Questrial has one weight; anything bolder would be faked by the browser. */
	letter-spacing: -0.04em;
	line-height: 1.05;
	text-transform: none;
}

/* Hero title: 53px desktop, 27px mobile. */
h1,
:is(.entry-content, .editor-styles-wrapper) h1,
.editor-styles-wrapper .wp-block-post-title {
	font-size: clamp(27px, 17.343px + 2.476vw, 53px);
	line-height: 1.02;
}

/* Section title ("About me", "Services"): 56 / 30. */
h2,
:is(.entry-content, .editor-styles-wrapper) h2 {
	font-size: clamp(30px, 20.343px + 2.476vw, 56px);
	letter-spacing: -0.05em;
}

/* Card title ("Seminars"): 34 / 27. */
h3,
:is(.entry-content, .editor-styles-wrapper) h3 {
	font-size: clamp(27px, 24.4px + 0.667vw, 34px);
}

/* Subheading ("Welcome"): 26 / 22. */
h4,
:is(.entry-content, .editor-styles-wrapper) h4 {
	font-size: clamp(22px, 20.514px + 0.381vw, 26px);
	letter-spacing: -0.03em;
}

h5,
:is(.entry-content, .editor-styles-wrapper) h5 {
	font-size: 20px;
	letter-spacing: normal;
}

/* Card subtitle: 18 / 17. */
h6,
:is(.entry-content, .editor-styles-wrapper) h6 {
	font-size: clamp(17px, 16.629px + 0.095vw, 18px);
	letter-spacing: -0.01em;
}


/* Paragraph style "Accent font": Questrial body text, as in the Wix "Our Commitment" text and testimonial quotes. */
:is(.entry-content, .editor-styles-wrapper) p.is-style-accent,
p.is-style-accent {
	font-family: var(--mb-font-heading);
	line-height: 1.2;
}


/* Colour pairs ------------------------------ */
/* A block with a brand background and no text colour chosen gets the matching text colour. */

.has-warm-cream-background-color:not(.has-text-color),
.has-soft-beige-background-color:not(.has-text-color),
.has-pale-green-background-color:not(.has-text-color),
.has-honey-background-color:not(.has-text-color),
.has-soft-sage-background-color:not(.has-text-color),
.has-white-background-color:not(.has-text-color) {
	color: var(--mb-charcoal);
}

.has-deep-blue-grey-background-color:not(.has-text-color),
.has-primary-background-color:not(.has-text-color),
.has-charcoal-background-color:not(.has-text-color) {
	color: var(--mb-cream);
}


/* Buttons ----------------------------------- */
/* `:root` lifts these above WordPress's global button styles and the parent's editor button rule. */

/* Primary ("Explore More"): Deep Blue-Grey, square, 160 × 48. */
:root .wp-block-button .wp-block-button__link,
:root .wp-block-file .wp-block-file__button {
	background: var(--mb-deep);
	border: 0;
	border-radius: 0;
	color: var(--mb-white);
	font-family: var(--mb-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 24px;
	padding: 12px 32px;
	text-decoration: none;
	text-transform: none;
}

:root .wp-block-button .wp-block-button__link:is(:hover, :focus) {
	text-decoration: underline;
}

/* Secondary ("Watch Replay", "Info"): white with Deep Blue-Grey text, spaced letters, 134 × 40. */
:root .wp-block-button.is-style-secondary .wp-block-button__link {
	background: var(--mb-white);
	color: var(--mb-deep);
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 16px;
	min-width: 134px;
	padding: 12px 24px;
}


/* Buttons, fields and notices ------------------------------------------------------------------------
 *
 * Moved here from shop.css on 20 Sep 2026: forms are no longer only the shop's. The testimonial page
 * uses the same fields, the same notices and the same buttons, and so will anything else with a form.
 */

:root {
	--mb-error: #9c4a45;         /* Form errors. 6:1 on white. */
	--mb-money: var(--mb-honey); /* The one colour that means "this costs money". Swap for var(--mb-deep) to undo. */
	--mb-money-ink: var(--mb-charcoal); /* White would fail contrast on honey; charcoal passes at 4.9:1. */
}

.mb-button {
	align-items: center;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	font-family: var(--mb-font-body);
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

:is(.entry-content, #mb) .mb-button,
:is(.entry-content, #mb) .mb-button:hover,
:is(.entry-content, #mb) .mb-button:focus {
	text-decoration: none;
}

.mb-button--outline,
:is(.entry-content, #mb) .mb-button--outline {
	background: var(--mb-white);
	border: 1px solid var(--mb-deep);
	color: var(--mb-deep);
	font-size: 14px;
	letter-spacing: 0.1em;
}

.mb-button--outline:hover,
.mb-button--outline:focus {
	background: var(--mb-deep);
	color: var(--mb-white);
	text-decoration: none;
}

.mb-button--money,
:is(.entry-content, #mb) .mb-button--money {
	background: var(--mb-money);
	color: var(--mb-money-ink);
	font-size: 15px;
}

.mb-button--money:hover,
.mb-button--money:focus {
	background: var(--mb-deep);
	color: var(--mb-white);
	text-decoration: none;
}

/* WooCommerce marks a card whose item is already in the basket. */
.mb-product-card .added_to_cart {
	color: var(--mb-deep);
	display: block;
	font-size: 14px;
	margin: 10px 12px 0;
	text-align: center;
}

:is(.entry-content, #mb) .mb-button--solid {
	background: var(--mb-deep);
	color: var(--mb-white);
	font-size: 17px;
	min-height: 52px;
	padding: 12px 40px;
}

.mb-button--solid:hover,
.mb-button--solid:focus {
	background: var(--mb-deep-shade);
	color: var(--mb-white);
}

:is(.entry-content, #mb) .mb-notice {
	border-left: 4px solid var(--mb-sage);
	border-radius: 4px;
	font-size: 16px;
	margin: 20px 0 0;
	max-width: 840px;
	padding: 14px 18px;
}

.mb-notice--good {
	background: var(--mb-pale-green);
}

.mb-notice--bad {
	background: var(--mb-white);
	border-left-color: var(--mb-error);
}

:is(.entry-content, #mb) .mb-form {
	background: var(--mb-white);
	border-radius: var(--mb-radius);
	margin-top: 26px;
	max-width: 840px;
	padding: 28px;
}

:is(.entry-content, #mb) .mb-form__row {
	display: flex;
	gap: 20px;
}

:is(.entry-content, #mb) .mb-form__field {
	flex-grow: 1;
	margin: 0 0 18px;
	max-width: none;
	width: auto;
}

:is(.entry-content, #mb) .mb-form label,
:is(.entry-content, #mb) .mb-form legend {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
	padding: 0;
}

:is(.entry-content, #mb) .mb-form :is(input[type="text"], input[type="email"], textarea) {
	background: var(--mb-white);
	border: 1px solid var(--mb-taupe, #d9d1c6);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	color: var(--mb-charcoal);
	font-family: var(--mb-font-body);
	font-size: 16px;
	padding: 12px 14px;
	width: 100%;
}

:is(.entry-content, #mb) .mb-form :is(input, textarea):focus {
	border-color: var(--mb-deep);
	outline: 2px solid var(--mb-deep);
	outline-offset: 1px;
}

:is(.entry-content, #mb) .mb-form__group {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
}

:is(.entry-content, #mb) .mb-form__choice {
	align-items: center;
	display: inline-flex;
	font-size: 16px;
	gap: 9px;
	margin: 0 22px 8px 0;
}

.mb-form__choice input {
	height: 18px;
	width: 18px;
}

.mb-form__help {
	color: #5d6263;
	display: block;
	font-size: 13px;
	margin-top: 8px;
}

/* A field for robots to fill in. */
.mb-form__trap {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}


/* Stars ---------------------------------------------------------------------------------------------
 *
 * Five real radio buttons, so the keyboard and screen readers get a proper choice. They are drawn as
 * stars and ordered backwards in the markup, which is what lets the stars to the left of the chosen
 * one fill in without any JavaScript.
 */

.mb-stars {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
}

.mb-stars legend {
	font-size: 14px;
	margin-bottom: 6px;
	padding: 0;
}

.mb-stars__row {
	display: flex;
	flex-direction: row-reverse;
	gap: 2px;
	justify-content: flex-end;
}

/* Kept in the page so it can still be focused and read out, just not seen. */
.mb-stars__input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.mb-stars__label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.mb-stars__label svg {
	fill: var(--mb-taupe, #d9d1c6);
	transition: fill 0.15s ease;
}

.mb-stars__input:checked ~ .mb-stars__label svg,
.mb-stars__label:hover svg,
.mb-stars__label:hover ~ .mb-stars__label svg {
	fill: var(--mb-honey);
}

.mb-stars__input:focus-visible + .mb-stars__label {
	outline: 2px solid var(--mb-deep);
	outline-offset: 2px;
}

/* A long agreement sits beside its box, not under it. */
.mb-form__consent {
	margin: 0 0 20px;
}

:is(.entry-content, #mb) .mb-form__consent .mb-form__choice {
	align-items: flex-start;
	display: flex;
	line-height: 1.5;
	margin: 0;
}

.mb-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	height: 20px;
	margin-top: 2px;
	width: 20px;
}

@media (prefers-reduced-motion: reduce) {

	.mb-stars__label svg {
		transition: none;
	}
}