/**
Theme Name: SRH
Text Domain: srh

Description: Self Regional Healthcare
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 2.3
Author: windhamdavid
Author URI: https://davidwindham.com
*/

body:not(.editor-styles-wrapper):not(.block-editor-page):not(.wp-admin) {
  background-color: var(--wp--preset--color--accent-4) !important;
}

.z-top {
  z-index: 10;
  position: relative;
}

.wp-site-blocks {
  background-color: #f1f1f1;
  /* Belt-and-suspenders against page-level horizontal scroll. WP's
     `.has-global-padding > .alignfull` rule adds negative inline margins
     to alignfull children to escape the parent's root padding. When
     alignfull blocks are nested (e.g., a wrapper inside post-content
     that's also alignfull), those negative margins compound and the
     inner one ends up a few px past the viewport edge, which gives the
     whole page a horizontal scrollbar pointing at empty space. `clip`
     prevents the page from scrolling horizontally without creating a
     new scroll context (which would break `position: sticky`). */
  overflow-x: clip;
}

.logo-letter {
  font-size: 115%;
}
.srh-logo {
  flex-shrink: 0 !important;
  width: 280px;
  min-width: 280px;
}

.no-style-list {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

/* Let the logo shrink on narrow viewports so the hamburger stays on-screen */
@media (max-width: 480px) {
  .srh-logo {
    width: 240px;
    min-width: 0;
  }
  /* Remove extra padding from nav group when navigation is hidden */
  .wp-block-srh-offcanvas-menu {
    margin-left: auto;
  }
}




/* change the columns breakpoint from WP default 782px to 1080px
   Core wp-block-columns stylesheet is dequeued in functions.php */
.wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap;
}

/* Restore vertical alignment classes lost when core columns CSS was dequeued */
.wp-block-columns.are-vertically-aligned-top {
    align-items: flex-start;
}
.wp-block-columns.are-vertically-aligned-center {
    align-items: center;
}
.wp-block-columns.are-vertically-aligned-bottom {
    align-items: flex-end;
}

.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    min-width: 100%;
    flex-grow: 0;
    box-sizing: border-box;
}

@media (min-width: 1081px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: nowrap;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        min-width: 0;
        flex-basis: 0;
        flex-grow: 1;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
        flex-grow: 0;
    }
}

/* Ensure fixed header does not overlap page content.
   Use the --header-height CSS variable set by JS, but cap it as a safe
   fallback in case the JS fails. Caps were 120/90 historically; raised
   to 200/150 in May 2026 when the breadcrumb row pushed the header to
   ~150-160 desktop. Keep these in sync with the JS caps in
   js/auto-hide-nav.js.

   Fallback values (150/110) match the expected header height so the
   initial paint reserves the right space — without them the initial
   paint used 0 (the prior fallback) and main content jumped ~150px
   when JS measured and set --header-height, causing a ~0.16 CLS hit. */
main {
  padding-top: clamp(0px, var(--header-height, 150px), 200px);
  box-sizing: border-box;
}

@media (max-width: 480px) {
  main {
    padding-top: clamp(0px, var(--header-height, 110px), 150px);
  }
}

/* Historically this block zeroed out the inline `margin-top: 12px` that
   every template set on <main> on desktop (≥1081px) — back when the
   header was shorter and the 12px showed up as a too-large gap. The
   breadcrumb row added in May 2026 made the header ~30px taller, the
   templates' inline margin-top was bumped to `var:preset|spacing|70`
   (3.38rem ≈ 54px) to give the page-title breathing room below the
   now-taller fixed header, and the `!important` zeroing was removed
   so the template value applies. If desktop gap ever feels too big
   again, tune `margin-top` in each template, not via override here. */

/* Hide the breadcrumb row wrapper when it's empty (block render bails
   on the front page / paths with no chain). Lives here in theme CSS so
   it loads even when the block itself doesn't enqueue its stylesheet
   (WP skips block-supports CSS for blocks that render to empty). */
.srh-breadcrumbs-row:not(:has(nav.srh-breadcrumbs-wrap)) {
  display: none;
}

/* Locations page (post 1313) "Find Care Now" H1: on mobile only, center
   the heading + bump the font. Desktop keeps the editor-set left
   alignment + the inline 1.95rem typography.fontSize from the block. */
@media (max-width: 768px) {
  .locations-find-care-h1 {
    text-align: center;
    font-size: 1.7rem !important;
  }
}

/* Home page top flex row (marker image + "Find Care Now" heading + 4-button
   find-care-now-light pattern). On mobile the row would otherwise duck up
   under the fixed nav because the flex group's vertical center sits higher
   than the H1 visible on other page-no-margin pages. Add a chunk of top
   padding only on phones so the row clears the header. Targets the
   `#top-nav-home` ID set on the row's wp:group on the home page (post 1153). */
@media (max-width: 767px) {
  #top-nav-home {
    padding-top: 3rem;
  }
}



a {
  text-decoration: none;
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Post title — page/post H1. Fluid clamp: 1.5rem on narrow mobile to 2.2rem on
   desktop. Smaller than the previous 2rem→2.5rem range to bring titles closer
   in line with body copy + leave more vertical space above the fold. */
.wp-block-post-title:not(.wp-block-query .wp-block-post-title),
.is-blog-heading {
  font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--accent-2);
}

/* When the post-title is rendered visually-hidden (page-no-margin and
   page-single-no-title templates), it still occupies a sibling slot in the
   flow layout — pushing the next element out of "first-child" position and
   picking up the 24px block-gap. Reset the gap on the next sibling so the
   thin 12px margin-top on <main> is the only visible gap above content. */
.wp-block-post-title.screen-reader-text + *,
main > .wp-block-post-title.screen-reader-text + *,
main > .wp-block-post-title.screen-reader-text + .wp-block-post-content,
main > .wp-block-post-title.screen-reader-text + .entry-content {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-block-start: 0 !important;
  padding-top: 0 !important;
}

/*
 * Reduce the global root padding (gutter) on mobile.
 *
 * theme.json sets --wp--style--root--padding-left/right: 1rem, which feeds the
 * body padding plus every .has-global-padding rule (auto-applied to alignfull
 * constrained groups, post-content, etc.). On mobile that 1rem gutter eats
 * screen real estate now that the white card is flattened. Tighten it here.
 */
@media (max-width: 768px) {
  body {
    --wp--style--root--padding-left:  0.5rem;
    --wp--style--root--padding-right: 0.5rem;
  }
}

/*
 * White-card visual flattening on mobile.
 *
 * The "card" look (rounded white panel inside the gradient backdrop) takes up
 * too much horizontal real estate on phones. Drop the background, border-radius,
 * and the spacing-60 vertical inline padding so post content sits flush in the
 * gradient. Also zero --wp--style--root--padding-* locally so the auto
 * has-global-padding rules and the post-content's align:full negative margin
 * all collapse together (matches page.html's content width).
 *
 * !important is needed to beat the inline styles set by the block JSON
 * (background-color from has-base-background-color, border-radius / padding from
 * the wp:group "style" attribute).
 */
@media (max-width: 768px) {
  .wp-block-group.alignwide.has-base-background-color {
    --wp--style--root--padding-left: 0;
    --wp--style--root--padding-right: 0;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Replace the template-level gradient backdrop with a flat white background
     on mobile (since the white card visual is flattened above). Targets only
     the alignfull background group that's a direct child of main, so authored
     in-content gradient sections aren't affected. */
  main > .wp-block-group.alignfull.has-background {
    background: #ffffff !important;
  }
}

/*
 * In-content "card style" groups (background + rounded + side padding) on
 * mobile: kill the inline horizontal padding so reading width isn't pinched.
 *
 * Targets any .wp-block-group with a background sitting inside post-content,
 * EXCLUDING full/wide-aligned groups (those are typically hero/banner
 * backdrops where the padding is intentional). Catches both `has-base-
 * background-color` cards (Nursing 1557) and inline-gradient cards (About
 * 820's top section). The visual (bg, radius, shadow) is preserved; only the
 * spacing--80 / spacing--70 inline left/right padding is dropped.
 */
@media (max-width: 768px) {
  .wp-block-post-content .wp-block-group.has-background:not(.alignfull):not(.alignwide) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Button press effect — `transform` translates not supported in theme.json
   so the press-down translates stay here. The matching `box-shadow`
   values for :hover, :focus-visible, :active are declared on
   `styles.elements.button` in theme.json (WP 7.0+) so they're editable
   from the Site Editor → Styles → Buttons UI. */
.wp-block-button__link,
.wp-element-button {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translate(1.5px, 1.5px);
}

.wp-block-button__link:active,
.wp-element-button:active {
  transform: translate(3px, 3px);
}

/* Press effect for hyperlinked images — slight 2px translate on hover so
   inline images inside button/anchor links feel responsive (used by the
   /locations Provider Finder button's MyChart logo, etc.). */
a img {
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
a:hover img {
  box-shadow: none;
  filter: none;
  transform: translate(2px, 2px);
}
/* Disable the press effect inside featured-news carousel slides — the
   card-as-a-whole already responds on hover, and a sliding image inside
   reads as a double-bounce. */
.srh-carousel-slide a img {
  transition: none;
}
.srh-carousel-slide a:hover img {
  transform: none;
}
/* Same opt-out for the /locations/ finder cards — the card border already
   highlights on hover; an additional image translate reads as jittery. */
.srh-location-card__image a img {
  transition: none;
}
.srh-location-card__image a:hover img {
  transform: none;
}

/* Content hyperlink styles with animated underline
   Excludes buttons, care links in Find Care Now blocks, and links wrapping an image.
   Also covers page-list blocks (e.g. sitemap) which render outside post-content */
:is(.wp-block-post-content, .wp-block-page-list) a:not(.wp-block-button__link):not(.wp-element-button):not(.care-link):not(.page-numbers):not(.wp-block-query-pagination-next):not(.wp-block-query-pagination-previous):not(:has(img)) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s ease, color 0.3s ease;
  padding-bottom: 2px;
}

/* Color rule — skip links inside headings so editor color choices win */
:is(.wp-block-post-content, .wp-block-page-list) a:not(.wp-block-button__link):not(.wp-element-button):not(.care-link):not(.page-numbers):not(.wp-block-query-pagination-next):not(.wp-block-query-pagination-previous):not(:has(img)):not(:is(h1,h2,h3,h4,h5,h6) *) {
  color: var(--wp--preset--color--accent-3);
}

:is(.wp-block-post-content, .wp-block-page-list) a:not(.wp-block-button__link):not(.wp-element-button):not(.care-link):not(.page-numbers):not(.wp-block-query-pagination-next):not(.wp-block-query-pagination-previous):not(:has(img)):hover {
  background-size: 100% 1px;
}

:is(.wp-block-post-content, .wp-block-page-list) a:not(.wp-block-button__link):not(.wp-element-button):not(.care-link):not(.page-numbers):not(.wp-block-query-pagination-next):not(.wp-block-query-pagination-previous):not(:has(img)):not(:is(h1,h2,h3,h4,h5,h6) *):hover {
  color: var(--wp--preset--color--accent-4);
}

/* Footer hyperlink animated underline */
.srh-footer a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-social-link-anchor):not(:has(img)) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s ease;
  padding-bottom: 2px;
}

.srh-footer a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-social-link-anchor):not(:has(img)):hover {
  background-size: 100% 1px;
}

/* Plain list style for footer - no bullets, no padding. `padding-inline-start`
   covers the UA default that `padding-left: 0` misses in some browsers. */
.footer-list-nav{
  list-style: none;
  padding-left: 0;
  padding-inline-start: 0;
  margin-left: 0;
}

.footer-list-nav li {
  list-style: none;
  padding-left: 0;
  padding-inline-start: 0;
  margin-left: 0;
}

.footer-list-nav li::before {
  display: none;
}

/* Sitemap "Site Overview" — drop list markers on every level */
.srh-sitemap .wp-block-pages-list__item {
  list-style: none;
}

/* Sitemap "Site Overview" — bold top-level pages only, spaced out */
.srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item {
  padding-top: var(--wp--preset--spacing--40);
}

.srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item > a {
  display: inline-block;
  padding-bottom: var(--wp--preset--spacing--20);
}

.srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item > a {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--large);
}

/* Split the longest sections (Locations & Services) into multiple columns */
.srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item:has(> a[href$="/locations/"]) > ul,
.srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item:has(> a[href$="/services/"]) > ul {
  columns: 2;
  column-gap: var(--wp--preset--spacing--60);
}

.srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item:has(> a[href$="/locations/"]) > ul > li,
.srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item:has(> a[href$="/services/"]) > ul > li {
  break-inside: avoid;
}

/* Collapse to a single column on mobile so the long lists scan top-to-bottom
   instead of zig-zagging in two narrow tracks. */
@media (max-width: 768px) {
  .srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item:has(> a[href$="/locations/"]) > ul,
  .srh-sitemap > .wp-block-page-list > .wp-block-pages-list__item:has(> a[href$="/services/"]) > ul {
    columns: 1;
  }
}

/* content width 1240 alignwide 1340 */
@media (max-width: 1340px) {
  .alignwide {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Hide WordPress navigation at 1080px and below */
@media (max-width: 1080px) {
  .wp-block-navigation,
  .wp-block-navigation__container,
  .wp-block-navigation__responsive-container-content {
    display: none !important;
  }
}

/* Always hide WordPress navigation hamburger (we use custom offcanvas) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__toggle_button_label {
  display: none !important;
}

/* Show navigation above 1080px */
@media (min-width: 1081px) {
  .wp-block-navigation,
  .wp-block-navigation__container {
    display: flex !important;
  }
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Explicit focus indicators for elements where the theme's :where() rule
   gets overridden by plugin / browser defaults. Surfaced by the keyboard
   audit (`_claude/run-keyboard.py`):
   - wpgmza Google Maps tabbable map div + marker list-items
   - native search input (offcanvas + anywhere else) */
.wpgmza_map [tabindex="0"]:focus,
.wpgmza-panel-info-window [tabindex="0"]:focus,
.wpgmza-marker-listing [tabindex="0"]:focus,
input[type="search"]:focus {
	outline: 2px solid var(--wp--preset--color--accent-2, #19458c);
	outline-offset: 2px;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/***********************************************************
############ Auto-hide Navigation Styles ###################
************************************************************/

/* Only the outer <header> wrapper (rendered via template-part tagName) is
   fixed-positioned. `.srh-auto-hide-header` was the historical hook back when
   the template-part rendered as a <div>; with the semantic <header> element
   now in place, fixing both parent and child collapses the parent to 0 height
   (the child is removed from the parent's flow), zeroing --header-height. */
header,
.wp-site-header,
.wp-block-template-part[data-area="header"] {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid var(--wp--preset--color--off-base, #f1f1f1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
  transform: translateY(0);
  opacity: 1;
}

/* Hidden state when scrolling down */
header.header-hidden,
.srh-auto-hide-header.header-hidden,
.wp-site-header.header-hidden,
.wp-block-template-part[data-area="header"].header-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* Visible state when scrolling up */
header.header-visible,
.srh-auto-hide-header.header-visible,
.wp-site-header.header-visible,
.wp-block-template-part[data-area="header"].header-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Enhanced background when scrolled */
header.header-scrolled,
.srh-auto-hide-header.header-scrolled,
.wp-site-header.header-scrolled,
.wp-block-template-part[data-area="header"].header-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Ensure content doesn't jump when header becomes fixed */
body {
  padding-top: 0;
  transition: padding-top 0.3s ease;
}

body.header-offset {
  padding-top: var(--header-height, 80px);
}

/* Navigation links hover effects */
header a,
.srh-auto-hide-header a,
.wp-site-header a,
.wp-block-template-part[data-area="header"] a {
  transition: color 0.2s ease, transform 0.2s ease;
}

header a:hover,
.srh-auto-hide-header a:hover,
.wp-site-header a:hover,
.wp-block-template-part[data-area="header"] a:hover {
  transform: translateY(-1px);
}

/* Mobile menu adjustments */
@media (max-width: 768px) {
  header,
  .srh-auto-hide-header,
  .wp-site-header,
  .wp-block-template-part[data-area="header"] {
    background: rgba(255, 255, 255, 0.98);
  }
  
  body.header-offset {
    padding-top: var(--header-height, 60px);
  }
}

/* Smooth scroll behavior for the whole page */
html {
  scroll-behavior: smooth;
}

/* Optional: Add a subtle animation when page loads */
header,
.srh-auto-hide-header,
.wp-site-header,
.wp-block-template-part[data-area="header"] {
  animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/***********************************************************
########### Find Care Now Pattern Styles ###################
************************************************************/

/* Shared base styles for both patterns */
.find-care-now-pattern,
.find-care-now-light-pattern {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Override WordPress default spacing */
.find-care-now-pattern .wp-block-group,
.find-care-now-light-pattern .wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
}

.find-care-now-pattern .find-care-container,
.find-care-now-light-pattern .find-care-container {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
}

/* Dark pattern specific styles */
.find-care-now-pattern .find-care-container {
  background-color: #19458c !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  min-height: 120px;
}

/* Light pattern specific styles */
.find-care-now-light-pattern .find-care-container {
  background-color: var(--wp--preset--color--base);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-height: 120px;
}

.find-care-now-pattern .find-care-header,
.find-care-now-light-pattern .find-care-header {
  flex: 0 0 auto;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 !important;
  padding: var(--wp--preset--spacing--60) !important;
}

/* Dark pattern header border */
.find-care-now-pattern .find-care-header {
  border-right: 1px solid var(--wp--preset--color--accent-1);
  color: white;
}

/* Light pattern header border */
.find-care-now-light-pattern .find-care-header {
  border-right: 1px solid var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--accent-2);
}

/* Drop the right divider on mobile (header stacks above the cards) */
@media (max-width: 768px) {
  .find-care-now-pattern .find-care-header,
  .find-care-now-light-pattern .find-care-header {
    border-right: none;
  }
}

.find-care-now-pattern .find-care-header > *,
.find-care-now-light-pattern .find-care-header > * {
  margin: 0 !important;
}

.find-care-now-pattern .find-care-header .wp-block-group,
.find-care-now-light-pattern .find-care-header .wp-block-group {
  margin: 0;
  padding: var(--wp--preset--spacing--10) !important;
}

.find-care-now-pattern .find-care-heading,
.find-care-now-light-pattern .find-care-heading {
  font-size: 1.2rem !important;
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
}

/* Dark pattern heading color */
.find-care-now-pattern .find-care-heading {
  color: white !important;
}

/* Light pattern heading color */
.find-care-now-light-pattern .find-care-heading {
  color: var(--wp--preset--color--accent-2) !important;
}

.find-care-now-pattern .care-options,
.find-care-now-light-pattern .care-options {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  min-width: 0;
}

.find-care-now-pattern .care-option,
.find-care-now-light-pattern .care-option {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--wp--preset--spacing--40);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.find-care-now-pattern .care-option::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

.find-care-now-light-pattern .care-option::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(204, 211, 222, 0.5); /* accent-11 #ccd3de @ 50% */
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

.find-care-now-pattern .care-option > *,
.find-care-now-light-pattern .care-option > * {
  position: relative;
  z-index: 2;
}

/* Dark pattern borders */
.find-care-now-pattern .care-option:not(.telehealth) {
  border-right: 1px solid var(--wp--preset--color--accent-1);
}

/* Light pattern borders */
.find-care-now-light-pattern .care-option:not(.telehealth) {
  border-right: 1px solid var(--wp--preset--color--accent-2);
}

.find-care-now-pattern .care-option.telehealth,
.find-care-now-light-pattern .care-option.telehealth {
  margin-right: 0;
}

.find-care-now-pattern .care-option:hover::before,
.find-care-now-light-pattern .care-option:hover::before {
  width: 100%;
  height: 100%;
}

.find-care-now-pattern .care-option.telehealth::before,
.find-care-now-light-pattern .care-option.telehealth::before {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Care icon sizing — applies to both <img> and inline <svg> */
.find-care-now-pattern .care-icon,
.find-care-now-light-pattern .care-icon,
.find-care-now-pattern img.care-icon,
.find-care-now-light-pattern img.care-icon,
.find-care-now-pattern svg.care-icon,
.find-care-now-light-pattern svg.care-icon {
  width: 35px !important;
  height: 35px !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0;
}

/* SVG path fill colors — CSS fill overrides the fill="currentColor" presentation
   attribute directly on the path elements, so there is no dependency on the
   CSS color property or currentColor inheritance chain.
   opacity=".4" on the first path is preserved for the FA duotone effect. */
.find-care-now-pattern svg.care-icon path {
  fill: #ffffff !important;
}

.find-care-now-light-pattern svg.care-icon path {
  fill: var(--wp--preset--color--accent-2) !important;
}

/* Lock color on SVG element so fill="currentColor" is immune to FA/plugin cascade */
.find-care-now-pattern svg.care-icon {
  color: #ffffff !important;
}

.find-care-now-light-pattern svg.care-icon {
  color: var(--wp--preset--color--accent-2) !important;
}

.find-care-now-pattern .care-link-wrapper,
.find-care-now-light-pattern .care-link-wrapper {
  margin: 0;
  padding: 0;
}

.find-care-now-pattern .care-link,
.find-care-now-light-pattern .care-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  text-decoration: none;
  transition: all 0.3s ease;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.find-care-now-pattern .care-option h3,
.find-care-now-pattern .care-heading,
.find-care-now-pattern .care-option span.care-heading,
.find-care-now-pattern span.care-heading,
.find-care-now-light-pattern .care-option h3,
.find-care-now_light-pattern .care-heading,
.find-care-now-light-pattern .care-option span.care-heading,
.find-care-now_light-pattern span.care-heading {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  white-space: nowrap;
  margin: 0;
}

/* Dark pattern text color */
.find-care-now-pattern .care-option h3,
.find-care-now-pattern .care-heading,
.find-care-now-pattern .care-option span.care-heading,
.find-care-now-pattern span.care-heading {
  color: #ffffff !important;
}

/* Light pattern text color */
.find-care-now-light-pattern .care-option h3,
.find-care-now-light-pattern .care-heading,
.find-care-now-light-pattern .care-option span.care-heading,
.find-care-now-light-pattern span.care-heading {
  color: var(--wp--preset--color--accent-2) !important;
}

/* Responsive styles for both patterns */
@media (max-width: 1080px) {
  .find-care-now-pattern .find-care-container,
  .find-care-now-light-pattern .find-care-container {
    flex-direction: column !important;
  }
  
  .find-care-now-pattern .find-care-header,
  .find-care-now-light-pattern .find-care-header {
    min-width: auto;
  }
  
  .find-care-now-pattern .care-options,
  .find-care-now-light-pattern .care-options {
    flex-direction: column !important;
  }
  
  .find-care-now-pattern .care-option,
  .find-care-now-light-pattern .care-option {
    border-right: none !important;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
  }
  
  .find-care-now-pattern .care-option {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
  
  .find-care-now-light-pattern .care-option {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  
  .find-care-now-pattern .care-option:last-child,
  .find-care-now-light-pattern .care-option:last-child {
    border-bottom: none !important;
  }
}

@media (max-width: 768px) {
  /* Home-page hero row that wraps the marker image + "Find Care Now" heading
     + the 4-button find-care-now-light pattern in a single horizontal flex
     group. On mobile, drop the buttons to a second row by allowing the
     parent to wrap and pinning the buttons block to 100% basis. The marker
     and heading still sit side-by-side on row 1 — the buttons land below. */
  .alignwide.wp-block-group:has(> .find-care-now-light-pattern) {
    flex-wrap: wrap !important;
  }
  .alignwide.wp-block-group:has(> .find-care-now-light-pattern) > .find-care-now-light-pattern {
    flex-basis: 100%;
  }

  .find-care-now-pattern .find-care-heading,
  .find-care-now-light-pattern .find-care-heading {
    font-size: 1.5rem;
  }

  .find-care-now-pattern .care-icon,
  .find-care-now-light-pattern .care-icon,
  .find-care-now-pattern img.care-icon,
  .find-care-now-light-pattern img.care-icon,
  .find-care-now-pattern svg.care-icon,
  .find-care-now-light-pattern svg.care-icon {
    width: 28px !important;
    height: 28px !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* Add padding to find-care patterns at mobile sizes */
@media (max-width: 1240px) {
  .find-care-now-pattern,
  .find-care-now-light-pattern {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  
  .find-care-now-pattern .find-care-container,
  .find-care-now-light-pattern .find-care-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/***********************************************************
##################### Offcanvas Menu #######################
************************************************************/


.wp-block-srh-offcanvas-menu {
  position: relative;
}

/* Header offcanvas menu (hamburger) is only useful on mobile + tablet —
   the regular wp:navigation menu beside it handles desktop. Hide the
   hamburger on viewports ≥1081px (matches the theme's existing desktop
   breakpoint elsewhere). */
@media (min-width: 1081px) {
  header .wp-block-srh-offcanvas-menu {
    display: none;
  }
}

.hamburger-toggle {
  position: relative; /* Changed from fixed */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: auto;
  height: auto;
  background-color: var(--wp--preset--color--accent-2, #19458c);
  border: none;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10000;
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin-left: auto; /* Pushes button to the right in flex container */
}

.hamburger-toggle:hover {
  transform: scale(1.05);
  background-color: var(--wp--preset--color--accent-3, #1d3863);
}

.hamburger-toggle .hamburger-lines {
  position: relative;
  width: 25px;
  height: 14px;
}

.hamburger-toggle .hamburger-lines span {
  display: block;
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: #ffffff;
  transform-origin: center;
}

.hamburger-toggle .hamburger-lines span {
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

.hamburger-toggle .hamburger-lines span:nth-child(1) {
  top: 0;
}

.hamburger-toggle .hamburger-lines span:nth-child(2) {
  top: 6px;
}

.hamburger-toggle .hamburger-lines span:nth-child(3) {
  top: 12px;
}

.hamburger-toggle.active .hamburger-lines span:nth-child(1) {
  transform: translate(0, 6px) rotate(45deg);
}

.hamburger-toggle.active .hamburger-lines span:nth-child(2) {
  opacity: 0;
}

.hamburger-toggle.active .hamburger-lines span:nth-child(3) {
  transform: translate(0, -6px) rotate(-45deg);
}

.menu-text {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.offcanvas-menu {
  position: fixed;
  top: 0;
  right: -100%; /* Changed from -300px to -100% */
  width: 400px;
  height: 100vh;
  background-color: var(--wp--preset--color--accent-2, #19458c);
  transition: 0.3s ease;
  z-index: 9999;
  box-shadow: -2px 0 5px rgba(0,0,0,0.5);
  visibility: hidden; /* Added to prevent flash */
  overflow-y: auto;
}

.offcanvas-menu.active {
  right: 0;
  visibility: visible;
}

.offcanvas-menu-inner {
  padding: 20px;
}

body.offcanvas-active {
  overflow: hidden;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .offcanvas-menu {
      width: 100%;
      right: -100%;
  }
}

/* Keep wp-block-srh-offcanvas-menu aligned right at all viewport sizes */
.wp-block-srh-offcanvas-menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

/* Ensure it stays right-aligned when offcanvas is open */
@media (min-width: 1241px) {
  body.offcanvas-open .wp-block-srh-offcanvas-menu {
    position: relative;
    margin-left: auto;
  }
}



/***********************************************************
############## Offcanvas Care Options ######################
************************************************************/

.offcanvas-content {
  padding-left: 0px;
  padding-right: 0px;
}

.offcanvas-top-spacer {
  display: none;
}

@media (min-width: 1500px) {
  .offcanvas-top-spacer {
    display: block;
    height: 60px;
  }
}

.offcanvas-header {
  padding-top: 30px;
}

.offcanvas-content h2,
.offcanvas-content h3 {
  color: var(--wp--preset--color--base) !important;
}

.offcanvas-header h3 {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  line-height: 1.2;
}

.offcanvas-content .wp-block-social-links {
  --wp--preset--color--primary: var(--wp--preset--color--base);
}

.offcanvas-content .wp-block-social-links .wp-block-social-link a,
.offcanvas-content .wp-block-social-links .wp-block-social-link svg {
  color: var(--wp--preset--color--base) !important;
  fill: var(--wp--preset--color--base) !important;
}

.offcanvas-navigation {
  padding: 30px 30px 20px 30px;
}

.offcanvas-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}

.offcanvas-nav-list li {
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
}

.offcanvas-nav-list li a {
  color: var(--wp--preset--color--base) !important;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.offcanvas-nav-list li a:hover {
  color: var(--wp--preset--color--accent-3) !important;
}

.offcanvas-navigation .wp-block-separator {
  margin: 20px 0 !important;
  opacity: 0.3;
}

.offcanvas-footer {
  padding: 15px 30px 10px 30px;
}

.offcanvas-care-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--40);
  border-radius: 15px;
  overflow: hidden;
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--accent-1);
}

.offcanvas-care-options .wp-block-separator {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin: 0 !important;
  border-top: none !important;
  border-top-width: 0 !important;
}

.offcanvas-care-option {
  position: relative;
  margin: 0;
  padding: 5px 10px 10px 10px;
  border-bottom: 1px solid var(--wp--preset--color--accent-1);
  width: 100%;
}

.offcanvas-care-option:last-child {
  border-bottom: none;
}

.offcanvas-care-option .care-link-wrapper {
  margin: 0;
  padding: 0;
}

.offcanvas-care-option .care-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: var(--wp--preset--spacing--30);
  text-decoration: none;
  color: var(--wp--preset--color--accent-2);
  background: transparent;
  transition: all 0.6s ease-out;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  margin: 0;
  min-height: 60px;
  background-image: none !important;
  background-size: 0 !important;
  padding-bottom: var(--wp--preset--spacing--30) !important;
}

.offcanvas-care-option .care-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
  border-radius: 0;
  z-index: 1;
}

.offcanvas-care-option .care-link:hover::before {
  width: 100%;
  height: 100%;
}

.offcanvas-care-option .care-link > * {
  position: relative;
  z-index: 2;
}

/* Care icon sizing — applies to both <img> and inline <svg> */
.offcanvas-care-option .care-icon,
.offcanvas-care-option img.care-icon,
.offcanvas-care-option svg.care-icon {
  width: 35px !important;
  height: 35px !important;
  display: block;
  flex-shrink: 0;
  margin-right: var(--wp--preset--spacing--30);
  margin-bottom: 0;
}

/* SVG path fill color in offcanvas — accent-2 (blue), duotone opacity preserved */
.offcanvas-care-option svg.care-icon path {
  fill: var(--wp--preset--color--accent-2) !important;
}

.offcanvas-care-option svg.care-icon {
  color: var(--wp--preset--color--accent-2) !important;
}

.offcanvas-care-option .care-icon img {
  width: 35px !important;
  height: 35px !important;
  display: block;
}

.offcanvas-care-option .wp-block-image.care-icon {
  width: 35px !important;
  height: 35px !important;
  margin: 0;
  margin-right: var(--wp--preset--spacing--30);
}

.offcanvas-care-option .care-title-row {
  display: flex !important;
  align-items: center;
  gap: 0;
  width: 100%;
}

.offcanvas-care-option .care-title-row .care-icon {
  margin-right: var(--wp--preset--spacing--30);
  margin-bottom: 0;
  flex-shrink: 0;
}

.offcanvas-care-option .care-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--wp--preset--color--accent-3) !important;
  white-space: nowrap;
  position: relative;
  padding-right: 50px;
}

.offcanvas-care-option h3.care-heading {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--wp--preset--color--accent-3) !important;
  white-space: nowrap;
  position: relative;
  padding-right: 50px;
}

.offcanvas-care-option .care-heading::after {
  content: '→';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  color: var(--wp--preset--color--accent-3);
  width: 20px;
  text-align: center;
}

.offcanvas-care-option h3.care-heading::after {
  content: '→';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  color: var(--wp--preset--color--accent-3);
  width: 20px;
  text-align: center;
}

.offcanvas-care-option:hover .care-heading::after {
  transform: translateY(-50%) translateX(5px);
}

.offcanvas-care-option:hover h3.care-heading::after {
  transform: translateY(-50%) translateX(5px);
}


/***********************************************************
#################### Image Alignment ######################
************************************************************/

/*
 * Root cause: WordPress FSE "constrained" layout (is-layout-constrained)
 * applies max-width + margin:auto to each NON-aligned child individually,
 * leaving the .wp-block-post-content container itself full-width. When an
 * image has float:left (alignleft), it floats to the far-left edge of that
 * full-width container — outside the visible content column.
 *
 * Fix: mirror the same centering offset WP applies to normal content children.
 * calc((100% - contentSize) / 2) equals the auto-margin on each side.
 * max(0px, …) clamps to zero when the viewport is narrower than contentSize
 * so nothing breaks at narrow widths.
 *
 * Note: this does NOT restore CSS float-based text-wrapping (text wrap around
 * images is not supported in FSE constrained layout — use wp:media-text or
 * wp:columns for side-by-side image+text layouts). This fix only corrects
 * the position of the image so it appears within the content column.
 */

.wp-block-post-content > .wp-block-image.alignleft {
  float: left;
  margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) !important;
  margin-inline-end: 1.5em !important;
  margin-bottom: 1em;
  max-width: 45%;
}

.wp-block-post-content > .wp-block-image.alignright {
  float: right;
  margin-inline-end: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) !important;
  margin-inline-start: 1.5em !important;
  margin-bottom: 1em;
  max-width: 45%;
}

/* Stack full-width on narrow screens — floats get too cramped.
   Applies to alignleft/alignright images at any nesting level inside
   post-content (e.g. inside columns or groups), not just direct children. */
@media (max-width: 640px) {
  .wp-block-post-content .wp-block-image.alignleft,
  .wp-block-post-content .wp-block-image.alignright {
    float: none;
    max-width: 100%;
    margin-inline: auto !important;
    margin-top: 1em;
    margin-bottom: 1em;
  }
}


/***********************************************************
######################### Footer ###########################
************************************************************/

/* 100px breathing room above the footer.
   Targeting .srh-footer (className on the outermost group block in
   patterns/footer.php) since the template-part wrapper does not reliably
   carry a data-area attribute in the rendered HTML. */
.srh-footer {
  margin-top: 100px !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

/* Touch-target sizing: ensure top-nav, offcanvas-menu, and footer links
   meet axe-core's 24×24 minimum (WCAG 2.5.8). Default line-height yielded
   ~19 px tall click targets — too tight for finger taps on mobile.
   Vertical padding grows the box without changing the visible text size.
   `!important` overrides core-block layout CSS that zeroes the padding. */
nav.wp-block-navigation a.wp-block-navigation-item__content {
  padding-top: 0.25em !important;
  padding-bottom: 0.25em !important;
}

.srh-footer h2.wp-block-heading > a,
.srh-footer ul.wp-block-list li > a,
.offcanvas-content ul.wp-block-list li > a,
.offcanvas-nav-list li > a {
  display: inline-block !important;
  padding-top: 0.1em !important;
  padding-bottom: 0.1em !important;
}

/* Align all footer columns to the top */
.srh-footer .wp-block-columns {
  align-items: flex-start;
}

/* Footer column headings are H2 for accessibility (heading hierarchy),
   but visually rendered at the smaller size to match the footer design. */
.srh-footer .wp-block-column > h2 {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 10px;
}

.srh-footer .wp-block-column > .footer-list-nav {
  margin-top: 0;
}



/***********************************************************
####################### Search ############################
************************************************************/

/* ── Offcanvas search form ───────────────────────────────── */

.srh-search-wrap {
  position: relative;
  padding: 0 30px 20px;
}

/* Light-theme variant for the `srh/inline-search` pattern — same DOM as the
   offcanvas search but styled for use on light page backgrounds (Locations
   index, etc.). Overrides only the colors / borders; layout + autocomplete
   dropdown styling are inherited from the base rules below. */
.srh-search-wrap--inline {
  padding: 0;
  max-width: 480px;
}
.srh-search-wrap--inline .srh-search-form {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
}
.srh-search-wrap--inline .srh-search-form:focus-within {
  background-color: #ffffff;
  border-color: var(--wp--preset--color--accent-2, #19458c);
}
.srh-search-wrap--inline .srh-search-input {
  color: var(--wp--preset--color--contrast, #1a1a1a);
}
.srh-search-wrap--inline .srh-search-input::placeholder {
  color: rgba(0, 0, 0, 0.45);
}
.srh-search-wrap--inline .srh-search-submit {
  border-left-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.55);
}
.srh-search-wrap--inline .srh-search-submit:hover {
  color: var(--wp--preset--color--accent-2, #19458c);
}
.srh-search-wrap--inline .srh-search-results-dropdown {
  left: 0;
  right: 0;
}

.srh-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  overflow: visible; /* allow dropdown to escape */
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.srh-search-form:focus-within {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
}

.srh-search-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
}

.srh-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* Remove the default browser search-cancel button */
.srh-search-input::-webkit-search-cancel-button {
  display: none;
}

.srh-search-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
  padding: 0;
}

.srh-search-submit:hover {
  color: #ffffff;
}

.srh-search-submit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Autocomplete dropdown ───────────────────────────────── */

.srh-search-results-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 30px;
  right: 30px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 10001;
  max-height: 360px;
  overflow-y: auto;
}

.srh-search-results-dropdown[hidden] {
  display: none;
}

.srh-search-results-dropdown .srh-suggestion {
  display: block;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--wp--preset--color--contrast, #1a1a1a);
  line-height: 1.35;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.srh-search-results-dropdown .srh-suggestion:last-child {
  border-bottom: none;
}

.srh-search-results-dropdown .srh-suggestion:hover,
.srh-search-results-dropdown .srh-suggestion.is-active {
  background-color: #eef3fb;
  color: var(--wp--preset--color--accent-2, #19458c);
  outline: none;
}

/* Highlight matched text */
.srh-search-results-dropdown .srh-suggestion mark {
  background: transparent;
  color: var(--wp--preset--color--accent-2, #19458c);
  font-weight: 700;
}

/* "No results" item */
.srh-search-results-dropdown .srh-suggestion--empty {
  color: #888;
  font-style: italic;
  cursor: default;
}

.srh-search-results-dropdown .srh-suggestion--empty:hover {
  background-color: transparent;
  color: #888;
}

/* "See all results" footer link */
.srh-search-results-dropdown .srh-suggestion--all {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: none;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  padding-right: 16px;
}

/* Anchor inside the "See all results" li — explicit color since theme/WP
   link rules can override the <li>'s inherited color in the offcanvas. */
.srh-search-results-dropdown .srh-suggestion--all a {
  color: var(--wp--preset--color--accent-3, #1d3863);
  text-decoration: none;
}

.srh-search-results-dropdown .srh-suggestion--all:hover,
.srh-search-results-dropdown .srh-suggestion--all.is-active {
  background-color: #f0f7ff;
}

.srh-search-results-dropdown .srh-suggestion--all:hover a,
.srh-search-results-dropdown .srh-suggestion--all.is-active a {
  color: var(--wp--preset--color--accent-2, #19458c);
}

/* ── Search results page ─────────────────────────────────── */

.srh-search-results {
  padding-top: 2rem;
}

/* Query title "Search results for …" */
.srh-search-results .wp-block-query-title {
  font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem);
  font-weight: 700;
  color: var(--wp--preset--color--accent-2, #19458c);
  margin-bottom: 1.5rem;
}

/* Individual result cards */
.srh-search-result-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.srh-search-result-list > .wp-block-group:last-child .srh-search-result-item,
.srh-search-result-item:last-child {
  border-bottom: none;
}

/* Result title */
.srh-search-result-item .wp-block-post-title {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.35rem !important;
  color: var(--wp--preset--color--accent-2, #19458c) !important;
}

.srh-search-result-item .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.srh-search-result-item .wp-block-post-title a:hover {
  color: var(--wp--preset--color--accent-3, #005b95);
  text-decoration: underline;
}

/* Excerpt */
.srh-search-result-item .wp-block-post-excerpt {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.srh-search-result-item .wp-block-post-excerpt__excerpt {
  margin: 0;
}

/* News query loop — date (in parens) flows inline before the excerpt */
.srh-news-item .wp-block-post-date,
.srh-news-item .wp-block-post-excerpt,
.srh-news-item .wp-block-post-excerpt p {
  display: inline;
  margin: 0;
  padding: 0;
}
.srh-news-item .wp-block-post-date {
  margin-right: 0.4em;
}

/* Featured 2-up at top of /news/. WP renders the post-template grid via
   an auto-generated `wp-container-*` class with high specificity; mobile
   override uses `!important` to collapse to one card per row. */
.srh-news-featured {
  margin-bottom: 1rem;
}
.srh-news-featured .wp-block-post-template {
  gap: 1.5rem;
}
.srh-news-featured .wp-block-post {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
}
/* Make the info-card fill the grid cell so the two cards in the
   featured 2-up stay the same height regardless of image aspect
   variance or excerpt length. The button stays bottom-anchored via
   the existing `margin-top: auto` on its row. */
.srh-news-featured .info-card-v {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.srh-news-featured .info-card-v .info-card-v__content {
  flex: 1 1 auto;
}
/* Override WP's flex `justify-content: space-between` + default
   block-gap on the card content — those are what make the title/date/
   excerpt feel spaced out. Stack from the top with tight explicit
   margins, then anchor the button to the bottom via `margin-top: auto`
   so cards with different excerpt lengths still bottom-align nicely. */
.srh-news-featured .info-card-v .info-card-v__content {
  padding: 0.75rem 1rem 1rem;
  gap: 0;
  justify-content: flex-start;
}
.srh-news-featured .info-card-v__title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 0.2rem;
}
.srh-news-featured .info-card-v__date {
  color: var(--wp--preset--color--accent-3, #1d3863);
  margin: 0 0 0.35rem;
}
.srh-news-featured .info-card-v .info-card-v__desc {
  margin: 0 0 0.75rem;
  flex: 0 0 auto;
  font-size: 0.95rem;
}
.srh-news-featured .info-card-v .info-card-v__content > .wp-block-buttons,
.srh-news-featured .info-card-v .info-card-v__content > .wp-block-group {
  margin-top: auto;
}
.srh-news-featured .wp-block-post-featured-image img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .srh-news-featured .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* Self-hosted-video transcript disclosure (core/details block emitted
   by _claude/_import-self-hosted-videos.php). Small right-aligned
   "Transcript ▾" toggle that opens to reveal the transcript prose.
   Drops the default browser triangle marker in favor of a custom
   chevron that lines up with the right-aligned label. */
.wp-block-details > summary {
  font-size: 0.85rem;
  text-align: right;
  list-style: none;
  cursor: pointer;
  margin-top: 0.5rem;
  color: var(--wp--preset--color--accent-2, #19458c);
}
.wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.wp-block-details > summary::after {
  content: "\25BE"; /* ▾ */
  margin-left: 0.35em;
  display: inline-block;
  transition: transform 0.15s ease-out;
}
.wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}

/* Query loop pagination */
.wp-block-query-pagination {
  margin-top: 2.5rem;
  gap: 0.5rem;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp--preset--color--accent-2, #19458c);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--wp--preset--color--accent-2, #19458c);
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  background-color: var(--wp--preset--color--accent-2, #19458c);
  color: #ffffff;
}

.wp-block-query-pagination-numbers .page-numbers.current {
  background-color: var(--wp--preset--color--accent-2, #19458c);
  color: #ffffff;
}

/* Responsive: tighten up the dropdown on very narrow offcanvas */
@media (max-width: 480px) {
  .srh-search-results-dropdown {
    left: 0;
    right: 0;
  }
}


/***********************************************************
####################### Info Cards ########################
************************************************************/

/* Card column — flex column so button pins to the bottom.
   .wp-block-column.info-card (two classes on same element) gives
   specificity (0,2,0), beating WP core's single-class selectors. */
.wp-block-column.info-card {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--base, #ffffff);
  overflow: hidden;
}

/* Image fills top edge with no margin */
.wp-block-column.info-card .wp-block-image {
  margin: 0;
  line-height: 0;
}

.wp-block-column.info-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Heading — color is handled by the block's has-accent-2-color class */
.wp-block-column.info-card .info-card__title {
  padding: 1.25rem 1.25rem 0.5rem;
  margin: 0;
}

/* Description grows to fill available space */
.wp-block-column.info-card .info-card__desc {
  padding: 0 1.25rem;
  margin: 0 0 0.75rem;
  flex: 1;
  font-size: 1.1rem;
}

/* Buttons block sits at the bottom */
.wp-block-column.info-card .wp-block-buttons {
  padding: 0 1.25rem 1.5rem;
  margin: 0;
}

/* Outline secondary button */
.wp-block-column.info-card .info-card__btn .wp-block-button__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent-2, #19458c);
  border-color: var(--wp--preset--color--accent-2, #19458c);
}

.wp-block-column.info-card .info-card__btn .wp-block-button__link:hover {
  color: var(--wp--preset--color--accent-3, #1d3863);
  border-color: var(--wp--preset--color--accent-3, #1d3863);
}

/* Columns: stretch to equal height */
.info-cards-pattern .wp-block-columns {
  align-items: stretch;
}

/* Responsive: collapse to single column on mobile */
@media (max-width: 600px) {
  .info-cards-pattern .wp-block-columns {
    flex-direction: column;
  }
}


/***********************************************************
################### Info Cards Vertical ###################
************************************************************/

/* Outer columns: stretch each column to the row's tallest card so cards in
   the same row have equal height even when their titles differ in line count.
   Buttons stay anchored at the bottom because info-card-v__content uses
   `justifyContent: space-between` in its block layout. */
.info-cards-vertical-pattern .wp-block-columns {
  align-items: stretch;
}

.info-cards-vertical-pattern .wp-block-column {
  display: flex;
  flex-direction: column;
}

.info-cards-vertical-pattern .wp-block-column > .info-card-v {
  flex: 1;
}

/* Card row */
.info-card-v {
  background: var(--wp--preset--color--base, #ffffff);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.info-card-v:last-child {
  margin-bottom: 0;
}

/* Left image: fixed width, stretches full card height */
.info-card-v > .wp-block-image {
  flex: 0 0 38%;
  width: 38%;
  margin: 0;
  line-height: 0;
  align-self: stretch;
}

.info-card-v > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right content area */
.info-card-v .info-card-v__content {
  flex: 1;
  padding: 1.25rem;
  min-width: 0;
  align-items: stretch;
}

.info-card-v .info-card-v__title {
  margin: 0 0 0.5rem;
}

.info-card-v .info-card-v__desc {
  margin: 0 0 0.75rem;
  flex: 1;
  font-size: 1.1rem;
}

/* Outline secondary button — mirrors info-card */
.info-card-v .info-card-v__btn .wp-block-button__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent-2, #19458c);
  border-color: var(--wp--preset--color--accent-2, #19458c);
}

.info-card-v .info-card-v__btn .wp-block-button__link:hover {
  color: var(--wp--preset--color--accent-3, #1d3863);
  border-color: var(--wp--preset--color--accent-3, #1d3863);
}

/* Top-image variant: image spans full width above content */
.info-card-v--top-img > .wp-block-image {
  flex: none;
  width: 100%;
}

/* Mobile: image narrows slightly */
@media (max-width: 600px) {
  .info-cards-vertical-pattern .wp-block-columns {
    flex-direction: column;
  }

  .info-card-v:not(.info-card-v--top-img) > .wp-block-image {
    flex: 0 0 32%;
    width: 32%;
  }

  /* Card buttons stack vertically on mobile so the Learn More / Call /
     Schedule trio doesn't wrap mid-button at narrow card widths. */
  .info-card-v .info-card-v__content .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .info-card-v .info-card-v__content .wp-block-buttons .wp-block-button {
    width: 100%;
  }

  /* Location-page contact-block buttons (Schedule / Call / Directions) stack
     vertically on mobile at 75% width so they read as a tight column rather
     than wrapping mid-button at the narrow viewport. */
  .srh-location-contact .wp-block-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
  .srh-location-contact .wp-block-buttons .wp-block-button {
    width: 75%;
  }
}


/***********************************************************
#################### Notification Banner ###################
************************************************************/

/* Banner sits below the fixed header. JS sets margin-top precisely from the
   header's actual rendered height; the CSS value is a pre-JS-run fallback only. */
.srh-banner {
  width: 100%;
  padding: 1.25rem 3rem 1rem;
  box-sizing: border-box;
  /* Track the measured header height set on <body> by auto-hide-nav.js
     (`--header-height`). 160px fallback covers the breadcrumb-extended
     header in case JS hasn't run yet — the older 120px fallback was
     sized for the pre-breadcrumb header and would let the breadcrumb-
     row overlay the banner on first paint. JS still re-applies a more
     precise marginTop on DOMContentLoaded / window.load. */
  margin-top: var(--header-height, 160px);
}

body.has-srh-banner main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.srh-banner {
  margin-bottom: 0;
}

/* Type variants */
.srh-banner--info {
  background-color: var(--wp--preset--color--accent-5, #dbe3e2);
  color: var(--wp--preset--color--contrast, #333333);
}

.srh-banner--warning {
  background-color: var(--wp--preset--color--accent-8, #d9b48f);
  color: var(--wp--preset--color--contrast, #333333);
}

.srh-banner--urgent {
  background-color: var(--wp--preset--color--accent-9, #870000);
  color: var(--wp--preset--color--base, #ffffff);
}

/* Inner layout */
.srh-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.srh-banner__message {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.4;
  text-align: center;
  flex: 1;
}

.srh-banner__message i[class*="fa-"] {
  font-size: 2rem;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .srh-banner__message {
    font-size: 0.95rem;
  }
}

/* Close button */
.srh-banner__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.25rem;
  opacity: 0.8;
  color: inherit;
  transition: opacity 0.2s ease;
}

.srh-banner__close:hover {
  opacity: 1;
}


/***********************************************************
################# Latest Posts #############################
************************************************************/

.wp-block-latest-posts__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wp-block-latest-posts__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--wp--preset--color--accent-6);
  padding: var(--wp--preset--spacing--20) 0;
}

.wp-block-latest-posts__list li:first-child {
  border-top: 1px solid var(--wp--preset--color--accent-6);
}

.wp-block-latest-posts__list li a {
  text-decoration: none;
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--accent-2);
  transition: color 0.2s ease;
  flex: 1 1 auto;
}

.wp-block-latest-posts__list li a:hover {
  color: var(--wp--preset--color--accent-1);
}

.wp-block-latest-posts__post-date {
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--accent-4);
  flex: 0 0 auto;
  white-space: nowrap;
}

/***********************************************************
################# Related Pages ############################
************************************************************/

.related-pages__heading {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  margin-bottom: var(--wp--preset--spacing--30);
}

.related-pages__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-pages__item {
  border-bottom: 1px solid var(--wp--preset--color--accent-6);
  padding: var(--wp--preset--spacing--20) 0;
}

.related-pages__item:first-child {
  border-top: 1px solid var(--wp--preset--color--accent-6);
}

.related-pages__item a {
  text-decoration: none;
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--accent-2);
  transition: color 0.2s ease;
}

.related-pages__item a:hover {
  color: var(--wp--preset--color--accent-1);
}

.related-pages__sublist {
  list-style: "– ";
  padding: 0;
  margin: 0;
  padding-left: var(--wp--preset--spacing--50);
}

.related-pages__sublist .related-pages__item {
  border-top: none;
  border-bottom: none;
}

/* Belt-and-suspenders for inc/a11y/reduced-motion.php — that JS strips AWB
   data attrs before the plugin injects its <video>, but if anything slipped
   through (or the JS hasn't run yet), hide the video so the still fallback
   image is what renders. */
@media (prefers-reduced-motion: reduce) {
  .nk-awb-wrap video {
    display: none !important;
  }
}

/* Bump interior padding on the button-inside search block (the styled one
   used on /locations/ etc. — 2px blue border, rounded). WP core default is
   4px which feels cramped against the larger border-radius and 2px border. */
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  padding: 8px;
}

/* Inline images inside button links default to vertical-align: baseline,
   which leaves them sitting on top of the text + icon. Center them with
   the surrounding line so the MyChart logo on /locations/ Provider Finder
   button (and any similar inline-image button) reads as aligned. */
.wp-block-button__link img {
  vertical-align: middle;
}

/* Carousel meta line — flatten post-date and post-excerpt blocks (each of
   which renders as a block-level <div>) into a single inline run so it
   reads as `( May 4, 2026 ) — Excerpt text…`. Em-dash separator via ::after
   on the date avoids needing an extra paragraph block in the pattern. */
.srh-carousel-meta .wp-block-post-date,
.srh-carousel-meta .wp-block-post-excerpt,
.srh-carousel-meta .wp-block-post-excerpt__excerpt {
  display: inline;
  margin: 0;
}
.srh-carousel-meta .wp-block-post-date::after {
  content: " — ";
}

/* Featured news carousel — pattern at patterns/carousel.php emits 6 posts
   as info-card-v cards (image-on-top variant). The carousel wrapper is
   `alignwide` (1280px), with the 2 fully-visible cards pinned to the
   centered 1100px content zone. Adjacent slides peek into the wide-overflow
   strips on each side (≈90px on desktop) and fade to transparent via the
   mask gradient. JS in the pattern clones the last/first slides at the
   edges and teleports scrollLeft when it lands in clone territory, so the
   loop is symmetric and infinite in both directions.
   `--srh-fade` is the width of each wide-overflow strip (half of the
   1280-1100=180px difference, clamped to 0.5rem on narrow viewports),
   shared by track padding + mask + arrow positioning. */
.srh-featured-carousel {
  position: relative;
  /* `--srh-pair` = combined width of the 2 fully-visible cards + their
     gap. Slightly narrower than the 1100px content zone so each side has
     a sliver-width gutter for the edge of post 6 (left) and post 3 (right)
     to show through. `--srh-pad` derives from it and positions cards 1+2
     centered inside the alignwide container. `--srh-mask` is a much
     smaller gradient fade that softens just the outermost edge — the
     sliver itself stays mostly visible so it reads as "edge of a card,"
     not as a ghost. */
  --srh-pair: 1000px;
  --srh-pad: max(0.5rem, calc((100% - var(--srh-pair)) / 2));
  --srh-mask: 150px;
  /* Legacy alias retained because arrow positioning + a few other rules
     reference `--srh-fade`; keep it equal to `--srh-pad` so existing
     `calc(var(--srh-fade) / 2 - 1.25rem)` arrow math still places the
     arrows mid-sliver on each side. */
  --srh-fade: var(--srh-pad);
}
.srh-featured-carousel .srh-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  /* `proximity` instead of `mandatory` — mandatory was overriding our
     JS-set initial scrollLeft and snapping it one slide step short of
     the intended position (post-6+post-1 instead of post-1+post-2).
     Proximity still snaps the user's swipes / arrow-clicks to slide
     boundaries when scroll comes to rest near one, but doesn't fight
     with deliberate JS scroll positioning. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  /* Pad both sides so cards 1+2 sit centered inside the alignwide
     container; the gutters on either side become visible "sliver" zones
     where adjacent cards peek through (post 6 on the left, post 3 on
     the right). */
  padding: 0.5rem var(--srh-pad);
  /* CRITICAL: with `scroll-snap-type: mandatory`, the browser will only
     allow scroll positions where a slide's start aligns with the snap-area
     start. Without `scroll-padding`, snap-area-start = viewport-left, so
     the browser would snap real-0 flush with viewport-left and squash the
     left sliver/peek. Setting scroll-padding-inline shifts the snap-area
     in to match our visual layout — slide-start aligns with viewport-left
     + var(--srh-pad), which is exactly where card 1's left edge sits. */
  scroll-padding-inline: var(--srh-pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Soft edges only — fade just the outermost ~30px of the track on each
     side so the slivers stay clearly visible (reading as a true card edge)
     while still avoiding a hard cut at the alignwide boundary. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--srh-mask), #000 calc(100% - var(--srh-mask)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--srh-mask), #000 calc(100% - var(--srh-mask)), transparent 100%);
}
.srh-featured-carousel .srh-carousel-track::-webkit-scrollbar {
  display: none;
}
/* WP's post-template renders as a <ul> with each post as <li class="wp-block-post">
   — the <li> is the actual flex item. Pin slide width to half of the
   1100px content zone (capped to container width on narrow viewports) so
   exactly 2 cards fit in the visible center at every breakpoint. */
.srh-featured-carousel .srh-carousel-track > .wp-block-post {
  flex: 0 0 calc((min(100%, var(--srh-pair)) - 1rem) / 2);
  scroll-snap-align: start;
  margin: 0;
  list-style: none;
  min-width: 0;
}
.srh-featured-carousel .srh-carousel-slide {
  height: 100%;
  width: 100%;
}
@media (max-width: 767px) {
  /* Phone mobile: one card per view, native swipe to advance. The mask
     fade drops (a fade across the visible card looks weird) and arrows
     are hidden since swipe is the canonical control on a small screen. */
  .srh-featured-carousel {
    --srh-pad: 0.5rem;
    --srh-mask: 0px;
  }
  .srh-featured-carousel .srh-carousel-track {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .srh-featured-carousel .srh-carousel-track > .wp-block-post {
    flex: 0 0 100%;
  }
  .srh-featured-carousel .srh-carousel-arrow {
    display: none;
  }
}

/* Arrows — each centered inside its wide-overflow strip so they lay on
   top of the fading peek cards. Width 2.5rem ÷ 2 = 1.25rem half; subtract
   that from `--srh-fade / 2` to land the arrow's center mid-peek. On
   narrow viewports `--srh-fade` clamps to 0.5rem and arrows tuck flush
   to the edge. Z-index above the track so they're always tappable. */
.srh-featured-carousel .srh-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.15s, opacity 0.15s;
  /* Zero out WP's auto-applied block-gap on flow-layout siblings — the
     prev arrow is the first child and has 0 margin-block-start, but the
     next arrow follows the wp:query block and would otherwise inherit
     the ~24px block-gap, which on an absolute-positioned element with
     `top: 50%` translates to a visible vertical offset. */
  margin-block: 0;
}
/* The -10px nudge that previously lived in `margin-left/-right` is folded
   into these calcs and clamped to a 0px floor so the arrow can never land
   at a negative position. The negative-margin form was bleeding ~2px past
   the viewport edge between 768-1099px where `--srh-fade` clamps to its
   minimum, which caused the whole page to gain a sliver of horizontal
   scroll. */
.srh-featured-carousel .srh-carousel-arrow--prev {
  left: max(0px, calc(var(--srh-fade) / 2 - 1.25rem - 10px));
}
.srh-featured-carousel .srh-carousel-arrow--next {
  right: max(0px, calc(var(--srh-fade) / 2 - 1.25rem - 10px));
}
.srh-featured-carousel .srh-carousel-arrow:hover:not(:disabled) {
  background: var(--wp--preset--color--accent-3, #1d3863);
}
.srh-featured-carousel .srh-carousel-arrow:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #19458c);
  outline-offset: 2px;
}
/* The track is focusable (tabindex=0 set by the carousel JS) so users can
   tab to it and use Left/Right arrow keys for slide-step nav. Make sure
   that focus state has a visible indicator. */
.srh-featured-carousel .srh-carousel-track:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #19458c);
  outline-offset: 4px;
  border-radius: 4px;
}
.srh-featured-carousel .srh-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Tightened spacing for carousel cards only — the static info-card-v cards
   on the locations pages keep the existing 1.25rem / 0.5rem / 0.75rem rhythm.
   These overrides shrink: image→title (content padding-top), title→excerpt
   (title margin-bottom), and excerpt→button (excerpt margin-bottom). */
.srh-carousel-slide.info-card-v .info-card-v__content {
  padding: 0.2rem 1rem 1.25rem;
  gap: 0.15rem;
}
.srh-carousel-slide.info-card-v .info-card-v__title {
  margin: 0;
}
.srh-carousel-slide.info-card-v .info-card-v__desc {
  margin: 0;
}
/* Bump just the gap above the button (excerpt → button), without affecting
   the tight title → excerpt gap controlled by `gap` above. */
.srh-carousel-slide.info-card-v .info-card-v__content > .is-style-outline--2 {
  margin-top: 0.6rem;
}

/* Phone mobile: bump card content padding so the title and excerpt aren't
   tight against the card edge at full-width single-card. Declared AFTER
   the global `.srh-carousel-slide.info-card-v .info-card-v__content` rule
   above so the cascade wins on mobile (same specificity, later in source). */
@media (max-width: 767px) {
  .srh-carousel-slide.info-card-v .info-card-v__content {
    padding: 0.5rem 2.5rem 1rem;
  }
}

/* Carousel slides use the `.info-card-v--top-img` variant (image on top,
   content below — matching the location-page cards). The existing
   --top-img rule only targets `.wp-block-image`; extend it to also handle
   the dynamic `.wp-block-post-featured-image` that wp:post-featured-image
   renders. */
.info-card-v--top-img > .wp-block-post-featured-image {
  flex: none;
  width: 100%;
  margin: 0;
  line-height: 0;
}
.info-card-v--top-img > .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* `is-style-outline--2` — accent-2 outline button variant for the
   featured-news carousel. WP core's `is-style-outline` CSS is only
   inlined when a real wp:button block is on the page, so for cases that
   wrap a read-more (or any other anchor) we declare the visual here
   against the theme.json button defaults (which would otherwise paint
   a solid accent-2 fill). The trailing external-link icon is a
   duotone-medium fa-arrow-up-right-from-square, embedded as an inline-SVG
   mask so it picks up `currentColor` and re-tints with the link's color
   (including the hover transition). Secondary path at 40% opacity for
   the duotone effect.

   IMPORTANT: scoped to specific opted-in containers because WordPress's
   block-supports system *also* auto-generates `is-style-outline--N`
   suffix classes on buttons with per-block style overrides (the
   /locations Provider Finder button is rendered as `is-style-outline
   is-style-outline--2` by WP). Without these container prefixes the
   `transparent !important` background below would strip the inline
   white background off any unrelated `--2`-suffixed button on the site.
   Opt-in containers: `.srh-featured-carousel` (home featured carousel),
   `.srh-news-featured` (2-up featured cards at top of /news/). */
.srh-featured-carousel .is-style-outline--2,
.srh-news-featured .is-style-outline--2 {
  display: inline-block;
  align-self: flex-start;
}
.srh-featured-carousel .is-style-outline--2 > .wp-block-button__link,
.srh-featured-carousel .is-style-outline--2 > .wp-block-read-more,
.srh-news-featured .is-style-outline--2 > .wp-block-button__link,
.srh-news-featured .is-style-outline--2 > .wp-block-read-more {
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid var(--wp--preset--color--accent-2, #19458c) !important;
  color: var(--wp--preset--color--accent-2, #19458c) !important;
  padding: 0.45em 1.1em;
  font-size: 0.875rem !important;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.srh-featured-carousel .is-style-outline--2 > .wp-block-button__link:hover,
.srh-featured-carousel .is-style-outline--2 > .wp-block-read-more:hover,
.srh-news-featured .is-style-outline--2 > .wp-block-button__link:hover,
.srh-news-featured .is-style-outline--2 > .wp-block-read-more:hover {
  color: var(--wp--preset--color--accent-3, #1d3863) !important;
  border-color: var(--wp--preset--color--accent-3, #1d3863) !important;
}
.srh-featured-carousel .is-style-outline--2 > .wp-block-button__link::after,
.srh-featured-carousel .is-style-outline--2 > .wp-block-read-more::after,
.srh-news-featured .is-style-outline--2 > .wp-block-button__link::after,
.srh-news-featured .is-style-outline--2 > .wp-block-read-more::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path opacity='.4' d='M80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z' fill='black'/><path d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352z' fill='black'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path opacity='.4' d='M80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z' fill='black'/><path d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352z' fill='black'/></svg>") center / contain no-repeat;
}

/***********************************************************
##################### Accolades Carousel ###################
************************************************************/

/* SRH accreditations / certifications / recognitions carousel. 29
   cards rendered once; users navigate via prev / next arrow buttons
   (or keyboard arrow keys when the track has focus). The visible
   marquee is sized to fit exactly 3 cards, centered inside the
   alignfull off-base band; arrows step the scroll one card at a time
   and disable at the ends.

   - Cards: fixed 240px width on desktop, 200px below 768px (so the
     icon + title + 3-line description don't get cramped).
   - Visible region: `3 × card-width + 2 × gap`, centered in the band.
     `scroll-snap-type: x mandatory` so each scroll lands on a card
     boundary regardless of arbitrary user scroll positions. */

.srh-accolades {
  --srh-accolades-card-width: 240px;
  --srh-accolades-gap: 1.5rem;
  --srh-accolades-bg: var(--wp--preset--color--off-base, #f1f1f1);
  background-color: var(--srh-accolades-bg);
  padding-block: 3rem;
  border-radius: 12px;
  /* Flex row: prev arrow + visible 3-card marquee + next arrow, all
     centered. The alignwide wrapper sits inside the page's wide content
     zone so we don't need to override `has-global-padding` here. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.srh-accolades-marquee {
  position: relative;
  /* Stretch to fill the alignwide row inside the flex container — the
     cards below flex to one-third of this width so exactly 3 are
     visible at any viewport size. */
  flex: 1 1 0;
  min-width: 0;
}

.srh-accolades-track {
  display: flex;
  gap: var(--srh-accolades-gap);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  /* The track itself is the scroll container — view.js calls
     `track.scrollBy()` so the overflow must live here, not on a
     parent wrapper. */
  overflow-x: auto;
  width: 100%;
  /* Proximity, not mandatory — mandatory snap fights `scrollBy` mid-
     animation and the smooth scroll never lands on the next card. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.srh-accolades-track::-webkit-scrollbar { display: none; }

.srh-accolades-track:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #19458c);
  outline-offset: 4px;
  border-radius: 4px;
}

.srh-accolade {
  /* Three cards visible at once — flex each to (track width - 2 gaps) / 3.
     `box-sizing: border-box` is critical: <li> defaults to content-box,
     which would make the card's actual width = basis + padding, blowing
     past the calc and clipping the third card on the right. */
  box-sizing: border-box;
  flex: 0 0 calc((100% - 2 * var(--srh-accolades-gap)) / 3);
  min-width: 0;
  scroll-snap-align: start;
  list-style: none;
  margin: 0;
  padding: 1.25rem 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  /* Default `align-items: stretch` so block children (title, desc) fill
     the card width and wrap inside it. Icon is centered explicitly with
     `align-self` below. */
  text-align: center;
  min-height: 280px;
  overflow: hidden;
}

.srh-accolade__icon {
  width: 144px;
  height: 144px;
  object-fit: contain;
  margin-bottom: 0.75rem;
  flex: none;
  align-self: center;
}

.srh-accolade__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wp--preset--color--accent-2, #19458c);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

.srh-accolade__desc {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--wp--preset--color--accent-4, #1c2a40);
  margin: 0;
}

/* Arrows — same shape as the featured-news carousel; they sit on
   either side of the visible 3-card row. */
.srh-accolades-arrow {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.15s, opacity 0.15s;
  margin: 0;
}
.srh-accolades-arrow:hover:not(:disabled) {
  background: var(--wp--preset--color--accent-3, #1d3863);
}
.srh-accolades-arrow:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2, #19458c);
  outline-offset: 2px;
}
.srh-accolades-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .srh-accolades {
    --srh-accolades-gap: 0.75rem;
    padding-block: 2rem;
    padding-inline: 0.5rem;
    gap: 0.5rem;
  }
  /* One card per view; the marquee flex-shrinks around the visible
     arrow buttons so the card lands at viewport minus arrows + gaps. */
  .srh-accolade {
    flex: 0 0 100%;
    padding: 1rem 0.75rem;
    min-height: 240px;
  }
  .srh-accolade__icon {
    width: 110px;
    height: 110px;
  }
  /* Smaller arrows on mobile so they don't crowd the card. */
  .srh-accolades-arrow {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
  }
  .srh-accolades-arrow svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------------------------------------------------------------------------
   Locations finder (templates/page-locations-demo.html)
   --------------------------------------------------------------------------- */

.srh-locations-finder {
  --srh-loc-border: #d8dee5;
  --srh-loc-muted: #5a6b80;
  --srh-loc-bg-soft: #f5f7fa;
}

/* Page H1 at the top of the sidebar. Padded + border-bottom matches the
   right-column toolbar so the dividing line reads as one continuous rule
   across the full layout, and the controls box below it starts on the
   same horizontal as the list/map area on the right. */
.srh-locations-title {
  margin: 0 0 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--srh-loc-border);
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  color: var(--wp--preset--color--accent-2, #19458c);
  line-height: 1.1;
  display: flex;
  align-items: center;
  /* Match the toolbar's tallest child (the search pill) — measured as
     ~38px content (input text + padding + 2px borders top & bottom).
     Identical padding + identical content min-height makes the two
     columns' bottom borders land on the same pixel row. */
  min-height: 2.375rem;
}

/* Keyword search — now lives inside the toolbar next to the view toggle.
   Flexes to fill available toolbar width; pill border preserved. */
.srh-locations-search {
  display: flex;
  gap: 0;
  flex: 1 1 280px;
  max-width: 480px;
  margin: 0;
  border: 2px solid var(--wp--preset--color--accent-2, #19458c);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.srh-locations-search__input {
  flex: 1;
  border: 0;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  background: transparent;
  outline: none;
}
.srh-locations-search__submit {
  border: 0;
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff;
  padding: 0 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}
.srh-locations-search__submit:hover {
  background: var(--wp--preset--color--accent-3, #1d3863);
}

/* Two-column layout ------------------------------------------------------- */

.srh-locations-layout {
  gap: 2rem;
}

.srh-locations-sidebar {
  display: flex;
  flex-direction: column;
  /* No gap — the H1 carries its own margin-bottom to match the toolbar's
     bottom margin, so the controls box sits flush with the right-column
     list/map area below their shared divider line. */
  gap: 0;
  position: sticky;
  top: 180px;
  align-self: flex-start;
  /* When all three filter accordions are open the sidebar can exceed
     `viewport - 180px`. Cap its height to the visible region below the
     sticky offset and let it scroll internally so the bottom of the
     last filter and the Clear Filters button stay reachable. */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  /* Subtle inset shadow at the bottom edge so users get a "more below"
     cue when the sidebar is overflowing. */
  scrollbar-width: thin;
}

/* Combined control box — one outer border around area + filters with a
   thin internal divider between them. Replaces the two-box layout. */
.srh-locations-controls {
  background: var(--srh-loc-bg-soft);
  border: 1px solid var(--srh-loc-border);
  border-radius: 10px;
  padding: 1.25rem;
  /* Override WP's default block-gap (`--wp--style--block-gap`, usually
     24px) which would stack on top of the H1's bottom margin. Margins
     don't collapse in our flex-column sidebar, so the doubled margins
     pushed the box ~24px below the right column's first card. The H1's
     own margin-bottom owns the vertical gap. */
  margin-top: 0;
}
.srh-locations-controls .srh-locations-area + .srh-locations-filters {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--srh-loc-border);
}

.srh-locations-area__title,
.srh-locations-filters__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wp--preset--color--accent-2, #19458c);
}
.srh-locations-area__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--srh-loc-muted);
}
.srh-locations-area__form .srh-locations-area__radius {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.srh-locations-area__form select {
  border: 1px solid var(--srh-loc-border);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  background: #fff;
}
/* Zip + GO as an inline pill, matching the keyword-search pattern. The
   input flexes to fill the row; the button sits attached to its right
   edge with no internal gap. */
.srh-locations-area__zip {
  display: flex;
  flex: 1 1 100%;
  border: 1px solid var(--srh-loc-border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.srh-locations-area__zip input[type="text"] {
  flex: 1;
  border: 0;
  padding: 0.4rem 0.85rem;
  font: inherit;
  background: transparent;
  outline: none;
  min-width: 0;
}
.srh-locations-area__zip button {
  border: 0;
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff;
  padding: 0 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}
.srh-locations-area__zip button:hover {
  background: var(--wp--preset--color--accent-3, #1d3863);
}
/* "Use my current location" — inline icon button at the end of the zip
   pill (was a separate text link below the form). Visually paired with
   the GO button but slightly lighter (accent-3 vs accent-2) so the two
   actions read as distinct. The ⌖ glyph mirrors the Map View toggle. */
.srh-locations-area__zip .srh-locations-area__current {
  background: var(--wp--preset--color--accent-3, #1d3863);
  padding: 0 0.85rem;
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Thin separator from the GO button to its left. */
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.srh-locations-area__zip .srh-locations-area__current:hover {
  background: var(--wp--preset--color--accent-2, #19458c);
}
.srh-locations-area__zip .srh-locations-area__current > [aria-hidden] {
  /* Optical centering for the tall ⌖ glyph. View-toggle uses -3px on a
     larger font; this pill button has a smaller line-box, so -2px sits
     it cleaner. */
  transform: translateY(-2px);
}

.srh-locations-filter {
  border-top: 1px solid var(--srh-loc-border);
  padding: 0.75rem 0;
}
.srh-locations-filter:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.srh-locations-filter > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--wp--preset--color--accent-2, #19458c);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.srh-locations-filter > summary::-webkit-details-marker { display: none; }
.srh-locations-filter > summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}
.srh-locations-filter[open] > summary::after { content: "−"; }
.srh-locations-filter__body {
  padding: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--srh-loc-muted);
}
.srh-locations-filter__empty {
  margin: 0;
  font-style: italic;
}

/* Region filter (srh/region-filter block) -------------------------------- */

.srh-locations-region-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.srh-locations-region-filter__list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--wp--preset--color--accent-3, #1d3863);
}
.srh-locations-region-filter__list input[type="checkbox"] {
  accent-color: var(--wp--preset--color--accent-2, #19458c);
  margin: 0;
}
.srh-locations-region-filter__count {
  color: var(--srh-loc-muted);
  font-size: 0.85rem;
}

/* Service Line filter (srh/service-line-filter block) -------------------- */

.srh-locations-service-line-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.srh-locations-service-line-filter__list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--wp--preset--color--accent-3, #1d3863);
}
.srh-locations-service-line-filter__list input[type="checkbox"] {
  accent-color: var(--wp--preset--color--accent-2, #19458c);
  margin: 0;
}
.srh-locations-service-line-filter__count {
  color: var(--srh-loc-muted);
  font-size: 0.85rem;
}

/* Location Type filter (srh/location-type-filter block) ------------------ */

.srh-locations-location-type-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.srh-locations-location-type-filter__list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--wp--preset--color--accent-3, #1d3863);
}
.srh-locations-location-type-filter__list input[type="checkbox"] {
  accent-color: var(--wp--preset--color--accent-2, #19458c);
  margin: 0;
}
.srh-locations-location-type-filter__count {
  color: var(--srh-loc-muted);
  font-size: 0.85rem;
}

.srh-locations-apply {
  margin-top: 1rem;
  width: 100%;
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0.65rem 1rem;
  font-weight: 600;
  cursor: pointer;
}
.srh-locations-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toolbar ---------------------------------------------------------------- */

.srh-locations-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--srh-loc-border);
  margin-bottom: 1.25rem;
}
.srh-locations-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.srh-locations-count {
  color: var(--srh-loc-muted);
  font-size: 0.95rem;
}
.srh-locations-view-toggle {
  display: inline-flex;
  border: 1px solid var(--srh-loc-border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.srh-locations-view-toggle__btn {
  border: 0;
  background: transparent;
  padding: 0.5rem 1.25rem;
  font: inherit;
  color: var(--srh-loc-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
}
/* The unicode glyphs (☰ / ⌖) are tall symmetrical symbols whose bounding
   box extends below the baseline; flex's `align-items: center` lines up
   their bbox center with the label's line-box center, which sits the
   visible glyph 1-3px low. Shift up so it reads as centered with the
   adjacent label text. */
.srh-locations-view-toggle__btn > [aria-hidden] {
  font-size: 1.05em;
  transform: translateY(-3px);
}
.srh-locations-view-toggle__btn.is-active {
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff;
}

/* Cards ------------------------------------------------------------------ */

.srh-locations-query .wp-block-post {
  margin: 0 0 1.25rem;
}

.srh-location-card {
  border: 1px solid var(--srh-loc-border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  /* Matches the info-card-v shadow on the original /locations/ page
     so the listing on locations-demo reads as a familiar surface. */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.srh-location-card:hover {
  border-color: var(--wp--preset--color--accent-2, #19458c);
  box-shadow: 0 8px 24px rgba(25, 69, 140, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.srh-location-card__image {
  flex: 0 0 240px;
  margin: 0;
  align-self: stretch;
}
.srh-location-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.srh-location-card__content {
  flex: 1;
  padding: 1.25rem 1.5rem;
  gap: 0.5rem;
}
.srh-location-card__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}
.srh-location-card__title a {
  color: var(--wp--preset--color--accent-2, #19458c);
  text-decoration: none;
}
.srh-location-card__title a:hover { text-decoration: underline; }
.srh-location-card__excerpt {
  margin: 0;
  font-size: 0.95rem;
  color: var(--srh-loc-muted);
  line-height: 1.5;
}
.srh-location-card__actions {
  margin-top: 0.5rem;
  gap: 0.5rem;
}
.srh-location-card__details {
  display: inline-block;
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff !important;
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
}
.srh-location-card__details:hover {
  background: var(--wp--preset--color--accent-3, #1d3863);
}

/* Per-card meta (address + phone + Get Directions) ----------------------- */

.srh-location-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.25rem 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--srh-loc-muted);
}
.srh-location-meta__address {
  font-style: normal;
  margin: 0;
}
.srh-location-meta__street {
  display: inline;
}
.srh-location-meta__phone {
  margin: 0;
}
.srh-location-meta__phone a {
  color: var(--wp--preset--color--accent-2, #19458c);
  text-decoration: none;
  font-weight: 600;
}
.srh-location-meta__phone a:hover {
  text-decoration: underline;
}
.srh-location-meta__directions {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--accent-2, #19458c);
  color: var(--wp--preset--color--accent-2, #19458c);
  background: #fff;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}
.srh-location-meta__directions:hover {
  background: var(--wp--preset--color--accent-2, #19458c);
  color: #fff;
  text-decoration: none;
}

/* wpgmza info-window — atlas-novus panel-card (wpgmza_iw_type=7) plus
   the legacy modern info window. The "View Details →" link lives in
   `<div data-name="link" class="wpgmza-infowindow-link"><a></a></div>`
   (panel template) and as `.wpgmza_more_info_button` (legacy). */

.wpgmza-panel-info-window .wpgmza-infowindow-link a,
.wpgmza_more_info_button,
a.wpgmza_more_info_button {
  display: inline-block !important;
  background: var(--wp--preset--color--accent-2, #19458c) !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border: 0 !important;
  float: none !important;
}
.wpgmza-panel-info-window .wpgmza-infowindow-link a:hover,
.wpgmza_more_info_button:hover {
  background: var(--wp--preset--color--accent-3, #1d3863) !important;
  color: #fff !important;
}

/* Panel-card info window — title color matches the brand button blue,
   slightly smaller (atlas-novus default is quite large), and the
   image gets rounded corners + a subtle shadow to match the
   list-view card styling. Consistent padding across the inner stack. */
.wpgmza-panel-info-window .wpgmza-title {
  color: var(--wp--preset--color--accent-2, #19458c) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.wpgmza-panel-info-window-style-card .wpgmza-panel-info-window-style-card-inner {
  padding: 0 var(--wpgmza-component-margin) calc(var(--wpgmza-component-margin) / 2) !important;
  gap: 0.5rem;
}
/* Hide the share-location icon in the panel-card actions row. We
   leave Directions / Close where they are; the share flow is browser-
   share which doesn't fit our card workflow. */
.wpgmza-panel-info-window .wpgmza-panel-actions svg.wpgmza-share {
  display: none !important;
}
/* Close (X) icon in the info window — brand blue to match the title
   and the View Details button. */
.wpgmza-panel-info-window .wpgmza-panel-actions svg.wpgmza-clear path {
  fill: var(--wp--preset--color--accent-2, #19458c) !important;
}
/* The atlas-novus panel renders an empty <p></p> at the bottom of every
   info window (likely from the description div when the marker's
   description is short or from the wpgmza-distance-from-location div).
   Collapse empty children so the bottom padding reads correctly. */
.wpgmza-panel-info-window p:empty,
.wpgmza-panel-info-window .wpgmza-description:empty,
.wpgmza-panel-info-window .wpgmza-distance-from-location:empty,
.wpgmza-panel-info-window .wpgmza-custom-fields:empty,
.wpgmza-panel-info-window .wpgmza-rating-container:empty {
  display: none !important;
}
.wpgmza-panel-info-window .wpgmza-gallery-container {
  margin: 0 0 0.5rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.wpgmza-panel-info-window .wpgmza-marker-listing-pic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Give the panel-card more room so a small popup with image+title+address+phone+button
   doesn't need to scroll. Plugin defaults: max 30% width / 60% height of the map. */
.wpgmza_map .wpgmza-inner-stack .wpgmza-panel-info-window-style-card.wpgmza-panel-info-window-populated {
  max-width: min(420px, 90%) !important;
  max-height: 85% !important;
}

/* Map placeholder -------------------------------------------------------- */

.srh-locations-map__placeholder {
  border: 1px dashed var(--srh-loc-border);
  border-radius: 6px;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--srh-loc-muted);
  background: var(--srh-loc-bg-soft);
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 781px) {
  /* WP columns stack below 782px. Drop sticky on the sidebar and force
     full-width on both columns (overrides the inline flex-basis:30%/70%
     emitted by the template). */
  .srh-locations-layout > .wp-block-column.srh-locations-sidebar,
  .srh-locations-layout > .wp-block-column.srh-locations-main {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .srh-locations-sidebar {
    position: static;
    top: auto;
    margin-bottom: 1.5rem;
  }

  /* Inline toolbar search — fill full width on mobile and stay tappable. */
  .srh-locations-search {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .srh-locations-search__input {
    padding: 0.65rem 1rem;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
  .srh-locations-search__submit {
    padding: 0 1.25rem;
  }

  /* Area form — stack the radius row and the zip pill on mobile. */
  .srh-locations-area__form {
    flex-direction: column;
    align-items: stretch;
  }
  .srh-locations-area__form .srh-locations-area__radius {
    justify-content: space-between;
  }

  /* Toolbar — stack search, count, and view toggle on separate lines. */
  .srh-locations-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .srh-locations-toolbar__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .srh-locations-view-toggle {
    width: 100%;
  }
  .srh-locations-view-toggle__btn {
    flex: 1;
    justify-content: center;
  }

  /* Cards — image stacks above content; content uses comfortable padding. */
  .srh-location-card {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .srh-location-card__image {
    flex: 0 0 auto;
    max-height: 200px;
    width: 100%;
  }
  .srh-location-card__image img {
    height: 200px;
    object-position: center;
  }
  .srh-location-card__content {
    padding: 1rem 1.25rem;
  }
  .srh-location-card__title {
    font-size: 1.1rem;
  }
  .srh-location-card__actions {
    width: 100%;
  }
  .srh-location-card__details,
  .srh-location-meta__directions {
    flex: 1 1 auto;
    text-align: center;
  }

  /* wpgmza panel-card info-window — smaller phones still need to fit. */
  .wpgmza_map .wpgmza-inner-stack .wpgmza-panel-info-window-style-card.wpgmza-panel-info-window-populated {
    max-width: 92% !important;
    max-height: 80% !important;
  }
}

/***********************************************************
######### Epic MyChart openschedulingsimple widget #########
************************************************************
 Embedded via wp:html blocks (Urgent Care + future pages).
 Epic's widget JS injects DOM into the host <div> with
 `myc_*` class names. We wrap each placeholder in a
 .srh-epic-widget group so the editor can control padding,
 then restyle the day header + time-slot buttons to fit
 the SRH design system. */

/* Selectors are anchored on Epic's own `.myc_*` classes since those
   only exist where the widget renders — no need for a wrapper. */

/* Epic injects .myc_osSimpleWidget as the inner content container, which
   renders flush to the placeholder edge. Match the horizontal rhythm of
   the surrounding card content (heading / paragraph / buttons). */
.myc_osSimpleWidget {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.25rem;
  margin-top: 1rem;
}

/* Reserve a fixed vertical region for the Epic widget inside each card
   so cards with different slot counts (or one empty / one populated)
   don't pull the buttons-row above them up or down. Sized for the
   widget's maxed-out case: day header + ~9 slots wrapping over 2 rows
   + the .myc_osSimpleWidget padding. */
.info-card-v > [data-widget-type] {
  min-height: 14rem;
}

/* Day header — "Tuesday June 2, 2026" — push from h5 default to a
   readable size; primary brand blue (accent-2). !important guards
   against Epic's own stylesheet loading after ours. */
.myc_osSimpleWidget .myc_dayHeader {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wp--preset--color--accent-2) !important;
  letter-spacing: 0.01em;
}

/* Slot row — Epic outputs each slot as an inline anchor; flex-wrap
   so they pack neatly and reflow on narrow screens. */
.myc_osSimpleWidget .myc_slotGroup {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* Time slot button — filled accent-2 pill, white text. Slight brightness
   shift on hover/focus; cancels the global a:hover translate effect so
   the slot doesn't nudge under the cursor. */
.myc_osSimpleWidget .myc_slot.myc_timeSlot {
  display: inline-block !important;
  padding: 0 1rem !important;
  min-width: 5rem;
  height: 2.25rem !important;
  line-height: 2.25rem !important;
  border: 1px solid var(--wp--preset--color--accent-2);
  border-radius: 999px;
  background: var(--wp--preset--color--accent-2);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.myc_osSimpleWidget .myc_slot.myc_timeSlot:hover,
.myc_osSimpleWidget .myc_slot.myc_timeSlot:focus-visible {
  color: #fff !important;
  filter: brightness(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: none;
}
.myc_osSimpleWidget .myc_slot.myc_timeSlot:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2);
  outline-offset: 2px;
}
/* Cancel the global a:hover img-nudge inside the widget — slot anchors
   are text-only today but this guards against future Epic builds that
   add a glyph inside the link. */
.myc_osSimpleWidget a:hover img {
  transform: none;
}

/* Empty / no-availability state — Epic injects .myc_noSlots or similar
   when the API returns zero slots. Keep readable, low-emphasis. */
.myc_osSimpleWidget .myc_noSlots,
.myc_osSimpleWidget .myc_emptyState {
  color: var(--wp--preset--color--base);
  font-style: italic;
  padding: 0.5rem 0;
}

/* Spinner + error states — Epic adds .myc_hidden when not active; this
   is belt-and-braces in case the class drops in some build. */
.myc_osSimpleWidget .myc_hidden,
.WidgetTokenContainer.myc_hidden,
.myc_loadingSpinner.myc_hidden,
.myc_error.myc_hidden {
  display: none !important;
}
.myc_error {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(220, 53, 69, 0.08);
  color: #b00020;
  font-size: 0.9rem;
}