/* Native theme header only. Geometry lives here instead of competing
 * mobile height/padding rules in the base and UI stylesheets. */
body.ui-system-energy .site-header[data-oriibrands-header] {
  height: auto;
  min-height: 0;
  padding: 0;
}
body.ui-system-energy [data-oriibrands-header] > .header-row {
  width: 100%;
  height: auto;
  min-height: var(--header-height-desktop, 80px);
  padding-block: 14px;
  max-width: var(--container);
}
[data-oriibrands-header] .menu-toggle {
  position: relative;
  flex: 0 0 var(--mobile-menu-button-size, 44px);
  width: var(--mobile-menu-button-size, 44px);
  min-width: var(--mobile-menu-button-size, 44px);
  max-width: var(--mobile-menu-button-size, 44px);
  height: var(--mobile-menu-button-size, 44px);
  min-height: var(--mobile-menu-button-size, 44px);
  padding: 0;
  margin: 0;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 50%;
  background: var(--card);
  color: var(--foreground);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s ease, border-color .2s ease;
}

/* Visitor appearance selector. It is emitted only when enabled in Header. */
[data-oriibrands-header] .header-theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 50%;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-oriibrands-header] .header-theme-toggle:hover { background: var(--button-soft-bg); }
}
[data-oriibrands-header] .header-theme-toggle .theme-toggle-icon { position:absolute; display:grid; place-items:center; width:20px; height:20px; transition:transform .22s ease,opacity .18s ease; }
[data-oriibrands-header] .header-theme-toggle svg { width:100%; height:100%; }
[data-oriibrands-header] .header-theme-toggle .theme-toggle-sun { opacity:0; transform:rotate(-70deg) scale(.7); }
[data-oriibrands-header] .header-theme-toggle .theme-toggle-moon { opacity:1; transform:rotate(0) scale(1); }
html[data-oriibrands-theme="light"] [data-oriibrands-header] .header-theme-toggle .theme-toggle-sun { opacity:1; transform:rotate(0) scale(1); }
html[data-oriibrands-theme="light"] [data-oriibrands-header] .header-theme-toggle .theme-toggle-moon { opacity:0; transform:rotate(70deg) scale(.7); }
body.theme-light [data-oriibrands-header] .header-theme-toggle .theme-toggle-sun { opacity:1; transform:rotate(0) scale(1); }
body.theme-light [data-oriibrands-header] .header-theme-toggle .theme-toggle-moon { opacity:0; transform:rotate(70deg) scale(.7); }
[data-oriibrands-header] .header-theme-toggle-mobile { width:100%; border-radius:12px; margin-top:16px; justify-content:center; }
@media (prefers-reduced-motion: reduce) {
  [data-oriibrands-header] .header-theme-toggle,
  [data-oriibrands-header] .header-theme-toggle .theme-toggle-icon { transition:none; }
}
[data-oriibrands-header][data-menu-button-style="rounded"] .menu-toggle { border-radius: 12px; }
[data-oriibrands-header][data-menu-button-style="minimal"] .menu-toggle { border-color: transparent; background: transparent; border-radius: 12px; }
/* Hover is intentionally limited to devices with an actual fine pointer. Some
 * tablets retain :hover after a tap, which used to leave a primary-coloured
 * ring around the menu button. Opening the menu only changes its surface. */
@media (hover: hover) and (pointer: fine) {
  [data-oriibrands-header] .menu-toggle:hover { background: var(--button-soft-bg); }
}
[data-oriibrands-header] .menu-toggle[aria-expanded="true"] { background: var(--button-soft-bg); }
@media (hover: none) and (pointer: coarse) {
  [data-oriibrands-header] .menu-toggle:focus-visible { outline: none; }
}
[data-oriibrands-header] .menu-toggle-icon {
  transition: opacity .2s ease;
  position: relative;
  display: block;
  width: var(--mobile-menu-icon-size, 22px);
  height: var(--mobile-menu-icon-size, 22px);
}
[data-oriibrands-header] .menu-toggle-custom {
  position: absolute; inset: 50% auto auto 50%;
  width: var(--mobile-menu-icon-size, 22px); height: var(--mobile-menu-icon-size, 22px);
  transform: translate(-50%, -50%) rotate(-20deg) scale(.8);
  opacity: 0; transition: opacity .2s ease, transform .28s ease;
  pointer-events: none;
}
[data-oriibrands-header] .menu-toggle-custom svg { display: block; width: 100%; height: 100%; }
[data-menu-icon^="ui-"] .menu-toggle-icon { visibility: hidden; }
[data-menu-icon^="ui-"] .menu-toggle[aria-expanded="false"] .menu-toggle-custom-open,
[data-menu-icon^="ui-"] .menu-toggle[aria-expanded="true"] .menu-toggle-custom-close,
[data-oriibrands-header]:not([data-menu-close-icon="x"]) .menu-toggle[aria-expanded="true"] .menu-toggle-custom-close { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
[data-oriibrands-header]:not([data-menu-close-icon="x"]) .menu-toggle[aria-expanded="true"] .menu-toggle-icon { opacity: 0; }
[data-menu-animation="none"] .menu-toggle-custom,
[data-menu-animation="none"] .menu-toggle-icon { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-oriibrands-header] .menu-toggle-custom,
  [data-oriibrands-header] .menu-toggle-icon { transition: none; }
}
[data-oriibrands-header] .menu-toggle-icon > span {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transform-origin: center;
  transition: top .28s ease, transform .28s ease, width .28s ease, opacity .18s ease;
}
[data-oriibrands-header] .menu-toggle-icon > span:first-child { top: 24%; }
[data-oriibrands-header] .menu-toggle-icon > span:last-child { top: 76%; }
[data-menu-icon="lines"] .menu-toggle-icon > span:nth-child(2) { opacity: 0; }
[data-menu-icon="lines"] .menu-toggle-icon > span:first-child { top: 32%; }
[data-menu-icon="lines"] .menu-toggle-icon > span:last-child { top: 68%; }
[data-menu-icon="staggered"] .menu-toggle-icon > span:nth-child(2) { width: 72%; }
[data-menu-icon="staggered"] .menu-toggle-icon > span:last-child { width: 46%; }
[data-oriibrands-header] .menu-toggle[aria-expanded="true"] .menu-toggle-icon > span { top: 50%; width: 100%; }
[data-oriibrands-header] .menu-toggle[aria-expanded="true"] .menu-toggle-icon > span:first-child { transform: translateY(-50%) rotate(45deg); }
[data-oriibrands-header] .menu-toggle[aria-expanded="true"] .menu-toggle-icon > span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); }
[data-oriibrands-header] .menu-toggle[aria-expanded="true"] .menu-toggle-icon > span:last-child { transform: translateY(-50%) rotate(-45deg); }

body.ui-system-energy [data-oriibrands-header] > .mobile-nav {
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0;
  border: 0;
  background: var(--background);
  transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
body.ui-system-energy [data-oriibrands-header] > .mobile-nav.is-open { grid-template-rows: 1fr; opacity: 1; }
[data-oriibrands-header] .mobile-nav-clip { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .32s; }
[data-oriibrands-header] .mobile-nav.is-open > .mobile-nav-clip { visibility: visible; transition-delay: 0s; }
[data-oriibrands-header] .mobile-nav-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 12px var(--mobile-header-gutter, 20px) 24px;
  border-top: 1px solid var(--border);
  max-height: calc(100vh - var(--mobile-header-row-height, 76px) - var(--header-admin-offset, 0px) - 2px);
  max-height: calc(100dvh - var(--mobile-header-row-height, 76px) - var(--header-admin-offset, 0px) - 2px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  transform: translateY(-6px);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
[data-oriibrands-header] .mobile-nav.is-open .mobile-nav-inner {
  transform: translateY(0);
  /* Fill the remaining mobile viewport so the page behind the open menu
     never appears as a stray strip below the final action. */
  min-height: calc(100vh - var(--mobile-header-row-height, 76px) - var(--header-admin-offset, 0px) - 2px);
  min-height: calc(100dvh - var(--mobile-header-row-height, 76px) - var(--header-admin-offset, 0px) - 2px);
}
body.ui-system-energy [data-oriibrands-header] .mobile-primary-menu a {
  padding-inline: 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.ui-system-energy [data-oriibrands-header] .mobile-nav .menu-item-has-children > a { padding-inline-end: 48px; }
[data-oriibrands-header] .mobile-nav .submenu-toggle { inset-inline-end: 0; inset-inline-start: auto; }
body.ui-system-energy [data-oriibrands-header] .mobile-nav .sub-menu {
  display: none;
  max-height: none;
  padding-inline: 16px 0;
  overflow: visible;
}
body.ui-system-energy [data-oriibrands-header] .mobile-nav .is-expanded > .sub-menu { display: block; }
body.ui-system-energy [data-oriibrands-header] .mobile-nav .header-cta-mobile { text-align: center; color: var(--button-text); }
body.ui-system-energy [data-oriibrands-header] .mobile-nav .header-cta-mobile:hover,
body.ui-system-energy [data-oriibrands-header] .mobile-nav .header-cta-mobile:focus-visible { color: var(--button-hover-text); }

/* The same compact layout is used below 880px and when desktop items do
 * not fit. JavaScript measures the existing desktop layout before fallback. */
body.ui-system-energy [data-oriibrands-header].is-compact > .header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: max(72px, calc(var(--mobile-menu-button-size, 44px) + 24px));
  padding: 12px var(--mobile-header-gutter, 20px);
}
[data-oriibrands-header].is-compact .primary-nav,
[data-oriibrands-header].is-compact .header-actions { display: none; }
body.ui-system-energy [data-oriibrands-header].is-compact .menu-toggle { display: inline-flex; }
body.ui-system-energy [data-oriibrands-header].is-compact .site-logo { flex: 0 1 auto; max-width: calc(100% - var(--mobile-menu-button-size, 44px) - 16px); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.ui-system-energy [data-oriibrands-header].is-compact .site-logo-image a { display: flex; min-width: 0; }
body.ui-system-energy [data-oriibrands-header].is-compact .site-logo-image img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; }
body.ui-system-energy [data-oriibrands-header].is-compact > .mobile-nav { display: grid; }
@media (max-width: 879px) {
  html { scroll-padding-top: max(72px, calc(var(--mobile-menu-button-size, 44px) + 24px)); }
  body.ui-system-energy [data-oriibrands-header] > .header-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: max(72px, calc(var(--mobile-menu-button-size, 44px) + 24px)); padding: 12px var(--mobile-header-gutter, 20px); }
  [data-oriibrands-header] .primary-nav, [data-oriibrands-header] .header-actions { display: none; }
  body.ui-system-energy [data-oriibrands-header] .menu-toggle { display: inline-flex; }
  body.ui-system-energy [data-oriibrands-header] .site-logo { flex: 0 1 auto; max-width: calc(100% - var(--mobile-menu-button-size, 44px) - 16px); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.ui-system-energy [data-oriibrands-header] .site-logo-image a { display: flex; min-width: 0; }
  body.ui-system-energy [data-oriibrands-header] .site-logo-image img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; }
  body.ui-system-energy [data-oriibrands-header] > .mobile-nav { display: grid; }
}
body.ui-system-energy [data-oriibrands-header][data-menu-animation="fade"] > .mobile-nav { transition: grid-template-rows .24s step-end, opacity .24s ease; }
body.ui-system-energy [data-oriibrands-header][data-menu-animation="fade"] > .mobile-nav.is-open { transition-timing-function: step-start, ease; }
[data-oriibrands-header][data-menu-animation="fade"] .mobile-nav-inner { transform: none; transition: none; }
body.ui-system-energy [data-oriibrands-header][data-menu-animation="none"] > .mobile-nav,
[data-oriibrands-header][data-menu-animation="none"] .mobile-nav-clip,
[data-oriibrands-header][data-menu-animation="none"] .mobile-nav-inner,
[data-oriibrands-header][data-menu-animation="none"] .menu-toggle-icon > span { transition: none; }
[data-oriibrands-header][data-menu-animation="none"] .mobile-nav-inner { transform: none; }
/* WordPress toolbar: only the visible part reserves space on short screens. */
body.admin-bar .site-header[data-oriibrands-header] { top: var(--header-admin-offset, 32px); }
@media (prefers-reduced-motion: reduce) {
  body.ui-system-energy [data-oriibrands-header] > .mobile-nav,
  [data-oriibrands-header] .mobile-nav-clip,
  [data-oriibrands-header] .mobile-nav-inner,
  [data-oriibrands-header] .menu-toggle,
  [data-oriibrands-header] .menu-toggle-icon > span { transition: none; }
  [data-oriibrands-header] .mobile-nav-inner { transform: none; }
}

/* 1.10.1 adaptive logos and front-end access */
.oriibrands-adaptive-logo .oriibrands-logo-light,.oriibrands-adaptive-logo .oriibrands-logo-transparent{display:none}
html[data-oriibrands-theme="light"] .oriibrands-adaptive-logo .oriibrands-logo-dark{display:none}
html[data-oriibrands-theme="light"] .oriibrands-adaptive-logo .oriibrands-logo-light{display:block}
body.has-header-hero-overlay .site-header:not(.is-scrolled) .oriibrands-adaptive-logo .oriibrands-logo-dark,body.has-header-hero-overlay .site-header:not(.is-scrolled) .oriibrands-adaptive-logo .oriibrands-logo-light{display:none}
body.has-header-hero-overlay .site-header:not(.is-scrolled) .oriibrands-adaptive-logo .oriibrands-logo-transparent{display:block}
.oriibrands-footer-adaptive-logo .oriibrands-footer-logo-light{display:none}
html[data-oriibrands-theme="light"] .oriibrands-footer-adaptive-logo .oriibrands-footer-logo-dark{display:none}
html[data-oriibrands-theme="light"] .oriibrands-footer-adaptive-logo .oriibrands-footer-logo-light{display:block}
.header-login-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1rem;text-decoration:none}
.header-login-button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Access button is an independent Design System component. */
.header-login-button{--access-surface:var(--access-bg);background:var(--access-surface);color:var(--access-text);border:1px solid var(--access-border);border-radius:999px;position:relative;overflow:hidden;isolation:isolate;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.header-login-button.access-type-gradient{--access-surface:var(--gradient-brand);border-color:transparent}
.header-login-button.access-type-outline{--access-surface:transparent;color:var(--access-border)}
.header-login-button.access-type-soft{--access-surface:color-mix(in srgb,var(--access-bg) 14%,transparent);color:var(--access-text)}
.header-login-button:is(:hover,:focus-visible){background:var(--access-hover-bg);color:var(--access-hover-text)}
.header-login-button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Explicit effect and "Follow Design System" share the same implementation. */
:is(.header-login-button.access-effect-slide,body.button-effect-slide .header-login-button.access-effect-theme)::before{background:var(--gradient-brand);transform:scaleX(0);transform-origin:left center;transition:transform .45s ease}
:is(.header-login-button.access-effect-slide,body.button-effect-slide .header-login-button.access-effect-theme):is(:hover,:focus-visible){background:var(--access-surface)}
:is(.header-login-button.access-effect-slide,body.button-effect-slide .header-login-button.access-effect-theme):is(:hover,:focus-visible)::before{transform:scaleX(1)}
:is(.header-login-button.access-effect-flow,body.button-effect-flow .header-login-button.access-effect-theme){background:var(--gradient-brand);background-size:260% 260%;animation:oriibrands-btn-flow 9s ease-in-out infinite}
:is(.header-login-button.access-effect-flow,body.button-effect-flow .header-login-button.access-effect-theme):is(:hover,:focus-visible){background:var(--gradient-brand);background-size:260% 260%;animation-duration:3s}
:is(.header-login-button.access-effect-shine,body.button-effect-shine .header-login-button.access-effect-theme)::before{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
:is(.header-login-button.access-effect-shine,body.button-effect-shine .header-login-button.access-effect-theme):is(:hover,:focus-visible)::before{transform:translateX(120%)}
:is(.header-login-button.access-effect-lift,body.button-effect-lift .header-login-button.access-effect-theme):is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 10px 24px -14px currentColor}
:is(.header-login-button.access-effect-radial,body.button-effect-radial .header-login-button.access-effect-theme)::before{background:var(--gradient-brand);clip-path:circle(0 at 50% 50%);transition:clip-path .38s cubic-bezier(.22,1,.36,1)}
:is(.header-login-button.access-effect-radial,body.button-effect-radial .header-login-button.access-effect-theme):is(:hover,:focus-visible){background:var(--access-surface)}
:is(.header-login-button.access-effect-radial,body.button-effect-radial .header-login-button.access-effect-theme):is(:hover,:focus-visible)::before{clip-path:circle(150% at 50% 50%)}
:is(.header-login-button.access-effect-border,body.button-effect-border .header-login-button.access-effect-theme):is(:hover,:focus-visible){box-shadow:0 0 0 2px var(--access-border)}
:is(.header-login-button.access-effect-pulse,body.button-effect-pulse .header-login-button.access-effect-theme):is(:hover,:focus-visible){animation:oriibrands-access-pulse 1.4s ease-out infinite}
@keyframes oriibrands-access-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--access-border) 55%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.header-login-button{transition:none!important;animation:none!important;transform:none!important}.header-login-button::before{display:none!important}.header-login-button:is(:hover,:focus-visible){background:var(--access-hover-bg);color:var(--access-hover-text)}}
.site-header[data-oriibrands-header]{color:var(--foreground);background:var(--background);border-color:var(--border)}
.site-header[data-oriibrands-header] :is(.primary-nav > ul > li > a,.menu-toggle,.search-toggle,.social-icon){color:inherit}
body.has-header-hero-overlay .site-header[data-oriibrands-header]:not(.is-scrolled){background:transparent;border-color:transparent}
body.has-header-hero-overlay .site-header[data-oriibrands-header].is-scrolled{background:var(--background);color:var(--foreground);border-color:var(--border)}
.site-header[data-oriibrands-header] :is(a,button):focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* The appearance switch has its own surface: its icon must use the matching ink,
   not the transparent menu colour, which can be white in Light mode. */
body #masthead.site-header[data-oriibrands-header] .header-theme-toggle{color:var(--foreground);background:var(--card)}
@media(hover:hover) and (pointer:fine){body #masthead.site-header[data-oriibrands-header] .header-theme-toggle:hover{background:var(--secondary)}}
