.elementor-18 .elementor-element.elementor-element-2543778{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 12px;--row-gap:0px;--column-gap:12px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;--z-index:100;}.elementor-18 .elementor-element.elementor-element-88e06ad img{width:160px;}.elementor-18 .elementor-element.elementor-element-aad0ec8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:0px 12px;--row-gap:0px;--column-gap:12px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-18 .elementor-element.elementor-element-fb25575 .elementor-button{background-color:#D9DEE500;font-family:"Inter", Sans-serif;font-size:11px;font-weight:700;fill:#ADADAD;color:#ADADAD;border-style:solid;border-width:2px 2px 2px 2px;border-color:#E7E7E7;border-radius:999px 999px 999px 999px;}.elementor-18 .elementor-element.elementor-element-fb25575{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-fb25575 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-18 .elementor-element.elementor-element-fb25575 .elementor-button .elementor-button-content-wrapper{gap:8px;}.elementor-18 .elementor-element.elementor-element-2ec15b0 .elementor-button{background-color:#D9DEE500;font-family:"Inter", Sans-serif;font-size:11px;font-weight:700;fill:#ADADAD;color:#ADADAD;border-style:solid;border-width:2px 2px 2px 2px;border-color:#E7E7E7;border-radius:999px 999px 999px 999px;}.elementor-18 .elementor-element.elementor-element-2ec15b0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-2ec15b0 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-18 .elementor-element.elementor-element-2ec15b0 .elementor-button .elementor-button-content-wrapper{gap:8px;}.elementor-18 .elementor-element.elementor-element-aa207d7{text-align:center;}.elementor-18 .elementor-element.elementor-element-aa207d7 .eael-divider, .elementor-18 .elementor-element.elementor-element-aa207d7 .divider-border{border-style:solid;border-color:#000000;}.elementor-18 .elementor-element.elementor-element-aa207d7 .eael-divider-wrap.divider-direction-vertical .divider-border{height:36px;border-width:1px;}.elementor-18 .elementor-element.elementor-element-aa207d7 .eael-divider-wrap.divider-direction-vertical .eael-divider.vertical{height:36px;border-width:1px;}.eael-offcanvas-content.eael-offcanvas-content-b377a72{background-color:#FFFFFF;width:450px;border-style:none;}.elementor-18 .elementor-element.elementor-element-b377a72{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.eael-offcanvas-content-open.eael-offcanvas-content-left .eael-offcanvas-container-b377a72{transform:translate3d(450px, 0, 0);}.eael-offcanvas-content-open.eael-offcanvas-content-right .eael-offcanvas-container-b377a72{transform:translate3d(-450px, 0, 0);}.eael-offcanvas-content-b377a72 .eael-offcanvas-body{padding:6px 6px 6px 6px;}.elementor-18 .elementor-element.elementor-element-b377a72 .eael-offcanvas-toggle-wrap{text-align:right;}.elementor-18 .elementor-element.elementor-element-b377a72 .eael-offcanvas-toggle-wrap .eael-offcanvas-toggle-icon{font-size:23px;}.elementor-18 .elementor-element.elementor-element-b377a72 .eael-offcanvas-toggle-wrap svg.eael-offcanvas-toggle-icon{height:23px;width:23px;line-height:23px;}.elementor-18 .elementor-element.elementor-element-b377a72 .eael-offcanvas-toggle-wrap .eael-offcanvas-toggle-icon.eael-offcanvas-toggle-svg-icon{width:23px;}.elementor-18 .elementor-element.elementor-element-b377a72 .eael-offcanvas-toggle{background-color:#02010100;color:#A71A1A;border-style:none;word-spacing:2.4px;padding:6px 6px 6px 6px;}.elementor-18 .elementor-element.elementor-element-b377a72 .eael-offcanvas-toggle svg.eael-offcanvas-toggle-icon{fill:#A71A1A;}.eael-offcanvas-close-b377a72{order:2;}.eael-offcanvas-content-b377a72 .eael-offcanvas-close-b377a72{font-size:28px;}.eael-offcanvas-content-b377a72 .eael-offcanvas-close-b377a72 svg{width:28px;height:28px;line-width:28px;}.eael-offcanvas-content-b377a72 .eael-offcanvas-close-b377a72 .eael-offcanvas-close-svg-icon{width:28px;}.eael-offcanvas-content-b377a72-open .eael-offcanvas-container:after{opacity:0.32;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-18 .elementor-element.elementor-element-2543778{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-18 .elementor-element.elementor-element-88e06ad{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.eael-offcanvas-content.eael-offcanvas-content-b377a72{width:100%;}.eael-offcanvas-content-open.eael-offcanvas-content-left .eael-offcanvas-container-b377a72{transform:translate3d(100%, 0, 0);}.eael-offcanvas-content-open.eael-offcanvas-content-right .eael-offcanvas-container-b377a72{transform:translate3d(-100%, 0, 0);}}@media(min-width:768px){.elementor-18 .elementor-element.elementor-element-2543778{--content-width:1200px;}}/* Start custom CSS for container, class: .elementor-element-2543778 *//* base: transparent at load */
.header-bar {
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* sticky color ONLY when truly active */
.header-bar.elementor-sticky--active,
.elementor-sticky--active .header-bar {
  background-color: #122B4A;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}/* End custom CSS */
/* Start custom CSS *//* ============================
   HEADER — BASE + STICKY STATES
   Works with your body.scrolled JS gate
   ============================ */

/* Base header: transparent on load */
.header-bar {
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
  z-index: 1000;
}

/* Before any scroll, force transparency (safety against Elementor quirks) */
body:not(.scrolled) .header-bar,
body:not(.scrolled) .header-bar.elementor-sticky--effects,
body:not(.scrolled) .elementor-sticky--effects .header-bar,
body:not(.scrolled) .header-bar.elementor-sticky--active,
body:not(.scrolled) .elementor-sticky--active .header-bar {
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}

/* After scroll: sticky look */
body.scrolled .header-bar.elementor-sticky--active,
body.scrolled .elementor-sticky--active .header-bar {
  background-color: #122B4A; /* navy */
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* ============================
   LOGO (inline SVG paths)
   ============================ */

/* Base (transparent header) — dark logo */
.header-bar .header-logo path { fill: #122B4A; }

/* Sticky — white logo */
body.scrolled .header-bar.elementor-sticky--active .header-logo path,
body.scrolled .elementor-sticky--active .header-bar .header-logo path { fill: #FFFFFF; }

/* ============================
   NAV LINKS
   ============================ */

/* Base */
.header-bar .elementor-nav-menu a {
  color: #122B4A;
  transition: color .25s ease, border-color .25s ease;
}

/* Sticky */
body.scrolled .header-bar.elementor-sticky--active .elementor-nav-menu a,
body.scrolled .elementor-sticky--active .header-bar .elementor-nav-menu a { color: #FFFFFF; }

/* Sticky hover */
body.scrolled .header-bar.elementor-sticky--active .elementor-nav-menu a:hover,
body.scrolled .elementor-sticky--active .header-bar .elementor-nav-menu a:hover {
  color: rgba(255,255,255,.8);
}

/* ============================
   HEADER LOGO
   ============================ */

/* Default (transparent header, before scroll) */
.site-logo img {
  content: url('/wp-content/uploads/logo_sjb_sm_black.svg');
  transition: content .25s ease;
}

/* Sticky (blue header) */
body.scrolled .header-bar.elementor-sticky--active .site-logo img {
  content: url('/wp-content/uploads/logo_sjb_sm_white.svg');
}

/* ============================
   VERTICAL DIVIDER
   ============================ */
.header-bar .v-divider { 
    background-color: #D9DEE5; 
}
body.scrolled .header-bar.elementor-sticky--active .v-divider,
body.scrolled .elementor-sticky--active .header-bar .v-divider { 
    background-color: rgba(255,255,255,.6)!important; 
    
}

/* Sticky (blue header) */
body.scrolled .header-bar.elementor-sticky--active .eael-divider.vertical.solid {
  border-color: rgba(255,255,255,.6) !important; /* semi-white */
}



/* ============================
   OFF-CANVAS TOGGLE (custom SVG)
   ============================ */

/* Base (transparent) */
.header-bar .menu-toggle-svg svg *,
.header-bar .eael-offcanvas-toggle .eicon,
.header-bar .eael-offcanvas-toggle svg { fill:#122B4A; stroke:#122B4A; color:#122B4A; transition: fill .25s, stroke .25s, color .25s; }

/* Hover (transparent) */
.header-bar .menu-toggle-svg:hover svg *,
.header-bar .eael-offcanvas-toggle:hover .eicon,
.header-bar .eael-offcanvas-toggle:hover svg { fill:#122B4A; stroke:#122B4A; color:#122B4A; }

/* Sticky */
body.scrolled .header-bar.elementor-sticky--active .menu-toggle-svg svg *,
body.scrolled .elementor-sticky--active .header-bar .menu-toggle-svg svg *,
body.scrolled .header-bar.elementor-sticky--active .eael-offcanvas-toggle .eicon,
body.scrolled .elementor-sticky--active .header-bar .eael-offcanvas-toggle .eicon,
body.scrolled .header-bar.elementor-sticky--active .eael-offcanvas-toggle svg,
body.scrolled .elementor-sticky--active .header-bar .eael-offcanvas-toggle svg { fill:#FFFFFF; stroke:#FFFFFF; color:#FFFFFF; }

/* ============================
   OUTLINE BUTTON (incl. icon)
   ============================ */

/* Make the button's SVG icon follow text color */
.header-bar .elementor-element.btn-outline .elementor-button .elementor-button-icon svg * {
  fill: currentColor; stroke: currentColor; transition: fill .25s ease, stroke .25s ease;
}

/* Reset and control size of button icons */
.header-bar .elementor-element.btn-outline .elementor-button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;       /* keeps it proportional to text */
}

/* Thicken the icon inside outline buttons */
.header-bar .elementor-element.btn-outline .elementor-button .elementor-button-icon svg * {
  stroke-width: 55;   /* default is often 1 or 1.5 — increase as needed */
}

.header-bar .elementor-element.btn-outline .elementor-button .elementor-button-icon svg {
  width: 18px;          /* adjust to taste: 18–22px works well */
  height: auto;
}

.header-bar .elementor-element.btn-outline .elementor-button .elementor-button-icon svg * {
  fill: #222;   /* dark gray */
  stroke: currentColor;
}

/* Base */
.header-bar .elementor-element.btn-outline .elementor-button {
  color: #122B4A;
  border: 2px solid #122B4A;
  background: transparent;
  border-radius: 999px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Base hover */
.header-bar .elementor-element.btn-outline .elementor-button:hover {
  color: #122B4A;
  border-color: #122B4A;
  background-color: rgba(18,43,74,.06);
}

/* Sticky base — turn button text/border/icon white */
body.scrolled .header-bar.elementor-sticky--active .elementor-element.btn-outline .elementor-button,
body.scrolled .elementor-sticky--active .header-bar .elementor-element.btn-outline .elementor-button {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: transparent;
}

/* Sticky hover — invert: white bg, navy text & icon */
body.scrolled .header-bar.elementor-sticky--active .elementor-element.btn-outline .elementor-button:hover,
body.scrolled .elementor-sticky--active .header-bar .elementor-element.btn-outline .elementor-button:hover {
  background-color: #FFFFFF;
  color: #122B4A;   /* icon inherits via currentColor */
  border-color: #FFFFFF;
}/* End custom CSS */