/* ═══════════════════════════════════════════════════════
   Bare Nail Bar - Theme CSS
   Color palette, typography, components, animations
═══════════════════════════════════════════════════════ */

/* ─── WordPress Admin Bar offset ─── */
.admin-bar #navbar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #navbar { top: 46px; }
}

/* ─── CSS Custom Properties ─── */
:root {
  --deep-mocha:     #4E4034;
  --cozy-walnut:    #8C7864;
  --natural-stone:  #B7A996;
  --desert-rock:    #A48D78;
  --soft-sandstone: #CBB9A4;
  --warm-greige:    #D9D2C6;
  --creamed-oat:    #E6DAC8;
  --porcelain-mist: #F4F1EA;
  --feather-white:  #FAF9F6;
  --soft-ivory:     #F5F2EC;
  --font-heading:   'Playfair Display', serif;
  --font-body:      'Inter', sans-serif;
}

/* ─── Base & Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  font-family: var(--font-body);
  background-color: var(--feather-white);
  color: var(--cozy-walnut);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* Tailwind-style utility shims used throughout templates */
.bg-feather-white  { background-color: var(--feather-white); }
.bg-porcelain-mist { background-color: var(--porcelain-mist); }
.bg-creamed-oat    { background-color: var(--creamed-oat); }
.bg-deep-mocha     { background-color: var(--deep-mocha); }
.text-deep-mocha   { color: var(--deep-mocha); }
.text-cozy-walnut  { color: var(--cozy-walnut); }
.text-natural-stone{ color: var(--natural-stone); }
.text-desert-rock  { color: var(--desert-rock); }
.text-feather-white{ color: var(--feather-white); }
.font-playfair     { font-family: var(--font-heading); }
.font-inter        { font-family: var(--font-body); }

/* ─── Scroll Animations ─── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }

.fade-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.fade-right.visible { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-left, .fade-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ─── Navigation ─── */
#navbar {
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
#navbar.scrolled {
  background-color: rgba(250,249,246,0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 24px 0 rgba(78,64,52,0.08);
}

.nav-link {
  position: relative;
  color: var(--cozy-walnut);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease-out;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--desert-rock);
  transition: width 0.25s ease-out;
}
.nav-link:hover { color: var(--desert-rock); }
.nav-link:hover::after { width: 100%; }
.nav-link:focus-visible {
  outline: 2px solid var(--desert-rock);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Mobile menu */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
#mobile-menu.open { transform: translateX(0); }

.mobile-nav-link:hover {
  background-color: var(--porcelain-mist);
  color: var(--desert-rock) !important;
}

/* ─── Buttons ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--desert-rock);
  color: var(--feather-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
  text-decoration: none;
  min-height: 44px;
}
.btn-primary:hover {
  background-color: var(--cozy-walnut);
  box-shadow: 0 6px 24px rgba(164,141,120,0.35);
  transform: translateY(-1px);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--desert-rock);
  outline-offset: 3px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--desert-rock);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  border: 1.5px solid var(--desert-rock);
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
  text-decoration: none;
  min-height: 44px;
}
.btn-outline:hover {
  background-color: var(--desert-rock);
  color: var(--feather-white);
  box-shadow: 0 4px 20px rgba(164,141,120,0.25);
  transform: translateY(-1px);
}
.btn-outline:focus-visible {
  outline: 2px solid var(--desert-rock);
  outline-offset: 3px;
}

/* ─── Section Tag ─── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--desert-rock);
  font-family: var(--font-body);
}
.section-tag::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background-color: var(--desert-rock);
  flex-shrink: 0;
}

/* ─── Service Cards ─── */
.service-card {
  background: var(--feather-white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 16px 0 rgba(78,64,52,0.08), 0 1px 4px 0 rgba(78,64,52,0.04);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px 0 rgba(78,64,52,0.14), 0 4px 12px 0 rgba(78,64,52,0.08);
}
.service-card:hover .card-img { transform: scale(1.04); }
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

/* ─── Gallery ─── */
.gallery-item {
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(78,64,52,0.35);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* ─── Commitment Cards (Soft UI / Neumorphism) ─── */
.commitment-card {
  background: var(--porcelain-mist);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  box-shadow: 6px 6px 16px rgba(183,169,150,0.35), -4px -4px 12px rgba(250,249,246,0.9);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.commitment-card:hover {
  transform: translateY(-4px);
  box-shadow: 8px 12px 28px rgba(164,141,120,0.22), -4px -4px 14px rgba(250,249,246,0.95);
}

/* ─── Instagram Grid ─── */
.insta-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  aspect-ratio: 1/1;
  cursor: pointer;
}
.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease-out;
}
.insta-item:hover img { transform: scale(1.07); }
.insta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(164,141,120,0.55);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insta-item:hover .insta-overlay { opacity: 1; }

/* ─── Sub-service Chips ─── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--soft-sandstone);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cozy-walnut);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
  min-height: 36px;
  text-decoration: none;
}
.chip:hover {
  background-color: var(--desert-rock);
  color: var(--feather-white);
  border-color: var(--desert-rock);
}
.chip:focus-visible {
  outline: 2px solid var(--desert-rock);
  outline-offset: 2px;
}

/* ─── Dot Grid Decorative ─── */
.dot-grid {
  width: 120px;
  height: 120px;
  background-image: radial-gradient(circle, var(--soft-sandstone) 1.2px, transparent 1.2px);
  background-size: 12px 12px;
  opacity: 0.55;
}

/* ─── Hero Gradient Overlay ─── */
.hero-gradient-left {
  background: linear-gradient(to right, var(--feather-white) 0%, transparent 100%);
}

/* ─── Booking Card ─── */
.booking-card {
  background: var(--feather-white);
  border-radius: 1.25rem;
  box-shadow: 0 8px 40px 0 rgba(78,64,52,0.1), 0 2px 8px 0 rgba(78,64,52,0.05);
  overflow: hidden;
}

/* ─── Price List (Services Page) ─── */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--creamed-oat);
}
.price-row:last-child { border-bottom: none; }
.service-item:last-child { border-bottom: none; }

.category-card {
  background: var(--feather-white);
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgba(78,64,52,0.08);
  overflow: hidden;
}

/* ─── Contact Form ─── */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--warm-greige);
  border-radius: 0.75rem;
  background: var(--feather-white);
  color: var(--deep-mocha);
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  outline: none;
  resize: vertical;
}
.form-input:focus {
  border-color: var(--desert-rock);
  box-shadow: 0 0 0 3px rgba(164,141,120,0.12);
}
.form-input::placeholder { color: var(--natural-stone); }

/* ─── Footer Links ─── */
.footer-link {
  color: var(--natural-stone);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease-out;
  cursor: pointer;
}
.footer-link:hover { color: var(--warm-greige); }
.footer-link:focus-visible {
  outline: 1px solid var(--warm-greige);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Shadow utilities ─── */
.shadow-soft    { box-shadow: 0 2px 16px 0 rgba(78,64,52,0.08), 0 1px 4px 0 rgba(78,64,52,0.04); }
.shadow-soft-lg { box-shadow: 0 8px 40px 0 rgba(78,64,52,0.12), 0 2px 8px 0 rgba(78,64,52,0.06); }
.shadow-soft-xl { box-shadow: 0 16px 60px 0 rgba(78,64,52,0.16), 0 4px 16px 0 rgba(78,64,52,0.08); }

/* ─── Layout utilities ─── */
.max-w-7xl  { max-width: 80rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-lg   { max-width: 32rem; }
.mx-auto    { margin-left: auto; margin-right: auto; }

/* ─── Responsive Utilities ─── */
@media (max-width: 1023px) {
  .hidden.lg\\:flex  { display: none !important; }
  .hidden.lg\\:block { display: none !important; }
  .lg\\:hidden       { display: flex !important; }
}

@media (min-width: 1024px) {
  .lg\\:hidden { display: none !important; }
  .hidden.lg\\:flex  { display: flex !important; }
  .hidden.lg\\:block { display: block !important; }
  .lg\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\\:col-span-1  { grid-column: span 1 / span 1; }
  .lg\\:pr-16       { padding-right: 4rem; }
  .lg\\:py-20       { padding-top: 5rem; padding-bottom: 5rem; }
  .lg\\:text-5xl    { font-size: 3rem; line-height: 1; }
  .lg\\:text-6xl    { font-size: 3.75rem; line-height: 1; }
  .lg\\:w-\\[55\\%\\] { width: 55%; }
  .lg\\:w-\\[45\\%\\] { width: 45%; }
  .lg\\:flex-row    { flex-direction: row; }
  .lg\\:order-1     { order: 1; }
  .lg\\:order-2     { order: 2; }
  .lg\\:row-span-2  { grid-row: span 2 / span 2; }
  .lg\\:col-span-6  { grid-column: span 6 / span 6; }
  .lg\\:gap-14      { gap: 3.5rem; }
  .lg\\:gap-16      { gap: 4rem; }
}

@media (min-width: 640px) {
  .sm\\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\\:inline-flex  { display: inline-flex !important; }
  .sm\\:flex-row     { flex-direction: row; }
  .sm\\:w-auto       { width: auto; }
  .hidden.sm\\:inline-flex { display: inline-flex !important; }
}

@media (min-width: 768px) {
  .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\\:row-span-2  { grid-row: span 2 / span 2; }
}

/* ─── Grid helpers ─── */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }

/* ─── Flex helpers ─── */
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-wrap      { flex-wrap: wrap; }
.flex-shrink-0  { flex-shrink: 0; }
.gap-1   { gap: 0.25rem; }
.gap-1\\.5 { gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }

/* ─── Spacing helpers ─── */
.py-8  { padding-top: 2rem;   padding-bottom: 2rem; }
.py-12 { padding-top: 3rem;   padding-bottom: 3rem; }
.py-16 { padding-top: 4rem;   padding-bottom: 4rem; }
.py-20 { padding-top: 5rem;   padding-bottom: 5rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8  { padding-left: 2rem;  padding-right: 2rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pt-16 { padding-top: 4rem; }
.pt-24 { padding-top: 6rem; }
.pt-28 { padding-top: 7rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }

/* ─── Typography helpers ─── */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-7xl  { font-size: 4.5rem;   line-height: 1; }
.font-light  { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }
.italic      { font-style: italic; }
.uppercase   { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ─── Dimension helpers ─── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.h-7  { height: 1.75rem; }
.h-8  { height: 2rem; }
.w-9  { width: 2.25rem; }
.h-9  { height: 2.25rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.overflow-hidden { overflow: hidden; }

/* ─── Misc ─── */
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }
.border-0    { border: none; }
.block       { display: block; }
.hidden      { display: none; }
.relative    { position: relative; }
.absolute    { position: absolute; }
.fixed       { position: fixed; }
.inset-0     { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.transition-colors { transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; }
.transition-all    { transition: all 0.2s ease-out; }
.space-y-1   > * + * { margin-top: 0.25rem; }
.space-y-1\\.5 > * + * { margin-top: 0.375rem; }
.space-y-3   > * + * { margin-top: 0.75rem; }
.space-y-4   > * + * { margin-top: 1rem; }
.space-y-5   > * + * { margin-top: 1.25rem; }
.space-y-8   > * + * { margin-top: 2rem; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.shrink-0 { flex-shrink: 0; }