/* A house sign and brass doorplates, built around WordPress's native navigation. */
.ff-header.ff-house-navigation {
  --house-ink: #15202b;
  --house-cream: #edded4;
  --house-brass: #d09a78;
  position: relative;
  z-index: 20;
  isolation: isolate;
  padding: 1.55rem 4vw 1.7rem !important;
  color: var(--house-cream);
  background:
    radial-gradient(ellipse at 18% 0, #40587244, transparent 52%),
    repeating-linear-gradient(90deg, #ffffff02 0 1px, transparent 1px 5px),
    linear-gradient(120deg, #202d3bee, #141d27ee 68%, #222e3aee);
  border: 0;
  border-top: 1px solid #ad816555;
  border-bottom: 6px double #bd9277;
  box-shadow: inset 0 5px 0 #10171f77, inset 0 -5px 0 #070f1744, 0 5px 16px #0e131930;
}
.ff-header.ff-house-navigation::before,
.ff-header.ff-house-navigation::after {
  content: "";
  position: absolute;
  inset: .5rem .65rem .55rem;
  border: 1px solid #c9977838;
  border-radius: 18px 18px 3px 3px;
  pointer-events: none;
  z-index: -1;
}
.ff-header.ff-house-navigation::after {
  inset: .78rem .95rem .83rem;
  border-color: #c9977818;
}
.ff-header .ff-house-navigation-inner { max-width: 1440px; gap: 2.2rem; }
.ff-header .ff-house-sign { gap: 1rem; flex-shrink: 0; }
.ff-header .ff-house-wordmark { text-align: center; }
.ff-header .ff-brand {
  margin: 0;
  font: 400 clamp(1.35rem, 2.2vw, 1.85rem)/1.15 Georgia, "Times New Roman", serif !important;
  letter-spacing: .08em;
  text-shadow: 0 2px 1px #060c13;
}
.ff-header .ff-brand a { color: var(--house-cream); text-decoration: none; }
.ff-header .ff-brand a:hover { color: #f6ede8; }
.ff-header .ff-house-subtitle {
  margin: .62rem 0 0;
  color: #d5b099;
  font: .64rem/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .29em;
  text-transform: uppercase;
}
.ff-house-crest {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 62px;
  width: 62px;
  height: 76px;
  color: #d0a68b;
  border: 1px solid #aa7859;
  border-radius: 48% 48% 4px 4px;
  box-shadow: inset 0 0 0 4px #242f3b, inset 0 0 0 5px #a4725355;
  background: radial-gradient(ellipse at 50% 20%, #54698022, transparent 80%);
}
.ff-house-crest::before { content: "✧"; position: absolute; top: 6px; font: .9rem Georgia, serif; }
.ff-house-crest::after { content: "❧"; position: absolute; bottom: 2px; font: 1.25rem Georgia, serif; }
.ff-house-crest > span { margin-top: .15rem; font: 1.3rem/1 Georgia, serif; letter-spacing: -.09em; }
.ff-house-crest > span > span { display: inline-block; padding: 0 .1rem; font-size: .7rem; font-style: italic; }
.ff-header .ff-house-directions { flex: 1; max-width: 820px; margin: 0; }
.ff-house-invitation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 .7rem;
  color: #d7b39d;
  font: italic .8rem/1.3 Georgia, "Times New Roman", serif;
  letter-spacing: .04em;
}
.ff-house-invitation::before,
.ff-house-invitation::after { content: ""; height: 1px; flex: 1; max-width: 90px; background: linear-gradient(90deg, transparent, #be917580); }
.ff-house-invitation::after { transform: rotate(180deg); }
.ff-header .ff-house-menu {
  margin: 0;
  font: .82rem/1.35 Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
  color: var(--house-cream);
}
.ff-house-menu .wp-block-navigation__container { gap: .5rem; width: 100%; justify-content: flex-end; }
.ff-header .ff-house-menu .wp-block-navigation-item,
.ff-header .ff-house-menu .wp-block-navigation-item:last-child { padding: 0; border: 0; }
.ff-house-menu .wp-block-navigation-item__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .75rem .85rem;
  border: 1px solid #ba866577;
  color: #edded4 !important;
  background: linear-gradient(180deg, #586d831c, #09131e6b);
  box-shadow: inset 0 0 0 3px #18222c99, inset 0 0 0 4px #be825c18, 0 3px 0 #0d1721;
  text-decoration: none;
  border-radius: 2px 2px 6px 6px;
  text-align: center;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.ff-house-menu .wp-block-navigation-item__content::before,
.ff-house-menu .wp-block-navigation-item__content::after { content: ""; position: absolute; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: #b38060; }
.ff-house-menu .wp-block-navigation-item__content::before { left: 5px; }
.ff-house-menu .wp-block-navigation-item__content::after { right: 5px; }
.ff-header .ff-house-menu .wp-block-navigation-item__content:hover,
.ff-header .ff-house-menu .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.ff-header .ff-house-menu .wp-block-navigation-item__content[aria-current="page"] {
  color: #f8f2ee !important;
  border-color: #d3ad94;
  background: linear-gradient(180deg, #73503b8c, #2e3a46);
  text-decoration: none;
}
.ff-header a:focus-visible,
.ff-header button:focus-visible { outline: 3px solid #dcbca8; outline-offset: 4px; }
.ff-header .ff-house-menu .wp-block-navigation__responsive-container-open,
.ff-header .ff-house-menu .wp-block-navigation__responsive-container-close {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .65rem;
  border: 1px solid #c5906f;
  border-radius: 50% 50% 2px 2px;
  background: #253343;
  color: #edded4;
  box-shadow: inset 0 0 0 3px #192430;
}
.ff-header .ff-house-menu .wp-block-navigation__responsive-container-open:hover,
.ff-header .ff-house-menu .wp-block-navigation__responsive-container-close:hover { background: #364351; }
.ff-header.ff-house-navigation .wp-block-navigation.ff-house-menu .wp-block-navigation__responsive-container.is-menu-open {
  animation: none;
  opacity: 1;
  color: #edded4;
  padding: 1.7rem max(1.5rem, env(safe-area-inset-right)) 2.5rem max(1.5rem, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 0, #4a5e7333, transparent 60%), repeating-linear-gradient(90deg, #cc9e8104 0 1px, transparent 1px 6px), #151f2a;
  border: 8px double #a57455;
  overflow-y: auto;
}
.ff-house-menu .is-menu-open .wp-block-navigation__responsive-container-content {
  position: relative;
  align-items: stretch;
  padding-top: 5rem;
}
.ff-house-menu .is-menu-open .wp-block-navigation__responsive-container-content::before {
  content: "The Conservatory";
  display: block;
  margin-bottom: 2rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid #c48b6877;
  color: #e3cabb;
  text-align: center;
  font: 1.8rem/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
}
.ff-house-menu .is-menu-open .wp-block-navigation__container { align-items: stretch; gap: .8rem; width: 100%; max-width: 500px; margin: 0 auto; }
.ff-header .ff-house-menu .is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch; }
.ff-header .ff-house-menu .is-menu-open .wp-block-navigation-item__content { display: flex; width: 100%; min-height: 60px; padding: 1rem 1.5rem; font-size: 1.2rem; }
@media (max-width: 1180px) and (min-width: 701px) {
  .ff-header .ff-house-navigation-inner { justify-content: center; gap: 1.35rem; }
  .ff-header .ff-house-directions { flex-basis: 100%; }
  .ff-house-invitation { display: none; }
  .ff-house-menu .wp-block-navigation__container { justify-content: center; }
}
/* The native mobile overlay opens a little earlier so the house sign never crowds it. */
@media (max-width: 700px) {
  .ff-header.ff-house-navigation { padding: 1.2rem 1.45rem 1.3rem !important; }
  .ff-header .ff-house-navigation-inner { flex-wrap: nowrap; gap: .9rem; }
  .ff-header .ff-house-sign { gap: .65rem; flex-shrink: 1; min-width: 0; }
  .ff-header .ff-brand { font-size: clamp(1.1rem, 5vw, 1.45rem) !important; letter-spacing: .045em; }
  .ff-header .ff-house-subtitle { font-size: .5rem; letter-spacing: .18em; margin-top: .5rem; }
  .ff-header .ff-house-crest { flex-basis: 43px; width: 43px; height: 59px; }
  .ff-house-crest > span { font-size: 1rem; }
  .ff-house-crest::before { top: 4px; font-size: .7rem; }
  .ff-house-crest::after { bottom: 2px; font-size: 1rem; }
  .ff-header .ff-house-directions { flex: 0 0 auto; }
  .ff-house-invitation { display: none; }
  .ff-header .ff-house-menu .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .ff-header .ff-house-menu .wp-block-navigation__responsive-container-open { display: flex !important; }
  .ff-header .ff-house-menu .wp-block-navigation__responsive-container-close { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-house-navigation a,
  .ff-house-navigation button { transition: none !important; }
}
/* The house map is a prominent part of the header, never hidden in a room. */
.ff-header.ff-house-navigation .ff-room-directory.ff-header-directory {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1440px;
  margin: 1.2rem auto 0 !important;
  border: 0;
}
.ff-header.ff-house-navigation .ff-header-directory > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: none;
  min-height: 54px;
  padding: .55rem 1.1rem;
  margin: 0;
  border: 4px double #775641;
  border-radius: 2px 2px 9px 9px;
  background: linear-gradient(105deg, #bc8b6d, #dbbba7 47%, #c29173);
  color: #212c38;
  box-shadow: inset 0 0 0 1px #e8d3c64d, 0 4px 0 #0e1924;
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-style: normal;
}
.ff-header.ff-house-navigation .ff-header-directory > summary::-webkit-details-marker { display: none; }
.ff-header.ff-house-navigation .ff-header-directory > summary::before { content: none; }
.ff-header.ff-house-navigation .ff-header-directory > summary:hover { background: linear-gradient(105deg, #cb997a, #e3caba 47%, #cea287); }
.ff-header.ff-house-navigation .ff-header-directory > summary:focus-visible { outline: 3px solid #e3c9b9; outline-offset: 4px; }
.ff-header.ff-house-navigation .ff-header-directory .ff-directory-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  font: 400 1.3rem/1.2 var(--ff-fairy-title, Georgia, serif);
}
.ff-header.ff-house-navigation .ff-header-directory .ff-directory-heading small {
  font: italic .75rem/1.3 Georgia, serif;
  color: #374452;
}
.ff-header.ff-house-navigation .ff-header-directory .ff-directory-ornament { font: 1.7rem/1 Georgia, serif; }
.ff-header.ff-house-navigation .ff-header-directory .ff-directory-chevron { font: 1.3rem/1 Georgia, serif; }
.ff-header.ff-house-navigation .ff-header-directory[open] .ff-directory-chevron { transform: rotate(180deg); }
.ff-header.ff-house-navigation .ff-header-directory nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  max-height: none;
  margin: .9rem 0 0;
  padding: .8rem;
  border: 6px double #ba8a6c;
  background: #202b37;
  box-shadow: 0 8px 18px #080e1455;
}
.ff-header.ff-house-navigation .ff-header-directory nav a {
  display: block;
  min-width: 0;
  min-height: 78px;
  padding: .85rem 1rem;
  border: 1px solid #bc8f73;
  border-radius: 2px;
  color: #242f3b;
  background: linear-gradient(135deg, #ecdcd2, #dec1af);
  text-decoration: none;
  font: 400 1.35rem/1.25 var(--ff-fairy-title, Georgia, serif);
}
.ff-header.ff-house-navigation .ff-header-directory nav a:hover,
.ff-header.ff-house-navigation .ff-header-directory nav a[aria-current="page"] { background: #f1e5de; box-shadow: inset 3px 0 #80583f; }
.ff-header.ff-house-navigation .ff-header-directory nav small {
  display: block;
  margin-top: .4rem;
  font: .66rem/1.5 system-ui, sans-serif;
  color: #425264;
}
/* A quiet brass return plate for long visits, above mobile safe areas. */
.ff-back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 48px;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 4px double #d29a77;
  border-radius: 45% 45% 3px 3px;
  background: #202e3c;
  box-shadow: 0 4px 14px #060d1466;
  color: #ecdbd1;
  font: .76rem/1.25 Georgia, serif;
  text-decoration: none;
}
.ff-back-to-top[hidden] { display: none !important; }
.ff-back-to-top > span:first-child { font-size: 1.25rem; line-height: 1; }
.ff-back-to-top:hover { background: #394858; color: #f3e9e3; }
.ff-back-to-top:focus-visible { outline: 3px solid #e3c9b9; outline-offset: 4px; }
@media (max-width: 1050px) {
  .ff-header.ff-house-navigation .ff-header-directory nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ff-header.ff-house-navigation .ff-room-directory.ff-header-directory { margin-top: 1rem !important; }
  .ff-header.ff-house-navigation .ff-header-directory > summary { min-height: 50px; padding: .5rem .75rem; gap: .7rem; }
  .ff-header.ff-house-navigation .ff-header-directory .ff-directory-heading { display: block; font-size: 1.23rem; }
  .ff-header.ff-house-navigation .ff-header-directory .ff-directory-heading small { display: block; margin-top: .2rem; font-size: .66rem; }
  .ff-header.ff-house-navigation .ff-header-directory nav { grid-template-columns: minmax(0, 1fr); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; gap: .45rem; padding: .45rem; border-width: 4px; }
  .ff-header.ff-house-navigation .ff-header-directory nav a { min-height: 66px; padding: .7rem .9rem; font-size: 1.24rem; }
  .ff-back-to-top { padding: .6rem; }
  .ff-back-to-top > span:last-child { display: none; }
}
@media print {
  .ff-header.ff-house-navigation .ff-room-directory.ff-header-directory,
  .ff-back-to-top { display: none !important; }
}

