/**
Theme Name: SRH Residency
Text Domain: srh-res

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

/* Presets live in theme.json (adopted from the primary `srh` theme).
   This file carries only what theme.json cannot express — currently the
   fixed left-sidebar shell carried over from Enfold's `header_sidebar`
   layout. Measurements below match Enfold 8.1's own CSS so the migrated
   pages land in the same place. */

:root {
  --srh-res-sidebar-width: 300px;
  /* Defined once and used by both the rail item and the button on the
     Instagram page, so the glyph never has to be retyped. Inline SVG as a
     mask rather than an icon font: it inherits currentColor and costs no
     extra request — the same approach the primary theme uses. */
  --srh-res-icon-instagram: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16M12%200C8.74%200%208.33.01%207.05.07%205.78.13%204.9.33%204.14.63c-.79.31-1.46.72-2.13%201.38C1.35%202.68.94%203.35.63%204.14.33%204.9.13%205.78.07%207.05.01%208.33%200%208.74%200%2012s.01%203.67.07%204.95c.06%201.27.26%202.15.56%202.91.31.79.72%201.46%201.38%202.13.67.66%201.34%201.07%202.13%201.38.76.3%201.64.5%202.91.56C8.33%2023.99%208.74%2024%2012%2024s3.67-.01%204.95-.07c1.27-.06%202.15-.26%202.91-.56.79-.31%201.46-.72%202.13-1.38.66-.67%201.07-1.34%201.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.38-2.13C21.32%201.35%2020.65.94%2019.86.63%2019.1.33%2018.22.13%2016.95.07%2015.67.01%2015.26%200%2012%200z%22%2F%3E%3Cpath%20d%3D%22M12%205.84A6.16%206.16%200%201%200%2018.16%2012%206.16%206.16%200%200%200%2012%205.84zm0%2010.16A4%204%200%201%201%2016%2012a4%204%200%200%201-4%204z%22%2F%3E%3Ccircle%20cx%3D%2218.41%22%20cy%3D%225.59%22%20r%3D%221.44%22%2F%3E%3C%2Fsvg%3E");
}

/* ---- overscroll canvas ---------------------------------------------------
   `body` is painted accent-4, the darkest blue in the palette, so an overscroll
   bounce reveals dark navy at the top and bottom of the page rather than white,
   and browsers that tint their chrome from the page pick that navy up. The
   `theme-color` meta in functions.php is kept in step with this value — that
   meta is what Safari actually reads, so the two must not drift apart.

   This replaces an earlier two-stop gradient that continued the rail blue into
   the bounce. Once the content column paints its own grey (below), the gradient
   had nothing left to do inside the viewport — the rail is fixed and opaque, so
   it was only ever visible on the bounce — and a flat dark reads consistently at
   both ends instead of blue at one edge and grey at the other.                */

/* The `:not()` chain keeps this off the editor canvas. This file is loaded as
   an editor stylesheet via add_editor_style(), and WordPress rewrites `body`
   to `.editor-styles-wrapper` when it does — so `body:not(.editor-styles-wrapper)`
   becomes a selector that cannot match itself, and the rule applies on the
   front end only. Without it the navy paints the editing canvas. Same guard the
   primary theme uses on its body background. */
body:not(.editor-styles-wrapper):not(.block-editor-page):not(.wp-admin) {
  background-color: var(--wp--preset--color--accent-4);
}

/* With `body` dark, the content column can no longer borrow its grey from the
   canvas — it has to paint it, which is what the primary theme does too.

   `min-height` matters as much as the colour here: several pages are shorter
   than the viewport (Faculty & Residents renders ~676px against a 900px
   screen), and without a floor the navy would show as a band beneath the
   content rather than only on the bounce. */
.wp-site-blocks {
  background-color: var(--wp--preset--color--off-base);
  min-height: 100vh;
}

/* ---- page transitions -----------------------------------------------------
   A quick cross-fade between pages, done entirely in CSS. The View Transitions
   API handles same-origin navigations natively, so there is no library, no
   script to enqueue and nothing running on the client. Browsers without support
   just navigate as they always did — nothing to feature-detect, no fallback to
   maintain, no half-applied state. Cross-origin links (the Instagram outlink)
   are untouched; the API only applies within the site.

   Two details make it read as subtle rather than as an effect:

   1. Duration. 200ms — just under the browser's 250ms default: visible as a
      fade, but short enough to stay out of the way. Settled after trying 120ms
      (effectively invisible) and 300ms. Change both values together if this is
      ever retuned, never just one.

   2. The two animations are the same length and `linear`. The UA stylesheet
      blends these pseudo-elements with `mix-blend-mode: plus-lighter`, which
      reconstructs the original image exactly when the old and new opacities sum
      to 1 at every frame. That is what keeps the parts of the page that do not
      change — the rail, its logo and nav — pixel-stable through the fade
      instead of dipping. Easing them differently, or giving them different
      durations, breaks that sum and makes the rail visibly pulse. Worth knowing
      before "improving" these values.                                         */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: srh-res-fade-out 200ms linear both;
}

::view-transition-new(root) {
  animation: srh-res-fade-in 200ms linear both;
}

@keyframes srh-res-fade-out {
  to { opacity: 0; }
}

@keyframes srh-res-fade-in {
  from { opacity: 0; }
}

/* Matches the rest of the theme, which disables its transitions the same way. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---- anchored scrolling ---------------------------------------------------
   The year/PGY buttons on Alumni and Residents jump to `#2026`, `#pgy1` and so
   on. Left alone the browser teleports, which loses the reader's sense of where
   they landed in a 118-card list. `scroll-behavior` animates it natively — no
   script, and it applies to every in-page anchor without any of them having to
   opt in.

   Wrapped in `no-preference` rather than disabled inside a `reduce` block: a
   long smooth scroll is a common motion-sickness trigger, so this is opt-in for
   people who have expressed no preference and simply never applies for anyone
   who asked for less motion.

   `scroll-margin-top` stops the target heading landing flush against the top
   edge. There is no fixed masthead to clear — the rail is down the left — so
   this is breathing room rather than an offset, and it is on the spacing scale
   so it stays in step with the rest of the theme.                             */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

:target {
  scroll-margin-top: var(--wp--preset--spacing--60);
}

/* ---- testimonials --------------------------------------------------------
   Five quotes shown one at a time, cross-fading. No script: the items are
   stacked in a single grid cell and share one keyframe animation, each offset
   by a whole slot via `animation-delay`.

   Timing matches what the live Enfold site already does — an 8s interval with a
   fade — so the cycle is 5 x 8s = 40s and each item owns 20% of it. The fade is
   2% of 40s = 0.8s at each end.

   Stacking with `grid-area` rather than absolute positioning matters: the grid
   cell is sized by the *tallest* quote, so the block never changes height as it
   rotates and nothing below it shifts. Absolute positioning would collapse the
   container to zero.

   `hover`/`focus-within` pause mirrors Enfold's `hoverpause`, and gives a
   reader who needs longer a way to hold a quote in place.                     */
.srh-res-testimonials {
  display: grid;
}

.srh-res-testimonials > * {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  animation: srh-res-testimonial 40s ease-in-out infinite;
}

.srh-res-testimonials > *:nth-child(1) { animation-delay:  0s; }
.srh-res-testimonials > *:nth-child(2) { animation-delay:  8s; }
.srh-res-testimonials > *:nth-child(3) { animation-delay: 16s; }
.srh-res-testimonials > *:nth-child(4) { animation-delay: 24s; }
.srh-res-testimonials > *:nth-child(5) { animation-delay: 32s; }

.srh-res-testimonials:hover > *,
.srh-res-testimonials:focus-within > * {
  animation-play-state: paused;
}

@keyframes srh-res-testimonial {
  0%,   0%  { opacity: 0; }
  2%,  18%  { opacity: 1; }
  20%, 100% { opacity: 0; }
}

/* Reduced motion gets the quotes back as a plain stacked list rather than a
   single frozen quote — no animation, but no hidden content either. */
@media (prefers-reduced-motion: reduce) {
  .srh-res-testimonials {
    display: block;
  }

  .srh-res-testimonials > * {
    opacity: 1;
    animation: none;
  }

  .srh-res-testimonials > * + * {
    margin-block-start: 1.5rem;
  }
}

/* ---- testimonial attribution ---------------------------------------------
   Name, role and portrait under each quote. The attributions were lost in the
   Enfold migration — the shortcodes carried them but the converted markup kept
   only the quote text — and were recovered from the live Enfold site.

   The by-line is its own flex row so the portrait sits beside the name rather
   than above it, which keeps each rotating item short. Photos are square
   originals shown as 56px circles; `object-fit` guards the one that is not
   perfectly square from distorting.                                          */
.srh-res-testimonial__quote {
  margin: 0;
}

.srh-res-testimonial__by {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-block-start: 1.25rem;
}

.srh-res-testimonial__photo {
  margin: 0;
  flex: 0 0 auto;
}

.srh-res-testimonial__photo img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.srh-res-testimonial__meta {
  margin: 0;
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.4;
}

/* ---- back to top ----------------------------------------------------------
   A plain link to `#top` — no script. The visibility is what is interesting:
   rather than a scroll listener, a scroll-driven animation drives the fade, so
   the control reveals itself between 400px and 700px down the page.

   That also makes it self-limiting. A page too short to scroll never advances
   the timeline, so the control simply never appears and there is no list of
   "long pages" to maintain. `visibility` rides along with the opacity because
   it interpolates discretely — without it the invisible control would still
   swallow clicks in its corner.

   The base rule outside `@supports` leaves it visible, so a browser without
   scroll timelines still gets a working control rather than an invisible one
   that eats clicks; it just shows on every page instead of only long ones.

   z-index clears the rail, which is fixed at 10.                             */
.srh-res-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--base);
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.25);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.srh-res-to-top:hover,
.srh-res-to-top:focus-visible {
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  transform: translateY(-2px);
}

@supports (animation-timeline: scroll()) {
  .srh-res-to-top {
    opacity: 0;
    visibility: hidden;
    animation: srh-res-to-top-reveal linear both;
    animation-timeline: scroll();
  }

  /* Percentages of the page's own scroll range, deliberately not a pixel
     `animation-range`. With a pixel range, any page whose maximum scroll lands
     inside it parks the control mid-fade forever — /contact/ sat at opacity
     0.52 permanently. Anchoring to the scroll range instead guarantees full
     opacity by 14% on every page, however short, and full opacity at the
     bottom. A page that cannot scroll at all leaves the timeline inactive, so
     the base `opacity: 0; visibility: hidden` above still applies and the
     control stays away entirely. */
  @keyframes srh-res-to-top-reveal {
    0%,   6%  { opacity: 0; visibility: hidden; }
    14%, 100% { opacity: 1; visibility: visible; }
  }
}

/* ---- monochrome portraits -------------------------------------------------
   Photos rest in black and white and fade up to colour on hover, the same
   treatment the primary site gives its provider headshots — 700ms `ease`,
   matched deliberately so the two sites feel related.

   `grayscale()` rather than WordPress's duotone: duotone resolves to a `url()`
   reference to an SVG filter, and a url() filter cannot interpolate, so a
   duotone can only ever snap. These images carry no duotone, so there is
   nothing to override here — unlike on the primary site, where the duotone
   class had to be out-specified.

   Applied via a class on the container rather than a page-id selector, so
   turning this on for Residents, Alumni or the fellows page is a matter of
   adding `srh-res-photos-mono` to their grid group in the editor — no CSS
   change and nothing hardcoded to a post ID.

   The hover target is the whole card, not just the photo: the picture is only
   40% of a wide card, and reacting to the card is easier to discover. Keyboard
   users get the same via `:focus-within`, which the card's Read More summary
   makes reachable.                                                           */
.srh-res-photos-mono .person-card img {
  filter: grayscale(1);
  transition: filter 700ms ease;
}

.srh-res-photos-mono .person-card:hover img,
.srh-res-photos-mono .person-card:focus-within img {
  filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .srh-res-photos-mono .person-card img {
    transition: none;
  }
}

/* Touch has no hover to reveal with, so the photo colours itself as the card
   scrolls into view instead — a `view()` timeline, still no script.

   Order matters in here. The first rule drops the greyscale entirely: on a
   touch device without scroll timelines there would otherwise be no way at all
   to reach the colour, and a permanently grey photo is worse than no effect.
   The `@supports` block then puts greyscale back for browsers that can animate
   it away. Same reasoning under reduced motion further down — colour outright
   rather than an animation someone asked not to see.

   `hover: none` rather than a width breakpoint: this is about the input device,
   not the screen size. A small window on a laptop keeps the hover behaviour,
   which is correct — it still has a pointer.                                  */
@media (hover: none) {
  .srh-res-photos-mono .person-card img {
    filter: none;
  }

  @supports (animation-timeline: view()) {
    .srh-res-photos-mono .person-card img {
      filter: grayscale(1);
      animation: srh-res-photo-colour linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 75%;
    }

    @keyframes srh-res-photo-colour {
      from { filter: grayscale(1); }
      to   { filter: grayscale(0); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .srh-res-photos-mono .person-card img {
      filter: none;
      animation: none;
    }
  }
}

/* ---- two-column shell -------------------------------------------------- */

.site-shell {
  display: block;   /* the rail is out of flow, so the grid has nothing to size */
}

/* Belt and braces: if any layout furniture ever leaks into the editor canvas,
   neutralise it there. The Site Editor legitimately renders the rail, so this
   is scoped to the post editor's wrapper only. */
.editor-styles-wrapper .site-sidebar {
  position: static;
  height: auto;
}

.editor-styles-wrapper .site-main {
  margin-left: 0;
}

.site-main {
  min-width: 0;                                     /* long words / wide tables shrink instead of overflowing */
  margin-left: var(--srh-res-sidebar-width);        /* clear the fixed rail */
}

/* Two things at once here.

   Core's flow layout puts a 24px block-gap margin on `main`. That used to be
   harmless — it sat inside a `.wp-site-blocks` that painted nothing. Now the
   content column is painted over a dark body, so the margin collapses straight
   out through `.site-shell` and `.wp-site-blocks` (neither has a border or
   padding of its own to contain it), drags the painted box down with it, and
   leaves a navy strip across the top of every titled page. Padding occupies the
   same space without collapsing, so the grey starts at y=0.

   The value is then deliberately larger than the 24px it replaces: the titles
   were sitting too close to the top edge once the page was painted. One token
   to change if it wants to be tighter or looser.

   Scoped through `.site-shell` for 0,2,0 to beat core's 0,1,0, and declared
   *above* the `--no-title` rule further down so that rule's `padding-top: 0`
   still wins on templates opening flush with a full-bleed video. */
.site-shell > .site-main {
  margin-block-start: 0;
  padding-block-start: var(--wp--preset--spacing--70);
}

/* ---- sidebar ------------------------------------------------------------ */

/* Background is set on the block (accent-2, #19458c) so the editor shows it
   too. The logo art is white-on-#19458c, so it sits seamlessly rather than
   reading as a pasted rectangle. Rules below only handle what the block
   attributes cannot: rail borders, link chrome, inline submenus. */

/* Full height, no independent scrollbar: the rail stretches with the grid
   row and the page scrolls as one. An earlier version used sticky +
   max-height:100vh + overflow-y:auto, which gave the sidebar its own
   scrollbar once the nav exceeded the viewport. */
/* Fixed rail: stays put while the main column scrolls. */
.site-sidebar {
  display: flex;              /* so .site-sidebar__meta can sit at the bottom */
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--srh-res-sidebar-width);
  height: 100vh;
  z-index: 10;
}

/* Core adds `padding: 1.25em 2.375em` to any .wp-block-group.has-background.
   That inset is what shrinks the logo away from the rail edges — the block's
   own width:300 is honoured, it is just being padded inwards. Zero it here
   and let the brand/nav rules below own their own spacing. */
.site-sidebar.has-background {
  padding: 0;
}

/* Logo art is white-on-#19458c at 2:1, the same blue as the rail, so it runs
   edge to edge with no horizontal padding — Enfold's 40px inset would leave
   only 220px of the 300px rail and read as a floating tile. */
/* Top padding tracks where the page title sits. theme.json gives h1
   `padding-top: 0.75em` at `--wp--custom--page-title-size`, which is fluid —
   clamp(1.85rem … 2.3rem) — so a fixed value here would drift by several px
   across viewport widths. Deriving it from the *same* custom property is what
   keeps the logo and the page title on one line at every width, and is why the
   title has its own size token rather than reusing a font-size preset: change
   the token and both move together. Horizontal stays 0 so the logo still runs
   edge to edge. */
.site-sidebar__brand {
  padding-top: calc(0.75 * var(--wp--custom--page-title-size, 2.3rem));
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.site-sidebar__brand .wp-block-site-logo,
.site-sidebar__brand .wp-block-site-logo a {
  display: block;
  width: 100%;
  max-width: none;
}

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

.site-sidebar__nav {
  padding: 20px 0;                    /* Enfold: #header .av-main-nav */
}

/* The rendered nav is deeper than it looks. Between <nav> and the links core
   emits five wrappers, and the page-list block adds a *second* <ul> inside the
   navigation container:

     nav > button
         > .wp-block-navigation__responsive-container
           > .wp-block-navigation__responsive-close
             > .wp-block-navigation__responsive-dialog
               > .wp-block-navigation__responsive-container-content
                 > ul.wp-block-navigation__container
                   > ul.wp-block-page-list
                     > li.wp-block-pages-list__item

   Each is a flex item that sizes to its content, so a long label pushes the
   whole chain wider than the rail — earlier fixes only reached the innermost
   two levels. Constrain every link in the chain. */

.site-sidebar__nav.is-vertical {
  --navigation-layout-align: stretch;
}

.site-sidebar__nav,
.site-sidebar__nav .wp-block-navigation__container,
.site-sidebar__nav .wp-block-page-list,
.site-sidebar__nav .wp-block-navigation__submenu-container {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 0;
}

/* The three overlay wrappers get the same treatment, but only from 600px up.

   Below that they are not wrappers at all — core makes
   `.wp-block-navigation__responsive-container` a `position: fixed; inset: 0`
   panel held closed with `display: none`, and only reveals it with
   `.is-menu-open`. Forcing `display: block` on it unconditionally (which this
   rule used to do) overrode that: the closed overlay painted itself full-screen
   over every page on a phone, with the logo, address and copyright stacked on
   top of the links.

   901px, not core's own 600px: the block is pushed into overlay mode all the
   way up to 900px further down, so the inline presentation only begins where
   the rail becomes a fixed column. The two numbers have to agree or the menu
   ends up inline while the rail is still a header. */
@media (min-width: 901px) {
  .site-sidebar__nav .wp-block-navigation__responsive-container,
  .site-sidebar__nav .wp-block-navigation__responsive-close,
  .site-sidebar__nav .wp-block-navigation__responsive-dialog,
  .site-sidebar__nav .wp-block-navigation__responsive-container-content {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 0;
  }
}

/* Everything in the rail is border-box, without exception.

   The chain above covers the wrappers, but the <li> and the <a> are not in it
   and nothing in core sets box-sizing on them, so `width: 100%` plus the row
   padding measured 100% + 48px on a top-level link and 100% + 64px on an
   indented subpage link. That spilled past the 300px rail invisibly for as
   long as the nav overflowed silently — it is what made the underlines and the
   active-row background overrun — and the moment the link list was given
   `overflow-y: auto` it became a real horizontal scrollbar, because setting
   one axis to anything but `visible` computes the other to `auto`.

   Scoped `*` rather than naming the two elements: this component has overrun
   its container three times now, and a blanket border-box means the next row
   style that adds padding cannot repeat it. Core sets content-box nowhere, so
   there is nothing here for a 0,0,0 selector to lose against. */
.site-sidebar__nav,
.site-sidebar__nav *,
.site-sidebar__nav *::before,
.site-sidebar__nav *::after {
  box-sizing: border-box;
}

/* nothing in the rail may establish a width larger than the rail itself */
.site-sidebar__nav li,
.site-sidebar__nav a,
.site-sidebar__nav span {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-sidebar__nav .wp-block-navigation-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.site-sidebar__nav .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  /* Core makes this a flex container, and a flex box will not shrink below
     its max-content width without min-width:0 — so a long label like
     "Advanced Obstetrics and Women's Health Fellowship" (49 chars, uppercase,
     1px letter-spacing) pushed past the 300px rail instead of wrapping. */
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  padding: 15px 24px;                 /* Enfold: > li > a */
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--wp--preset--color--base);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  /* Hover fades instead of snapping. The duration sits on the base rule, so it
     is what governs the fade *out* once the pointer leaves; the :hover rule
     below shortens it so the fade *in* still feels responsive. Only the two
     properties that actually change are listed — transitioning `all` would
     also animate the border and padding. */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-sidebar__nav .wp-block-navigation-item__content:hover,
.site-sidebar__nav .wp-block-navigation-item__content:focus-visible {
  background-color: rgba(255, 255, 255, 0.10);
  color: var(--wp--preset--color--base);
  transition-duration: 0.15s;   /* in quickly, out slowly */
}

/* Matches the primary theme, which disables its own transitions the same way. */
@media (prefers-reduced-motion: reduce) {
  .site-sidebar__nav .wp-block-navigation-item__content {
    transition: none;
  }
}

.site-sidebar__nav .current-menu-item > .wp-block-navigation-item__content,
.site-sidebar__nav .current_page_item > .wp-block-navigation-item__content {
  background-color: rgba(255, 255, 255, 0.16);
  font-weight: 700;
}

/* Subpages sit inline and indented under their parent — no hover dropdown.
   Core hides a submenu with position/height/overflow/opacity/visibility on
   `.wp-block-navigation .has-child .wp-block-navigation__submenu-container`,
   which is 0,3,0; this selector is 0,2,0, so every property that fights core
   needs !important rather than losing silently. */
.site-sidebar__nav .wp-block-navigation__submenu-container {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  left: auto !important;
  top: auto !important;
  transition: none !important;
  /* `transparent`, not "no rule". A second core rule,
     `.wp-block-navigation:not(.has-background)
     .wp-block-navigation__submenu-container`, paints the submenu #fff with a
     dark border so a flyout stays readable floating over page content — and at
     0,3,0 it outranks this selector. Simply deleting the declaration would let
     that white block back into the rail; it has to be actively overridden.
     Ours is not a flyout but an inline list inside the rail, so it sits on the
     same blue as the rest of the nav, with the indent alone marking depth.
     !important rather than more specificity because core's hover rule reaches
     0,5,0 and that is not a race worth entering. */
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none;
}

/* With the submenu permanently open the disclosure button has nothing to
   disclose. Leaving it would show a chevron that does nothing and expose an
   aria-expanded state on a menu that never collapses. */
.site-sidebar__nav .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* Expanding every submenu puts 17 rows in the rail — roughly 750px of links
   on top of the logo and the address block, near 950px in a rail that is
   `height: 100vh`. That overflows a laptop viewport, and a fixed rail simply
   clips what does not fit, making the last items unreachable. So the link
   list, and only the link list, scrolls when it has to: the rail itself stays
   fixed and full height, and on a tall display no scrollbar appears at all.
   `min-height: 0` is what actually allows the flex item to shrink below its
   content height — without it `overflow-y` never engages. Scoped above the
   900px breakpoint, below which the rail is static and grows naturally.      */
@media (min-width: 901px) {
  nav.site-sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  }
}

/* The indent needs !important. Core sets `padding: .5em 1em` on a submenu link
   via `.wp-block-navigation .has-child .wp-block-navigation__submenu-container >
   .wp-block-navigation-item > .wp-block-navigation-item__content`, which is
   (0,5,0) against this selector's (0,3,0) — so core won and the subpages ended
   up inset 12px against the top level's 24px, i.e. sitting *left* of their own
   parents instead of indented under them. Matching core's specificity here
   would mean naming five classes to say one thing. */
.site-sidebar__nav .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding: 12px 24px 12px 40px !important;   /* Enfold: .av-main-nav ul a, indented */
  /* Type deliberately matches the top level. The base rule above already sets
     13px / uppercase / 1px tracking on every `__content` in the rail, submenu
     links included, so simply not overriding it here keeps the two in step —
     the indent and the lighter colour carry the hierarchy on their own. */
  color: var(--wp--preset--color--accent-11);
}

/* Instagram outlink — the leadership's main channel. `wp:page-list` cannot
   carry external links, so this is a sibling `wp:navigation-link` inside the
   same navigation block, styled to match the page rows. The glyph is an
   inline-SVG mask rather than an icon font, so it inherits currentColor and
   costs no extra request — same approach the primary theme uses. */
.site-sidebar__nav .site-sidebar__nav-instagram .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-sidebar__nav .site-sidebar__nav-instagram
  .wp-block-navigation-item__content::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--srh-res-icon-instagram) no-repeat center / contain;
  mask: var(--srh-res-icon-instagram) no-repeat center / contain;
}

/* Same glyph on the button on the Instagram page. The class sits on the
   button block's wrapper, so the icon hangs off the inner <a>, which has to
   become a flex line to sit the glyph beside the label. */
.srh-res-btn-instagram .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  /* Core centres the label with `text-align`, which stops meaning anything
     once the link becomes a flex line — and this button carries a 75% custom
     width, so without this the icon and label would hug the left edge. */
  justify-content: center;
  gap: 8px;
}

.srh-res-btn-instagram .wp-block-button__link::before {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--srh-res-icon-instagram) no-repeat center / contain;
  mask: var(--srh-res-icon-instagram) no-repeat center / contain;
}

/* ---- full-bleed video -----------------------------------------------------

   The video lives in a page's *content*, not in the template, so one no-title
   template can serve several pages that each carry their own video.

   Two things make the bleed work. `wp:post-content` is alignfull in both page
   templates: without that, core caps `.entry-content` at content-size and
   centres it, so an `.alignfull` child could only ever widen to 1100px plus the
   padding, never to the viewport edge. With it, `.entry-content` keeps its
   global padding and core's `.has-global-padding > .alignfull` breakout does
   the work. The left/right margins below restate that explicitly so a future
   shorthand cannot quietly cancel it — a `margin: 0 0 2rem` shorthand did
   exactly that once, leaving a 1rem gutter on the right. Body copy is
   unaffected: still capped at content-size, centred on the same axis.         */

.site-content-video {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
  margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
  width: auto;
  max-width: none;
}

/* Flush to the top when the video opens the page. */
.entry-content > .site-content-video:first-child {
  margin-top: 0;
}

.site-content-video video {
  display: block;
  width: 100%;
  height: auto;
}

/* Transcript disclosure under a video (WCAG 1.2.3), matching the primary site's
   `.wp-block-details > summary`: small, right-aligned, blue, with a chevron in
   place of the browser's triangle. Scoped to the details that directly follows
   a video so the person cards' Personal Notes keep their own treatment. The
   negative margin collapses with the video's 2rem to tuck the toggle under it. */
.site-content-video + .wp-block-details {
  margin-block-start: -1.25rem;
}

.site-content-video + .wp-block-details > summary {
  font-size: 0.85rem;
  text-align: right;
  list-style: none;
  cursor: pointer;
  color: var(--wp--preset--color--accent-2);
}

.site-content-video + .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.site-content-video + .wp-block-details > summary::after {
  content: "\25BE"; /* ▾ */
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.15s ease-out;
}

.site-content-video + .wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}

/* `.site-shell` is a flow layout whose first child is the rail's
   `.wp-block-template-part` wrapper, so `<main>` is the *second* child and
   picks up core's `:root :where(.is-layout-flow) > * { margin-block-start:
   24px }`. That 24px — not anything on the video — is what held the hero off
   the top of the page. Zero it only on the no-title template, where the page
   opens on a full-bleed video and the gap shows; pages with a title keep the
   breathing room above the heading. Scoped through `.site-shell` for 0,2,0 so
   it beats core's 0,1,0 outright rather than relying on source order.         */
.site-shell > .site-main--no-title {
  margin-block-start: 0;
  padding-top: 0;
}

/* ---- tabs: traditional folder outline -------------------------------------

   The selected tab loses its bottom edge and opens into the panel; the others
   keep theirs, so the line runs along their base and they read as sitting
   behind. The outline is one continuous shape: `.wp-block-tab-list` draws the
   horizontal line, and `.wp-block-tab-panels` draws left/right/bottom, so the
   two together enclose the content without doubling up along the top.

   How the join works: each button gets `margin-bottom: -1px`, putting its
   bottom border exactly over the list's line. A child paints after its
   parent's border, so the selected tab's bottom border — set to the panel's
   face colour rather than the line colour — covers that 1px and breaks the
   line where the tab sits. That break is the whole effect.

   Core's own indicator (a 2px `currentColor` underline on the selected tab)
   has to go, or it would redraw the very edge being opened. Its selector is
   only 0,1,1 because core wraps the base rules in `:where()`, so these
   overrides need no weight games.

   The line is a 18% wash of the rail blue — the same hue as the table stripe
   at 6%, so the two read as one family rather than two greys.             */

.wp-block-tabs {
  --srh-res-tab-line: rgba(25, 69, 140, 0.18);
  --srh-res-tab-face: var(--wp--preset--color--base);
}

.wp-block-tab-list {
  border-bottom: 1px solid var(--srh-res-tab-line);
  gap: 2px;
}

.wp-block-tab-list button {
  margin-bottom: -1px;
  border: 1px solid var(--srh-res-tab-line);
  border-radius: 4px 4px 0 0;
  background-color: transparent;
}

/* Core draws its own selected-tab underline; the folder edge replaces it. */
.wp-block-tab-list button[aria-selected="true"]::before {
  content: none;
}

.wp-block-tab-list button[aria-selected="true"] {
  background-color: var(--srh-res-tab-face);
  border-bottom-color: var(--srh-res-tab-face);
}

/* The runtime sets `aria-selected` client-side — the server sends none — so
   before hydration no tab would read as open and the row would flash three
   closed tabs. Present the first one as open until the attribute exists;
   `:not([aria-selected])` stops matching the moment the runtime writes it.
   Deliberately no matching rule to hide the panels: core leaves them all
   visible without JS, which keeps the content reachable, and hiding them in
   CSS would lose it outright if the module ever failed to load. */
.wp-block-tab-list button:first-child:not([aria-selected]) {
  background-color: var(--srh-res-tab-face);
  border-bottom-color: var(--srh-res-tab-face);
}

.wp-block-tab-list button:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2);
  outline-offset: -2px;
}

.wp-block-tab-panels {
  border: 1px solid var(--srh-res-tab-line);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: var(--srh-res-tab-face);
  padding: 1.5rem;
}

/* ---- floated media inside post content ------------------------------------

   `wp:post-content` is alignfull (that is what lets a video run edge to edge),
   so `.entry-content` spans the whole main column while ordinary blocks are
   still capped at content-size and centred inside it. Core deliberately
   exempts floats from that cap:

     .is-layout-constrained > .alignleft { float: left; margin-inline-start: 0 }

   which leaves a left-floated image hugging `.entry-content`'s edge — far
   outside the band the text sits in, so it reads as floating out of the page.
   Push it back to where the copy starts: half the difference between the
   container and the content band. `100%` in a margin resolves against the
   container's width, so this is exactly (container - band) / 2, and it
   collapses to 0 once the container is narrower than the band.

   Three classes deep so it beats core's (0,2,0) outright rather than relying
   on this stylesheet loading later.                                          */

.site-main .entry-content > .alignleft {
  margin-inline-start: calc(
    (100% - min(100%, var(--wp--style--global--content-size))) / 2
  );
}

.site-main .entry-content > .alignright {
  margin-inline-end: calc(
    (100% - min(100%, var(--wp--style--global--content-size))) / 2
  );
}

/* ---- contact cards ---------------------------------------------------------

   The three contacts at the foot of Advanced Obstetrics use the person card,
   but that page is the default template — one card per row at the full content
   width. At 40% the photo would come out ~440px against three short lines of
   text, so the card would be a tall column of white beside a huge portrait.
   Pinning the photo column instead keeps the proportions of a people-page card
   (~190px photo) on a much wider card.

   `!important` because `flex-basis` is written inline on the column by the
   columns block, and an inline style cannot be beaten by specificity.        */

.person-card--contact .wp-block-column:first-child {
  flex-basis: 170px !important;
  flex-grow: 0;
}

.person-card--contact .wp-block-column:last-child {
  flex-basis: auto !important;
}

/* A contact card standing on its own — the one on /contact/ — rather than
   stacked three-up. At the shared 170px the photo reads as an afterthought
   against a card that runs the full content width, so this modifier gives it a
   larger portrait and, with it, a taller card.

   Both `!important`: `flex-basis` is written inline on the column by the
   columns block, and an inline style cannot be beaten by specificity alone.
   Two classes here (0,2,0) so it also outranks the shared `--contact` rule
   above, which carries `!important` of its own.                              */
.person-card--contact.person-card--lg .wp-block-column:first-child {
  flex-basis: 240px !important;
}

/* ---- person cards: type scale --------------------------------------------

   Everything in a card steps down to x-small except the name. The name is an
   h3 and theme.json gives it an absolute `clamp()`, so it does not inherit
   this and needs no exception written for it; the PERSONAL NOTE h4 does
   inherit a preset and is brought down explicitly.                          */

.person-card {
  font-size: var(--wp--preset--font-size--x-small);
}

.person-card h4 {
  font-size: var(--wp--preset--font-size--x-small);
}

/* ---- striped tables -----------------------------------------------------

   Uses core's own `is-style-stripes` table variation rather than a bespoke
   class, so the banding stays togglable from the block's Styles panel. Core
   paints odd rows `#f0f0f0` on a transparent table, which is invisible here —
   the page ground is `off-base` `#f1f1f1`, within one step of it. So retune
   the two colours for this palette instead of reimplementing the variation:
   a white table ground with odd rows taking a 6% wash of the rail blue, which
   bands clearly without competing with the text sitting on it.

   Prefixed with `:root` (0,4,2) to beat core's own 0,3,2 rule outright rather
   than relying on this stylesheet loading later.                             */

:root .wp-block-table.is-style-stripes {
  background-color: var(--wp--preset--color--base);
}

:root .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: rgba(25, 69, 140, 0.06);
}

/* ---- button press effect ---------------------------------------------------

   Carried over from the primary theme so buttons behave identically on both
   sites. The effect is deliberately split in two, and only half of it lives
   here: the `box-shadow` values for rest / :hover / :focus-visible / :active
   are already declared on `styles.elements.button` in theme.json — they came
   across when that file was adopted wholesale from `srh` — and remain
   editable from Site Editor → Styles → Buttons. `transform` has no theme.json
   equivalent, so the translates have to be CSS, which is the piece that was
   missing here.

   Together they read as the button pressing into the page: it shifts down and
   right while its shadow shrinks, and on :active the shadow goes to nothing at
   a 3px offset. Values match `srh/style.css` exactly.                        */

.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);
}

/* ---- Gravity Forms submit ------------------------------------------------
   GF ships an "orbital" theme that paints the submit button a filled #204ce5
   belonging to no palette here. Restyle it as the outline button used
   everywhere else: values measured off a live
   `.wp-block-button.is-style-outline .wp-block-button__link` rather than
   guessed, so the two genuinely match — transparent fill, 2px accent-2 border,
   20px radius, 700 weight, and the same 6px/6px/9px shadow. That button's hover
   keeps its colours and only translates, so this one does too.

   The selector is doubled deliberately. GF's rule is

     .gform-theme--framework.gform-theme.gform_wrapper
       :where(:not(.mce-splitbtn)) > button:not([id*=mceu_]):not(.mce-open):where(…)

   which looks like (0,3,1) until you count the `:not()`s. `:where()` is always
   0, but `:not()` takes the specificity of its argument — so `:not([id*=mceu_])`
   and `:not(.mce-open)` add a class-unit each and the rule lands at (0,5,1).
   Naming five classes here tied it exactly, and GF's stylesheet enqueues after
   the theme's, so source order handed GF the win.

   Repeating `.gform_wrapper` buys one more class-unit — (0,6,1) — without
   depending on `.gform-theme--orbital`, which would break the moment the form
   theme is switched.                                                          */
.gform-theme.gform-theme--framework.gform_wrapper.gform_wrapper button.gform_button.button {
  background-color: transparent;
  color: var(--wp--preset--color--accent-2);
  border: 2px solid var(--wp--preset--color--accent-2);
  border-radius: 20px;
  padding: 0.667em 1.333em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 9px 0;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gform-theme.gform-theme--framework.gform_wrapper.gform_wrapper button.gform_button.button:hover {
  background-color: transparent;
  color: var(--wp--preset--color--accent-2);
  border-color: var(--wp--preset--color--accent-2);
  transform: translate(1.5px, 1.5px);
}

.gform-theme.gform-theme--framework.gform_wrapper.gform_wrapper button.gform_button.button:active {
  transform: translate(3px, 3px);
}

/* ---- person cards -------------------------------------------------------

   One card per faculty member, resident, fellow or alumnus. The record is
   several sibling blocks — name, role, then a columns block of photo and
   details — so CSS alone could not draw a single box around them; each record
   is wrapped in a `wp:group.person-card` in the content itself.

   White on the off-base page ground carries most of the separation; a soft
   shadow now does the rest, added once the cards went two-up and needed to
   read as discrete objects rather than a grid of panels. Two layers rather
   than one — a tight low-opacity layer for the edge and a wider, softer one
   for the lift — and built on `contrast` (#0a0a0a) rather than pure black so
   it belongs to the palette. Deliberately no border: the shadow and the white
   are enough against #f1f1f1, and a border on top of both reads as heavy.
   The card's `overflow: hidden` does not clip this — a box-shadow paints
   outside the border box.                                                    */

.person-card {
  background-color: var(--wp--preset--color--base);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.06),
    0 4px 10px rgba(10, 10, 10, 0.07);
  margin-block-start: 1.5rem;
  /* The card carries no padding of its own so the photo can reach the edges;
     the text column and the Personal Note pad themselves instead. The overflow
     is what makes the photo's top-left corner follow the card radius rather
     than square it off.

     `clip`, not `hidden`, and the difference is load-bearing: `hidden` makes
     the card a scroll container, and a `view()` timeline resolves against the
     nearest scroll container. That silently broke the scroll-into-view colour
     reveal on touch — every photo reported `grayscale(0)` regardless of where
     it was on the page, because each card was its own degenerate scrollport.
     `clip` crops identically without creating one. */
  padding: 0;
  overflow: clip;
}

.person-card .wp-block-columns {
  gap: 0;
  margin-block: 0;
}

/* Photo column: flush left and top, no inset.

   The negative bottom margin is what brings the card's bottom edge up. It lets
   the photo hang 2rem below the columns row, so the row — and everything after
   it — sits 2rem higher whenever the photo is the taller column.

   Putting it here rather than on the Personal Note is deliberate, and is what
   makes it safe: a negative top margin on the Note would be a fixed pull
   applied to every card, and the slack is not fixed. Measured across the 14
   Faculty cards it runs from +98px (Van Swol, Gentry) to **-28px** (Ringenberg,
   whose copy is taller than his photo) — so a fixed pull would have dragged
   "Read More" up into his text. On the photo column the margin only affects
   the row when the photo is the tallest item in it; where the copy already
   wins, it changes nothing.

   The overhang is exactly the height of the closed Note, so the photo lands
   flush with the card's bottom edge on any card where the photo is the taller
   column. Derived rather than typed: one summary line (`x-small` at the root
   1.3 line-height) plus the Note's 1.25rem bottom padding. Deriving it matters
   because the two must stay equal — a larger overhang hangs the photo past the
   card and `overflow: hidden` clips it, a smaller one leaves a gap — and both
   inputs are things a later type change would move.                          */
.person-card {
  --srh-res-note-closed: calc(var(--wp--preset--font-size--x-small) * 1.3 + 1.25rem);
}

.person-card .wp-block-column:first-child {
  padding: 0;
}

/* Only overhang when there is a Personal Note beneath to absorb it. Six Alumni
   cards have no Note — the placeholder records — and on those the overhang had
   nothing under it, so the photo hung past the card and the overflow
   sheared ~38px off the bottom of the placeholder. Written as an addition
   rather than an exception on purpose: if `:has()` is ever unavailable the
   fallback is simply no overhang, which costs a little height, instead of
   clipped images. */
.person-card:has(> .wp-block-details) .wp-block-column:first-child {
  margin-bottom: calc(-1 * var(--srh-res-note-closed));
}

.person-card .wp-block-image,
.person-card .wp-block-image figure {
  margin: 0;
}

.person-card .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  /* the card clips the corners now, so the image must not round its own */
  border-radius: 0;
}

/* Everything that is words gets the padding the card gave up. No bottom
   padding: the Personal Note sits immediately below and supplies it, which is
   what lets "Read More" tuck up against the copy instead of floating. */
.person-card .wp-block-column:last-child {
  padding: 0.85rem 1.5rem 0;
}

/* the role line belongs to the name above it, not floating between blocks */
.person-card h3 + p {
  margin-block-start: 0.15rem;
}

/* …and the schools sit close under the role line. Core's 24px between
   constrained siblings is what made the text column tall enough to leave the
   photo hanging short of the card's bottom edge. */
.person-card .wp-block-column:last-child > p + p {
  margin-block-start: 0.55rem;
}

/* The Personal Note stays a full-width child of the card, so the panel it
   opens still spans edge to edge — only the summary is pulled over to sit
   under the text column, right-aligned and tight to the copy above it. */
.person-card > .wp-block-details {
  margin-block-start: 0;
  padding: 0 1.5rem 1.25rem;
}

/* The panel has to clear the 2rem of photo now hanging into this band, or an
   opened Note would start behind the image. The summary itself needs nothing:
   it is right-aligned, and the overhang is on the left. */
.person-card > .wp-block-details > :not(summary) {
  padding-top: 1.5rem;
}

/* Blue marks it as the one thing in the card you can click. `::marker` colours
   the disclosure triangle in Firefox and current Chrome/Safari;
   `::-webkit-details-marker` covers older WebKit, which ignores ::marker on a
   summary. Both are listed separately on purpose — browsers drop a whole rule
   when they meet a selector they do not understand, so combining them would
   lose the working one too. */
.person-card > .wp-block-details > summary {
  text-align: right;
  padding-top: 0;
  color: var(--wp--preset--color--accent-2);
}

.person-card > .wp-block-details > summary::marker {
  color: var(--wp--preset--color--accent-2);
}

.person-card > .wp-block-details > summary::-webkit-details-marker {
  color: var(--wp--preset--color--accent-2);
}

@media (max-width: 600px) {
  .person-card .wp-block-column:last-child {
    padding: 0.75rem 1.25rem 0;
  }
  .person-card > .wp-block-details {
    padding: 0 1.25rem 1rem;
  }
}

/* ---- rail footer: address, phone, copyright ------------------------------ */

/* Pushed to the bottom of the rail. accent-11 (#ccd3de) reads as muted against
   the #19458c background at 6.14:1 — accent-1 is more muted still but lands at
   4.31:1, under the 4.5:1 needed for text this size. */
.site-sidebar__meta {
  margin-top: auto;
  padding: 20px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--wp--preset--color--accent-11);
}

.site-sidebar__meta p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--wp--preset--color--accent-11);
}

.site-sidebar__meta a {
  color: inherit;
  text-decoration: none;
}

.site-sidebar__meta a:hover,
.site-sidebar__meta a:focus-visible {
  color: var(--wp--preset--color--base);
  text-decoration: underline;
}

.site-sidebar__copyright {
  margin-top: 12px !important;
  font-size: 11px !important;
  opacity: 0.85;
}

/* ---- collapse to a single column on small screens ---------------------- */

@media (max-width: 900px) {
  .site-sidebar {
    position: static;
    width: auto;
    height: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .site-main {
    margin-left: 0;
  }
}

/* ---- mobile header + footer ------------------------------------------------
   Up to 900px the rail stops being a column. Two things follow from that.

   The logo and menu button belong on one row, and the address block belongs at
   the *bottom* of the page rather than wedged between the header and the first
   heading — it is footer material, and on a phone it reads as an obstacle
   before the content instead of a sign-off after it.

   Moving it there without duplicating the markup means flattening the wrappers:
   the meta lives inside `aside.site-sidebar`, itself inside the template part's
   `div`, while `main` is a sibling of that div — three levels apart, so `order`
   alone cannot reach past `main`. `display: contents` on both wrappers drops
   their boxes and promotes brand, nav and meta to grid items of `.site-shell`
   alongside `main`, where named areas place each one exactly.

   The cost of `display: contents` is that the aside's own background goes with
   its box, so the blue is restated on the two bands that need it below.

   Brand and nav share one grid area rather than sitting in two columns. That is
   what lets the logo centre on the page instead of centring in the space left
   over beside the button — with a 1fr/auto split it would sit ~36px left of
   true centre, which reads as a mistake rather than a choice.               */
@media (max-width: 900px) {
  .site-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "meta";
  }

  .site-shell > .wp-block-template-part,
  .site-sidebar {
    display: contents;
  }

  .site-sidebar__brand {
    grid-area: header;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--wp--preset--color--accent-2);
    /* the desktop value lines the logo up with the page title, a relationship
       that does not survive the column becoming a header */
    padding: 16px 64px;
    border-bottom: 0;
  }

  /* same cell as the brand, pinned right, so the logo can centre on the page */
  .site-sidebar__nav {
    grid-area: header;
    justify-self: end;
    align-self: center;
    width: auto;
    padding: 0 12px;
  }

  .site-main {
    grid-area: main;
  }

  .site-sidebar__meta {
    grid-area: meta;
    background-color: var(--wp--preset--color--accent-2);
    margin-top: 0;
    border-top: 0;
  }

  /* core renders the toggle small and unlabelled; give it a real touch target */
  .site-sidebar__nav .wp-block-navigation__responsive-container-open {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- mobile menu overlay --------------------------------------------------
   When the toggle opens the menu, core makes the container a fixed, full-screen
   panel and paints it with `background-color: inherit`. That works for a nav
   that carries its own background; this one does not — the rail blue comes from
   the `.site-sidebar` ancestor, and the overlay is taken out of that context.
   So it opened transparent, over the page, with white links on white: only the
   subpage rows were legible, because those are the one set given an explicit
   colour.

   Painting the panel here restores the rail's own colours to it. The close
   button needs its colour stated too — it is a core button element and does not
   inherit through the dialog wrapper.                                         */
@media (max-width: 900px) {
  /* Core paints the open panel white with

       .wp-block-navigation:not(.has-background)
         .wp-block-navigation__responsive-container.is-menu-open:not(.disable…)

     which reads as three classes until you count the `:not()`s — each takes the
     specificity of its argument — putting it at (0,5,0). Naming the rail, the
     nav, the container and the state reaches (0,5,0) too and would still lose on
     source order, so `.is-menu-open` is doubled to clear it at (0,6,0). */
  .site-sidebar .site-sidebar__nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
    background-color: var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--base);
    padding: 20px 0;
  }

  .site-sidebar__nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    top: 18px;
    right: 18px;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    color: var(--wp--preset--color--base);
  }

  /* the dialog is a flex column by core's own rule; the rows want the full
     width of it rather than shrinking to their text */
  .site-sidebar__nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    width: 100%;
  }
}

/* Row padding inside the open overlay. Core zeroes it with
   `.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content { padding: 0 }` at (0,3,0), which beat the
   rail's own (0,2,0) padding rule and left the rows touching each other. Same
   selector shape as the panel background above, so the two stay together. */
@media (max-width: 900px) {
  .site-sidebar .site-sidebar__nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
    .wp-block-navigation-item__content {
    padding: 14px 24px;
  }

  .site-sidebar .site-sidebar__nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    padding-left: 44px;
  }
}

/* ---- overlay mode up to 900px ---------------------------------------------
   The nav block's own breakpoint is 600px, which left iPad portrait (768px)
   showing all thirteen rows expanded above the content — the rail was already a
   header by then, so the list simply pushed the page down. These two rules hold
   the block in overlay mode all the way to 900px, where the rail becomes a
   fixed column and the full list belongs again.

   Both have to out-specify core, and core's numbers are not what they look like
   because `:not()` carries the specificity of its argument:

     .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)
       -> (0,3,0), so `.site-sidebar__nav` + the doubled state reaches (0,4,0)

     .wp-block-navigation__responsive-container-open:not(.always-shown)
       -> (0,2,0), so adding `.site-sidebar__nav` reaches (0,3,0)               */
@media (min-width: 600px) and (max-width: 900px) {
  .site-sidebar__nav
    .wp-block-navigation__responsive-container:not(.is-menu-open):not(.is-menu-open) {
    display: none;
    position: fixed;
  }

  /* core hides the toggle above 600px; it is needed for the whole range now */
  .site-sidebar__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* ---- logo in header mode --------------------------------------------------
   The rail sizes the logo to fill a 300px column with `width: 100%` and
   `max-width: none` at (0,2,0) — which is why an earlier `max-width` on
   `.site-sidebar__brand img` alone did nothing and the mark still rendered
   358px wide on a 430px phone. Capping it needs the same three elements the
   column rule names, and it has to set `width` too: `max-width` alone leaves
   `width: 100%` fighting it. */
@media (max-width: 900px) {
  .site-sidebar__brand .wp-block-site-logo,
  .site-sidebar__brand .wp-block-site-logo a,
  .site-sidebar__brand .wp-block-site-logo img {
    width: 200px;
    max-width: 200px;
  }
}

/* Emoji are not portraits. Three Alumni bios contain a 🙂, and WordPress's emoji
   script swaps the character for `<img class="emoji">` — client-side, so it does
   not appear in the served HTML at all. They were sitting inside a card, greyed
   out alongside the headshots and colouring up on hover. Excluded here so they
   read as text, which is what they are.

   `.emoji`, not `.wp-smiley`: the latter is the old text-smiley class and
   matches nothing here, which is exactly how the first attempt failed silently. */
.srh-res-photos-mono .person-card img.emoji {
  filter: none;
}