/*
Theme Name:   Montessori Bees
Description:  Child theme of Twenty Twenty for the Montessori Bees site (moved from Wix).
Template:     twentytwenty
Version:      0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain:  montessori-bees
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Site-only styles. Fonts, colours, type and buttons shared with the editor live in assets/css/brand.css.
 */


/* Page areas -------------------------------- */
/* Deep Blue-Grey header on a Warm Cream page, Soft Beige footer. Header and footer layouts come with their own templates. */

#site-header {
	background: var(--mb-deep);
	color: var(--mb-white);
}

.singular .entry-header {
	background: none;
}

#site-footer {
	/* The footer's hairlines: a soft warm rule, where the Wix-era footer used a solid maroon one on blush. */
	--mb-rule: color-mix(in srgb, var(--mb-charcoal) 22%, transparent);

	background: var(--mb-beige);
	color: var(--mb-charcoal);
}


/* Header ------------------------------------ */
/*
 * Sizes measured on the Wix site: desktop at 1440px, small screens in Wix's own mobile units
 * (like the type scale). Desktop starts at 1000px, Twenty Twenty's breakpoint for the horizontal menu.
 * `#site-header` keeps these ahead of the parent's header rules and their media queries.
 */

#site-header .header-inner {
	max-width: none;
	padding: 0;
	width: 100%;
}

/* Small screens: 60px bar, wordmark centred, hamburger on the right. */

#site-header .header-titles-wrapper {
	height: 60px;
	justify-content: center;
	padding: 0 60px;
	text-align: center;
}

#site-header .site-logo img {
	margin: 0;
	max-height: none;
}

#site-header .site-logo .custom-logo {
	height: auto;
	width: 100px;
}

#site-header .site-logo-hexagon {
	display: none;
}

#site-header .nav-toggle {
	color: var(--mb-cream);
	justify-content: center;
	padding: 0;
	right: 11px; /* The 44px tap area puts the icon 22px from the edge. */
	width: 44px;
}

#site-header .nav-toggle svg {
	fill: currentColor;
	height: 20px;
	width: 22px;
}

/* Arrow for items with a drop-down: a thin chevron, turned up while the drop-down is open. */

#site-header .primary-menu .icon {
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	height: 8px;
	transform: rotate(45deg);
	transition: transform 0.15s linear;
	width: 8px;
}

#site-header .primary-menu .icon::before,
#site-header .primary-menu .icon::after {
	content: none;
}

@media (min-width: 1000px) {

	/* Stays at the top while scrolling, as on Wix. Anchor links stop below it. */
	#site-header {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.admin-bar #site-header {
		top: 32px;
	}

	html {
		scroll-padding-top: 60px;
	}

	html:has(> body.admin-bar) {
		scroll-padding-top: 92px;
	}

	/*
	 * Logo | menu centred on the page | language switcher (positioned further down).
	 * Positioned on desktop only: the parent's z-index on .header-inner would lift it above the mobile menu.
	 */
	#site-header .header-inner {
		align-items: start;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		height: 60px;
		padding: 0 17px;
		position: relative;
	}

	#site-header .header-titles-wrapper {
		height: auto;
		justify-content: flex-start;
		margin: 0;
		max-width: none;
		padding: 0;
	}

	#site-header .header-titles,
	#site-header .header-titles .site-logo {
		margin: 0;
	}

	#site-header .site-logo a {
		align-items: flex-start;
		display: flex;
		gap: 11px;
	}

	#site-header .site-logo .site-logo-hexagon {
		display: block;
		height: 40px;
		margin-top: 10px;
		width: 35px;
	}

	#site-header .site-logo .custom-logo {
		margin-top: 20px;
		width: 141px;
	}

	/* Main menu: white, 16px, 30px between items. Underlined on hover and focus only. */
	#site-header ul.primary-menu {
		flex-wrap: nowrap;
		font-size: 16px;
		font-weight: 400;
		justify-content: center;
		letter-spacing: normal;
		margin: 20px 0 0;
	}

	#site-header .primary-menu li {
		line-height: 30px;
		margin: 0;
	}

	#site-header .primary-menu a {
		line-height: inherit;
		padding: 0 15px;
		text-decoration: none;
		white-space: nowrap;
	}

	#site-header .primary-menu .current_page_ancestor {
		text-decoration: none;
	}

	#site-header .primary-menu a:is(:hover, :focus) {
		text-decoration: underline;
	}

	#site-header .primary-menu > li.menu-item-has-children > a {
		margin: 0;
		padding-right: 36px;
	}

	#site-header .primary-menu > li > .icon {
		right: 18px;
		top: calc(50% - 6px);
	}

	#site-header .primary-menu li.menu-item-has-children:is(:hover, .focus) > .icon {
		transform: translateY(4px) rotate(225deg);
	}

	/* Drop-downs: square, no pointer, 7px below the menu. "More" is the deeper shade with white centred items. */
	#site-header .primary-menu ul {
		background: var(--mb-deep-shade);
		border-radius: 0;
		color: var(--mb-white);
		font-size: 16px;
		min-width: 124px;
		padding: 0;
		top: calc(100% + 7px);
		transform: translate(50%, 6px);
		width: max-content;
	}

	#site-header .primary-menu li.menu-item-has-children:is(:hover, :focus, .focus) > ul {
		right: 50%;
		transform: translate(50%, 0);
	}

	#site-header .primary-menu ul::before {
		height: 7px;
	}

	#site-header .primary-menu ul::after {
		content: none;
	}

	#site-header .primary-menu ul a {
		line-height: 31px;
		padding: 0 13px;
		text-align: center;
	}

	/*
	 * Language switcher (Polylang's menu item, last in the main menu): cream, 168px wide, on the right.
	 * While open it's highlighted and the other languages hang below it, as on Wix.
	 */
	#site-header .primary-menu > .pll-parent-menu-item {
		line-height: 45px;
		position: absolute;
		right: 17px;
		top: 10px;
		width: 168px;
	}

	#site-header .primary-menu > .pll-parent-menu-item > a {
		color: var(--mb-cream);
		padding: 0 42px 0 15px;
	}

	#site-header .primary-menu > .pll-parent-menu-item > .icon {
		color: var(--mb-cream);
	}

	/* The highlight is a translucent Primary over the Deep Blue-Grey header, too dark for charcoal text. */
	#site-header .primary-menu > .pll-parent-menu-item:is(:hover, .focus) > a {
		background: var(--mb-highlight);
		color: var(--mb-cream);
		text-decoration: none;
	}

	#site-header .primary-menu > .pll-parent-menu-item:is(:hover, .focus) > .icon {
		color: var(--mb-cream);
	}

	#site-header .primary-menu .pll-parent-menu-item > ul {
		background: var(--mb-deep);
		border: 1px solid color-mix(in srgb, var(--mb-deep) 60%, transparent);
		color: var(--mb-cream);
		min-width: 0;
		top: 100%;
		transform: translateY(6px);
		width: 100%;
	}

	#site-header .primary-menu li.pll-parent-menu-item:is(:hover, :focus, .focus) > ul {
		right: 0;
		transform: none;
	}

	#site-header .pll-parent-menu-item ul a {
		line-height: 43px;
		padding: 0 15px;
		text-align: left;
	}

	#site-header .pll-parent-menu-item ul a:is(:hover, :focus) {
		background: var(--mb-highlight);
		color: var(--mb-cream);
		text-decoration: none;
	}
}


/* Full-screen menu (small screens) ---------- */
/* Deep Blue-Grey: the close ✕ where the hamburger was, then a narrow centred list with dark dividers. */

.menu-modal,
.menu-modal-inner {
	background: var(--mb-deep);
	color: var(--mb-cream);
}

.menu-modal .menu-wrapper {
	width: 100%;
}

.menu-modal button.close-nav-toggle {
	height: 60px;
	padding: 0 25px 0 0; /* Centres the ✕ on the hamburger's position. */
}

.menu-modal button.close-nav-toggle svg {
	height: 16px;
	width: 16px;
}

.menu-modal .modal-menu {
	left: auto;
	margin: 0 auto;
	width: 188px;
}

.menu-modal .modal-menu li {
	border-color: var(--mb-deep-shade);
	border-width: 0 0 1px;
}

.menu-modal .modal-menu .ancestor-wrapper {
	justify-content: center;
}

/*
 * 56px rows, as on Wix: 24px of text with 16px above and below. Wix uses a 56px line-height, which
 * a label too long for the 188px menu (the Greek "Μοιράσου την εμπειρία σου") splits into two rows
 * 56px apart, looking like two items.
 */
.menu-modal .modal-menu a,
.menu-modal .modal-menu > li > .ancestor-wrapper > a {
	color: var(--mb-cream);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	padding: 16px 0;
	text-align: center;
}

/* The current page is white instead of underlined, as on Wix. */
.menu-modal .modal-menu li.current-menu-item > .ancestor-wrapper > a {
	color: var(--mb-white);
	text-decoration: none;
}

.menu-modal .modal-menu li > .ancestor-wrapper > a:is(:hover, :focus) {
	text-decoration: underline;
}

/*
 * A tapped link keeps focus and, on touch screens, hover (e.g. "English" after opening the list).
 * Once focused, it's underlined for keyboard focus only.
 */
.menu-modal .modal-menu li > .ancestor-wrapper > a:focus:not(:focus-visible) {
	text-decoration: none;
}

/* Language switcher: "English ⌄". The arrow follows the name; tapping either opens the list (theme.js). */
.menu-modal .modal-menu .pll-parent-menu-item > .ancestor-wrapper > a {
	width: auto;
}

.menu-modal .modal-menu > li > .ancestor-wrapper > button.sub-menu-toggle {
	border: 0;
	margin: 0;
	padding: 0 0 0 16px;
}

.menu-modal .modal-menu > li > .ancestor-wrapper > button.sub-menu-toggle svg {
	height: 7px;
	width: 12px;
}

.menu-modal .modal-menu ul li {
	border-width: 1px 0 0;
}


/* Back-to-top button (small screens) -------- */
/* White circle, thin Primary ring, Deep Blue-Grey arrow. theme.js fades it in once the page is scrolled. */

.back-to-top {
	align-items: center;
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: 50%;
	bottom: 40px;
	color: var(--mb-deep);
	display: flex;
	height: 44px;
	justify-content: center;
	opacity: 0;
	position: fixed;
	right: 20px;
	transition: opacity 0.5s, visibility 0s 0.5s;
	visibility: hidden;
	width: 44px;
	z-index: 5;
}

.back-to-top.is-visible {
	opacity: 1;
	transition: opacity 0.5s;
	visibility: visible;
}

@media (min-width: 1000px) {

	.back-to-top {
		display: none;
	}
}


/* Forms ------------------------------------- */

input,
textarea,
select,
.wp-block-search__input {
	border-radius: var(--mb-radius);
	font-family: var(--mb-font-body);
}

/* Form buttons ------------------------------ */
/* Same look as the primary button block. Twenty Twenty's .toggle buttons (menus, search) keep their own style. */

button:not(.toggle),
.button,
.faux-button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: var(--mb-deep);
	border-radius: 0;
	color: var(--mb-white);
	font-family: var(--mb-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}


/* Footer ------------------------------------ */
/*
 * Wix layout: brand and tagline | email, social icons and legal links, split by a 1px rule,
 * with another rule under both and the copyright on the right below it; shorter than Wix's (H12).
 * Small screens stack the two halves between full-width rules, without Wix's empty bands (H11).
 * Sizes as for the header: desktop from Wix at 1440px, small screens in Wix's mobile units; the brand
 * and tagline scale between the two. `#site-footer` keeps these ahead of the parent's footer rules.
 */

#site-footer {
	font-size: 16px;
	padding: 0 0 20px;
}

#site-footer p {
	margin: 0;
}

#site-footer a {
	color: inherit;
}

/* Brand: "Montessori Bees" 35 / 21 and the tagline 49 / 26, Questrial. */

#site-footer .footer-brand {
	border-bottom: 1px solid var(--mb-rule);
	padding: 30px 20px;
}

#site-footer .footer-site-title,
#site-footer .footer-tagline {
	font-family: var(--mb-font-heading);
}

#site-footer .footer-site-title {
	font-size: clamp(21px, 15.8px + 1.333vw, 35px);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

#site-footer .footer-tagline {
	font-size: clamp(26px, 17.457px + 2.19vw, 49px);
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin-top: 10px;
}

/* Email, social icons and legal links: 16px Helvetica. Only the legal links are always underlined, as on Wix. */

#site-footer .footer-links {
	border-bottom: 1px solid var(--mb-rule);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px 20px;
}

#site-footer .footer-contact {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#site-footer .footer-legal-menu a {
	text-decoration: underline;
}

/* Social icons: 22px charcoal circles, 12px apart, the logo cut out in the footer's Soft Beige. */

#site-footer ul.social-icons {
	gap: 12px;
	margin: 0;
	width: auto;
}

#site-footer .social-icons li {
	margin: 0;
}

#site-footer .social-icons a {
	background: var(--mb-charcoal);
	color: var(--mb-beige);
	height: 22px;
	overflow: hidden;
	width: 22px;
}

#site-footer .social-icons a:focus-visible {
	outline-color: var(--mb-deep);
}

#site-footer .social-icons svg {
	height: 22px;
	width: 22px;
}

/* "© year Montessori Bees", 14px, on the right. */

#site-footer .footer-copyright {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.3;
	margin-top: 16px;
	padding: 0 20px;
	text-align: right;
}

@media (min-width: 1000px) {

	/* About 460px tall in all, where Wix's is 813px: less empty space, same text sizes (H12). */
	#site-footer {
		padding: 48px 30px 20px;
	}

	/* Two halves, 360px tall. Their 1px line and the rule under them end 30px from the edges. */
	#site-footer .footer-columns {
		border-bottom: 1px solid var(--mb-rule);
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-height: 360px;
	}

	#site-footer .footer-brand {
		border-bottom: 0;
		border-right: 1px solid var(--mb-rule);
		padding: 40px 10px;
	}

	/* Two lines, "Connecting Families / with Education", at every desktop width. */
	#site-footer .footer-tagline {
		margin-top: 40px;
		max-width: 9.2em;
	}

	/*
	 * Contact and legal links side by side towards the right, starting level with the tagline;
	 * the email is level with the second legal link, as on Wix.
	 * The gap and right margin (62px and 42px at 1440px) narrow so both still fit at 1000px.
	 */
	#site-footer .footer-links {
		align-items: flex-start;
		border-bottom: 0;
		column-gap: clamp(24px, 8.6vw - 62px, 62px);
		flex-direction: row;
		justify-content: flex-end;
		padding: 120px clamp(20px, 2.9vw, 42px) 40px 30px;
	}

	#site-footer .footer-contact {
		gap: 8px;
		padding-top: 24px;
	}

	#site-footer .footer-copyright {
		padding: 0 10px;
	}
}


/* Account link --------------------------------------------------------------------------------------
 *
 * "Log in" on the right of the header, becoming "My seminars" once somebody is signed in — where Wix
 * had its Log In. Only the shop needs it, but it shows on every page, so it lives here rather than in
 * shop.css, which is only loaded on shop pages.
 */

.header-account__link {
	align-items: center;
	color: var(--mb-cream);
	display: inline-flex;
	gap: 8px;
	font-size: 15px;
	text-decoration: none;
}

.header-account__link:is(:hover, :focus) {
	text-decoration: underline;
}

.header-account__icon {
	flex-shrink: 0;
}

/* In the phone menu it sits under the last item, in the same rhythm as the menu links. */
.header-account--modal {
	border-top: 1px solid var(--mb-deep-shade);
	margin-top: 8px;
	padding: 18px 0 0;
	text-align: center;
}

.header-account--modal .header-account__link {
	font-size: 18px;
	justify-content: center;
}

@media (min-width: 1000px) {

	/* Left of the 168px language switcher, on the same line as it. */
	#site-header .header-account {
		line-height: 45px;
		position: absolute;
		right: 193px;
		top: 10px;
	}

	.header-account--modal {
		display: none;
	}
}

@media (max-width: 999px) {

	#site-header .header-account {
		display: none;
	}
}


/* Document pages ------------------------------------------------------------------------------------
 *
 * The legal pages, and anything else that is a title and then prose. Twenty Twenty dresses these like
 * a blog post: a 53px centred title, and section headings at the size the Home page uses for "Services".
 * A document wants a plain column: one measure, headings a step above the text, and a left edge the
 * title shares.
 *
 * The Home page (no title), the shop, the account and the blog all have their own templates, so this
 * only reaches the pages that have nothing else.
 */

body.page:not(.woocommerce-page) .entry-header-inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: calc(720px + var(--mb-gutter) * 2);
	padding: 48px var(--mb-gutter) 0;
	text-align: left;
	width: 100%;
}

body.page:not(.woocommerce-page) .entry-title {
	color: var(--mb-deep);
	font-size: clamp(28px, 22px + 1.4vw, 40px);
	letter-spacing: -0.04em;
	line-height: 1.1;
	margin-bottom: 0;
	margin-top: 0;
}

body.page:not(.woocommerce-page) .post-inner {
	padding-top: 28px;
}

/*
 * `#mb` matches nothing; it is there to outweigh the parent theme's own content rules. Full-width
 * blocks are left alone, or this would squeeze the Home page's sections into the document column.
 */
body.page:not(.woocommerce-page) :is(.entry-content, #mb) > *:not(.alignfull, .alignwide, .mb-section) {
	max-width: 720px;
}

body.page:not(.woocommerce-page) .entry-content :is(h2, h3, h4) {
	color: var(--mb-deep);
}

body.page:not(.woocommerce-page) .entry-content h2 {
	font-size: 26px;
	letter-spacing: -0.03em;
	margin-bottom: 12px;
	margin-top: 40px;
}

body.page:not(.woocommerce-page) .entry-content h3 {
	font-size: 21px;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
	margin-top: 30px;
}

body.page:not(.woocommerce-page) .entry-content :is(p, li) {
	font-size: 17px;
	line-height: 1.65;
}

body.page:not(.woocommerce-page) .entry-content li {
	margin-bottom: 10px;
}

body.page:not(.woocommerce-page) .entry-content li::marker {
	color: var(--mb-primary);
}