/* One owner for Canadian header sizing. Salient's navigation boundary is 1200px. */
body.urospot-responsive-header #header-outer #top .phone-number > a,
body.urospot-responsive-header #header-outer #top .urospot-clinic-call-trigger {
  white-space: nowrap; flex-shrink: 0; min-height: 44px;
}
body.urospot-responsive-header #header-outer #top .phone-number > a > .p-ico {
  flex: 0 0 18px; width: 18px; height: 18px; padding: 0; object-fit: contain;
}
body.urospot-responsive-header #header-outer #top .phone-number .menu-title-text { white-space: nowrap; }
body.urospot-force-header-quiz #header-outer #top a.quiz-button__link,
body.urospot-force-header-quiz #slide-out-widget-area a.quiz-button__link { display: inline-flex !important; }
@media (min-width: 1201px) {
  body.urospot-responsive-header #header-outer { --urospot-header-button-pad-y: 3px; }
  /* Keep menu items full height so Salient positions dropdowns below the header. */
  body.urospot-responsive-header #header-outer #top nav > ul.sf-menu { display: flex; align-items: stretch; gap: clamp(8px, 1vw, 20px); }
  body.urospot-responsive-header #header-outer #top nav > ul.sf-menu > li { flex: 0 0 auto; }
  body.urospot-responsive-header #header-outer #top nav > ul > li > a {
    white-space: nowrap; margin: 0 !important; font-size: clamp(14px, 1.05vw, 18px) !important;
  }
  body.urospot-responsive-header #header-outer #top nav > ul > li.header-btn > a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: var(--urospot-header-button-pad-y) clamp(12px, 1.25vw, 28px) !important; margin: 0 !important; line-height: 36px;
    transition: background-color .2s, color .2s, border-color .2s !important;
  }
  /* Match Salient's phone-link underline on the semantic modal button. */
  body.urospot-responsive-header #header-outer[data-lhe="animated_underline"] #top nav .urospot-clinic-call-trigger > span {
    position: relative; display: block;
  }
  body.urospot-responsive-header #header-outer[data-lhe="animated_underline"] #top nav .urospot-clinic-call-trigger > span::after {
    content: ""; position: absolute; display: block; left: 0; bottom: -3px; width: 100%;
    border-top: 2px solid var(--nectar-accent-color, #e49d77);
    transform: scaleX(0); transform-origin: 0 0;
    transition: transform .35s cubic-bezier(.52, .01, .16, 1);
  }
  body.urospot-responsive-header #header-outer[data-lhe="animated_underline"] #top nav .urospot-clinic-call-trigger:hover > span::after,
  body.urospot-responsive-header #header-outer[data-lhe="animated_underline"] #top nav .urospot-clinic-call-trigger:focus-visible > span::after {
    backface-visibility: hidden; transform: scaleX(1);
  }
  body.urospot-responsive-header #header-outer #top nav > ul > li.mobile-book-btn { display: none !important; }
}
/* Match the live desktop heights: 46, 48, 56, then 64px including borders. */
@media (min-width: 1300px) {
  body.urospot-responsive-header #header-outer { --urospot-header-button-pad-y: 4px; }
}
@media (min-width: 1450px) {
  body.urospot-responsive-header #header-outer { --urospot-header-button-pad-y: 8px; }
}
@media (min-width: 1620px) {
  body.urospot-responsive-header #header-outer { --urospot-header-button-pad-y: 12px; }
}
@media (max-width: 1200px) {
  body.urospot-responsive-header #header-outer { padding: 0 !important; height: auto !important; }
  body.urospot-responsive-header #header-outer #top .row::before,
  body.urospot-responsive-header #header-outer #top .row::after { display: none !important; }
  body.urospot-responsive-header #header-outer #top .container { width: 100%; max-width: none; padding: 0 18px !important; }
  body.urospot-responsive-header #header-outer #top .row {
    /* Salient switches this row to flex above 1000px; keep one layout owner. */
    display: grid !important; grid-template-columns: max-content minmax(0, 1fr) 44px;
    align-items: center; gap: 8px; padding: 12px 0 !important; min-height: 68px; box-sizing: border-box;
  }
  body.urospot-responsive-header #header-outer #top .row > .span_3 {
    grid-column: 1; grid-row: 1; width: auto !important; margin: 0 !important;
  }
  body.urospot-responsive-header #header-outer #top #logo { margin: 0 !important; }
  body.urospot-responsive-header #header-outer #top #logo img { height: 42px !important; width: auto !important; }
  body.urospot-responsive-header #header-outer #top .row > .span_9 { display: contents !important; }
  body.urospot-responsive-header #header-outer #top .row > .span_9 > nav { display: none !important; }
  body.urospot-responsive-header #header-outer #top .mobile-header {
    display: block !important; grid-column: 2; grid-row: 1; justify-self: stretch; width: auto !important;
    height: auto !important; margin: 0 !important; position: static !important; transform: none !important;
  }
  body.urospot-responsive-header #header-outer #top .mobile-header .inner,
  body.urospot-responsive-header #header-outer #top .mobile-header ul {
    display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px;
    width: auto !important; height: auto !important; position: static !important; margin: 0 !important; padding: 0 !important;
  }
  body.urospot-responsive-header #header-outer #top .mobile-header li {
    display: block !important; width: auto !important; float: none; margin: 0 !important; padding: 0 !important;
    flex: 0 0 auto; list-style: none;
  }
  body.urospot-responsive-header #header-outer #top .mobile-header .phone-number > a,
  body.urospot-responsive-header #header-outer #top .mobile-header .urospot-clinic-call-trigger {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; height: 44px !important;
    min-width: 44px; justify-content: center; padding: 0 !important; margin: 0 !important; font: 600 15px/1.5 'Nunito Sans', Arial, sans-serif;
  }
  body.urospot-responsive-header #header-outer #top .mobile-header .phone-number .menu-title-text,
  body.urospot-responsive-header #header-outer #top .mobile-header .urospot-clinic-call-trigger > span { display: none !important; }
  body.urospot-responsive-header #header-outer #top .mobile-header .header-btn > a,
  body.urospot-responsive-header #header-outer #top .mobile-header .urospot-mobile-quiz-button {
    display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
    height: 40px !important; min-height: 40px; padding: 0 12px !important; margin: 0 !important;
    font: 800 11px/1 'Nunito Sans', Arial, sans-serif !important; letter-spacing: .2px;
    border-radius: 8px !important; white-space: nowrap; text-transform: uppercase;
  }
  body.urospot-responsive-header #header-outer #top .mobile-header .urospot-mobile-quiz-button {
    color: #1b1b1b !important; background: #fff; border: 2px solid #fff;
  }
  body.urospot-responsive-header #header-outer #top .mobile-icon {
    display: flex !important; align-items: center; justify-content: center; grid-column: 3; grid-row: 1;
    width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important;
    position: static !important; transform: none !important;
  }
  body.urospot-responsive-header #header-outer #top .mobile-icon > div,
  body.urospot-responsive-header #header-outer #top .mobile-icon a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px !important; padding: 0 !important; }
  body.urospot-responsive-header #header-outer #top .mobile-header .urospot-clinic-call-trigger svg { width: 18px; height: 18px; }
  body.urospot-responsive-header #header-outer #top a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}
/* Compact spacing keeps all mobile controls in one row, including at 320px. */
@media (max-width: 600px) {
  body.urospot-responsive-header #header-outer #top .container { padding: 0 6px !important; }
  body.urospot-responsive-header #header-outer #top .row {
    grid-template-columns: max-content minmax(0, 1fr) 32px; gap: 4px;
  }
  body.urospot-responsive-header #header-outer #top #logo { width: clamp(52px, calc(100vw - 266px), 103px); }
  body.urospot-responsive-header #header-outer #top #logo img { width: 100% !important; height: auto !important; }
  body.urospot-responsive-header #header-outer #top .mobile-header .inner,
  body.urospot-responsive-header #header-outer #top .mobile-header ul { gap: 4px; }
  body.urospot-responsive-header #header-outer #top .mobile-header .phone-number > a,
  body.urospot-responsive-header #header-outer #top .mobile-header .urospot-clinic-call-trigger {
    min-width: 28px; width: 28px;
  }
  body.urospot-responsive-header #header-outer #top .mobile-header .header-btn > a,
  body.urospot-responsive-header #header-outer #top .mobile-header .urospot-mobile-quiz-button {
    font-size: clamp(9px, 1.8vw, 11px) !important;
    padding: 0 clamp(4px, 1.2vw, 8px) !important;
  }
  body.urospot-responsive-header #header-outer #top .mobile-icon,
  body.urospot-responsive-header #header-outer #top .mobile-icon > div,
  body.urospot-responsive-header #header-outer #top .mobile-icon a { width: 32px !important; }
}
body.urospot-responsive-header #slide-out-widget-area li.mobile-book-btn { display: none !important; }
/* Native details keeps no-JavaScript clinic choices out of the header row. */
body.urospot-responsive-header .urospot-clinic-call-fallback { position: relative; }
body.urospot-responsive-header #header-outer .urospot-clinic-call-fallback,
body.urospot-responsive-header #header-outer #top .mobile-header .urospot-clinic-call-item { position: static !important; }
body.urospot-responsive-header .urospot-clinic-call-fallback > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 28px; min-height: 44px; color: #dba07b; cursor: pointer; list-style: none;
}
body.urospot-responsive-header .urospot-clinic-call-fallback > summary::-webkit-details-marker { display: none; }
body.urospot-responsive-header .urospot-clinic-call-fallback svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
body.urospot-responsive-header #header-outer #top .urospot-clinic-call-fallback > .urospot-clinic-call-fallback-links,
body.urospot-responsive-header #slide-out-widget-area .urospot-clinic-call-fallback > .urospot-clinic-call-fallback-links {
  display: block !important; position: absolute !important; right: 0; top: 100%; z-index: 100;
  width: 300px !important; max-width: calc(100% - 12px); box-sizing: border-box;
  padding: 8px !important; margin: 0 !important; background: #000; border: 1px solid #555;
}
body.urospot-responsive-header #header-outer #top .urospot-clinic-call-fallback:not([open]) > .urospot-clinic-call-fallback-links,
body.urospot-responsive-header #slide-out-widget-area .urospot-clinic-call-fallback:not([open]) > .urospot-clinic-call-fallback-links { display: none !important; }
body.urospot-responsive-header .urospot-clinic-call-fallback-links a {
  display: block !important; padding: 8px !important; white-space: normal !important;
  overflow-wrap: anywhere; color: #fff; font: 600 14px/1.5 'Nunito Sans', Arial, sans-serif;
}

/* Native offcanvas anchors own typography, spacing, and hover styling. */
body.urospot-responsive-header #slide-out-widget-area .inner a.urospot-clinic-call-trigger {
  min-height: 0; background: none !important; border: 0;
  border-radius: 0 !important; box-shadow: none;
  -webkit-text-fill-color: currentColor;
}
body.urospot-responsive-header #slide-out-widget-area .inner .urospot-clinic-call-trigger svg { display: none !important; }
body.urospot-responsive-header #slide-out-widget-area .inner .urospot-clinic-call-trigger > span {
  background: none !important; -webkit-text-fill-color: currentColor !important;
}
body.urospot-responsive-header #slide-out-widget-area .inner .urospot-clinic-call-trigger:focus-visible {
  outline: 2px solid currentColor; outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.urospot-responsive-header #header-outer #top nav .urospot-clinic-call-trigger > span::after { transition: none; }
}