/* ===========================================================================
   Chrome: the top bar, the header and its menus, the drawer, the phone call
   bar, the footer and the house at dusk.

   The header and footer are ONE design in two renders: the theme prints the
   Elementor-shaped markup generated from src/pages.py (tb_header / tb_footer),
   and with Elementor Pro the same trees are Theme Builder templates the owner
   edits. Both sit inside `.site-header` / `.site-footer`, which the theme
   always prints, so every rule below serves both.
   =========================================================================== */

/* -------------------------------------------------------- the header shell */

.mh .site-header{
  position:fixed;left:0;right:0;top:var(--wp-admin--admin-bar--height, 0px);z-index:200;
  color:var(--on-dark);
  transition:transform .35s var(--ease);
}
.mh .site-header::before{                       /* the scrim that keeps the nav legible over any hero */
  content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,13,.78),rgba(12,12,13,.35) 65%,rgba(12,12,13,0));
  transition:opacity .3s var(--ease);
}
.mh .site-header.is-scrolled::before{opacity:0}
@media (max-width:600px){ .mh.admin-bar .site-header{top:0} }

/* ---------------------------------------------------------------- top bar */

body .elementor .mh-el-topbar{
  height:var(--topbar-h);overflow:hidden;
  border-bottom:1px solid rgba(216,192,152,.14);
  transition:margin .3s var(--ease),opacity .25s var(--ease);
}
body .elementor .mh-el-topbar > .elementor-container{max-width:min(1440px,100%);padding-inline:var(--gutter);height:100%}
body .elementor .mh-el-topbar .elementor-widget-wrap{height:100%;align-content:center}
.mh .site-header.is-scrolled .mh-el-topbar{margin-top:calc(-1 * var(--topbar-h));opacity:0}
@media (max-width:767px){ body .elementor .mh-el-topbar{display:none} }

.mh .topbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-width:0;
  font-size:.8rem;letter-spacing:.04em;color:var(--on-dark-2);white-space:nowrap}
.mh .topbar a{color:var(--on-dark-2);text-decoration:none}
.mh .topbar a:hover{color:var(--gold-hi)}
.mh .topbar-l,.mh .topbar-r{display:flex;align-items:center;gap:1.4rem;min-width:0}
/* when space runs short the message shortens, never its link */
.mh .topbar-c{flex:1;min-width:0;display:flex;justify-content:center;align-items:baseline;gap:.45em;overflow:hidden}
.mh .topbar-c a{flex:none;color:var(--gold);font-weight:500}
.mh .topbar-announce{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--on-dark)}
@media (max-width:1280px){ .mh .topbar-addr{display:none} }
.mh .topbar .ico{width:14px;height:14px;color:var(--gold);margin-right:.4rem;vertical-align:-2px}
.mh .topbar-social{display:inline-flex;gap:.8rem}
.mh .topbar-social a{display:inline-grid;place-items:center}
.mh .topbar-social .ico{margin:0;width:15px;height:15px}
@media (max-width:1024px){ .mh .topbar-c{display:none} }

/* open / closed — the pill also used in the hero plaque and the footer */
.mh .open-status{display:inline-flex;align-items:center;gap:.55rem}
.mh .open-status .dot{width:8px;height:8px;border-radius:50%;background:var(--on-dark-3);flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.mh .open-status.is-open .dot{background:var(--open);box-shadow:0 0 0 3px rgba(127,191,122,.22),0 0 12px rgba(127,191,122,.55)}
.mh .open-status.is-closed .dot{background:var(--closed)}

/* ------------------------------------------------------------- main header */

body .elementor .mh-el-header{
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease);
}
body .elementor .mh-el-header > .elementor-container{
  max-width:min(1440px,100%);padding-inline:var(--gutter);min-height:var(--header-h);
  align-items:center;flex-wrap:nowrap;
}
.mh .site-header.is-scrolled .mh-el-header{
  background-color:rgba(17,17,18,.94);
  box-shadow:0 1px 0 rgba(216,192,152,.22),0 18px 40px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
}
body .elementor .mh-el-header .elementor-widget-wrap{align-items:center;align-content:center;flex-wrap:nowrap;gap:1rem}
body .elementor .mh-el-header .elementor-widget:not(:last-child){margin-bottom:0}
body .elementor .mh-el-header .elementor-widget{width:auto}
/* The three columns: the logo and the actions size to their content, the
   menu takes the rest. Deliberate here — the header must never stack the way
   Elementor stacks columns on phones. */
body .elementor .mh-el-header .elementor-column{width:auto}
/* …nor take the top margin stacked columns get on phones (it made the bar 82px, not 66) */
body .elementor .elementor-section.mh-el-header > .elementor-container > .elementor-column + .elementor-column{margin-top:0}
body .elementor .mh-el-header .elementor-column:first-child{flex:0 0 auto}
body .elementor .mh-el-header .mh-el-nav{flex:1 1 auto}
body .elementor .mh-el-header .mh-el-act{flex:0 0 auto}
body .elementor .mh-el-nav > .elementor-widget-wrap{justify-content:center}
body .elementor .mh-el-act > .elementor-widget-wrap{justify-content:flex-end}

body .elementor .mh-el-logo img{display:block;width:clamp(150px, 11vw + 40px, 212px);height:auto;transition:width .3s var(--ease)}
.mh .site-header.is-scrolled .mh-el-logo img{width:clamp(140px, 9vw + 40px, 180px)}
body .elementor .mh-el-logo a{display:block}
@media (max-width:1024px){
  body .elementor .mh-el-nav{display:none}
  body .elementor .mh-el-header .elementor-column:first-child{flex:1 1 auto}
}
@media (max-width:600px){
  body .elementor .mh-el-logo img,.mh .site-header.is-scrolled .mh-el-logo img{width:142px}
  body .elementor .mh-el-header .mh-el-reserve{display:none}
}

/* ------------------------------------------------------------------- nav */

.mh .mainnav{display:flex;justify-content:center}
.mh .mainnav-list,.mh .mainnav > ul{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.mh .mainnav li{position:relative;list-style:none}
.mh .mainnav-link,.mh .mainnav > ul > li > a{
  display:inline-flex;align-items:center;gap:.4rem;padding:.75rem .95rem;
  font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--on-dark);text-decoration:none;white-space:nowrap;position:relative;
}
.mh .mainnav-link::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.45rem;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease);
}
.mh .mainnav-link:hover,.mh .mainnav li:focus-within > .mainnav-link{color:var(--gold-hi)}
.mh .mainnav-link:hover::after,.mh .mainnav .is-current > .mainnav-link::after{transform:scaleX(1)}
.mh .mainnav .is-current > .mainnav-link{color:var(--gold)}
.mh .mainnav-link .ico{width:9px;height:9px;opacity:.75;transition:transform .25s var(--ease)}
.mh .mainnav .has-sub:hover > .mainnav-link .ico,.mh .mainnav .has-sub.is-open > .mainnav-link .ico{transform:rotate(180deg)}

/* dropdowns: a small gilt-edged card */
.mh .mainnav-sub{
  position:absolute;left:50%;top:calc(100% + 6px);min-width:232px;z-index:5;
  margin:0;padding:.7rem;list-style:none;
  background:rgba(17,17,18,.97);border:1px solid var(--line-dark-strong);border-radius:var(--r-sm);
  box-shadow:0 28px 60px -24px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s;
}
.mh .mainnav-sub::before{                        /* the caret */
  content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;margin-left:-5px;
  background:var(--ink);border-left:1px solid var(--line-dark-strong);border-top:1px solid var(--line-dark-strong);transform:rotate(45deg);
}
.mh .mainnav-sub::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* hover bridge */
.mh .mainnav .has-sub.is-open > .mainnav-sub,
.mh .mainnav .has-sub:focus-within > .mainnav-sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
@media (hover:hover){
  .mh .mainnav .has-sub:hover > .mainnav-sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
}
.mh .mainnav-sub a{
  display:block;padding:.6rem .9rem;border-radius:2px;
  font-family:var(--font-serif);font-size:1.18rem;font-weight:600;letter-spacing:.01em;color:var(--on-dark);text-decoration:none;
}
.mh .mainnav-sub a:hover,.mh .mainnav-sub .is-current a{background:rgba(216,192,152,.1);color:var(--gold-hi)}
.mh .mainnav-sub a small{display:block;font-family:var(--font-text);font-size:.74rem;letter-spacing:.06em;color:var(--on-dark-3);font-weight:400}

/* Elementor buttons in the header row */
body .elementor .mh-el-reserve .elementor-button{min-height:44px;padding:.65rem 1.2rem;font-size:.72rem}

/* ---------------------------------------------------------------- burger */

.mh .burger{
  display:none;align-items:center;justify-content:center;width:46px;height:46px;flex:none;
  border:1px solid var(--line-dark-strong);border-radius:var(--r-sm);background:transparent;color:var(--gold-hi);cursor:pointer;text-decoration:none;
}
.mh .burger span{display:block;position:relative;width:20px;height:1.5px;background:currentColor}
.mh .burger span::before,.mh .burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor}
.mh .burger span::before{top:-6px}
.mh .burger span::after{top:6px;width:13px}
.mh .burger:hover{border-color:var(--gold);color:var(--white)}
@media (max-width:1024px){ .mh .burger{display:inline-flex} }

/* ---------------------------------------------------------------- drawer */

.mh .drawer{position:fixed;inset:0;z-index:400;visibility:hidden;pointer-events:none}
.mh .drawer.is-open,.mh .drawer:target{visibility:visible;pointer-events:auto}
.mh .drawer-shade{position:absolute;inset:0;border:0;background:rgba(8,5,4,.6);opacity:0;transition:opacity .3s var(--ease);cursor:pointer}
.mh .drawer.is-open .drawer-shade,.mh .drawer:target .drawer-shade{opacity:1}
.mh .drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:1.6rem;padding:1.2rem 1.5rem 0;
  background-color:var(--ink);background-image:var(--glow-gold);color:var(--on-dark);
  border-left:1px solid var(--line-dark);
  transform:translateX(100%);transition:transform .38s var(--ease);
}
.mh .drawer.is-open .drawer-panel,.mh .drawer:target .drawer-panel{transform:none}
.mh .drawer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mh .drawer-brand img{display:block;width:170px}
.mh .drawer-close{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--line-dark-strong);border-radius:var(--r-sm);color:var(--gold-hi)}
.mh .drawer-close .ico{width:18px;height:18px}
.mh .drawer-note{margin:0;padding:.8rem 1rem;border:1px solid var(--line-dark);border-radius:var(--r-sm);font-size:.88rem;color:var(--on-dark-2)}
.mh .drawer-note a{color:var(--gold)}
.mh .drawer-nav ul{list-style:none;margin:0;padding:0}
.mh .drawer-nav > ul > li{border-bottom:1px solid var(--line-dark)}
.mh .drawer-nav > ul > li > a{display:block;padding:.95rem 0;font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);text-decoration:none}
.mh .drawer-nav li li a{display:block;padding:.35rem 0 .35rem 1rem;font-family:var(--font-serif);font-size:1.25rem;font-weight:600;color:var(--on-dark-2);text-decoration:none;border-left:1px solid var(--line-dark)}
.mh .drawer-nav li ul{padding-bottom:.9rem;margin-top:-.25rem}
.mh .drawer-nav a:hover,.mh .drawer-nav .is-current > a{color:var(--gold-hi)}
.mh .drawer-cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mh .drawer-foot{margin-top:auto;display:grid;gap:.75rem;font-size:.92rem;color:var(--on-dark-2);padding-bottom:1.2rem}
.mh .drawer-foot a{color:var(--on-dark);text-decoration:none}
.mh .drawer-foot p{margin:0;display:flex;gap:.6rem}
.mh .drawer-foot .ico{width:16px;height:16px;color:var(--gold);margin-top:.3rem}
.mh .drawer-house{
  height:118px;margin:0 -1.5rem;flex:none;
  background:url("../img/house-night-still.svg") center bottom / auto 118px no-repeat,linear-gradient(180deg,rgba(17,17,18,0),#1F2226 70%,var(--ink));
}
body.drawer-open{overflow:hidden}

/* ---------------------------------------------------------- phone call bar */

.mh .callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  grid-template-columns:1fr 1fr 1.25fr;gap:.5rem;
  padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(17,17,18,.96);border-top:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateY(110%);transition:transform .3s var(--ease);
}
.mh .callbar.is-on{transform:none}
.mh .callbar .btn{min-height:46px;padding:.6rem .5rem;font-size:.68rem;letter-spacing:.12em}
@media (max-width:767px){
  .mh .callbar{display:grid}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------------ footer */

.mh .site-footer{position:relative;background:var(--ink);color:var(--on-dark-2)}

/* the house at dusk: the band the footer rises out of */
body .elementor .mh-el-houseband{
  --house-h:clamp(170px, 12vw + 110px, 300px);
  position:relative;text-align:center;
  padding:clamp(4rem, 3rem + 4vw, 6.5rem) 0 calc(var(--house-h) + 2.5rem);
  background:url("../img/house-night.svg") center bottom / auto var(--house-h) no-repeat,var(--sky-dusk);
  background-color:#E9C99D;           /* the sky where the buttons sit: what the gradient shows behind them */
  color:var(--text);
}
@media (prefers-reduced-motion:reduce){
  body .elementor .mh-el-houseband{background-image:url("../img/house-night-still.svg"),var(--sky-dusk)}
}
body .elementor .mh-el-houseband > .elementor-container{max-width:var(--narrow)}
body .elementor .mh-el-houseband .elementor-widget-wrap{justify-content:center}
body .elementor .mh-el-houseband .elementor-widget-heading .elementor-heading-title{color:var(--ink)}
body .elementor .mh-el-houseband .title .elementor-heading-title{margin-inline:auto;max-width:20ch}
body .elementor .mh-el-houseband .elementor-widget.elementor-widget-text-editor{color:var(--text-2)}
body .elementor .mh-el-houseband .lede p{margin-inline:auto}
body .elementor .mh-el-houseband .btnw-ghost .elementor-button{border-color:rgba(43,31,24,.55);color:var(--ink)}
body .elementor .mh-el-houseband .btnw-ghost .elementor-button:hover{border-color:var(--ink);background:rgba(255,255,255,.25)}

body .elementor .mh-el-footer{
  background-color:var(--ink);background-image:var(--glow-gold);color:var(--on-dark-2);
  padding:clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
body .elementor .mh-el-footer > .elementor-container{max-width:min(1360px,100%)}
body .elementor .mh-el-footer .elementor-column{padding-inline:clamp(.75rem, 1.5vw, 1.75rem)}
body .elementor .mh-el-footer .elementor-column:first-child{padding-left:0}
body .elementor .mh-el-footer .elementor-column:last-child{padding-right:0}
body .elementor .mh-el-footer .elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1px solid var(--line-dark);
}
body .elementor .mh-el-footer .elementor-widget.elementor-widget-text-editor{color:var(--on-dark-2);font-size:.98rem;line-height:1.75}
body .elementor .mh-el-footer .elementor-widget-text-editor a{color:var(--on-dark);font-weight:400;text-decoration:none}
body .elementor .mh-el-footer .elementor-widget-text-editor a:hover{color:var(--gold-hi);text-decoration:underline}
body .elementor .mh-el-footer .elementor-widget-text-editor strong{color:var(--on-dark)}
body .elementor .mh-el-flogo img{width:min(300px,100%);display:block}
body .elementor .mh-el-links .elementor-icon-list-items{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
body .elementor .mh-el-links .elementor-icon-list-item a{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem 0;color:var(--on-dark);text-decoration:none}
body .elementor .mh-el-links .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--gold-hi)}
body .elementor .mh-el-links .elementor-icon-list-icon{width:6px;height:6px;flex:none;background:var(--gold-lo);transform:rotate(45deg)}
body .elementor .mh-el-links .elementor-icon-list-icon i,
body .elementor .mh-el-links .elementor-icon-list-icon svg{display:none}
body .elementor .mh-el-links .elementor-icon-list-text{color:var(--on-dark);font-size:.98rem;transition:color .2s var(--ease)}
@media (max-width:1024px){
  body .elementor .mh-el-footer > .elementor-container{flex-wrap:wrap}
  body .elementor .mh-el-footer .elementor-column{width:50%;padding:0 1rem 2.5rem}
}
@media (max-width:767px){
  body .elementor .mh-el-footer .elementor-column{width:100%;padding:0 0 2.2rem}
}

body .elementor .mh-el-footer-bottom{
  background:var(--ink);border-top:1px solid var(--line-dark);
  padding:1.3rem 0 1.5rem;font-size:.85rem;color:var(--on-dark-3);
}
body .elementor .mh-el-footer-bottom > .elementor-container{max-width:min(1360px,100%);align-items:center}
body .elementor .mh-el-footer-bottom .elementor-widget.elementor-widget-text-editor{color:var(--on-dark-3);font-size:.85rem}
body .elementor .mh-el-footer-bottom .elementor-widget-text-editor p{margin:0}
body .elementor .mh-el-footer-bottom a{color:var(--on-dark-2);text-decoration:none}
body .elementor .mh-el-footer-bottom a:hover{color:var(--white)}
body .elementor .mh-el-credit > .elementor-widget-wrap{justify-content:flex-end}
@media (max-width:767px){
  body .elementor .mh-el-footer-bottom{text-align:center}
  body .elementor .mh-el-credit > .elementor-widget-wrap{justify-content:center}
}
.mh .foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem 1.2rem}
@media (max-width:767px){ .mh .foot-legal{justify-content:center} }
.mh .ssq-credit{color:var(--on-dark-3);text-decoration:none;transition:color .2s var(--ease)}
.mh .ssq-credit:hover{color:var(--white)}

.mh .footer-social{display:flex;gap:.6rem;margin-top:1.4rem}
.mh .footer-social a{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-dark-strong);border-radius:50%;color:var(--gold);transition:background-color .2s var(--ease),color .2s var(--ease)}
.mh .footer-social a:hover{background:var(--gold);color:var(--ink)}
.mh .footer-social .ico{width:16px;height:16px}

/* Theme Builder header, while it is being edited, has no fixed wrapper */
body.elementor-editor-active .elementor-location-header{position:relative}
/* While a page is edited the header keeps its place over the hero but scrolls
   away with it, so it never sits on top of the section being worked on */
body.elementor-editor-active .site-header{position:absolute;top:0} /* the preview has no admin bar, though its height variable is still set */
