/*
Theme Name: Delighted Owl
Theme URI: https://delightedowl.com/
Author: Annie Strong
Description: Standalone block theme for Delighted Owl Pottery. Replaces the retired Ella child theme and its Genesis dependency.
Version: 1.3.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: delighted-owl
*/

/* Most styling lives in theme.json. These rules cover what it cannot express,
   and pin details measured directly off the previous Ella theme. */

/* --- Featured images in a loop -------------------------------------------- */
/* Fixed 300px wide, centred, never cropped - including tall portraits. */
.wp-block-post-template .wp-block-post-featured-image {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-template .wp-block-post-featured-image img {
	height: auto;
	object-fit: contain;
}

/* --- Header navigation ---------------------------------------------------- */
/* Measured from Ella: Source Sans Pro 15px/600, 1.5px tracking, berry. */
/* Typography and colour for the menu now live in theme.json, which WordPress
   emits at its own specificity. Only spacing is left here. */
.do-nav-rules .wp-block-navigation-item__content {
	line-height: 15px;
	text-decoration: none;
	padding: 20px 15px;
}

/* The teal rules above and below the menu. */
.do-nav-rules {
	border-top: 1.6px solid #154b54;
	border-bottom: 1.6px solid #154b54;
}


/* --- Footer bar ----------------------------------------------------------- */
/* Deep teal band with small white Lora text, matching Ella. */


.do-footer-links,
.do-footer-credit {
	font-family: Lora, Georgia, 'Times New Roman', serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 1px;
	color: #ffffff;
	margin: 0;
}

.do-footer-links a,
.do-footer-credit a {
	color: #ffffff;
	text-decoration: none;
}

.do-footer-links a:hover,
.do-footer-links a:focus {
	text-decoration: underline;
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 782px) {
	.do-nav-stack {
		width: 100%;
	}
}


/* --- Home carousel -------------------------------------------------------- */
/* Replaces jQuery Owl Carousel with a native scroll-snap strip: no JS needed to
   scroll, keyboard and touch friendly. The wrapper does the scrolling - the
   post-template <ul> carries WordPress layout classes and will not behave as a
   scroll container reliably. */
.do-carousel {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.do-carousel::-webkit-scrollbar {
	display: none;
}

.do-carousel .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.do-carousel .wp-block-post-template > li {
	flex: 0 0 300px;
	max-width: 300px;
	scroll-snap-align: start;
	margin: 0;
}

.do-carousel .wp-block-post-featured-image {
	margin: 0;
}

.do-carousel .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (max-width: 782px) {
	.do-carousel .wp-block-post-template > li {
		flex-basis: 62vw;
		max-width: 62vw;
	}
}

/* --- Header responsiveness ------------------------------------------------ */
/* WordPress only swaps the menu for a hamburger below 600px, so the band
   between there and full desktop has to be handled by hand. */

.wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}

/* Below this the logo and menu no longer sit comfortably side by side, so
   stack them and centre both. */
@media (max-width: 1150px) {
	.do-nav-stack {
		width: 100%;
	}

	.wp-block-site-logo,
	.wp-block-site-logo img {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Tighten the menu before it starts to crowd. */
@media (max-width: 900px) {
	.do-nav-rules .wp-block-navigation-item__content {
		padding: 14px 10px;
		font-size: 14px;
		letter-spacing: 1px;
	}
}

@media (max-width: 700px) {
	.do-nav-rules .wp-block-navigation-item__content {
		padding: 10px 8px;
		font-size: 13px;
	}
}

/* In the mobile overlay the submenu is expanded inline, so it needs room
   rather than the dropdown treatment. */
.wp-block-navigation__responsive-container.is-menu-open .do-nav-rules,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 10px 0;
}

/* --- Footer --------------------------------------------------------------- */
/* The teal bar is now an inner group so the search box can sit above it on the
   page background, the way the old footer widget area did. */
footer.wp-block-template-part {
	margin-top: 50px;
}

.do-footer-bar {
	background-color: #154b54;
	padding: 20px 0;
}

.do-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.do-footer-links,
.do-footer-credit {
	font-family: Lora, Georgia, 'Times New Roman', serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 1px;
	color: #ffffff;
	margin: 0;
}

.do-footer-links a,
.do-footer-credit a {
	color: #ffffff;
	text-decoration: none;
}

.do-footer-links a:hover,
.do-footer-links a:focus,
.do-footer-credit a:hover {
	text-decoration: underline;
}

/* --- Search --------------------------------------------------------------- */
/* Measured from Ella: 310px, 1.6px teal border, Source Sans Pro 17px/600. */
.do-search {
	max-width: 310px;
	margin-left: auto;
	margin-right: auto;
}

.do-search .wp-block-search__input {
	background-color: #ffffff;
	color: #154b54;
	border: 1.6px solid #154b54;
	border-radius: 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 10px 20px;
}

.do-search .wp-block-search__input::placeholder {
	color: #154b54;
	opacity: 0.75;
}

/* --- Pagination ----------------------------------------------------------- */
/* Teal blocks, berry for the current page - measured from Ella. */
.wp-block-query-pagination {
	margin-top: 40px;
	margin-bottom: 40px;
	gap: 5px;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers a,
.wp-block-query-pagination .wp-block-query-pagination-numbers span.current,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-block;
	background-color: #154b54;
	color: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 20px;
	margin: 0 2px;
	line-height: 1;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers span.current {
	background-color: #860743;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus {
	background-color: #860743;
	color: #ffffff;
}

/* The ellipsis between page numbers should not look like a button. */
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.dots {
	background: none;
	color: #154b54;
	padding: 16px 6px;
}

/* --- Header: centre the logo once the header stacks ----------------------- */
@media (max-width: 1150px) {
	.wp-block-site-logo {
		width: 100%;
		text-align: center;
	}

	.wp-block-site-logo img {
		display: inline-block;
	}
}

/* --- Footer spacing ------------------------------------------------------- */
/* Breathing room under the search box and around the footer generally. */
.do-search {
	margin-bottom: 10px;
}

.do-footer-social {
	margin-bottom: 10px;
}

.do-footer-bar {
	padding: 28px 0;
}

.do-footer-inner {
	gap: 12px;
}

/* Footer widget area padding. Set here rather than as a block attribute -
   hand-written block markup does not carry the inline style the block would
   normally generate. */
.do-footer-widgets {
	padding-top: 60px;
	padding-bottom: 60px;
}

/* Close button in the overlay, same typography as the menu. */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* --- Mobile menu button --------------------------------------------------- */
/* Typography only, applied at all widths. Crucially this must NOT set display:
   WordPress hides this button above 600px, and setting display here overrode
   that and left the button showing next to the full menu. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container-open {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #860743;
	padding: 20px 15px;
	background: none;
	border: 0;
}

/* Layout only where the button is actually used. */
@media (max-width: 599.98px) {
	.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		gap: 10px;
	}
}

/* Hamburger bars, drawn in CSS, to the LEFT of the word. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 22px;
	height: 16px;
	background-repeat: no-repeat;
	background-size: 22px 2.4px;
	background-position: 0 0, 0 6.8px, 0 13.6px;
	background-image:
		linear-gradient( #860743, #860743 ),
		linear-gradient( #860743, #860743 ),
		linear-gradient( #860743, #860743 );
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container-open:hover,
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container-open:focus {
	color: #154b54;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container-open:hover::before,
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container-open:focus::before {
	background-image:
		linear-gradient( #154b54, #154b54 ),
		linear-gradient( #154b54, #154b54 ),
		linear-gradient( #154b54, #154b54 );
}

/* --- About submenu -------------------------------------------------------- */
/* The default is a bare white rectangle. Give it the same 1.6px teal edge used
   by the menu rules and the search box, berry links, and a sea-glass hover so
   it reads as part of the site rather than a browser default. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #cfe9eb;
	border: 1.6px solid #154b54;
	border-radius: 0;
	padding: 6px 0;
	min-width: 210px;
	box-shadow: 0 8px 20px rgba( 21, 75, 84, 0.14 );
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 11px 20px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #860743;
	white-space: nowrap;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > .wp-block-navigation-item__content:hover,
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > .wp-block-navigation-item__content:focus {
	background-color: #a9d5da;
	color: #154b54;
}

/* Inside the mobile overlay the submenu is inline, so drop the panel styling. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0;
}

/* Core sets submenu link padding with a five-class selector, so this has to
   mirror its structure to win. */
.do-nav-rules .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 11px 20px;
}

/* --- Image hover ---------------------------------------------------------- */
/* Carried over from Annie's Additional CSS: linked images fade slightly on
   hover. She had also tried transform: scale(1.1) and commented it out, so only
   the fade is kept. */
.wp-block-post-featured-image img,
.wp-block-image img,
.do-carousel img,
.wp-block-latest-posts__featured-image img {
	transition: opacity 0.2s ease;
}

.wp-block-post-featured-image a:hover img,
.wp-block-post-featured-image a:focus img,
.wp-block-image a:hover img,
.wp-block-image a:focus img,
.do-carousel a:hover img,
.do-carousel a:focus img,
.wp-block-latest-posts__featured-image a:hover img {
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-featured-image img,
	.wp-block-image img,
	.do-carousel img,
	.wp-block-latest-posts__featured-image img {
		transition: none;
	}
}

/* Image links should never pick up the underline that text links get. */
.wp-block-image a,
.wp-block-post-featured-image a,
.wp-block-latest-posts__featured-image a {
	border-bottom: 0;
	text-decoration: none;
}

/* Small breathing room under galleries, as in the old Additional CSS. */
.wp-block-gallery {
	padding-bottom: 15px;
}


/* --- Share buttons -------------------------------------------------------- */
/* Replaces Genesis Simple Share. Outlined pills in each network's brand colour,
   matching the previous "share-outlined share-small" styling. */
.do-share {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 25px;
}

.do-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background-color: #ffffff;
	border: 0.8px solid currentColor;
	border-radius: 3px;
	padding: 3px 10px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none;
}

.do-share__btn--facebook {
	color: #3d5a98;
}

.do-share__btn--pinterest {
	color: #cb2127;
}

.do-share__btn:hover,
.do-share__btn:focus {
	background-color: currentColor;
}

.do-share__btn:hover span:not(.screen-reader-text),
.do-share__btn:focus span:not(.screen-reader-text),
.do-share__btn:hover svg,
.do-share__btn:focus svg {
	color: #ffffff;
	fill: #ffffff;
}

.do-share__btn svg {
	flex: 0 0 auto;
}

/* Visually hidden but available to screen readers. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Mobile overlay ------------------------------------------------------- */
/* Background and text colour come from the block's overlay attributes; these
   are the spacing and hierarchy the block does not handle. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 8px;
}

/* Submenus are expanded inline in the overlay. Indent and lighten them so they
   read as children rather than as more top-level items. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 13px;
	opacity: 0.85;
}

/* The parent of an expanded submenu is a toggle, not a destination - make that
   read as a group heading rather than a repeated link. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	opacity: 0.6;
	font-size: 13px;
}

/* --- Header social icons -------------------------------------------------- */
/* The block only carried a 12px top margin, which read as cramped against the
   menu rule above and the content below - more so on mobile where the icons sit
   directly under a full-width menu bar. Overrides the block's inline margin. */
.do-nav-stack > .wp-block-social-links {
	margin-top: 22px;
	margin-bottom: 10px;
}

@media (max-width: 782px) {
	.do-nav-stack > .wp-block-social-links {
		margin-top: 28px;
		margin-bottom: 20px;
	}
}

@media (max-width: 599.98px) {
	.do-nav-stack > .wp-block-social-links {
		margin-top: 32px;
		margin-bottom: 26px;
	}
}

/* --- Even spacing across menu items --------------------------------------- */
/* Plain links render as <a> with 15px side padding; submenu parents render as
   <button> which core strips to 0 left / 12.75px right to make room for the
   chevron. That made the gaps visibly uneven. Match the two. */
.do-nav-rules .wp-block-navigation .wp-block-navigation-submenu__toggle {
	padding: 20px 15px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* The chevron sits inside the button, so it no longer needs its own offset. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-icon {
	margin: 0;
	padding: 0;
}

/* Submenu rows inside the dropdown keep their own padding. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
	padding: 11px 20px;
}

/* --- Submenu panel colour (fix) ------------------------------------------- */
/* Setting overlayBackgroundColor gives the nav a .has-background class, and core
   then forces the submenu to inherit that background. Beat it explicitly, or the
   panel turns sea glass and the hover disappears against it. */
.do-nav-rules .wp-block-navigation.has-background .wp-block-navigation__submenu-container,
.do-nav-rules .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: #cfe9eb;
}

/* Inside the mobile overlay the submenu should stay flush with the overlay. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
}

/* --- Submenu panel colour (final) ----------------------------------------- */
/* The overlay colour attribute puts .has-background-background-color on the
   submenu container too, and WordPress emits that class with !important. No
   specificity can beat it, so this matches it deliberately. The only alternative
   was dropping the overlay attribute and hand-rolling the mobile overlay colour,
   which trades one override for another. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #cfe9eb !important;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > .wp-block-navigation-item__content:hover,
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > .wp-block-navigation-item__content:focus {
	background-color: #a9d5da !important;
	color: #154b54;
}

/* In the mobile overlay the submenu should sit flush on the overlay colour. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
}

/* --- Top-level menu hover ------------------------------------------------- */
/* Links already hover berry -> teal via theme.json's elements.link. Submenu
   parents render as <button>, which a link rule cannot match, so they need this
   to behave the same. The chevron uses currentColor and follows along. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-item__content {
	transition: color 0.15s ease;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-submenu__toggle:hover,
.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-submenu__toggle:focus {
	color: #154b54;
}

/* Keep the parent highlighted while its submenu is open. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	color: #154b54;
}

@media (prefers-reduced-motion: reduce) {
	.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-item__content {
		transition: none;
	}
}

/* Core pins menu links to color:inherit via a doubled-class selector at 0,3,0,
   and because it is not a hover rule it also wins during hover - which silently
   cancelled theme.json's link hover. Beat it explicitly for the anchors. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > a.wp-block-navigation-item__content:hover,
.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > a.wp-block-navigation-item__content:focus {
	color: #154b54;
}

/* Same for links inside the dropdown panel. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content:hover,
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content:focus {
	color: #154b54;
}

/* --- Quotes --------------------------------------------------------------- */
/* Applies to every quote, not just the one on the home template. Measured from
   the live About page: 1.6px teal rule on the left, italic Lora body, small
   uppercase cite. The old theme styled these site-wide via .wp-block-quote, so
   the home page quote and page-content quotes matched - this restores that. */
.wp-block-quote,
.do-quote {
	border: 0;
	border-left: 1.6px solid #154b54;
	border-radius: 0;
	margin: 40px;
	padding: 0 20px;
	text-align: center;
	background: none;
}

.wp-block-quote p,
.do-quote p {
	font-family: Lora, Georgia, 'Times New Roman', serif;
	font-size: 17px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.7;
	color: #154b54;
}

.wp-block-quote cite,
.do-quote cite {
	display: block;
	font-family: Lora, Georgia, 'Times New Roman', serif;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #154b54;
}

/* Tighten the side margins on small screens so quotes do not become a narrow
   column squeezed between the border and the viewport edge. */
@media (max-width: 599.98px) {
	.wp-block-quote,
	.do-quote {
		margin: 30px 0;
		padding: 0 16px;
	}
}

/* WordPress's constrained layout forces margin-left/right:auto !important on
   direct children of post content, which discards the 40px side margin the old
   theme used. Narrowing the box achieves the same inset without another
   !important, and stays centred. */
@media (min-width: 600px) {
	.wp-block-post-content > .wp-block-quote {
		max-width: calc(100% - 80px);
	}
}

/* --- Mobile overlay: accordion -------------------------------------------- */
/* Core renders every submenu expanded inside the overlay, which turns the menu
   into one long undifferentiated list - and it only gets worse as items are
   added. The toggle buttons already carry data-wp-bind--aria-expanded and the
   Interactivity API already tracks their open state; core simply overrides it
   here. Hooking onto that attribute gives an accordion with no JavaScript.

   Everything below is scoped to .is-menu-open, which exists only while the
   mobile overlay is open, so the desktop dropdowns are untouched. */

/* Collapsed. Core forces visibility with a quadrupled-class selector, so that
   one property has to be matched with !important; max-height does the
   animating, since display cannot be transitioned. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden !important;
	transition: max-height 0.3s ease, opacity 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	max-height: 60vh;
	opacity: 1;
	overflow: hidden;
	visibility: visible !important;
	transition: max-height 0.35s ease, opacity 0.25s ease 0.05s;
}

/* The chevron is the only affordance saying a row expands, so let it move. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	transition: transform 0.3s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon {
	transform: rotate( 180deg );
}

/* --- Mobile overlay: touch targets and hierarchy -------------------------- */
/* With the accordion in place a submenu parent is an interactive row again,
   not a passive group heading, so it carries the same weight as its siblings.
   This deliberately overrides the earlier opacity: 0.6 / 13px treatment. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	opacity: 1;
	font-size: 17px;
}

/* 17px over 14px of vertical padding gives a ~48px row, the usual minimum for
   a comfortable tap. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 17px;
	padding: 16px 0;
}

/* Hairline rules so the list reads as discrete choices, not a run of text. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid rgba( 21, 75, 84, 0.18 );
}

/* Children indent and step down one size, still comfortably tappable. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 15px;
	opacity: 1;
	padding: 15px 0 15px 18px;
}

/* --- Mobile overlay: entrance --------------------------------------------- */
/* Core shows the overlay instantly. A short fade with a little downward travel
   reads as deliberate, and the stagger gives the rows somewhere to arrive
   from. Matches the reduced-motion courtesy the carousel already observes. */
@keyframes doOverlayItemIn {
	from { opacity: 0; transform: translateY( -6px ); }
	to   { opacity: 1; transform: none; }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	animation: doOverlayItemIn 0.3s ease-out both;
}

.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.04s; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.08s; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.12s; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.16s; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.20s; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.24s; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7) { animation-delay: 0.28s; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(8) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		transition: none;
	}
}

/* --- Mobile overlay: padding specificity ---------------------------------- */
/* Core sets padding: 0 on overlay items with
     .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item__content
   :where() contributes no specificity, so that rule lands at (0,3,0) - exactly
   the weight of the obvious override - and core's stylesheet is enqueued after
   the theme's, so it wins on source order. That is also why the padding: 10px 0
   rule further up has never actually applied. Beating it needs real weight.

   Submenu children are a separate contest: the desktop panel rule above is
   (0,6,0), so they need more still. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 16px 0;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 15px 0 15px 18px;
}

/* --- Mobile overlay: accordion affordance and collapsed spacing ----------- */
/* Core hides the chevron inside the overlay, which is reasonable when every
   submenu is expanded - there is nothing to signal. With the accordion it is
   the only thing telling you a row opens, so it has to come back. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	padding: 0 0 0 8px;
}

/* Core pads the overlay submenu with 24px 32px 0. max-height cannot collapse
   padding, so a closed section still reserved 24px and left a visible gap
   under every parent row. Zero it while closed, restore a little when open. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	padding: 0;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	padding: 2px 0 6px;
}

/* --- Mobile overlay: row width and inline chevron ------------------------- */
/* Rows were shrink-to-fit (48px for Shop, 99px for Templates), so the hairline
   rules came out ragged - each only as wide as its own label. Stretch them. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
}

/* Each row is a flex column, so the chevron span core provides stacks *below*
   the label rather than beside it, and it cannot be moved inline without
   restructuring the markup. Drawing the chevron on the button instead keeps it
   next to the text - and matches the hamburger, which this theme already
   draws in CSS rather than shipping an icon. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	justify-content: center;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin: -3px 0 0 10px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.3s ease;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	margin: 3px 0 0 10px;
	transform: rotate( 225deg );
}

/* The menu column measured 200px at desktop width, which would leave the rules
   short of the screen edges on a phone - the ragged look this section set out
   to fix. Pin the column to the overlay width so the result does not depend on
   how core happens to size the container at a given viewport. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
}

/* --- Touch: no lingering hover or focus colour ---------------------------- */
/* The menu switches berry -> teal on :hover and :focus. On a phone both stick
   after a tap: iOS holds :hover until you tap elsewhere, and :focus stays on
   the tapped element. The result is one item sitting teal while the rest stay
   berry, which reads as a colour bug rather than a state. Visible in the
   accordion screenshots too, where Read stayed teal after being opened.

   Confine hover to devices that actually hover, and the focus colour to
   keyboard focus. Written as neutralising rules rather than edits to the
   originals, so the desktop behaviour above is left exactly as it was. */
@media (hover: none) {
	.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > a.wp-block-navigation-item__content:hover,
	.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-submenu__toggle:hover,
	.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content:hover {
		color: #860743;
	}

	.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > .wp-block-navigation-item__content:hover {
		background-color: transparent !important;
	}
}

/* :focus lingers after a touch tap; :focus-visible does not. Keyboard users
   keep the teal indicator, thumbs do not. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > a.wp-block-navigation-item__content:focus:not(:focus-visible),
.do-nav-rules .wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-submenu__toggle:focus:not(:focus-visible),
.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content:focus:not(:focus-visible) {
	color: #860743;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__submenu-container li > .wp-block-navigation-item__content:focus:not(:focus-visible) {
	background-color: transparent !important;
}

/* --- Mobile menu: inline push-down ---------------------------------------- */
/* The menu opens in the document flow directly under the MENU button and
   pushes the page down, rather than covering it - the behaviour the old site
   had, which Annie chose over a full-screen overlay and a slide-in drawer.

   Core's overlay is position: fixed with a scroll lock on <html>, so each of
   those has to be undone deliberately. */

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	position: static;
	z-index: auto;
	overflow: visible;
	display: block;
	padding: 0;
	background-color: transparent !important;
	animation: doInlineIn 0.25s ease-out both;
}

@keyframes doInlineIn {
	from { opacity: 0; transform: translateY( -6px ); }
	to   { opacity: 1; transform: none; }
}

/* Core reserves room at the top for the floating close button, and shifts the
   dialog down by the admin bar height while the modal is open. Neither applies
   once the menu is part of the page. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}

/* Core locks scrolling on <html> for the modal. An inline menu makes the page
   taller, so the reader has to be able to scroll to what it pushed down. */
html.has-modal-open {
	overflow: visible;
}

/* The MENU button is not hidden by core - the fixed overlay simply covered it.
   Inline it would sit above the open menu alongside the close button, so hide
   it and let the close button take its place. */
.do-nav-rules .wp-block-navigation:has( .wp-block-navigation__responsive-container.is-menu-open ) .wp-block-navigation__responsive-container-open {
	display: none;
}

/* Dress the close button as the button it replaces, so the row still reads
   "hamburger MENU" and the whole thing behaves like one toggle. The label is
   text rather than an icon because the block is set to hasIcon: false, so the
   word can be swapped in CSS. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto;
	padding: 20px 15px;
	font-size: 0;
	color: #860743;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
	content: "";
	display: block;
	width: 22px;
	height: 16px;
	background-repeat: no-repeat;
	background-size: 22px 2.4px;
	background-position: 0 0, 0 6.8px, 0 13.6px;
	background-image:
		linear-gradient( #860743, #860743 ),
		linear-gradient( #860743, #860743 ),
		linear-gradient( #860743, #860743 );
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
	content: "MENU";
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.5px;
}

/* Left-aligned and compact, matching the live site. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: stretch;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	justify-content: flex-start;
	text-align: left;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	justify-content: space-between;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-left: 22px;
	justify-content: flex-start;
	text-align: left;
}

/* A rule between the MENU row and the first item, as the live site has. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	border-top: 1px solid rgba( 21, 75, 84, 0.18 );
}

@media (prefers-reduced-motion: reduce) {
	.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

/* --- Mobile menu: compact rows, labels centred between the rules ---------- */
/* Rows sat 24px apart from the theme's block gap. Because each divider is a
   border-top on the row itself, that gap fell *above* the line while the row's
   padding fell below it - so every label sat 16px under its own rule but 40px
   above the next one. That reads as text pinned to the top of its row, and it
   is also where most of the height went.

   Zeroing the gap fixes both at once: the padding above and below each label
   becomes symmetric, so it centres between the rules, and the pitch drops from
   72px to 45px. 15px of padding either side of a 15px line box keeps the rows
   at 45px, just above the 44px minimum worth leaving for a thumb - which is
   the floor on how much tighter this can sensibly go. */
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0;
}

.do-nav-rules .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 15px 0;
}

/* --- Quotes: berry --------------------------------------------------------- */
/* Annie asked for every quote - the Rumi one on the home page, About,
   Reflections - in berry rather than teal. The left rule is left teal: the
   site pairs the two colours throughout, and that rule is a structural accent
   rather than part of the text. Say the word and it goes berry too. */
.wp-block-quote p,
.do-quote p,
.wp-block-quote cite,
.do-quote cite {
	color: #860743;
}

/* --- Social icons: colour on hover --------------------------------------- */
/* The block writes its icon colour as an inline style on each link, so a
   hover rule on the link would lose to it without !important. The SVG carries
   no inline style - it only inherits via fill: currentColor - so setting fill
   directly wins cleanly.

   Header icons are teal and go berry; footer icons are berry and go teal, so
   each set moves to the colour it is not. Core's slight scale on hover is left
   alone - this is added alongside it, not instead of it.

   Behind (hover: hover) and :focus-visible for the same reason as the menu:
   on a phone a tap would otherwise leave one icon stuck in its hover colour. */
.wp-block-social-links .wp-block-social-link svg {
	transition: fill 0.15s ease;
}

@media (hover: hover) {
	.do-nav-stack .wp-block-social-links .wp-block-social-link:hover svg {
		fill: #860743;
	}

	.wp-block-social-links.do-footer-social .wp-block-social-link.wp-social-link:hover svg {
		fill: #154b54;
	}
}

.do-nav-stack .wp-block-social-links .wp-block-social-link a:focus-visible svg {
	fill: #860743;
}

.wp-block-social-links.do-footer-social .wp-block-social-link.wp-social-link a:focus-visible svg {
	fill: #154b54;
}

/* --- Social icons: more room above -------------------------------------- */
/* The icons went from 24px to 36px, so the gap that read as comfortable under
   a smaller row now reads as tight. Adds 10px at every breakpoint, keeping the
   existing step up on narrower screens where the menu sits closer above. */
.do-nav-stack > .wp-block-social-links {
	margin-top: 32px;
}

@media (max-width: 782px) {
	.do-nav-stack > .wp-block-social-links {
		margin-top: 38px;
	}
}

@media (max-width: 599.98px) {
	.do-nav-stack > .wp-block-social-links {
		margin-top: 42px;
	}
}

/* --- Quotes: berry rule -------------------------------------------------- */
/* The left rule now matches the text rather than sitting teal against it. */
.wp-block-quote,
.do-quote {
	border-left-color: #860743;
}

/* --- Social icons: equal optical size ------------------------------------ */
/* All four sit in the same 36px box, but their glyphs fill it very unevenly.
   Measured as a fraction of each icon's own viewBox:

     Facebook   0.833 wide x 0.829 tall
     Instagram  0.750 x 0.750
     TikTok     0.869 x 1.000   <- the only one touching its edges
     YouTube    0.833 x 0.588   <- landscape by design

   So TikTok read as oversized and Instagram as undersized, even though the
   boxes were identical. Each icon is scaled so its dominant dimension lands on
   0.80 of the box, which makes them match by measurement rather than by eye.

   YouTube keeps its landscape shape - normalising its height instead would
   have made it far wider than the rest. Its width matches, which is what the
   eye compares in a row.

   Applied to the SVG, so core's hover scale on the link still works. */
.wp-block-social-link.wp-social-link-facebook svg,
.wp-block-social-link.wp-social-link-youtube svg {
	transform: scale( 0.96 );
}

.wp-block-social-link.wp-social-link-instagram svg {
	transform: scale( 1.067 );
}

.wp-block-social-link.wp-social-link-tiktok svg {
	transform: scale( 0.8 );
}

.wp-block-social-link svg {
	transform-origin: center;
}

/* --- Content images: breathing room and mobile stacking ------------------- */
/* Two problems with images placed among page text.

   First, every figure in the post content computes to margin-bottom: 0 inside
   the constrained layout, so the paragraph that follows sits hard against the
   base of the picture.

   Second, alignleft / alignright float the image and let the text wrap. That
   reads well on a desktop, but the widest of these is 364px, which on a 412px
   phone leaves about 48px beside it - one word per line down the right-hand
   edge. Below 700px the float is dropped so the image takes the full column
   and the text runs underneath it; above that, wrapping is kept.

   700px is where the widest image still leaves roughly 260px of text, which is
   about the narrowest column that reads comfortably. Selectors carry the
   .entry-content prefix because core's .is-layout-constrained > .alignleft is
   (0,2,0) and its stylesheet loads after the theme's.

   The sizes come from width/height HTML attributes rather than inline styles,
   so plain CSS overrides them - but height must be reset to auto or the height
   attribute squashes the image once the width changes. */
.entry-content .wp-block-image,
.entry-content .wp-block-image.alignleft,
.entry-content .wp-block-image.alignright {
	margin-bottom: 30px;
}

@media (max-width: 700px) {
	.entry-content .wp-block-image.alignleft,
	.entry-content .wp-block-image.alignright {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.entry-content .wp-block-image.alignleft img,
	.entry-content .wp-block-image.alignright img {
		width: 100%;
		height: auto;
	}
}

/* --- Content images: per-image mobile wrapping --------------------------- */
/* The rule above stacks aligned images full width below 700px, which suits a
   landscape photo but not a tall one: the books picture on Reflection is
   789x1024, so filling the column would blow it up well past the size Annie
   chose deliberately.
 *
 * "Wrap on mobile" in the image's Styles panel keeps it floated at half the
 * column on a phone, so the text still runs alongside. Registered as a block
 * style in functions.php, so it is a click rather than a class to remember.
 *
 * This works because theme.json already rounds every image at 25px: the
 * Rounded block style these images carry computes to the same 25px with or
 * without it, so replacing it costs nothing visually. Block styles are
 * single-select, which is why that mattered.
 *
 * (0,4,0), so it beats the full-width rule above it at (0,3,0). */
@media (max-width: 700px) {
	.entry-content .wp-block-image.is-style-wrap.alignleft,
	.entry-content .wp-block-image.is-style-wrap.alignright {
		width: 50%;
		max-width: 50%;
		/* Match the 20px gap beside the image. The 30px set for stacked images
		   further up reads as a step down here, because the text wrapping past
		   the bottom of a float sits against this margin while the text beside
		   it sits against margin-right - so the two gaps have to agree. */
		margin-bottom: 20px;
	}

	/* The Image block writes its chosen size as an inline style on the img, and
	   an inline style outranks any selector. Without !important the picture kept
	   its desktop width inside a half-width float - the column resized, the
	   image did not. srcset carries this one up to 1973px, so scaling up loads a
	   larger file rather than stretching a small one. */

	.entry-content .wp-block-image.is-style-wrap.alignleft {
		float: left;
		margin-right: 20px;
	}

	.entry-content .wp-block-image.is-style-wrap.alignright {
		float: right;
		margin-left: 20px;
	}

	.entry-content .wp-block-image.is-style-wrap.alignleft img,
	.entry-content .wp-block-image.is-style-wrap.alignright img {
		width: 100% !important;
		height: auto !important;
	}
}

/* --- Headings and titles: berry ------------------------------------------ */
/* Headings and the page/post title in berry rather than teal - the Featured
   and Most Recent headings, headings inside page content, and the large title
   at the top of a page or post.
 *
 * Listing titles stay teal on purpose. They are links, and the templates set
 * their colour through elements.link, which lands on the <a> and so still wins
 * over the heading colour on the <h2>/<h3> around it. Restated below so the
 * intent is explicit rather than a side effect of where the colour happens to
 * be applied. */
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.wp-site-blocks h5,
.wp-site-blocks h6 {
	color: #860743;
}

.wp-site-blocks .wp-block-post-template .wp-block-post-title a,
.wp-site-blocks .wp-block-query .wp-block-post-title a {
	color: #154b54;
}