@import url("/website-r17/assets/css/core/header-mobile.css?v=r17-dc5568318d472c8f");

/* =========================================================
   Header Core Layer
   Header, desktop navigation, dropdowns, mobile controls,
   mobile drawer, and header compatibility selectors only.

   This file should own the global site header system only.
   Page-specific navigation overrides do not belong here.
   Button variants belong in core/components.css unless they are
   header-only button treatments.
   ========================================================= */

.lgic-header {
  --header-muted: #6D7A90;
  font-family: "Montserrat", system-ui, sans-serif;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(11,30,58,.06);
  box-shadow: 0 12px 40px rgba(11,30,58,.05);
}

.lgic-wrap,
.lgic-header .wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 10px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.lgic-brand img,
.lgic-header .brand img {
  height: 40px;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}

.lgic-brand:hover img,
.lgic-header .brand:hover img {
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 4px 10px rgba(11,30,58,.12));
}

/* ------------------------------
   Desktop nav
   ------------------------------ */
nav[aria-label="Primary"] {
  display: flex;
  justify-content: center;
}

.lgic-menu,
.lgic-header .menu {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(245,248,255,0.92));
  box-shadow:
    inset 0 0 0 1px rgba(11,30,58,.05),
    0 8px 22px rgba(11,30,58,.05);
}

.lgic-link,
.lgic-header .link {
  position: relative;
  text-decoration: none;
  color: #5f6d86;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 12px;
  padding: 10px 4px;
  transition: color .25s ease, opacity .25s ease;
  white-space: nowrap;
}

.lgic-link::after,
.lgic-header .link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  transform: translateX(-50%);
  transition: width .24s ease;
}

.lgic-link:hover,
.lgic-link:focus-visible,
.lgic-header .link:hover,
.lgic-header .link:focus-visible {
  color: var(--blue-dark);
  outline: none;
}

.lgic-link:hover::after,
.lgic-link:focus-visible::after,
.lgic-header .link:hover::after,
.lgic-header .link:focus-visible::after {
  width: 70%;
}

.lgic-has-dd,
.lgic-header .has-dd {
  position: relative;
  padding-bottom: 8px;
}

.lgic-has-dd::after,
.lgic-header .has-dd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
}

.lgic-link.lgic-has-caret,
.lgic-header .link.has-caret {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lgic-caret,
.lgic-header .caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue-dark);
  border-bottom: 2px solid var(--blue-dark);
  transform: rotate(45deg);
  transition: transform .2s ease, opacity .2s ease;
  opacity: .85;
}

.lgic-has-dd:hover .lgic-caret,
.lgic-has-dd:focus-within .lgic-caret,
.lgic-header .has-dd:hover .caret,
.lgic-header .has-dd:focus-within .caret {
  transform: rotate(225deg) translateY(1px);
}

/* ------------------------------
   Desktop dropdowns
   ------------------------------ */
.lgic-dropdown,
.lgic-header .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 16px);
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.98));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: 18px 18px 22px 22px;
  box-shadow:
    0 24px 54px rgba(11,30,58,.16),
    0 0 0 1px rgba(11,30,58,.06),
    inset 0 1px 0 rgba(255,255,255,.75);
  min-width: 260px;
  padding: 10px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.lgic-dropdown-inner,
.lgic-header .dropdown-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lgic-dropdown-inner-areas,
.lgic-header .dropdown-inner-areas {
  min-width: 300px;
}

.lgic-dropdown-group,
.lgic-header .dropdown-group {
  position: relative;
}

.lgic-dropdown-group::after,
.lgic-header .dropdown-group::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 18px;
  height: 100%;
}

.lgic-dropdown-group-trigger,
.lgic-header .dropdown-group-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 40px 11px 14px;
  border-radius: 14px;
  background: transparent;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  cursor: default;
  min-width: 100%;
}

.lgic-dropdown-group-trigger:focus,
.lgic-header .dropdown-group-trigger:focus {
  outline: none;
}

.lgic-dropdown-group-trigger .label,
.lgic-header .dropdown-group-trigger .label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  font-size: 12px;
}

.lgic-dropdown-group-trigger .meta,
.lgic-header .dropdown-group-trigger .meta {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--header-muted);
}

.lgic-dropdown-group-trigger::after,
.lgic-header .dropdown-group-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue-dark);
  border-bottom: 2px solid var(--blue-dark);
  transform: translateY(-55%) rotate(-45deg);
  opacity: .8;
}

.lgic-dropdown-group:hover .lgic-dropdown-group-trigger,
.lgic-dropdown-group:focus-within .lgic-dropdown-group-trigger,
.lgic-header .dropdown-group:hover .dropdown-group-trigger,
.lgic-header .dropdown-group:focus-within .dropdown-group-trigger {
  background: linear-gradient(135deg, rgba(58,108,243,0.10), rgba(24,58,138,0.14));
  box-shadow:
    0 10px 24px rgba(11,30,58,.12),
    inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(-1px);
}

.lgic-dropdown-submenu,
.lgic-header .dropdown-submenu {
  position: absolute;
  left: calc(100% - 6px);
  top: -6px;
  min-width: 220px;
  padding: 8px 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,255,0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 22px 46px rgba(11,30,58,.14),
    0 0 0 1px rgba(11,30,58,.06),
    inset 0 1px 0 rgba(255,255,255,.7);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 30;
}

.lgic-dropdown-group:hover .lgic-dropdown-submenu,
.lgic-dropdown-group:focus-within .lgic-dropdown-submenu,
.lgic-dropdown-submenu:hover,
.lgic-dropdown-submenu:focus-within,
.lgic-header .dropdown-group:hover .dropdown-submenu,
.lgic-header .dropdown-group:focus-within .dropdown-submenu,
.lgic-header .dropdown-submenu:hover,
.lgic-header .dropdown-submenu:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lgic-dropdown-submenu a,
.lgic-header .dropdown-submenu a {
  padding: 9px 12px;
  white-space: nowrap;
}

.lgic-dropdown-submenu a .label,
.lgic-header .dropdown-submenu a .label {
  font-size: 12px;
}

.lgic-dropdown a,
.lgic-header .dropdown a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  text-decoration: none;
  background: transparent;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lgic-dropdown a span.label,
.lgic-header .dropdown a span.label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
}

.lgic-dropdown a span.meta,
.lgic-header .dropdown a span.meta {
  font-weight: 500;
  font-size: 11px;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--header-muted);
}

.lgic-dropdown a:hover,
.lgic-dropdown a:focus-visible,
.lgic-header .dropdown a:hover,
.lgic-header .dropdown a:focus-visible {
  outline: none;
  background: linear-gradient(135deg, rgba(58,108,243,0.10), rgba(24,58,138,0.14));
  box-shadow:
    0 10px 24px rgba(11,30,58,.12),
    inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(-1px);
}

.lgic-has-dd:hover .lgic-dropdown,
.lgic-has-dd:focus-within .lgic-dropdown,
.lgic-header .has-dd:hover .dropdown,
.lgic-header .has-dd:focus-within .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 10px);
}

/* ------------------------------
   Header CTAs
   ------------------------------ */
.lgic-ctas,
.lgic-header .ctas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-btn,
.lgic-header .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 12px;
  text-decoration: none;
  border: 1px solid rgba(11,30,58,.12);
  color: var(--blue-dark);
  background: #fff;
  box-shadow: 0 8px 22px rgba(11,30,58,.08);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  white-space: nowrap;
}

.header-btn:hover,
.lgic-header .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(11,30,58,.18);
  background: #f7f9ff;
}

.header-btn-primary,
.lgic-header .btn-primary,
.lgic-drawer .btn-primary {
  background: linear-gradient(130deg, var(--blue), var(--blue-dark));
  color: #fff;
  border: none;
  box-shadow: 0 14px 34px rgba(58,108,243,.35);
}

.header-btn-primary:hover,
.lgic-header .btn-primary:hover,
.lgic-drawer .btn-primary:hover {
  background: linear-gradient(130deg, #456ff9, #102f76);
}

/* ------------------------------
   Header compatibility layer
   Current header.html uses legacy short class names.
   This keeps header.css compatible without editing includes/header.html.
   ------------------------------ */
.lgic-header .brand {
  display: inline-flex;
  align-items: center;
}

.lgic-header .brand img {
  max-width: 210px;
  width: auto;
  object-fit: contain;
}

.lgic-header .menu > li {
  position: relative;
}

.lgic-header .ctas .btn {
  min-height: 40px;
}

/* ------------------------------
   Ownership note
   ------------------------------
   header.css owns only the global header system:
   sticky header shell, desktop navigation, desktop dropdowns,
   header CTAs, mobile header controls, mobile drawer, and temporary
   compatibility selectors for the current includes/header.html markup.

   It should not own page-specific navigation behaviour, page layout,
   global button variants, generic cards, form systems, or section systems.

   Shared button variants belong in core/components.css.
   Shared section systems belong in core/sections.css.
   Page-specific refinements belong in assets/css/pages/.
*/

/* Quiet architectural chrome; navigation and disclosure behaviour are unchanged. */
#site-header { position: sticky; top: 0; z-index: 1000; min-height: 81px; }
html .lgic-header { background: var(--lgic-editorial-chrome); border-bottom: 1px solid var(--lgic-editorial-chrome-line); box-shadow: none; backdrop-filter: none; }
html .lgic-header .wrap { min-height: 80px; gap: 24px; }
html .lgic-header .brand img { width: 210px; height: auto; aspect-ratio: 344.92 / 50.2; transform: none; filter: none; }
html .lgic-header .menu { padding: 0; background: none; border-radius: 0; box-shadow: none; gap: 24px; }
html .lgic-header .menu > li > a { color: #354858; font-weight: 600; letter-spacing: .025em; text-transform: none; min-height: var(--lgic-editorial-tap); display: flex; align-items: center; }
html .lgic-header .menu > li > a::after { height: 1px; background: var(--lgic-editorial-accent); bottom: 3px; }
html .lgic-header .dropdown, html .lgic-header .dropdown-submenu { background: var(--lgic-editorial-chrome); border: 1px solid var(--lgic-editorial-chrome-line); border-radius: var(--lgic-editorial-radius); box-shadow: 0 14px 32px rgba(16,39,60,.1); backdrop-filter: none; }
html .lgic-header .dropdown a, html .lgic-header .dropdown-group-trigger { border-radius: 0; min-height: var(--lgic-editorial-tap); }
html .lgic-header .dropdown a span.label, html .lgic-header .dropdown-group-trigger .label { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--lgic-editorial-ink); }
html .lgic-header .dropdown a:hover, html .lgic-header .dropdown a:focus-visible,
html .lgic-header .dropdown-group:hover .dropdown-group-trigger, html .lgic-header .dropdown-group:focus-within .dropdown-group-trigger { background: #eeece3; box-shadow: none; transform: none; }
html .lgic-header .btn { border-radius: var(--lgic-editorial-radius); box-shadow: none; min-height: var(--lgic-editorial-tap); padding: 10px 14px; text-transform: none; letter-spacing: .015em; font-weight: 600; }
html .lgic-header .btn-primary, html .lgic-header .btn-primary:hover { background: var(--lgic-editorial-ink); color: #fff; }
html .lgic-header .btn:hover { transform: none; box-shadow: none; }
html .lgic-header :focus-visible { outline: 2px solid var(--lgic-editorial-accent); outline-offset: 3px; }
html .lgic-header .dropdown a:focus-visible, html .lgic-header .dropdown-group-trigger:focus-visible { outline: 2px solid var(--lgic-editorial-accent); outline-offset: -2px; }
html .lgic-header .dropdown a span.meta, html .lgic-header .dropdown-group-trigger .meta { color: var(--lgic-editorial-muted); }
@media (min-width: 1024px) and (max-width: 1100px) {
  html .lgic-header .wrap { gap: 16px; }
  html .lgic-header .menu { gap: 16px; }
  html .lgic-header .brand img { width: 180px; }
}
@media (prefers-reduced-motion: reduce) { html .lgic-header * { transition: none; } }