/*
  Umberto Cuisine — light mode (opt-in via the nav toggle, dark stays default)
  Active when <html data-theme="light">. Loaded last; vendor CSS untouched.

  The vendor theme uses --white-color for text-on-dark and --dark-color /
  --secondary-color for backgrounds, so most of the flip is a token remap.
  The rest of this file fixes hard-coded colors and places where "white"
  must stay white (text over photos).
*/

/* ── Toggle button (both themes) ───────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 14px;
  padding: 0;
  border: 1px solid rgba(198, 168, 125, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--primary-color);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme-toggle:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--dark-color);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--primary-color-light);
  outline-offset: 3px;
}

/* Desktop: sits in the top-bar social list, styled like the social links */
header#pq-header .pq-top-header .pq-header-social .theme-toggle {
  width: auto;
  height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
}

header#pq-header .pq-top-header .pq-header-social .theme-toggle:hover {
  background: var(--primary-color);
}

/* Mobile: the top bar is hidden, so a copy sits next to the menu button */
.theme-toggle-mobile {
  display: none;
}

@media (max-width: 767px) {
  .theme-toggle-mobile {
    display: inline-flex;
    margin-left: auto;
  }
}

.theme-light-only {
  display: none !important;
}

html[data-theme="light"] .theme-light-only {
  display: inline-block !important;
}

html[data-theme="light"] .theme-dark-only {
  display: none !important;
}

/* ── Token remap ───────────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --primary-color: #9c7746;        /* deeper gold: readable on cream */
  --primary-color-light: #b38d58;
  --secondary-color: #f6f0e6;      /* page background */
  --dark-color: #fbf8f2;           /* panels / alt sections */
  --custom-bg-color: #efe6d7;      /* cards */
  --white-color: #1f1b16;          /* headings + strong text */
  --text-color: rgba(31, 27, 22, 0.78);
  --grey-color: #6e6559;
}

/* Hero and page banners stay dark in both modes: restore the dark tokens there */
html[data-theme="light"] rs-module-wrap,
html[data-theme="light"] .pq-breadcrumb {
  color-scheme: dark;
  --primary-color: #c6a87d;
  --primary-color-light: #d9bd8f;
  --secondary-color: #101418;
  --dark-color: #080b0e;
  --custom-bg-color: #13181c;
  --white-color: #ffffff;
  --text-color: #ffffffcc;
  --grey-color: #777777;
}

/* ── Hard-coded vendor colors ──────────────────────────────────────────── */
html[data-theme="light"] .pq-main-portfolio-box,
html[data-theme="light"] .pq-section-location-container {
  background-color: var(--dark-color);
}

html[data-theme="light"] header#pq-header .pq-top-header .pq-header-contact ul li,
html[data-theme="light"] header#pq-header .pq-top-header .pq-header-social ul li,
html[data-theme="light"] .pq-porfolio-info .pq-info-list li {
  border-color: rgba(31, 27, 22, 0.1);
}

html[data-theme="light"] .pq-icon-box.pq-style-1 .pq-icon-box-wrapper {
  border-bottom-color: rgba(31, 27, 22, 0.08);
}

html[data-theme="light"] header#pq-header .pq-bottom-header.pq-header-sticky {
  border-bottom-color: rgba(31, 27, 22, 0.08);
  box-shadow: 0 6px 24px rgba(31, 27, 22, 0.06);
}

/* Outline buttons: dark hairline instead of white */
html[data-theme="light"] .pq-button {
  border-color: rgba(31, 27, 22, 0.35);
}

/* Gold fill keeps light text for contrast on the deeper gold */
html[data-theme="light"] .pq-button:hover,
html[data-theme="light"] .pq-button:focus,
html[data-theme="light"] .pq-button:hover .pq-button-text,
html[data-theme="light"] .theme-toggle:hover {
  color: #fffaf2;
}

/* Footer: hairlines between the bands */
html[data-theme="light"] footer#pq-footer .pq-copyright-footer {
  border-top-color: rgba(31, 27, 22, 0.1);
}

/* Soft lift on content photos */
html[data-theme="light"] .pq-portfolio-block,
html[data-theme="light"] .pq-portfolio-box-img img,
html[data-theme="light"] .pq-about-img img,
html[data-theme="light"] .pq-about-img3 img,
html[data-theme="light"] .pq-section-img img,
html[data-theme="light"] .pq-portfolio-single-img2 img {
  box-shadow: 0 14px 34px rgba(31, 27, 22, 0.18);
}

html[data-theme="light"] .pq-award-card:hover {
  box-shadow: 0 18px 40px rgba(31, 27, 22, 0.12);
}

html[data-theme="light"] ::selection {
  color: #fffaf2;
}

/* Hero buttons sit on photos: keep the white hairline */
html[data-theme="light"] rs-module-wrap .pq-button {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Header CTA: ink fill + cream text (gold-on-gold was too low contrast) */
html[data-theme="light"] header#pq-header .pq-btn-container .pq-button {
  background: #1f1b16;
  border-color: #1f1b16;
}

html[data-theme="light"] header#pq-header .pq-btn-container .pq-button:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

html[data-theme="light"] header#pq-header .pq-btn-container .pq-button,
html[data-theme="light"] header#pq-header .pq-btn-container .pq-button .pq-button-text {
  color: #fffaf2;
}

html[data-theme="light"] header#pq-header .pq-btn-container .pq-button span[class*="pq-button-line"] {
  background: #fffaf2;
}

/* Reservation notice uses Bootstrap's bright yellow */
html[data-theme="light"] .text-warning {
  color: var(--primary-color) !important;
}

/* Mobile menu button matches the ink CTA */
@media (max-width: 1023px) {
  html[data-theme="light"] header#pq-header .pq-bottom-header .navbar-toggler {
    background: #1f1b16;
    color: #fffaf2;
  }
}