/*
  Finest Smile: responsive header overrides
  Loaded after style.css (see fs_header_styles() in functions.php).

  - Desktop (992px+): two-tier header. A slim top bar holds Denplan, socials,
    phone and Book online, so the main bar only has to fit the logo and menu.
  - Main menu never wraps: flex + nowrap, with font size, gaps and button
    padding that scale with the viewport.
  - Header height is held in variables, so the page offset and the home
    banner height stay in sync with it.
  - The top bar collapses once the page is scrolled (.header--sticky is
    added by script.js) to give content more room.
  - Below 992px the existing mobile header and slide-out menu are unchanged.
*/

:root {
  --hdr-top: 0rem;
  --hdr-main: 6.8rem;
}

/* ---------------------------------------------------------------------------
   Social icons (used in the top bar and in the mobile header)
--------------------------------------------------------------------------- */
.header__social {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header__social li {
  display: block;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.header__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity .2s ease-out;
}
.header__social a:hover,
.header__social a:focus-visible {
  opacity: .75;
}
.header__social img {
  display: block;
  max-width: none;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
}
.header__social i {
  font-size: 2.4rem;
}
.header__social--facebook i {
  color: #1877F2;
}
.header__social--instagram i {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* style.css gives every ul a bottom margin */
#mainHeader .header__social {
  margin: 0;
}

/* Mobile header: icons sit to the left of the Menu button */
.header__right {
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media (max-width: 374px) {
  .header__right .header__social {
    gap: 1.2rem;
  }
  .header__right .header__social img,
  .header__right .header__social i {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
  }
  .header__right {
    gap: 1.2rem;
  }
}

/* Top bar is desktop only */
.header__top {
  display: none;
}

/* Book online now lives in the top bar / bottom bar, never in the menu */
#headerNav > ul > li.menu-item--book {
  display: none;
}

/* ---------------------------------------------------------------------------
   Desktop
--------------------------------------------------------------------------- */
@media (min-width: 992px) {

  :root {
    --hdr-top: 3.6rem;
    --hdr-main: 6.4rem;
    /* scales from 992px to ~1900px */
    --nav-font: clamp(1.45rem, 0.45vw + 1rem, 1.9rem);
    --nav-gap: clamp(0.4rem, 1.2vw - 0.8rem, 1.6rem);
    --nav-btn-pad: clamp(1.2rem, 1.4vw - 0.2rem, 2.2rem);
    --hdr-pad-x: clamp(1rem, 1.6vw - 0.6rem, 3rem);
  }

  .main {
    padding-top: calc(var(--hdr-top) + var(--hdr-main));
  }

  /* -- Top bar ------------------------------------------------------------ */
  #mainHeader .header__top {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    height: var(--hdr-top);
    max-height: var(--hdr-top);
    overflow: hidden;
    background: var(--grey-dark);
    font-size: 1.4rem;
    letter-spacing: .1rem;
    line-height: 1;
    transition: max-height .3s cubic-bezier(.5, 0, .5, 1);
  }
  #mainHeader.header--sticky .header__top {
    max-height: 0;
  }
  #mainHeader .header__top .header__social {
    margin: 0 2.4rem 0 0;
    gap: 1.8rem;
  }
  #mainHeader .header__top .header__social img,
  #mainHeader .header__top .header__social i {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
  }
  #mainHeader .header__top-phone,
  #mainHeader .header__top-book {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 0 2rem;
    color: var(--white);
    font-weight: var(--bold);
    white-space: nowrap;
    transition: background .3s cubic-bezier(.5, 0, .5, 1);
  }
  #mainHeader .header__top-phone {
    background: var(--red);
  }
  #mainHeader .header__top-phone:hover,
  #mainHeader .header__top-phone:focus-visible {
    background: #640716;
  }
  #mainHeader .header__top-book {
    background: var(--gold-gradient);
  }
  #mainHeader .header__top-book:hover,
  #mainHeader .header__top-book:focus-visible {
    background: var(--gold);
  }
  #mainHeader .header__top a:focus-visible {
    outline: .2rem solid var(--white);
    outline-offset: -.4rem;
  }

  /* -- Main bar ----------------------------------------------------------- */
  #mainHeader {
    font-size: var(--nav-font);
  }
  #mainHeader .header__main {
    flex-wrap: nowrap;
    min-height: var(--hdr-main);
    padding-right: var(--hdr-pad-x);
  }
  #mainHeader .header__main > .cell-0 {
    min-width: 0;
  }
  /* Mobile-only bits */
  #mainHeader .header__right {
    display: none;
  }

  /* -- Menu --------------------------------------------------------------- */
  #headerNav > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;   /* was: flex-end */
    align-items: stretch;
    gap: var(--nav-gap);
  }
  #headerNav > ul > li {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
  }
  #headerNav > ul > li > a {
    height: var(--hdr-main);
    padding: 0 .4rem;
  }

  /* Implant Centre / Skin Clinic buttons: full bar height, chevron inline */
  #headerNav > ul > li.menu-item--red > a,
  #headerNav > ul > li.menu-item--blue > a {
    display: flex;
    align-items: center;
    height: var(--hdr-main);
    padding: 0 var(--nav-btn-pad);
    border-width: 0;
    line-height: 1;
  }

  /* Dropdowns: fixed, fluid width with wrapping text, so long treatment
     names don't push second and third level menus off the screen */
  #headerNav > ul > li ul {
    width: clamp(26rem, 20vw + 4rem, 36rem);
  }
  #headerNav > ul > li ul li {
    white-space: normal;
  }
  #headerNav > ul > li ul li a {
    min-width: 0;
    white-space: normal;
    line-height: 1.3;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
  #headerNav > ul > li ul li a::after {
    flex-shrink: 0;
  }

  /* Keep the last two dropdowns (Fees, Contact) inside the viewport */
  #headerNav > ul > li.menu-item-has-children:nth-last-child(3) > ul {
    left: auto;
    right: 0;
  }
}

/* Home banner height follows the real header height */
@media (min-width: 1280px) {
  .banner--home {
    height: calc(100vh - var(--hdr-top) - var(--hdr-main));
  }
}

@media (min-width: 1550px) {
  :root {
    --hdr-main: 6.8rem;
  }
}