/* < Header & Navbar */
/* Make the site header sticky across all breakpoints */
header {
  position: sticky;
  top: 0;
  z-index: 103;
  background: transparent;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border: 0;
  box-shadow: none;
  isolation: isolate;
  /* ensure pseudos sit below content */
}

header::before, header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--theme-transition-duration) var(--theme-transition-ease),
    background-color var(--theme-transition-duration) var(--theme-transition-ease);
}

/* Solid background matching theme */
#navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--color-bg);
  transition: background-color var(--theme-transition-duration) var(--theme-transition-ease);
}

#navbar {
  position: relative;
  top: 0;
  width: 100%;
  height: auto;
  min-height: var(--navbar-min-height);
  text-align: right;
  transition: min-height var(--theme-transition-duration) var(--theme-transition-ease), background-color var(--theme-transition-duration) var(--theme-transition-ease), border-color var(--theme-transition-duration) var(--theme-transition-ease);
  z-index: 1;
  isolation: isolate;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 4%;
}

#navbar .nav-link {
  color: var(--color-link);
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  transition: height var(--theme-transition-duration) var(--theme-transition-ease), line-height var(--theme-transition-duration) var(--theme-transition-ease);
}

#navbar .nav-link:hover {
  background: var(--color-hover-bg);
}

#navbar .nav-link.is-active {
  background: var(--color-hover-bg);
}

#logo_text {
  font-family: 'Abril Fatface', cursive;
  font-size: var(--logo-font-size);
  color: var(--color-foreground);
  letter-spacing: -0.02em;
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: left;
  z-index: 102;
  transition: font-size var(--theme-transition-duration) var(--theme-transition-ease), color var(--theme-transition-duration) var(--theme-transition-ease), letter-spacing var(--theme-transition-duration) var(--theme-transition-ease), transform var(--theme-transition-duration) var(--theme-transition-ease);
}

#logo_text:hover {
  text-decoration: none !important;
  color: var(--color-link);
}

.menu_primary {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 16px 0;
  z-index: 101;
  display: none;
  max-height: calc(100vh - 80px);
  overflow: auto;
}

.menu_primary .menu_container {
  display: flex;
  flex-direction: column-reverse;
}

.menu_primary .menu_container .menu_item {
  font-size: 120%;
  font-weight: 400;
  width: auto;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
}

.menu_primary .menu_container .menu_active a {
  color: var(--color-bg);
  background: var(--color-foreground);
}

.menu_primary .menu_container .menu_active a:hover {
  background: var(--color-link);
  color: var(--color-inverse-text);
}

.menu_primary .menu_container .menu_item .theme-switch {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: height var(--theme-transition-duration) var(--theme-transition-ease);
}

.menu_primary .menu_container .menu_item .theme-switch:hover {
  background: transparent;
}


  .menu_primary .menu_container{
    padding: 0 4%;
  }
  /* On mobile the theme item (toggle) should sit at the end of the column. On
     desktop (row layout) keep it centered to avoid vertical jumps when the
     navbar changes height on scroll (is-sticky). */

/* Toggle slider styling */
.theme-switch {
  position: relative;
}

.theme-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch .slider {
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--color-hover-bg);
  border: 0px solid var(--color-foreground);
  border-radius: 999px;
  position: relative;
  vertical-align: middle;
  transition: background-color var(--theme-transition-duration) var(--theme-transition-ease), border-color var(--theme-transition-duration) var(--theme-transition-ease);
}

.theme-switch:hover .slider {
  border-color: var(--color-foreground);
}

.theme-switch .slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-foreground);
  border-radius: 50%;
  transition: transform var(--theme-transition-duration) var(--theme-transition-ease), background-color var(--theme-transition-duration) var(--theme-transition-ease);
}

.theme-switch input:checked+.slider {
  background: var(--color-foreground);
  border-color: var(--color-link);
}

.theme-switch input:checked+.slider::before {
  transform: translateX(20px);
  background: var(--color-inverse-text);
}

/* Icon overlay using SVG masks for monochrome sun/moon */
.theme-switch .slider::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--color-inverse-text);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/></svg>") center/14px 14px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/></svg>") center/14px 14px no-repeat;
  transition: transform var(--theme-transition-duration) var(--theme-transition-ease), background-color var(--theme-transition-duration) var(--theme-transition-ease), opacity var(--theme-transition-duration) var(--theme-transition-ease);
}

.theme-switch input:checked+.slider::after {
  transform: translateX(20px);
  background-color: var(--color-foreground);
  opacity: 0;
  -webkit-mask: none;
  mask: none;
}

.menu_primary.show_menu {
  display: block;
}

/* Sticky, mini navbar on scroll */
#navbar.is-sticky {
  min-height: var(--navbar-sticky-min-height);
}

#navbar.is-sticky #logo_text {
  font-size: var(--logo-sticky-font-size);
}

#navbar.is-sticky .nav-link {
  height: 48px;
  line-height: 48px;
}

#navbar.is-sticky .menu_primary .menu_container .menu_item .theme-switch {
  height: 32px;
}

/* Full-screen overlay under mobile menu */
.menu_overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: none;
  z-index: 100;
}

.menu_overlay.show {
  display: block;
}

/* Lock page scroll when menu open */
html.no-scroll {
  overflow: hidden;
}

/* ----- NAV ICON ----- */
.nav_iconContainer:focus-visible {
  outline: 2px solid var(--color-foreground);
  outline-offset: 2px;
}

#navbar .nav-link:focus-visible {
  outline: 2px solid var(--color-foreground);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.nav_iconContainer {
  position: absolute;
  width: 48px;
  height: 40px;
  right: 16px;
  bottom: 4px;
  cursor: pointer;
  display: block;
  z-index: 102;
  /* reset native button look so it appears as an icon */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
}

#nav_icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin: 12px auto;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav_icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--color-foreground);
  border-radius: 2px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

#nav_icon span:nth-child(1) {
  top: 0px;
}

#nav_icon span:nth-child(2), #nav_icon span:nth-child(3) {
  top: 6px;
}

#nav_icon span:nth-child(4) {
  top: 12px;
}

#nav_icon.open span:nth-child(1) {
  top: 6px;
  width: 0%;
  left: 50%;
}

#nav_icon.open span:nth-child(2) {
  transform: rotate(45deg);
}

#nav_icon.open span:nth-child(3) {
  transform: rotate(-45deg);
}

#nav_icon.open span:nth-child(4) {
  top: 6px;
  width: 0%;
  left: 50%;
}

/* ----- fix 840+ (menu responsive adjustments) ----- */
@media only screen and (min-width: 840px) { /* Remaining layout adjustments kept here */
.is-sticky .menu_primary .menu_container .menu_item {
  font-size: 100%;
  font-weight: 400;
}

  #logo_text {
    font-size: 270%;
    position: static;
    width: auto;
    margin: 0;
  }

  #navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 80px;
  }

  #navbar .nav_iconContainer {
    display: none;
  }

  .menu_primary {
    display: block;
    position: relative;
    z-index: 104;
    width: auto;
    right: auto;
    bottom: auto;
    padding: 0;
    transform: none;
    overflow: visible;
  }

  .menu_primary .menu_container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-left: 8px;
  }

  .menu_primary .menu_container .menu_item {
    margin: 0 8px;
  }
}

/* Mobile-specific: keep theme toggle aligned to end of column on small viewports */
@media only screen and (max-width: 839px) {
  .menu_primary .menu_container .menu_item.theme-item {
    align-self: flex-end;
  }
}

/* Decorative image shown in the mobile menu when opened. Positioned at
   bottom-left of the viewport at 4% inset. Non-interactive (pointer-events:none)
   so it won't block menu interaction. */
@media only screen and (max-width: 839px) {
  .menu_primary.show_menu::after {
    content: "";
    position: fixed;
    left: 4%;
    bottom: 4%;
    display: block;
    width: 200px; /* reasonable default size */
    height: 120px; /* explicit height so the pseudo-element has box for background */
    background-image: url('/assets/menu-mobile.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    pointer-events: none;
    z-index: 1100; /* ensure above overlay/menu if needed */
  }
}

@media only screen and (max-width: 420px) {
  .menu_primary.show_menu::after {
    width: 84px;
    height: 56px;
  }
}