/* ==========================================================================
   VITALYS — NAVBAR
   Custom flex/grid layout (no Bootstrap Navbar / Offcanvas components).
   Sections: Variables, Base, Navbar, Desktop, Tablet, Mobile, Offcanvas,
   Animations, Utilities.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Color */
  --color-bg: #ffffff;
  --color-border: #eeeeee;
  --color-ink: #1a2024;
  --color-text: #24292e;
  --color-text-muted: #5b6570;
  --color-accent: #1858a2;      /* sampled directly from the Vitalys logo mark */
  --color-accent-tint: rgba(24, 88, 162, 0.07);
  --color-backdrop: rgba(15, 23, 29, 0.45);

  /* Typography */
  --font-nav: "Poppins", "Segoe UI", sans-serif;
  --font-logo: "Fraunces", "Georgia", serif;

  /* Layout */
  --navbar-height: 80px;
  --navbar-content-nudge: 8px; /* small downward offset off dead-center, logo + nav links */
  --offcanvas-width: min(320px, 86vw);
  --container-gutter: 1.5rem;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;

  /* Z-index scale */
  --z-navbar: 1000;
  /* Sits above the navbar (floats over all page content) but below the
     mobile offcanvas + its backdrop, so opening the mobile menu covers it
     like any other page chrome instead of leaving it floating on top. */
  --z-floating-contact: 1005;
  --z-backdrop: 1010;
  --z-offcanvas: 1020;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
/* Bootstrap's gutter utility classes (g-4, g-5, etc.) give a .row larger
   negative side margins than a plain .container's fixed padding
   compensates for — e.g. g-5 needs 24px but the container only offsets
   12px — so any row using a bigger gutter than the default legitimately
   extends a few pixels past the viewport on both sides. That sliver is
   empty spacing, not clipped content, so hiding horizontal overflow at
   the document root (rather than shrinking every gutter back to fit) is
   the standard, safe fix — nothing visible is cut off by it. Fixed-
   position elements (navbar, offcanvas panel) are unaffected since
   neither html nor body carries a transform/filter that would change
   their containing block. */
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding-top: var(--navbar-height);
  overflow-x: hidden;
  font-family: var(--font-nav);
  color: var(--color-text);
  background: var(--color-bg);
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 1rem;
  z-index: 1100;
  background: var(--color-ink);
  color: #fff;
  padding: 0.65rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out-quart);
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   3. NAVBAR (core, shared across breakpoints)
   ========================================================================== */
.site-navbar {
  position: fixed;
  inset-block-start: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-navbar);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow var(--duration-base) ease;
}

.site-navbar.is-scrolled {
  box-shadow: 0 8px 24px rgba(20, 30, 38, 0.08);
}

.navbar-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* Nav list (desktop) — pinned to the middle grid column explicitly, so
   hiding it (below 992px) can't cause auto-placement to reflow the
   hamburger button into its slot. Stays mathematically centered because
   the outer two columns share 1fr each. */
.nav-list {
  grid-column: 2;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  margin: 0;
  margin-top: var(--navbar-content-nudge);
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-family: var(--font-nav);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out-quart);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-accent);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

.nav-link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

.nav-link[aria-current="page"]::after {
  width: 100%;
}

.nav-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: 2px;
}

/* Logo */
.navbar-logo {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-self: start;
  margin-top: var(--navbar-content-nudge);
  text-decoration: none;
}

.navbar-logo img {
  display: block;
  height: 50px;
  width: auto;
}

.navbar-logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Hamburger trigger */
.hamburger-btn {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-self: end;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform var(--duration-base) var(--ease-out-quart),
    opacity var(--duration-fast) ease;
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   4. DESKTOP (>=992px)
   ========================================================================== */
@media (min-width: 992px) {
  .nav-list {
    display: flex;
  }

  .hamburger-btn {
    display: none;
  }
}

/* ==========================================================================
   5. TABLET (768px–991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-logo img {
    height: 50px;
  }

  .offcanvas-panel {
    width: min(360px, 50vw);
  }
}

/* ==========================================================================
   6. MOBILE (<768px)
   ========================================================================== */
@media (max-width: 767.98px) {
  /* .navbar-logo img {
    height: 30px;
  } */

  :root {
    --navbar-height: 72px;
  }
}

/* ==========================================================================
   7. OFFCANVAS MENU
   ========================================================================== */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease, visibility var(--duration-base) ease;
  z-index: var(--z-backdrop);
}

.offcanvas-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.offcanvas-backdrop[hidden] {
  display: block; /* keep transition-able; visibility/opacity handle hiding */
}

.offcanvas-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--offcanvas-width);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out-quart);
  z-index: var(--z-offcanvas);
  box-shadow: -12px 0 32px rgba(20, 30, 38, 0.12);
}

.offcanvas-panel.is-open {
  transform: translateX(0);
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  flex: 0 0 auto;
}

.offcanvas-logo {
  display: block;
  height: 28px;
  width: auto;
}

.offcanvas-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.offcanvas-close:hover,
.offcanvas-close:focus-visible {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.offcanvas-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.offcanvas-divider {
  height: 1px;
  background: var(--color-border);
  flex: 0 0 auto;
}

.offcanvas-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  flex: 1 1 auto;
}

.offcanvas-link {
  display: block;
  padding: 18px 1.5rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-nav);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.offcanvas-link:hover,
.offcanvas-link:focus-visible {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.offcanvas-link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
  background: var(--color-accent-tint);
}

.offcanvas-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

@media (min-width: 992px) {
  .offcanvas-panel,
  .offcanvas-backdrop {
    display: none;
  }
}

/* ==========================================================================
   8. ANIMATIONS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .site-navbar,
  .nav-link::after,
  .hamburger-line,
  .offcanvas-panel,
  .offcanvas-backdrop,
  .offcanvas-close,
  .offcanvas-link,
  .skip-link {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   9. UTILITIES
   ========================================================================== */
.no-scroll {
  overflow: hidden;
  height: 100%;
}