/* Small, low-risk visual & accessibility tweaks for An Dưỡng SPA
   - Improve nav glass fallback and subtle shadow
   - Responsive hero image heights
   - Focus-visible outlines for keyboard users
   - Button and link smoothing
   - Lazy-loading helper (informational)
*/

:root{
  --primary:#C19A6B;
  --accent:#E6B8A2;
  --bg-light:#FFFAF8;
}

/* Ensure anchor scrolling and focus aren't hidden behind the fixed nav */
html{scroll-padding-top:5rem}

/* Nav glass refinement */
nav.glass-effect{
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.dark nav.glass-effect{
  background: rgba(20,18,16,0.7);
}

/* Slight shadow for depth */
nav.glass-effect{
  box-shadow: 0 6px 18px rgba(15,15,15,0.05);
}

/* Make header hero image responsive with max heights so it behaves better on small viewports */
#header img.object-cover{
  height: 300px; /* mobile default */
  max-height: 60vh;
}

@media (min-width: 640px){
  #header img.object-cover{
    height: 420px;
  }
}
@media (min-width: 1024px){
  #header img.object-cover{
    height: 520px;
  }
}

/* Focus styles for accessibility */
:focus{
  outline: none;
}
:focus-visible{
  outline: 3px solid rgba(193,154,107,0.18);
  outline-offset: 3px;
}

/* Buttons and links smoothing */
a,button{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utility: subtle hover for primary buttons */
.bg-primary:hover, .bg-primary:focus{
  transform: translateY(-2px);
}

/* Small card for hero badge positioning fix on very small screens */
#header > .max-w-7xl .absolute.-bottom-6{
  position: absolute;
}
@media (max-width: 560px){
  #header > .max-w-7xl .absolute.-bottom-6{
    position: static;
    margin-top: 1rem;
  }
}

/* Helpful note: add loading="lazy" to gallery images (do not lazyload hero). */
/* Example: <img src="..." loading="lazy" alt="..."> */

/* ------------------------
   Luxury design tokens
   ------------------------ */
:root{
  --lux-gold: #C19A6B;
  --lux-rose: #E6B8A2;
  --lux-ivory: #FFF8F3;
  --lux-deep: #1A1614;
  --lux-muted: rgba(26,22,20,0.65);
}

/* Fluid typography for headings */
h1.lux-headline{font-family: "Playfair Display", serif; font-weight:700; color:var(--lux-deep); line-height:1.02; font-size:clamp(1.8rem, 3.6vw + 0.5rem, 3.4rem)}
h2.lux-subhead{font-family: "Playfair Display", serif; font-weight:600; color:var(--lux-deep); font-size:clamp(1.15rem, 2.2vw + 0.3rem, 1.6rem)}

/* Luxury card */
.card-luxury{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.82));
  border: 1px solid rgba(193,154,107,0.12);
  box-shadow: 0 10px 30px rgba(26,22,20,0.06);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.dark .card-luxury{
  background: linear-gradient(180deg, rgba(20,18,16,0.7), rgba(20,18,16,0.6));
  border: 1px solid rgba(255,255,255,0.03);
}

/* Luxury CTA */
.luxury-cta{
  display:inline-block;
  background: linear-gradient(90deg, var(--lux-gold), var(--lux-rose));
  color: #fff;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(193,154,107,0.14);
  font-weight:600;
  text-decoration:none;
}
.luxury-cta:focus{outline: 3px solid rgba(230,184,162,0.16); outline-offset:3px}

/* Small utility to slightly desaturate images for an elegant look */
.img-soft{filter: saturate(0.94) contrast(0.98);}

/* Minor responsive tweak for hero badge spacing when luxury tokens are in use */
@media (max-width:560px){
  .card-luxury{padding:0.85rem}
}