/* CapSkip Header 1.0.0
   Scoped to #site-header so nothing here can reach the rest of the page. */

:root{
  --cshdr-bar:84px;
  --cshdr-bar-scrolled:64px;
  /* Space above the bar's contents. The bar sits at the very top of the window,
     so without this the logo and nav ran close to the screen edge. The pinned
     heights below include it (border-box), so the content area stays --cshdr-bar
     and simply sits lower. Trimmed once scrolled, where a tighter bar is right. */
  --cshdr-pad-top:16px;
  --cshdr-pad-top-scrolled:6px;
  --cshdr-green:#30e87a;
  --cshdr-panel:#0f1420;
  --cshdr-line:rgba(255,255,255,.10);
  --cshdr-line-2:rgba(255,255,255,.06);
  --cshdr-ink:#f2f4fb;
  --cshdr-ink-2:#a8b0c4;
  --cshdr-ink-3:#6b7488;
  /* the homepage buttons are 11px, not the 30px pill the header Login shipped with */
  --cshdr-btn-r:11px;
  --cshdr-ease:cubic-bezier(.455,.03,.515,.955);
}

/* On the theme's own templates the header is position:sticky, so its box is in
   the flow and its height is layout. The script pins that box to the unscrolled
   height (see pinStickyHeader) so the shrink stops dragging the page up with it.
   Once scrolled, that leaves a strip of pinned box below the shrunk bar, which
   would otherwise swallow clicks meant for the content scrolling under it. Only
   the header's own box is made transparent to the pointer: the bar, the panel
   and the measuring box are all direct children and get events back. */
body.cshdr-sticky-hdr #site-header{ pointer-events:none; }
body.cshdr-sticky-hdr #site-header > *{ pointer-events:auto; }

/* ---------- bar geometry ---------- */
#site-header .site-header-wrapper,
#site-header .elementor-element.e-con.e-parent > .e-con-inner{
  min-height:0;
}
#site-header .elementor-element.e-con.e-parent{
  padding-top:var(--cshdr-pad-top);
  padding-bottom:0;
  min-height:calc(var(--cshdr-bar) + var(--cshdr-pad-top));
  transition:min-height .2s var(--cshdr-ease),padding-top .2s var(--cshdr-ease),height .2s var(--cshdr-ease);
}
/* The scrolled bar, and on pages with no hero to float over, the ONLY bar.
   The theme paints the resting bar itself: nothing on the hero pages, where the
   header floating transparent over the hero is the design, and a flat opaque
   black band everywhere else. Styling only the scrolled state here meant the
   blog, the posts and the account pages wore the theme's bar at rest and ours
   after a scroll, at two different heights, so the header read as a different
   component depending on where you were on the page. Those pages are tagged by
   the script (see unifyBar) and take the scrolled treatment permanently, look
   and size both, so nothing about the header changes as you scroll them. The
   hero pages are untagged and keep their transparency and their full height.

   Every companion selector below is written to the SAME specificity as its
   `.scrolled` twin: `.cshdr-solid-bar #site-header X` scores one id and the same
   class count, exactly like `#site-header.scrolled X`. Writing it as
   `body.cshdr-solid-bar ...` instead would add an element and outrank the
   cshdr-fit levels further down, pinning the logo at 200px at widths where the
   fit had already shrunk it to 168px. The flag is put on the html element by an
   inline script at wp_body_open, before the header is parsed, so the bar is
   never painted in the theme's style first (see mark_bar_style). */
#site-header.scrolled .elementor-element.e-con.e-parent,
.cshdr-solid-bar #site-header .elementor-element.e-con.e-parent{
  padding-top:var(--cshdr-pad-top-scrolled);
  min-height:calc(var(--cshdr-bar-scrolled) + var(--cshdr-pad-top-scrolled));
  background:rgba(6,8,14,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cshdr-line-2);
}

/* ---------- logo ----------
   The file is 270x80 but the artwork is only 53px tall: 14px of transparent
   padding above, 13px below. So a 240px logo draws a 47px mark inside a 71px
   box, which is why it can grow without crowding an 84px bar. */
/* Sharper logo, same logo.
   logo-white.png is 270x80. Drawn at 240px that is 360 device pixels on a 1.5x
   screen and 480 on a 2x screen, so it was being upscaled 1.33x to 1.78x and
   looked soft. uploads/2026/01/logo.png is the SAME lockup at 383x80, but it
   carries blue accents on the C and the S, which is why swapping to it plain
   changed the logo. Forcing it to pure white with brightness(0) invert(1) gives
   a mark identical to logo-white.png, drawn from 1.42x more pixels, so it now
   renders downscaled and therefore sharp.
   Visual size is unchanged: at 240px wide this file's artwork is 238x47, against
   237x47 for the old one. Only the empty transparent padding shrinks. */
#site-header .site-logo img{
  content:url("https://capskip.com/wp-content/uploads/2026/01/logo.png");
  filter:brightness(0) invert(1);
  /* Optical centring. The lockup is top-heavy: a bold wordmark over a light
     tagline puts its ink centroid 7.19px above the middle of its bounding box,
     measured on the file (centroid y=32.8 against a box middle of 40 in 80px).
     Everything else in the bar is centred geometrically, so the logo read as
     sitting high and the language button as sitting low. Nudging the logo down
     by that offset lines its optical centre up with the bar's centreline, and
     therefore with the nav, the buttons and the icons too. Expressed as a
     percentage of the logo's own height so it holds at every size. */
  transform:translateY(9%);
  width:240px;
  height:auto;
  max-width:none;
  transition:width .2s var(--cshdr-ease);
}
#site-header.scrolled .site-logo img,
.cshdr-solid-bar #site-header .site-logo img{ width:200px; }

/* The bar's height is decided by the tallest thing in it, and the ElementsKit
   nav <ul> stretches through its whole ancestor chain, so the row settled at
   81px scrolled no matter what the min-height said. Pin the chain in the
   scrolled state instead of chasing it; the items centre inside. */
/* `.elementskit-menu-container` sat at 80px while the bar was 64px, and the
   nav <ul> centres inside it, so the links rode 8px low once scrolled. The whole
   wrapper chain has to come down with the bar, not just the <ul>. */
#site-header.scrolled .e-con.e-parent,
.cshdr-solid-bar #site-header .e-con.e-parent{
  height:calc(var(--cshdr-bar-scrolled) + var(--cshdr-pad-top-scrolled)) !important;
  min-height:calc(var(--cshdr-bar-scrolled) + var(--cshdr-pad-top-scrolled)) !important;
}
#site-header.scrolled .e-con.e-parent > .e-con-inner,
#site-header.scrolled .elementor-widget-ekit-nav-menu > .elementor-widget-container,
#site-header.scrolled .elementor-widget-ekit-nav-menu .ekit-wid-con,
#site-header.scrolled .elementskit-menu-container,
#site-header.scrolled .elementskit-navbar-nav,
.cshdr-solid-bar #site-header .e-con.e-parent > .e-con-inner,
.cshdr-solid-bar #site-header .elementor-widget-ekit-nav-menu > .elementor-widget-container,
.cshdr-solid-bar #site-header .elementor-widget-ekit-nav-menu .ekit-wid-con,
.cshdr-solid-bar #site-header .elementskit-menu-container,
.cshdr-solid-bar #site-header .elementskit-navbar-nav{
  height:var(--cshdr-bar-scrolled) !important;
  min-height:var(--cshdr-bar-scrolled) !important;
  align-items:center;
}
@media (min-width:1025px){
  #site-header .e-con.e-parent{
    height:calc(var(--cshdr-bar) + var(--cshdr-pad-top));
  }
}
#site-header .e-con.e-parent > .e-con-inner,
#site-header .elementor-widget-ekit-nav-menu > .elementor-widget-container,
#site-header .elementor-widget-ekit-nav-menu .ekit-wid-con,
#site-header .elementskit-menu-container,
#site-header .elementskit-navbar-nav{
  height:var(--cshdr-bar);
  align-items:center;
}

/* The container holding the logo ships with `padding:10px`, which sets a floor
   under the bar: 71px of logo plus 20px of padding made the bar 91px, and the
   scrolled state only reached 81px instead of 64px. Zeroing the vertical padding
   hands the height back to the min-height rules above.
   The :has() selector finds it by content; the element id is the fallback for
   browsers without :has(). */
/* Every column inside the header carries its own vertical padding (the logo
   column 10px, the actions column 10px). Because the columns stretch to the row
   height and the row grows to the tallest column, that padding sets the floor:
   the bar measured 91px at rest and would only reach 81px scrolled, against the
   84px/64px the min-height rules ask for. Zero it on the header's own columns
   only, and let the min-height rules decide the height. */
/* The header sits in a 1240px container starting at the same x as every heading
   and paragraph on the page. The logo was 20px right of that line, because the
   row carries `padding: 0 10px` and the logo's own column another 10px. Clearing
   both puts the logo on the page's content edge and squares the whole bar up.
   Horizontal spacing inside the bar comes from explicit margins and gaps below,
   not from these containers. */
@media (min-width:1025px){
  #site-header .elementor-element-a38f52b{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #site-header .e-con.e-child{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Zeroing the padding above removes the side gutter entirely once the viewport
     drops below the 1240px container, because on wide screens that gutter was
     only ever the container centring itself. At 1100px the logo sat at x=0 and
     the language button overflowed the right edge by 5px. Reserving 74px of
     width restores a gutter that matches the page's own content inset, while
     still resolving to the full 1240 (and the x=92 alignment) on wide screens. */
  /* 93.2% matches the page's own proportional gutter, measured against the hero
     heading: 35px at 1025, 37 at 1100, 41 at 1200, 44 at 1300, and capping at the
     1240 container (92px) from about 1314 up. A fixed inset drifted up to 7px
     away from the page as the viewport grew. */
  #site-header .e-con.e-parent > .e-con-inner{
    max-width:min(93.2%, 1240px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* The logo is a fixed 240px with max-width:none, so a shrinking column let it
     spill over the nav. Pin the column to its content and let the nav absorb the
     loss instead. */
  #site-header .elementor-element-7a15c633{ flex:0 0 auto; }
  #site-header .elementor-element-3d1bcae0{ min-width:0; }
  #site-header .elementor-element-a38f52b > .e-con-inner{ flex-wrap:nowrap; }
  /* three classes, so it outranks `.e-con.e-child` above. With only the element
     class it lost, and the cluster gaps drifted to 10/5/14. */
  #site-header .e-con.e-child.elementor-element-4c3368eb{
    padding-left:5px !important;
  }
}
#site-header .e-con.e-child{
  padding-top:0 !important;
  padding-bottom:0 !important;
  /* auto height, centred by the row. Pinning a height here instead left the logo
     and the Login button top-aligned inside their columns, 17px and 21px high,
     because an Elementor column is column-direction and align-items centres
     across the wrong axis. */
  height:auto !important;
  align-self:center;
  justify-content:center;
}

/* ---------- nav ---------- */
#site-header .elementskit-navbar-nav{ margin-left:16px; }
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
  /* The theme ships these links with no padding at all, so the hover background
     rendered as a 16px-tall strip instead of the pill the design calls for. */
  padding:10px 15px !important;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:7px;
  line-height:1.2;
  /* Asymmetric on purpose: the pill arrives quickly and leaves slowly. At a
     symmetric 140ms the fade-out was technically running but read as the box
     snapping off. The faster in-transition lives on the state rules below. */
  transition:background-color .28s ease,color .28s ease;
}
#site-header .elementskit-navbar-nav > li{ margin:0 1px; }
/* ElementsKit gives the list items a fixed height, which made the <ul> 80px tall
   and set a floor under the whole bar: the scrolled state reached 81px instead of
   the 64px the min-height asks for. Let the items size to their own content and
   centre them in the bar instead. */
#site-header .elementskit-navbar-nav{ align-items:center; }
#site-header .elementskit-navbar-nav > li,
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link{
  height:auto !important;
  min-height:0 !important;
}
/* Plain :focus must carry NO styling. The theme paints it green
   (`color: var(--e-global-color-primary)`), and focus survives a click, so a
   clicked item stayed green inside a box long after the pointer had left.
   Neutralise it here, then let the states that actually end do the work below.
   This rule comes first on purpose: an element that is focused AND hovered
   should be green, and the later rule wins at equal specificity. */
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus{
  color:var(--cshdr-ink) !important;
  background:transparent !important;
}
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus .elementskit-submenu-indicator{
  color:inherit !important;
}

/* The states that do end: pointer over it, button held, or its panel open. */
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover,
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:active,
#site-header .elementskit-navbar-nav > li.cshdr-open > a.ekit-menu-nav-link{
  background:rgba(255,255,255,.08) !important;
  color:var(--cshdr-green) !important;
  transition:background-color .14s ease,color .14s ease;
}
/* The Elementor header template paints these links with the brand green on
   :focus and :active (`color: var(--e-global-color-primary)`), so a plain click
   left the item green as if it were hovered. Keep the ink colour for pointer
   interaction and give keyboard users a ring instead. */

#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover .elementskit-submenu-indicator,
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:active .elementskit-submenu-indicator{
  color:inherit !important;
  opacity:1;
}
#site-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus-visible{
  outline:2px solid var(--cshdr-green);
  outline-offset:2px;
}
/* the caret still marks the open panel, and must outrank the rules above */
#site-header .elementskit-navbar-nav > li.cshdr-open > a .elementskit-submenu-indicator{
  color:var(--cshdr-green) !important;
  transform:rotate(180deg);
}
#site-header .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{
  transition:transform .2s,color .2s;
}

/* ---------- ElementsKit's own dropdowns are replaced, not restyled ----------
   Both the hidden <ul> of links and the Elementor megamenu stay in the DOM so the
   links remain crawlable and Elementor keeps enqueueing the icon fonts the panel
   uses. They are only prevented from ever painting. */
#site-header .elementskit-navbar-nav .elementskit-submenu-panel,
#site-header .elementskit-navbar-nav .elementskit-megamenu-panel{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ---------- Login: match the homepage buttons ---------- */
#site-header .elementskit-btn{
  border-radius:var(--cshdr-btn-r) !important;
  padding:13px 22px !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  display:inline-flex !important;
  align-items:center;
  gap:9px;
  line-height:1;
}
#site-header .elementskit-btn svg{ width:15px;height:15px; }

/* ---------- the cart comes out ----------
   One flat-rate SKU, the cart is emptied before every add, and adding redirects
   straight to the cart page, so the badge can only ever read 1 and only on a page
   the customer is already standing on. */
#site-header [data-widget_type="elementskit-woo-mini-cart.default"]{ display:none !important; }

/* ---------- the two kept icons ---------- */
/* The two widgets measured 40px and 60px wide, so the pair shifted whenever the
   hover background appeared. Pin both to the same box. */
/* The cluster measured gaps of 8px, 14px and 4px because the spacing came from
   three different places: my icon margins, two containers' side padding, and one
   container's own gap. Drive it all from here instead. */
#site-header .elementor-element-a38f52b > .e-con-inner{ gap:0 !important; }
#site-header [data-widget_type="icon.default"]{
  width:40px !important;
  flex:0 0 40px;
  margin:0 5px !important;
}
/* The nav's last item ran up against the first icon. This is the seam between
   the navigation and the actions, so it wants more room than the 10px rhythm
   used inside the cluster itself.
   Targeted by adjacency, NOT `:first-of-type`: that pseudo-class asks for the
   first <div> among its siblings, and the first div here is the logo column, so
   it matched nothing and the gap stayed at 6px. */
#site-header .elementor-element-3d1bcae0 + [data-widget_type="icon.default"]{
  margin-left:32px !important;
}
#site-header .elementor-element-4c3368eb{
  padding-left:5px !important;
  padding-right:0 !important;
  gap:10px !important;
}
#site-header .cshdr-langwrap{ margin-left:4px; }
#site-header [data-widget_type="shortcode.default"],
#site-header [data-widget_type="shortcode.default"] .elementor-widget-container,
#site-header [data-widget_type="shortcode.default"] .elementor-shortcode{
  margin:0 !important;
  padding:0 !important;
  display:flex;
  align-items:center;
}
#site-header [data-widget_type="icon.default"] .elementor-widget-container{
  width:40px;
  margin:0 !important;
  padding:0 !important;
}
#site-header [data-widget_type="icon.default"] .elementor-icon-wrapper{
  position:relative;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  line-height:0;
}
#site-header [data-widget_type="icon.default"] a{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  transition:background-color .14s,color .14s;
}
#site-header [data-widget_type="icon.default"] a:hover{
  background:rgba(255,255,255,.09);
  color:var(--cshdr-green);
}
/* ---------- language switcher ----------
   TranslatePress's shortcode switcher is driven by CSS custom properties, and it
   ships white-on-black (--bg:#ffffff, --text:#000000, --border-radius:30px), which
   is a white pill sitting on a dark header. Retheme it through its own variables
   rather than fighting its rules. */
#site-header .trp-shortcode-switcher__wrapper{
  --bg:rgba(255,255,255,.045) !important;
  --bg-hover:rgba(255,255,255,.09) !important;
  --text:#f2f4fb !important;
  --text-hover:#ffffff !important;
  --border-radius:11px !important;
  --border:1px solid rgba(255,255,255,.10) !important;
  --border-width:1px !important;
  --border-color:rgba(255,255,255,.10) !important;
  --flag-size:21px !important;
  --flag-radius:3px !important;
  --font-size:14px !important;
}
#site-header .trp-switcher-dropdown-list{
  background:var(--cshdr-panel) !important;
  border-radius:14px !important;
  box-shadow:0 26px 60px rgba(0,0,0,.62) !important;
}
/* Padding, border and margin go on ONLY while the list is open.
   TranslatePress collapses it with `max-height:0`, and max-height clips the
   content box but NOT padding, border or margin. Setting them unconditionally
   left a permanent 15px sliver of dark panel hanging under the switcher and
   pushed its box to 54px against the 40px icons beside it. */
#site-header .trp-ls-dropdown.is-open .trp-switcher-dropdown-list,
#site-header .trp-shortcode-switcher.is-open .trp-switcher-dropdown-list,
#site-header .trp-ls-dropdown[aria-expanded="true"] .trp-switcher-dropdown-list{
  padding:7px !important;
  margin-top:8px !important;
  border:1px solid var(--cshdr-line) !important;
}
#site-header .trp-switcher-dropdown-list .trp-language-item{
  border-radius:9px !important;
  color:var(--cshdr-ink-2) !important;
  padding:9px 11px !important;
}
#site-header .trp-switcher-dropdown-list .trp-language-item:hover{
  background:rgba(255,255,255,.06) !important;
  color:var(--cshdr-ink) !important;
}
#site-header .trp-current-language-item__wrapper svg{ color:var(--cshdr-ink-2); }
/* TranslatePress pads the switcher 10px top and bottom, making the pill 54px tall
   next to 40px icons and a 41px Login button. Match them. */
#site-header .trp-language-switcher.trp-ls-dropdown{ padding:0 !important; }
#site-header .trp-current-language-item__wrapper{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 11px !important;
}

/* our own control replaces TranslatePress's, which stays in the DOM as the source
   of the flag images and URLs */
#site-header .cshdr-hidden-src{ display:none !important; }

.cshdr-langwrap{ position:relative; flex:0 0 auto; }
.cshdr-langbtn{
  all:unset;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:8px;
  height:41px;
  padding:0 13px;
  border-radius:var(--cshdr-btn-r);
  border:1px solid var(--cshdr-line);
  background:rgba(255,255,255,.045);
  color:var(--cshdr-ink);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .14s;
}
.cshdr-langbtn:hover{ background:rgba(255,255,255,.09); }
.cshdr-langbtn .cshdr-code{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  letter-spacing:.06em;
}
.cshdr-caret{
  width:7px;
  height:7px;
  border-right:1.9px solid currentColor;
  border-bottom:1.9px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  opacity:.5;
  transition:transform .2s,opacity .2s;
}
.cshdr-langbtn[aria-expanded="true"] .cshdr-caret{
  transform:rotate(-135deg) translate(-3px,-3px);
  opacity:1;
  color:var(--cshdr-green);
}
.cshdr-flag{
  width:21px;
  height:15.75px;
  border-radius:3px;
  object-fit:cover;
  display:block;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.cshdr-langmenu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:186px;
  background:var(--cshdr-panel);
  border:1px solid var(--cshdr-line);
  border-radius:14px;
  box-shadow:0 26px 60px rgba(0,0,0,.62);
  padding:7px;
  z-index:120;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:.16s;
}
.cshdr-langmenu.cshdr-open{ opacity:1;visibility:visible;transform:none; }
.cshdr-langmenu a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border-radius:9px;
  font-size:13.5px;
  color:var(--cshdr-ink-2);
  text-decoration:none;
  white-space:nowrap;
}
.cshdr-langmenu a:hover{ background:rgba(255,255,255,.06);color:var(--cshdr-ink); }
.cshdr-langmenu a.cshdr-cur{ background:var(--cshdr-green-dim,rgba(48,232,122,.13));color:var(--cshdr-green); }
.cshdr-langmenu .cshdr-lcode{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  width:22px;
  opacity:.7;
}

/* ---------- the shared panel ---------- */
.cshdr-src{ display:none; }

.cshdr-wrap{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:90;
  pointer-events:none;
}
.cshdr-panel{
  position:absolute;
  top:8px;
  left:0;
  width:0;
  height:0;
  background:var(--cshdr-panel);
  border:1px solid var(--cshdr-line);
  border-radius:18px;
  box-shadow:0 30px 74px rgba(0,0,0,.66),0 2px 8px rgba(0,0,0,.4);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform-origin:top left;
  transition:width .3s cubic-bezier(.2,.8,.25,1),
             height .3s cubic-bezier(.2,.8,.25,1),
             left .3s cubic-bezier(.2,.8,.25,1),
             top .2s,opacity .18s,transform .22s;
}
.cshdr-panel.cshdr-enter{ transform:translateY(-8px) scale(.985); }
.cshdr-panel.cshdr-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.cshdr-inner{
  position:absolute;
  inset:0;
  padding:24px;
  overflow-y:auto;
  overflow-x:hidden;
  transition:opacity .16s,transform .22s;
}
.cshdr-inner::-webkit-scrollbar{ width:8px; }
.cshdr-inner::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14);border-radius:4px; }
.cshdr-inner.cshdr-swap-l{ opacity:0;transform:translateX(16px); }
.cshdr-inner.cshdr-swap-r{ opacity:0;transform:translateX(-16px); }

/* the notch. It carries the same lift as the panel so it can never detach
   mid-fade, which is what the plain opacity version did. */
.cshdr-pointer{
  position:absolute;
  z-index:91;
  width:14px;
  height:14px;
  background:var(--cshdr-panel);
  border-left:1px solid var(--cshdr-line);
  border-top:1px solid var(--cshdr-line);
  transform:rotate(45deg);
  opacity:0;
  pointer-events:none;
  transition:left .3s cubic-bezier(.2,.8,.25,1),top .2s,opacity .18s,transform .22s;
}
.cshdr-pointer.cshdr-on{ opacity:1; }
.cshdr-pointer.cshdr-lift{ transform:translateY(-8px) rotate(45deg); }
.cshdr-pointer.cshdr-nomove{ transition:opacity .18s,transform .22s; }

.cshdr-sec{ display:block; }
.cshdr-cols{ display:grid;gap:22px;grid-auto-flow:column;justify-content:start; }
/* in the sheet the columns stack instead */
.cshdr-sheet .cshdr-cols{ display:block; }
.cshdr-col{ min-width:0; }
/* The mockup sets these labels in a monospace face, which is what gives them
   their look against the sans body. The site only loads Plus Jakarta Sans, so a
   system monospace stack stands in without adding a webfont request to every
   page; JetBrains Mono leads it in case it is ever loaded.

   `p.cshdr-head` and !important are both deliberate. Elementor's global kit sets
   `.elementor-kit-12 p { font-size:16px }`, whose (0,1,1) specificity outranked a
   bare `.cshdr-head` class, so these labels rendered at 16px with the 0.16em
   letter-spacing inflating to 2.56px and a 28.8px line box. It has to win in the
   off-screen measuring box too, or the panel would be sized from different
   metrics than it renders with. */
p.cshdr-head{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:10.5px !important;
  line-height:1.5 !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cshdr-ink-3);
  font-weight:600;
  margin:0 0 10px;
  padding:0 0 0 10px;
  border-left:2px solid var(--cshdr-green);
}
/* The closing line under the Solvers panel, as in the mockup. A div, not a p,
   so Elementor's global paragraph sizing cannot reach it. */
.cshdr-mfoot{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--cshdr-line-2);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
  line-height:1.5;
  color:var(--cshdr-ink-2);
}
.cshdr-blip{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cshdr-green);
  flex:0 0 auto;
}
.cshdr-sheet .cshdr-mfoot{ margin-top:12px;padding-top:12px;font-size:12px; }

a.cshdr-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  transition:background-color .12s;
  /* The descriptions are the ones already stored in the megamenu, because
     shortening them would create English strings with no dictionary rows in any
     of the six languages. Capping the row instead lets the long ones wrap:
     without this, Docs measured 992px wide for six items. */
  max-width:360px;
}
a.cshdr-item:hover{ background:rgba(255,255,255,.06); }
.cshdr-tile{
  width:34px;
  height:34px;
  border-radius:9px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:#fff;
  overflow:hidden;
}
.cshdr-ico{ width:17px;height:17px;display:block; }
.cshdr-tile img{ width:20px;height:20px;object-fit:contain;display:block; }
/* belt and braces against the lazy-loader's fade-in, which never completes for
   icons that are moved into place by script rather than scrolled into view */
.cshdr-tile img[data-lazyloaded],
.cshdr-tile img.cshdr-img{ opacity:1 !important; }
.cshdr-txt{ min-width:0; }
.cshdr-t{
  display:block;
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--cshdr-ink);
  white-space:nowrap;
}
.cshdr-s{
  display:block;
  font-size:11.5px;
  color:var(--cshdr-ink-3);
  line-height:1.35;
  margin-top:2px;
  white-space:normal;
}

/* offscreen measuring box: the panel sizes itself to its content, so the content
   has to be laid out somewhere real before the panel can be told how big to be. */
.cshdr-measure{
  position:absolute;
  left:-99999px;
  top:0;
  visibility:hidden;
  pointer-events:none;
  padding:24px;
  box-sizing:border-box;
}

/* The nav <ul> is right-aligned by ElementsKit (`elementskit-menu-po-right`), so
   when its column shrinks below the menu's own width the list overflows to the
   LEFT, straight over the logo. Sizing the column to its content prevents that. */
@media (min-width:1025px){
  #site-header .elementor-element-3d1bcae0{ flex:0 0 auto; }
}

/* Transitions off while the script measures, so each level is read as it will
   actually render rather than mid-animation from the previous one. */
#site-header.cshdr-nofx,
#site-header.cshdr-nofx *{ transition:none !important; }

/* Adaptive fit, applied by script.
   Fixed width tiers were tuned to the English labels and could not know how wide
   a translated nav is: at 1025px the row overflowed by 29px in Turkish and 19px
   in Russian. The script measures the row and steps through these until it fits,
   so every language gets only as much compression as it actually needs. Each
   level is self-contained because only one class is applied at a time. */
@media (min-width:1025px){
  #site-header.cshdr-fit1 .site-logo img{ width:212px; }
  #site-header.cshdr-fit1 .elementskit-navbar-nav > li > a.ekit-menu-nav-link{ padding:10px 11px !important; }
  #site-header.cshdr-fit1 .elementor-element-3d1bcae0 + [data-widget_type="icon.default"]{ margin-left:22px !important; }

  #site-header.cshdr-fit2 .site-logo img{ width:190px; }
  #site-header.cshdr-fit2 .elementskit-navbar-nav{ margin-left:10px; }
  #site-header.cshdr-fit2 .elementskit-navbar-nav > li > a.ekit-menu-nav-link{ padding:10px 9px !important; font-size:14px; }
  #site-header.cshdr-fit2 .elementor-element-3d1bcae0 + [data-widget_type="icon.default"]{ margin-left:16px !important; }
  #site-header.cshdr-fit2 [data-widget_type="icon.default"]{ margin:0 3px !important; }
  #site-header.cshdr-fit2 .elementskit-btn{ padding:13px 16px !important; }

  #site-header.cshdr-fit3 .site-logo img{ width:168px; }
  #site-header.cshdr-fit3 .elementskit-navbar-nav{ margin-left:6px; }
  #site-header.cshdr-fit3 .elementskit-navbar-nav > li > a.ekit-menu-nav-link{ padding:10px 6px !important; font-size:13px; }
  #site-header.cshdr-fit3 .elementor-element-3d1bcae0 + [data-widget_type="icon.default"]{ margin-left:10px !important; }
  #site-header.cshdr-fit3 [data-widget_type="icon.default"]{ margin:0 2px !important; width:34px !important; flex:0 0 34px; }
  #site-header.cshdr-fit3 [data-widget_type="icon.default"] a{ width:34px;height:34px; }
  #site-header.cshdr-fit3 .elementskit-btn{ padding:12px 12px !important; font-size:13.5px !important; }
  #site-header.cshdr-fit3 .cshdr-langbtn{ padding:0 8px;gap:6px; }
  #site-header.cshdr-fit3 .cshdr-langbtn .cshdr-code{ font-size:12px; }
}

/* Compact mode: applied by script above 1024px when even the tightest fit level
   cannot keep the nav on one line, which happens in the longer-label languages
   at the narrow end of desktop. It borrows the mobile pattern wholesale. */
body.cshdr-compact #site-header .elementor-element-3d1bcae0{ display:none !important; }
body.cshdr-compact .cshdr-wrap{ display:none !important; }
body.cshdr-compact .cshdr-thumb{ display:flex; }

/* ---------- mobile ---------- */
@media (max-width:1024px){
  #site-header .elementskit-menu-hamburger{ display:none !important; }
  /* Below the menu breakpoint the nav becomes ElementsKit's offcanvas, which we
     do not use: the thumb bar and sheet replace it. It was still taking part in
     the flex row though (a 179px box at 900px wide), which shoved the language
     button 72px in from the right while the logo sat 20px from the left. */
  #site-header .elementor-element-3d1bcae0{ display:none !important; }
  /* match the logo's gutter on the right */
  #site-header .elementor-element-4c3368eb{ padding-right:10px !important; }
  #site-header .site-logo img{ width:186px; }
  #site-header.scrolled .site-logo img,
  .cshdr-solid-bar #site-header .site-logo img{ width:168px; }
  /* The desktop rules gave the mobile bar an 84px content box plus a 16px top
     inset, so it stood 100px tall while the sheet still opened at 64px and cut
     the logo and language button in half. Mobile gets its own, smaller box. */
  #site-header .elementor-element.e-con.e-parent{
    min-height:64px;
    height:auto !important;
    padding-top:8px !important;
  }
  #site-header.scrolled .elementor-element.e-con.e-parent,
  .cshdr-solid-bar #site-header .elementor-element.e-con.e-parent{
    min-height:56px;
    padding-top:6px !important;
  }
  .cshdr-wrap{ display:none; }
}

/* Keep the top bar on screen the whole way down, on every page. The theme's
   show-on-scroll behaviour tags the header `hide-menu` while scrolling down and
   fades the wrapper out; it has a per page "Always Visible" switch that undoes
   that, but it is set on some pages and not others. This is that switch, applied
   everywhere, written the same way the theme writes it. pointer-events is left
   alone on the header itself so the click-through strip above still works. */
#site-header.sticky-header.show-on-scroll.hide-menu .site-header-wrapper{
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
}

/* Auto-hide the thumb bar while reading: scrolling down slides it away, scrolling
   up brings it back. The top bar stays visible throughout. Never hides while the
   menu sheet is open, or near the top of the page.

   Deliberately NOT inside a width media query. body.cshdr-compact shows this bar
   at desktop widths too, in the longer-label languages, and while these rules were
   mobile-only it could never hide there. */
.cshdr-thumb{ transition:transform .28s cubic-bezier(.2,.8,.25,1); }
/* The travel has to clear the bar's own offset from the bottom, not a guessed
   constant. This used to be 100% + 24px, which clears the screen only where the
   safe-area inset is 12px or less. On a phone with a home indicator the inset is
   about 34px, so 22px of the bar stayed on screen and it read as not hiding at
   all. A desktop emulator reports a 0px inset, which is why it looked correct
   everywhere except on the hardware it is for. */
.cshdr-thumb.cshdr-hide{
  /* translate3d, not translateY, so the move is definitely handed to the
     compositor rather than being repainted. */
  transform:translate3d(0,calc(100% + var(--cshdr-thumb-gap) + 10px),0);
  /* The blur is what made the slide stutter. A backdrop-filter cannot be cached
     into the layer the way a background or a shadow can: the content behind the
     bar changes as it travels, so the compositor re-reads and re-blurs the whole
     backdrop on every frame of the animation. The bar's own background is
     rgba(15,20,32,.94), which is 6% show-through, so that blur contributes
     almost nothing to look at while costing that much to move. Dropped for the
     duration of the movement only, so the resting appearance is unchanged; on
     the way back it returns while the bar is still off screen. */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.cshdr-thumb{
  /* one source of truth for the gap, so the hide travel above cannot drift out
     of step with where the bar actually sits */
  --cshdr-thumb-gap:calc(12px + env(safe-area-inset-bottom,0px));
  position:fixed;
  left:12px;
  right:12px;
  bottom:var(--cshdr-thumb-gap);
  /* identity transform: no visual change, but the bar gets its own compositor
     layer up front, so the first frame of a hide is not spent making one */
  transform:translate3d(0,0,0);
  z-index:9998;
  display:none;
  gap:6px;
  background:rgba(15,20,32,.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid var(--cshdr-line);
  border-radius:17px;
  padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
@media (max-width:1024px){ .cshdr-thumb{ display:flex; } }
.cshdr-thumb a,
.cshdr-thumb button{
  all:unset;
  flex:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:13px 6px;
  border-radius:12px;
  font-size:13.5px;
  font-weight:600;
  color:var(--cshdr-ink-2);
  text-align:center;
  box-sizing:border-box;
}
.cshdr-thumb a:hover,
.cshdr-thumb button:hover{ background:rgba(255,255,255,.08);color:var(--cshdr-ink); }
.cshdr-thumb .cshdr-primary{ background:var(--cshdr-green);color:#04120a; }
.cshdr-bico{ width:16px;height:16px;flex:0 0 auto;display:block; }
/* both menu icons ship in the markup; only one shows at a time */
.cshdr-bico-close{ display:none; }
.cshdr-menu-btn.cshdr-is-open .cshdr-bico{ display:none; }
.cshdr-menu-btn.cshdr-is-open .cshdr-bico-close{ display:block; }

.cshdr-sheet{
  position:fixed;
  inset:64px 0 0;
  z-index:9997;
  background:#06080e;
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  opacity:0;
  visibility:hidden;
  transition:.24s cubic-bezier(.2,.8,.25,1);
}
.cshdr-sheet.cshdr-open{ transform:none;opacity:1;visibility:visible; }
.cshdr-sheet-scroll{ flex:1;overflow-y:auto;padding:6px 16px 92px; }
.cshdr-flat,
.cshdr-acc > button{
  all:unset;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  width:100%;
  padding:15px 4px;
  font-size:16px;
  font-weight:600;
  color:var(--cshdr-ink);
  border-bottom:1px solid var(--cshdr-line-2);
  cursor:pointer;
  text-decoration:none;
}
.cshdr-acc{ border-bottom:1px solid var(--cshdr-line-2); }
.cshdr-acc > button{ border-bottom:0; }
.cshdr-acc > button .cshdr-n{
  margin-left:auto;
  margin-right:12px;
  font-size:11px;
  color:var(--cshdr-ink-3);
}
.cshdr-acc > button .cshdr-cv{
  width:8px;
  height:8px;
  border-right:2px solid var(--cshdr-ink-3);
  border-bottom:2px solid var(--cshdr-ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s;
}
.cshdr-acc.cshdr-open > button .cshdr-cv{
  transform:rotate(-135deg) translate(-3px,-3px);
  border-color:var(--cshdr-green);
}
.cshdr-acc .cshdr-body{ max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.2,.8,.25,1); }
.cshdr-acc .cshdr-body-in{ padding:2px 0 12px; }
.cshdr-sheet p.cshdr-head{ margin:12px 0 4px;padding-left:6px;font-size:9.5px !important; }
.cshdr-sheet a.cshdr-item{ padding:9px 6px; }
.cshdr-sheet .cshdr-tile{ width:30px;height:30px;border-radius:8px; }
.cshdr-sheet .cshdr-tile i{ font-size:15px; }
.cshdr-sheet .cshdr-tile img{ width:17px;height:17px; }
.cshdr-sheet .cshdr-t,
.cshdr-sheet .cshdr-s{ white-space:normal; }
.cshdr-lang{
  padding:14px 16px calc(92px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--cshdr-line);
  background:rgba(0,0,0,.34);
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
/* The chips are clones of the TranslatePress switcher links, so they arrive with
   that plugin's own markup (flag image plus label) and none of its layout. */
.cshdr-lang a.cshdr-chip{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  padding:8px 11px;
  border-radius:9px;
  border:1px solid var(--cshdr-line);
  color:var(--cshdr-ink-2);
  text-decoration:none;
  white-space:nowrap;
}
.cshdr-lang a.cshdr-chip:hover{ background:rgba(255,255,255,.07); }
/* TranslatePress colours the label on the inner span, so the chip's own colour
   never reaches the text and it renders near-black on a near-black sheet. */
.cshdr-lang a.cshdr-chip,
.cshdr-lang a.cshdr-chip *{ color:var(--cshdr-ink-2) !important; }
.cshdr-lang a.cshdr-chip:hover,
.cshdr-lang a.cshdr-chip:hover *{ color:var(--cshdr-ink) !important; }
.cshdr-lang a.cshdr-chip img{
  width:21px;
  height:15.75px;
  border-radius:3px;
  object-fit:cover;
  display:block;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.cshdr-lang a.cshdr-chip .trp-ls-shortcode-current-language,
.cshdr-lang a.cshdr-chip span{ display:inline; }