/* ==========================================================
   FAYOTA LTD - FINAL READABLE HOVER FIX
   Place this CSS LAST after style.css, gold-moodboard.css,
   gold-hover-final-fix.css and gold-logo-visibility-fix.css
   ========================================================== */

:root{
  --fy-dark:#11100c;
  --fy-ink:#17130b;
  --fy-muted:#665f53;
  --fy-gold:#c89218;
  --fy-gold-2:#e7bf58;
  --fy-soft:#fffaf0;
  --fy-card:#ffffff;
  --fy-card-hover:#fff6df;
  --fy-border:rgba(200,146,24,.26);
  --fy-shadow:0 22px 55px rgba(17,16,12,.12);
}

/* Kill the old red/pink template overlay but keep a gold hover accent */
.categories-area .single-cat,
.single-cat{
  position:relative !important;
  overflow:hidden !important;
  background:var(--fy-card) !important;
  border:1px solid var(--fy-border) !important;
  border-radius:26px !important;
  box-shadow:0 12px 35px rgba(17,16,12,.07) !important;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease !important;
}

.categories-area .single-cat::before,
.single-cat::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:0 !important;
  background:linear-gradient(135deg, rgba(231,191,88,.18), rgba(255,246,223,.86)) !important;
  z-index:0 !important;
  transition:height .35s ease !important;
  border-radius:inherit !important;
}

.categories-area .single-cat:hover,
.single-cat:hover{
  transform:translateY(-10px) !important;
  background:var(--fy-card-hover) !important;
  border-color:rgba(200,146,24,.55) !important;
  box-shadow:var(--fy-shadow) !important;
}

.categories-area .single-cat:hover::before,
.single-cat:hover::before{
  height:100% !important;
}

.categories-area .single-cat > *,
.single-cat > *{
  position:relative !important;
  z-index:2 !important;
}

/* Make card text readable on hover */
.categories-area .single-cat .cat-cap h5,
.categories-area .single-cat .cat-cap h5 a,
.single-cat .cat-cap h5,
.single-cat .cat-cap h5 a{
  color:var(--fy-ink) !important;
  transition:color .25s ease !important;
}

.categories-area .single-cat .cat-cap p,
.single-cat .cat-cap p{
  color:var(--fy-muted) !important;
  transition:color .25s ease !important;
}

.categories-area .single-cat:hover .cat-cap h5,
.categories-area .single-cat:hover .cat-cap h5 a,
.single-cat:hover .cat-cap h5,
.single-cat:hover .cat-cap h5 a{
  color:var(--fy-ink) !important;
}

.categories-area .single-cat:hover .cat-cap p,
.categories-area .single-cat:hover .cat-cap p a,
.single-cat:hover .cat-cap p,
.single-cat:hover .cat-cap p a{
  color:var(--fy-muted) !important;
}

.categories-area .single-cat .cat-cap > a,
.categories-area .single-cat .cat-cap p a,
.single-cat .cat-cap > a,
.single-cat .cat-cap p a{
  color:var(--fy-gold) !important;
  font-weight:800 !important;
}

.categories-area .single-cat:hover .cat-cap > a,
.categories-area .single-cat:hover .cat-cap p a,
.single-cat:hover .cat-cap > a,
.single-cat:hover .cat-cap p a{
  color:#9a6810 !important;
}

.categories-area .single-cat .cat-icon,
.single-cat .cat-icon{
  transition:transform .35s ease, filter .35s ease !important;
}

.categories-area .single-cat:hover .cat-icon,
.single-cat:hover .cat-icon{
  transform:translateY(-4px) scale(1.04) !important;
  filter:drop-shadow(0 10px 18px rgba(200,146,24,.22)) !important;
}

.categories-area .single-cat .cat-icon span,
.single-cat .cat-icon span{
  color:var(--fy-ink) !important;
}

/* Button hover: no more white-on-white */
.btn,
.button,
.boxed-btn,
.hero-btn,
.post-btn,
.header-cta,
a.btn,
button.btn,
button[type="submit"],
input[type="submit"],
.button-contactForm{
  background:linear-gradient(135deg, #c89218 0%, #e7bf58 52%, #b77a12 100%) !important;
  color:#11100c !important;
  border:1px solid rgba(200,146,24,.55) !important;
  box-shadow:0 12px 26px rgba(200,146,24,.22) !important;
  text-decoration:none !important;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease, border-color .28s ease !important;
}

.btn:hover,
.btn:focus,
.button:hover,
.button:focus,
.boxed-btn:hover,
.boxed-btn:focus,
.hero-btn:hover,
.hero-btn:focus,
.post-btn:hover,
.post-btn:focus,
.header-cta:hover,
.header-cta:focus,
a.btn:hover,
a.btn:focus,
button.btn:hover,
button.btn:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.button-contactForm:hover,
.button-contactForm:focus{
  background:#11100c !important;
  color:#f7d77a !important;
  border-color:#f7d77a !important;
  box-shadow:0 18px 38px rgba(17,16,12,.24) !important;
  transform:translateY(-3px) !important;
}

.btn:hover *,
.button:hover *,
.boxed-btn:hover *,
.hero-btn:hover *,
.post-btn:hover *,
.header-cta:hover *,
.button-contactForm:hover *{
  color:#f7d77a !important;
}

/* Outline / black button variants from template */
.btn-black,
.border-btn,
.black-btn{
  background:#11100c !important;
  color:#f7d77a !important;
  border:1px solid rgba(247,215,122,.7) !important;
}

.btn-black:hover,
.border-btn:hover,
.black-btn:hover{
  background:linear-gradient(135deg, #c89218 0%, #e7bf58 52%, #b77a12 100%) !important;
  color:#11100c !important;
  border-color:#c89218 !important;
}

/* Links that behave like mini-buttons inside cards */
.cat-cap a,
.blog_details a,
.footer-tittle a{
  transition:color .25s ease, opacity .25s ease !important;
}

/* Prevent old template hover from forcing white text */
.categories-area .single-cat:hover .cat-cap a,
.categories-area .single-cat:hover .cat-cap p,
.categories-area .single-cat:hover .cat-cap h5,
.categories-area .single-cat:hover .cat-cap h5 a{
  color:inherit;
}

.categories-area .single-cat:hover .cat-cap h5,
.categories-area .single-cat:hover .cat-cap h5 a{ color:var(--fy-ink) !important; }
.categories-area .single-cat:hover .cat-cap p{ color:var(--fy-muted) !important; }
.categories-area .single-cat:hover .cat-cap a{ color:#9a6810 !important; }

/* Mobile: keep hover effects gentle */
@media (max-width: 767px){
  .categories-area .single-cat:hover,
  .single-cat:hover{
    transform:translateY(-4px) !important;
  }
}