/* ==========================================================================
   Site-wide · Gold Accent Theme
   Applied to every public page via includes/head.php.
   Gold palette complements the navy / grey / white resort design.
   Home-only hero / intro / stats rules stay scoped under .page-home.
   ========================================================================== */

:root {
    /* ---- Gold palette ---- */
    --gold-1: #E8CF8F;   /* soft highlight */
    --gold-2: #D4AF37;   /* bright gold  */
    --gold-3: #C9A227;   /* rich gold    */
    --gold-4: #9A7627;   /* deep gold    */
    --gold-5: #7C5E1F;   /* darkest gold */
    --gold-tint: #FBF4E3;
    --gold-tint-strong: rgba(201, 162, 39, 0.14);
    --gold-grad: linear-gradient(135deg, #E8CF8F 0%, #D4AF37 45%, #9A7627 100%);
    --gold-metallic: linear-gradient(180deg, #F5E6B0 0%, #D4AF37 55%, #A07E2C 100%);
    --gold-glow: 0 10px 30px rgba(201, 162, 39, 0.35);
    --gold-glow-sm: 0 4px 14px rgba(201, 162, 39, 0.28);

    /* ---- Light lemon green (replaces dark green) ---- */
    --lemon: #C9DF4C;
    --lemon-ink: #5F7A12;
    --lemon-tint: rgba(201, 223, 76, 0.16);
}

/* ==========================================================================
   0. Announcement bar — gold strip
   ========================================================================== */
.announcement-bar {
    background: var(--gold-grad);
    color: #122A44;
}

.announcement-bar__link {
    color: #122A44;
    border-bottom: 1px solid rgba(18, 42, 68, 0.45);
}

.announcement-bar__link:hover {
    color: #0E2540;
    border-color: #0E2540;
}

/* ==========================================================================
   0. Site name — light blue + gold (site header logo)
   ========================================================================== */
.logo-name {
    background: linear-gradient(90deg, #7FBCF0 0%, #4A90D9 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.logo-sub {
    background: linear-gradient(90deg, #4A90D9, #6FB2EE);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.logo:hover .logo-name {
    background: linear-gradient(90deg, #93C9F5 0%, #5FA8E7 50%, #E8CF8F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================================================
   1. Badges & discount — kill dark green, use lemon green + gold
   ========================================================================== */
.badge--success {
    background-color: var(--lemon-tint);
    color: var(--lemon-ink);
}

.price-line__save {
    background: var(--gold-grad);
    color: #122A44;
    box-shadow: var(--gold-glow-sm);
}

/* Success alerts (e.g. "Message sent") — lemon instead of dark green */
.alert--success {
    background-color: var(--lemon-tint);
    color: var(--lemon-ink);
}

.alert--success svg {
    color: var(--lemon-ink);
}

.auth-card__notice--success {
    background-color: var(--lemon-tint);
    color: var(--lemon-ink);
}

/* ==========================================================================
   2. Section eyebrows → gold with gold rule (also on navy sections)
   ========================================================================== */
.section-header__eyebrow,
.section--accent .section-header__eyebrow,
.page-hero .section-header__eyebrow {
    color: var(--gold-3);
}

.section--accent .section-header__eyebrow,
.page-hero .section-header__eyebrow {
    color: var(--gold-2);
}

.section-header__eyebrow::before {
    background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
    height: 2px;
    opacity: 1;
}

.section-header--center .section-header__eyebrow::after {
    background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
    height: 2px;
    opacity: 1;
}

/* ==========================================================================
   3. Buttons — gold primary / gold accents (site-wide)
   ========================================================================== */
.btn--primary {
    background: var(--gold-grad);
    color: #122A44;
    border-color: transparent;
    box-shadow: var(--gold-glow-sm);
}

.btn--primary:hover {
    background: linear-gradient(135deg, #F3E0A0 0%, #D4AF37 45%, #A07E2C 100%);
    color: #0E2540;
    box-shadow: var(--gold-glow);
}

.btn--outline {
    border-color: var(--gold-3);
    color: var(--gold-3);
}

.btn--outline:hover {
    background-color: var(--gold-3);
    border-color: var(--gold-3);
    color: #FFFFFF;
    box-shadow: var(--gold-glow-sm);
}

.link-arrow {
    color: var(--gold-3);
}

.link-arrow:hover {
    color: var(--gold-4);
}

/* Nav CTA picks up the gold primary look */
.site-nav__cta.btn--primary {
    color: #122A44;
}

/* ==========================================================================
   4. Check-list & highlight icons — gold
   ========================================================================== */
.check-list svg {
    background: var(--gold-tint);
    color: var(--gold-3);
}

.highlight__icon {
    background-color: var(--gold-tint);
    color: var(--gold-3);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   5. Lifestyle feature tiles — gold numbers & hover
   ========================================================================== */
.feature-tile {
    border-color: var(--color-border);
}

.feature-tile:hover {
    border-color: rgba(201, 162, 39, 0.6);
    box-shadow: var(--shadow-hover), var(--gold-glow-sm);
}

.feature-tile__num {
    background: var(--gold-grad);
    color: #FFFFFF;
    box-shadow: var(--gold-glow-sm);
}

.feature-tile__title a,
.feature-tile__title {
    transition: color var(--duration-fast) var(--ease-out);
}

.feature-tile:hover .feature-tile__title {
    color: var(--gold-4);
}

/* ==========================================================================
   6. Property cards — gold price, gold hover, gold icons, gold badge ring
   ========================================================================== */
.card {
    border-color: var(--color-border);
}

.card:hover {
    border-color: rgba(201, 162, 39, 0.65);
    box-shadow: var(--shadow-hover), var(--gold-glow);
}

.card__price {
    color: var(--gold-4);
}

.card__location svg {
    color: var(--gold-3);
}

.card__title a:hover {
    color: var(--gold-4);
}

.card__fact svg {
    color: var(--gold-3);
}

.card:hover .card__media img {
    box-shadow: inset 0 0 0 3px var(--gold-2);
}

.badge--gold {
    background: var(--gold-grad);
    color: #FFFFFF;
    box-shadow: var(--gold-glow-sm);
}

/* ==========================================================================
   7. Location page — gold commute pins + hover frame
   ========================================================================== */
.place-tile {
    border-color: var(--color-border);
}

.place-tile:hover {
    border-color: rgba(201, 162, 39, 0.6);
    box-shadow: var(--shadow-hover), var(--gold-glow-sm);
}

.place-tile__commute svg {
    color: var(--gold-3);
}

/* ==========================================================================
   8. Property / contact info card — gold price, gold frame
   ========================================================================== */
.info-card {
    border-color: rgba(201, 162, 39, 0.4);
}

.info-card__price {
    color: transparent;
    background: var(--gold-metallic);
    -webkit-background-clip: text;
    background-clip: text;
}

.info-card__label {
    color: var(--gold-4);
}

/* ==========================================================================
   9. Interior page hero — gold bottom hairline
   ========================================================================== */
.page-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 2;
    background: var(--gold-grad);
}

/* ==========================================================================
   10. Auth card — gold top bar
   ========================================================================== */
.auth-card {
    border-top: 3px solid var(--gold-3);
}

/* ==========================================================================
   11. CTA band — gold kicker, gold ring, gold button (site-wide)
   ========================================================================== */
.cta-band {
    background:
        radial-gradient(80% 160% at 90% -20%, rgba(201, 162, 39, 0.25), transparent 60%),
        linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deeper) 100%);
    box-shadow: var(--shadow-lg), var(--gold-glow);
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: inherit;
    pointer-events: none;
}

.cta-band__kicker {
    color: var(--gold-2);
    font-weight: var(--fw-semibold);
}

.cta-band__meta a {
    color: rgba(255, 255, 255, 0.9);
}

.cta-band__meta svg {
    color: var(--gold-2);
}

.cta-band .btn--light {
    background: var(--gold-grad);
    color: #122A44;
    box-shadow: var(--gold-glow-sm);
}

.cta-band .btn--light:hover {
    background: linear-gradient(135deg, #F3E0A0 0%, #D4AF37 45%, #A07E2C 100%);
    color: #0E2540;
    box-shadow: var(--gold-glow);
}

/* ==========================================================================
   12. Home-only: hero slider — caption overlay + gold accents
   ========================================================================== */
.page-home .home-hero {
    background-color: var(--color-accent-deeper);
}

.page-home .home-hero__slide {
    overflow: hidden;
}

/* Navy scrim left-to-right so captions stay legible over the imagery */
.page-home .home-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(14, 37, 64, 0.72) 0%, rgba(14, 37, 64, 0.42) 42%, rgba(14, 37, 64, 0.08) 78%),
        radial-gradient(120% 140% at 82% 108%, rgba(201, 162, 39, 0.22), transparent 55%);
    pointer-events: none;
}

/* Gold hairline along the hero bottom edge */
.page-home .home-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 6;
    background: var(--gold-grad);
}

.page-home .home-hero__caption {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
    padding-right: var(--container-pad);
}

.page-home .home-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-2);
}

.page-home .home-hero__kicker::after {
    content: "";
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-3), transparent);
}

.page-home .home-hero__title {
    max-width: 16ch;
    margin-bottom: var(--space-5);
    color: var(--color-text-inverse);
    font-size: clamp(34px, 5.2vw, 58px);
    line-height: var(--lh-tight);
    text-shadow: 0 2px 18px rgba(14, 37, 64, 0.55);
}

.page-home .home-hero__title em,
.page-home .home-hero__title .gold {
    font-style: normal;
    background: var(--gold-metallic);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-home .home-hero__lead {
    max-width: 46ch;
    margin-bottom: var(--space-6);
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    font-weight: var(--fw-light);
    line-height: var(--lh-body);
}

.page-home .home-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Full-bleed so connector/rect buttons on image still have bg edge */
.page-home .home-hero__actions .btn {
    box-shadow: var(--gold-glow-sm);
}

/* Reveal animation per active slide */
.page-home .home-hero__caption > * {
    opacity: 0;
    transform: translateY(18px);
}

.page-home .home-hero__slide.is-active .home-hero__caption > * {
    opacity: 1;
    transform: none;
    animation: hero-gold-rise 700ms var(--ease-out) both;
}

.page-home .home-hero__slide.is-active .home-hero__kicker   { animation-delay: 120ms; }
.page-home .home-hero__slide.is-active .home-hero__title    { animation-delay: 240ms; }
.page-home .home-hero__slide.is-active .home-hero__lead     { animation-delay: 360ms; }
.page-home .home-hero__slide.is-active .home-hero__actions  { animation-delay: 480ms; }

@keyframes hero-gold-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* Gold arrows on hover */
.page-home .home-hero__arrow:hover {
    background: var(--gold-grad);
    border-color: var(--gold-2);
    color: #122A44;
    box-shadow: var(--gold-glow);
}

/* ==========================================================================
   13. Home-only: intro + stats band + location
   ========================================================================== */
.page-home .home-intro__badge {
    border-color: rgba(201, 162, 39, 0.45);
    box-shadow: var(--shadow-lg), var(--gold-glow-sm);
}

.page-home .home-intro__badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    background: var(--gold-grad);
}

.page-home .home-intro__badge strong {
    color: transparent;
    background: var(--gold-metallic);
    -webkit-background-clip: text;
    background-clip: text;
}

.page-home .home-intro__media .media-frame {
    box-shadow: var(--shadow-lg), var(--gold-glow-sm);
}

.page-home .signature {
    color: var(--gold-4);
}

.page-home .section--accent {
    background-image:
        radial-gradient(120% 160% at 50% -40%, rgba(201, 162, 39, 0.18), transparent 60%),
        linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deeper) 100%);
}

.page-home .section--accent::before {
    content: "";
    display: block;
    height: 2px;
    background: var(--gold-grad);
    margin-bottom: var(--space-8);
}

.page-home .stat__value {
    color: transparent;
    background: var(--gold-metallic);
    -webkit-background-clip: text;
    background-clip: text;
}

.page-home .stat__label {
    color: rgba(255, 255, 255, 0.72);
}

.page-home .home-location__media {
    box-shadow: var(--shadow-lg), var(--gold-glow-sm);
}

/* ==========================================================================
   14. Responsive (home hero)
   ========================================================================== */
@media (max-width: 1024px) {
    .page-home .home-hero__caption {
        padding-left: var(--container-pad-tablet);
        padding-right: var(--container-pad-tablet);
    }
}

@media (max-width: 640px) {
    .page-home .home-hero {
        height: clamp(430px, 112vw, 540px);
    }

    .page-home .home-hero__caption {
        max-width: none;
        padding-left: var(--container-pad-mobile);
        padding-right: calc(var(--container-pad-mobile) + 36px);
        padding-bottom: var(--space-7);
        justify-content: flex-end;
    }

    .page-home .home-hero__kicker {
        display: none;
    }

    .page-home .home-hero__lead {
        display: none;
    }

    .page-home .home-hero__title {
        font-size: 34px;
    }

    .page-home .home-hero__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .page-home .home-hero__actions .btn {
        width: 100%;
        min-width: 0;
    }

    .page-home .section--accent::before {
        margin-bottom: var(--space-7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-home .home-hero__caption > * {
        animation: none;
        opacity: 1;
        transform: none;
    }
}