/* FozDigital London Signature Theme - The Comeback London Standard */

:root,
.editor-styles-wrapper,
body {
  --color-terracotta: 184 101 58;  /* #B8653A - Logo Terracotta */
  --color-gold: 206 157 90;       /* #CE9D5A - Backlit Amber Gold */
  --color-sage: 83 96 76;         /* #53604C - Botanical Salon Wall Sage Green */
  --color-obsidian: 18 20 23;     /* #121417 - Shopfront Facade Obsidian Black */
  --color-slate: 34 40 47;        /* #22282F - Basin Cabinetry Graphite Slate */
  --color-cream: 249 248 246;     /* #F9F8F6 - Crisp Architectural Linen Stone (No Yellow) */
  --color-sand: 235 232 227;      /* #EBE8E3 - Neutral Stone Tint */
  --color-charcoal: 26 28 30;     /* #1A1C1E - Sharp Dark Charcoal Text */
  --color-taupe: 82 89 96;        /* #525960 - Muted Slate Body */
  --color-surface: 255 255 255;
  --color-border: 235 232 227;

  --color-navy: 184 101 58;       /* Primary Terracotta */
  --color-midnight: 18 20 23;     /* Obsidian Dark Facade */

  --wp--preset--font-family--marcellus: 'Marcellus', serif;
  --wp--preset--font-family--plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;
}

/* WordPress Fixed Admin Bar Offset for Floating Header */
body.admin-bar #site-header,
body.admin-bar #mobile-menu-overlay {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar #site-header,
  body.admin-bar #mobile-menu-overlay {
    top: 46px !important;
  }
}

/* Universal Floating Header Spacer Standard */
.page-hero-section {
  padding-top: 120px !important;
  padding-bottom: 48px !important;
}

.has-floating-header-offset {
  padding-top: 110px !important;
  padding-bottom: 0 !important;
}

.has-floating-header-offset:has(.wp-block-fozdigital-hero),
.has-floating-header-offset:has(.page-hero-section),
.has-floating-header-offset:has(.wp-block-fozdigital-page-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 640px) {
  .page-hero-section {
    padding-top: 100px !important;
    padding-bottom: 36px !important;
  }

  .has-floating-header-offset {
    padding-top: 95px !important;
    padding-bottom: 0 !important;
  }

  .has-floating-header-offset:has(.wp-block-fozdigital-hero),
  .has-floating-header-offset:has(.page-hero-section),
  .has-floating-header-offset:has(.wp-block-fozdigital-page-hero) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Hide Rank Math breadcrumb bar in footer on homepage */
body.home .rank-math-breadcrumb-wrapper,
body.front-page .rank-math-breadcrumb-wrapper,
body.page-id-55 .rank-math-breadcrumb-wrapper {
  display: none !important;
}

/* Atelier Card Button & Badge Terracotta Accents */
a.group:hover .atelier-card-btn,
.group:hover .atelier-card-btn {
  background-color: var(--color-terracotta, #B8653A) !important;
  border-color: var(--color-gold, #CE9D5A) !important;
  color: var(--color-white, #FFFFFF) !important;
  box-shadow: 0 8px 24px rgba(184, 101, 58, 0.35) !important;
}
a.group:hover .atelier-card-btn span,
.group:hover .atelier-card-btn span {
  color: var(--color-white, #FFFFFF) !important;
}
a.group:hover .atelier-card-btn .material-symbols-rounded,
.group:hover .atelier-card-btn .material-symbols-rounded {
  color: var(--color-gold, #CE9D5A) !important;
  transform: translateX(4px) !important;
}

.text-terracotta {
  color: var(--color-terracotta, #B8653A) !important;
}
.bg-terracotta {
  background-color: var(--color-terracotta, #B8653A) !important;
}
.border-terracotta {
  border-color: var(--color-terracotta, #B8653A) !important;
}
.badge-terracotta {
  background-color: rgba(184, 101, 58, 0.12) !important;
  color: var(--color-terracotta, #B8653A) !important;
  border: 1px solid rgba(184, 101, 58, 0.3) !important;
}



.font-heading {
  font-family: var(--wp--preset--font-family--marcellus, 'Marcellus', serif) !important;
  text-transform: uppercase;
}

.font-body {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans, 'Plus Jakarta Sans', sans-serif) !important;
}

/* Base Typography Standards */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--wp--preset--font-family--heading);
    color: #1A1C1E;
    font-weight: 400;
    line-height: 1.25;
  }

  h1 {
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 1.2;
  }

  h2 {
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1.25;
  }

  h3 {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.3;
  }

  h4 {
    font-size: var(--wp--preset--font-size--medium);
  }

  p,
  body {
    font-family: var(--wp--preset--font-family--body);
    color: rgb(var(--color-slate, 79 93 109));
    line-height: 1.75;
  }

/* Universal WordPress Entry Content Typography System */
.entry-content {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
  color: rgb(var(--color-slate, 79 93 109));
  font-size: 15px;
  line-height: 1.75;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--wp--preset--font-family--marcellus, serif);
  color: rgb(var(--color-navy, 46 64 112));
  font-weight: 400;
  line-height: 1.25;
}

.entry-content h2 {
  font-size: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--color-gold, 212 196 160), 0.35);
  padding-bottom: 0.5rem;
}

.entry-content h3 {
  font-size: 1.35rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.entry-content h4 {
  font-size: 1.15rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.entry-content p {
  font-size: 15px;
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.entry-content p:last-child {
  margin-bottom: 0;
}

.entry-content ul {
  list-style-type: disc !important;
  padding-left: 1.75rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 1.25rem !important;
}

.entry-content ol {
  list-style-type: decimal !important;
  padding-left: 1.75rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 1.25rem !important;
}

.entry-content li {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
  color: rgb(var(--color-slate, 79 93 109));
  font-size: 14.5px !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.7 !important;
}

.entry-content li::marker {
  color: rgb(var(--color-gold, 212 196 160)) !important;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
  border-left: 4px solid rgb(var(--color-midnight, 27 39 74)) !important;
  background-color: rgba(var(--color-midnight, 27 39 74), 0.04) !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 0 0.75rem 0.75rem 0 !important;
  margin: 1.25rem 0 !important;
  color: rgb(var(--color-midnight, 27 39 74)) !important;
}

.entry-content a {
  color: rgb(var(--color-navy, 46 64 112));
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-gold, 212 196 160), 0.6);
  transition: color 0.2s ease;
}

.entry-content a:hover {
  color: rgb(var(--color-gold, 212 196 160));
}

/* High-Fashion Infinite Marquee Slider for Affiliations */
@keyframes foz-marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.foz-marquee-track {
  display: flex !important;
  width: max-content !important;
  animation: foz-marquee 35s linear infinite !important;
  will-change: transform;
}

.foz-marquee-track:hover {
  animation-play-state: paused !important;
}


/* WordPress Dynamic Nav Menu Header & Sub-menu Styling */
ul.header-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.header-nav-menu > li {
  display: inline-block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.header-nav-menu > li + li {
  margin-left: 0 !important;
}

/* Hide duplicate theme-injected SVG arrows & CSS ::after pseudo-elements */
ul.header-nav-menu .ct-icon,
ul.header-nav-menu svg.ct-arrow,
ul.header-nav-menu svg:not(.custom-svg),
ul.header-nav-menu a::after,
ul.header-nav-menu li::after,
ul.header-nav-menu a::before,
ul.header-nav-menu li::before {
  content: none !important;
  display: none !important;
}

ul.header-nav-menu > li {
  position: static !important;
}

ul.header-nav-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

ul.header-nav-menu > li > a:hover {
  color: var(--color-gold, #CE9D5A) !important;
}

/* Button Pill items inside Header Nav Menu */
ul.header-nav-menu > li > a.btn-book,
ul.header-nav-menu > li.btn-book > a,
ul.header-nav-menu > li > a.btn-cta,
ul.header-nav-menu > li.btn-cta > a,
.btn-gold {
  background-color: var(--color-accent-gold) !important;
  color: var(--color-text-dark) !important;
  border-radius: 9999px !important;
  padding: 0.85rem 2.25rem !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.btn-gold:hover {
  background-color: var(--color-accent-cream) !important;
  color: var(--color-text-dark) !important;
}

ul.header-nav-menu > li > a.btn-book:hover,
ul.header-nav-menu > li.btn-book > a:hover,
ul.header-nav-menu > li > a.btn-cta:hover,
ul.header-nav-menu > li.btn-cta > a:hover,
.btn-book:hover {
  color: #FFFFFF !important;
  background-color: var(--color-brand-dark) !important;
}

ul.header-nav-menu > li > a.btn-book span,
ul.header-nav-menu > li.btn-book > a span,
.btn-book span {
  color: #FFFFFF !important;
}

/* Luxury Frosted Glass Atelier Mega Menu Panel (Obsidian Dark Facade) */
ul.header-nav-menu > li {
  position: static !important;
}

.mega-menu-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  top: calc(100% + 8px) !important;
  background-color: rgba(18, 20, 23, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(206, 157, 90, 0.3) !important;
  box-shadow: 0 35px 90px -10px rgba(0, 0, 0, 0.75) !important;
  border-radius: 1.5rem !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mega-menu-panel::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}

.group:hover .mega-menu-panel,
.mega-menu-panel:hover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

hr {
  border: 0;
  height: 1px;
  background-color: rgb(var(--color-gold) / 0.3);
  margin: 2rem 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: 6px;
  background-color: #FFFFFF;
  font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
  font-size: 14px;
  color: rgb(var(--color-navy));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgb(var(--color-gold));
  box-shadow: 0 0 0 3px rgb(var(--color-gold) / 0.2);
}

/* Premium Rank Math Breadcrumbs */
.rank-math-breadcrumb,
#breadcrumbs,
.rank-math-breadcrumb p,
#breadcrumbs p {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgb(var(--color-gold)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.rank-math-breadcrumb a,
#breadcrumbs a {
  color: inherit !important;
  text-decoration: none !important;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.rank-math-breadcrumb a:hover,
#breadcrumbs a:hover {
  opacity: 1;
  color: rgb(var(--color-navy)) !important;
}

.rank-math-breadcrumb .separator,
#breadcrumbs .separator {
  margin: 0 0.35rem !important;
  opacity: 0.5;
}

.rank-math-breadcrumb .last,
#breadcrumbs .last,
.rank-math-breadcrumb .last-child,
#breadcrumbs .last-child {
  font-weight: 600 !important;
  opacity: 1;
}

@layer components {

  /* Layout Primitives */
  .alignfull {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
  }

  .alignwide {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Typography & Subtitle Separators */
  .hero-title,
  .about-title,
  .page-hero-title,
  .treatment-card-title,
  .story-title {
    font-family: var(--wp--preset--font-family--marcellus, 'Marcellus', serif);
    color: var(--color-text-dark);
    font-weight: 400;
  }

  .hero-subtitle,
  .about-subtitle,
  .page-hero-subtitle,
  .subtitle {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    color: var(--color-brand-primary) !important;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 400;
  }

  .hero-description,
  .about-content,
  .page-hero-description,
  .treatment-card-desc,
  .story-text {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    color: #4F5D6D;
    line-height: 1.75;
  }

  .subtitle-wrap,
  .hero-subtitle-wrap,
  .about-subtitle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  .subtitle-line {
    display: inline-block !important;
    height: 1px !important;
    width: 24px !important;
    background-color: #D4C4A0 !important;
    flex-shrink: 0;
  }

  /* Dark Footer Overrides */
  footer h1,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6,
  footer .foz-footer-cta-title,
  footer .foz-footer-col-title {
    font-family: var(--wp--preset--font-family--marcellus, serif);
  }

  footer .foz-footer-cta-title {
    color: #FFFFFF;
  }

  footer .foz-footer-cta-subtitle {
    color: rgba(255, 255, 255, 0.8);
  }

  footer .foz-footer-desc {
    color: rgba(255, 255, 255, 0.75);
  }

  footer .foz-footer-col-title {
    color: rgb(var(--color-gold));
  }

  /* Luxury Dark Footer Anchor Color Normalization */
  footer a:not(.btn-gold):not(.btn-primary):not([class*="bg-gold"]),
  .wp-block-fozdigital-footer a:not(.btn-gold):not(.btn-primary):not([class*="bg-gold"]),
  .fozdigital-footer-section a:not(.btn-gold):not(.btn-primary):not([class*="bg-gold"]) {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
  }

  footer a:not(.btn-gold):not(.btn-primary):not([class*="bg-gold"]):hover,
  .wp-block-fozdigital-footer a:not(.btn-gold):not(.btn-primary):not([class*="bg-gold"]):hover,
  .fozdigital-footer-section a:not(.btn-gold):not(.btn-primary):not([class*="bg-gold"]):hover {
    color: var(--color-gold, #CE9D5A) !important;
  }

  footer a.text-gold,
  .wp-block-fozdigital-footer a.text-gold,
  .fozdigital-footer-section a.text-gold {
    color: var(--color-gold, #CE9D5A) !important;
  }

  footer a.text-gold:hover,
  .wp-block-fozdigital-footer a.text-gold:hover,
  .fozdigital-footer-section a.text-gold:hover {
    color: #FFFFFF !important;
  }

  /* ==========================================================================
     GLOBAL UNIFIED BUTTON SYSTEM (The Comeback Signature 3-Variant System)
     All buttons share the exact same border-radius (rounded-full / rounded-xl),
     font (Marcellus), tracking, padding, and smooth scale/glow hover states.
     ========================================================================== */

  /* Base Button Reset & Shared Geometry */
  .btn,
  .btn-gold,
  .btn-primary,
  .btn-dark,
  .btn-secondary,
  .btn-outline,
  .btn-outline-light,
  .atelier-card-btn,
  .wp-block-button__link,
  a.btn-gold,
  a.btn-primary,
  a.btn-dark,
  a.btn-secondary,
  a.btn-outline,
  a.btn-outline-light,
  .header-nav-menu a.btn-book,
  .header-nav-menu li.btn-book a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 26px !important;
    font-family: var(--wp--preset--font-family--marcellus, 'Marcellus', serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    border-radius: 9999px !important; /* Unified Pill Radius Across Entire Site */
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* --------------------------------------------------------------------------
     1. SOLID ACCENT BUTTON (.btn-gold / .btn-primary / .btn-solid)
     Solid Gold background (#CE9D5A) with Dark Obsidian text (#121417)
     -------------------------------------------------------------------------- */
  .btn-solid,
  .btn-gold,
  .btn-primary,
  a.btn-solid,
  a.btn-gold,
  a.btn-primary,
  .header-nav-menu a.btn-book,
  .header-nav-menu li.btn-book a {
    color: #121417 !important;
    background-color: rgb(var(--color-gold, 206 157 90)) !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 20px rgba(206, 157, 90, 0.3) !important;
  }

  .btn-solid span,
  .btn-gold span,
  .btn-primary span,
  a.btn-solid span,
  a.btn-gold span,
  a.btn-primary span,
  .header-nav-menu a.btn-book span,
  .header-nav-menu li.btn-book a span {
    color: #121417 !important;
  }

  .btn-solid:hover,
  .btn-gold:hover,
  .btn-primary:hover,
  a.btn-solid:hover,
  a.btn-gold:hover,
  a.btn-primary:hover,
  .header-nav-menu a.btn-book:hover,
  .header-nav-menu li.btn-book a:hover {
    background-color: #FFFFFF !important;
    color: #121417 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.4) !important;
  }

  .btn-solid:hover span,
  .btn-gold:hover span,
  .btn-primary:hover span,
  a.btn-solid:hover span,
  a.btn-primary:hover span,
  .header-nav-menu a.btn-book:hover span,
  .header-nav-menu li.btn-book a:hover span {
    color: #121417 !important;
  }

  /* Modular Dynamic Button Icon Engine */
  .btn-primary:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-solid:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-gold:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-outline:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-outline-light:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .wp-block-button__link:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-primary:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-solid:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-gold:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-outline:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-outline-light:not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after {
    content: attr(data-icon);
    font-family: 'Material Symbols Rounded' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none !important;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  }

  .btn-primary:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-solid:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-gold:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-outline:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .btn-outline-light:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  .wp-block-button__link:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-primary:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-solid:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-gold:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-outline:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after,
  a.btn-outline-light:not([data-icon]):not(.no-icon):not(:has(.material-symbols-rounded)):not(:has(svg))::after {
    content: 'chevron_right';
  }

  .btn-primary:hover::after,
  .btn-solid:hover::after,
  .btn-gold:hover::after,
  .btn-outline:hover::after,
  .btn-outline-light:hover::after,
  .wp-block-button__link:hover::after,
  a.btn-primary:hover::after,
  a.btn-solid:hover::after,
  a.btn-gold:hover::after,
  a.btn-outline:hover::after,
  a.btn-outline-light:hover::after {
    transform: translateX(4px);
  }

  /* --------------------------------------------------------------------------
     2. DARK CANVAS OUTLINE BUTTON (.btn-outline)
     Glass transparent background with subtle gold border (For dark heroes/banners)
     -------------------------------------------------------------------------- */
  .btn-outline,
  a.btn-outline {
    color: #FFFFFF !important;
    background-color: rgba(18, 20, 23, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(206, 157, 90, 0.45) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  }

  .btn-outline span,
  a.btn-outline span {
    color: #FFFFFF !important;
  }

  .btn-outline:hover,
  a.btn-outline:hover {
    background-color: rgb(var(--color-gold, 206 157 90)) !important;
    color: #121417 !important;
    border-color: rgb(var(--color-gold, 206 157 90)) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 30px rgba(206, 157, 90, 0.35) !important;
  }

  .btn-outline:hover span,
  a.btn-outline:hover span {
    color: #121417 !important;
  }

  /* --------------------------------------------------------------------------
     3. LIGHT CANVAS OUTLINE BUTTON (.btn-outline-light / .atelier-card-btn)
     Linen background on white canvas; converts to dark obsidian with gold border on hover.
     -------------------------------------------------------------------------- */
  .btn-outline-light,
  .atelier-card-btn,
  a.btn-outline-light {
    color: #1A1C1E !important;
    background-color: #F9F8F6 !important;
    border: 1px solid #EBE8E3 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-radius: 9999px !important; /* Universal Pill Radius Across Entire Site */
  }

  .btn-outline-light span,
  .atelier-card-btn span,
  a.btn-outline-light span {
    color: #1A1C1E !important;
    transition: color 0.35s ease !important;
  }

  .btn-outline-light .material-symbols-rounded,
  .atelier-card-btn .material-symbols-rounded,
  a.btn-outline-light .material-symbols-rounded {
    color: #CE9D5A !important;
    transition: transform 0.35s ease, color 0.35s ease !important;
  }

  /* Hover State (Triggers on button hover OR parent card .group hover) */
  .btn-outline-light:hover,
  a.btn-outline-light:hover,
  a.group:hover .btn-outline-light,
  a.group:hover .atelier-card-btn,
  .group:hover .btn-outline-light,
  .group:hover .atelier-card-btn {
    background-color: #121417 !important;
    color: #FFFFFF !important;
    border-color: #CE9D5A !important;
    box-shadow: 0 6px 20px rgba(18, 20, 23, 0.25) !important;
  }

  .btn-outline-light:hover span,
  a.btn-outline-light:hover span,
  a.group:hover .btn-outline-light span,
  a.group:hover .atelier-card-btn span,
  .group:hover .btn-outline-light span,
  .group:hover .atelier-card-btn span {
    color: #FFFFFF !important;
  }

  .btn-outline-light:hover .material-symbols-rounded,
  a.btn-outline-light:hover .material-symbols-rounded,
  a.group:hover .btn-outline-light .material-symbols-rounded,
  a.group:hover .atelier-card-btn .material-symbols-rounded,
  .group:hover .btn-outline-light .material-symbols-rounded,
  .group:hover .atelier-card-btn .material-symbols-rounded {
    color: #CE9D5A !important;
    transform: translateX(4px) !important;
  }

  @media (max-width: 640px) {
    .btn-outline,
    a.btn-outline {
      width: 100%;
      max-width: 360px;
      padding: 12px 14px;
      font-size: 10.5px;
      letter-spacing: 0.1em;
      gap: 8px;
    }
    .btn-outline span,
    a.btn-outline span {
      white-space: nowrap;
    }
  }
}

/* Header hover and dropdown styles are handled by Tailwind utility classes natively. */

@layer utilities {
  .bg-cream {
    background-color: rgb(var(--color-cream));
  }

  .bg-navy {
    background-color: rgb(var(--color-navy));
  }

  .bg-gold {
    background-color: rgb(var(--color-gold));
  }

  .text-navy {
    color: rgb(var(--color-navy));
  }

  .text-gold {
    color: rgb(var(--color-gold));
  }

  .text-slate {
    color: rgb(var(--color-slate));
  }

  .rotate-180 {
    transform: rotate(180deg);
  }

  .no-scrollbar::-webkit-scrollbar,
  .no-scrollbar::-webkit-scrollbar-thumb,
  .no-scrollbar::-webkit-scrollbar-track {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  .no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
}

/* Universal JavaScript Scroll Motion Reveal Classes */
.foz-scroll-reveal {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.foz-scroll-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.foz-delay-1 { transition-delay: 0.10s !important; }
.foz-delay-2 { transition-delay: 0.20s !important; }
.foz-delay-3 { transition-delay: 0.30s !important; }
.foz-delay-4 { transition-delay: 0.40s !important; }

/* ==========================================================================
   Table Component & Responsive Horizontal Scroll Container (Usercentrics, Cookiebot & Content Tables)
   ========================================================================== */

/* 1. Scrollable Container Wrappers (Never set display:block on <table>!) */
.table-responsive-wrapper,
.wp-block-table,
.privacy-table-container,
.cookiebot-declaration-container,
.usercentrics-policy-wrapper,
.uc-privacy-policy,
#CookieDeclaration,
.CookieDeclaration,
.entry-content {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

/* Custom Luxury Gold-Toned Scrollbar for wide tables */
.table-responsive-wrapper::-webkit-scrollbar,
.wp-block-table::-webkit-scrollbar,
.usercentrics-policy-wrapper::-webkit-scrollbar,
.uc-privacy-policy::-webkit-scrollbar,
.cookiebot-declaration-container::-webkit-scrollbar {
  height: 6px;
}
.table-responsive-wrapper::-webkit-scrollbar-track,
.wp-block-table::-webkit-scrollbar-track,
.usercentrics-policy-wrapper::-webkit-scrollbar-track,
.uc-privacy-policy::-webkit-scrollbar-track,
.cookiebot-declaration-container::-webkit-scrollbar-track {
  background: rgba(235, 232, 227, 0.5);
  border-radius: 9999px;
}
.table-responsive-wrapper::-webkit-scrollbar-thumb,
.wp-block-table::-webkit-scrollbar-thumb,
.usercentrics-policy-wrapper::-webkit-scrollbar-thumb,
.uc-privacy-policy::-webkit-scrollbar-thumb,
.cookiebot-declaration-container::-webkit-scrollbar-thumb {
  background: rgba(206, 157, 90, 0.6);
  border-radius: 9999px;
}
.table-responsive-wrapper::-webkit-scrollbar-thumb:hover,
.wp-block-table::-webkit-scrollbar-thumb:hover,
.usercentrics-policy-wrapper::-webkit-scrollbar-thumb:hover,
.uc-privacy-policy::-webkit-scrollbar-thumb:hover,
.cookiebot-declaration-container::-webkit-scrollbar-thumb:hover {
  background: rgba(206, 157, 90, 0.9);
}

/* 2. Pure Table Element Reset */
.entry-content table,
.wp-block-table table,
.privacy-table-container table,
.usercentrics-policy-wrapper table,
.uc-privacy-policy table,
.CookieDeclaration table,
#CookieDeclaration table,
table.CookieDeclaration,
table:not([class*="components-"]) {
  display: table !important;
  width: 100% !important;
  min-width: 780px !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(206, 157, 90, 0.3) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

/* 3. Table Header Elements */
.entry-content th,
.wp-block-table th,
.privacy-table th,
.usercentrics-policy-wrapper th,
.uc-privacy-policy th,
.CookieDeclaration th,
#CookieDeclaration th,
table:not([class*="components-"]) th {
  background-color: #121417 !important;
  color: #F9F8F6 !important;
  font-family: var(--wp--preset--font-family--marcellus, 'Marcellus', serif) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 14px 18px !important;
  text-align: left !important;
  vertical-align: middle !important;
  height: auto !important;
  white-space: nowrap !important;
  border: none !important;
  border-bottom: 2px solid rgba(206, 157, 90, 0.5) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.entry-content th:last-child,
.wp-block-table th:last-child,
.usercentrics-policy-wrapper th:last-child,
.uc-privacy-policy th:last-child,
.CookieDeclaration th:last-child,
#CookieDeclaration th:last-child,
table:not([class*="components-"]) th:last-child {
  border-right: none !important;
}

/* 4. Table Body Cells */
.entry-content td,
.wp-block-table td,
.privacy-table td,
.usercentrics-policy-wrapper td,
.uc-privacy-policy td,
.CookieDeclaration td,
#CookieDeclaration td,
table:not([class*="components-"]) td {
  padding: 13px 18px !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  color: #2D3139 !important;
  border: none !important;
  border-bottom: 1px solid rgba(235, 232, 227, 0.8) !important;
  border-right: 1px solid rgba(235, 232, 227, 0.5) !important;
  vertical-align: top !important;
  height: auto !important;
  min-width: 130px !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.entry-content td:last-child,
.wp-block-table td:last-child,
.usercentrics-policy-wrapper td:last-child,
.uc-privacy-policy td:last-child,
.CookieDeclaration td:last-child,
#CookieDeclaration td:last-child,
table:not([class*="components-"]) td:last-child {
  border-right: none !important;
}

/* 5. Row Alternating Colors & Hover */
.entry-content tr:nth-child(even) td,
.wp-block-table tr:nth-child(even) td,
.privacy-table tr:nth-child(even) td,
.usercentrics-policy-wrapper tr:nth-child(even) td,
.uc-privacy-policy tr:nth-child(even) td,
.CookieDeclaration tr:nth-child(even) td,
#CookieDeclaration tr:nth-child(even) td,
table:not([class*="components-"]) tr:nth-child(even) td {
  background-color: #FAF8F5 !important;
}

.entry-content tr:nth-child(odd) td,
.wp-block-table tr:nth-child(odd) td,
.privacy-table tr:nth-child(odd) td,
.usercentrics-policy-wrapper tr:nth-child(odd) td,
.uc-privacy-policy tr:nth-child(odd) td,
.CookieDeclaration tr:nth-child(odd) td,
#CookieDeclaration tr:nth-child(odd) td,
table:not([class*="components-"]) tr:nth-child(odd) td {
  background-color: #FFFFFF !important;
}

.entry-content tr:hover td,
.wp-block-table tr:hover td,
.privacy-table tr:hover td,
.usercentrics-policy-wrapper tr:hover td,
.uc-privacy-policy tr:hover td,
.CookieDeclaration tr:hover td,
#CookieDeclaration tr:hover td,
table:not([class*="components-"]) tr:hover td {
  background-color: rgba(206, 157, 90, 0.08) !important;
}

/* ==========================================================================
   Universal Gutenberg Block Editor Styles (Applies universally across all CPTs: Page, Post, Treatments, Services)
   ========================================================================== */

/* Editor Canvas Reset & Comfortable Side Padding */
.editor-styles-wrapper {
  font-family: var(--wp--preset--font-family--body, sans-serif) !important;
  line-height: 1.65;
  padding: 40px 60px !important;
  box-sizing: border-box;
}

/* Post Title Input (Targeting Gutenberg Title Element) */
.editor-post-title__block,
.editor-post-title__input,
.wp-block-post-title,
.edit-post-visual-editor__post-title-wrapper h1,
.editor-styles-wrapper .editor-post-title__input {
  font-family: var(--wp--preset--font-family--heading, serif) !important;
  color: var(--wp--preset--color--navy, var(--wp--preset--color--dark-charcoal, #1A1C1E)) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-top: 1rem !important;
  margin-bottom: 2rem !important;
}

/* All Headings in Block Editor (h1, h2, h3, h4, h5, h6, .wp-block-heading) */
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,
.editor-styles-wrapper .wp-block-heading {
  font-family: var(--wp--preset--font-family--heading, serif) !important;
  color: var(--wp--preset--color--navy, var(--wp--preset--color--dark-charcoal, inherit));
  font-weight: 600;
  line-height: 1.25;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.editor-styles-wrapper p,
.editor-styles-wrapper .wp-block-paragraph,
.editor-styles-wrapper .block-editor-block-list__block {
  font-family: var(--wp--preset--font-family--body, sans-serif) !important;
  font-size: var(--wp--preset--font-size--medium, 1rem);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.editor-styles-wrapper a {
  color: var(--wp--preset--color--navy, var(--wp--preset--color--terracotta, inherit));
}