/* -------------------------------------------------------------
   Salon – Stylist Menus styles
--------------------------------------------------------------*/

/* Container */
.salon-price-menu {
  max-width: 720px;
  margin: 0 auto;
}

/* List + items */
.salon-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.salon-menu-item {
  padding: 12px 0;
}

/* One-line: service ......... price  */
.salon-menu-line {
  display: flex;               /* more reliable than grid for dotted leaders */
  align-items: baseline;
  gap: 10px;
}

/* Service / Price text */
.salon-service { font-weight: 600; }
.salon-price   { font-weight: 600; }

/* Dotted leader between name and price */
.salon-dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted #ccc;
  height: 0.9em;               /* matches text height so it aligns nicely */
  transform: translateY(-0.2em); /* nudge up to sit on baseline */
}

/* Meta text (e.g., notes) */
.salon-meta,
.salon-note {
  font-size: 0.9em;
  opacity: .8;
}

/* Front-end editor notice */
.salon-menu-editor .salon-notice {
  background: #e7f7eb;
  border: 1px solid #bce5c5;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* -------------------------------------------------------------
   Instagram Button
   - Uses only the default .salon-ig-button class from your shortcode
   - No extra classes needed
--------------------------------------------------------------*/

.salon-ig-wrap {
  margin: 1rem 0 1.25rem;
}

/* Base Instagram-style pill button */
.salon-ig-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: 9999px;
  border: 1px solid transparent;

  /* Type */
  color: #fff;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;

  /* IG gradient */
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background-size: 140% 140%;

  /* Depth + motion */
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-position .4s ease;
}

/* Built-in icon via mask (inherits currentColor = white) */
.salon-ig-button::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='currentColor' d='M224 202.7A53.3 53.3 0 1 0 277.3 256 53.38 53.38 0 0 0 224 202.7zm124.7-41a54 54 0 0 0-30.6-30.6c-21.1-8.4-71.3-6.5-94.1-6.5s-73-.2-94.1 6.5a54 54 0 0 0-30.6 30.6c-8.4 21.1-6.5 71.3-6.5 94.1s-.2 73 6.5 94.1a54 54 0 0 0 30.6 30.6c21.1 8.4 71.3 6.5 94.1 6.5s73 .2 94.1-6.5a54 54 0 0 0 30.6-30.6c8.4-21.1 6.5-71.3 6.5-94.1s1.9-73-6.5-94.1zM224 338a82 82 0 1 1 82-82 82 82 0 0 1-82 82zm85.4-148.6a19.2 19.2 0 1 1 19.2-19.2 19.2 19.2 0 0 1-19.2 19.2zM400 80a80 80 0 0 1 80 80v192a80 80 0 0 1-80 80H80a80 80 0 0 1-80-80V160a80 80 0 0 1 80-80z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='currentColor' d='M224 202.7A53.3 53.3 0 1 0 277.3 256 53.38 53.38 0 0 0 224 202.7zm124.7-41a54 54 0 0 0-30.6-30.6c-21.1-8.4-71.3-6.5-94.1-6.5s-73-.2-94.1 6.5a54 54 0 0 0-30.6 30.6c-8.4 21.1-6.5 71.3-6.5 94.1s-.2 73 6.5 94.1a54 54 0 0 0 30.6 30.6c21.1 8.4 71.3 6.5 94.1 6.5s73 .2 94.1-6.5a54 54 0 0 0 30.6-30.6c8.4-21.1 6.5-71.3 6.5-94.1s1.9-73-6.5-94.1zM224 338a82 82 0 1 1 82-82 82 82 0 0 1-82 82zm85.4-148.6a19.2 19.2 0 1 1 19.2-19.2 19.2 19.2 0 0 1-19.2 19.2zM400 80a80 80 0 0 1 80 80v192a80 80 0 0 1-80 80H80a80 80 0 0 1-80-80V160a80 80 0 0 1 80-80z'/></svg>") no-repeat center / contain;
}

/* Hover / focus */
.salon-ig-button:hover,
.salon-ig-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  background-position: 20% 50%;
  outline: none;
}

/* Optional outline variant (keep if you might use it later) */
.salon-ig-button.is-outline {
  color: #111;
  background: transparent;
  border-color: #444;
}
.salon-ig-button.is-outline:hover,
.salon-ig-button.is-outline:focus-visible {
  color: #fff;
  background: #111;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .salon-ig-button {
    transition: none;
  }
  .salon-ig-button:hover,
  .salon-ig-button:focus-visible {
    transform: none;
    background-position: 50% 50%;
  }
}

/* -------------------------------------------------------------
   Small screen polish
--------------------------------------------------------------*/
@media (max-width: 420px) {
  .salon-menu-line { gap: 8px; }
  .salon-price     { white-space: nowrap; }
}

/* ==== Navbar logo sizing (WordPress-friendly) ==== */

/* Allow the logo to scale to a sensible height */
.custom-logo,
.custom-logo-link img,
.site-branding .logo img,
.header-logo img,
.navbar-brand img {
  height: 48px;
  max-height: 48px;
  width: auto;
}

/* Give the brand area enough room so the image isn't squeezed */
.site-header .site-branding,
.header .site-branding,
.navbar .navbar-brand,
.site-header .custom-logo-link {
  display: flex;
  align-items: center;
  min-height: 56px;
}

/* Avoid overly restrictive widths some themes add */
.site-header .custom-logo,
.site-header .custom-logo-link img,
.navbar-brand img {
  max-width: none;
}

/* Desktop: a touch larger */
@media (min-width: 1024px) {
  .custom-logo,
  .custom-logo-link img,
  .site-branding .logo img,
  .header-logo img,
  .navbar-brand img {
    height: 64px;
    max-height: 64px;
  }
  .site-header .site-branding,
  .navbar .navbar-brand {
    min-height: 72px;
  }
}

/* If your theme is stubborn, un-comment the !important line below:
.custom-logo,
.custom-logo-link img,
.navbar-brand img { max-height: 64px !important; }
*/