/* Component: Navbar */

.c-navbar {
  width: 100%;
  background: var(--color-surface-0, #ffffff);
  border-bottom: none;
  position: relative;
  z-index: 100;
}

.c-navbar--sticky {
  position: sticky;
  top: 0;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.c-navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md, 1.5rem);
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px var(--gutter-mobile, var(--spacing-sm));
  width: 100%;
}

@media (min-width: 768px) {
  .c-navbar__container {
    padding: 10px var(--gutter-tablet, var(--spacing-base));
  }
}

@media (min-width: 1024px) {
  .c-navbar__container {
    padding: 8px 48px;
  }
}

.c-navbar__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.c-navbar__logo .c-logo__image {
  height: 3.5rem;
  width: auto;
}

.c-navbar__menu {
  flex: 1;
  min-width: 0;
  display: none;
}

@media (min-width: 1024px) {
  .c-navbar__menu {
    display: block;
  }
}

.c-navbar__menu-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.c-navbar__menu-list a {
  color: var(--color-text-primary, #1a1a1a);
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  transition: color var(--duration-fast, 100ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.c-navbar__menu-list a:hover {
  color: var(--color-primary-500, #0073aa);
}

.c-navbar__menu-list a:focus {
  outline: 3px solid var(--color-primary-500, #0073aa);
  outline-offset: 2px;
}

.c-navbar__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.75rem);
}

.c-navbar__cta {
  display: none;
}

@media (min-width: 1024px) {
  .c-navbar__cta {
    display: inline-block;
  }
}

.c-navbar__cta.c-button--primary {
  background: var(--color-brand-action, #c9a85e);
  border-color: var(--color-brand-action, #c9a85e);
  color: var(--color-text-primary);
}

.c-navbar__cta.c-button--primary:hover {
  background: var(--color-brand-action-dark, #b89847);
  border-color: var(--color-brand-action-dark, #b89847);
}

/* Mobile menu toggle button */
.c-navbar__toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 101;
}

@media (min-width: 1024px) {
  .c-navbar__toggle {
    display: none !important;
  }
}

.c-navbar__toggle:focus {
  outline: 2px solid var(--color-primary-500, #0073aa);
  outline-offset: 2px;
  border-radius: 4px;
}

.c-navbar__toggle-icon {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--color-text-primary, #1a1a1a);
  border-radius: 2px;
  transition: all var(--duration-fast, 100ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.c-navbar__toggle-icon::before,
.c-navbar__toggle-icon::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: var(--color-text-primary, #1a1a1a);
  border-radius: 2px;
  transition: all var(--duration-fast, 100ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.c-navbar__toggle-icon::before {
  margin-bottom: 6px;
}

.c-navbar__toggle[aria-expanded="true"] .c-navbar__toggle-icon {
  background: transparent;
}

.c-navbar__toggle[aria-expanded="true"] .c-navbar__toggle-icon::before {
  transform: rotate(45deg) translateY(9px);
  margin-bottom: 0;
}

.c-navbar__toggle[aria-expanded="true"] .c-navbar__toggle-icon::after {
  transform: rotate(-45deg) translateY(-9px);
}

/* Mobile menu */
@media (max-width: 1023px) {
  .c-navbar__toggle {
    display: flex !important;
  }

  .c-navbar__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface-0, #ffffff);
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-top: 1px solid var(--color-border-light, #e5e5e5);
    transition: max-height var(--duration-normal, 200ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
  }

  .c-navbar__menu--open {
    max-height: 60vh;
    padding: var(--spacing-base, 1rem);
    overflow-y: auto;
  }

  .c-navbar__menu-list {
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
  }

  .c-navbar__menu-list a {
    display: block;
    padding: var(--spacing-sm, 0.75rem);
  }

  .c-navbar__actions {
    justify-content: flex-end;
  }

  .c-navbar__cta {
    display: inline-block;
  }
}

@media (max-width: 767px) {
  .c-navbar__container { flex-wrap: wrap; row-gap: 12px; }
  .c-navbar__toggle { margin-left: auto; }
  .c-navbar__actions { order: 1; flex-basis: 100%; justify-content: flex-start; }
}

/**
 * Graceful degradation for no JavaScript
 * Menu becomes visible on mobile if JavaScript is disabled
 */
@media (max-width: 1023px) {
  /* Show menu by default if JS is disabled */
  .no-js .c-navbar__menu {
    max-height: none;
    padding: var(--spacing-base, 1rem);
    overflow-y: visible;
  }

  /* Hide toggle button if no JS */
  .no-js .c-navbar__toggle {
    display: none;
  }
}


/* Keyboard users can bypass repeated navigation without changing the header layout. */
.c-skip-link { position: absolute; top: 0; left: 16px; transform: translateY(-200%); z-index: 100000; padding: 12px 20px; background: white; color: var(--color-brand-ink, #0e1b26); }
.c-skip-link:focus { position: fixed; top: 48px; transform: none; outline: 2px solid var(--color-brand-primary, #6290b3); }

/* Editable two-level navigation, enhanced with disclosure buttons rather than hover-only links. */
.c-navbar__menu-list > li { position:relative; }
.c-navbar__parent-row { display:flex; align-items:center; gap:6px; min-height:44px; font-size:14px; font-weight:400; color:var(--color-text-primary); }
.c-navbar__parent-link,.c-navbar__parent-label { display:flex; align-items:center; min-height:44px; }
.c-navbar__menu-list .c-navbar__parent-link { color:inherit; }
.c-navbar__parent-row:hover { color:var(--color-brand-primary); }
.c-navbar__parent-link:focus-visible { outline:3px solid var(--color-brand-primary); outline-offset:3px; }
.c-navbar__submenu-toggle { position:relative; display:flex; flex:none; align-items:center; justify-content:center; min-height:44px; font:inherit; color:inherit; background:transparent; border:0; padding:0; cursor:pointer; }
/* Use existing inter-item space for the pointer target without moving the icon. */
.c-navbar__submenu-toggle::after { content:''; position:absolute; inset:0 auto 0 0; width:100%; min-width:24px; }
.c-navbar__submenu-toggle:hover { color:var(--color-brand-primary); }
.c-navbar__submenu-toggle:focus-visible { outline:3px solid var(--color-brand-primary); outline-offset:3px; }
/* Centre the visible arrow independently of the text glyph's baseline. */
.c-navbar__chevron {
 font-size:14px;
 background-color:currentColor;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / 8px 5px no-repeat;
 transition:transform 100ms;
}
.c-navbar__submenu-toggle[aria-expanded=true] .c-navbar__chevron { transform:rotate(180deg); }
.c-navbar__menu-list .sub-menu { list-style:none; margin:0; padding:8px; min-width:220px; background:var(--color-surface-0,#fff); border:1px solid var(--color-brand-border); }
.c-navbar--enhanced .sub-menu[hidden] { display:none; }
.c-navbar__menu-list .sub-menu a { display:block; padding:10px 12px; line-height:1.5; white-space:normal; }
.c-navbar__menu-list .sub-menu a:hover { background:var(--color-brand-light); }
@media(min-width:1024px){
 .c-navbar__menu-list { align-items:center; }
 .c-navbar--enhanced .sub-menu { position:absolute; top:100%; left:0; z-index:102; box-shadow:0 6px 16px rgb(0 0 0 / .08); }
 .c-navbar__submenu-toggle { min-height:44px; }
}
@media(max-width:1023px){
 .c-navbar__parent-row { justify-content:space-between; }
 .c-navbar__parent-link,.c-navbar__parent-label { flex:1; min-width:0; padding:12px; }
 .c-navbar__submenu-toggle { flex-basis:44px; width:44px; align-self:stretch; justify-content:flex-end; padding:12px; }
 .c-navbar__menu-list .sub-menu { min-width:0; margin:0 12px 8px; border:0; border-left:1px solid var(--color-brand-border); }
}
@media(prefers-reduced-motion:reduce){
 .c-navbar__chevron,.c-navbar__menu { transition:none; }
}