/*
Theme Name: Lux Building & Maintenance
Theme URI: https://www.luxbuildingmaintenance.co.uk
Author: Lux Building & Maintenance
Description: Custom WordPress theme for Lux Building & Maintenance — multi-trade commercial and domestic building & maintenance services. Built with Tailwind CSS.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: lux
*/

/*
 * Visual layer for the supplied reference design.
 * Tailwind still provides the layout utilities; these rules provide the
 * photographic treatment, exact palette, and small-screen proportions.
 */
:root {
  --lux-navy: #071a2c;
  --lux-navy-deep: #031321;
  --lux-gold: #d6a329;
  --lux-gold-light: #e8bd45;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Static fallbacks keep the brand palette working even if the optional
   Tailwind Play CDN is delayed or blocked by a cache/security plugin. */
.bg-gold { background-color: #d6a329 !important; }
.bg-gold-light:hover { background-color: #e8bd45 !important; }
.bg-gold-dark { background-color: #b78620 !important; }
.text-gold { color: #d6a329 !important; }
.bg-navy { background-color: #071a2c !important; }
.bg-navy-deep { background-color: #031321 !important; }
.text-navy { color: #071a2c !important; }
.text-navy-deep { color: #031321 !important; }

.lux-brand { min-width: 190px; }
.lux-brand img { max-height: 58px; width: auto; }

.lux-hero {
  background-image: linear-gradient(90deg, rgba(3,19,33,.97) 0%, rgba(3,19,33,.84) 40%, rgba(3,19,33,.34) 100%), url("assets/images/hero-van.jpg");
  background-size: cover;
  background-position: center right;
}
.lux-commercial {
  background-image: linear-gradient(90deg, rgba(7,26,44,.91), rgba(7,26,44,.55)), url("assets/images/commercial.jpg");
  background-size: cover;
  background-position: center;
}
.lux-domestic {
  background-image: linear-gradient(90deg, rgba(246,240,224,.90), rgba(246,240,224,.48)), url("assets/images/domestic.jpg");
  background-size: cover;
  background-position: center;
}
.lux-coverage {
  background-color: var(--lux-navy);
  background-image: none;
  background-size: cover;
  background-position: center;
}
.lux-map {
  float: left;
  width: 125px;
  height: 155px;
  object-fit: contain;
  margin: -18px 22px -8px -12px;
  opacity: .95;
}

/* Keep the reference's compact, dense mobile composition. */
@media (max-width: 639px) {
  .lux-brand { min-width: 0; }
  header .bg-navy-deep > div { padding-top: 12px; padding-bottom: 12px; }
  .lux-hero > div:nth-child(2) { padding-top: 34px; padding-bottom: 22px; }
  .lux-hero h1 { font-size: 30px; line-height: 1.03; }
  .lux-hero p { font-size: 11px; }
  .lux-hero .mt-8 { margin-top: 14px; }
  .lux-hero .mt-8 a { padding: 8px 11px; font-size: 10px; }
  .lux-hero > div:last-child { padding-bottom: 0; }
  .lux-hero > div:last-child > div { grid-template-columns: 1fr 1fr; }
  .lux-hero > div:last-child > div > div:first-child { grid-column: 1 / -1; }
  .lux-hero > div:last-child > div > div { padding: 12px; }
  .lux-hero > div:last-child > div h3 { font-size: 10px; }
  .lux-hero > div:last-child > div p { font-size: 9px; }
  .lux-hero > div:last-child > div + div { padding: 8px 10px; }
  .lux-hero > div:last-child > div + div a { font-size: 18px; }
  section.bg-white { padding-top: 28px; padding-bottom: 28px; }
  section.bg-white h2 { font-size: 21px; }
  section.bg-white .mt-10 { margin-top: 18px; }
  section.bg-white .mt-10 > div { padding: 13px 8px; }
  section.bg-white .mt-10 h3 { font-size: 11px; margin-top: 8px; }
  section.bg-white .mt-10 p { font-size: 9px; }
  .lux-commercial, .lux-domestic { padding-top: 25px; padding-bottom: 25px; }
  .lux-commercial h2, .lux-domestic h2 { font-size: 20px; }
  .lux-commercial p, .lux-domestic p, .lux-commercial li, .lux-domestic li { font-size: 10px; }
  .lux-commercial a, .lux-domestic a { margin-top: 14px; padding: 8px 12px; font-size: 10px; }
  .lux-coverage { padding-top: 28px; padding-bottom: 28px; }
  .lux-coverage h2 { font-size: 22px; }
  .lux-map { width: 78px; height: 112px; margin: -10px 10px -5px -6px; }
  .lux-coverage p { font-size: 10px; }
  footer .py-14 { padding-top: 25px; padding-bottom: 25px; }
}