/* ==========================================================================
   A.T Nail & Spa — Black & Gold color system
   Source of truth: color-system.md
   Loaded AFTER the theme + responsive CSS so it re-skins the whole site by
   (1) redefining the theme's :root color tokens and (2) overriding the few
   surface/text/button classes where a token serves both bg and fg roles.
   ========================================================================== */

:root {
  /* ---- Canonical palette (from color-system.md) ---- */
  --bg:          #0B0A08;   /* main background — warm near-black, never #000 */
  --bg-alt:      #17140F;   /* secondary sections, cards, modals */
  --navy:        #0D1B2A;   /* optional cool section background */
  --gold-deep:   #8A6C1E;   /* borders, dividers, disabled */
  --gold:        #C6A03C;   /* primary gold — icons, prices, accents */
  --gold-light:  #F0DFA6;   /* highlight, hover, focus ring */
  --cream:       #F5EDDF;   /* body text on dark */
  --cream-muted: #B9AE9C;   /* secondary text, captions, placeholders */
  --gold-metal:  linear-gradient(100deg,#6E5212 0%,#C6A03C 22%,#F5E7B8 45%,#C6A03C 68%,#8A6C1E 88%,#E3CE84 100%);
  --btn-ink:     #1A1305;   /* text on a gold surface */

  /* ---- Remap the template's semantic tokens onto the new roles ---- */
  --theme-color: var(--gold);
  --header-color: var(--cream);
  --text-color:  var(--cream);

  /* Accent family → gold (all the demo accent colors collapse to one) */
  --rose: var(--gold); --berry: var(--gold); --fuchsia: var(--gold);
  --pink: var(--gold); --plum: var(--gold); --sienna: var(--gold);
  --yellow: var(--gold);
  --deep-blue: var(--navy);
  --deep-brown: var(--bg-alt);

  /* Foreground "white" becomes cream; light surfaces become dark */
  --white: var(--cream);
  --black: var(--bg);
  --coal: var(--bg);
  --ivory: var(--bg-alt); --poudre: var(--bg-alt); --blush: var(--bg-alt);
  --sand: var(--bg-alt);  --ghost: var(--bg-alt);  --cream: #F5EDDF;
  --smoke: #241F17;       --silver: #3A3325;

  /* Subtle overlays flip to light-on-dark */
  --tra-black: rgba(245,237,223,.06);
  --tra-gray:  rgba(245,237,223,.10);
  --tra-ink:   rgba(245,237,223,.08);
  --tra-white: rgba(245,237,223,.16);
}

/* --------------------------------------------------------------------------
   Base surfaces
   -------------------------------------------------------------------------- */
body { background-color: var(--bg); color: var(--cream); }
#page, .page { background-color: var(--bg); }
#loading, #loading .theme-spinner { background-color: var(--bg) !important; }

/* Light background utilities → dark surfaces */
.bg--white, .bg--ivory, .bg--poudre, .bg--blush, .bg--sand,
.bg--ghost, .bg--smoke, .bg--cream, .bg--lavender {
  background-color: var(--bg-alt) !important;
}
.bg--black, .bg--coal { background-color: var(--bg) !important; }
.bg--theme { background-color: var(--gold) !important; }

/* --------------------------------------------------------------------------
   Text roles
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--cream); }
p, li, span, .fs-17, .fs-18, .fs-19 { color: inherit; }

.color--white { color: var(--cream) !important; }
.color--black { color: var(--cream) !important; }   /* was dark-on-light; now light-on-dark */
.color--coal  { color: var(--cream) !important; }
.color--theme, .color--yellow { color: var(--gold) !important; }
.module-subtitle { color: var(--gold) !important; }

/* The theme colors descendant headings per color--* class; mirror those so
   headings inside a "dark text" block become cream, not invisible. */
.color--white :is(h1,h2,h3,h4,h5,h6),
.color--black :is(h1,h2,h3,h4,h5,h6),
.color--coal  :is(h1,h2,h3,h4,h5,h6) { color: var(--cream) !important; }
.color--theme :is(h1,h2,h3,h4,h5,h6),
.color--yellow :is(h1,h2,h3,h4,h5,h6) { color: var(--gold) !important; }

a { color: var(--cream); }
a:hover { color: var(--gold-light); }

/* Prominent titles keep the metallic gold look (with a solid fallback) */
.page-hero-section h2, #hero h1, #hero h2,
.section-title h2, .gold-text {
  color: var(--gold-light);
  background: var(--gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reusable metallic utilities from the spec */
.gold-border {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--gold-metal) border-box;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* Primary (all solid accent variants) → gold gradient, dark ink */
.btn--theme, .btn--rose, .btn--berry, .btn--pink, .btn--plum,
.btn--fuchsia, .btn--sienna, .btn--black, .btn--deep-brown {
  background: var(--gold-metal) !important;
  border-color: transparent !important;
  color: var(--btn-ink) !important;
}
.btn--theme:hover, .btn--rose:hover, .btn--berry:hover, .btn--pink:hover,
.btn--plum:hover, .btn--fuchsia:hover, .btn--sienna:hover,
.btn--black:hover, .btn--deep-brown:hover {
  filter: brightness(1.08);
  color: var(--btn-ink) !important;
}
.btn--white { background: var(--cream) !important; color: var(--btn-ink) !important; border-color: var(--cream) !important; }
.btn--deep-blue { background: var(--navy) !important; border-color: var(--navy) !important; color: var(--cream) !important; }

/* Secondary / outline → transparent, gold-deep border, cream text */
.btn--tra-theme, .btn--tra-black, .btn--tra-white, .btn--tra-rose,
.btn--tra-berry, .btn--tra-pink, .btn--tra-plum, .btn--tra-fuchsia,
.btn--tra-sienna, .btn--tra-deep-blue, .btn--tra-deep-brown {
  background: transparent !important;
  border-color: var(--gold-deep) !important;
  color: var(--cream) !important;
}
.btn--tra-theme:hover, .btn--tra-black:hover, .btn--tra-white:hover,
.btn--tra-rose:hover, .btn--tra-berry:hover, .btn--tra-pink:hover,
.btn--tra-plum:hover, .btn--tra-fuchsia:hover, .btn--tra-sienna:hover,
.btn--tra-deep-blue:hover, .btn--tra-deep-brown:hover {
  background: var(--gold-metal) !important;
  border-color: transparent !important;
  color: var(--btn-ink) !important;
}

/* --------------------------------------------------------------------------
   Header + navigation
   -------------------------------------------------------------------------- */
#header { background-color: var(--bg) !important; box-shadow: none !important; }
#header.scroll, #header.hiddden-header { background-color: var(--bg) !important; }
/* menu.css / theme paint the desktop bar white via .wsmainfull */
.wsmainfull,
.white-menu .wsmainfull,
.tra-menu .wsmainfull,
.white-menu .wsmainfull.scroll,
.tra-menu .wsmainfull.scroll {
  background-color: var(--bg) !important;
  box-shadow: 0 1px 0 var(--gold-deep) !important;
  backdrop-filter: none !important;
}
.wsmenu-list > li > a.h-link { color: var(--cream) !important; }
.wsmenu-list > li > a.h-link:hover { color: var(--gold-light) !important; }
.wsmobileheader { background-color: var(--bg) !important; box-shadow: none !important; }
.wsanimated-arrow span,
.wsanimated-arrow span:before,
.wsanimated-arrow span:after { background: var(--gold) !important; }

/* Round A.T. Nail Spa badge — its own navy + gold reads on the dark bar.
   The theme ships two .desktoplogo wrappers (black + white logo); on the dark
   bar we show the white one and fully hide the black wrapper so it doesn't
   occupy an empty flex slot and push the logo off the left edge. */
.navbar-dark .logo-white { display: block !important; }
.navbar-dark .logo-black { display: none !important; }
.wsmainwp > .desktoplogo:first-of-type { display: none !important; }
.wsmobileheader .smllogo img { height: 58px; width: auto; }

/* Desktop only (mobile keeps its off-canvas menu at <=991px): lay the header
   bar out as flex so the nav is vertically centered against the tall logo,
   instead of both floating to the top of the row. */
@media (min-width: 992px) {
  .wsmainwp {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .desktoplogo { float: none; line-height: 0; }
  .wsmenu { float: none; flex: 0 0 auto; }
  .wsmenu > .wsmenu-list { width: auto; }
}

/* --------------------------------------------------------------------------
   Cards / modals / surfaces
   -------------------------------------------------------------------------- */
.modal-content, .bg--poudre .modal-content { background-color: var(--bg-alt) !important; }
.block-info, .txt-block, .section-title { color: var(--cream); }

/* Testimonial cards set background:var(--white) directly (not a .bg--* class),
   so they kept a cream surface with cream text = no contrast. Flip them to a
   dark card like the rest of the site and keep the text readable. */
.review-1, .review-2, .review-3 {
  background-color: var(--bg-alt) !important;
  border-color: var(--gold-deep) !important;
}
.review-1 h6, .review-2 h6, .review-3 h6,
.review-1 .review-txt p, .review-2 .review-txt p, .review-3 .review-txt p,
.review-author p { color: var(--cream); }
.review-author span { color: var(--cream-muted); }

/* Accordion pricing: give the price span the same color as the item title
   (h5 → --header-color) so the price matches the title instead of the dimmer
   inherited tone. */
.txt-block .accordion-thumb .p3-price { color: var(--header-color); }
/* The +/- toggle icon (:after) defaults to a dark gray; match the title. */
.txt-block .accordion-item .accordion-thumb:after,
.txt-block .accordion-item.is-active .accordion-thumb:after { color: var(--header-color); }

hr, hr.divider, .divider { border-color: var(--gold-deep) !important; opacity: .4; }

/* Focus ring per spec */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background-color: var(--navy) !important; }
.footer, .footer p, .footer-info p, .footer-contacts p,
.footer-working-hours p, .footer-copyright p { color: var(--cream-muted); }
.footer h5, .footer h4 { color: var(--cream); }
.footer a { color: var(--cream-muted); }
.footer a:hover { color: var(--gold-light); }
.foo-socials a { color: var(--gold) !important; }
.bottom-footer-list a:hover { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   Service card (gold-framed price card — see services.html)
   -------------------------------------------------------------------------- */
.service-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--gold-deep);
  border-radius: 3px;
  padding: 52px 44px;
}
/* Inner inset frame to echo the double gold border in the design */
.service-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
}
.service-card > * { position: relative; }

.service-card .sc-title {
  font-family: "Great Vibes", "Marcellus", cursive;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.1;
  margin: 0 0 26px;
  text-align: center;
  color: var(--gold-light);
  background: var(--gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Space above the second section title within the same card */
.service-card .price-list + .sc-title { margin-top: 44px; }
/* Detail card (single service with description) keeps a left-aligned title */
.service-card--detail .sc-title { text-align: left; }

.service-card .price-list { list-style: none; margin: 0 0 26px; padding: 0; }
.service-card .price-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 1.15rem;
}
.service-card .pr-name { color: var(--cream); white-space: nowrap; }
.service-card .pr-dots {
  flex: 1 1 auto;
  margin: 0 8px;
  position: relative;
  top: -5px;
  border-bottom: 2px dotted var(--gold-deep);
}
.service-card .pr-cost { color: var(--gold); font-weight: 600; white-space: nowrap; }

/* Two-price variant rows, e.g. "(gel polish)" indented under its service */
.service-card .price-row--sub { margin-top: -6px; }
.service-card .price-row--sub .pr-name { padding-left: 8.5em; color: var(--cream-muted); }

/* Bulleted price rows, e.g. add-ons like "Extra Length" / "Shape" */
.service-card .price-row--bullet .pr-name::before {
  content: "\2022";
  color: var(--cream);
  margin-right: 8px;
}

/* Optional description + "includes" list for detail cards */
.service-card .sc-desc { color: var(--cream); margin-bottom: 18px; }
.service-card .sc-includes-label { color: var(--cream); margin-bottom: 6px; }
.service-card .sc-note { color: var(--cream); margin-top: 18px; margin-bottom: 0; }
.service-card .sc-includes { list-style: none; margin: 0; padding: 0; color: var(--cream); }
.service-card .sc-includes li { position: relative; padding-left: 18px; margin-bottom: 7px; }
.service-card .sc-includes li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--gold);
}

@media (max-width: 767px) {
  .service-card { padding: 40px 26px; }
  .service-card .sc-title { font-size: 3rem; }
  .service-card .price-row { font-size: 1rem; }
  .service-card .price-row--sub .pr-name { padding-left: 6em; }
}