/* ============================================================
   Aurum Estates — Custom Stylesheet
   Palette  : #0A2540 (Navy) · #C9A96E (Gold)
   Typefaces: Manrope 400/500/700 · Playfair Display 600/700
   ============================================================ */

/* ===== Google Fonts — locally hosted via @font-face ===== */
@import url("../fonts/google-fonts.css");

/* ===== CSS Custom Properties (Design Tokens) ===== */
:root {
    --bg: #f4f6f8;
    --bg-soft: #ffffff;
    --text: #152236;
    --text-soft: #4f5f73;
    --primary: #0a2540;
    --primary-2: #12395f;
    --accent: #c9a96e;
    --line: rgba(12, 37, 64, .12);
    --success: #237a52;
    --shadow: 0 14px 30px rgba(10, 37, 64, .12);
    --radius: 16px;
    --transition: .3s ease
}

/* ===== Dark Mode — Token Overrides ===== */
body[data-theme='dark'] {
    --bg: #0b1623;
    --bg-soft: #122235;
    --text: #ecf2f9;
    --text-soft: #b7c4d4;
    --primary: #06172a;
    --primary-2: #0e2f4f;
    --accent: #d8bb83;
    --line: rgba(201, 169, 110, .25);
    --success: #3dc68d;
    --shadow: 0 14px 30px rgba(0, 0, 0, .45)
}

/* ===== Base Reset & Global ===== */
* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Manrope', sans-serif;
    background: radial-gradient(circle at top left, rgba(201, 169, 110, .08), transparent 30%), var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden
}

/* ===== Typography ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    line-height: 1.2
}

body[data-theme='dark'] h1,
body[data-theme='dark'] h2,
body[data-theme='dark'] h3,
body[data-theme='dark'] h4,
body[data-theme='dark'] h5,
body[data-theme='dark'] h6 {
    color: var(--accent)
}

a {
    color: inherit;
    text-decoration: none
}

/* ===== Layout Utilities ===== */
.section {
    padding: 90px 0
}

.section-title {
    max-width: 650px;
    margin-bottom: 28px
}

.section-title p {
    color: var(--text-soft)
}

/* ===== Buttons ===== */
.btn-brand {
    background: var(--accent);
    color: #111;
    border: 1px solid transparent;
    font-weight: 700;
    padding: .8rem 1.25rem;
    border-radius: 50px;
    transition: var(--transition)
}

.btn-brand:hover {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent)
}

.btn-outline-brand {
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: .8rem 1.25rem;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition)
}

.btn-outline-brand:hover {
    background: var(--accent);
    color: #111
}

/* ===== Fixed Sticky Navbar ===== */
.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    background: rgba(10, 37, 64, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 169, 110, .24)
}

/* Spacer div — holds space for the fixed navbar; height synced by syncHeaderOffset() */
#site-header {
    min-height: var(--header-offset, 78px)
}

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    letter-spacing: .5px;
    color: #fff !important
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #152236;
    font-weight: 800;
    margin-right: 9px
}

.nav-link {
    color: #dbe5ef !important;
    font-weight: 600;
    padding: .6rem .85rem !important;
    transition: var(--transition)
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent) !important
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    font-size: .85rem
}

.form-switch .form-check-input {
    cursor: pointer
}

/* ===== Hero Banner ===== */
.hero {
    min-height: 84vh;
    display: flex;
    align-items: center;
    background: linear-gradient(rgba(8, 26, 45, .75), rgba(8, 26, 45, .72)), url('../images/hero.svg') center/cover no-repeat;
    color: #f4efe3
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    color: #fff
}

.hero p {
    max-width: 600px;
    color: #e8edf4
}

.hero-actions {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap
}

/* Glass info card overlaid on the hero section */
.glass-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 1.2rem;
    border-radius: var(--radius)
}

/* ===== Property / Content Cards ===== */
.property-card,
.testimonial-card,
.team-card,
.info-card,
.faq-item {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    height: 100%;
    transition: transform .32s ease, box-shadow .32s ease
}

.property-card:hover,
.team-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 34px rgba(10, 37, 64, .2)
}

/* ===== Testimonials Carousel ===== */

/* Constrain the card width and add bottom padding for dots */
#testimonialCarousel {
    padding-bottom: 56px
}

#testimonialCarousel .testimonial-card {
    max-width: 720px;
    height: auto;
    text-align: center
}

/* Large quotation mark icon */
.testimonial-quote {
    width: 36px;
    height: auto;
    color: var(--accent);
    opacity: .6;
    margin: 0 auto 1.2rem
}

/* Quote text */
.testimonial-body {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text);
    font-style: italic;
    margin-bottom: 1.5rem
}

/* Author row */
.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem
}

/* Initials avatar circle */
.testimonial-avatar {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: #111;
    font-weight: 800;
    font-size: .82rem;
    flex-shrink: 0
}

/* Prev / Next arrow buttons */
.testimonial-ctrl {
    width: 44px;
    height: 44px;
    background: var(--accent) !important;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-60%);
    opacity: 1 !important
}

.testimonial-ctrl:hover {
    background: var(--primary) !important
}

.testimonial-ctrl .carousel-control-prev-icon,
.testimonial-ctrl .carousel-control-next-icon {
    width: 18px;
    height: 18px
}

/* Dot indicators — positioned below the card */
.testimonial-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0
}

.testimonial-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent) !important;
    opacity: .35;
    margin: 0 4px
}

.testimonial-dots button.active {
    opacity: 1
}

.property-card img,
.team-card img,
.gallery-img {
    border-radius: var(--radius) var(--radius) 0 0;
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover
}

.property-card .card-body {
    padding: 1.15rem
}

.meta {
    font-size: .92rem;
    color: var(--text-soft)
}

/* Gold decorative rule shown beneath section headings */
.accent-line {
    height: 2px;
    width: 68px;
    background: var(--accent);
    margin: 14px 0 18px
}

/* ===== About / Stats Strip ===== */
.about-strip {
    background: linear-gradient(120deg, var(--primary), var(--primary-2));
    color: #f9fafb;
    border-radius: 24px;
    padding: 2rem
}

.about-strip h2,
.about-strip h3 {
    color: #fff
}

.stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 1.2rem
}

.stat-box {
    border: 1px solid rgba(201, 169, 110, .4);
    border-radius: 14px;
    padding: 1rem;
    text-align: center
}

/* ===== Breadcrumb Banner (inner pages) ===== */
.breadcrumb-wrap {
    background: linear-gradient(130deg, var(--primary), var(--primary-2));
    padding: 88px 0 50px;
    color: #ecf2fa
}

.breadcrumb-wrap h1 {
    color: #fff
}

.breadcrumb-item a {
    color: #fff
}

.breadcrumb-item.active {
    color: var(--accent)
}

/* ===== Project Details — Gallery & Amenities ===== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem
}

.amenities li {
    padding: .5rem 0;
    border-bottom: 1px dashed var(--line)
}

/* ===== Map / Location Embed Placeholder ===== */
.map-placeholder,
.embed-placeholder {
    background: linear-gradient(130deg, #dae4ef, #f5f9ff);
    min-height: 300px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    color: #24456b;
    font-weight: 700;
    border: 2px dashed rgba(10, 37, 64, .3)
}

body[data-theme='dark'] .map-placeholder,
body[data-theme='dark'] .embed-placeholder {
    background: linear-gradient(130deg, #1b3044, #253f59);
    color: #c7d7e8
}

/* ===== Contact Page Layout ===== */
.contact-list li {
    margin-bottom: .65rem
}

/* ===== Footer ===== */
.site-footer {
    background: var(--primary);
    color: #d8e1eb;
    padding: 54px 0 20px;
    position: relative;
    z-index: 3;
    margin-top: 64px
}

[data-page='contact'] main {
    position: relative;
    z-index: 2;
    background: var(--bg)
}

[data-page='contact'] .section {
    padding-bottom: 120px
}

[data-page='contact'] .row {
    align-items: stretch
}

[data-page='contact'] .col-lg-5 {
    display: flex;
    flex-direction: column
}

[data-page='contact'] .embed-placeholder {
    position: relative;
    z-index: 2;
    min-height: 340px;
    margin-top: 0;
    flex: 1 0 auto
}

/* Outer footer wrapper — z-index keeps it above contact map placeholder */
#site-footer {
    position: relative;
    z-index: 3;
    clear: both
}

.site-footer a {
    color: #d8e1eb
}

/* ===== Page Loader Overlay ===== */
.loader {
    position: fixed;
    inset: 0;
    background: #081a2d;
    display: grid;
    place-items: center;
    z-index: 2000
}

.loader::after {
    content: '';
    width: 58px;
    height: 58px;
    border: 4px solid rgba(201, 169, 110, .35);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ===== Scroll Reveal Animation ===== */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease
}

.reveal.visible {
    opacity: 1;
    transform: none
}

/* ===== Back-to-Top Button ===== */
#backToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: var(--accent);
    color: #111;
    border: 0;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    display: none;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 1100
}

/* ===== Responsive Breakpoints ===== */
@media (max-width:991.98px) {
    .section {
        padding: 72px 0
    }

    .hero {
        min-height: 72vh
    }

    .property-card img,
    .team-card img {
        height: 200px
    }

    [data-page='contact'] .section {
        padding-bottom: 84px
    }

    [data-page='contact'] .embed-placeholder {
        min-height: 280px
    }
}