/*
Theme Name: Elderwise
Theme URI: https://elderwiseinc.com
Author: BusySeed
Author URI: https://busyseed.com
Description: Elderwise Inc. block theme. Child of Twenty Twenty-Five. Design system and site chrome translated from the approved Elderwise seedsite. Everything is editable from Appearance > Editor.
Template: twentytwentyfive
Version: 1.0.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elderwise
*/

/* ---------------------------------------------------------------
   Elderwise brand interaction styles.
   Tokens (colour, type, spacing) live in theme.json so the client
   can edit them in Appearance > Editor > Styles. Only things the
   block editor cannot express (hover, sticky chrome, marquee) are
   written here.
   --------------------------------------------------------------- */

:root {
  --ew-navy: #354A65;
  --ew-navy-dark: #2A3A50;
  --ew-sage: #8AADA1;
  --ew-sage-tint: #EEF3F0;
  --ew-body: #5B636C;
}

/* --- Keyboard focus --------------------------------------------- */
/* A visible ring for people navigating by keyboard. Mouse and touch
   users never see it. */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ew-sage);
  outline-offset: 3px;
}

/* The parent theme outlines every focused element, so a mouse click on an
   accordion, link or button left a dark box that stayed until you clicked
   somewhere else. Only keyboard focus shows a ring. */
.wp-site-blocks :focus:not(:focus-visible) {
  outline: none;
}

/* On an accordion the keyboard ring sits just inside the box edge, well
   clear of the heading text and the open content. */
.ew-acc.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--ew-sage);
  outline-offset: -2px;
}

/* --- Site header ------------------------------------------------ */

/* WordPress puts the sticky rule on the header group itself, but that
   group sits inside a template-part wrapper no taller than the header,
   so there is nothing for it to stick within and it scrolls away. Move
   the stickiness up to the wrapper, which is a direct child of the page
   and therefore full height. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
  z-index: 100;
}

/* The header, main and footer are the three children of the page, and
   each brings its own padding. WordPress's default gap between them
   just shows as a pale band under the header, lit by its shadow. */
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* The same default gap sits between stacked full-width sections inside a
   page, and shows as a white strip between two coloured bands. Each
   section carries its own top and bottom padding, so the bands touch. */
.wp-block-post-content > .alignfull + .alignfull,
main > .alignfull + .alignfull,
.wp-block-post-content > .alignfull + .wp-block-template-part,
.wp-block-post-content > .wp-block-template-part + .alignfull {
  margin-block-start: 0 !important;
}

/* A shared full-width section placed in a page as a template part (for
   example Explore Our Other Services) spans the screen like the rest. */
.wp-block-post-content > .wp-block-template-part:has(> .alignfull) {
  max-width: none !important;
  margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
  margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
}

.ew-header {
  box-shadow: 0 1px 0 rgba(53, 74, 101, 0.10), 0 6px 24px rgba(53, 74, 101, 0.06);
}

.ew-header .wp-block-site-logo img {
  height: 84px;
  width: auto;
}

/* Primary navigation: Oswald, uppercase, sage underline on hover
   and on the current page. */
.ew-nav .wp-block-navigation-item__content {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ew-navy);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.ew-nav .wp-block-navigation-item__content:hover,
.ew-nav .wp-block-navigation-item__content:focus-visible {
  border-bottom-color: var(--ew-sage);
}

.ew-nav .current-menu-item > .wp-block-navigation-item__content,
.ew-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.ew-nav .current_page_item > .wp-block-navigation-item__content {
  border-bottom-color: var(--ew-sage);
}

/* Core navigation styles set link colour to inherit (grey body text)
   and dropdowns to black. Hold every level at navy like the seedsite. */
.ew-nav.wp-block-navigation,
.ew-nav.wp-block-navigation .wp-block-navigation-item__content,
.ew-nav.wp-block-navigation .wp-block-navigation__submenu-container,
.ew-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.ew-nav.wp-block-navigation .wp-block-navigation__submenu-icon,
.ew-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  color: var(--ew-navy);
}

.ew-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ew-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  color: var(--ew-sage);
}

/* The seedsite's dropdown arrow is a small solid triangle. */
.ew-nav .wp-block-navigation__submenu-icon {
  width: auto;
  height: auto;
  margin-left: 7px;
}

.ew-nav .wp-block-navigation__submenu-icon svg {
  display: none;
}

.ew-nav .wp-block-navigation__submenu-icon::after {
  content: "\25BC";
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.ew-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon::after,
.ew-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-icon::after {
  transform: rotate(180deg);
}

/* Dropdown submenus mirror the seedsite: white card, sage top rule,
   sage-tint hover. */
.ew-nav .wp-block-navigation__submenu-container {
  background: #ffffff;
  border: 0;
  border-top: 3px solid var(--ew-sage);
  box-shadow: 0 16px 36px rgba(53, 74, 101, 0.18);
  padding: 6px 0;
  min-width: 320px;
}

.ew-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 18px;
  padding: 12px 24px;
  border-bottom: 0;
  width: 100%;
}

.ew-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ew-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: var(--ew-sage-tint);
  color: var(--ew-sage);
}

/* --- Buttons ---------------------------------------------------- */

.wp-block-button.is-style-ew-primary .wp-block-button__link {
  background: var(--ew-navy);
  color: #ffffff;
  border-radius: 0;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 26px;
  white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.wp-block-button.is-style-ew-primary .wp-block-button__link:hover,
.wp-block-button.is-style-ew-primary .wp-block-button__link:focus-visible {
  background: var(--ew-navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20, 32, 50, 0.22);
}

.wp-block-button.is-style-ew-secondary .wp-block-button__link {
  background: transparent;
  color: var(--ew-navy);
  border: 2px solid var(--ew-sage);
  border-radius: 0;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 24px;
  transition: background 0.16s ease, color 0.16s ease;
}

.wp-block-button.is-style-ew-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-ew-secondary .wp-block-button__link:focus-visible {
  background: var(--ew-sage);
  color: #ffffff;
}

/* On a dark hero the outline button switches to white so it stays legible. */
.wp-block-cover .wp-block-button.is-style-ew-secondary .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-ew-secondary .wp-block-button__link {
  color: #ffffff;
  border-color: #ffffff;
}

.wp-block-cover .wp-block-button.is-style-ew-secondary .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-ew-secondary .wp-block-button__link:focus-visible,
.has-navy-background-color .wp-block-button.is-style-ew-secondary .wp-block-button__link:hover,
.has-navy-background-color .wp-block-button.is-style-ew-secondary .wp-block-button__link:focus-visible {
  background: var(--ew-sage);
  border-color: var(--ew-sage);
  color: #ffffff;
}

/* On a navy band or a dark cover, the navy primary button disappears into
   the background. It flips to a white fill with navy text, so it still
   reads as the main action next to the outline button. */
.wp-block-cover .wp-block-button.is-style-ew-primary .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-ew-primary .wp-block-button__link,
.has-navy-dark-background-color .wp-block-button.is-style-ew-primary .wp-block-button__link {
  background: #ffffff;
  color: var(--ew-navy);
}

.wp-block-cover .wp-block-button.is-style-ew-primary .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-ew-primary .wp-block-button__link:focus-visible,
.has-navy-background-color .wp-block-button.is-style-ew-primary .wp-block-button__link:hover,
.has-navy-background-color .wp-block-button.is-style-ew-primary .wp-block-button__link:focus-visible,
.has-navy-dark-background-color .wp-block-button.is-style-ew-primary .wp-block-button__link:hover,
.has-navy-dark-background-color .wp-block-button.is-style-ew-primary .wp-block-button__link:focus-visible {
  background: var(--ew-sage-tint);
  color: var(--ew-navy-dark);
}

/* --- Section heading rule --------------------------------------- */
/* The short sage bar that sits under a centred section heading. */

.wp-block-separator.is-style-ew-rule {
  width: 64px;
  height: 3px;
  border: 0;
  background: var(--ew-sage);
  opacity: 1;
  margin-block: 16px;
}

.wp-block-separator.is-style-ew-rule {
  margin-inline: auto;
}

/* Spacing follows the design: the rule sits 18px under its heading and
   the text starts 24px under the rule (44px when a card grid follows).
   Held with !important so every section matches, whatever spacing was
   set on the individual blocks. */
.wp-block-separator.is-style-ew-rule {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

.wp-block-separator.is-style-ew-rule + * {
  margin-top: 24px !important;
}

.wp-block-separator.is-style-ew-rule + .wp-block-columns,
.wp-block-separator.is-style-ew-rule + .wp-block-group,
.wp-block-separator.is-style-ew-rule + .wp-block-gallery {
  margin-top: 44px !important;
}

/* A centred intro under a centred heading keeps to a readable width. */
.wp-block-separator.is-style-ew-rule:not(.ew-rule-left) + p.has-text-align-center {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Left-aligned variant. Uses its own class rather than .alignleft,
   because .alignleft floats and the next paragraph wraps around it. */
.wp-block-separator.is-style-ew-rule.ew-rule-left {
  margin-inline: 0;
  float: none;
  clear: both;
}

/* Inside a constrained layout WordPress centres every child with
   !important margins, which pulls a 64px rule to the middle. There the
   rule spans the full content width and the 64px bar is drawn at its
   left edge, so it lines up with the heading whatever the content width. */
.is-layout-constrained > .wp-block-separator.is-style-ew-rule.ew-rule-left {
  width: 100%;
  background: linear-gradient(var(--ew-sage), var(--ew-sage)) left center / 64px 3px no-repeat;
}

/* --- Homepage hero ---------------------------------------------- */

.ew-hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.875rem);
  line-height: 1.08;
  letter-spacing: 0.5px;
}

.ew-hero .ew-lede {
  font-size: clamp(1.25rem, 2vw, 1.5625rem);
  line-height: 1.55;
  opacity: 0.85;
}

/* Team mosaic: a flush 4-across grid of square headshots. Swap or
   reorder the images in the Gallery block and the grid follows. */
.ew-mosaic.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  --wp--style--unstable-gallery-gap: 0px;
  gap: 0;
}

.ew-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0 !important;
  min-width: 0;
  width: 100% !important;
  flex: none !important;
  display: block;
}

.ew-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--ew-sage-tint);
}

@media (max-width: 600px) {
  .ew-mosaic.wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Service cards ----------------------------------------------- */

/* Cards in a row share a height, so the row reads as one band. */
.wp-block-column:has(> .ew-svc-card) {
  display: flex;
}

.ew-svc-card {
  background: #ffffff;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--ew-sage);
  padding: 32px 28px;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ew-svc-card:hover,
.ew-svc-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(53, 74, 101, 0.18);
  border-top-color: var(--ew-navy);
}

.ew-svc-card a {
  text-decoration: none;
}

.ew-svc-card h3 a:hover,
.ew-svc-card h3 a:focus-visible {
  color: var(--ew-sage);
}

/* A card with no image needs its own top spacing, otherwise the heading
   sits flush against the sage rule. */
.ew-svc-card > .wp-block-heading:first-child {
  margin-top: 0;
}

.ew-svc-card .ew-more a {
  color: inherit;
}

.ew-svc-card .ew-more a:hover,
.ew-svc-card .ew-more a:focus-visible {
  text-decoration: underline;
}

/* Learn More sits on the foot of the card, so a row of cards lines up
   however many lines the title or summary runs to. */
.ew-svc-card > .ew-more {
  margin-top: auto !important;
  padding-top: 18px;
}

/* Photo at the top of a card. Add an Image block as the first block in
   the card and give it the class ew-card-img. */
.ew-svc-card > .ew-card-img {
  margin: 0 0 22px;
}

.ew-svc-card > .ew-card-img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.ew-svc-card .ew-more {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ew-sage);
}

/* Five cards across is too tight between the tablet and desktop
   breakpoints, where WordPress still forces one row. */
@media (min-width: 782px) and (max-width: 1100px) {
  .wp-block-columns:has(> .wp-block-column > .ew-svc-card) {
    flex-wrap: wrap !important;
  }
  .wp-block-columns:has(> .wp-block-column > .ew-svc-card) > .wp-block-column {
    flex-basis: calc(33.333% - 16px) !important;
  }
}

.ew-svc-card--cta {
  background: var(--ew-navy);
  border-top-color: var(--ew-navy);
}

.ew-svc-card--cta:hover,
.ew-svc-card--cta:focus-within {
  background: var(--ew-navy-dark);
  border-top-color: var(--ew-navy-dark);
}

/* Bordered sage-tint cards in a row (the homepage testimonials) share a
   height, and the closing name line sits on the foot of each card. */
.wp-block-column:has(> .wp-block-group.has-sage-tint-background-color.has-border-color:only-child) {
  display: flex;
}

.wp-block-column > .wp-block-group.has-sage-tint-background-color.has-border-color:only-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wp-block-column > .wp-block-group.has-sage-tint-background-color.has-border-color:only-child > .wp-block-heading:last-child {
  margin-top: auto !important;
  padding-top: 20px;
}

/* --- Sage square bullet list -------------------------------------- */
/* A normal List block. Give it the class and the bullets become the
   sage squares from the design. */

.ew-tick-list.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ew-tick-list.wp-block-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 19px;
  line-height: 1.5;
}

.ew-tick-list.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--ew-sage);
}

/* --- Square image with the sage cap ------------------------------- */

.ew-img-capped img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-top: 4px solid var(--ew-sage);
}

/* --- Eyebrow label ------------------------------------------------ */

.ew-eyebrow {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ew-sage);
  margin: 0;
}

/* --- Division page pieces ----------------------------------------- */

/* "Back to Services" link above a division heading. */
.ew-back-link a,
.ew-back-link {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ew-sage);
  text-decoration: none;
}

.ew-back-link a:hover,
.ew-back-link a:focus-visible {
  color: #ffffff;
}

.ew-acc.wp-block-details > summary:hover,
.ew-acc.wp-block-details > summary:focus-visible {
  background: var(--ew-sage-tint);
}

/* The big sage step number on a How We Partner card. */
.ew-step-num {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--ew-sage);
  margin: 0 0 14px;
}

/* The closing statement on a navy band. */
.ew-outcome {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.0625rem);
  line-height: 1.3;
}

/* Requirement card: sage left rule, warm panel, the number beside the
   title with the text under the title, as in the seedsite. */
.ew-req-card {
  background: #F6F5F2;
  border-left: 4px solid var(--ew-sage);
  padding: 26px 28px;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-content: start;
}

.ew-req-card > * {
  grid-column: 2;
  margin: 0 !important;
}

.ew-req-card > .ew-step-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 30px;
  line-height: 1;
}

.ew-req-card > .wp-block-heading {
  margin-bottom: 8px !important;
}

.ew-req-card > p:not(.ew-step-num) {
  font-size: 18px !important;
  line-height: 1.55;
}

/* Numbered process row, separated by hairlines. */
.ew-process-row {
  border-bottom: 1px solid var(--wp--preset--color--rule, rgba(53, 74, 101, 0.18));
  padding-block: 24px;
}

.ew-process-row:last-of-type,
.ew-process-row:last-child {
  border-bottom: 0;
}

@media (max-width: 781px) {
  .ew-process-row {
    padding-block: 18px;
  }
  .ew-process-row .wp-block-column:first-child {
    flex-basis: auto !important;
  }
}

.ew-process-num {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 0.9;
  color: var(--ew-sage);
  margin: 0;
}

/* Stat tile. */
.ew-stat {
  background: var(--ew-sage-tint);
  padding: 32px 28px;
  text-align: center;
  height: 100%;
}

.ew-stat-num {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--ew-navy);
  margin: 0 0 12px;
}

/* Small print, for legal or advisory notes. */
.ew-fineprint {
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  opacity: 0.8;
}

/* Accordion. A normal Details block with this class. */
.ew-acc.wp-block-details {
  background: #ffffff;
  border-left: 4px solid var(--ew-sage);
  box-shadow: 0 1px 0 rgba(53, 74, 101, 0.10);
  padding: 0;
  margin: 0 0 16px;
}

.ew-acc.wp-block-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 26px;
  cursor: pointer;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.3px;
  color: var(--ew-navy);
  text-transform: uppercase;
  list-style: none;
}

.ew-acc.wp-block-details > summary::-webkit-details-marker { display: none; }
.ew-acc.wp-block-details > summary::marker { content: ""; }

.ew-acc.wp-block-details > summary::after {
  content: "\25BE";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ew-sage);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.ew-acc.wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}

/* No drop shadow when open, only the hairline, as in the seedsite. */
.ew-acc.wp-block-details[open] {
  box-shadow: 0 1px 0 rgba(53, 74, 101, 0.10);
}

.ew-acc.wp-block-details > *:not(summary) {
  padding: 0 26px 22px;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ew-body);
}

/* --- Flip cards --------------------------------------------------- */
/* Two stacked Cover blocks. The first is the face, the second is the
   back. Edit them like any other Cover block.

   Both faces sit in the same grid cell rather than being absolutely
   positioned, so the card grows to fit whichever side is taller. The
   cards in a row then stretch to the tallest one, so copy can be
   edited freely without anything being cut off. */

.wp-block-column:has(> .ew-flip) {
  display: flex;
  flex-direction: column;
}

.ew-flip {
  perspective: 1400px;
  flex: 1;
  display: grid;
}

.ew-flip > .wp-block-group {
  display: grid;
  min-height: 340px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.ew-flip:hover > .wp-block-group,
.ew-flip:focus-within > .wp-block-group {
  transform: rotateY(180deg);
}

.ew-flip .wp-block-cover {
  grid-area: 1 / 1;
  position: relative;
  min-height: 340px;
  height: auto;
  margin: 0;
  padding: 30px 28px;
  border-top: 3px solid var(--ew-sage);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ew-flip .wp-block-cover:last-child {
  transform: rotateY(180deg);
  align-items: center;
}

.ew-flip .wp-block-cover__inner-container > :first-child {
  margin-top: 0;
}

/* The back face's content sits in the middle of the card, with even space
   above and below, as in the seedsite. */
.ew-flip .wp-block-cover:last-child > .wp-block-cover__inner-container > .ew-more {
  margin-top: 14px !important;
}

/* Overlays from the seedsite: a soft navy gradient on the front so the
   photo shows, and a near-solid dark navy on the back so the text reads.
   These replace whatever overlay colour and opacity the Cover block has. */
:root {
  --ew-flip-deep: color-mix(in srgb, var(--ew-navy-dark) 72%, #000000);
  --ew-flip-deepest: color-mix(in srgb, var(--ew-navy-dark) 48%, #000000);
}

.ew-flip .wp-block-cover:first-child > .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ew-navy) 33%, transparent) 0%, color-mix(in srgb, var(--ew-flip-deep) 85%, transparent) 100%) !important;
}

.ew-flip .wp-block-cover:last-child > .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ew-flip-deepest) 93%, transparent) 0%, color-mix(in srgb, var(--ew-flip-deepest) 97%, transparent) 100%) !important;
}

.ew-flip .wp-block-cover p {
  color: color-mix(in srgb, #ffffff 85%, transparent) !important;
}

/* Learn More on a card back: sage Oswald, like the seedsite. */
.ew-flip .wp-block-cover p.ew-more {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 16px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ew-sage) !important;
}

.ew-flip .ew-more a {
  color: inherit;
  text-decoration: none;
}

.ew-flip .ew-more a:hover,
.ew-flip .ew-more a:focus-visible {
  text-decoration: underline;
}

.ew-flip .wp-block-cover__inner-container > * {
  margin-top: 0 !important;
}

.ew-flip .wp-block-cover__inner-container > * + * {
  margin-top: 12px !important;
}

/* Home, Why Elderwise. */
.ew-why .ew-flip .wp-block-cover:last-child {
  padding: 34px 30px;
}

.ew-why .ew-flip .wp-block-cover p {
  font-size: 18px !important;
  line-height: 1.6;
}

/* About, Our Values: tall portrait cards, sage title on the back, a bold
   white intro and lighter bullets. */
.ew-values .ew-flip .wp-block-cover {
  border-top-width: 4px;
  padding: 32px 30px;
}

.ew-values .ew-flip .wp-block-cover:last-child h3 {
  text-align: left;
  margin: 0 0 12px;
}

/* Resources: Forms / Policies group headings above each download grid. */
.ew-forms-section .ew-download-group {
  margin-top: 44px !important;
  margin-bottom: 20px !important;
}

.ew-values .ew-flip .wp-block-cover p {
  font-size: 21px !important;
  line-height: 1.35;
  font-weight: 600;
  color: #ffffff !important;
  margin: 0 0 16px;
}

.ew-values .ew-flip .ew-tick-list.wp-block-list li {
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 9px;
  color: color-mix(in srgb, #ffffff 90%, transparent);
}

/* Explore Our Other Services: square photo cards, four across. */
.ew-cross .ew-is-current {
  display: none !important;
}

.ew-cross .ew-flip > .wp-block-group {
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.ew-cross .ew-flip .wp-block-cover {
  min-height: 0 !important;
  height: 100%;
  border-top-width: 4px;
  padding: 24px 22px;
}

.ew-cross .ew-flip .wp-block-cover:last-child {
  padding: 26px 24px;
}

.ew-cross .ew-flip .wp-block-cover:last-child h3 {
  font-size: 20px !important;
  margin: 0 0 10px;
}

.ew-cross .ew-flip .wp-block-cover p {
  font-size: 17px !important;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 781px) {
  .ew-cross .wp-block-columns:has(> .wp-block-column > .ew-flip) {
    grid-auto-rows: auto;
  }
  .ew-cross .ew-flip > .wp-block-group {
    aspect-ratio: 4 / 3;
  }
}

/* Centred page heroes keep the seedsite's line lengths. */
.ew-hero h1.has-text-align-center {
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ew-hero p.has-text-align-center:not(.ew-eyebrow) {
  max-width: 740px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Review carousel (Columns block with the class ew-carousel) --- */
.wp-block-columns.ew-carousel.is-carousel {
  display: block;
  position: relative;
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ew-carousel.is-carousel > .wp-block-column {
  display: none !important;
}

.ew-carousel.is-carousel > .wp-block-column.is-active {
  display: block !important;
  animation: ew-fade 0.4s ease;
}

@keyframes ew-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ew-carousel.is-carousel > .wp-block-column > .wp-block-group {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 52px 60px !important;
  border-color: color-mix(in srgb, var(--ew-sage) 30%, #ffffff) !important;
}

.ew-carousel.is-carousel > .wp-block-column > .wp-block-group > p:first-child {
  font-size: 80px !important;
  line-height: 0.5 !important;
  margin: 0 0 18px !important;
}

.ew-carousel.is-carousel > .wp-block-column > .wp-block-group > p:not(:first-child) {
  max-width: 640px;
  margin: 0 0 24px;
  font-size: 21px !important;
  line-height: 1.7;
  color: var(--ew-ink, #2C3138);
}

.ew-carousel.is-carousel > .wp-block-column > .wp-block-group > .wp-block-heading:last-child {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
}

.ew-carousel.is-carousel > .wp-block-column > .wp-block-group > .wp-block-heading:last-child::before {
  content: "\2014\00a0";
}

.ew-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--ew-navy);
  color: #ffffff;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease;
}

.ew-carousel__arrow:hover,
.ew-carousel__arrow:focus-visible {
  background: var(--ew-navy-dark);
}

.ew-carousel__arrow--prev { left: -22px; }
.ew-carousel__arrow--next { right: -22px; }

.ew-carousel__dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 30px !important;
}

.ew-carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--ew-sage) 50%, #ffffff);
  transition: transform 0.16s ease, background 0.16s ease;
}

.ew-carousel__dot:hover,
.ew-carousel__dot:focus-visible {
  transform: scale(1.35);
  background: var(--ew-sage);
}

.ew-carousel__dot[aria-current="true"] {
  background: var(--ew-navy);
}

@media (max-width: 781px) {
  .ew-carousel.is-carousel > .wp-block-column > .wp-block-group {
    padding: 40px 28px 44px !important;
  }
  .ew-carousel.is-carousel > .wp-block-column > .wp-block-group > p:not(:first-child) {
    font-size: 18px !important;
  }
  .ew-carousel__arrow {
    top: auto;
    bottom: -62px;
    transform: none;
    width: 44px;
    height: 44px;
  }
  .ew-carousel__arrow--prev { left: 0; }
  .ew-carousel__arrow--next { right: 0; }
}

/* Back-side bullets sit a step below the intro sentence (17px). The
   intro is held at 17px so the fluid Medium size cannot shrink it below
   the bullets on narrow screens. */
.ew-flip .wp-block-cover p {
  font-size: 17px !important;
  line-height: 1.5;
}

.ew-flip .ew-tick-list.wp-block-list li {
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.ew-flip .ew-tick-list.wp-block-list li:last-child {
  margin-bottom: 0;
}

/* Touch devices and reduced-motion users get the informative side
   directly, since there is no hover to reveal it. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .ew-flip > .wp-block-group { transform: none; }
  .ew-flip .wp-block-cover:first-child { display: none; }
  .ew-flip .wp-block-cover:last-child { transform: none; }
}

/* Stacked on a phone, the cards still match: every row takes the
   height of the tallest card. */
@media (max-width: 781px) {
  .wp-block-columns:has(> .wp-block-column > .ew-flip) {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }
}

/* --- Partner marquee -------------------------------------------- */

@keyframes ew-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ew-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Spacing lives on each logo rather than as a flex gap, so the second
   copy of the strip lines up exactly with the first when the loop
   restarts at -50%. */
.ew-marquee-mask .wp-block-group {
  display: flex;
  align-items: center;
  gap: 0 !important;
  width: max-content;
  animation: ew-marquee 32s linear infinite;
  flex-wrap: nowrap;
}

.ew-marquee-mask:hover .wp-block-group,
.ew-marquee-mask:focus-within .wp-block-group {
  animation-play-state: paused;
}

.ew-marquee-mask figure.wp-block-image {
  flex: none;
  margin: 0 !important;
  padding-right: 64px;
  display: flex;
  align-items: center;
}

/* Every logo gets the same height. Very wide marks are capped in width
   so they do not dominate the strip. */
.ew-marquee-mask figure.wp-block-image img {
  height: 60px !important;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .ew-marquee-mask .wp-block-group { animation: none; }
  .ew-marquee-mask { overflow-x: auto; }
}

/* --- Team grid ----------------------------------------------------- */

.ew-team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--ew-sage-tint);
}

.ew-team-name {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ew-navy);
  text-transform: uppercase;
  margin: 14px 0 2px;
}

.ew-team-creds {
  font-weight: 400;
  color: var(--ew-body);
}

.ew-team-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ew-navy);
  margin: 0;
}

/* Navy initials tile, used where there is no headshot yet. */
.ew-initials {
  aspect-ratio: 1 / 1;
  background: var(--ew-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 2px;
  margin: 0;
}

.ew-initials p {
  margin: 0;
}

/* Cards in a team row share a height so the row reads as one band. */
.wp-block-column:has(> .ew-team-card) {
  display: flex;
}

.ew-team-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}



/* The bio accordion inside a team card is quieter than a page accordion. */
.ew-team-card .ew-acc.wp-block-details > summary {
  font-size: 15px;
  padding: 10px 0;
  color: var(--ew-sage);
}

.ew-team-card .ew-acc.wp-block-details {
  border-left: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding-top: 8px;
}

/* Push the bio toggle to the foot of the card so the row lines up
   however long a name or job title runs. */
.ew-team-card > .ew-acc.wp-block-details {
  margin-top: auto;
}

/* While one bio in a row is open the row grows, so the closed toggles
   beside it stay put under their titles instead of dropping to the
   bottom of the open bio. */
.wp-block-columns:has(details[open]) > .wp-block-column > .ew-team-card > .ew-acc.wp-block-details:not([open]) {
  margin-top: 0;
}

/* Team rows hold four cards. A shorter last row keeps the same card
   width and centres, rather than stretching its cards wider. */
@media (min-width: 782px) {
  .wp-block-columns:has(> .wp-block-column > .ew-team-card) {
    justify-content: center;
  }
  .wp-block-columns:has(> .wp-block-column > .ew-team-card) > .wp-block-column {
    flex: 0 0 calc((100% - 3 * 26px) / 4) !important;
  }
}

.ew-team-card .ew-acc.wp-block-details > summary::after {
  width: 22px;
  height: 22px;
  font-size: 14px;
}

.ew-team-card .ew-acc.wp-block-details > *:not(summary) {
  padding: 0 0 12px;
  font-size: 16px;
}

/* --- Logo cards ---------------------------------------------------- */

.ew-logo-card {
  background: #ffffff;
  border-top: 4px solid var(--ew-sage);
  padding: 28px 24px;
  text-align: center;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ew-logo-card:hover,
.ew-logo-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(53, 74, 101, 0.18);
  border-top-color: var(--ew-navy);
}

/* Logos sit in a fixed-height box, so the titles under them line up
   whatever the shape of each logo. */
.ew-logo-card figure.wp-block-image {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
}

.ew-logo-card figure.wp-block-image > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.ew-logo-card img {
  max-height: 84px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin-inline: auto;
}

.ew-logo-card figure.wp-block-image + .wp-block-heading {
  margin-top: 0;
}

.ew-logo-card a {
  text-decoration: none;
}

/* --- Blog ---------------------------------------------------------- */

.ew-post-card {
  background: #ffffff;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-post-template.is-layout-grid > li:has(> .ew-post-card) {
  display: flex;
  min-width: 0;
}

.wp-block-post-template > li > .ew-post-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ew-post-card > .wp-block-group:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ew-post-card > .wp-block-group:last-child > .wp-block-post-date:last-child {
  margin-top: auto;
  padding-top: 8px;
}

.ew-post-card:hover,
.ew-post-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(53, 74, 101, 0.18);
}

.ew-post-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.ew-post-card .wp-block-post-title a,
.ew-feature-card .wp-block-post-title a {
  text-decoration: none;
}

.ew-post-card .wp-block-post-title a:hover,
.ew-feature-card .wp-block-post-title a:hover {
  color: var(--ew-sage);
}

/* Posts carried over from the old site hold classic-editor HTML with
   fixed width and height attributes. Keep those inside the column. */
.wp-block-post-content img {
  max-width: 100%;
  height: auto;
}

/* Long URLs pasted into older posts wrap rather than widening the page. */
.wp-block-post-content p,
.wp-block-post-content li,
.wp-block-post-content td {
  overflow-wrap: break-word;
}

/* Category terms above a post title. */
.ew-post-terms {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ew-sage);
}

.ew-post-terms a {
  color: inherit;
  text-decoration: none;
}

.ew-post-meta {
  font-size: 14px;
  color: var(--ew-body);
}

.ew-feature-card {
  background: #ffffff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ew-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(53, 74, 101, 0.18);
}

.ew-feature-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

/* The featured photo fills the whole left half of the card, however
   tall the text beside it runs. */
.ew-feature-card > .wp-block-column:first-child {
  display: flex;
  align-self: stretch;
}

.ew-feature-card > .wp-block-column:first-child > .wp-block-post-featured-image {
  flex: 1;
  margin: 0;
  height: auto !important;
}

.ew-feature-card > .wp-block-column:first-child > .wp-block-post-featured-image > a {
  display: block;
  height: 100%;
}

@media (max-width: 781px) {
  .ew-feature-card .wp-block-post-featured-image img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* White text on navy bands and dark covers is softened to 85%, like the
   seedsite. Eyebrows, links and Learn More keep their own colours. */
:is(.has-navy-background-color, .wp-block-cover.is-dark, .wp-block-cover:has(> .has-navy-background-color), .ew-svc-card--cta):not(.ew-footer) p:not(.ew-eyebrow):not(.ew-more):not(.ew-outcome):not(.ew-step-num):not(.ew-process-num):not(.has-sage-color):not(.has-sage-light-color) {
  color: color-mix(in srgb, #ffffff 85%, transparent) !important;
}

/* Blog pagination. */
.wp-block-query-pagination {
  gap: 12px;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wp-block-query-pagination-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  background: var(--ew-sage-tint);
  color: var(--ew-navy);
  text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--ew-navy);
  color: #ffffff;
}

.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-query-pagination-numbers a.page-numbers:focus-visible {
  background: var(--ew-sage);
  color: #ffffff;
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
  color: var(--ew-navy);
  text-decoration: none;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
  color: var(--ew-sage);
}

/* Category chip row. */
.ew-chips .wp-block-categories,
.ew-chips ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ew-chips li a {
  display: inline-block;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ew-navy);
  background: var(--ew-sage-tint);
  padding: 9px 20px;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.ew-chips li a:hover,
.ew-chips li a:focus-visible {
  background: var(--ew-sage);
  color: #ffffff;
}

/* --- HubSpot forms ------------------------------------------------ */
/* The form itself is styled in HubSpot. This only places it on the page
   and holds a little height while the embed loads, so the section does
   not jump once the form appears. */

.ew-hs-form {
  width: 100%;
  margin-inline: auto;
  min-height: 320px;
}

.ew-hs-form:empty::after {
  content: "Loading form…";
  display: block;
  padding-top: 24px;
  font-size: 16px;
  color: var(--ew-body);
}

/* --- Contact form ------------------------------------------------- */

.ew-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.ew-form-grid .ew-field {
  margin: 0;
}

.ew-form-grid .ew-field--wide {
  grid-column: 1 / -1;
}

.ew-label {
  display: block;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ew-navy);
  margin-bottom: 7px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ew-sage);
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: var(--ew-body);
  border-radius: 0;
}

.wpcf7 textarea {
  min-height: 170px;
  resize: vertical;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  outline: 2px solid var(--ew-sage);
  outline-offset: 1px;
}

.wpcf7 input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ew-sage);
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--ew-body);
  border-radius: 0;
  cursor: pointer;
}

.wpcf7 input[type="submit"] {
  padding: 16px 40px;
  background: var(--ew-navy);
  color: #ffffff;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
  background: var(--ew-navy-dark);
  transform: translateY(-2px);
}

.wpcf7 .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px;
  background: var(--ew-sage-tint);
  border: 0;
  border-left: 3px solid var(--ew-sage);
  font-size: 18px;
  color: var(--ew-navy);
}

.wpcf7 .wpcf7-not-valid-tip {
  font-size: 15px;
  color: var(--ew-navy);
}

@media (max-width: 600px) {
  .ew-form-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Site footer ------------------------------------------------ */

.ew-footer a {
  color: inherit;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.16s ease, color 0.16s ease;
}

.ew-footer a:hover,
.ew-footer a:focus-visible {
  opacity: 1;
  color: var(--ew-sage);
}

.ew-footer .wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ew-footer .wp-block-list li {
  margin: 0;
}

.ew-footer .ew-footer-heading {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.ew-footer .ew-footer-rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0 0 16px;
  opacity: 1;
  width: 100%;
}

.ew-footer .wp-block-social-links .wp-social-link {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
}

.ew-footer .wp-block-social-links .wp-social-link:hover {
  background: var(--ew-sage);
  border-color: var(--ew-sage);
}

/* --- Mobile ------------------------------------------------------ */

/* Below 1024px the header is a single row: logo, Contact Us, menu
   button. The full menu opens from the button. This keeps the sticky
   header at 72px on phones and tablets. */
@media (max-width: 1023px) {
  .wp-site-blocks .ew-header {
    padding: 12px 16px !important;
  }
  .ew-header > .wp-block-group {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .ew-header .wp-block-site-logo {
    flex: 0 0 auto;
    margin-right: auto;
  }
  .ew-header .wp-block-site-logo img {
    height: 48px;
  }
  .ew-header .wp-block-buttons {
    order: 2;
    flex: 0 0 auto;
  }
  .ew-header .ew-nav {
    order: 3;
    flex: 0 0 auto;
  }
  .ew-header .wp-block-button.is-style-ew-primary .wp-block-button__link {
    font-size: 14px;
    letter-spacing: 1px;
    padding: 11px 14px;
  }
  .ew-header .wp-block-button.is-style-ew-primary .wp-block-button__link:hover {
    transform: none;
  }
  .ew-nav .wp-block-navigation__responsive-container-open {
    padding: 10px;
    margin-right: -10px;
    color: var(--ew-navy);
  }
  .ew-nav .wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
  }
  .ew-nav .wp-block-navigation-item__content {
    font-size: 22px;
  }
}

/* WordPress only swaps to the menu button under 600px. Extend that up
   to 1023px, where the full menu would otherwise wrap onto two rows. */
@media (min-width: 600px) and (max-width: 1023px) {
  .ew-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .ew-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .ew-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    display: flex;
  }
}

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

/* Spread a wrapped heading evenly over its lines, so a two-line
   heading never leaves one word on its own. */
.wp-block-heading {
  text-wrap: balance;
}

/* Keep a phrase on one line. Wrap it in a span with this class. */
.ew-nowrap {
  white-space: nowrap;
}

/* --- Contact details --------------------------------------------- */

.ew-contact-card {
  background: var(--ew-sage-tint);
  border-top: 4px solid var(--ew-sage);
  padding: 34px 26px 30px;
  text-align: center;
  height: 100%;
}

.wp-block-column:has(> .ew-contact-card) {
  display: flex;
}

.ew-contact-card {
  flex: 1;
}

.ew-contact-card .ew-contact-value {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ew-navy);
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}

.ew-contact-card .ew-contact-value a {
  color: var(--ew-navy);
  text-decoration: underline;
  text-decoration-color: var(--ew-sage);
  text-underline-offset: 4px;
}

.ew-contact-card .ew-contact-value a:hover,
.ew-contact-card .ew-contact-value a:focus-visible {
  color: var(--ew-sage);
}

.ew-contact-card .ew-contact-note {
  font-size: 15px;
  margin: 8px 0 0;
}

/* The form heading drops a size on phones, where each question is
   allowed to wrap. */
@media (max-width: 600px) {
  .ew-form-heading.wp-block-heading {
    font-size: 26px !important;
  }
  .ew-form-heading .ew-nowrap {
    white-space: normal;
  }
}

/* --- Photo that fills its column ---------------------------------- */
/* Add ew-img-fill to an Image block beside a text column and the photo
   stretches to the text's height instead of leaving a gap. */

.wp-block-column:has(> .ew-img-fill) {
  align-self: stretch;
  display: flex;
}

.wp-block-image.ew-img-fill {
  flex: 1;
  display: flex;
  margin: 0;
}

.ew-img-capped.ew-img-fill img,
.ew-img-fill img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

@media (max-width: 781px) {
  .ew-img-capped.ew-img-fill img,
  .ew-img-fill img {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }
}

/* Alternating photo and text rows: on phones the photo always stacks
   above its text, whichever side it sits on at desktop. */
@media (max-width: 781px) {
  .wp-block-columns:has(> .wp-block-column:last-child > .ew-img-capped) {
    flex-direction: column-reverse;
  }
}

@media (max-width: 600px) {
  .ew-contact-card .ew-contact-value {
    font-size: 18px;
  }
}

/* Short list in two columns on wider screens. */
@media (min-width: 600px) {
  .ew-tick-list--two-col.wp-block-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
  .ew-tick-list--two-col.wp-block-list li {
    margin-top: 0;
  }
}

/* Wide accordions keep their text to a readable line length. */
.ew-acc.wp-block-details > *:not(summary) {
  max-width: 900px;
}

@media (max-width: 600px) {
  .ew-marquee-mask .wp-block-group { gap: 40px; }
}

/* --- Team bio pop-up ----------------------------------------------- */
/* The bio is still written in each card's "Read bio" Details block, so
   it is edited in the normal editor. assets/team-bios.js hides those
   toggles, makes the whole card clickable and opens the bio in a
   pop-up. Without JavaScript the inline toggles still work. */

.ew-bios-js .ew-team-card > details {
  display: none;
}

.ew-bios-js .ew-team-card[role="button"] {
  cursor: pointer;
  text-align: center;
}

.ew-bios-js .ew-team-card > figure,
.ew-bios-js .ew-team-card > .ew-initials {
  overflow: hidden;
  margin: 0;
}

.ew-bios-js .ew-team-card img {
  transition: transform 0.5s ease;
}

.ew-bios-js .ew-team-card[role="button"]:hover img,
.ew-bios-js .ew-team-card[role="button"]:focus-visible img {
  transform: scale(1.07);
}

.ew-bios-js .ew-team-card .ew-team-name {
  transition: color 0.16s ease;
}

.ew-bios-js .ew-team-card[role="button"]:hover .ew-team-name,
.ew-bios-js .ew-team-card[role="button"]:focus-visible .ew-team-name {
  color: var(--ew-sage);
}

.ew-bio-modal {
  padding: 0;
  border: 0;
  background: transparent;
  width: min(900px, calc(100% - 64px));
  max-width: none;
  max-height: 88vh;
  margin: auto;
  overflow: visible;
}

.ew-bio-modal::backdrop {
  background: color-mix(in srgb, var(--ew-navy-dark) 78%, transparent);
}

.ew-bio-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  max-height: 88vh;
  overflow-y: auto;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.ew-bio-modal__photo {
  position: sticky;
  top: 0;
  align-self: start;
  height: 440px;
  background: var(--ew-sage-tint);
}

.ew-bio-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ew-bio-modal__photo.is-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ew-navy);
  color: #ffffff;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 96px;
  letter-spacing: 3px;
}

.ew-bio-modal__body {
  position: relative;
  padding: 44px 44px 46px;
  min-width: 0;
}

.ew-bio-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-size: 34px;
  line-height: 1;
  color: var(--ew-body);
  cursor: pointer;
  transition: color 0.16s ease;
}

.ew-bio-modal__close:hover,
.ew-bio-modal__close:focus-visible {
  color: var(--ew-navy);
}

.ew-bio-modal__name {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ew-navy);
  margin: 0;
  padding-right: 32px;
}

.ew-bio-modal__name .ew-team-creds {
  font-weight: 400;
  color: var(--ew-body);
}

.ew-bio-modal__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ew-navy);
  margin: 8px 0 0;
}

.ew-bio-modal__rule {
  display: block;
  width: 54px;
  height: 3px;
  background: var(--ew-sage);
  margin: 18px 0 22px;
}

.ew-bio-modal__text > * {
  margin: 0 0 16px;
}

.ew-bio-modal__text > *:last-child {
  margin-bottom: 0;
}

.ew-bio-modal__text p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ew-body);
}

/* "Beyond the Bio" label and its list. */
.ew-bio-modal__text h4,
.ew-bio-modal__text h5 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ew-navy);
  margin: 26px 0 12px;
}

.ew-bio-modal__text .ew-tick-list.wp-block-list li {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: var(--ew-body);
}

.ew-bio-modal__text .ew-tick-list.wp-block-list li strong {
  color: var(--ew-navy);
}

@media (max-width: 700px) {
  .ew-bio-modal {
    width: calc(100% - 32px);
  }
  .ew-bio-modal__panel {
    grid-template-columns: 1fr;
  }
  .ew-bio-modal__photo {
    position: static;
    height: 300px;
  }
  .ew-bio-modal__photo.is-initials {
    font-size: 72px;
  }
  .ew-bio-modal__body {
    padding: 30px 24px 32px;
  }
  .ew-bio-modal__name {
    font-size: 24px;
  }
  /* On a phone the close button sits over the photo, on a white disc,
     and stays put while the bio scrolls. */
  .ew-bio-modal__close {
    position: fixed;
    top: calc(6vh + 10px);
    right: 26px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    font-size: 30px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ew-bios-js .ew-team-card img { transition: none; }
  .ew-bios-js .ew-team-card[role="button"]:hover img { transform: none; }
}

/* ==== October 2026 client edits ====================================== */

/* Accordions: larger titles and text sitewide. Team bio toggles keep
   their own smaller style (more specific rules above). */
.ew-acc.wp-block-details > summary {
  font-size: 24px;
  padding: 22px 28px;
}

.ew-acc.wp-block-details > *:not(summary) {
  font-size: 19px;
  padding: 0 28px 24px;
}

@media (max-width: 600px) {
  .ew-acc.wp-block-details > summary {
    font-size: 21px;
    padding: 18px 20px;
  }
  .ew-acc.wp-block-details > *:not(summary) {
    font-size: 18px;
    padding: 0 20px 20px;
  }
}

/* Team bios: one consistent, larger size for every bio. */
.ew-bio-modal__text p {
  font-size: 19px;
  line-height: 1.65;
}

.ew-bio-modal__text h4,
.ew-bio-modal__text h5 {
  font-size: 19px;
}

.ew-bio-modal__text .ew-tick-list.wp-block-list li {
  font-size: 18px;
}

.ew-team-card .ew-acc.wp-block-details > *:not(summary) {
  font-size: 17px;
}

/* Home, A Note from Our Founders: Cynthia and John. */
.ew-founders-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.ew-founders-photos figure.wp-block-image {
  margin: 0;
}

.ew-founders-photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-top: 4px solid var(--ew-sage);
  background: var(--ew-sage-tint);
}

.ew-founders-photos figcaption {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ew-navy);
  text-align: left;
  margin: 10px 0 0;
}

@media (max-width: 781px) {
  .ew-founders-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .ew-founders-photos figcaption {
    font-size: 15px;
  }
}

/* About: Elderwise logo in place of the photo collage. */
.ew-about-logo img {
  max-width: 100%;
  height: auto;
}

/* Elderwise Academy: training topics as a two-column list. */
.ew-topic-list.wp-block-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  margin-top: 6px;
}

.ew-topic-list.wp-block-list li {
  margin: 0;
  padding: 16px 0 16px 30px;
  border-bottom: 1px solid rgba(53, 74, 101, 0.10);
  font-size: 20px;
  line-height: 1.45;
}

.ew-topic-list.wp-block-list li::before {
  top: calc(16px + 0.45em);
  width: 10px;
  height: 10px;
}

@media (max-width: 781px) {
  .ew-topic-list.wp-block-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .ew-topic-list.wp-block-list li {
    font-size: 18px;
    padding: 13px 0 13px 26px;
  }
  .ew-topic-list.wp-block-list li::before {
    top: calc(13px + 0.45em);
  }
}

/* Quality & Compliance: What's Included cards. */
.wp-block-column:has(> .ew-included) {
  display: flex;
}

.ew-included {
  flex: 1;
  background: var(--ew-sage-tint);
  border-top: 4px solid var(--ew-sage);
  padding: 34px 30px;
}

.ew-included > .wp-block-heading {
  margin: 18px 0 14px;
}

.ew-included > p:not(.ew-step-num) {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.ew-included .ew-tick-list.wp-block-list {
  margin: 0 0 16px;
}

.ew-included .ew-tick-list.wp-block-list li {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Resources: RN Delegation template downloads. */
.ew-download-list.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.ew-download-list.wp-block-list li {
  margin: 0;
}

.ew-download-list.wp-block-list a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-top: 4px solid var(--ew-sage);
  padding: 26px 28px 24px;
  text-decoration: none;
  color: var(--ew-navy);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ew-download-list.wp-block-list a:hover,
.ew-download-list.wp-block-list a:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(53, 74, 101, 0.18);
  border-top-color: var(--ew-navy);
}

.ew-download__label {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ew-sage);
}

.ew-download__title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ew-navy);
}

.ew-download__meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 16px;
  color: var(--ew-body);
}

.ew-download__meta::after {
  content: "  \2193";
  color: var(--ew-sage);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .ew-download-list.wp-block-list a { transition: none; }
  .ew-download-list.wp-block-list a:hover { transform: none; }
}