/* Family header — the ONE header for every OnePlace door (v1.4.1).
   Master copy: direct-standards/master-header/. Never edit a site's copy:
   change the master, bump VERSION in family-header.js, and run sync.mjs on
   each site. Every class is prefixed .fh so no site stylesheet collides.

   The form (DESIGN-STANDARD §THE HEADER ZONE; the owner's orders 2026-11-08
   and 2026-11-09, and the approved drawing of 2026-11-13): white bar,
   contained column · lockup (mark + name + "No middleman. Go direct.") ·
   an optional compact search box on pages with no large search of their
   own · the door's nav · the account cluster · the gold call-to-action
   ending the row · every item on ONE line, never wrapping.
   Signed in, the cluster is Saved (n) and ONE menu under the person's
   name. When the row is short of room the door's nav links fold, last
   first: into the name menu when signed in, into "More ▾" when signed out
   (never a single item). Tablet and phone: lockup · gold · Menu; the gold
   button stays in the bar at every width, with a short word on the
   narrowest phones, and the links and the name menu's items stand open
   inside Menu. */

.fh{
  --fh-ink:#23201B; --fh-muted:#6E675C; --fh-line:#E5DFD3; --fh-paper:#FAF7F2;
  --fh-card:#FFFFFF; --fh-accent:#E9A23B; --fh-accent-ink:#23201B; --fh-primary:#163A3F;
  --fh-col:1120px;
  display:block; background:#FFFFFF; border:0; border-bottom:1px solid var(--fh-line);
  position:sticky; top:0; z-index:1000;
  /* a site's own generic header{…} rules never reach in */
  margin:0; padding:0; width:auto; max-width:none; height:auto; min-height:0;
  box-shadow:none; float:none; border-radius:0;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--fh-ink); font-size:15.5px; line-height:1.3; text-align:left;
}
.fh *,.fh *::before,.fh *::after{box-sizing:border-box}
.fh-row{max-width:var(--fh-col);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fh-lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fh-ink);flex:none}
.fh-mark{display:block;height:32px;width:auto;flex:none}
.fh-name{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.05;white-space:nowrap;color:var(--fh-ink)}
.fh-name small{display:block;font-size:12px;font-weight:500;color:var(--fh-muted);letter-spacing:0;margin-top:2px}
.fh-links{display:contents}
.fh-link{color:var(--fh-ink);text-decoration:none;font:inherit;font-weight:600;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.fh-link:hover{text-decoration:underline}
.fh-spacer{flex:1 1 0;min-width:0}
.fh-acct{display:flex;align-items:center;gap:16px}
.fh-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:10px 18px;min-height:44px;font:inherit;font-size:15.5px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap}
.fh-btn:hover{filter:brightness(1.05);text-decoration:none}
.fh-gold{background:var(--fh-accent);color:var(--fh-accent-ink)}
.fh-cta .fh-cta-short{display:none}
.fh-small{padding:7px 14px;min-height:0;font-size:14px}
.fh-ghost{background:var(--fh-card);color:var(--fh-primary);border:1.5px solid var(--fh-primary)}
.fh-menu-btn{display:none;margin-left:auto}
.fh-wrap{position:relative;display:inline-block}
.fh-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--fh-paper);border:1px solid var(--fh-line);border-radius:10px;padding:10px 14px;min-width:220px;z-index:1100;text-align:left;box-shadow:0 8px 24px rgba(28,43,58,.12);display:flex;flex-direction:column;gap:10px;white-space:normal}
.fh-pop[hidden],.fh-more[hidden],.fh [hidden]{display:none}
.fh-more .fh-pop{left:0;right:auto;min-width:180px}
.fh-pop .fh-link{display:block;width:100%}
.fh-pop form{margin:0}

/* The one menu under the name (v1.4.0) */
.fh-toggle[aria-expanded="true"]{text-decoration:underline;text-underline-offset:4px}
.fh-pop.fh-acctmenu{min-width:250px;padding:8px;gap:0}
.fh-pop.fh-acctmenu .fh-link{padding:9px 10px;border-radius:7px}
.fh-pop.fh-acctmenu .fh-link:hover{background:#fff;text-decoration:none}
.fh-pop.fh-acctmenu .fh-link small{display:block;font-weight:400;color:var(--fh-muted);font-size:13px;margin-top:1px}
.fh-pop.fh-acctmenu hr{border:0;border-top:1px solid var(--fh-line);margin:6px 4px;width:auto;height:0;background:none}
.fh-fold{display:flex;flex-direction:column}

/* The compact search box, on pages with no large search of their own */
.fh-search{display:flex;align-items:center;gap:8px;flex:0 1 270px;min-width:200px;height:40px;margin:0;padding:0 10px 0 12px;background:#fff;border:1.5px solid var(--fh-line);border-radius:9px}
.fh-search:focus-within{border-color:var(--fh-primary)}
.fh-search svg{flex:none;width:16px;height:16px;color:var(--fh-muted)}
.fh-search input{flex:1;min-width:0;width:100%;height:auto;border:0;outline:0;background:none;box-shadow:none;margin:0;font:inherit;font-size:15px;color:var(--fh-ink);padding:0;-webkit-appearance:none;appearance:none}
.fh-search input::placeholder{color:var(--fh-muted);opacity:1}
.fh-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.fh-search.fh-in-menu{display:none}

/* While the page checks who is signed in: a quiet placeholder */
.fh-wait{display:inline-flex;gap:14px;align-items:center}
.fh-wait i{display:block;height:12px;border-radius:999px;background:#EDE8DE}

/* One line — family-header.js sets .fh-one once it has measured the fit. */
.fh-row.fh-one{flex-wrap:nowrap}
.fh-row.fh-one > *,.fh-row.fh-one .fh-links > *{flex-shrink:0;white-space:nowrap}
.fh-row.fh-one > .fh-search{flex-shrink:1}
.fh-row.fh-one .fh-links > .fh-spacer{flex:1 1 0;min-width:0}
.fh-row.fh-one .fh-pop{white-space:normal}

/* Menu form — 1000px and narrower, or .fh-menu when even the folded
   desktop row cannot fit. The same rules twice: once for the width, once
   for the class. The bar is lockup · gold · Menu; inside Menu the search
   box comes first and the name menu's items stand open under the name. */
@media (max-width:1000px){
  .fh .fh-row{gap:12px}
  .fh .fh-menu-btn{display:inline-flex;order:1;margin-left:0}
  .fh .fh-cta{order:0;margin-left:auto}
  .fh .fh-links{display:none;order:2;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0 4px}
  .fh .fh-row.fh-open .fh-links{display:flex}
  .fh .fh-links > .fh-spacer,.fh .fh-more{display:none}
  .fh .fh-row > .fh-search{display:none}
  .fh .fh-search.fh-in-menu{display:flex;flex:none;width:100%;height:44px}
  .fh .fh-acct{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
  .fh .fh-pop{position:static;box-shadow:none;min-width:0;margin-top:8px}
  .fh .fh-acct .fh-wrap{display:block;width:100%}
  .fh .fh-toggle{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fh-muted);cursor:default}
  .fh .fh-toggle:hover,.fh .fh-toggle[aria-expanded="true"]{text-decoration:none}
  .fh .fh-caret{display:none}
  .fh .fh-pop.fh-acctmenu,.fh .fh-pop.fh-acctmenu[hidden]{display:flex;background:none;border:0;padding:0;margin-top:6px;width:100%}
  .fh .fh-pop.fh-acctmenu .fh-link{padding:8px 0}
  .fh .fh-pop.fh-acctmenu .fh-link:hover{background:none;text-decoration:underline}
}
.fh .fh-row.fh-menu{gap:12px}
.fh .fh-row.fh-menu .fh-menu-btn{display:inline-flex;order:1;margin-left:0}
.fh .fh-row.fh-menu .fh-cta{order:0;margin-left:auto}
.fh .fh-row.fh-menu .fh-links{display:none;order:2;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0 4px}
.fh .fh-row.fh-menu.fh-open .fh-links{display:flex}
.fh .fh-row.fh-menu .fh-links > .fh-spacer,.fh .fh-row.fh-menu .fh-more{display:none}
.fh .fh-row.fh-menu > .fh-search{display:none}
.fh .fh-row.fh-menu .fh-search.fh-in-menu{display:flex;flex:none;width:100%;height:44px}
.fh .fh-row.fh-menu .fh-acct{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
.fh .fh-row.fh-menu .fh-pop{position:static;box-shadow:none;min-width:0;margin-top:8px}
.fh .fh-row.fh-menu .fh-acct .fh-wrap{display:block;width:100%}
.fh .fh-row.fh-menu .fh-toggle{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fh-muted);cursor:default}
.fh .fh-row.fh-menu .fh-toggle:hover,.fh .fh-row.fh-menu .fh-toggle[aria-expanded="true"]{text-decoration:none}
.fh .fh-row.fh-menu .fh-caret{display:none}
.fh .fh-row.fh-menu .fh-pop.fh-acctmenu,.fh .fh-row.fh-menu .fh-pop.fh-acctmenu[hidden]{display:flex;background:none;border:0;padding:0;margin-top:6px;width:100%}
.fh .fh-row.fh-menu .fh-pop.fh-acctmenu .fh-link{padding:8px 0}
.fh .fh-row.fh-menu .fh-pop.fh-acctmenu .fh-link:hover{background:none;text-decoration:underline}

/* Narrowest phones: the gold button stays in the bar with its short word
   (lockup · gold · Menu), so the one thing each site most wants pressed is
   on screen at every width. */
@media (max-width:560px){
  .fh .fh-name{font-size:19px}
  .fh .fh-row{gap:8px;padding-top:10px;padding-bottom:10px}
  /* v1.4.1: the lockup takes the room left beside the gold button and Menu, so the bar is one row on every
     phone; a long name breaks before its last dot and steps down a size instead of pushing Menu down. */
  .fh .fh-row{padding-left:14px;padding-right:14px;gap:6px}
  .fh .fh-lockup{flex:1 1 0;min-width:0;gap:8px}
  .fh .fh-name{min-width:0;white-space:normal;line-height:1.08;font-size:clamp(14px,4.4vw,19px)}
  .fh .fh-name small{white-space:normal;line-height:1.2}
  .fh .fh-cta{display:inline-flex;padding:8px 12px;min-height:39px;font-size:15px}
  .fh .fh-cta .fh-cta-long{display:none}
  .fh .fh-cta .fh-cta-short{display:inline}
  .fh .fh-menu-btn{min-height:39px;padding:8px 10px}
}
@media (max-width:360px){
  .fh .fh-mark{height:28px}
}

/* Printed pages carry no search box. */
@media print{.fh-search{display:none !important}}