/*
 * company-website theme "booking" (dark / heavy-metal palette).
 *
 * Loaded after style.css when the website has the `templateTheme` website
 * setting set to "booking" (see layout.latte). It only redefines the design
 * tokens from style.css plus the few rules that hard-code light colours, so
 * layout and spacing stay identical to the default (light) variant.
 *
 * Accent: blood red. Change the four --color-primary* tokens below to re-tint
 * the whole site; everything else derives from them.
 */

body.theme-booking {
  --color-primary: #E3242B;
  --color-primary-hover: #FF3B42;
  --color-primary-light: #2A0C0F;
  --color-primary-subtle: #7A1A1F;

  --color-text: #F5F5F5;
  --color-text-secondary: #C7C7C7;
  --color-text-muted: #8C8C8C;

  --color-bg: #0A0A0A;
  --color-bg-alt: #121212;
  --color-surface: #161616;
  --color-border: #2C2C2C;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.6);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.7), 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.7), 0 2px 4px -2px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.8), 0 4px 6px -4px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.85), 0 8px 10px -6px rgb(0 0 0 / 0.7);

  background-color: var(--color-bg);
  color: var(--color-text);
}

/* The full-page backdrop image itself (.site-backdrop) is generic, see style.css;
   this theme only makes its surfaces translucent so the image shows through.
   (.site-nav stays fixed/z-index 1000 from style.css, sticky in edit mode -
   do not override its position here) */

.theme-booking .site-nav {
  background: rgba(10, 10, 10, 0.82);
}

/* ---- Rules in style.css that hard-code light colours ----
   (.hero / .page-header / .section-alt derive from the tokens above and need no
   override; style.css makes them translucent when a backdrop image is set) */

.theme-booking .hero-decoration-1 {
  background: var(--color-primary-subtle);
  opacity: 0.35;
}

.theme-booking .hero-decoration-2 {
  background: var(--color-primary);
  opacity: 0.15;
}

.theme-booking .hero h1,
.theme-booking .page-header h1,
.theme-booking .section-title,
.theme-booking .about-content h2 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.theme-booking .hero-badge {
  background: var(--color-primary-light);
  border-color: var(--color-primary-subtle);
  color: var(--color-primary-hover);
}

.theme-booking .nav-logo {
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* The booking logo is squarer (~2.7:1) than the business one (~4.3:1), so at the
   same height it renders much narrower; give it more of the 6rem bar. */
.theme-booking .nav-logo-img {
  --nav-logo-height: 5.25rem;
}

.theme-booking .nav-links a::after {
  background: var(--color-primary);
}

.theme-booking .nav-toggle span {
  background: var(--color-text);
}

.theme-booking .service-card,
.theme-booking .portfolio-card,
.theme-booking .contact-form,
.theme-booking .contact-form-editor-target {
  background: rgba(22, 22, 22, 0.92);
}

.theme-booking .service-card:hover,
.theme-booking .portfolio-card:hover {
  border-color: var(--color-primary);
}

.theme-booking .filter-btn.active {
  color: #FFFFFF;
}

.theme-booking .form-group input,
.theme-booking .form-group textarea {
  background: #0F0F0F;
  color: var(--color-text);
}

.theme-booking .form-group input:focus,
.theme-booking .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(227, 36, 43, 0.35);
}

.theme-booking .contact-form-message {
  background: var(--color-primary-light);
  border-color: var(--color-primary-subtle);
}

.theme-booking .footer {
  background: #050505;
  border-top: 1px solid var(--color-border);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .theme-booking .nav-links {
    background: rgba(10, 10, 10, 0.97);
  }
}