/* Highlight for new calculator link */
header .navbar-heading.calculator-link-new {
     position: relative;
     display: inline-block !important;
}

.new-badge {
     position: absolute;
     top: 0.1em;
     right: -1.8em;
     background-color: var(--accent-500);
     color: var(--brand-900);
     font-size: 0.5em;
     font-weight: var(--font-weight-bold);
     font-family: var(--font-heading);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border-radius: var(--radius-sm);
     padding: 2px 4px;
     line-height: 1;
     white-space: nowrap;
     pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
     .new-badge {
          animation: subtle-pulse 2.5s ease-in-out infinite;
     }
}

@keyframes subtle-pulse {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.85; transform: scale(0.95); }
}
/* ===================================================================
   NAVIGATION
   Header, navbar, burger menu, mobile navigation
   =================================================================== */

/* ===================================================================
   HEADER
   =================================================================== */

header {
     width: 100%;
     position: fixed;
     -webkit-backdrop-filter: var(--nav-blur);
     backdrop-filter: var(--nav-blur);
     transition: background-color var(--nav-transition);
     z-index: var(--z-header);
     background-color: var(--color-header-bg);
     box-shadow: var(--shadow-3);
}

header .navbar {
     align-items: center;
     background: transparent;
     border: none;
     display: flex;
     flex-direction: row;
     height: var(--nav-height-mobile);
     justify-content: space-evenly;
     margin: 0;
     min-height: var(--nav-height);
     position: relative;
}

@media screen and (min-width: 1024px) {
     header .navbar {
          min-height: var(--nav-height);
          height: auto;
     }
}

header .navbar-heading {
     background-color: var(--color-nav-black);
     color: var(--color-white);
     display: block;
     font-family: var(--font-heading);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-semibold);
     letter-spacing: var(--letter-spacing-normal);
     padding: var(--spacing-md) 0;
     position: relative;
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
     z-index: 20;
}

header .navbar-heading:hover {
     color: var(--color-nav-hover);
     text-decoration: none;
}

header .navbar-heading:focus-visible {
     color: var(--color-white);
     text-decoration: underline;
     text-underline-offset: 4px;
     outline: 2px solid var(--color-white);
     outline-offset: 4px;
     border-radius: var(--radius-sm);
}

/* Active/current page indicator */
header .navbar-heading[aria-current="page"],
header .navbar-heading.font-nav[aria-current="page"] {
     position: relative;
     font-weight: 700;
}

header .navbar-heading[aria-current="page"]::before,
header .navbar-heading.font-nav[aria-current="page"]::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60%;
     height: 3px;
     background-color: var(--color-white);
     border-radius: var(--radius-sm);
     z-index: 100;
}

@media screen and (min-width: 1024px) {
     header .navbar-heading {
          background-color: transparent;
          font-size: var(--font-size-lg);
          margin: 0;
          width: var(--nav-brand-width);
          z-index: var(--z-header);
     }
}

/* Font size override for nav links (not brand) */
header .navbar-heading.font-nav {
     font-size: var(--font-size-lg);
     text-decoration: none;
}

@media screen and (min-width: 1024px) {
     header .navbar-heading.font-nav {
          font-size: var(--font-size-md);
     }
}

/* ===================================================================
   BURGER MENU (Mobile)
   =================================================================== */

.burger-menu {
     align-items: center;
     background: transparent;
     border: none;
     cursor: pointer;
     display: none;
     flex-direction: column;
     gap: var(--spacing-xs);
     height: var(--burger-size);
     justify-content: center;
     left: var(--spacing-lg);
     padding: var(--spacing-md);
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: var(--burger-size);
     z-index: var(--z-burger-menu);
}

.burger-line {
     background-color: var(--color-white);
     border-radius: var(--radius-sm);
     display: block;
     height: var(--burger-line-height);
     transform-origin: center;
     transition: all var(--motion-fast) var(--motion-ease);
     width: var(--burger-line-width);
}

.burger-menu.active .burger-line:nth-child(1) {
     transform: translateY(var(--burger-line-offset)) rotate(45deg);
}

.burger-menu.active .burger-line:nth-child(2) {
     opacity: 0;
     transform: scaleX(0);
}

.burger-menu.active .burger-line:nth-child(3) {
     transform: translateY(var(--burger-line-offset-negative)) rotate(-45deg);
}

.burger-menu:hover .burger-line {
     background-color: var(--color-nav-hover);
}

.burger-menu:focus-visible {
     outline: 3px solid var(--color-white);
     outline-offset: var(--radius-sm);
     border-radius: var(--radius-sm);
}

/* ===================================================================
   NAV LINKS
   =================================================================== */

.nav-links {
     align-items: center;
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     width: 100%;
     /* Reset list styles for semantic <ul> */
     list-style: none;
     margin: 0;
     padding: 0;
}

.nav-links li {
     display: contents;
}

.navbar-brand-mobile {
     display: none !important;
}

@media (max-width: 1023px) {
     .burger-menu {
          display: flex;
     }
     
     .navbar-brand-mobile {
          color: var(--color-white);
          display: flex !important;
          font-family: var(--font-heading);
          font-size: var(--font-size-xl);
          font-weight: var(--font-weight-semibold);
          letter-spacing: var(--letter-spacing-wide);
          padding: var(--spacing-lg);
          text-align: center;
          text-decoration: none;
          text-transform: uppercase;
     }

     .navbar-brand-mobile:hover {
          color: var(--color-nav-hover);
          text-decoration: none;
     }

     .nav-links li:has(.navbar-heading:not(.font-nav)) {
          display: none;
     }
     
     .nav-links {
          align-items: center;
          background-color: var(--color-nav-overlay-bg);
          flex-direction: column;
          height: 100vh;
          justify-content: center;
          left: 0;
          opacity: 0;
          padding: var(--spacing-2xl) var(--spacing-xl);
          position: fixed;
          top: 0;
          transform: translateY(var(--anim-offset-negative));
          transition: all var(--motion-medium) var(--motion-ease);
          visibility: hidden;
          width: 100%;
          z-index: var(--z-nav-overlay);
     }
     
     .nav-links.active {
          opacity: 1;
          transform: translateY(0);
          visibility: visible;
     }
     
     .nav-links .navbar-heading {
          font-size: var(--font-size-sm);
          letter-spacing: var(--letter-spacing-normal);
          text-align: center;
          padding: var(--spacing-sm) var(--spacing-lg) 0;
          background-color: transparent;
     }
     
     /* Mobile current page indicator - bold text only, no extra underline */
     .nav-links .navbar-heading[aria-current="page"],
     .nav-links .navbar-heading.font-nav[aria-current="page"] {
          font-weight: var(--font-weight-bold);
          color: var(--accent-500);
     }
     
     .nav-links .navbar-heading[aria-current="page"]::before,
     .nav-links .navbar-heading.font-nav[aria-current="page"]::before {
          display: none;
     }
     
     .nav-links.active .navbar-heading {
          animation: slideInUp var(--motion-medium) var(--motion-ease) forwards;
          opacity: 0;
          transform: translateY(var(--anim-offset));
     }
     
     .nav-links.active li:nth-child(1) .navbar-heading { animation-delay: var(--anim-stagger-1); }
     .nav-links.active li:nth-child(2) .navbar-heading { animation-delay: var(--anim-stagger-2); }
     .nav-links.active li:nth-child(3) .navbar-heading { animation-delay: var(--anim-stagger-3); }
     .nav-links.active li:nth-child(4) .navbar-heading { animation-delay: var(--anim-stagger-4); }
     .nav-links.active li:nth-child(5) .navbar-heading { animation-delay: var(--anim-stagger-5); }
     .nav-links.active li:nth-child(6) .navbar-heading { animation-delay: var(--anim-stagger-6); }
     .nav-links.active li:nth-child(7) .navbar-heading { animation-delay: var(--anim-stagger-7); }
     
     .nav-links .navbar-heading:hover {
          color: var(--color-nav-hover);
          transform: translateY(var(--anim-offset)) scale(1.05);
     }
     
     .nav-links li:not(:last-child) .navbar-heading::after {
          background-color: var(--color-nav-separator);
          content: '';
          display: block;
          height: var(--border-hairline);
          margin-top: var(--spacing-sm);
          margin-bottom: 0;
          margin-inline: auto;
          width: var(--spacing-3xl);
     }
     
     /* Last item needs bottom padding since no ::after */
     .nav-links li:last-child .navbar-heading {
          padding-bottom: var(--spacing-sm);
     }
}

@media (min-width: 1024px) {
     .burger-menu {
          display: none;
     }
     
     .navbar-brand-mobile {
          display: none !important;
     }
     
     .nav-links {
          align-items: center;
          background-color: transparent;
          display: flex;
          flex-direction: row;
          gap: var(--nav-gap-desktop);
          height: auto;
          justify-content: center;
          opacity: 1;
          padding: 0 15vw;
          position: static;
          transform: none;
          visibility: visible;
          width: 100%;
     }
}

/* ===================================================================
   TAB LINKS (Sub-navigation)
   =================================================================== */

.tab-links {
     position: sticky;
     top: var(--nav-height);
     z-index: var(--z-tab-links);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 0 20vw;
     width: 100vw;
     -webkit-backdrop-filter: var(--nav-blur);
     backdrop-filter: var(--nav-blur);
     transition: background-color var(--nav-transition);
     background-color: var(--color-header-bg);
     box-shadow: var(--shadow-1);
     height: var(--nav-height);
}

.tab-links a {
     letter-spacing: var(--letter-spacing-wide);
     display: flex;
     font-size: var(--font-size-base);
     color: var(--color-white);
     text-transform: uppercase;
     text-align: center;
     text-decoration: none;
     font-family: var(--font-heading);
     font-weight: var(--font-weight-semibold);
     padding: var(--spacing-xl);
     justify-content: center;
     align-items: center;
     height: var(--nav-height);
}

.tab-links a:hover {
     color: var(--color-nav-hover);
}

.tab-links a:focus-visible {
     outline: 3px solid var(--color-white);
     outline-offset: -3px;
     box-shadow: 0 0 0 6px rgba(0, 105, 180, 0.5);
     border-radius: var(--radius-sm);
}

.tab-links a.active-tab:focus-visible {
     outline-color: var(--color-brand-blue);
}

.tab-links a.active-tab {
     color: var(--color-tab-active);
     background: var(--color-white);
}

@media (max-width: 1023px) {
     .tab-links {
          position: sticky;
          top: var(--nav-height-mobile);
          z-index: var(--z-tab-links);
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          padding: 0;
          -webkit-backdrop-filter: var(--nav-blur);
          backdrop-filter: var(--nav-blur);
          transition: background-color var(--nav-transition);
          background-color: var(--color-header-bg);
          box-shadow: var(--shadow-1);
          overflow-x: auto;
          overflow-y: hidden;
          width: 100%;
          scroll-snap-type: x mandatory;
          height: auto;
          min-height: var(--nav-height-mobile);
     }

     .tab-links a {
          letter-spacing: var(--letter-spacing-normal);
          display: flex !important;
          font-size: var(--font-size-sm);
          color: var(--color-white);
          text-transform: uppercase;
          text-align: center;
          text-decoration: none;
          font-family: var(--font-heading);
          font-weight: var(--font-weight-semibold);
          padding: var(--spacing-md) var(--spacing-lg);
          justify-content: center;
          align-items: center;
          white-space: nowrap;
          scroll-snap-align: center;
          scroll-snap-stop: always;
          height: var(--nav-height-mobile);
          flex-shrink: 0;
     }

     .tab-links a.active-tab {
          scroll-margin-inline: auto;
     }
}

/* ===================================================================
   FOOTER LINKS
   =================================================================== */

.footer-links {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: var(--spacing-4xl) 20vw;
     width: 100vw;
     -webkit-backdrop-filter: var(--nav-blur);
     backdrop-filter: var(--nav-blur);
     transition: background-color var(--nav-transition);
     background-color: var(--color-footer-bg);
}

.footer-links a {
     letter-spacing: var(--letter-spacing-wide);
     padding: var(--font-size-base);
     display: flex;
     font-size: var(--font-size-base);
     color: var(--color-white);
     text-transform: uppercase;
     text-align: center;
     text-decoration: none;
     font-family: var(--font-heading);
     font-weight: var(--font-weight-semibold);
}

.footer-links a:hover {
     color: var(--color-nav-hover);
}

@media (max-width: 1023px) {
     .footer-links {
          flex-direction: column;
          justify-content: center;
          gap: var(--spacing-md);
          padding: var(--spacing-xl);
          scroll-snap-align: end;
     }

     .footer-links a {
          font-size: var(--font-size-sm);
          margin: var(--spacing-sm);
     }
}