/* Salon Suite v1.3.2 */
:root { --salon-maxw: 1200px; --salon-radius: 16px; --salon-card-shadow: 0 2px 12px rgba(0,0,0,.04); }
.salon-section-title { font-size: clamp(1.6rem, 2.2vw, 2.4rem); margin: 0 0 16px; }

/* Team Grid */
.salon-team-wrap { max-width: var(--salon-maxw); margin: 0 auto; padding: 24px; }
.salon-team-grid { display:grid; gap:24px; }
.salon-team-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.salon-team-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.salon-team-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .salon-team-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .salon-team-grid{ grid-template-columns: 1fr; } }

.salon-card { 
  position: relative; 
  border-radius: var(--salon-radius); 
  overflow: hidden;
  text-align: center; 
}
.salon-card-photo { 
  width: 100%; 
  height: auto; 
  border-radius: 0; 
  aspect-ratio: 1/1; 
  object-fit: cover; 
  object-position: center top;
  display: block;
}
.salon-card-title { 
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 12px;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 2;
}
.salon-card-role { 
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 12px;
  color: #fff;
  opacity: 0.95;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  z-index: 2;
}
.salon-card-link { 
  text-decoration: none; 
  color: inherit; 
  display: block; 
  position: relative;
}
.salon-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Bio */
.salon-bio-wrap { display:grid; grid-template-columns: 320px 1fr; gap:24px; align-items:start; max-width:var(--salon-maxw); margin:0 auto; padding:24px; }
@media (max-width:900px){ .salon-bio-wrap{ grid-template-columns: 1fr; } }
.salon-bio-photo { width:100%; height:auto; border-radius:16px; }
.salon-bio-name { margin:0 0 4px; font-size:2rem; }
.salon-bio-role { margin-bottom:12px; opacity:.8; }
.salon-bio-header-row { display: flex; align-items: center; justify-content: flex-start; gap: 50px; margin-bottom: 12px; flex-wrap: wrap; }
.salon-bio-text { margin: 8px 0 16px; line-height:1.6; }
.salon-bio-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.salon-btn { display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid currentColor; text-decoration:none; }
.salon-btn.outline { background:transparent; }
.salon-btn.ghost { border-color:#ddd; color:#333; }

/* Instagram Button */
.salon-ig-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background-size: 140% 140%;
  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;
}
.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;
}
.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;
}
@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%; }
}
.salon-price-table { margin-top:8px; }
.salon-price-table table { width:100%; border-collapse:collapse; }
.salon-price-table td { padding:8px 0; border-bottom:1px solid #f0f0f0; }
.salon-price-table td.svc { font-weight:500; }
.salon-price-table td.price { text-align:right; }

/* HERO */
.salon-hero { 
  position: relative; 
  display: grid; 
  place-items: center; 
  text-align: center; 
  background-repeat:no-repeat; 
  background-size:cover; 
  background-position:center; 
  overflow:hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.salon-hero-image-wrapper { 
  position: relative; 
  z-index: 2; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  margin-bottom: 24px;
}
.salon-hero-image { 
  width: 100%; 
  height: auto; 
  display: block;
  max-width: 100%;
}
.salon-hero-image.shape-rounded { border-radius: 24px; }
.salon-hero-image.shape-square { border-radius: 0; }
.salon-hero-image.shape-circle { border-radius: 9999px; aspect-ratio: 1 / 1; object-fit: cover; }
.salon-hero .salon-hero-overlay { position:absolute; inset:0; background:#000; z-index: 1; pointer-events: none; }
.salon-hero .salon-hero-inner { position: relative; z-index: 3; width: 100%; padding: 64px 24px; }
.salon-hero:not(.split) .salon-hero-inner { max-width: var(--salon-maxw); margin: 0 auto; }

/* Break out of constrained containers - ONLY affects .salon-hero elements */
.has-global-padding .salon-hero,
.is-layout-constrained .salon-hero,
.wp-block-post-content .salon-hero,
.entry-content .salon-hero {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-block-start: 0 !important;
}

.entry-content {
  margin-block-start: 0 !important;
}

.wp-block-group {
  margin-block-start: 0 !important;
}

/* Ensure hero doesn't overlap navbar on home page */
body.page-id-17 .salon-hero:first-of-type {
  margin-top: 0 !important;
  position: relative !important;
  top: 0 !important;
}

.salon-hero.align-left .salon-hero-inner { text-align: left; justify-self: start; }
.salon-hero.align-right .salon-hero-inner { text-align: right; justify-self: end; }
.salon-hero.v-top { align-content: start; } .salon-hero.v-middle { align-content: center; } .salon-hero.v-bottom { align-content: end; }
.salon-hero.text-light { color: #fff; } .salon-hero.text-dark  { color: #111; }
.salon-hero.text-dark .salon-hero-overlay { background: #fff; }

/* Typography vars */
.salon-hero-title { font-size: var(--hero-title-size, clamp(2rem, 4vw, 4rem)); font-weight: var(--hero-title-weight, 700); margin: 0 0 8px; line-height:1.1; }
.salon-hero-subtitle { font-size: var(--hero-subtitle-size, clamp(1rem, 1.6vw, 1.5rem)); font-weight: var(--hero-subtitle-weight, 400); margin: 0 0 16px; opacity:.95; }

/* HERO - Split layout */
.salon-hero.split { background:none; }
.salon-hero.split .salon-hero-inner { 
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 64px 24px; 
}
.salon-hero .split-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 48px; 
  width: 100%; 
  align-items: center; 
}
@media (max-width: 900px){ 
  .salon-hero .split-grid{ 
    grid-template-columns: 1fr; 
  } 
}

/* Text column alignment */
.hero-text-col { 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  min-width: 0;
}
.hero-text-col.align-left { 
  text-align: left; 
  align-items: flex-start; 
} 
.hero-text-col.align-center { 
  text-align: center; 
  align-items: center; 
} 
.hero-text-col.align-right { 
  text-align: right; 
  align-items: flex-end; 
}

/* Image column alignment */
.hero-image-col { 
  display: flex; 
  align-items: center;
  min-width: 0;
}
.hero-image-col.align-left { 
  justify-content: flex-start; 
}
.hero-image-col.align-center { 
  justify-content: center; 
}
.hero-image-col.align-right { 
  justify-content: flex-end; 
}
.hero-image { width:100%; height:auto; object-fit:cover; }
.hero-image.shape-rounded { border-radius: 24px; }
.hero-image.shape-square { border-radius: 0; }
.hero-image.shape-circle { border-radius: 9999px; aspect-ratio: 1 / 1; object-fit: cover; }

/* Buttons */
.salon-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; justify-content:center; }
.salon-hero-actions.align-left { justify-content: flex-start; }
.salon-hero-actions.align-right { justify-content: flex-end; }

/* Contact Section */
.salon-contact { 
  max-width: var(--salon-maxw); 
  margin: 0 auto; 
  padding: 48px 24px; 
}
.salon-contact-title { 
  font-size: clamp(1.8rem, 2.5vw, 2.5rem); 
  margin: 0 0 32px; 
  text-align: center;
}
.salon-contact-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 32px; 
  margin-bottom: 32px;
}
.salon-contact-item { 
  text-align: center; 
}
.salon-contact-label { 
  font-size: 1.1rem; 
  font-weight: 600; 
  margin: 0 0 8px; 
  opacity: 0.8;
}
.salon-contact-value { 
  font-size: 1rem; 
  line-height: 1.6;
}
.salon-contact-value a { 
  color: inherit; 
  text-decoration: none; 
  transition: opacity 0.2s;
}
.salon-contact-value a:hover { 
  opacity: 0.7; 
}
.salon-contact-persons {
  margin-top: 48px;
}
.salon-contact-persons-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 24px;
  text-align: center;
}
.salon-contact-persons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
.salon-contact-person {
  text-align: center;
  padding: 24px;
  background: #f9f9f9;
  border-radius: 12px;
}
.salon-person-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.salon-person-title {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 12px;
}
.salon-person-phone,
.salon-person-email {
  font-size: 0.95rem;
  margin: 4px 0;
}
.salon-person-phone a,
.salon-person-email a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.salon-person-phone a:hover,
.salon-person-email a:hover {
  opacity: 0.7;
}
.salon-contact-map { 
  margin-top: 48px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  text-align: center;
}
.salon-contact-map iframe { 
  width: 100%; 
  max-width: 100%; 
  height: 450px; 
  border: 0; 
  border-radius: 0;
}
.salon-map-link { 
  display: inline-block; 
  padding: 12px 24px; 
  background: #111; 
  color: #fff; 
  text-decoration: none; 
  border-radius: 999px; 
  transition: background 0.2s;
}
.salon-map-link:hover { 
  background: #333; 
}

/* Utility */
.salon-empty, .salon-error { padding:16px; border:1px dashed #ddd; border-radius:12px; background:#fafafa; }

/* Hide page title and spacers on home page */
body.page-id-17 .entry-title,
body.page-id-17 .page-title,
body.page-id-17 h1.entry-title,
body.page-id-17 h1.page-title,
body.page-id-17 .entry-header h1,
body.page-id-17 .page-header h1,
body.page-id-17 h1.wp-block-post-title,
body.page-id-17 .wp-block-spacer {
  display: none;
}

/* Don't modify .wp-block-group.has-global-padding - it affects the header */

/* Target the specific container before entry-content */
body.page-id-17 main > .wp-block-group.has-global-padding,
body.page-id-17 main .wp-block-group.has-global-padding.is-layout-constrained:not(.entry-content) {
  display: none !important;
}


/* Remove padding from entry-content wrapper */
body.page-id-17 .entry-content,
body.page-id-17 .wp-block-post-content {
  padding-top: 0 !important;
}

/* Ensure header stays on top */
body.page-id-17 header.wp-block-template-part {
  position: relative;
  z-index: 1000;
}



/* Ensure hero sits below header naturally */
body.page-id-17 .salon-hero {
  position: relative;
  z-index: 1;
}