/*
Theme Name: Booking Estate Gold
Theme URI: https://example.invalid/bookingestate-gold
Description: Gold, White, Charcoal, Warm Wood and Beige brand layer for Booking Estate.
Author: Booking Estate Engineering
Template: bookingestate
Version: 1.0.0
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: bookingestate-gold
*/

/*
 * Brand direction derived from the supplied logo and luxury-property reference:
 * charcoal creates the architectural frame, beige/white hold long-form content,
 * warm wood adds depth, and gold is reserved for actions and premium details.
 */
:root {
  --brand-gold: #d2ae68;
  --brand-gold-deep: #806022;
  --brand-charcoal: #191a18;
  --brand-wood: #684a35;
  --brand-beige: #eee5d7;
  --brand-white: #fffdf8;
  --color-cream: #f4efe6;
  --color-cream-2: #e9decc;
  --color-ink: #25231f;
  --color-muted: #685f53;
  --color-accent: var(--brand-gold-deep);
  --color-accent-hover: #624716;
  --color-dark: var(--brand-charcoal);
  --color-white: var(--brand-white);
  --border-subtle: 1px solid rgb(37 35 31 / 14%);
  --shadow-card: 0 1rem 2.75rem rgb(61 44 31 / 15%);
  --shadow-modal: 0 2rem 5rem rgb(25 26 24 / 42%);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgb(210 174 104 / 7%), transparent 22rem),
    var(--color-cream);
}

::selection {
  background: var(--brand-gold);
  color: var(--brand-charcoal);
}

/* Header */
.c-site-header,
.c-site-header.is-sticky {
  border-bottom: 1px solid rgb(210 174 104 / 24%);
  background: rgb(25 26 24 / 96%);
  box-shadow: 0 0.75rem 2.25rem rgb(0 0 0 / 16%);
  backdrop-filter: blur(0.9rem);
}

.c-site-footer__logo img {
  filter: brightness(0) saturate(100%) invert(76%) sepia(37%) saturate(671%) hue-rotate(359deg) brightness(90%) contrast(88%);
}

.c-site-brand {
  display: flex;
  align-items: center;
  line-height: 0;
}

.c-site-brand__picture {
  display: block;
  line-height: 0;
}

.c-site-brand__logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
}

.c-site-brand__logo--header {
  width: clamp(10.5rem, 15vw, 12rem);
  max-height: 3.6rem;
}

.c-site-brand__logo--footer {
  width: min(17rem, 100%);
  max-height: 6.75rem;
}

.c-site-footer__identity .c-site-brand {
  margin-bottom: 1rem;
}

.c-floating-contact__action--more {
  padding: 0.28rem;
}

.c-site-brand__mark-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.c-site-footer__identity p {
  max-width: 19rem;
}

/* The Origami and Vinhomes Grand Park amenities */
.c-gold-amenities {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  background:
    radial-gradient(circle at 8% 10%, rgb(210 174 104 / 13%), transparent 24rem),
    linear-gradient(145deg, #171815 0%, #23221e 58%, #33291f 100%);
  color: var(--brand-white);
}

.c-gold-amenities::after {
  position: absolute;
  width: 24rem;
  height: 24rem;
  right: -9rem;
  bottom: -12rem;
  border: 1px solid rgb(210 174 104 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(210 174 104 / 3%), 0 0 0 8rem rgb(210 174 104 / 2%);
  content: "";
  pointer-events: none;
}

.c-gold-amenities .c-reference-kicker,
.c-gold-amenities .c-reference-title em,
.c-gold-amenities__card-heading small,
.c-gold-amenities__home small {
  color: var(--brand-gold);
}

.c-gold-amenities .c-reference-title {
  max-width: 54rem;
  color: var(--brand-white);
}

.c-gold-amenities .c-reference-subtitle {
  max-width: 47rem;
  color: #cfc6b8;
}

.c-gold-amenities__home {
  display: flex;
  margin-block: clamp(2rem, 4vw, 3.5rem) 1.25rem;
  padding: 1.4rem 1.6rem;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid rgb(210 174 104 / 24%);
  border-radius: 1rem;
  background: rgb(255 253 248 / 6%);
}

.c-gold-amenities__home-icon {
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(210 174 104 / 44%);
  border-radius: 50%;
  color: var(--brand-gold);
}

.c-gold-amenities__home-icon svg {
  width: 2rem;
  height: 2rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.c-gold-amenities__home small,
.c-gold-amenities__card-heading small {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.c-gold-amenities__home h3,
.c-gold-amenities__card h3 {
  margin: 0;
  color: var(--brand-white);
  font-family: var(--font-display);
  font-weight: 500;
}

.c-gold-amenities__home p {
  margin: 0.45rem 0 0;
  color: #cfc6b8;
}

.c-gold-amenities__grid {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.c-gold-amenities__card {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border: 1px solid rgb(210 174 104 / 18%);
  border-radius: 1rem;
  background: rgb(255 253 248 / 5%);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 13%);
}

.c-gold-amenities__card--park {
  background: linear-gradient(145deg, rgb(104 74 53 / 42%), rgb(255 253 248 / 5%));
}

.c-gold-amenities__card-heading {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: flex-start;
  gap: 1rem;
}

.c-gold-amenities__card-heading > span {
  color: rgb(210 174 104 / 55%);
  font-family: var(--font-heading, Georgia, serif);
  font-size: 2rem;
  line-height: 1;
}

.c-gold-amenities__list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.85rem;
  list-style: none;
}

.c-gold-amenities__list li {
  display: grid;
  grid-template-columns: 0.8rem 1fr;
  gap: 0.7rem;
  color: #ddd5c9;
  font-size: 0.94rem;
  line-height: 1.55;
}

.c-gold-amenities__list li > span:first-child {
  padding-top: 0.12rem;
  color: var(--brand-gold);
  font-size: 0.68rem;
}

@media (max-width: 48rem) {
  .c-gold-amenities__grid {
    grid-template-columns: 1fr;
  }

  .c-gold-amenities__home {
    align-items: flex-start;
  }
}

.c-site-nav a {
  color: var(--brand-white);
}

.c-site-nav a:hover,
.c-site-nav a:focus-visible {
  color: var(--brand-gold);
}

.c-site-nav a::after,
.c-scroll-progress {
  background: var(--brand-gold);
}

.c-site-header__cta {
  border: 1px solid var(--brand-gold);
  background: var(--brand-gold-deep);
  color: var(--brand-white);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 18%);
}

.c-site-header__cta:hover,
.c-site-header__cta:focus-visible {
  background: var(--brand-gold);
  color: var(--brand-charcoal);
}

@media (max-width: 80rem) {
  .c-site-header__cta {
    display: none;
  }
}

.c-language-switcher {
  border-color: rgb(210 174 104 / 38%);
  background: rgb(255 253 248 / 8%);
}

.c-language-switcher a {
  color: #e7dfd2;
}

.c-language-switcher a.is-active {
  background: var(--brand-gold-deep);
  color: var(--brand-white);
}

.c-menu-toggle {
  border-color: rgb(210 174 104 / 55%);
  background: transparent;
  color: var(--brand-gold);
}

.is-menu-open .c-menu-toggle__icon::before,
.is-menu-open .c-menu-toggle__icon::after {
  background: var(--brand-gold);
}

/* Hero */
.c-reference-hero {
  background:
    radial-gradient(circle at 76% 30%, rgb(210 174 104 / 18%), transparent 31rem),
    linear-gradient(128deg, #171815 0%, #26231d 58%, var(--brand-wood) 140%);
  color: var(--brand-white);
}

.c-reference-hero__kicker,
.c-reference-hero__word em {
  color: var(--brand-gold);
}

.c-reference-hero__kicker::before {
  background: var(--brand-gold);
}

.c-reference-hero__description,
.c-reference-hero__price-note {
  color: #d8d0c2;
}

.c-reference-hero__chips span {
  border-color: rgb(210 174 104 / 32%);
  background: rgb(255 253 248 / 9%);
  color: #eee6d8;
}

.c-reference-price,
.c-reference-polaroid {
  background: var(--brand-white);
  box-shadow: 0 1.6rem 3.5rem rgb(0 0 0 / 28%);
}

.c-reference-button--terra {
  background: var(--brand-gold-deep);
  box-shadow: 0 0.75rem 1.875rem rgb(0 0 0 / 28%);
}

.c-reference-button--terra:hover,
.c-reference-button--terra:focus-visible {
  background: var(--brand-gold);
  color: var(--brand-charcoal);
}

.c-reference-button--line {
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}

.c-reference-button--line:hover,
.c-reference-button--line:focus-visible {
  border-color: var(--brand-white);
  color: var(--brand-white);
}

/* Keep outline actions visible when they sit on white apartment cards. */
.c-reference-type-card .c-reference-button--line:hover,
.c-reference-type-card .c-reference-button--line:focus-visible {
  border-color: var(--brand-gold-deep);
  background: var(--brand-gold-deep);
  color: var(--brand-white);
  box-shadow: 0 0.7rem 1.6rem rgb(128 96 34 / 22%);
  opacity: 1;
  visibility: visible;
  transform: translateY(-2px);
}

/* Alternating editorial surfaces */
.c-reference-marquee {
  border-block: 1px solid rgb(210 174 104 / 22%);
  background: var(--brand-wood);
  color: var(--brand-white);
}

.c-reference-marquee__set {
  color: #f7f0e5;
  font-weight: 500;
  text-shadow: 0 1px 1px rgb(25 26 24 / 28%);
}

.c-reference-marquee__set i {
  color: var(--brand-gold);
}

.c-rental-options,
.c-reference-services,
.c-reference-types,
.c-reference-availability,
.c-reference-gallery,
.c-reference-reasons,
.c-reference-process,
.c-contact-channels {
  background: var(--color-cream);
}

.c-reference-pricing {
  border-color: rgb(104 74 53 / 16%);
  background: var(--brand-beige);
}

.c-rental-option,
.c-reference-type-card,
.c-reference-policy,
.c-reference-policy__grid > div,
.c-reference-availability__type,
.c-reference-gallery__card,
.c-reference-reasons__card,
.c-contact-channel,
.c-apartment-card {
  background: var(--brand-white);
}

.c-rental-option::before {
  background: linear-gradient(90deg, var(--brand-gold-deep), var(--brand-gold));
}

.c-reference-services__banners figure,
.c-reference-policy,
.c-reference-policy__header > span,
.c-reference-policy__grid > div,
.c-contact-channel,
.c-contact-channel__icon--zalo {
  border-color: rgb(128 96 34 / 24%);
}

.c-reference-policy__header > span {
  background: rgb(210 174 104 / 15%);
}

/* Feature-rich dark bands inspired by the reference amenities/news sections. */
.c-reference-featured,
.c-image-ring,
.c-testimonial-marquee,
.c-final-cta {
  background:
    radial-gradient(circle at 85% 10%, rgb(210 174 104 / 10%), transparent 27rem),
    var(--brand-charcoal);
  color: var(--brand-white);
}

.c-reference-featured .c-reference-kicker,
.c-reference-featured .c-reference-title em,
.c-image-ring .c-reference-kicker,
.c-image-ring .c-reference-title em,
.c-testimonial-marquee .c-reference-kicker,
.c-testimonial-marquee .c-reference-title em,
.c-final-cta h2 em {
  color: var(--brand-gold);
}

.c-reference-featured__description,
.c-image-ring__hint,
.c-testimonial-marquee__rating p,
.c-final-cta p {
  color: #c9c0b2;
}

.c-reference-featured__fact,
.c-reference-featured__note,
.c-image-ring__pane,
.c-testimonial-marquee__chip,
.c-testimonial-marquee__shot {
  border-color: rgb(210 174 104 / 24%);
  background: var(--brand-white);
}

.c-reference-featured__fact strong,
.c-reference-reasons__icon,
.c-reference-process__step > span {
  color: var(--brand-gold-deep);
}

.c-reference-featured__note {
  border-left-color: var(--brand-gold);
}

/* Tables, inventory and action states */
.c-reference-pricing__table thead th,
.c-system-strip,
.c-lead-reference,
.c-site-footer {
  background: var(--brand-charcoal);
}

.c-reference-pricing__table td strong,
.c-reference-availability__price strong,
.c-reference-availability__reload,
.c-reference-availability__photo,
.c-system-strip__number,
.c-lead-reference .c-reference-kicker,
.c-lead-reference h2 em,
.c-lead-reference__site-note a {
  color: var(--brand-gold-deep);
}

.c-reference-availability__reload:hover,
.c-reference-availability__reload:focus-visible,
.c-reference-availability__photo:hover,
.c-reference-availability__photo:focus-visible {
  border-color: var(--brand-gold-deep);
  color: var(--brand-gold-deep);
}

.c-reference-availability__spinner {
  border-top-color: var(--brand-gold-deep);
}

.c-reference-availability__book,
.c-system-strip__button,
.c-button--primary,
.c-button.c-button--reference,
.c-choice-group label:has(input:checked) {
  background: var(--brand-gold-deep);
  color: var(--brand-white);
}

.c-reference-availability__book:hover,
.c-system-strip__button:hover,
.c-button--primary:hover,
.c-button--reference:hover,
.c-button--reference:focus-visible {
  background: var(--brand-gold);
  color: var(--brand-charcoal);
}

.c-system-strip {
  border-block: 1px solid rgb(210 174 104 / 24%);
}

.c-system-strip__number,
.c-lead-reference .c-reference-kicker,
.c-lead-reference h2 em,
.c-lead-reference__site-note a {
  color: var(--brand-gold);
}

.c-form-field input:focus,
.c-form-field select:focus {
  border-color: var(--brand-gold);
  background: rgb(210 174 104 / 10%);
}

.c-final-cta__secondary {
  border-color: rgb(210 174 104 / 65%);
  background: transparent;
  color: var(--brand-gold);
  box-shadow: none;
}

.c-final-cta__secondary:hover,
.c-final-cta__secondary:focus-visible {
  border-color: var(--brand-gold);
  color: var(--brand-white);
}

/* Footer and floating controls */
.c-site-footer {
  border-top: 1px solid rgb(210 174 104 / 30%);
  color: #c9c0b2;
}

.c-site-footer strong,
.c-site-footer a,
.c-site-footer__brand {
  color: var(--brand-gold);
}

.c-site-footer p {
  color: #c9c0b2;
}

.c-site-footer__chat a,
.c-floating-contact__action {
  border-color: rgb(210 174 104 / 48%);
  background: var(--brand-white);
  color: var(--brand-gold-deep);
}

.c-site-footer__chat a:hover,
.c-site-footer__chat a:focus-visible,
.c-floating-contact__action:hover,
.c-floating-contact__action:focus-visible {
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  color: var(--brand-charcoal);
}

.c-promotion-dialog {
  border-color: rgb(210 174 104 / 42%);
  background: var(--color-cream);
}

.c-promotion-dialog__close,
.c-promotion-dialog__images figure,
.c-promotion-dialog__actions a {
  border-color: rgb(128 96 34 / 28%);
}

@media (max-width: 61.25rem) {
  .c-site-nav {
    border-color: rgb(210 174 104 / 30%);
    background: rgb(25 26 24 / 98%);
    box-shadow: 0 1.5rem 3.125rem rgb(0 0 0 / 34%);
  }

  .c-site-nav a:hover,
  .c-site-nav a:focus-visible {
    background: rgb(210 174 104 / 12%);
  }
}

@media (max-width: 40rem) {
  .c-site-header__inner {
    gap: 0.4rem;
  }

  .c-site-brand__logo--header {
    width: 2.75rem;
    max-height: 2.75rem;
  }

  .c-language-switcher a {
    padding-inline: 0.45rem;
  }
}

@media (max-width: 48rem) {
  .c-site-header,
  .c-site-header.is-sticky {
    padding-block: 0.6rem;
  }

  .c-reference-hero {
    background:
      radial-gradient(circle at 80% 18%, rgb(210 174 104 / 15%), transparent 18rem),
      linear-gradient(145deg, #171815, #2b251d);
  }
}