/* === HEADER BACKGROUND === */
.site-header {
  background: url("https://namasteelite.com/wp-content/uploads/2025/08/ChatGPT-Image-Aug-11-2025-04_46_23-PM.png")
              no-repeat center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  min-height: 400px;
  position: relative;
  z-index: 0;
}

/* === REMOVE OVERLAYS / FADE === */
.site-header:before,
.site-header:after,
.custom-header:before,
.custom-header:after,
.custom-header-media:before,
.custom-header-media:after,
.wp-custom-header:before,
.wp-custom-header:after {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* === ENSURE IMAGE FULL STRENGTH === */
.custom-header-media img,
.wp-custom-header img,
.site-header img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* === TEXT STYLING (white + shadow for readability) === */
.site-title,
.site-description,
.site-header h1,
.site-header h2,
.site-header h3,
.site-header h4,
.site-header h5,
.site-header h6,
.site-header p,
.site-header a {
  color: #ffffff !important;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

/* === NAVIGATION LINKS === */
.site-header nav a {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
}

/* === NAVIGATION HOVER / ACTIVE === */
.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a:active,
.site-header nav .current-menu-item > a {
  color: #ffcc00 !important; /* gold highlight */
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

/* === LOGO BACKGROUND BLOCK === */
.custom-logo {
  position: relative;
  z-index: 2;
  padding: 10px 15px; /* space around logo */
  background: rgba(0, 0, 0, 0.35); /* faint dark block */
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.4s ease, background 0.4s ease;
}

.custom-logo:hover {
  transform: scale(1.05) rotate(1deg);
  background: rgba(0, 0, 0, 0.5);
}

/* === RESPONSIVE LOGO SIZE (if you’re using #ne-search area) === */
#ne-search .logo {
  height: 100px;
  object-fit: contain;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  #ne-search .logo { height: 70px; }
}
@media (max-width: 480px) {
  #ne-search .logo { height: 60px; }
}

/* =========================================================
   DROP-IN + RE-TRIGGER ANIMATIONS
   Works with JS below; still animates on first load even without it.
   ========================================================= */

/* Keyframes */
@keyframes neDropIn {
  0%   { opacity: 0; transform: translateY(-60px) scale(0.95); }
  60%  { opacity: 1; transform: translateY(10px)  scale(1.02); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes neFadeUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 1) Targets: cover common WP/Apostrophe 2 markup */
.site-header img.custom-logo,
.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a,
.site-header .site-branding .site-description,
.site-header .site-title,
.site-header .site-title a,
.site-header .site-description,
.site-header h1,
.site-header h2,
.site-header nav a {
  opacity: 0;               /* hidden until animated */
  transform: translateY(20px);
  will-change: transform, opacity;
}

/* 2) Base animation on first load (no JS needed) */
.site-header img.custom-logo,
.site-header .custom-logo,
.site-header .custom-logo-link img {
  animation: neDropIn 0.9s ease-out forwards;
}
.site-header .site-branding .site-title,
.site-header .site-title,
.site-header .site-title a,
.site-header h1 {
  animation: neDropIn 1s ease-out 0.12s forwards;
}
.site-header .site-branding .site-description,
.site-header .site-description,
.site-header h2 {
  animation: neFadeUp 0.8s ease-out 0.28s forwards;
}
/* Optional nice touch: stagger nav items */
.site-header nav a { animation: neFadeUp 0.6s ease-out 0.45s forwards; }
.site-header nav a:nth-child(2) { animation-delay: 0.55s; }
.site-header nav a:nth-child(3) { animation-delay: 0.65s; }
.site-header nav a:nth-child(4) { animation-delay: 0.75s; }
.site-header nav a:nth-child(5) { animation-delay: 0.85s; }

/* 3) Re-trigger state (added/removed by JS on scroll) */
.site-header.ne-inview img.custom-logo,
.site-header.ne-inview .custom-logo,
.site-header.ne-inview .custom-logo-link img {
  animation: neDropIn 0.8s ease-out forwards;
}
.site-header.ne-inview .site-branding .site-title,
.site-header.ne-inview .site-title,
.site-header.ne-inview .site-title a,
.site-header.ne-inview h1 {
  animation: neDropIn 0.9s ease-out 0.12s forwards;
}
.site-header.ne-inview .site-branding .site-description,
.site-header.ne-inview .site-description,
.site-header.ne-inview h2 {
  animation: neFadeUp 0.75s ease-out 0.26s forwards;
}
.site-header.ne-inview nav a { animation: neFadeUp 0.6s ease-out 0.4s forwards; }
.site-header.ne-inview nav a:nth-child(2) { animation-delay: 0.5s; }
.site-header.ne-inview nav a:nth-child(3) { animation-delay: 0.6s; }
.site-header.ne-inview nav a:nth-child(4) { animation-delay: 0.7s; }
.site-header.ne-inview nav a:nth-child(5) { animation-delay: 0.8s; }

/* 4) Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-header img.custom-logo,
  .site-header .custom-logo,
  .site-header .custom-logo-link img,
  .site-header .site-branding .site-title,
  .site-header .site-branding .site-title a,
  .site-header .site-branding .site-description,
  .site-header .site-title,
  .site-header .site-title a,
  .site-header .site-description,
  .site-header h1,
  .site-header h2,
  .site-header nav a {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
xxxxxxxxxxxxxxxxxxxxxxxxx

/* === LUXURY GRADIENT OVERLAY === */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255,204,0,0.25) 0%, rgba(0,0,0,0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Ensure header content sits above overlay */
.site-header > * {
  position: relative;
  z-index: 2;
}

/* === NAVIGATION UNDERLINE HOVER === */
.site-header nav a {
  position: relative;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: #ffcc00;
  transition: width 0.3s ease;
}
.site-header nav a:hover::after {
  width: 100%;
}

/* === LOGO SOFT GOLD GLOW === */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 10px rgba(255,204,0,0.15); }
  50%  { box-shadow: 0 0 20px rgba(255,204,0,0.35); }
  100% { box-shadow: 0 0 10px rgba(255,204,0,0.15); }
}

.custom-logo {
  animation: glowPulse 4s infinite ease-in-out;
  transition: transform 0.4s ease, height 0.4s ease;
}

/* === SCROLL SHRINK HEADER === */
.site-header {
  transition: min-height 0.4s ease, padding 0.4s ease;
}

.site-header.scrolled {
  min-height: 280px;   /* smaller header on scroll */
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header.scrolled .custom-logo {
  transform: scale(0.85);   /* shrink smoothly */
}
/* Full dark footer */
.site-footer, .site-footer .widget { 
  background: #111 !important; 
  color: #ddd !important; 
}

/* Headings */
.ne-h { 
  font-size: .9rem; 
  text-transform: uppercase; 
  letter-spacing: .05em; 
  margin: 0 0 1rem; 
  color: #eee; 
}

/* Links */
.ne-list { list-style: none; margin: 0; padding: 0; }
.ne-list li { margin: .5rem 0; }
.ne-link { 
  display: inline-flex; 
  align-items: center; 
  gap: .5rem; 
  color: #bbb; 
  text-decoration: none; 
  font-size: .9rem; 
  transition: color .2s; 
}
.ne-link:hover { color: #fff; }

/* Contact icons */
.ne-ico { width: 16px; height: 16px; fill: currentColor; }

/* Socials */
.ne-socials { display: flex; gap: .6rem; margin-bottom: 1rem; }
.ne-social { 
  width: 34px; height: 34px; border-radius: 50%; 
  display: flex; align-items: center; justify-content: center; 
  background: #1a1a1a; color: #aaa; 
  transition: background .2s, color .2s, transform .15s; 
}
.ne-social:hover { background: #333; color: #fff; transform: translateY(-2px); }
.ne-social-ico { width: 16px; height: 16px; fill: currentColor; }

/* Branding + slogan */
.ne-credits { text-align: center; margin-top: 1.5rem; }
.ne-brand { font-size: 1rem; color: #fff; margin: 0; }
.ne-sub { font-weight: 400; }
.ne-tag { font-size: .9rem; color: #aaa; margin: .3rem 0; }
.ne-slogan { font-size: .9rem; color: #ccc; font-style: italic; margin: .3rem 0 1rem; }
.ne-copy { font-size: .8rem; color: #777; margin: 0; }


facebook

/* Compact Facebook feed in footer */
#cff {
  max-width: 340px;       /* keeps it narrow for footer */
  margin: 0 auto;         /* center it */
  font-size: 14px;        /* smaller text */
  line-height: 1.4;
}

#cff .cff-item {
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

#cff .cff-post-text {
  font-size: 13px;
  color: #333;
  margin-bottom: 8px;
}

#cff .cff-photo img {
  border-radius: 6px;
  margin-top: 6px;
}

#cff .cff-date {
  font-size: 12px;
  color: #888;
}

/* Hide Smash Balloon footer branding if it appears */
#cff .cff-powered-by {
  display: none !important;
}


[custom-facebook-feed feed=1 num=2 showheader=false showlikebox=false showbutton=false]