/* Binary Alchemy: decorative frame fixed to the browser window (9-slice idea:
   fixed-size corners, stretching edges). Pure decoration: pointer-events none.
   --ba-c is the corner size; all offsets scale with it, lines stay 1px. */
:root {
  --ba-c: 160px;                         /* corner size */
  --ba-o: calc(var(--ba-c) * 24.5 / 160); /* outer line offset */
  --ba-i: calc(var(--ba-c) * 32.5 / 160); /* inner line offset after the step */
  --ba-line: #4a4a4a;
  --ba-bg: #ecebe6;                      /* fallback only: Elementor sets the body background (Site Settings) */
  /* distance from the screen edge to header, content and footer. Smaller than the corner:
     header and footer have no background and may reach into the corner area. */
  --ba-pad-top: calc(var(--ba-c) * 30 / 160);    /* top (header) */
  --ba-pad-bottom: calc(var(--ba-c) * 50 / 160); /* bottom (footer) */
  --ba-footer-x: calc(var(--ba-c) * 60 / 160);   /* footer left and right */
  --ba-pad-x: calc(var(--ba-c) * 28 / 160); /* header left and right */
  --ba-content-x: calc(var(--ba-c) * 43 / 160); /* content window left and right */
  --ba-top: 0px;                         /* WordPress admin bar height */
  --ba-header: 80px;                     /* height of the fixed header, set by frame.js */
  --ba-footer: 32px;                     /* height of the fixed footer, set by frame.js */
  --ba-panel: #ffffff;                   /* content window */
  --ba-gap: 0px;                         /* gap between header/footer and content */
}
.admin-bar { --ba-top: 32px; }
@media (max-width: 782px) { .admin-bar { --ba-top: 46px; } }
@media (max-width: 767px) { :root { --ba-c: 64px; } }

body { background: var(--ba-bg); margin: 0;
  padding: calc(var(--ba-pad-top) + var(--ba-header) + var(--ba-gap)) var(--ba-content-x)
           calc(var(--ba-pad-bottom) + var(--ba-footer) + var(--ba-gap)); }

/* Header stays on screen; the page scrolls normally (browser scrollbar), but the
   content is hidden under the two masks, so it looks like a window inside the frame. */
/* Header and footer sit in the frame on the page background (no own background).
   body.ehf-header beats the plugin rule ".ehf-header #masthead { position: relative; z-index: 99 }". */
body #masthead, body.ehf-header #masthead, #colophon { position: fixed; z-index: 9985; left: var(--ba-pad-x); right: var(--ba-pad-x);
  box-sizing: border-box; margin: 0; background: transparent; }
body #masthead, body.ehf-header #masthead { top: calc(var(--ba-top) + var(--ba-pad-top)); }
#colophon { bottom: var(--ba-pad-bottom); left: var(--ba-footer-x); right: var(--ba-footer-x); }
/* masks take the body background, so the colour is set in one place: Elementor > Site Settings > Background */
.ba-mask { position: fixed; left: 0; right: 0; z-index: 9980; background: inherit; pointer-events: none; }
.ba-mask--top { top: var(--ba-top); height: calc(var(--ba-pad-top) + var(--ba-header) + var(--ba-gap)); }
.ba-mask--bottom { bottom: 0; height: calc(var(--ba-pad-bottom) + var(--ba-footer) + var(--ba-gap)); }
/* jump links (#section) must not end up under the header */
html { scroll-padding-top: calc(var(--ba-top) + var(--ba-pad-top) + var(--ba-header) + var(--ba-gap) + 16px); }

.ba-frame { position: fixed; inset: var(--ba-top) 0 0 0; pointer-events: none; z-index: 9990; color: var(--ba-line); }
.ba-frame__corner { position: absolute; width: var(--ba-c); height: var(--ba-c);
  background: url(corner.svg) no-repeat center / 100% 100%; }
.ba-frame__corner--tl { top: 0; left: 0; }
.ba-frame__corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.ba-frame__corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.ba-frame__corner--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* edges between the corners: outer line + inner line */
.ba-frame__edge { position: absolute; }
.ba-frame__edge--top, .ba-frame__edge--bottom { left: var(--ba-c); right: var(--ba-c); height: var(--ba-c); }
.ba-frame__edge--left, .ba-frame__edge--right { top: var(--ba-c); bottom: var(--ba-c); width: var(--ba-c); }
.ba-frame__edge--top    { top: 0;
  background: linear-gradient(currentColor 0 0) left 0 top calc(var(--ba-o) - .5px) / 100% 1px no-repeat,
              linear-gradient(currentColor 0 0) left 0 top calc(var(--ba-i) - .5px) / 100% 1px no-repeat; }
.ba-frame__edge--bottom { bottom: 0;
  background: linear-gradient(currentColor 0 0) left 0 bottom calc(var(--ba-o) - .5px) / 100% 1px no-repeat,
              linear-gradient(currentColor 0 0) left 0 bottom calc(var(--ba-i) - .5px) / 100% 1px no-repeat; }
.ba-frame__edge--left   { left: 0;
  background: linear-gradient(currentColor 0 0) left calc(var(--ba-o) - .5px) top 0 / 1px 100% no-repeat,
              linear-gradient(currentColor 0 0) left calc(var(--ba-c) * 40 / 160) top 0 / 1px 100% no-repeat; }
.ba-frame__edge--right  { right: 0;
  background: linear-gradient(currentColor 0 0) right calc(var(--ba-o) - .5px) top 0 / 1px 100% no-repeat,
              linear-gradient(currentColor 0 0) right calc(var(--ba-c) * 40 / 160) top 0 / 1px 100% no-repeat; }

/* tick marks in the middle of each edge */
.ba-frame__tick { position: absolute; background: currentColor; }
.ba-frame__tick--top, .ba-frame__tick--bottom { left: 50%; width: 1px; height: calc(var(--ba-o) * .7); }
.ba-frame__tick--top { top: 0; } .ba-frame__tick--bottom { bottom: 0; }
.ba-frame__tick--left, .ba-frame__tick--right { top: 50%; height: 1px; width: calc(var(--ba-o) * .7); }
.ba-frame__tick--left { left: 0; } .ba-frame__tick--right { right: 0; }

@media (max-width: 767px) { .ba-frame__tick { display: none; } }

/* content window: white panel that fills at least the visible height */
/* flow-root: margins of the first/last element inside (form, heading) stay inside the window */
#content { background: var(--ba-panel); box-sizing: border-box; display: flow-root;
  min-height: calc(100vh - var(--ba-top) - var(--ba-pad-top) - var(--ba-pad-bottom) - var(--ba-header) - var(--ba-footer) - 2 * var(--ba-gap)); }

/* Logo with white background (animated GIF): multiply makes white take the page colour,
   anti-aliased grey edges blend softly. The fixed header is its own stacking context, so it
   needs the page colour itself (inherited body > #page > #masthead) to blend with. */
#page { background-color: inherit; }
body #masthead, body.ehf-header #masthead { background-color: inherit; }
.ba-header-brand .elementor-widget-image img, #masthead .elementor-widget-image img { mix-blend-mode: multiply; }

/* Pages without Elementor (e.g. Contact with the form, 404): Hello limits them to 500/600/800/1140 px
   depending on the window width. Here they use the full content window with 20 px on each side. */
body:not([class*=elementor-page-]) #content.site-main { max-width: none; margin-inline: 0; padding-inline: 20px; }
#content .page-header .entry-title { max-width: none; margin-inline: 0; padding-inline: 0; }
/* Fluent Forms (contact form): 20 px more space on all four sides */
#content .frm-fluent-form { margin: 20px; }

/* Header menu: the last top-level item opens its submenu to the left (right-aligned below the
   item), so it does not run out of the frame. Deeper levels of that item open to the left too. */
#masthead .hfe-nav-menu > .menu-item-has-children:last-child > .sub-menu { left: auto; right: 0; }
#masthead .hfe-nav-menu > .menu-item:last-child .menu-item-has-children .sub-menu { left: auto; right: 100%; }

/* Header: logo + title box (CSS class ba-header-brand in main_header) only as wide as its
   content; the menu gets the rest, so its Alignment setting works over that space. */
.e-con.ba-header-brand { --width: auto; width: auto; flex-basis: auto; }
/* title + tagline column inside the brand box: also only as wide as its content */
.e-con.ba-header-title { --width: auto; width: auto; flex-basis: auto; }

/* [ba_children]: list of child pages (title + excerpt), see inc/children.php.
   Fonts and colours come from Elementor Site Settings: Global Fonts "Overview Title" (ba0ct01) and
   "Overview Text" (ba0cd01), Global Colors "Overview Title" (ba0cc01) and "Overview Text" (ba0cc02). */
.ba-children { display: grid; gap: 0; }
.ba-children a.ba-children__item, .ba-children a.ba-children__item:hover { display: block; padding: 14px 0;
  border-bottom: 1px solid var(--ba-line); text-decoration: none; }
.ba-children__item:first-child { border-top: 1px solid var(--ba-line); }
.ba-children__title { display: block; color: var(--e-global-color-ba0cc01, inherit);
  font-family: var(--e-global-typography-ba0ct01-font-family, inherit), sans-serif;
  font-size: var(--e-global-typography-ba0ct01-font-size, 1.25em);
  font-weight: var(--e-global-typography-ba0ct01-font-weight, 700);
  line-height: var(--e-global-typography-ba0ct01-line-height, inherit);
  letter-spacing: var(--e-global-typography-ba0ct01-letter-spacing, normal);
  text-transform: var(--e-global-typography-ba0ct01-text-transform, none); }
.ba-children__desc { display: block; margin-top: 4px; color: var(--e-global-color-ba0cc02, inherit);
  font-family: var(--e-global-typography-ba0cd01-font-family, inherit), sans-serif;
  font-size: var(--e-global-typography-ba0cd01-font-size, inherit);
  font-weight: var(--e-global-typography-ba0cd01-font-weight, 400);
  line-height: var(--e-global-typography-ba0cd01-line-height, inherit);
  letter-spacing: var(--e-global-typography-ba0cd01-letter-spacing, normal);
  text-transform: var(--e-global-typography-ba0cd01-text-transform, none); }

/* page titles centered: H1 title and the H3 excerpt below it (section pages), Hello's page title elsewhere */
#content .entry-title, #content .ba-page-excerpt { text-align: center; }

/* Elementor editor preview (body.ba-editor-preview, see functions.php): no frame, no masks,
   header/footer in the normal flow, so templates can be edited like a normal page. */
body.ba-editor-preview { padding: 0; }
body.ba-editor-preview .ba-frame, body.ba-editor-preview .ba-mask { display: none; }
body.ba-editor-preview #masthead, body.ba-editor-preview.ehf-header #masthead, body.ba-editor-preview #colophon { position: static; }
body.ba-editor-preview #content { min-height: 0; }