/* ==========================================================================
   GO VETTY - HEADER STYLES
   ========================================================================== */

/* --- Core Header Structure & Cloud Fade Engine --- */
:not(.home) header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 9999;
  background-color: #ffffff;

  /* Cloudy soft edge engine */
  /*-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);*/

  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  height: auto;
  align-items: flex-start;
  gap: clamp(6.25px, 0.521vw, 10px);
  padding: clamp(18.75px, 1.562vw, 30px) clamp(43.75px, 3.646vw, 70px) clamp(10.5px, 1.125vw, 60px);
  box-sizing: border-box;
}

/* Hidden system checkbox for mobile navigation toggle */
.menu-toggle {
  display: none !important;
}

/* Header Container Layout */
header .frame-63 {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

/* Logo & Branding Area */
header .group-wrapper {
  position: relative;
  width: clamp(183.12px, 15.26vw, 293px);
  height: auto;
  cursor: pointer;
  text-decoration: none;
}

header .group-4 {
  position: relative;
  top: -7px; /* fine-tuning offset, kept fixed — negligible at any scale */
  width: auto;
  height: auto;
  display: flex;
  gap: 3.9px; /* sub-pixel logo kerning, kept fixed */
}

header .group-5 {
  margin-top: -0.9px; /* fine-tuning offset, kept fixed */
  width: clamp(215px, 5.534vw, 106.26px);
  height: clamp(91px, 4.881vw, 93.72px);
  margin-left: -1.1px; /* fine-tuning offset, kept fixed */
}

/* Actions & Navigation Wrappers */
header .frame-64-parent {
  display: flex;
  align-items: center;
  order: 2;
}

header .frame-64 {
  display: inline-flex;
  align-items: center;
  gap: clamp(52.5px, 4.375vw, 84px);
  position: relative;
  flex: 0 0 auto;
  order: 3;
}

header .frame-65 {
  display: inline-flex;
  align-items: center;
  gap: clamp(26.25px, 2.188vw, 42px);
  position: relative;
  flex: 0 0 auto;
  padding-right: clamp(12.5px, 1.042vw, 20px);
}

/* Action Buttons (Log In & Talk to a Vet) */
header .frame-66 {
  display: flex;
  width: clamp(62.5px, 5.208vw, 100px);
  height: clamp(37.5px, 3.125vw, 60px);
  align-items: center;
  justify-content: center;
  gap: clamp(6.25px, 0.521vw, 10px);
  padding: clamp(6.25px, 0.521vw, 10px);
  position: relative;
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid;
  border-color: var(--x-1);
  cursor: pointer;
  text-decoration: none;
}

header .frame-67 {
  display: flex;
  width: auto;
  height: clamp(37.5px, 3.125vw, 60px);
  background-color: var(--x-1);
  align-items: center;
  justify-content: center;
  gap: clamp(6.25px, 0.521vw, 10px);
  padding: clamp(6.25px, 0.521vw, 10px) clamp(9.38px, 0.781vw, 15px);
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}

header .frame-8 {
  display: inline-flex;
  align-items: center;
  gap: clamp(6.25px, 0.521vw, 10px);
  position: relative;
  flex: 0 0 auto;
}

header .text-wrapper-25 {
  position: relative;
  width: fit-content;
  font-family: "Inter", Helvetica;
  font-weight: 600;
  color: var(--x-1);
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.25px;
  line-height: clamp(18.75px, 1.562vw, 30px);
  white-space: nowrap;
  margin: 0;
}

header .text-wrapper-18 {
  position: relative;
  width: fit-content;
  font-family: "Inter", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.25px;
  line-height: clamp(18.75px, 1.562vw, 30px);
  white-space: nowrap;
  margin: 0;
}

header .text-wrapper-31 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inter", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: clamp(12.5px, 1.042vw, 20px);
  letter-spacing: -0.25px;
  line-height: clamp(18.75px, 1.562vw, 30px);
  white-space: nowrap;
  cursor: pointer;
}

/* ==========================================================================
   NOTE ON THE OLD "MID-SIZE DESKTOPS & LAPTOPS (1200px - 1599px)" BLOCK
   ==========================================================================
   Removed. It re-padded the header and re-sized .frame-64/.frame-65 gaps and
   nav-link type between 1200-1599px with !important overrides — all of that
   now happens continuously via the clamp() values in the base rules above,
   so the step-based override is redundant (and would otherwise fight with
   the new fluid values right at its own boundaries).
   ========================================================================== */

/* ==========================================================================
   MOBILE OPTIMIZATION ENGINE (767px and below) — unchanged, out of scope
   ========================================================================== */

@media (max-width: 767px) {
  header,
  header.frame-62 {
    position: relative !important;
    padding: 15px 16px !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    margin: 0 !important;
  }

  header .frame-63 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    position: relative !important;
    width: 100% !important;
  }

  header .group-wrapper {
    width: 140px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  header .group-4 {
    top: 0 !important;
    height: 100% !important;
    align-items: center !important;
  }

  header .group-5 {
    width: 135px !important;
    height: auto !important;
    margin: 0 !important;
  }

  header .canda {
    width: 65px !important;
    height: auto !important;
    margin: 0 !important;
  }

  header .frame-64-parent {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
  }

  header .frame-64 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
  }

  header .frame-8.mobile-actions {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    gap: 8px !important;
  }

  header .frame-66,
  header .frame-67 {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    flex: unset !important;
  }

  header .btn-text {
    display: none !important;
  }

  .mobile-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    fill: #600209 !important;
  }

  /* Navigation dropdown is hidden by default on mobile */
  header .frame-65 {
    display: none !important;
  }

  /* Hamburger Trigger Styling */
  .hamburger-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    cursor: pointer;
    z-index: 1001;
  }

  .hamburger-icon {
    width: 26px;
    height: 26px;
    color: #333333;
    transition: transform 0.25s ease-in-out;
  }

  .hamburger-icon .menu-close {
    display: none;
  }

  .hamburger-icon .menu-bars {
    display: block;
  }

  /* Dynamic Checked Toggles */
  .menu-toggle:checked ~ .frame-64-parent .hamburger-icon {
    transform: rotate(90deg);
  }

  .menu-toggle:checked ~ .frame-64-parent .hamburger-icon .menu-bars {
    display: none !important;
  }

  .menu-toggle:checked ~ .frame-64-parent .hamburger-icon .menu-close {
    display: block !important;
    fill: #600209 !important;
  }

  /* Show Dropdown Menu when Checked */
  .menu-toggle:checked ~ .frame-64-parent .frame-65 {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: #ffffff !important;
    z-index: 99999 !important;
    padding: 20px 24px !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }

  header .frame-65 a {
    display: block !important;
    width: 100%;
    text-align: left;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #000000 !important;
    padding: 8px 0;
    font-weight: 500;
    text-decoration: none;
  }
}

@media (min-width: 768px) {
  .mobile-icon,
  .hamburger-label {
    display: none !important;
  }

  header .btn-text {
    display: inline !important;
  }
}