/* ==========================================================================
   SKIIN — HEADER (top notice, utility bar, navbar, flyouts, mobile drawer)
   Everything is namespaced .sk-* or scoped under .sk-header, so nothing in
   style.css (or WooCommerce/Storefront) can bleed into it.

   Breakpoints
     >= 1280px  Desktop: inline nav, hover dropdowns + side flyouts
     1700px+    Full-size desktop spacing (matches screenshots 1:1)
     1280-1699  Same desktop layout, progressively tighter spacing
     <= 1279px  Tablet/Mobile: right off-canvas drawer, drill-down panels
     <= 767px   Phone: utility links collapse behind a small hamburger
   ========================================================================== */

.sk-header{
  /* Tokens (colours sampled from the live screenshots) */
  --sk-font:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sk-dark:#231F20;          /* CTA button, menu toggle border          */
  --sk-heading:#111111;       /* nav + dropdown text                      */
  --sk-rose:#CE9B9B;          /* notice bar, hover / active text          */
  --sk-border:#DDDDDD;        /* hairlines                                */
  --sk-white:#FFFFFF;
  --sk-ease:cubic-bezier(.4,0,.2,1);
  --sk-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  position:sticky;                                   /* stays on top while scrolling (screenshots 7-13) */
  top:var(--wp-admin--admin-bar--height,0px);        /* sits under the WP admin bar when logged in   */
  z-index:1000;
  width:100%;
  background:var(--sk-white);
  font-family:var(--sk-font);
  color:var(--sk-heading);
  -webkit-font-smoothing:antialiased;
}
.sk-header *,.sk-header *::before,.sk-header *::after{box-sizing:border-box;}
/* :where() = zero specificity, so every component rule below overrides these resets without !important */
.sk-header :where(a){text-decoration:none;color:inherit;}
.sk-header :where(ul){list-style:none;margin:0;padding:0;}
.sk-header :where(button){font-family:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;}

.sk-container{width:86%;max-width:1650px;margin:0 auto;}   /* 86% = edge ratio measured from the desktop screenshots */

/* --------------------------------------------------------------------------
   1. TOP NOTICE
   -------------------------------------------------------------------------- */
.sk-notice{
  background:var(--sk-rose);
  color:var(--sk-white);
  text-align:center;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  padding:6px 16px;
}
.sk-notice a{text-decoration:underline!important;text-underline-offset:2px;font-weight:700;}

/* --------------------------------------------------------------------------
   2. UTILITY BAR
   -------------------------------------------------------------------------- */
.sk-utility__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:43px;
  border-bottom:1px solid #E6E6E6;      /* hairline spans the container only, not full width */
  position:relative;
}
.sk-utility__links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:400;}
.sk-utility__links a{transition:color .2s var(--sk-ease);}
.sk-utility__links a:hover{color:var(--sk-rose);}
.sk-utility__toggle{display:none;}

.sk-utility__phones{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:600;white-space:nowrap;}
.sk-utility__phones a:hover{color:var(--sk-rose);}
.sk-utility__icon{width:22px;height:22px;margin-right:2px;flex:none;}
.sk-utility__sep{margin:0 8px;font-weight:600;}

/* --------------------------------------------------------------------------
   3. NAVBAR
   -------------------------------------------------------------------------- */
.sk-navbar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;}
.sk-navbar__logo{flex:none;display:block;}
.sk-navbar__logo img{height:50px;width:auto;display:block;}

.sk-navbar__actions{display:flex;align-items:center;gap:12px;flex:none;}
.sk-btn-book{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sk-dark);color:var(--sk-white);
  font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:0;
  padding:14px 19px;border-radius:8px;line-height:1.2;white-space:nowrap;
  transition:background .2s var(--sk-ease);
}
.sk-btn-book:hover{background:#000;}
.sk-nav-toggle{display:none;}
.sk-drawer-head{display:none;}              /* Back/Close bars injected by JS - drawer only */

/* ---------- 3A. Desktop menu (>= 1280px) ---------- */
@media (min-width:1280px){

  .sk-nav__menu{display:flex;align-items:center;gap:30px;}
  .sk-nav__menu li{position:relative;}

  /* Top-level links */
  .sk-nav__menu > li > a{
    display:flex;align-items:center;gap:7px;
    padding:28px 0;                          /* tall hit-area = whole 80px row, so hover never drops */
    font-size:16px;font-weight:500;line-height:1.2;white-space:nowrap;
    color:var(--sk-heading);
    transition:color .2s var(--sk-ease);
  }
  .sk-nav__menu > li:hover > a,
  .sk-nav__menu > li:focus-within > a,
  .sk-nav__menu > li.current-menu-item > a,
  .sk-nav__menu > li.current-menu-ancestor > a,
  .sk-nav__menu > li.current-menu-parent > a{color:var(--sk-rose);}

  /* Down caret after parents — stays dark even when the label turns rose (as in screenshots) */
  .sk-nav__menu > li.menu-item-has-children > a::after{
    content:"";width:12px;height:8px;flex:none;
    background:var(--sk-heading);
    -webkit-mask:var(--sk-chevron) center/contain no-repeat;mask:var(--sk-chevron) center/contain no-repeat;
  }

  /* Dropdown panel (level 1) */
  .sk-nav__menu .sub-menu{
    position:absolute;top:calc(100% - 16px);left:0;z-index:20;
    min-width:290px;padding:18px 0;
    background:var(--sk-white);
    border-radius:16px;
    box-shadow:0 12px 40px rgba(17,17,17,.10),0 2px 6px rgba(17,17,17,.04);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .2s var(--sk-ease),transform .2s var(--sk-ease),visibility 0s linear .2s;
  }
  .sk-nav__menu li:hover > .sub-menu,
  .sk-nav__menu li:focus-within > .sub-menu,
  .sk-nav__menu li.is-open > .sub-menu{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .2s var(--sk-ease),transform .2s var(--sk-ease),visibility 0s;
  }

  /* Side flyout (level 2+) — opens to the right, top aligned with its parent row */
  .sk-nav__menu .sub-menu .sub-menu{top:-16px;left:100%;margin-left:0;}

  /* Dropdown items */
  .sk-nav__menu .sub-menu a{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:6px 20px;                        /* 31px row pitch, as measured */
    font-size:16px;font-weight:400;line-height:19px;
    color:var(--sk-heading);
    transition:color .2s var(--sk-ease);
  }
  .sk-nav__menu .sub-menu li:hover > a,
  .sk-nav__menu .sub-menu li:focus-within > a,
  .sk-nav__menu .sub-menu li.current-menu-item > a,
  .sk-nav__menu .sub-menu li.current-menu-ancestor > a{color:var(--sk-rose);}

  /* Right chevron on items that own a flyout (Dermal Therapies, Laser Treatments) */
  .sk-nav__menu .sub-menu li.menu-item-has-children > a::after{
    content:"";width:12px;height:8px;flex:none;transform:rotate(-90deg);
    background:var(--sk-heading);
    -webkit-mask:var(--sk-chevron) center/contain no-repeat;mask:var(--sk-chevron) center/contain no-repeat;
  }

  .sk-backdrop{display:none;}
}

/* ---------- 3B. Desktop 1440–1699px: same layout, slightly tighter ---------- */
@media (min-width:1440px) and (max-width:1699px){
  .sk-container{width:auto;margin:0 4%;}
  .sk-nav__menu{gap:clamp(18px,1.4vw,24px);}
  .sk-nav__menu > li > a{font-size:15px;gap:6px;}
  .sk-navbar__logo img{height:46px;}
  .sk-btn-book{font-size:14.5px;padding:13px 17px;}
}

/* ---------- 3C. Laptop squeeze (1280–1439px): same layout, tighter spacing ---------- */
@media (min-width:1280px) and (max-width:1439px){
  .sk-container{width:auto;margin:0 24px;}
  .sk-navbar__inner{gap:14px;}
  .sk-navbar__logo img{height:40px;}
  .sk-nav__menu{gap:clamp(12px,1.1vw,16px);}
  .sk-nav__menu > li > a{font-size:14px;gap:5px;}
  .sk-btn-book{font-size:13px;padding:12px 14px;}
  .sk-utility__phones{font-size:16px;}
}

/* --------------------------------------------------------------------------
   4. TABLET + MOBILE (<= 1279px) — right-side drawer with drill-down
   -------------------------------------------------------------------------- */
@media (max-width:1279px){

  .sk-container{width:auto;margin:0 24px;}
  .sk-header{box-shadow:0 2px 10px rgba(17,17,17,.06);}

  .sk-navbar__inner{min-height:68px;gap:12px;}
  .sk-navbar__logo img{height:44px;}

  /* Hamburger: 3 bars in a dark-bordered rounded square (screenshot 16) */
  .sk-nav-toggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:42px;height:42px;flex:none;
    border:1.5px solid var(--sk-dark);border-radius:9px;
  }
  .sk-nav-toggle span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--sk-dark);}

  /* Dimmed overlay behind the drawer */
  .sk-backdrop{
    position:fixed;inset:0;z-index:1;
    background:rgba(0,0,0,.6);
    opacity:0;visibility:hidden;
    transition:opacity .3s var(--sk-ease),visibility 0s linear .3s;
  }
  .sk-header.is-nav-open .sk-backdrop{opacity:1;visibility:visible;transition:opacity .3s var(--sk-ease),visibility 0s;}

  /* The drawer itself is #navMenu (root panel) */
  .sk-nav__menu{
    position:fixed;top:0;right:0;bottom:0;z-index:2;
    width:min(77vw,380px);
    padding:0 14px;
    background:var(--sk-white);
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform .32s var(--sk-ease),visibility 0s linear .32s;
  }
  .sk-header.is-nav-open .sk-nav__menu{transform:translateX(0);visibility:visible;transition:transform .32s var(--sk-ease),visibility 0s;}

  /* Every sub-menu (any depth) = a full panel that slides in over its parent */
  .sk-nav__menu li{position:static;}
  .sk-nav__menu .sub-menu{
    position:absolute;inset:0;z-index:3;
    padding:0 14px;
    background:var(--sk-white);
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform .3s var(--sk-ease),visibility 0s linear .3s;
  }
  .sk-nav__menu li.is-drilled > .sub-menu{transform:translateX(0);visibility:visible;transition:transform .3s var(--sk-ease),visibility 0s;}
  /* A panel that has a child panel open stops scrolling so the child sits flush at top:0 */
  .sk-nav__menu.is-locked,
  .sk-nav__menu .sub-menu.is-locked{overflow:hidden;}

  /* Back / Close bar (injected by JS into every panel) */
  .sk-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    min-height:40px;border-bottom:1px solid var(--sk-border);
  }
  .sk-drawer-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:400;color:var(--sk-heading);padding:8px 0;}
  .sk-drawer-back::before{
    content:"";width:12px;height:8px;transform:rotate(90deg);background:var(--sk-heading);
    -webkit-mask:var(--sk-chevron) center/contain no-repeat;mask:var(--sk-chevron) center/contain no-repeat;
  }
  .sk-nav__menu > .sk-drawer-head .sk-drawer-back{visibility:hidden;}   /* root panel: Close only */
  .sk-drawer-close{width:32px;height:32px;margin-right:-6px;position:relative;}
  .sk-drawer-close::before,.sk-drawer-close::after{
    content:"";position:absolute;top:50%;left:50%;width:18px;height:2.5px;border-radius:2px;background:#000;
  }
  .sk-drawer-close::before{transform:translate(-50%,-50%) rotate(45deg);}
  .sk-drawer-close::after{transform:translate(-50%,-50%) rotate(-45deg);}

  /* Rows: same look at every depth */
  .sk-nav__menu a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:37px;padding:9px 0;
    font-size:14px;font-weight:400;line-height:1.3;color:var(--sk-heading);
    border-bottom:1px solid var(--sk-border);
  }
  .sk-nav__menu a:hover,
  .sk-nav__menu li.current-menu-item > a{color:var(--sk-rose);}
  .sk-nav__menu li.menu-item-has-children > a::after{
    content:"";width:13px;height:9px;flex:none;transform:rotate(-90deg);background:var(--sk-heading);
    -webkit-mask:var(--sk-chevron) center/contain no-repeat;mask:var(--sk-chevron) center/contain no-repeat;
  }
}

/* ---------- 4A. Tablet (768–1279px): utility links stay inline ---------- */
@media (min-width:768px) and (max-width:1279px){
  .sk-utility__links{gap:20px;font-size:13.5px;}
  .sk-utility__phones{font-size:16px;}
  .sk-nav__menu{width:min(60vw,400px);}
}

/* ---------- 4B. Phone (<= 767px) ---------- */
@media (max-width:767px){
  .sk-container{margin:0 10px;}
  .sk-notice{font-size:11.5px;padding:5px 12px;}

  .sk-utility__inner{min-height:36px;border-bottom:0;}

  /* Thin 3-line icon on the left that reveals the utility links (screenshot 14) */
  .sk-utility__toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:22px;height:30px;flex:none;
  }
  .sk-utility__toggle span{display:block;width:20px;height:1.5px;background:var(--sk-heading);}

  .sk-utility__links{
    position:absolute;top:100%;left:0;z-index:30;
    flex-direction:column;align-items:stretch;gap:0;
    min-width:200px;padding:6px 0;
    background:var(--sk-white);border-radius:8px;
    box-shadow:0 8px 28px rgba(17,17,17,.14);
    font-size:13px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .2s var(--sk-ease),transform .2s var(--sk-ease),visibility 0s linear .2s;
  }
  .sk-utility__links.is-open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .2s var(--sk-ease),transform .2s var(--sk-ease),visibility 0s;}
  .sk-utility__links a{padding:6px 14px;}

  .sk-utility__phones{font-size:14px;font-weight:700;gap:4px;}
  .sk-utility__icon{width:16px;height:16px;}
  .sk-utility__sep{margin:0 6px;}

  .sk-navbar__inner{min-height:54px;gap:8px;}
  .sk-navbar__logo img{height:38px;}
  .sk-navbar__actions{gap:8px;}
  .sk-btn-book{font-size:11.5px;padding:10px 13px;border-radius:8px;}
  .sk-nav-toggle{width:36px;height:36px;border-radius:8px;}
  .sk-nav-toggle span{width:18px;height:2.5px;}

  .sk-nav__menu a{font-size:13px;}
}

/* Very small phones (<= 360px): keep logo + CTA + toggle on one row */
@media (max-width:360px){
  .sk-navbar__logo img{height:32px;}
  .sk-btn-book{font-size:10px;padding:9px 9px;}
  .sk-utility__phones{font-size:12.5px;}
}

/* Body scroll lock while the drawer is open */
body.sk-nav-open{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .sk-header *,.sk-header *::before,.sk-header *::after{transition-duration:.001ms!important;}
}