/*
Theme Name: FozDigital London
Theme URI: https://fozdigital.com
Author: FozDigital London
Author URI: https://fozdigital.com
Description: High-performance, luxury bespoke signature theme for The Comeback London Beauty House (Stoke Newington). Engineered with zero-bloat architecture by FozDigital London.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
*/

/* Core Theme Palette Variables — The Comeback London (Architectural Salon Palette) */
:root {
  /* Official Approved Brand Design Tokens — The Comeback London */
  --color-terracotta: #B8653A; /* Terracotta Rust */
  --color-gold: #CE9D5A;       /* Amber Gold */
  --color-obsidian: #121417;   /* Obsidian Black */
  --color-sage: #53604C;       /* Salon Sage Green */
  --color-linen: #F9F8F6;      /* Linen Stone Cream */
  --color-slate: #22282F;     /* Graphite Slate */
  --color-sand: #EBE8E3;      /* Champagne Sand */
  --color-charcoal: #1A1C1E;  /* Dark Charcoal */
  --color-taupe: #525960;     /* Muted Slate Body Text */
  --color-white: #FFFFFF;     /* Pure White */

  /* RGB tuple helpers for opacity / backdrop-blur */
  --rgb-terracotta: 184, 101, 58;
  --rgb-gold: 206, 157, 90;
  --rgb-obsidian: 18, 20, 23;
  --rgb-sage: 83, 96, 76;
  --rgb-linen: 249, 248, 246;
  --rgb-slate: 34, 40, 47;
  --rgb-sand: 235, 232, 227;
  --rgb-charcoal: 26, 28, 30;
  --rgb-taupe: 82, 89, 96;

  /* Theme Palette Aliases */
  --theme-palette-color-1: var(--color-terracotta);
  --theme-palette-color-2: var(--color-gold);
  --theme-palette-color-3: var(--color-obsidian);
  --theme-palette-color-4: var(--color-sage);
  --theme-palette-color-5: var(--color-slate);
  --theme-palette-color-6: var(--color-linen);
  --theme-palette-color-7: var(--color-sand);
  --theme-palette-color-8: var(--color-taupe);

  /* Specific Branding Aliases */
  --color-bg-primary: var(--color-linen);
  --color-brand-primary: var(--color-terracotta);
  --color-brand-dark: var(--color-obsidian);
  --color-accent-sage: var(--color-sage);
  --color-accent-gold: var(--color-gold);
  --color-accent-sand: var(--color-sand);
  --color-text-dark: var(--color-charcoal);
  --color-text-muted: var(--color-taupe);
  --color-cream: var(--color-linen);

  /* Preset Font Variables */
  --wp--preset--font-family--marcellus: 'Marcellus', serif;
  --wp--preset--font-family--plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;
}

html {
  background-color: var(--color-obsidian, #121417) !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  background-color: var(--color-linen, #F9F8F6);
  overflow-x: hidden !important;
  max-width: 100% !important;
  min-height: 100vh;
}

.site-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

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



/* Hide scrollbar for Chrome, Safari, Opera, Edge & Firefox */
.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;
}

/* Mega Menu Editorial Column Dividers & Separators */
.mega-menu-column {
  position: relative;
  padding-right: 1.5rem !important;
}

.mega-menu-column::after {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-gold), 0.08) 50%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 1023px) {
  .mega-menu-column {
    padding-right: 0 !important;
    padding-bottom: 1.25rem !important;
  }

  .mega-menu-column::after {
    top: auto;
    bottom: 0;
    left: 10%;
    right: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--rgb-gold), 0.08) 50%, transparent 100%);
  }
}

.mega-menu-column:last-child::after {
  display: none !important;
}

.mega-menu-header-sep {
  height: 1px !important;
  width: 100% !important;
  background: linear-gradient(90deg, rgba(var(--rgb-gold), 0.3) 0%, rgba(var(--rgb-gold), 0.08) 60%, transparent 100%) !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.625rem !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 Hover State */
a.group:hover .atelier-card-btn,
.group:hover .atelier-card-btn {
  background-color: var(--color-obsidian) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-white) !important;
}
a.group:hover .atelier-card-btn span,
.group:hover .atelier-card-btn span {
  color: var(--color-white) !important;
}
a.group:hover .atelier-card-btn .material-symbols-rounded,
.group:hover .atelier-card-btn .material-symbols-rounded {
  color: var(--color-gold) !important;
  transform: translateX(4px) !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;
}