/* Newpark Dentistry -- header.css
   Loaded by functions.php. See style.css for the full section index. */

/* =============================================================
   7. HEADER -- DESKTOP
   Sets the header's height, spacing, and layout (logo on the
   left, menu and buttons on the right), and the default color of
   the menu text.
   ============================================================= */

.site-top-header-wrap,
.site-bottom-header-wrap {
  display: none !important;
}

@media (min-width: 1025px) {
  .site-header,
  #masthead {
    position: relative !important;
    z-index: 99990 !important;
  }

  .site-main-header-wrap,
  .site-main-header-wrap .site-header-row-container-inner {
    background: var(--np-page) !important;
  }

  .site-main-header-wrap {
    border-bottom: 1px solid rgba(23, 61, 52, 0.10) !important;
    box-shadow: none !important;
  }

  .site-main-header-wrap .site-header-row-container-inner {
    min-height: var(--np-header-height) !important;
  }

  .site-main-header-wrap .site-container,
  .site-main-header-wrap .site-header-row-container-inner > .site-container {
    width: 100% !important;
    max-width: var(--np-header-container) !important;
    margin-inline: auto !important;
    padding-inline: clamp(22px, 2.4vw, 40px) !important;
  }

  .site-header-main-section-center {
    display: none !important;
  }

  .site-main-header-inner-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: var(--np-header-height) !important;
    column-gap: clamp(18px, 1.8vw, 30px) !important;
  }

  .site-header-main-section-left,
  .site-header-main-section-right {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header-main-section-left {
    justify-content: flex-start !important;
    gap: clamp(18px, 1.6vw, 28px) !important;
  }

  .site-header-main-section-right {
    justify-content: flex-end !important;
    gap: clamp(11px, 1vw, 17px) !important;
    white-space: nowrap !important;
  }

  .site-branding,
  .site-branding-container,
  .site-branding a {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-branding img {
    width: auto;
    max-width: 100%;
    height: auto !important;
  }

  .main-navigation,
  .primary-menu-container {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .main-navigation .primary-menu-container > ul {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: max-content !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(14px, 1vw, 20px) !important;
    white-space: nowrap !important;
  }

  .main-navigation .primary-menu-container > ul > li {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .main-navigation .primary-menu-container > ul > li > a {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: var(--np-header-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #5d6e67 !important;
    border: 0 !important;
    font-size: clamp(14px, 0.7vw, 15px) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
  }

  .main-navigation .primary-menu-container > ul > li > a::before {
    content: none !important;
    display: none !important;
  }

  .main-navigation .primary-menu-container > ul > li > a:hover,
  .main-navigation .primary-menu-container > ul > li > a:focus-visible {
    color: var(--np-forest) !important;
  }

  .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
  .main-navigation .primary-menu-container > ul > li.current_page_item > a,
  .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a,
  .main-navigation .primary-menu-container > ul > li.current_page_ancestor > a {
    color: var(--np-forest-deep) !important;
    font-weight: 800 !important;
  }

  .site-header-main-section-right .header-html {
    order: 2 !important;
  }

  .site-header-main-section-right .header-button-wrap,
  .site-header-main-section-right .header-button-inner-wrap {
    order: 1 !important;
  }

  .site-header .header-html,
  .site-header .header-html-inner,
  .site-header .header-html p,
  .site-header .header-html span,
  .site-header .header-html a,
  .header-contact-stack,
  .header-contact-stack span,
  .header-contact-stack a {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--np-body) !important;
    font-size: clamp(13px, 0.65vw, 14px) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  .site-header .header-html,
  .site-header .header-html-inner,
  .header-contact-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-height: 48px !important;
  }

  #masthead .header-button,
  #masthead .header-button-inner-wrap .header-button,
  #masthead .header-button-inner-wrap a,
  #masthead .site-header-main-section-right .header-button,
  #masthead .site-header-main-section-right a.button,
  .site-header .header-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px clamp(17px, 1.2vw, 21px) !important;
    background: var(--np-forest) !important;
    color: var(--np-white) !important;
    border: 1px solid var(--np-forest) !important;
    border-radius: 3px !important;
    font-size: clamp(13px, 0.68vw, 14px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #masthead .header-button:hover,
  #masthead .header-button:focus-visible,
  #masthead .header-button-inner-wrap a:hover,
  #masthead .header-button-inner-wrap a:focus-visible {
    background: var(--np-forest-deep) !important;
    border-color: var(--np-forest-deep) !important;
  }
}

/* =============================================================
   7b. HEADER — DROP CONTACT INFO + BUTTON BEFORE IT GETS TIGHT
   Hides "Park City, Utah" + phone number, and the "Request an
   Appointment" button, between 1025–1300px so the nav gets that
   space back before the squeeze becomes visible. The button is
   safe to drop here since every page with a hero repeats this
   same CTA there. Above 1300px there's room for everything;
   below 1025px this is moot since mobile has its own layout.
   ============================================================= */

@media (min-width: 1025px) and (max-width: 1300px) {
  .site-header-main-section-right .header-html,
  .site-header-main-section-right .header-html-inner,
  .header-contact-stack {
    display: none !important;
  }

  .site-header-main-section-right .header-button-wrap,
  .site-header-main-section-right .header-button-inner-wrap {
    display: none !important;
  }
}

/* =============================================================
   8. HEADER AT THE TOP OF THE PAGE
   At the very top of the page, before scrolling, the header has
   no background of its own and sits directly on top of the hero
   photo. The logo displays in its real colors with no changes;
   the menu, contact info, and button switch to white/light colors
   so they stay readable against the photo underneath (see
   hero.css for how the photo itself is darkened for this purpose).
   ============================================================= */

@media (min-width: 1025px) {
  .transparent-header #masthead,
  .transparent-header .site-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    z-index: 99990 !important;
  }

    .transparent-header .kadence-sticky-header.item-at-start,
  .transparent-header .kadence-sticky-header.item-at-start .site-main-header-wrap,
  .transparent-header .kadence-sticky-header.item-at-start .site-header-row-container-inner {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .transparent-header .kadence-sticky-header.item-at-start .site-main-header-wrap {
    border-bottom: 2px solid rgba(255, 255, 255, 0.35) !important;
 
  }

  .transparent-header .kadence-sticky-header.item-at-start
  .main-navigation .primary-menu-container > ul > li > a {
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: 0 1px 2px rgba(10, 28, 23, 0.35) !important;
  }

  /* Hover: a light sage tint from the site palette. */
  .transparent-header .kadence-sticky-header.item-at-start
  .main-navigation .primary-menu-container > ul > li > a:hover,
  .transparent-header .kadence-sticky-header.item-at-start
  .main-navigation .primary-menu-container > ul > li > a:focus-visible {
    color: var(--np-eucalyptus) !important;
  }

  /* Current page: a deeper sage tint, so it reads differently from hover. */
  .transparent-header .kadence-sticky-header.item-at-start
  .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
  .transparent-header .kadence-sticky-header.item-at-start
  .main-navigation .primary-menu-container > ul > li.current_page_item > a,
  .transparent-header .kadence-sticky-header.item-at-start
  .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a,
  .transparent-header .kadence-sticky-header.item-at-start
  .main-navigation .primary-menu-container > ul > li.current_page_ancestor > a {
    color: var(--np-eucalyptus-strong) !important;
    font-weight: 800 !important;

  }

  .transparent-header .kadence-sticky-header.item-at-start
  :is(.site-header .header-html,
      .site-header .header-html-inner,
      .site-header .header-html p,
      .site-header .header-html span,
      .site-header .header-html a,
      .header-contact-stack,
      .header-contact-stack span,
      .header-contact-stack a) {
    color: var(--np-white) !important;
    text-shadow: 0 1px 2px rgba(10, 28, 23, 0.35) !important;
  }

  .transparent-header .kadence-sticky-header.item-at-start
  :is(.header-button,
      .header-button-inner-wrap a,
      .site-header-main-section-right a.button) {
    background: var(--np-white) !important;
    color: var(--np-forest-deep) !important;
    border-color: var(--np-white) !important;
  }

  .transparent-header .kadence-sticky-header.item-at-start
  :is(.header-button,
      .header-button-inner-wrap a,
      .site-header-main-section-right a.button):hover,
  .transparent-header .kadence-sticky-header.item-at-start
  :is(.header-button,
      .header-button-inner-wrap a,
      .site-header-main-section-right a.button):focus-visible {
    background: var(--np-eucalyptus) !important;
    color: var(--np-forest-deep) !important;
    border-color: var(--np-eucalyptus) !important;
  }
}


/* =============================================================
   9. HEADER AFTER SCROLLING
   Once the visitor scrolls past the hero photo, the header
   becomes solid with a light background and a small shadow, and
   the menu text switches back to its normal dark color and the
   logo displays with no filter.
   ============================================================= */

@media (min-width: 1025px) {
  .kadence-sticky-header.item-is-fixed:not(.item-at-start),
  .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-main-header-wrap,
  .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner {
    background: rgba(250, 250, 250, 0.99) !important;
  }

  .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
    box-shadow: 0 8px 22px rgba(23, 61, 52, 0.07) !important;
  }

  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .site-header-row-container-inner,
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .site-main-header-inner-wrap {
    min-height: var(--np-sticky-height) !important;
  }
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .main-navigation .primary-menu-container > ul > li > a {
    min-height: var(--np-sticky-height) !important;
    color: #5d6e67 !important;
    text-shadow: none !important;
  }

  /* Hover: your main brand green. */
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .main-navigation .primary-menu-container > ul > li > a:hover,
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .main-navigation .primary-menu-container > ul > li > a:focus-visible {
    color: var(--np-forest) !important;
  }

  /* Current page: the deeper green, so it reads differently from hover. */
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .main-navigation .primary-menu-container > ul > li.current_page_item > a,
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a,
  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .main-navigation .primary-menu-container > ul > li.current_page_ancestor > a {
    color: var(--np-forest-deep) !important;
    font-weight: 800 !important;

  }

  .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding img {
    filter: none !important;
  }
}


/* =============================================================
   10. SERVICES DROPDOWN MENU
   The full-width dropdown panel that appears when hovering over
   "Services" in the main menu, showing each service category and
   its sub-items in columns.
   ============================================================= */

@media (min-width: 1025px) {
  .site-header,
  .site-header-wrap,
  .site-header-row-container,
  .site-header-row-container-inner,
  .site-main-header-wrap,
  .site-main-header-inner-wrap,
  .site-header-section,
  .main-navigation,
  .primary-menu-container,
  .primary-menu-container > ul {
    overflow: visible !important;
  }

  .services-mega-menu {
    position: static !important;
  }

  .services-mega-menu > .sub-menu {
    position: fixed !important;
    top: var(--np-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(28px, 2.4vw, 38px) var(--np-gutter)
             clamp(30px, 2.6vw, 42px) !important;
    background: rgba(250, 250, 250, 0.995) !important;
    border: 0 !important;
    border-top: 1px solid rgba(23, 61, 52, 0.10) !important;
    border-radius: 0 !important;
    box-shadow: 0 15px 32px rgba(23, 61, 52, 0.09) !important;
    column-gap: clamp(16px, 2vw, 32px) !important;
    z-index: 100000 !important;
  }

  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  .services-mega-menu > .sub-menu {
    top: var(--np-sticky-height) !important;
  }

  .services-mega-menu > .sub-menu > li.mega-service-category {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(16px, 1.4vw, 26px) !important;
    background: transparent !important;
    border: 0 !important;
  }

  .services-mega-menu > .sub-menu
  > li.mega-service-category:not(:first-child) {
    border-left: 1px solid var(--np-line) !important;
  }

  .services-mega-menu > .sub-menu
  > li.mega-service-category > a {
    display: block !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--np-heading) !important;
    font-size: clamp(15px, 0.85vw, 17px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }

  .services-mega-menu > .sub-menu
  > li.mega-service-category > a .dropdown-nav-toggle {
    display: none !important;
  }

  .services-mega-menu > .sub-menu
  > li.mega-service-category > ul.sub-menu,
  .services-mega-menu > .sub-menu
  > li.mega-service-category:hover > ul.sub-menu {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .services-mega-menu .mega-service-category > ul.sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 6px 8px !important;
    background: transparent !important;
    color: var(--np-body) !important;
    border: 0 !important;
    border-radius: 2px !important;
    font-size: clamp(14px, 0.78vw, 15px) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  .services-mega-menu .mega-service-category > ul.sub-menu > li > a:hover,
  .services-mega-menu .mega-service-category > ul.sub-menu > li > a:focus-visible {
    background: var(--np-eucalyptus) !important;
    color: var(--np-forest-deep) !important;
  }

  .services-mega-menu [class*="dropdown-nav"] {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    margin-left: 5px !important;
    padding: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
  }

  .services-mega-menu [class*="dropdown-nav"] svg {
    position: relative !important;
    top: -1px !important;
    width: 11px !important;
    height: 11px !important;
  }

  .services-mega-menu:hover [class*="dropdown-nav"] svg {
    transform: rotate(180deg) !important;
  }
}


/* =============================================================
   11. HEADER -- MOBILE
   The header layout used on tablets and phones: a simplified bar
   with the logo and a menu toggle button, and the slide-out menu
   panel it opens.
   ============================================================= */

@media (max-width: 1024px) {
  .site-main-header-wrap .site-header-row-container-inner {
    min-height: 74px !important;
  }

  .site-main-header-wrap .site-container,
  .site-header-row-container-inner > .site-container {
    padding-inline: 18px !important;
  }

  .site-branding img {
    height: auto !important;
  }

  .mobile-toggle-open-container button {
    min-width: 48px !important;
    min-height: 48px !important;
    background: transparent !important;
    color: var(--np-forest-deep) !important;
    border: 0 !important;
    transform: none !important;
    transition: color 280ms ease !important;
  }

  .transparent-header.mobile-transparent-header
    .kadence-sticky-header.item-at-start
    .mobile-toggle-open-container button {
    color: var(--np-white) !important;
  }

  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
    .mobile-toggle-open-container button {
    color: var(--np-forest-deep) !important;
  }

  .popup-drawer .drawer-inner {
  background: var(--np-forest-deep) !important;
}

.mobile-navigation a {
  min-height: 48px !important;
  color: var(--np-on-dark) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.mobile-navigation a:hover,
.mobile-navigation a:focus-visible {
  color: var(--np-eucalyptus) !important;
}

.mobile-navigation .current-menu-item > a,
.mobile-navigation .current_page_item > a,
.mobile-navigation .current-menu-ancestor > a {
  color: var(--np-eucalyptus-strong) !important;
  font-weight: 800 !important;
}


/* =============================================================
   12. MOBILE HEADER -- PHONE BUTTON
   Kadence's "Header Mobile Button" element only accepts a URL,
   label and style/size -- there's no built-in icon option -- so
   this turns it into a plain phone icon by targeting the tel:
   link directly rather than a guessable Kadence class name. The
   label text stays in the markup (for screen readers / SEO) but
   is visually hidden. Color switches with the same two header
   states as everything else above: white while the transparent
   header is showing, dark once the header goes solid/sticky.

   Scoped with .site-header rather than the #masthead ID it used
   to have -- an ID always outranks any number of classes in CSS
   specificity, which meant the "white on transparent header"
   override two rules below (class-only) could never win, and the
   icon was permanently stuck dark regardless of state.
   ============================================================= */

@media (max-width: 1024px) {
  .site-header a[href^="tel:"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--np-heading) !important;
    transition: color 280ms ease !important;
  }

  .site-header a[href^="tel:"]::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    text-indent: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")
      no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")
      no-repeat center / contain;
  }

  .transparent-header.mobile-transparent-header
    .kadence-sticky-header.item-at-start
    a[href^="tel:"] {
    color: var(--np-white) !important;
  }

  .kadence-sticky-header.item-is-fixed:not(.item-at-start)
    a[href^="tel:"] {
    color: var(--np-heading) !important;
  }
}