/*
Theme Name: Manly Haematology
Theme URI: https://www.manlyhaematology.com.au/
Author: Switch Connect
Author URI: https://www.switchconnect.com.au/
Description: Custom block theme for Manly Haematology. Rebuilds the look of the original site (banner photos with overlaid text, teal squiggle dividers, background-photo sections, scrolling professional-association logos) using only core WordPress blocks, so every page can be edited in the normal WordPress editor. Includes a one-click content setup under Appearance → Manly Haematology Setup.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: manly-haematology
*/

:root {
	--mh-teal: #1b92b6;
	--mh-teal-dark: #11718f;
	--mh-teal-deep: #0b4f66;
	--mh-teal-light: #eef8fb;
	--mh-crimson: #c70146;
	--mh-pink: #f9e3ea;
	--mh-line: #dde7ec;
	--mh-radius: 4px;
	--mh-shadow: 0 10px 30px rgba(11, 79, 102, .14);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { height: auto; }
/* Focus ring (WCAG 2.4.7): crimson ring with a white halo, so it shows on white, teal and photos alike.
   Over photos and dark strips the colours swap. Applied site-wide, including the mobile menu overlay. */
:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--mh-crimson) !important; outline-offset: 2px; box-shadow: 0 0 0 7px #fff;
}
.mh-banner :focus-visible, .mh-slideshow :focus-visible, .mh-notice :focus-visible {
	outline-color: #fff !important; box-shadow: 0 0 0 7px var(--mh-teal-deep);
}
.mh-faq summary:focus-visible { outline-offset: 4px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.mh-main > .wp-block-post-content > * + * { margin-block-start: 0; }

.skip-link.screen-reader-text:focus { background: var(--mh-crimson); color: #fff; }

/* ---------- Header ---------- */
.mh-header-logo .wp-block-site-logo img { width: min(250px, 62vw); }
.mh-menubar .wp-block-navigation-item__content { padding: .45em .7em; color: var(--wp--preset--color--ink); text-decoration: none; }
.mh-menubar .wp-block-navigation-item__content:hover { color: var(--mh-crimson); }
.mh-menubar .current-menu-item > .wp-block-navigation-item__content,
.mh-menubar [aria-current="page"] { color: var(--mh-teal-dark); box-shadow: inset 0 -2px 0 var(--mh-teal); }
.mh-menubar .mh-nav-phone > .wp-block-navigation-item__content { color: var(--mh-teal-dark); font-weight: 600; }
@media (max-width: 599px) {
	.mh-menubar .wp-block-navigation__responsive-container-open:not(.always-shown) { margin-inline: auto; display: flex; align-items: center; gap: .4em; color: var(--mh-teal-deep); }
	.mh-menubar .wp-block-navigation__responsive-container-open::after { content: "Menu"; font-family: var(--wp--preset--font-family--heading); }
}
.wp-block-navigation__responsive-container.is-menu-open { padding: 2rem 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.2rem; padding: .5em 0; }

/* ---------- Banners (Cover block) ---------- */
.mh-banner { color: #fff; }
.mh-banner .wp-block-cover__inner-container { width: min(1180px, 100%); margin-inline: auto; }
.mh-banner.wp-block-cover { padding-block: 2.5rem; }
.mh-banner .mh-banner-text,
.mh-banner p { font-family: var(--wp--preset--font-family--heading); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); line-height: 1.25; max-width: 30ch; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); margin: 0; }
.mh-banner .wp-block-buttons { margin-top: 1.5rem; }
.mh-banner .wp-block-button__link { background: var(--mh-teal-dark); }
.mh-banner a:not(.wp-element-button) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.mh-banner a:not(.wp-element-button):hover { text-decoration-thickness: 2px; }

/* Scrim behind banner text (legibility wherever the text falls on the photo). Not on the plain
   teal banners or the ferry location banner, whose text is dark on a light panel. */
.mh-banner:not(.mh-banner--plain):not(.mh-location) > .wp-block-cover__background {
	background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .12) 100%) !important;
	opacity: 1 !important;
}

/* The overlay always spans the whole photo. A cover saved with a constrained layout would otherwise cap the
   overlay span at the 820px content width, showing a dark band with hard edges (Remaining Items v1.4, item 8). */
.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .wp-block-cover__image-background { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Centred banner text (content position set to "bottom center" or "center" in the editor) */
.mh-banner.is-position-bottom-center .wp-block-cover__inner-container,
.mh-banner.is-position-center-center .wp-block-cover__inner-container { text-align: center; }
.mh-banner.is-position-bottom-center p,
.mh-banner.is-position-center-center p { margin-inline: auto; }
.mh-banner.is-position-bottom-center .wp-block-buttons,
.mh-banner.is-position-center-center .wp-block-buttons { justify-content: center; }
.mh-banner .wp-block-button__link:hover { background: var(--mh-teal-deep); }
.mh-banner--plain { background: linear-gradient(120deg, var(--mh-teal-dark), var(--mh-teal) 65%, #39abcb); }

/* Home slideshow — two Cover blocks stacked and crossfaded by assets/js/site.js */
.mh-slideshow { display: grid; overflow: hidden; }
.mh-slideshow > .wp-block-cover { grid-area: 1 / 1; margin: 0 !important; transition: opacity 1.6s ease, visibility 1.6s; }
.mh-slideshow.is-ready > .wp-block-cover:not(.is-active) { opacity: 0; visibility: hidden; }
.mh-slideshow-dots { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; }
.mh-slideshow > .wp-block-cover { padding-bottom: 4.25rem !important; }
.mh-slideshow > .wp-block-cover.has-custom-content-position { justify-content: center; }
.mh-slideshow > .wp-block-cover .wp-block-cover__inner-container { text-align: center; }
.mh-slideshow > .wp-block-cover p { margin-inline: auto; }
.mh-slideshow > .wp-block-cover .wp-block-buttons { justify-content: center !important; }
.mh-slideshow { position: relative; }
/* Each dot has a 24 x 24px target (WCAG 2.5.8); the visible dot stays 12px */
.mh-slideshow-dots .mh-dot { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.mh-slideshow-dots .mh-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 0 4px rgba(0,0,0,.4); }
.mh-slideshow-dots .mh-dot[aria-current="true"]::before { background: #fff; }
.mh-slideshow-toggle { margin-left: .6rem; min-height: 28px; padding: .25em .8em; border: 1.5px solid #fff; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font: inherit; font-size: .8rem; cursor: pointer; }
.mh-slideshow-toggle:hover { background: rgba(0,0,0,.7); }
.editor-styles-wrapper .mh-slideshow { display: block; }

/* ---------- Section headings: teal squiggle divider ---------- */
.is-style-mh-divider { text-align: center; color: var(--mh-teal); }
.is-style-mh-divider::after {
	content: ""; display: block; width: 96px; height: 18px; margin: .55rem auto 0;
	background-color: var(--mh-teal);
	-webkit-mask: url("assets/images/brand/divider.svg") center / contain no-repeat;
	mask: url("assets/images/brand/divider.svg") center / contain no-repeat;
}
.is-style-mh-divider.has-text-align-left::after { margin-left: 0; }

/* ---------- Sections ---------- */
.mh-section { padding-block: var(--wp--preset--spacing--60); }
.mh-intro { text-align: center; }
.mh-intro p { max-width: 760px; margin-inline: auto; }

/* Full-bleed background-photo section (Cover block) with white panels */
.mh-photo-section .wp-block-cover__inner-container { width: min(860px, 100%); margin-inline: auto; }
.mh-photo-section.is-wide .wp-block-cover__inner-container { width: min(1000px, 100%); }
.is-style-mh-panel {
	background: rgba(255, 255, 255, .93);
	color: var(--wp--preset--color--ink);
	padding: clamp(1.5rem, 3vw, 2.5rem) !important;
	box-shadow: var(--mh-shadow);
	border-radius: var(--mh-radius);
}
.is-style-mh-panel + .is-style-mh-panel { margin-top: 2rem !important; }
.is-style-mh-panel a:not(.wp-element-button) { color: var(--mh-teal-dark); }
.mh-photo-section { color: var(--wp--preset--color--ink); }
@media (max-width: 900px), (hover: none) { .mh-photo-section.has-parallax { background-attachment: scroll !important; } }

/* Links inside running text are underlined (WCAG 1.4.1); menus, footer quick links and buttons are not */
main :where(p, li, td, dd, figcaption) a:not(.wp-element-button),
.mh-footer p.mh-footer-phone a, .mh-footer p.mh-footer-email a {
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
main :where(p, li, td, dd, figcaption) a:not(.wp-element-button):is(:hover, :focus-visible),
.mh-footer p.mh-footer-phone a:is(:hover, :focus-visible), .mh-footer p.mh-footer-email a:is(:hover, :focus-visible) {
	text-decoration-thickness: 2px; color: var(--mh-teal-deep);
}
.mh-more-link a { font-weight: 600; }

/* ---------- FAQ (Details blocks) ---------- */
.mh-faq .wp-block-details { border-bottom: 1px solid var(--mh-line); margin: 0 !important; }
.mh-faq .wp-block-details:first-of-type { border-top: 1px solid var(--mh-line); }
.mh-faq .wp-block-details summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 1rem 2.75rem 1rem 0; font-family: var(--wp--preset--font-family--heading);
	font-size: 1.08rem; color: var(--mh-teal-deep);
}
.mh-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.mh-faq .wp-block-details summary .mh-faq-q { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.mh-faq .wp-block-details h3 { font-size: 1.05rem; font-weight: 600; color: var(--wp--preset--color--ink); margin-top: 1.2rem; margin-bottom: .4rem; }
.mh-faq .wp-block-details summary::after {
	content: ""; position: absolute; right: .35rem; top: 50%; width: 22px; height: 22px; margin-top: -11px;
	border-radius: 50%; border: 1.5px solid var(--mh-teal);
	background: linear-gradient(var(--mh-teal), var(--mh-teal)) center / 10px 1.5px no-repeat,
		linear-gradient(var(--mh-teal), var(--mh-teal)) center / 1.5px 10px no-repeat;
}
.mh-faq .wp-block-details[open] summary { color: var(--mh-crimson); }
.mh-faq .wp-block-details[open] summary::after {
	border-color: var(--mh-crimson);
	background: linear-gradient(var(--mh-crimson), var(--mh-crimson)) center / 10px 1.5px no-repeat;
}
.mh-faq .wp-block-details summary:hover { color: var(--mh-crimson); }
.mh-faq .wp-block-details > :not(summary) { margin-top: 0; margin-bottom: 1rem; }
.mh-faq .wp-block-details > :last-child { margin-bottom: 1.4rem; }

/* ---------- Professional associations logo strip (Gallery block) ---------- */
.mh-logo-strip-wrap { position: relative; display: flex; align-items: center; gap: .5rem; }
.mh-logo-strip.wp-block-gallery {
	display: flex !important; flex-wrap: nowrap !important; gap: clamp(2rem, 4vw, 3.5rem) !important;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
	align-items: center; padding: .75rem .25rem; flex: 1;
}
.mh-logo-strip.wp-block-gallery::-webkit-scrollbar { display: none; }
.mh-logo-strip.wp-block-gallery > .wp-block-image {
	flex: 0 0 auto !important; width: auto !important; margin: 0 !important; scroll-snap-align: start;
	display: flex; align-items: center; justify-content: center; height: 96px;
}
.mh-logo-strip.wp-block-gallery > .wp-block-image img { height: auto !important; max-height: 60px; width: auto !important; max-width: 190px; object-fit: contain !important; }
.mh-logo-strip.wp-block-gallery > .wp-block-image a { display: block; }
/* Optical balance: the square ASH emblem and the compact My Health Record mark get taller boxes than the
   wordmarks, so they carry similar visual weight. Matched on the link, which survives image replacement. */
.mh-logo-strip.wp-block-gallery > .wp-block-image:has(a[href*="hematology.org"]) img { max-height: 88px; transform: scale(1.28); } /* the file has ~12% clear margin on each side */
.mh-logo-strip.wp-block-gallery > .wp-block-image:has(a[href*="myhealthrecord.gov.au"]) img { max-height: 74px; }
.mh-logo-btn {
	flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mh-line); background: #fff;
	color: var(--mh-teal-deep); cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
}
.mh-logo-btn:hover { color: var(--mh-crimson); border-color: var(--mh-crimson); }
.mh-logo-pause { display: block; margin: .5rem auto 0; background: none; border: 0; font: inherit; font-size: .85rem; color: var(--wp--preset--color--ink-soft); text-decoration: underline; cursor: pointer; }
.editor-styles-wrapper .mh-logo-strip.wp-block-gallery { flex-wrap: wrap !important; overflow: visible; }

/* ---------- Location banner + map ---------- */
.mh-location .mh-location-text { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.25rem, .7rem + 1.35vw, 2rem); line-height: 1.45; color: #1d2a33; text-shadow: none; max-width: none; }
.mh-location .mh-location-sub { font-family: var(--wp--preset--font-family--body); font-size: 1.2rem; color: #1d2a33; margin-top: .75rem; }
.mh-map { position: relative; width: 100%; max-width: 1180px; margin-inline: auto; aspect-ratio: 16 / 7; min-height: 320px; background: var(--mh-teal-light); overflow: hidden; }
.mh-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mh-map-placeholder {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 1.5rem;
	background:
		repeating-linear-gradient(35deg, rgba(11,79,102,.05) 0 2px, transparent 2px 46px),
		repeating-linear-gradient(-55deg, rgba(11,79,102,.05) 0 2px, transparent 2px 46px),
		var(--mh-teal-light);
}
.mh-map-placeholder svg { width: 44px; height: 44px; color: var(--mh-crimson); }
.mh-map-placeholder strong { font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; color: var(--mh-teal-deep); font-weight: 500; }
.mh-map-placeholder button { font: inherit; font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; background: var(--mh-teal-dark); color: #fff; border: 0; padding: .8em 1.5em; cursor: pointer; }
.mh-map-placeholder button:hover { background: var(--mh-teal-deep); }
.mh-map-placeholder small { color: var(--wp--preset--color--ink-soft); max-width: 46ch; }

/* ---------- About page ---------- */
.mh-bio-photo img { box-shadow: var(--mh-shadow); }
.mh-publications p { margin-bottom: 1rem; padding-left: 1rem; border-left: 3px solid var(--mh-teal); }

/* ---------- Contact page ---------- */
.mh-contact-list { list-style: none; padding-left: 0 !important; }
.mh-contact-list li { position: relative; padding-left: 2.2rem; margin-bottom: .7rem; }
.mh-contact-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.3rem; height: 1.3rem; background-color: var(--mh-teal); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.mh-contact-list li:nth-child(1) { --icon: url("assets/images/brand/icon-pin.svg"); }
.mh-contact-list li:nth-child(2) { --icon: url("assets/images/brand/icon-phone.svg"); }
.mh-contact-list li:nth-child(3) { --icon: url("assets/images/brand/icon-clock.svg"); }

/* Contact Form 7 */
.wpcf7 form { display: grid; gap: .9rem; }
.wpcf7 form p { margin: 0; }
.wpcf7 label { display: block; font-weight: 600; font-size: .95rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
	width: 100%; font: inherit; font-weight: 400; padding: .75em .9em; margin-top: .3rem; border: 1px solid #b9c8cf; border-radius: 2px; background: #fff; color: var(--wp--preset--color--ink);
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 2px solid var(--mh-teal-dark) !important; outline-offset: 1px; border-color: var(--mh-teal-dark); box-shadow: none; }
.mh-form-email { font-size: .95rem; margin-top: 1rem; }
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 .wpcf7-quiz { width: 6rem !important; display: inline-block; }
.wpcf7 .wpcf7-quiz-label { font-weight: 600; margin-right: .4rem; }
.wpcf7 .mh-form-notice { font-size: .95rem; background: var(--mh-pink); border-left: 4px solid var(--mh-crimson); padding: .9rem 1rem; }
.wpcf7 input[type="submit"] {
	font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem;
	background: var(--mh-teal-dark); color: #fff; border: 0; padding: .85em 2.2em; cursor: pointer; justify-self: start;
}
.wpcf7 input[type="submit"]:hover { background: var(--mh-teal-deep); }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 .75rem; }

/* ---------- Legal pages ---------- */
.mh-legal h2 { font-size: 1.35rem; margin-top: 2.2rem; color: var(--mh-teal-dark); }
.mh-legal .mh-legal-meta { color: var(--wp--preset--color--ink-soft); font-size: .95rem; }

/* ---------- Footer ---------- */
.mh-footer { font-size: .98rem; }
.mh-footer-title { font-size: .95rem !important; text-transform: uppercase; letter-spacing: .08em; color: var(--mh-teal-dark) !important; margin-bottom: .6rem !important; }
/* Dark teal on the footer button even if the footer was saved in the Site Editor with brand teal (WCAG 1.4.3) */
.mh-footer .wp-block-button__link.has-teal-background-color { background-color: var(--mh-teal-dark) !important; }
.mh-footer .wp-block-button__link:hover { background-color: var(--mh-teal-deep) !important; }
.mh-footer-title + * { margin-top: 0 !important; }
.mh-plain-list { list-style: none; padding-left: 0 !important; margin-top: 0; }
.mh-plain-list li { margin-bottom: .3rem; }
.mh-footer a:not(.wp-element-button) { color: var(--wp--preset--color--ink); text-decoration: none; }
.mh-footer a:not(.wp-element-button):hover { color: var(--mh-crimson); text-decoration: underline; }
.mh-footer-phone { margin-top: 1rem !important; margin-bottom: .2rem !important; font-weight: 600; }
.mh-footer-email { margin-top: 0 !important; overflow-wrap: anywhere; }
.mh-btn-small .wp-block-button__link { font-size: .85rem; padding: .6em 1.2em; }
.mh-footer-bar a { color: var(--wp--preset--color--ink); }
.mh-footer-bar a:hover { color: var(--mh-crimson); }

/* ---------- First-visit notice ---------- */
.mh-notice {
	position: fixed; z-index: 9999; left: 0; right: 0; bottom: 0;
	background: var(--mh-teal-deep); color: #fff; box-shadow: 0 -6px 20px rgba(0,0,0,.18);
	font-size: var(--wp--preset--font-size--medium);
}
.mh-notice[hidden] { display: none; }
.mh-notice-inner { max-width: 1180px; margin: 0 auto; padding: .9rem 1.25rem; display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mh-notice p { margin: 0; flex: 1 1 420px; }
.mh-notice a { color: #fff; text-decoration: underline; font-weight: 600; }
.mh-notice a:hover { color: var(--mh-pink); }
.mh-notice button { font: inherit; font-family: var(--wp--preset--font-family--heading); font-weight: 600; background: #fff; color: var(--mh-teal-deep); border: 0; padding: .6em 2em; cursor: pointer; }
.mh-notice button:hover, .mh-notice button:focus-visible { background: var(--mh-pink); }
.mh-notice button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body.has-mh-notice { padding-bottom: var(--mh-notice-h, 0px); }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.mh-footer-cols { text-align: center; }
	.mh-footer-cols .wp-block-site-logo, .mh-footer-cols .wp-block-buttons, .mh-footer-cols .mh-social { justify-content: center; display: flex; }
	.mh-banner:not(.is-position-bottom-center):not(.is-position-center-center) .wp-block-buttons { justify-content: flex-start; }
	.mh-slideshow-toggle { margin-left: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mh-slideshow > .wp-block-cover { transition: none; }
	.mh-logo-strip.wp-block-gallery { scroll-behavior: auto; }
}

@media print {
	.mh-menubar, .mh-notice, .mh-map, .mh-logo-btn, .mh-logo-pause, .mh-slideshow-dots { display: none !important; }
	.mh-faq .wp-block-details > * { display: block !important; }
}

/* Location banner: text sits over the water, right of the ferry */
.mh-location .wp-block-columns { align-items: center; }
@media (max-width: 781px) {
	.mh-location .wp-block-column:first-child { display: none; }
	.mh-location .wp-block-cover__inner-container { background: rgba(255,255,255,.85); padding: 1.25rem; }
}

/* Keep banner text aligned with the page content (core sets margin:0 on positioned covers) */
.wp-block-cover.mh-banner.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { margin-inline: auto; width: min(1180px, 100%); }
.wp-block-cover.mh-location .wp-block-cover__inner-container { width: 100% !important; max-width: none; }
.wp-block-cover.mh-location .wp-block-cover__inner-container > .wp-block-columns { max-width: none; }
.wp-block-cover.mh-location .wp-block-column:first-child { flex-basis: 62% !important; }
.wp-block-cover.mh-location .mh-location-text { font-size: clamp(1.15rem, 1.75vw, 2.3rem); }
.wp-block-cover.mh-location .mh-location-sub { font-size: clamp(1rem, 1.1vw, 1.35rem); }