/* Manor Properties — site header 2026.
   Markup: template part 861 ("New Header") — sticky cover with the site logo
   and the Main Menu shortcode. The menu carries only two action items plus the
   drawer toggle; the full navigation lives in the Mobile Menu drawer.
   Item classes nav-pill / nav-pill--ghost / nav-pill--red are set on the menu
   items themselves, so relabelling in Appearance > Menus keeps the styling. */

/* The theme's header ground is white and the sticky wrappers carry inline
   leading, which showed as a pale hairline between the bar and the hero.
   Zero the inline leading on every wrapper so no stray band of ground shows
   under the bar — but do NOT paint the header element itself, or its own
   height spills navy down over the hero. */
header.has-header,
header.has-header>nav.wrap,
header.has-header .wp-block-senff-sticky-block{font-size:0;line-height:0;}
/* Paint the header element itself — full width, so any sub-pixel gap under the
   bar shows navy rather than the theme's white ground. NOT nav.wrap, which is a
   centred 1170px box: painting that is what spilled navy over the hero. */
header.has-header{background:#003b49;}
/* The sticky-block plugin ships .wp-block-senff-sticky-block with 1px of
   padding and -1px of margin top and bottom. That 1px band sits outside the
   cover, so it renders as a pale hairline under the bar. Zero it. */
header.has-header .wp-block-senff-sticky-block{
  padding-top:0 !important;padding-bottom:0 !important;
  margin-top:0 !important;margin-bottom:0 !important;
}
header.has-header .mph{font-size:16px;line-height:1.6;}
header.has-header .mph{background:#003b49;}
header.has-header .mph>.wp-block-cover__background{background-color:#003b49 !important;opacity:1 !important;}
/* slimmer top padding pulls the logo closer to the top of the page */
header.has-header .mph{padding-block:6px clamp(10px,1.4vw,14px) !important;min-height:0 !important;}
header.has-header .mph .wp-block-cover__inner-container{padding-inline:0;}

/* logo: sized off height so the white mark keeps its optical weight */
header.has-header .mph .wp-block-site-logo img{
  width:auto !important;height:clamp(44px,4.4vw,56px);max-width:none;display:block;
}

/* the two menus sit in one flex row, pushed right */
header.has-header .mph ul#menu-main-menu-1,
header.has-header .mph ul[id^="menu-main-menu"]{
  display:flex;align-items:center;justify-content:flex-end;
  gap:10px;margin:0;padding:0;list-style:none;max-width:none;width:100%;
}
header.has-header .mph ul[id^="menu-main-menu"] li{margin:0;padding:0;}
header.has-header .mph ul[id^="menu-main-menu"] a{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:600;font-size:13.5px;letter-spacing:.01em;
  color:#fff;text-decoration:none;
}

/* action pills */
header.has-header .mph .nav-pill a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;line-height:1;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
header.has-header .mph .nav-pill--ghost a{border-color:rgba(255,255,255,.45);color:#fff;}
header.has-header .mph .nav-pill--ghost a:hover{background:#fff;border-color:#fff;color:#003b49;}
header.has-header .mph .nav-pill--red a{background:#BD0010;border-color:#BD0010;color:#fff;}
header.has-header .mph .nav-pill--red a:hover{background:#9c000d;border-color:#9c000d;}

/* drawer toggle — plain icon, no box, on every viewport */
header.has-header .mph .toggle-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:42px;margin-left:6px;
  border:0;font-size:20px;
  transition:color .18s ease,opacity .18s ease;
}
header.has-header .mph .toggle-nav a:hover{color:#D7CDB6;}

/* the theme's own absolutely-positioned toggle duplicates ours on mobile */
@media (min-width:1025px){header.has-header .mph .menu-item.menu-toggle{display:none !important;}}

@media (max-width:781px){
  /* core stacks columns below 782px, which would drop the menu under the logo */
  header.has-header .mph .wp-block-columns{flex-wrap:nowrap !important;align-items:center;}
  header.has-header .mph .wp-block-column{flex-basis:auto !important;}
  header.has-header .mph .wp-block-site-logo img{height:38px;}
  header.has-header .mph ul[id^="menu-main-menu"] a{font-size:12.5px;}
  header.has-header .mph .nav-pill a{padding:10px 14px;}
}
@media (max-width:520px){
  /* keep the repair action and the drawer; payment lives inside the drawer */
  header.has-header .mph .menu-item-2085{display:none;}
}

/* ---- side panel (#site-menu, opened by the header toggle) ----
   Same navy ground as the bar, and its two actions restyled as the header
   pills: outline for payment, red for the repair report. The block editor
   writes those colours inline, so these have to win with !important. */
#site-menu,
#site-menu .site-menu-content,
#site-menu .wp-block-cover,
#site-menu .wp-block-cover__background{background-color:#003b49 !important;}
#site-menu .wp-block-cover__background{opacity:1 !important;}

/* ---- panel menu (block 1079): flat lists, no boxes ---- */
#site-menu .site-menu-content{padding:26px 28px;}
#site-menu .msm{font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}
#site-menu .msm-logo img{display:block;width:145px;height:auto;margin:4px 0 10px;}
#site-menu .msm-nav ul{list-style:none;margin:0;padding:0;}
#site-menu .msm-h{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#D7CDB6;margin:22px 0 4px;
}
#site-menu .msm-nav li a{
  display:block;padding:10px 0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:500;font-size:15.5px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(215,205,182,.16);
  transition:color .18s ease,padding-left .18s ease;
}
#site-menu .msm-nav li:last-child a{border-bottom:0;}
#site-menu .msm-nav li a:hover{color:#D7CDB6;padding-left:4px;}
#site-menu .msm-top{margin-top:22px !important;border-top:1px solid rgba(215,205,182,.16);padding-top:6px !important;}
#site-menu .msm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
#site-menu .msm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;line-height:1;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:600;font-size:13.5px;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.45);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
#site-menu .msm-btn:hover{background:#fff;border-color:#fff;color:#003b49;}

#site-menu .wp-block-buttons{gap:10px;}
#site-menu .wp-block-button__link{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif !important;
  font-weight:600 !important;font-size:13.5px !important;
  padding:11px 20px !important;
  border-radius:0 !important;
  border:1px solid transparent !important;
  display:inline-flex !important;align-items:center;gap:8px;line-height:1 !important;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
/* first action mirrors the header's outline pill */
#site-menu .wp-block-buttons>.wp-block-button:first-child .wp-block-button__link{
  background-color:transparent !important;color:#fff !important;
  border-color:rgba(255,255,255,.45) !important;
}
#site-menu .wp-block-buttons>.wp-block-button:first-child .wp-block-button__link:hover{
  background-color:#fff !important;border-color:#fff !important;color:#003b49 !important;
}
/* the rest stay red, as Report Repair does in the bar */
#site-menu .wp-block-buttons>.wp-block-button:not(:first-child) .wp-block-button__link{
  background-color:#BD0010 !important;border-color:#BD0010 !important;color:#fff !important;
}
#site-menu .wp-block-buttons>.wp-block-button:not(:first-child) .wp-block-button__link:hover{
  background-color:#9c000d !important;border-color:#9c000d !important;
}
#site-menu .wp-block-button__link svg{width:15px;height:15px;}

/* ---- drawer: same navy language as the header ---- */
#side-menu{background:#003b49;color:#fff;}
#side-menu .side-menu-close{color:var(--f-sand,#D7CDB6);}
#side-menu ul{list-style:none;margin:0;padding:0;}
#side-menu li a{
  display:block;padding:13px 0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:500;font-size:16px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(215,205,182,.18);
}
#side-menu li a:hover{color:#D7CDB6;}
/* drawer groups: Services / Properties are non-links heading their sub-lists */
#side-menu li.menu-item-has-children>a{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#D7CDB6;border-bottom:0;padding:18px 0 4px;pointer-events:none;cursor:default;
}
#side-menu ul.sub-menu{margin:0;}
#side-menu ul.sub-menu li a{font-weight:500;font-size:16px;}
#side-menu li li:last-child a{border-bottom:1px solid rgba(215,205,182,.18);}

/* About page: round headshots stay circular with the 3:2 team photos */
.page-id-18 .wp-block-image.has-custom-border img{aspect-ratio:1/1;object-fit:cover;object-position:center 28%;height:auto;}


/* ---- mobile drawer extras (template part 'Mobile Menu', shown under the menu) ---- */
#side-menu .mobile-menu--inner{padding:8px 0 32px;}
#side-menu .mmm-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
#side-menu .mmm-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-weight:600;font-size:14.5px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);border-radius:2px;transition:background .18s ease,color .18s ease,border-color .18s ease;}
#side-menu .mmm-btn:hover{background:#fff;border-color:#fff;color:#003b49;}
#side-menu .mmm-btn--red{background:#BD0010;border-color:#BD0010;}
#side-menu .mmm-btn--red:hover{background:#a0000d;border-color:#a0000d;color:#fff;}
#side-menu .mmm-contact{margin-top:26px;padding-top:20px;border-top:1px solid rgba(215,205,182,.18);}
#side-menu .mmm-contact .mmm-h{margin:0 0 8px;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#D7CDB6;}
#side-menu .mmm-contact a{display:block;padding:5px 0;color:#fff;text-decoration:none;font-size:16px;}
#side-menu .mmm-contact a:hover{color:#D7CDB6;}


/* ---- mobile / tablet header (<=1024px): call icon + burger ----
   The theme hides every menu item below 1025px except .menu-toggle, which
   opens the #side-menu drawer. Show a call icon next to it and draw the burger
   as an SVG so it never depends on an icon font. */
.mph li.mph-call{display:none;}
@media (max-width:1024px){
  header.has-header .mph li.menu-item.mph-call{display:block;}
  header.has-header .mph li.mph-call a,
  header.has-header .mph .menu-toggle>a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;}
  header.has-header .mph li.mph-call .mph-ico,
  header.has-header .mph .menu-toggle i{display:block;width:26px;height:26px;font-size:0;background-position:center;background-repeat:no-repeat;background-size:contain;}
  header.has-header .mph li.mph-call .mph-ico{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E");width:21px;height:21px;}
  header.has-header .mph .menu-toggle i{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M3%2012h18M3%2018h18%22%2F%3E%3C%2Fsvg%3E");}
  header.has-header .mph .menu-toggle i::before{content:none;}
  header.has-header .mph .menu-toggle{position:static !important;right:auto !important;top:auto !important;display:block;}
  header.has-header .mph .wp-block-column:last-child>.wp-block-columns>.wp-block-column{display:flex;align-items:center;justify-content:flex-end;gap:2px;}
  header.has-header .mph ul[id^="menu-main-menu"]{width:auto;}
}



/* mobile header: logo hugs the left, action cluster takes the rest and stays on screen */
@media (max-width:1024px){
  header.has-header .mph .wp-block-cover__inner-container>.wp-block-columns{width:100%;max-width:100%;margin:0;}
  header.has-header .mph .wp-block-cover__inner-container>.wp-block-columns>.wp-block-column:first-child{flex:0 0 auto !important;}
  header.has-header .mph .wp-block-cover__inner-container>.wp-block-columns>.wp-block-column:last-child{flex:1 1 0 !important;min-width:0;}
  header.has-header .mph .wp-block-column:last-child>.wp-block-columns{width:100%;justify-content:flex-end;}
  header.has-header .mph .wp-block-column:last-child>.wp-block-columns>.wp-block-column{flex:0 0 auto !important;min-width:0;}
}

/* mobile header: logo vertically centred (theme adds 24px above it), equal padding top and bottom */
@media (max-width:1024px){
  header.has-header .mph{padding-block:12px !important;}
  header.has-header .mph .custom-logo-link,header nav:not(.wp-block-navigation) .mph .custom-logo-link{display:block;padding:0 !important;line-height:0;}
  header.has-header .mph .wp-block-site-logo{margin:0;line-height:0;}
  header.has-header .mph .wp-block-site-logo img{display:block;}
  header.has-header .mph .wp-block-columns{align-items:center !important;}
}
