/* =========================================================
   FAYOTA LTD — LOGO VISIBILITY FIX
   Purpose: Make the white Fayota logo readable on light/white
   header backgrounds without changing the logo file.
   Load this CSS LAST, after style.css, gold-moodboard.css and
   gold-hover-final-fix.css.
========================================================= */

:root {
  --fayota-black: #070604;
  --fayota-gold: #d6a53a;
  --fayota-gold-soft: #f3dd9a;
  --fayota-cream: #fffaf0;
}

/* Give the logo a premium dark badge so white text is visible */
.header-area .logo a,
.main-header .logo a,
.header-bottom .logo a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at 20% 15%, rgba(214, 165, 58, 0.28), transparent 36%),
              linear-gradient(135deg, #050403 0%, #151008 52%, #050403 100%) !important;
  border: 1px solid rgba(214, 165, 58, 0.58) !important;
  border-radius: 18px !important;
  padding: 8px 14px !important;
  box-shadow: 0 16px 35px rgba(7, 6, 4, 0.18),
              inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.header-area .logo a:hover,
.main-header .logo a:hover,
.header-bottom .logo a:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(243, 221, 154, 0.92) !important;
  box-shadow: 0 20px 45px rgba(7, 6, 4, 0.24),
              0 0 0 4px rgba(214, 165, 58, 0.08),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Keep logo size controlled and crisp */
.header-area .logo img,
.main-header .logo img,
.header-bottom .logo img {
  display: block !important;
  width: auto !important;
  max-width: 210px !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

/* Desktop spacing so the badge does not crowd the menu */
@media (min-width: 992px) {
  .header-bottom .logo a {
    min-width: 190px !important;
  }

  .header-bottom .logo img {
    max-width: 190px !important;
    max-height: 54px !important;
  }
}

/* Mobile: compact badge */
@media (max-width: 991px) {
  .header-bottom .logo a,
  .main-header .logo a {
    border-radius: 14px !important;
    padding: 7px 11px !important;
  }

  .header-bottom .logo img,
  .main-header .logo img {
    max-width: 165px !important;
    max-height: 46px !important;
  }
}

@media (max-width: 360px) {
  .header-bottom .logo img,
  .main-header .logo img {
    max-width: 138px !important;
    max-height: 42px !important;
  }
}