/* ==========================================================================
   EWC — block-theme chrome layer
   --------------------------------------------------------------------------
   assets/css/legacy.css is the compiled ewc-2021 bundle verbatim. Two things
   in it are scoped with the direct-child combinator `body > …`, which no
   longer matches because block themes wrap the whole template in
   `div.wp-site-blocks`:

     body > header        (SCSS/_header.scss, _navbar.scss, _navbar-items.scss)
     body > .wd-slider    (SCSS/_slider.scss:2-14)

   Everything below re-establishes that geometry on block markup, and maps the
   Bootstrap-4 navbar look onto core/navigation. Every value is carried from
   the ewc-2021 SCSS — see design-dna.md §3f, §4d and §4f.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page skeleton — SCSS/_content.scss:8-39
   `body { display:flex; flex-direction:row; flex-wrap:wrap }` in legacy.css now
   only sees one child (.wp-site-blocks), so the row moves down a level.
   -------------------------------------------------------------------------- */
.wp-site-blocks {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	align-content: flex-start;
}

.wp-site-blocks > header,
.wp-site-blocks > .ewc-hero,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	width: 100%;
}

/* core/group and core/template-part default to margin:0 already, but the
   heading/paragraph reset in legacy.css can leak block margins onto the
   template-part wrappers. */
.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-site-blocks > .ewc-hero {
	margin: 0;
}

/* --------------------------------------------------------------------------
   2. Header — SCSS/_header.scss:6-83  (was `body > header`)
   -------------------------------------------------------------------------- */
.ewc-header {
	padding: 8px 15px;
	padding-top: 0;
	display: flex;
	align-items: center;
	background: white;
	border-bottom: 1px solid black;
	color: black;
	z-index: 9999;
	flex-direction: row;
}

.ewc-header .logo-container {
	margin-top: 8px;
}

.ewc-header .logo {
	border: 1px solid #07090B;
}

/* legacy.css gives every content .wp-block-group a 36px bottom margin
   (the $gutter rhythm). Both header wrappers are groups now, so without
   this the logo band measures 130px instead of the classic 94px. */
.ewc-header .logo-container,
.ewc-header .logo,
.ewc-header .ewc-nav {
	margin-bottom: 0;
}

/* Same leak on the page skeleton: <main>, its .container section, the
   <article> and the footer wrappers are core/group blocks now. The classic
   markup carried no margins there (main 40vh min-height, footer 30px padding
   only) — measured 2026-09-02 on /home-tour/: main 360px, footer 223px. */
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > main > .wp-block-group,
.wp-site-blocks > main article.wp-block-group,
.ewc-footer .wp-block-group {
	margin-bottom: 0;
}

.ewc-header .logo .wp-block-site-logo,
.ewc-header .logo .wp-block-site-logo a {
	display: block;
	line-height: 0;
	margin: 0;
}

/* The classic markup had no width/height attributes on the logo <img>;
   core/site-logo emits them plus `.is-default-size img { width: 120px }`, so
   both the presentational-hint width and the core rule have to be beaten or
   the logo stretches. */
.ewc-header .logo .wp-block-site-logo img,
.ewc-header .logo .wp-block-site-logo.is-default-size img {
	height: 72px;
	width: auto;
	max-width: none;
	display: block;
}

@media (min-width: 768px) {
	.ewc-header {
		flex-direction: column;
	}

	.ewc-header .logo-container {
		z-index: 999;
		margin-top: 0;
	}

	.ewc-header .logo {
		text-align: center;
		z-index: 999;
	}

	.ewc-header .logo .wp-block-site-logo img,
	.ewc-header .logo .wp-block-site-logo.is-default-size img {
		height: 92px;
		width: auto;
		max-width: none;
	}

	.ewc-header .logo a {
		display: block;
		color: transparent;
	}
}

/* --------------------------------------------------------------------------
   3. Navigation — SCSS/_navbar.scss + _navbar-items.scss
   core/navigation replaces the Bootstrap collapse/dropdown markup produced by
   bs4navwalker: .nav-item → .wp-block-navigation-item,
   .nav-link/.dropdown-item → .wp-block-navigation-item__content,
   .dropdown-menu → .wp-block-navigation__submenu-container.
   -------------------------------------------------------------------------- */
.ewc-nav {
	padding-right: 0;
	padding-left: 0;
	margin: 0;
}

.ewc-nav .wp-block-navigation {
	background: transparent;
}

.ewc-nav .wp-block-navigation-item {
	white-space: nowrap;
	background: transparent;
}

.ewc-nav .wp-block-navigation-item__content {
	color: black;
	font: 1rem "Roboto", sans-serif;
	line-height: normal;
	text-transform: none;
	text-shadow: none;
	/* Bootstrap .nav-link vertical padding (measured 8px/0 on the classic
	   theme at 1440px) — gives the 35px nav row inside the 43px bar. */
	padding: 8px 0;
	text-decoration: none;
}

/* Source order matters: below 992px the .9rem rule wins, exactly as in
   the compiled bundle (CSS:12947 then CSS:12952). */
@media (max-width: 767.98px) {
	.ewc-nav .wp-block-navigation-item__content {
		font-size: 1rem;
	}
}

@media (max-width: 991.98px) {
	.ewc-nav .wp-block-navigation-item__content {
		font-size: 0.9rem;
	}
}

.ewc-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ewc-nav .wp-block-navigation-item:active > .wp-block-navigation-item__content,
.ewc-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ewc-nav .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content,
.ewc-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	cursor: pointer;
	color: #b9834e;
	text-shadow: none;
	text-decoration: underline;
	border-radius: 4px;
}

/* Submenu caret — the classic theme hid the walker's .fa and used Bootstrap's
   ::after caret nudged by 0.155em/0.3em. */
.ewc-nav .wp-block-navigation__submenu-icon {
	vertical-align: 0.155em;
	margin-left: 0.3em;
	padding: 0;
}

/* Dropdown panel — SCSS/_navbar-items.scss:69-84 */
.ewc-nav .wp-block-navigation__submenu-container {
	background-color: white;
	border: 1px solid rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	padding: 0;
	margin-top: 0;
	min-width: max-content;
}

.ewc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 16px 12px;
	text-align: left;
	border-radius: 0;
	color: black;
	font: 1rem "Roboto", sans-serif;
}

.ewc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ewc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: white;
	background-color: #b9834e;
	text-decoration: none;
}

/* Mobile toggler — SCSS/_navbar.scss:38-52 */
.ewc-nav .wp-block-navigation__responsive-container-open {
	margin-right: 0;
	margin-left: auto;
	margin-top: 8px;
	background-color: #07090B;
	z-index: 999;
	border: 0;
	padding: 2px 4px;
	color: white;
}

.ewc-nav .wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
	fill: white;
}

/* Mobile overlay panel — white ground with left-aligned 12px rows, matching
   the classic .navbar-collapse panel (SCSS/_navbar-items.scss:98-138).
   The block overlay is a full-screen dialog rather than an absolutely
   positioned panel at top:88px; that is the one deliberate behavioural swap. */
.ewc-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: white;
	color: black;
	padding: 24px;
}

.ewc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: left;
	padding: 12px 12px;
	text-shadow: none;
	color: black;
	font-size: 1rem;
}

.ewc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: gainsboro;
	border: 1px solid darkgray;
	box-shadow: none;
}

.ewc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 24px;
}

.ewc-nav .wp-block-navigation__responsive-container-close {
	color: black;
}

/* core/navigation flips to the inline menu at 600px; the classic theme flips
   at 768px. Restore the overlay for the 600-767.98px band. */
@media (min-width: 600px) and (max-width: 767.98px) {
	.ewc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.ewc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: block;
	}

	.ewc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Desktop bar — SCSS/_navbar.scss:76-96. The nav row is pulled up over the
   centred logo and item 3/4 carry a hard 125px gap so the logo can sit
   between "Communities" and "Our Expertise". */
@media (min-width: 768px) {
	.ewc-nav {
		padding-left: 0;
		padding-right: 0;
		margin-top: -76px;
		padding-bottom: 8px;
		width: 100%;
		background: transparent;
	}

	.ewc-nav .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) {
		width: 100%;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.ewc-nav .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item:nth-child(3) {
		margin-right: 125px;
	}

	.ewc-nav .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item:nth-child(4) {
		margin-left: 125px;
	}
}

/* --------------------------------------------------------------------------
   4. Hero — SCSS/_slider.scss:2-14  (was `body > .wd-slider`)
   Scoped to the hero wrapper so an in-content [wd_slider] / [wd_slider_tag]
   keeps the plugin's own 50vh baseline, exactly as today.
   -------------------------------------------------------------------------- */
.ewc-hero {
	width: 100%;
	background-color: white;
}

.ewc-hero .wd-slider {
	width: 100%;
	padding-bottom: 36px;
	background-color: white;
}

.ewc-hero .wd-slider .wd-slide {
	background-color: black;
}

.ewc-hero .wd-slider .wd-slider-image {
	height: 60vh;
}

/* --------------------------------------------------------------------------
   5. Content wrappers
   `main`, `body main > section` and `.container` all still match; only the
   block-added wrappers need neutralising.
   -------------------------------------------------------------------------- */
.wp-site-blocks > main > .container,
.wp-site-blocks > main > section.container {
	margin-bottom: 0;
}

.wp-site-blocks > main article.wp-block-group,
.wp-site-blocks > main .wp-block-post-content.wrapper {
	margin: 0;
}

/* --------------------------------------------------------------------------
   6. Footer — SCSS/_footer.scss:59-162
   The `footer …` selectors in legacy.css are all descendant combinators and
   still match. Only the two images need help, because core/image wraps them
   in a <figure> where the classic markup had a bare <img>.
   -------------------------------------------------------------------------- */
.ewc-footer figure {
	margin: 0;
}

.ewc-footer .footer-logo img {
	max-height: 75px;
	max-width: 90%;
	width: auto;
	height: auto;
	margin: 0 auto 15px auto;
	display: block;
}

.ewc-footer .eho-logo img {
	width: 48px;
	height: 48px;
	display: block;
}

@media (max-width: 767.98px) {
	.ewc-footer .eho-logo img {
		margin-left: auto;
		margin-right: auto;
	}
}

.ewc-footer .footer-navigation-wrapper ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. Skip link
   Core inserts its own skip link before .wp-site-blocks; the classic theme
   used a Bootstrap .sr-only anchor. Keep it out of the body flex row.
   -------------------------------------------------------------------------- */
.skip-link.screen-reader-text {
	position: absolute !important;
}

/* --------------------------------------------------------------------------
   Arrow buttons — GBSCSS/_buttons.scss:69 (legacy.css keeps the rule:
   `.is-style-arrow .wp-block-button__link:after { padding-left:8px; content:"\f061" }`)
   The classic theme relied on wd-theme.js adding `.fa` to the link so the
   pseudo-element inherited Font Awesome (getwid ships FA 5.5 site-wide).
   Core's global button styles now force `font-family: inherit` on
   .wp-block-button__link, which beats `.fa`, so the glyph rendered in
   Montserrat and was invisible. Give the arrow its font directly.
   -------------------------------------------------------------------------- */
.wp-block-buttons .is-style-arrow .wp-block-button__link::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}