/* =====================================================================
   10-shell.css — Team SHELL. The one global header and footer.

   Loaded on EVERY front-end route (functions.php enqueues
   assets/css/overhaul/*.css unconditionally, after phase1.css). That is the
   whole point of this file: the previous shell drew half its appearance from
   style.css, which is only enqueued on the static-surface routes, so
   /my-account/ and /create/ rendered a different header — unstyled skip link
   in the top-left, core navigation chrome on the right. Nothing below depends
   on style.css or on any core block stylesheet.

   Tokens are read from phase1.css :root, never written.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Neutralise the legacy shell rules that target the bare element or the
      template-part wrapper. phase1.css paints `header{background:paper}`,
      `footer{background:pine;padding:64px 0 30px}` and repaints both under
      --ground-dark. Those wrappers must be inert so the shell below is the
      only thing that draws.
   --------------------------------------------------------------------- */
header.wp-block-template-part,
footer.wp-block-template-part,
.wp-site-blocks > header,
.wp-site-blocks > footer {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
}

/* ---------------------------------------------------------------------
   1. Skip link — present on every page, visually hidden until focused.
      The base rule used to live only in style.css; that is why the words
      "Skip to main content" sat on top of /my-account/ and /create/.
   --------------------------------------------------------------------- */
.rhc-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rhc-skip-link:focus,
.rhc-skip-link:focus-visible {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  z-index: 1200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--b);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   2. Header bar — comp .hd: ink ground, mark left, quiet nav right.
   --------------------------------------------------------------------- */
.rh-shell-header {
  background: var(--ink);
  color: var(--on-ink);
  border-block-end: 1px solid rgba(237, 230, 216, 0.14);
  position: relative;
  z-index: 40;
  font-family: var(--b);
}

.rh-shell-bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 17px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}

/* --- watercolour mark + wordmark (comp .logo / .wm) --- */
.rh-shell-mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  color: var(--on-ink);
  text-decoration: none;
}

.rh-shell-mark picture {
  display: block;
  flex: none;
}

.rh-shell-mark img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  /* the watercolour is painted on white paper; on ink it must not multiply */
  mix-blend-mode: normal;
}

.rh-shell-wm {
  display: block;
  line-height: 1;
}

.rh-shell-wm b {
  display: block;
  font-family: var(--d);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.012em;
  color: inherit;
}

.rh-shell-wm i {
  display: block;
  font-style: normal;
  font-family: var(--b);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  margin-top: 4px;
}

.rh-shell-mark:hover .rh-shell-wm b {
  text-decoration: none;
}

/* --- desktop nav (comp .nav) ---
   `display` is declared explicitly on every <nav> in this file. phase1.css
   carries `@media (max-width:900px){ nav,.credits,.hact{display:none} }`, a
   blanket kill of the bare element, and an inherited `display:none` is how the
   mobile panel's link list silently disappeared the first time. */
.rh-shell-nav {
  display: block;
  min-width: 0;
}

.rh-shell-nav > ul {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rh-shell-nav > ul > li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rh-shell-nav a,
.rh-shell-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--b);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--on-ink-2);
  background: none;
  border: 0;
  border-block-end: 2px solid transparent;
  padding: 4px 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.rh-shell-nav a:hover,
.rh-shell-nav a:focus-visible,
.rh-shell-sub-toggle:hover,
.rh-shell-sub-toggle:focus-visible,
.rh-shell-nav .is-current > a {
  color: var(--on-ink);
  border-block-end-color: var(--rust);
  text-decoration: none;
}

.rh-shell-nav a:focus-visible,
.rh-shell-sub-toggle:focus-visible,
.rh-shell-menu-button:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

.rh-shell-nav .rh-shell-has-sub.is-current > .rh-shell-sub-toggle {
  color: var(--on-ink);
  border-block-end-color: var(--rust);
}

.rh-shell-signin > a {
  color: var(--on-ink);
  font-weight: 600;
}

/* --- the one grouped item: Classes --- */
.rh-shell-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.rh-shell-has-sub[data-open="true"] .rh-shell-caret {
  transform: translateY(1px) rotate(225deg);
}

.rh-shell-sub {
  /* phase1.css styles the bare `nav ul` as a flex row; this must be a column. */
  display: block;
  position: absolute;
  inset-inline-start: -14px;
  inset-block-start: calc(100% + 12px);
  z-index: 50;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--ink);
  border: 1px solid rgba(237, 230, 216, 0.18);
  box-shadow: 0 18px 44px rgba(10, 18, 15, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
}

.rh-shell-has-sub[data-open="true"] > .rh-shell-sub {
  opacity: 1;
  visibility: visible;
}

.rh-shell-sub li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rh-shell-sub a {
  display: block;
  padding: 9px 18px;
  border: 0;
  white-space: nowrap;
  color: var(--on-ink-2);
}

.rh-shell-sub a:hover,
.rh-shell-sub a:focus-visible,
.rh-shell-sub .is-current > a {
  background: rgba(237, 230, 216, 0.09);
  color: var(--on-ink);
  border: 0;
}

/* --- the mobile trigger, hidden on desktop --- */
.rh-shell-menu-button {
  display: none;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 16px;
  font-family: var(--b);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-ink);
  background: none;
  border: 1.5px solid rgba(237, 230, 216, 0.34);
  border-radius: 0;
  cursor: pointer;
}

.rh-shell-menu-button::before {
  content: "";
  width: 16px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  box-sizing: content-box;
}

/* ---------------------------------------------------------------------
   3. Under 1000px the eleven items do not fit in Source Sans at 15px, so the
      whole nav becomes one Menu button and a full-height panel.
   --------------------------------------------------------------------- */
@media (max-width: 999px) {
  .rh-shell-nav {
    display: none;
  }

  .rh-shell-menu-button {
    display: inline-flex;
  }

  .rh-shell-bar {
    padding: 14px 18px;
  }

  .rh-shell-mark img {
    width: 38px;
    height: 38px;
  }

  .rh-shell-wm b {
    font-size: 17px;
  }

  .rh-shell-wm i {
    font-size: 8.5px;
    letter-spacing: 0.26em;
    margin-top: 3px;
  }
}

/* Between 1000 and 1180 tighten the gap rather than wrap the bar. */
@media (min-width: 1000px) and (max-width: 1180px) {
  .rh-shell-nav > ul {
    gap: 18px;
  }

  .rh-shell-nav a,
  .rh-shell-sub-toggle {
    font-size: 14.5px;
  }

  .rh-shell-bar {
    padding-inline: 22px;
  }
}

/* ---------------------------------------------------------------------
   4. The mobile panel — full-height ink, focus trapped by 10-shell.js.
   --------------------------------------------------------------------- */
.rh-shell-panel[hidden] {
  display: none !important;
}

.rh-shell-panel {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--b);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.rh-shell-panel-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 14px 18px 34px;
}

.rh-shell-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-block-end: 1px solid rgba(237, 230, 216, 0.14);
}

.rh-shell-panel-mark {
  display: block;
  line-height: 1;
}

.rh-shell-panel-mark b {
  display: block;
  font-family: var(--d);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--on-ink);
}

.rh-shell-panel-mark i {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--clay);
  margin-top: 3px;
}

.rh-shell-panel-close {
  min-height: 44px;
  padding: 9px 16px;
  font-family: var(--b);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-ink);
  background: none;
  border: 1.5px solid rgba(237, 230, 216, 0.34);
  border-radius: 0;
  cursor: pointer;
}

.rh-shell-panel-close:focus-visible,
.rh-shell-panel-nav a:focus-visible,
.rh-shell-panel-contact a:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

.rh-shell-panel-nav {
  display: block; /* see the note on .rh-shell-nav — phase1.css hides bare <nav> under 900px */
  flex: 1 1 auto;
  padding-block-start: 8px;
}

.rh-shell-panel-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.rh-shell-panel-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rh-shell-panel-nav a {
  display: block;
  padding: 15px 2px;
  border-block-end: 1px solid rgba(237, 230, 216, 0.1);
  font-family: var(--d);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--on-ink);
  text-decoration: none;
}

.rh-shell-panel-nav .is-current > a {
  color: var(--on-ink);
  box-shadow: inset 3px 0 0 var(--rust);
  padding-inline-start: 12px;
}

/* T7-018 (fix-6b): every other panel item is title-case Fraunces at 21px
   (see .rh-shell-panel-nav a above); Sign in was the one label forced to
   caps, so the panel read as ten sentence-case rows and one shouting one.
   The label text itself is already "Sign in" (title case) - only the
   transform needs to go. Kept as its own rule (not folded into the shared
   .rh-shell-panel-nav a) so a future deliberate distinction has somewhere
   to live; today it matches the sibling items on every property that
   matters visually. */
.rh-shell-panel-nav .rh-shell-signin > a {
  color: var(--on-ink);
  font-family: var(--d);
  font-size: 21px;
  font-weight: 400;
}

.rh-shell-panel-contact {
  margin: 22px 0 0;
  padding: 0;
  max-width: none;
  font-size: 15px;
  color: var(--on-ink-2);
}

.rh-shell-panel-contact a {
  color: var(--on-ink-2);
  text-decoration: none;
}

/* Scroll lock while the panel is open. The padding compensates for the
   scrollbar the lock removes, so the page underneath does not jump. */
html.rh-shell-locked,
html.rh-shell-locked body {
  overflow: hidden;
}

html.rh-shell-locked body {
  padding-right: var(--rh-shell-scrollbar, 0px);
}

/* ---------------------------------------------------------------------
   5. Footer — comp .ft: ink ground, cream headings on ink, sage links.
      The headings used to be dark green on dark green. They are now
      var(--on-ink) at 12.5px letterspaced caps, which is the comp rule.
   --------------------------------------------------------------------- */
.rh-shell-footer {
  background: var(--ink);
  color: var(--on-ink-2);
  font-family: var(--b);
  font-size: 14px;
  line-height: 1.6;
}

.rh-shell-footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 54px 34px 48px;
  display: grid;
  gap: 34px 38px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 700px) {
  .rh-shell-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .rh-shell-footer-inner {
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  }
}

.rh-shell-footer .rh-shell-wm b {
  color: var(--on-ink);
  font-size: 20px;
}

.rh-shell-footer-desc,
.rh-shell-footer-note,
.rh-shell-footer address {
  margin: 14px 0 0;
  padding: 0;
  max-width: 34ch;
  font-style: normal;
  color: var(--on-ink-2);
}

.rh-shell-footer-note {
  color: var(--clay);
  font-size: 13px;
}

.rh-shell-footer address a,
.rh-shell-footer-col a {
  color: var(--on-ink-2);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.rh-shell-footer address a:hover,
.rh-shell-footer address a:focus-visible,
.rh-shell-footer-col a:hover,
.rh-shell-footer-col a:focus-visible {
  color: var(--on-ink);
  border-block-end-color: var(--clay);
}

.rh-shell-footer a:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

.rh-shell-footer-col h2 {
  font-family: var(--b);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink);
  margin: 0 0 10px;
  line-height: 1.3;
}

.rh-shell-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.rh-shell-footer-col li {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 699px) {
  .rh-shell-footer-inner {
    padding: 42px 18px 40px;
  }
}

/* ---------------------------------------------------------------------
   6. Belt and braces: nothing in the shell may push the page sideways.
   --------------------------------------------------------------------- */
/* No overflow-x on the header: the Classes dropdown is absolutely positioned
   below the bar and clipping would eat it. The bar collapses to a Menu button
   below 1000px, which is what keeps it inside the viewport. */
.rh-shell-header,
.rh-shell-footer {
  max-width: 100%;
}

.rh-shell-footer {
  overflow-x: clip;
}

/* ============================================================
   THE LOGO'S FOCUS RING — finding T7-015.

   The mark is the second tab stop on every page of the site and it
   had no :focus-visible rule of its own, so it fell through to the
   parent theme's default: a 2px river-green ring drawn on the ink
   header, 1.63:1, which is to say invisible. The very next tab stop
   already used 2px rust.

   Two colors, so it cannot disappear against either the ink header
   or the mark itself: a cream inner ring drawn by the box-shadow,
   then the house rust ring 3px outside it.
   ============================================================ */

.rh-shell-mark:focus-visible,
.rh-shell-panel-mark:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--on-ink);
}

/* ============================================================
   NAV TEXT NEVER BREAKS MID-WORD — finding T7-021 (fix-6b).

   The shell nav lives outside main#riverhouse-public-main, so style.css's
   phone overflow-wrap:anywhere rule never reached it - there was no live
   defect here. Stated explicitly anyway, since a nav link is exactly the
   kind of short label (a person's name, a page title) that should wrap at
   a space or not at all, never mid-word.
   ============================================================ */
.rh-shell-nav a,
.rh-shell-panel-nav a {
  overflow-wrap: normal;
  word-break: normal;
}