/* ==========================================================================
   Varun's Villa — Frontend theme layer
   Loaded after the legacy bundle. Reads only from vars.css tokens.
   The legacy stylesheet stays as the structural base; this file rebrands it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bridge legacy tokens onto the new palette
   -------------------------------------------------------------------------- */

:root {
  --color-primary:         var(--color-gold);
  --color-primary-darker:  var(--color-gold-dark);
  --color-primary-lighter: var(--color-gold-light);
  --color-primary-50:      #eadcb7;
  --color-primary-25:      #f1e7ce;
  --color-primary-10:      #f6efdd;
  --color-primary-5:       #faf5ea;

  --color-secondary:       var(--color-brown);
  --color-secondary-80:    var(--color-brown-mid);
  --color-secondary-60:    #8d6a50;
  --color-secondary-40:    #b39a83;
  --color-secondary-20:    #dccfbe;
  --color-secondary-10:    #ece3d4;
  --color-secondary-5:     #f6f1e7;

  /* The logo is dark brown, so the header uses the lightest brand surface.
     A dark header would swallow the logo. */
  --bg-header:             var(--color-cream);
}

/* --------------------------------------------------------------------------
   2. Base / typography
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-light);
  color: var(--text-on-light-muted);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

.mad-page-wrapper {
  background: var(--bg-light);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-on-light);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  line-height: var(--lh-body);
}

strong, b {
  font-weight: var(--fw-semibold);
}

::selection {
  background: var(--color-gold);
  color: var(--color-brown-deep);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.mad-content a:not(.btn):not(.mad-link):not(.mad-tel),
.mad-content a:not(.btn):not(.mad-link):not(.mad-tel):visited {
  color: var(--text-accent-on-light);
}

.mad-content a:not(.btn):not(.mad-link):not(.mad-tel):hover {
  color: var(--color-brown);
}

/* --------------------------------------------------------------------------
   3. Header & navigation
   -------------------------------------------------------------------------- */

[class*="mad-header-section--sticky"] {
  z-index: var(--z-header);
}

.mad-header.header-2 [class*="mad-header-section--sticky"],
.mad-header.header-2.mad-header--transparent [class*="mad-header-section--sticky"].mad-header-section--sticked {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-light);
  min-height: var(--header-height);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.mad-header.header-2:not(.mad-header--transparent) [class*="mad-header-section--sticky"] {
  min-height: var(--header-height);
  padding: 0.75rem 0;
}

.mad-header.header-2 .mad-navigation > li > a,
.mad-header.header-2 .mad-actions .mad-col > a:not(.btn),
.mad-header.header-2 .mad-actions .mad-col > button:not(.btn),
.mad-header.header-2 .mad-our-info .mad-info {
  color: var(--text-on-light);
}

.mad-header.header-2 .mad-navigation > li > a::before {
  background: var(--color-gold);
}

.mad-navigation > li > a {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}

.mad-header.header-2 .mad-navigation > li:hover > a,
.mad-header.header-2 .mad-navigation > li.current-menu-item > a,
.mad-header.header-2 .mad-navigation > li.current-menu-ancestor > a,
.mad-header.header-2 .mad-navigation > li.current-menu-parent > a,
.mad-header.header-2 .mad-actions .mad-col > a:not(.btn):hover {
  color: var(--color-brown);
}

.mad-header.header-2 .mad-navigation > li.menu-item-has-children:after {
  color: var(--text-on-light);
}

.mad-header.header-2 .mad-logo img {
  max-height: 52px;
  width: auto;
}

.mad-navigation .sub-menu {
  background-color: var(--color-cream);
  border-top: 2px solid var(--color-gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-card);
}

.mad-navigation .sub-menu a:not(.btn) {
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

.mad-navigation .sub-menu a:not(.btn):hover {
  color: var(--text-accent-on-light);
}

.mad-navigation .sub-menu .sub-menu {
  background: var(--color-cream-dark);
}

/* --------------------------------------------------------------------------
   4. Hero slider
   -------------------------------------------------------------------------- */

#slider {
  position: relative;
  overflow: hidden;
}

#slider .owl-carousel {
  position: relative;
  z-index: 1;
}

#slider .mad-col img {
  display: block;
  width: 100%;
  height: clamp(320px, 62vh, 640px);
  object-fit: cover;
}

#slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg-hero-overlay);
  pointer-events: none;
}

#slider .owl-nav {
  z-index: 3;
}

/* --------------------------------------------------------------------------
   5. Sections & titles
   -------------------------------------------------------------------------- */

.mad-content {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.mad-content.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mad-content.py-3 {
  padding-top: var(--space-7) !important;
  padding-bottom: var(--space-7) !important;
}

.mad-section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.mad-section.small-size {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.mad-section.medium-size {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.mad-colorizer--scheme-color-7 > .mad-colorizer-bg-color {
  background: var(--bg-light);
}

.mad-pre-title,
.mad-entities .mad-entity .mad-entity-pre-title {
  color: var(--text-accent-on-light);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.mad-pre-title:before,
.mad-entities .mad-entity .mad-entity-pre-title:before {
  background-color: var(--color-gold);
}

h2.mad-section-title,
.mad-section-title {
  color: var(--text-on-light);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.mad-section--dark,
.mad-colorizer--scheme-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.mad-section--dark h1,
.mad-section--dark h2,
.mad-section--dark h3,
.mad-section--dark h4,
.mad-colorizer--scheme-dark .mad-section-title,
.mad-colorizer--scheme-dark .mad-title {
  color: var(--text-on-dark);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--btn-gold-bg);
  color: var(--btn-gold-text);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-transform: uppercase;
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  background: var(--btn-gold-hover-bg);
  color: var(--btn-gold-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn:active {
  transform: translateY(0);
}

.btn.style-2 {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-text);
}

.btn.style-2:hover,
.btn.style-2:focus-visible {
  background: var(--btn-solid-hover-bg);
  color: var(--btn-solid-text);
}

.btn.style-3 {
  background: transparent;
  color: var(--text-accent-on-light);
  box-shadow: inset 0 0 0 1px var(--border-gold);
}

.btn.style-3:hover,
.btn.style-3:focus-visible {
  background: var(--color-gold);
  color: var(--btn-gold-text);
}

.btn.btn-disabled,
.btn.btn-disabled:hover,
.btn:disabled {
  background: var(--color-cream-dark);
  color: var(--text-on-light-muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.btn.btn-link {
  background: transparent;
  color: var(--text-accent-on-light);
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}

.btn.btn-link:hover {
  color: var(--color-brown);
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   7. Pricing / room cards
   -------------------------------------------------------------------------- */

.pricing-container {
  gap: var(--space-5);
  max-width: var(--container-max);
  margin: var(--space-6) auto;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pricing-card .card-header {
  background: var(--color-brown-deep);
  color: var(--text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-card .price {
  color: var(--text-accent-on-light);
  font-family: var(--font-heading);
  font-size: var(--fs-price);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border-light);
}

.pricing-card .per-night {
  color: var(--text-on-light-muted);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pricing-card .feature {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-on-light-muted);
}

.pricing-card .tick {
  color: var(--color-gold-dark);
}

.pricing-card .card-footer {
  border-top: 1px solid var(--border-light);
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

.mad-content input[type="text"],
.mad-content input[type="email"],
.mad-content input[type="password"],
.mad-content input[type="tel"],
.mad-content input[type="number"],
.mad-content input[type="date"],
.mad-content select,
.mad-content textarea {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.75rem 1rem;
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.mad-content input[type="text"]:focus,
.mad-content input[type="email"]:focus,
.mad-content input[type="password"]:focus,
.mad-content input[type="tel"]:focus,
.mad-content input[type="number"]:focus,
.mad-content input[type="date"]:focus,
.mad-content select:focus,
.mad-content textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 90, 0.18);
  outline: none;
}

.mad-content label {
  color: var(--text-on-light);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.help-block {
  color: #a94442 !important;
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.mad-footer.footer-3 {
  background: var(--bg-darker);
  color: var(--text-on-dark-muted);
}

/* The logo is a wide lockup. Without a cap it renders at its intrinsic
   pixel width inside the footer column. */
.mad-footer .mad-logo {
  display: inline-block;
}

.mad-footer .mad-logo img {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 72px;
}

.mad-footer.footer-3 .mad-widget-title {
  color: var(--text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
}

.mad-footer.footer-3 .mad-footer-subtitle {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
}

.mad-footer.footer-3 a,
.mad-footer.footer-3 .mad-link {
  color: var(--color-gold-light);
}

.mad-footer.footer-3 a:hover,
.mad-footer.footer-3 .mad-link:hover {
  color: var(--text-on-dark);
}

/*
 * The legacy footer-3 paints a decorative tower SVG behind the content.
 * It belongs to the old brand, so hide it in this theme.
 */
.mad-footer:not([class*="footer-"]):after,
.mad-footer.footer-3:after {
  display: none;
}

.mad-footer.footer-2 {
  background: var(--color-night);
  color: var(--text-on-dark-muted);
}

.mad-footer.footer-2 .mad-widget-title {
  color: var(--text-on-dark);
}

.mad-footer.footer-2 .copyrights,
.copyrights {
  color: var(--text-on-dark-muted);
  font-family: var(--font-body);
}

.footer-menu a {
  color: var(--text-on-dark-muted);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.footer-menu a:hover,
.footer-menu .active a {
  color: var(--text-accent);
}

.footer-menu li {
  color: var(--border-on-dark);
}

/* --------------------------------------------------------------------------
   10. Misc surfaces
   -------------------------------------------------------------------------- */

.mad-table,
.mad-table th,
.mad-table td {
  border-color: var(--border-light) !important;
}

.mad-table th {
  background: var(--color-cream-dark);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.mad-alert-box-inner {
  border-radius: var(--radius-sm);
}

.mad-preloader,
.mad-preloader-circle {
  background-color: var(--bg-light);
}

/* --------------------------------------------------------------------------
   11. Responsive adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .mad-header.header-2:not(.mad-header--transparent) [class*="mad-header-section--sticky"] {
    min-height: 0;
    padding: 0.5rem 0;
  }

  .mad-header.header-2 .mad-logo img {
    max-height: 42px;
  }

  .mad-footer .mad-logo img {
    max-width: 180px;
    max-height: 60px;
  }

  #slider .mad-col img {
    height: clamp(240px, 46vh, 420px);
  }

  .mad-content.py-3 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }
}

@media (max-width: 767px) {
  .pricing-container {
    gap: var(--space-4);
  }

  .pricing-card .card-header {
    font-size: var(--fs-h3);
  }
}