/* ================================================================
   MAYER GERMANY TEX — MODERN TEXTILE VISUAL SYSTEM
   Inspired by the user's textile reference image.

   Palette
   Cream canvas       #FDFBF7
   White content      #FFFFFF
   Forest Green       #276749
   Deep Bronze        #8A795D
   Dark Charcoal      #2D3748
   Wheat              #F5DEB3
   Soft Taupe         #E2D9C9

   IMPORTANT: visual styling only. Existing HTML structure,
   product data, language system and interactions are preserved.
   ================================================================ */

:root {
  --mt-cream: #FDFBF7;
  --mt-white: #FFFFFF;
  --mt-green: #276749;
  --mt-green-dark: #20563C;
  --mt-bronze: #8A795D;
  --mt-charcoal: #2D3748;
  --mt-muted: #59636F;
  --mt-wheat: #F5DEB3;
  --mt-taupe: #E2D9C9;
  --mt-soft: #F7F3EA;
  --mt-green-soft: rgba(39,103,73,.08);
  --mt-bronze-soft: rgba(138,121,93,.12);
  --mt-shadow: 0 12px 30px rgba(45,55,72,.08);
  --mt-shadow-hover: 0 20px 42px rgba(45,55,72,.13);
}

html, body {
  background: var(--mt-cream) !important;
  color: var(--mt-charcoal) !important;
}

body {
  font-family: 'Inter', sans-serif !important;
  overflow-x: hidden;
}

::selection {
  background: var(--mt-green) !important;
  color: var(--mt-white) !important;
}

::-webkit-scrollbar-track { background: var(--mt-cream) !important; }
::-webkit-scrollbar-thumb {
  background: var(--mt-bronze) !important;
  border-radius: 8px;
}

/* ================================================================
   HEADER — natural textile brand frame
   ================================================================ */
html body header.site-header,
html body .site-header,
html body header.nav-blur,
html body .nav-blur {
  background: rgba(39,103,73,.98) !important;
  background-color: var(--mt-green) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(245,222,179,.42) !important;
  box-shadow: 0 6px 22px rgba(39,103,73,.16) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.site-header .header-container {
  min-height: 82px;
}

.site-header .header-logo,
.site-header .logo,
.site-header img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .header-logo {
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.18)) !important;
}

.site-header .nav-link,
.nav-blur .nav-link,
.site-header #menuToggle {
  color: rgba(255,255,255,.88) !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.active,
.nav-blur .nav-link:hover,
.nav-blur .nav-link.active {
  color: var(--mt-white) !important;
}

.site-header .nav-link::after,
.nav-blur .nav-link::after {
  background: var(--mt-wheat) !important;
  height: 2px !important;
}

.site-header .language-switcher,
.nav-blur .language-switcher {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.site-header .lang-btn,
.nav-blur .lang-btn {
  color: rgba(255,255,255,.84) !important;
}

.site-header .lang-btn.active,
.nav-blur .lang-btn.active {
  background: var(--mt-bronze) !important;
  color: var(--mt-white) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.16) !important;
}

#mobileMenu,
.site-header #mobileMenu,
.nav-blur #mobileMenu {
  background: var(--mt-green) !important;
  border-top: 1px solid rgba(245,222,179,.25) !important;
}

/* ================================================================
   GLOBAL SECTION LANGUAGE
   ================================================================ */
#hero,
#about,
#products,
#production,
#quality,
.facilities-section,
.partners-section,
#cta {
  color: var(--mt-charcoal) !important;
}

#about,
#products,
#production,
#quality,
.facilities-section,
.partners-section {
  border-color: var(--mt-taupe) !important;
}

/* ================================================================
   HERO — warm cream textile canvas
   ================================================================ */
#hero,
.hero-gradient {
  background:
    radial-gradient(circle at 82% 20%, rgba(39,103,73,.07), transparent 25%),
    radial-gradient(circle at 12% 72%, rgba(245,222,179,.28), transparent 30%),
    linear-gradient(145deg, #FFFFFF 0%, #FDFBF7 54%, #F7F3EA 100%) !important;
  color: var(--mt-charcoal) !important;
}

#hero h1,
#hero .text-white {
  color: var(--mt-charcoal) !important;
}

#hero p,
#hero .text-indigo-200\/70,
#hero .text-indigo-300\/50 {
  color: var(--mt-muted) !important;
}

#hero .text-indigo-300,
#hero [class*="text-indigo"] {
  color: var(--mt-green) !important;
}

#hero .bg-white\/5 {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--mt-taupe) !important;
}

.hero-video-container {
  background: var(--mt-white) !important;
  border: 1px solid var(--mt-taupe) !important;
  box-shadow: var(--mt-shadow-hover) !important;
}

/* Primary and secondary actions: green + bronze, no neon gradients. */
.btn-primary,
button[type="submit"],
.cta-button {
  background: var(--mt-green) !important;
  background-image: none !important;
  color: var(--mt-white) !important;
  border: 1px solid var(--mt-green) !important;
  box-shadow: 0 8px 20px rgba(39,103,73,.18) !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.cta-button:hover {
  background: var(--mt-green-dark) !important;
  transform: translateY(-2px);
}

.btn-outline {
  color: var(--mt-green) !important;
  background: var(--mt-white) !important;
  border: 1px solid var(--mt-bronze) !important;
}

.btn-outline:hover {
  background: var(--mt-bronze-soft) !important;
  color: var(--mt-green-dark) !important;
}

.marquee-container {
  background: rgba(39,103,73,.94) !important;
  border-color: rgba(245,222,179,.35) !important;
  backdrop-filter: blur(8px) !important;
}

.marquee-item { color: var(--mt-white) !important; text-shadow: none !important; }
.marquee-item i { color: var(--mt-wheat) !important; }

/* ================================================================
   ABOUT / STATS
   ================================================================ */
#about {
  background: linear-gradient(180deg, var(--mt-white) 0%, var(--mt-cream) 100%) !important;
}

#about .text-white,
#about h1,
#about h2,
#about h3,
#about h4 {
  color: var(--mt-charcoal) !important;
}

#about .text-slate-400,
#about .text-indigo-200\/70,
#about p {
  color: var(--mt-muted) !important;
}

#about .text-indigo-400,
#about [class*="text-indigo"] {
  color: var(--mt-bronze) !important;
}

.stat-number {
  background: none !important;
  color: var(--mt-green) !important;
  -webkit-text-fill-color: var(--mt-green) !important;
}

.stat-label { color: var(--mt-bronze) !important; }

.glass-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--mt-taupe) !important;
  box-shadow: var(--mt-shadow) !important;
  backdrop-filter: none !important;
}

/* ================================================================
   PRODUCTS — premium catalogue, white cards on warm canvas
   ================================================================ */
#products {
  background: linear-gradient(180deg, var(--mt-cream) 0%, var(--mt-white) 100%) !important;
}

#products h1,
#products h2,
#products h3,
#products h4,
#products .text-white {
  color: var(--mt-charcoal) !important;
}

#products p,
#products .text-slate-400 {
  color: var(--mt-muted) !important;
}

#products .section-header .subtitle,
#products .text-indigo-400 {
  color: var(--mt-bronze) !important;
}

.product-card {
  background: var(--mt-white) !important;
  border: 1px solid var(--mt-taupe) !important;
  box-shadow: 0 10px 26px rgba(45,55,72,.07) !important;
  border-radius: 16px !important;
}

.product-card:hover {
  border-color: rgba(39,103,73,.30) !important;
  box-shadow: var(--mt-shadow-hover) !important;
}

.product-card .p-4 { background: var(--mt-white) !important; }
.product-card .text-white { color: var(--mt-charcoal) !important; }
.product-card .text-slate-400 { color: var(--mt-muted) !important; }

.product-card-img {
  background: var(--mt-soft) !important;
}

.product-tag {
  background: var(--mt-green-soft) !important;
  color: var(--mt-green) !important;
  border: 1px solid rgba(39,103,73,.18) !important;
}

.filter-btn {
  color: var(--mt-charcoal) !important;
  background: var(--mt-white) !important;
  border: 1px solid var(--mt-taupe) !important;
}

.filter-btn:hover {
  color: var(--mt-green) !important;
  background: var(--mt-soft) !important;
  border-color: var(--mt-bronze) !important;
}

.filter-btn.active {
  background: var(--mt-green) !important;
  color: var(--mt-white) !important;
  border-color: var(--mt-green) !important;
  box-shadow: 0 7px 18px rgba(39,103,73,.18) !important;
}

/* ================================================================
   PRODUCTION / QUALITY / FACILITIES
   ================================================================ */
#production,
#quality,
.facilities-section {
  background: linear-gradient(180deg, var(--mt-white), var(--mt-cream)) !important;
}

.section-header h2,
.section-header .text-white,
#production h2,
#quality h2 {
  color: var(--mt-charcoal) !important;
}

.section-header p,
.section-header .text-slate-400,
#production p,
#quality p {
  color: var(--mt-muted) !important;
}

.section-header .subtitle,
.timeline-dot {
  color: var(--mt-bronze) !important;
}

.timeline-dot {
  background: var(--mt-green) !important;
  box-shadow: 0 0 0 2px var(--mt-wheat) !important;
}

.facility-slider-card {
  background: var(--mt-white) !important;
  border: 1px solid var(--mt-taupe) !important;
  box-shadow: var(--mt-shadow) !important;
}

.slide-overlay {
  background: linear-gradient(to top, rgba(45,55,72,.94) 15%, rgba(45,55,72,.56) 64%, transparent 100%) !important;
}

.slide-overlay h3 { color: var(--mt-white) !important; }
.slide-overlay p { color: var(--mt-wheat) !important; }

/* ================================================================
   PARTNERS / CLIENTS — frameless, clean, premium
   ================================================================ */
.partners-section,
body > div.py-8.bg-\[\#FDFBF7\] {
  background: var(--mt-white) !important;
  border-top: 1px solid var(--mt-taupe) !important;
  border-bottom: 1px solid var(--mt-taupe) !important;
}

.partners-section h2,
body > div.py-8.bg-\[\#FDFBF7\] h2 {
  color: var(--mt-charcoal) !important;
}

.partners-section .text-indigo-400,
body > div.py-8.bg-\[\#FDFBF7\] .text-indigo-400 {
  color: var(--mt-bronze) !important;
}

.client-logo-marquee {
  padding: 14px 0 22px !important;
}

.client-logo-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.client-logo-card img {
  filter: drop-shadow(0 5px 5px rgba(45,55,72,.13)) !important;
}

.client-logo-card:hover img {
  filter: drop-shadow(0 10px 8px rgba(45,55,72,.17)) !important;
}

/* ================================================================
   CONTACT / INQUIRY — white form card on cream
   ================================================================ */
#cta,
.cta-gradient {
  background:
    radial-gradient(circle at 80% 15%, rgba(39,103,73,.07), transparent 24%),
    linear-gradient(145deg, var(--mt-cream) 0%, var(--mt-white) 100%) !important;
  color: var(--mt-charcoal) !important;
  border-top: 1px solid var(--mt-taupe) !important;
}

#cta h2,
#cta .text-white {
  color: var(--mt-charcoal) !important;
}

#cta p,
#cta .text-indigo-200\/70,
#cta .text-indigo-300 {
  color: var(--mt-muted) !important;
}

#cta .form-label {
  color: var(--mt-charcoal) !important;
}

#cta .form-input,
#cta .form-select,
#cta .form-textarea {
  background: var(--mt-white) !important;
  color: var(--mt-charcoal) !important;
  border: 1px solid var(--mt-taupe) !important;
  box-shadow: inset 0 1px 2px rgba(45,55,72,.03) !important;
}

#cta .form-input:focus,
#cta .form-select:focus,
#cta .form-textarea:focus {
  border-color: var(--mt-green) !important;
  box-shadow: 0 0 0 3px rgba(39,103,73,.10) !important;
}

#cta .form-input::placeholder,
#cta .form-textarea::placeholder {
  color: #8A929A !important;
}

#cta .btn-primary {
  background: var(--mt-green) !important;
  color: var(--mt-white) !important;
}

/* ================================================================
   FOOTER — same forest-green family as header
   ================================================================ */
html body footer,
html body .site-footer {
  background: var(--mt-green) !important;
  background-image: none !important;
  color: var(--mt-white) !important;
  border-top: 1px solid rgba(245,222,179,.42) !important;
}

footer .text-white { color: var(--mt-white) !important; }
footer .text-slate-400,
footer .text-slate-500,
footer .text-indigo-200\/70 {
  color: rgba(255,255,255,.72) !important;
}

footer h5 {
  color: var(--mt-wheat) !important;
}

.footer-link {
  color: rgba(255,255,255,.86) !important;
}

.footer-link:hover {
  color: var(--mt-wheat) !important;
}

.social-icon {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(245,222,179,.32) !important;
  color: var(--mt-white) !important;
}

.social-icon:hover {
  background: var(--mt-bronze) !important;
  color: var(--mt-white) !important;
  border-color: var(--mt-bronze) !important;
}

footer .border-t,
footer .border-white\/5 {
  border-color: rgba(245,222,179,.22) !important;
}

footer .location-text {
  color: var(--mt-white) !important;
}

footer .content-logo {
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.18)) !important;
}

/* Footer map: keep it readable without introducing a new palette. */
footer .bg-\[\#FFFFFF\],
footer .bg-\[\#FDFBF7\] {
  background: rgba(255,255,255,.96) !important;
}

footer .text-indigo-400 { color: var(--mt-green) !important; }

/* ================================================================
   LIGHTBOX / MODALS — consistent surfaces
   ================================================================ */
.modal-box,
.lightbox-content {
  background: var(--mt-white) !important;
  color: var(--mt-charcoal) !important;
  border: 1px solid var(--mt-taupe) !important;
  box-shadow: 0 25px 70px rgba(45,55,72,.20) !important;
}

.modal-overlay,
.lightbox-overlay {
  background: rgba(45,55,72,.72) !important;
}

/* ================================================================
   RESPONSIVE POLISH — preserve existing layout, improve spacing only
   ================================================================ */
@media (max-width: 900px) {
  .site-header .header-container { min-height: 72px; }
}

@media (max-width: 640px) {
  .site-header .header-logo { filter: drop-shadow(0 4px 6px rgba(0,0,0,.16)) !important; }
  .product-card { border-radius: 14px !important; }
  .client-logo-card img { filter: drop-shadow(0 4px 4px rgba(45,55,72,.12)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}

/* FINAL LIGHT-BLUE HEADER + FOOTER OVERRIDE
   Header and footer intentionally share the same light-blue surface.
   This block is last so earlier theme rules cannot override it. */
:root {
  --site-light-blue: #8FCEDE;
  --site-light-blue-deep: #008BB0;
  --site-text: #10333F;
  --site-white: #FFFFFF;
  --site-cyan: #00A5CE;
}

html body header.site-header,
html body .site-header,
html body header.nav-blur,
html body .nav-blur {
  background: var(--site-light-blue) !important;
  background-color: var(--site-light-blue) !important;
  background-image: none !important;
  color: var(--site-text) !important;
  box-shadow: 0 2px 12px rgba(16,51,63,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.65) !important;
}

.site-header .header-logo,
.site-header .logo,
.site-header img {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.site-header .nav-link,
.nav-blur .nav-link,
.site-header #menuToggle {
  color: var(--site-text) !important;
  text-shadow: none !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.active,
.nav-blur .nav-link:hover,
.nav-blur .nav-link.active {
  color: var(--site-text) !important;
}

.site-header .nav-link::after,
.nav-blur .nav-link::after {
  background: var(--site-cyan) !important;
}

.site-header .language-switcher,
.nav-blur .language-switcher {
  background: rgba(255,255,255,.38) !important;
  border: 1px solid rgba(16,51,63,.18) !important;
  box-shadow: none !important;
}

.site-header .lang-btn,
.nav-blur .lang-btn {
  color: var(--site-text) !important;
}

.site-header .lang-btn.active,
.nav-blur .lang-btn.active {
  background: var(--site-cyan) !important;
  color: #FFFFFF !important;
}

.site-header #mobileMenu,
.nav-blur #mobileMenu {
  background: var(--site-light-blue) !important;
  color: var(--site-text) !important;
}

html body footer,
html body .site-footer {
  background: var(--site-light-blue) !important;
  background-color: var(--site-light-blue) !important;
  background-image: none !important;
  color: var(--site-text) !important;
  border-top: 1px solid rgba(255,255,255,.7) !important;
}

footer .text-white,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer span,
footer li,
footer a,
footer .location-text {
  color: var(--site-text) !important;
}

footer .footer-link:hover {
  color: var(--site-deep-blue, #008BB0) !important;
}

footer .social-link,
footer .social-icon,
footer .social-links a {
  color: var(--site-text) !important;
  border-color: rgba(16,51,63,.20) !important;
  background: rgba(255,255,255,.34) !important;
}

footer .social-link:hover,
footer .social-icon:hover,
footer .social-links a:hover {
  color: #FFFFFF !important;
  background: var(--site-light-blue-deep) !important;
  border-color: var(--site-light-blue-deep) !important;
}

footer .border-t,
footer .border-white\/5 {
  border-color: rgba(16,51,63,.14) !important;
}

footer .text-indigo-400,
footer i {
  color: var(--site-light-blue-deep) !important;
}

/* Keep the logo itself frameless and visually clean on the light-blue surface. */
.site-header .header-logo::before,
.site-header .header-logo::after,
.site-header .logo::before,
.site-header .logo::after,
footer .content-logo::before,
footer .content-logo::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px) {
  .site-header .language-switcher,
  .nav-blur .language-switcher {
    background: rgba(255,255,255,.48) !important;
  }
}