/* Site chrome: global header + footer (built as HFE templates, posts 315/316).
   Loaded site-wide by orr-editorial.php. Layout targets Elementor's .e-con-inner. */

/* ============================ HEADER ============================ */
/* Sticky wrapper (HFE outputs the header inside one of these). */
.hfe-header-wrapper, header#masthead.site-header, header.site-header{
  position:sticky; top:0; z-index:1000;
}
#site-header{ background:var(--c-paper); border-bottom:1px solid var(--c-rule); position:relative; }
#site-header > .e-con-inner{
  display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:32px;
  max-width:var(--content-max); margin-inline:auto; width:100%;
  padding:20px var(--pad-x-right) 20px var(--pad-x-left);
}
/* wordmark */
#site-header .elementor-heading-title,
#site-header .elementor-heading-title a{
  font-family:var(--ff-heading); font-style:italic; font-weight:500; font-size:clamp(17px,4.6vw,22px);
  letter-spacing:-0.01em; color:var(--c-primary); text-decoration:none; white-space:nowrap;
}
#site-header > .e-con-inner > .elementor-widget-heading{ flex:0 0 auto; }
/* brand lockup: mosaic icon + text wordmark */
/* fit-content on BOTH the boxed .e-con and its .e-con-inner, else it stretches (same gotcha as #header-right) */
#site-header #brand{ width:-moz-fit-content; width:fit-content; }
#site-header #brand > .e-con-inner{ display:flex; flex-direction:row !important; align-items:center; gap:12px; max-width:none; margin-inline:0; width:-moz-fit-content; width:fit-content; }
#site-header #brand .brand-icon{ flex:0 0 auto; margin:0; }
#site-header #brand .brand-icon img{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; }
#site-header #brand .brand-icon a{ display:block; line-height:0; }
#site-header #brand .elementor-widget-heading{ margin:0; }
@media(max-width:768px){ #site-header #brand .brand-icon img{ width:34px; height:34px; } #site-header #brand > .e-con-inner{ gap:10px; } }
/* small phones: show the mosaic icon only (the wordmark + hamburger otherwise overflow) */
@media(max-width:600px){ #site-header #brand .elementor-widget-heading{ display:none; } }
/* wordmark hugs left, nav+CTA hug right */
#site-header > .e-con-inner > .elementor-element{ flex:0 0 auto; }
/* fit-content on BOTH the .e-con and its .e-con-inner: Elementor makes the boxed
   .e-con full-width by default (~1111px here), which overflowed the header and forced
   the nav to wrap. Hugging the content keeps wordmark | nav+search+CTA on one line. */
#header-right{ flex:0 0 auto; width:-moz-fit-content; width:fit-content; max-width:100%; }
#header-right > .e-con-inner{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:clamp(20px,3vw,40px); max-width:none; width:-moz-fit-content; width:fit-content; }

/* custom nav (replaces the flaky HFE nav widget) */
#site-header .orr-nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#site-header .orr-nav{ display:flex; flex-direction:row; align-items:center; gap:clamp(18px,2.4vw,34px); }
#site-header .orr-nav a{ font-family:var(--ff-eyebrow); font-size:13px; font-weight:500; letter-spacing:0.01em; color:var(--c-secondary); text-decoration:none; padding:6px 0; white-space:nowrap; transition:color .25s ease; }
#site-header .orr-nav a:hover{ color:var(--c-accent); }
#site-header .orr-nav-contact{ display:none; }  /* shown only inside the mobile dropdown */
#site-header .orr-burger{ display:none; }

/* CTA button */
#site-header .elementor-button{
  background:var(--c-accent); color:var(--c-white); border:none; border-radius:2px;
  font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; padding:12px 22px; transition:background .25s ease;
}
#site-header .elementor-button:hover{ background:var(--c-primary); color:var(--c-white); }

/* header search (WordPress native, searches the whole site) */
#site-header .site-search{ display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--c-rule); padding-bottom:5px; }
#site-header .site-search:focus-within{ border-bottom-color:var(--c-ochre); }
#site-header .site-search input{ font-family:var(--ff-body); font-size:14px; border:none; background:none; padding:2px 0; width:110px; color:var(--c-secondary); }
#site-header .site-search input:focus{ outline:none; }
#site-header .site-search input::placeholder{ color:var(--c-muted); }
#site-header .site-search button{ display:flex; background:none; border:none; color:var(--c-muted); cursor:pointer; padding:0; }
#site-header .site-search:focus-within button{ color:var(--c-accent); }
/* search needs ~180px; hide it before the header gets cramped */
@media(max-width:1150px){ #site-header .site-search{ display:none; } }

/* ============================ FOOTER ============================ */
#site-footer{ background:var(--c-primary); color:var(--c-lighter); }
#site-footer > .e-con-inner{
  max-width:var(--content-max); margin-inline:auto; width:100%;
  padding:clamp(56px,7vw,96px) var(--pad-x-right) 28px var(--pad-x-left);
  display:flex; flex-direction:column; gap:clamp(40px,5vw,64px);
}
#footer-cols > .e-con-inner{ display:grid; grid-template-columns:1.6fr 1fr 1.6fr; gap:clamp(32px,5vw,80px); align-items:start; }
#foot-brand > .e-con-inner, #foot-links > .e-con-inner, #foot-contact > .e-con-inner{ display:flex; flex-direction:column; }

/* brand wordmark + tagline */
#foot-brand .elementor-heading-title{ font-family:var(--ff-heading); font-style:italic; font-weight:500; font-size:24px; color:var(--c-white); margin:0 0 18px; }
#site-footer .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:15px; line-height:1.65; color:rgba(224,218,207,0.72); }
#foot-brand .elementor-widget-text-editor{ max-width:42ch; }

/* column headings */
#foot-links .elementor-heading-title, #foot-contact .elementor-heading-title{
  font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--c-ochre); margin:0 0 22px;
}

/* footer nav (vertical) - flush-left, aligned with the "Explore" heading above */
#foot-links .hfe-nav-menu{ padding-left:0; margin:0; align-items:flex-start; }
#foot-links .hfe-nav-menu .menu-item{ margin-left:0; }
#foot-links .hfe-nav-menu .menu-item a.hfe-menu-item{ font-family:var(--ff-body); font-size:16px; color:var(--c-lighter); padding:7px 0; padding-left:0; transition:color .25s ease; }
#foot-links .hfe-nav-menu .menu-item a.hfe-menu-item:hover{ color:var(--c-ochre); }

/* contact button */
#foot-contact .elementor-widget-text-editor{ margin-bottom:24px; }
#foot-contact .elementor-button{
  background:transparent; color:var(--c-white); border:none; border-bottom:2px solid var(--c-ochre);
  border-radius:0; font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; padding:0 0 10px; transition:gap .3s ease, color .25s ease;
}
#foot-contact .elementor-button:hover{ color:var(--c-ochre); }
#foot-contact .elementor-button .elementor-button-content-wrapper{ display:inline-flex; align-items:center; }
#foot-contact .elementor-button .elementor-button-content-wrapper::after{ content:"\2192"; margin-left:16px; color:var(--c-ochre); font-family:var(--ff-heading); font-style:italic; font-size:20px; line-height:1; }

/* social icons (LinkedIn / Instagram) below the Contact button */
#foot-contact .elementor-widget-social-icons{ margin-top:28px; }
#foot-contact .elementor-social-icon{
  background-color:transparent !important; color:var(--c-lighter) !important;
  width:auto; height:auto; padding:0; margin:0 22px 0 0; font-size:21px;
}
#foot-contact .elementor-social-icon i{ color:inherit; }
#foot-contact .elementor-social-icon:hover{ background-color:transparent !important; color:var(--c-ochre) !important; }
#foot-contact .elementor-social-icon:last-child{ margin-right:0; }

/* Left-align every footer column: headings, button and social icons were centering
   while the body text was left-aligned, so nothing lined up. */
#foot-brand > .e-con-inner, #foot-links > .e-con-inner, #foot-contact > .e-con-inner{ align-items:flex-start; text-align:left; }
#site-footer .elementor-heading-title{ text-align:left; }
/* Align the three columns' body text: the tall wordmark otherwise pushes column 1's
   tagline lower than the eyebrow-headed columns. Give each column's first heading the
   same block height + margin so the body starts at the same y across all three. */
#foot-brand .elementor-heading-title,
#foot-links .elementor-heading-title,
#foot-contact .elementor-heading-title{ min-height:36px; display:flex; align-items:flex-end; margin-bottom:20px; }
#foot-contact .elementor-widget-button, #foot-contact .elementor-button-wrapper{ align-self:flex-start; text-align:left; }
#foot-contact .elementor-widget-social-icons{ align-self:flex-start; width:100%; }
#foot-contact .elementor-social-icons-wrapper{ justify-content:flex-start; }

/* bottom bar */
#footer-bottom{ border-top:1px solid rgba(224,218,207,0.16); }
#footer-bottom > .e-con-inner{ display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:16px; padding-top:26px; flex-wrap:wrap; max-width:var(--content-max); margin-inline:auto; width:100%; }
#footer-bottom .elementor-widget-text-editor{ font-family:var(--ff-eyebrow); font-size:11px; letter-spacing:0.06em; color:rgba(224,218,207,0.5); }
#footer-bottom .elementor-widget-text-editor p{ margin:0; }

/* ============================ responsive ============================ */
@media (max-width:1024px){
  /* Custom nav: wordmark left, hamburger hard right; standalone CTA + search hidden
     (Contact moves into the dropdown). One breakpoint, so states stay consistent and
     nothing persists across a resize. */
  #site-header > .e-con-inner{ flex-wrap:nowrap; }
  #site-header .elementor-heading-title, #site-header .elementor-heading-title a{ font-size:18px; }
  #site-header .elementor-widget-button{ display:none; }
  /* neutralise intermediate positioning so the absolute burger + dropdown resolve to
     #site-header (Elementor widgets are position:relative by default, which otherwise
     traps the absolute dropdown inside the tiny nav widget). */
  #header-right, #header-right > .e-con-inner,
  #site-header .elementor-element-82acb75,
  #site-header .elementor-element-82acb75 > .elementor-widget-container{ position:static; }

  /* hamburger pinned to the far right of the header */
  #site-header .orr-burger{ position:absolute; top:0; bottom:0; right:var(--pad-x-right); margin:auto 0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; cursor:pointer; z-index:80; }
  #site-header .orr-burger span{ display:block; width:24px; height:2px; background:var(--c-primary); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }

  /* nav becomes a full-width dropdown below the header, hidden until the box is checked */
  #site-header .orr-nav{ position:absolute; top:100%; left:0; right:0; width:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--c-paper); border-bottom:1px solid var(--c-rule); box-shadow:0 14px 26px rgba(38,30,23,0.09); padding:4px 0 8px; display:none; z-index:70; }
  #site-header .orr-nav-toggle:checked ~ .orr-nav{ display:flex; }
  #site-header .orr-nav a{ font-size:16px; padding:14px var(--pad-x-left); }
  #site-header .orr-nav a + a{ border-top:1px solid var(--c-rule); }
  #site-header .orr-nav-contact{ display:block; color:var(--c-accent); }

  /* burger morphs to an X when open */
  #site-header .orr-nav-toggle:checked ~ .orr-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  #site-header .orr-nav-toggle:checked ~ .orr-burger span:nth-child(2){ opacity:0; }
  #site-header .orr-nav-toggle:checked ~ .orr-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:900px){
  #footer-cols > .e-con-inner{ grid-template-columns:1fr; gap:40px; }
  #footer-bottom > .e-con-inner{ flex-direction:column; align-items:flex-start; gap:8px; }
}