/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Set Inter as the default font family for the entire site */
* {
    font-family: 'Inter', sans-serif;
}

html,
body {
    font-family: 'Inter', sans-serif;
}

:root {
    --brand-yellow: #FCB305;
}

/* Brand color helpers */
.brand-yellow {
    color: var(--brand-yellow);
}

.bg-brand-yellow {
    background-color: var(--brand-yellow);
}

.hover\:brand-yellow:hover {
    color: var(--brand-yellow) !important;
}

.hover\:bg-brand-yellow:hover {
    background-color: var(--brand-yellow) !important;
}

/* Additional font weight classes for better typography */
.font-thin {
    font-weight: 100;
}

.font-extralight {
    font-weight: 200;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

/* ===== Responsive helpers and mobile tweaks ===== */

/* Make media scale inside their containers */
img,
picture,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent accidental horizontal scrolling on small viewports */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Simple container utility to match Tailwind container behaviour */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Improve tappable targets for nav links on mobile */
.nav-link {
    padding: 0.5rem 0.375rem;
    display: inline-block;
}

/* Collapsed mobile header adjustments */
header {
    -webkit-font-smoothing: antialiased;
}

/* Prevent very tall fixed popups from overflowing small viewports */
.property-popup {
    max-width: 100%;
    box-sizing: border-box;
}

/* General responsive spacing and typography tweaks */
@media (max-width: 1024px) {
    .text-\[46px\] {
        font-size: 2.25rem;
    }
}

@media (max-width: 640px) {
    html {
        font-size: 15px;
    }

    .text-\[46px\] {
        font-size: 1.5rem;
    }

    .text-\[18px\] {
        font-size: 0.85rem;
    }

    .grid {
        gap: 0.75rem;
    }

    .min-h-\[280px\] {
        min-height: auto;
    }

    .rounded-xl {
        border-radius: 0.75rem;
    }

    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* hide oversized outside carousel controls on small screens if present */
    .carousel-nav-btn {
        display: none;
    }

    /* also hide external prev/next arrows that are positioned outside the container */
    #propertiesPrev,
    #propertiesNext {
        display: none !important;
    }

    /* Mobile-only: show full property popup inline and hide the compact summary
     Keep desktop hover behavior unchanged. This makes the featured card
     expand into the detailed card with the yellow CTA at the bottom on mobile. */
    .property-card>.p-4 {
        display: none !important;
    }

    .property-card .property-popup {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 0 12px 0 !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
        border-radius: 12px !important;
    }

    .property-card .property-popup img {
        height: auto !important;
        max-height: none !important;
        display: block !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    /* Prevent duplicate images on mobile: hide the card's primary image
    (the image that sits above the compact summary) so only the popup
    image is visible when the popup is shown inline). Desktop is unaffected. */
    .property-card>.relative img {
        display: none !important;
    }

    /* Full-width yellow CTA at the bottom of the mobile card */
    .property-card .card-price-cta {
        display: block !important;
        width: calc(100% - 0px) !important;
        margin: 8px 0 0 0 !important;
        padding: 12px 16px !important;
        border-radius: 9999px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        color: inherit !important;
        background: #FCB305 !important;
    }
}

/* Reflow hero nav arrows on mobile: stack them below the hero text and center */
@media (max-width: 640px) {

    /* Place the arrows directly under the hero text on mobile with space between them */
    .hero-arrows-mobile {
        display: flex;
        justify-content: center;
        gap: 18px;
        /* more space between arrows */
        position: static;
        width: 100%;
        margin-top: 12px;
        /* space under the text */
        pointer-events: auto;
    }

    .hero-arrows-mobile button#heroPrev,
    .hero-arrows-mobile button#heroNext {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0.45rem !important;
        /* tappable circle */
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.42) !important;
        /* contrast with hero */
        color: #fff !important;
        border-radius: 9999px !important;
    }

    .hero-arrows-mobile button#heroPrev svg,
    .hero-arrows-mobile button#heroNext svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.2 !important;
    }
}

/* Further reduce hero heading size on small screens so it fits nicely over the image */
@media (max-width: 640px) {

    /* Slightly larger hero heading on small phones so it's not too small */
    #heroRoot h1 {
        font-size: 2.25rem !important;
        /* ~36px */
        line-height: 1.05 !important;
        margin-bottom: 0.5rem !important;
    }

    #heroRoot p {
        font-size: 1rem !important;
    }
}

@media (max-width: 360px) {

    /* Tighter but still readable on very small phones */
    #heroRoot h1 {
        font-size: 1.6rem !important;
        /* ~25.6px on very small phones */
        line-height: 1.05 !important;
    }
}

/* Small utility to improve readability on narrow devices */
.lead {
    line-height: 1.4;
}

/* Ensure buttons and CTAs remain legible and tappable */
a.inline-block,
a.button {
    padding: 0.6rem 1rem;
}

/* Extra-tight adjustments for very small phones (<= 360px width, typical smaller Android devices) */
@media (max-width: 360px) {
    html {
        font-size: 14px;
    }

    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .text-\[46px\] {
        font-size: 1.25rem;
    }

    .text-\[18px\] {
        font-size: 0.78rem;
    }

    .nav-link {
        padding: 0.35rem 0.25rem;
        font-size: 0.95rem;
    }

    a.inline-block,
    a.button {
        padding: 0.45rem 0.75rem;
        font-size: 0.95rem;
    }

    .grid {
        gap: 0.5rem;
    }

    .min-h-\[280px\] {
        min-height: auto;
    }

    .properties-carousel-container {
        padding: 12px 0 !important;
    }

    .properties-page {
        padding: 0 12px !important;
    }

    /* Ensure property popups are fully fluid on small screens */
    .property-popup,
    .property-popup.index-popup {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto 12px auto !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
        border-radius: 12px !important;
    }

    .property-popup img {
        height: auto !important;
        max-height: none !important;
    }

    /* Reduce visual chrome to maximise content space */
    header {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .carousel-nav-btn {
        display: none !important;
    }
}

/* Hero arrows: ensure desktop arrows are visible and positioned even when utility classes
   like `relative`/`absolute` (Tailwind-like) are not present in the stylesheet. */
#heroRoot {
    position: relative;
    overflow: visible;
}

#heroPrev,
#heroNext {
    display: none;
    /* default hidden on small screens; shown in desktop media query */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    /* no background per design request */
    background: transparent !important;
    color: #fff;
    border-radius: 9999px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: none !important;
}

@media (min-width: 768px) {

    /* show side nav on medium+ screens */
    #heroPrev,
    #heroNext {
        display: inline-flex !important;
    }

    /* move slightly inward from the edges so the arrows are clear but not flush */
    #heroPrev {
        left: 28px !important;
    }

    #heroNext {
        right: 28px !important;
    }
}

/* Mobile wrapper already exists in template; ensure styles in this file apply to it */
.hero-arrows-mobile {
    display: flex;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin-top: 12px;
}

/* Ensure mobile arrows have no solid background if the button markup includes a bg class */
.hero-arrows-mobile button#heroPrev,
.hero-arrows-mobile button#heroNext {
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
}


/* Reveal-on-scroll animations (global) */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms cubic-bezier(.2, .9, .2, 1), transform 700ms cubic-bezier(.2, .9, .2, 1);
    will-change: transform, opacity;
}

.reveal-left {
    transform: translateX(-60px);
}

.reveal-right {
    transform: translateX(60px);
}

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

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-left,
    .reveal-right {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Custom pointer (small dot) */
.custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* white center with a subtle dark halo so the pointer stays visible on white backgrounds */
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16),
        /* soft drop */
        0 0 0 6px rgba(0, 0, 0, 0.08);
    /* light blackish halo */
    pointer-events: none;
    /* Let clicks pass through */
    transform: translate(-50%, -50%) scale(1);
    transition: transform 150ms cubic-bezier(.2, .9, .2, 1), box-shadow 150ms ease, background 150ms ease;
    z-index: 99999;
    mix-blend-mode: normal;
}

/* Enlarged state when hovering interactive elements */
.custom-cursor.cursor--hover {
    transform: translate(-50%, -50%) scale(1.8);
    /* keep white center, but add a warmer brand-colored outer ring for emphasis */
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 8px rgba(252, 179, 5, 0.12);
}

/* Hide custom cursor when keyboard focus is present (so focus ring remains visible) */
html.keyboard-navigation .custom-cursor {
    display: none !important;
}

/* Respect reduced motion: do not show the custom cursor if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .custom-cursor {
        display: none !important;
    }
}

/* On touch devices, custom cursor is hidden via JS (no CSS change needed) */