/* =========================================================
   CSS Variables (Theme Tokens)
   ========================================================= */

/* @font-face {
  font-family: 'La-Jour-Serif';
  src: url('/themes/initial-sama/assets/fonts/le_jour_serif/Le_Jour_Serif_Personal_Use_Only.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins-thin';
  src: url('/themes/initial-sama/assets/fonts/poppins/Poppins-Thin.ttf') format('truetype');
} */

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

:root {
    --font-poppins: "Poppins", system-ui, sans-serif;
    /* --font-mono: "JetBrains Mono", ui-monospace, monospace; */

    /* Radius scale */
    --radius: 0.75rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);

    /* Brand / primary */
    --primary: oklch(0.35 0.08 25);
    --primary-foreground: oklch(0.98 0.01 85);

    /* Backgrounds & surfaces */
    --background: oklch(0.98 0.005 85);
    --foreground: oklch(0.3 0.01 60);
    --card: oklch(0.99 0.005 85);
    --card-foreground: oklch(0.3 0.01 60);
    --popover: oklch(0.99 0.005 85);
    --popover-foreground: oklch(0.3 0.01 60);

    /* Secondary & muted */
    --secondary: oklch(0.92 0.02 85);
    --secondary-foreground: oklch(0.35 0.01 60);
    --muted: oklch(0.94 0.01 85);
    --muted-foreground: oklch(0.5 0.01 60);

    /* Accent & destructive */
    --accent: oklch(0.88 0.03 120);
    --accent-foreground: oklch(0.3 0.01 60);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);

    /* UI elements */
    --border: oklch(0.88 0.01 85);
    --input: oklch(0.92 0.01 85);
    --ring: oklch(0.65 0.08 140);

    /* Charts */
    --chart-1: oklch(0.75 0.05 120);
    --chart-2: oklch(0.65 0.08 140);
    --chart-3: oklch(0.55 0.1 160);
    --chart-4: oklch(0.45 0.08 180);
    --chart-5: oklch(0.35 0.08 200);

    /* Sidebar */
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.3 0.01 60);
    --sidebar-primary: oklch(0.35 0.08 25);
    --sidebar-primary-foreground: oklch(0.98 0.01 85);
    --sidebar-accent: oklch(0.94 0.01 85);
    --sidebar-accent-foreground: oklch(0.3 0.01 60);
    --sidebar-border: oklch(0.88 0.01 85);
    --sidebar-ring: oklch(0.65 0.08 140);

    /* New Version */
    /* ── Brand palette ── */
    --forest: #3b4038; /* deep green — primary brand */
    --forest-deep: #2f332d; /* darker green for hover & footer */
    --paper: #ebe8e5; /* warm light grey — primary surface */
    --paper-soft: #f3f1ef; /* slightly lighter variant */
    --white: #ffffff; /* pure white */

    --ink: #3b4038; /* text uses brand green for cohesion */
    --moss: #6e7268; /* muted green for secondary text */
    --taupe: #8a8c84; /* light muted for captions */
    --bone: #d9d6d2; /* subtle dividers */

    --lavender: #8b6faa;
    --lavender-dk: #74578f;

    --rust: #843c0b; /* terracotta accent */
    --rust-dk: #6b3008;
    --stone: #bab0a8; /* warm grey for route cards */
    --stone-dk: #a09588;

    /* ── Type stacks ── */
    --display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
        sans-serif;
    --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;
    --script: "South Holland", "Pinyon Script", cursive;
}

/* =========================================================
   Dark Mode Overrides
   ========================================================= */

.dark {
    --primary: oklch(0.65 0.08 140);
    --primary-foreground: oklch(0.15 0.01 60);

    --background: oklch(0.15 0.01 60);
    --foreground: oklch(0.92 0.01 85);
    --card: oklch(0.18 0.01 60);
    --card-foreground: oklch(0.92 0.01 85);
    --popover: oklch(0.18 0.01 60);
    --popover-foreground: oklch(0.92 0.01 85);

    --secondary: oklch(0.25 0.01 60);
    --secondary-foreground: oklch(0.85 0.01 85);
    --muted: oklch(0.28 0.01 60);
    --muted-foreground: oklch(0.7 0.01 85);

    --accent: oklch(0.35 0.05 120);
    --accent-foreground: oklch(0.95 0.01 85);

    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);

    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.65 0.08 140);

    --sidebar: oklch(0.18 0.01 60);
    --sidebar-foreground: oklch(0.92 0.01 85);
    --sidebar-primary: oklch(0.65 0.08 140);
    --sidebar-primary-foreground: oklch(0.15 0.01 60);
    --sidebar-accent: oklch(0.28 0.01 60);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.65 0.08 140);
}

/* =========================================================
   Base Styles (formerly @layer base)
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden; /* Prevents horizontal overflow */
    margin: 0;
    padding: 0;
    font-family: var(--font-poppins);
}

* {
    border-color: var(--border);
    outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
}

body {
    background-color: var(--background);
    /* color: var(--foreground); */
    color: #2a3333;
    font-family: var(--font-poppins);
}

h1 {
    word-break: break-all;
}

.great-title {
    font-family: var(--font-poppins) !important;
    font-size: 26px;
}

.leads-font {
    font-family: var(--font-poppins);
}

/* Primary Colors */
.deep-green-back {
    background-color: #2a3333 !important;
}
.deep-green-color {
    color: #2a3333 !important;
}

.khaki-back {
    background-color: #817364 !important;
}
.khaki-color {
    color: #817364 !important;
}

/* Secondary Colors */
.brics-back {
    background-color: #995840 !important;
}
.brics-color {
    color: #995840 !important;
}

.light-choco-back {
    background-color: #c6bdb3 !important;
}
.light-choco-color {
    color: #c6bdb3 !important;
}

.mid-grey-back {
    background-color: #7e7c6e !important;
}
.mid-grey-color {
    color: #7e7c6e !important;
}

/* Pointer cursor rules */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled),
a[href],
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled) {
    cursor: pointer;
}
.bg-card {
    background-color: #fdfcf8 !important;
}
.bg-card:hover {
    background-color: #f6f3ef !important;
}
.font-light {
    font-weight: 200 !important;
}
#pillars {
    background: #f6f3ef;
}
#facilities {
    background: #faf8f5;
}
#services {
    background: #f6f3ef;
}
#contact {
    background: #faf8f5;
}
.bg-primary {
    background: #5d2725 !important;
}

.book-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    white-space: nowrap;
    flex-shrink: 0;

    font-size: 0.875rem;
    font-weight: 500;

    height: 2.25rem;
    padding: 0.25rem 2rem;

    border-radius: 0.375rem;
    background-color: var(--primary);
    color: var(--primary-foreground);

    transition: all 150ms ease;
    outline: none;
}

.book-now:hover {
    background-color: color-mix(in srgb, var(--primary) 90%, transparent);
}

.book-now:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.book-now:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

.book-now[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 20%, transparent);
}

.dark .book-now[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
}

.book-now svg {
    pointer-events: none;
    flex-shrink: 0;
}

.book-now svg:not([class*="size-"]) {
    width: 1rem;
    height: 1rem;
}

.book-now:has(> svg) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* ─────────────── FOOTER ─────────────── */
footer {
    background: var(--ink);
    color: rgba(235, 232, 229, 0.7);
    padding: 80px 44px 30px;
}
.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}
.footer-col h4 {
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: 22px;
}
.footer-col a {
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
    transition: color 0.3s;
    cursor: pointer;
}
.footer-col a:hover {
    color: var(--rust);
}
.footer-brand {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: 18px;
}
.footer-brand small {
    display: block;
    font-family: var(--display);
    font-size: 8.5px;
    font-weight: 300;
    letter-spacing: 0.32em;
    margin-top: 8px;
    opacity: 0.7;
}
.footer-tag {
    font-family: var(--body);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    max-width: 280px;
    color: rgba(235, 232, 229, 0.78);
}
.footer-bottom {
    max-width: var(--maxw);
    margin: 0 auto;
    border-top: 1px solid rgba(235, 232, 229, 0.1);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(235, 232, 229, 0.45);
}

/* =========================================================
   Components
   ========================================================= */

/* Container utility */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* 16px */
    padding-right: 1rem;
}

@media (max-width: 980px) {
    .nav-items .nav-link {
        display: none;
    }
    .main-nav {
        padding: 18px 24px;
    }
    .hero-inner {
        padding: 0 24px;
    }
    .hero-content {
        max-width: 100%;
    }
    .forest-section,
    .heritage,
    .experiences,
    .location,
    .immerse,
    .amenity-strip,
    .welcome-split,
    .apartments,
    .facilities,
    .reviews,
    .newsletter,
    .pillars,
    footer {
        padding-left: 24px;
        padding-right: 24px;
    }
    .routes {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .welcome-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .apt-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .fac-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .exp-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .location-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .amenity-inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}
@media (max-width: 640px) {
    .hero::after {
        background: linear-gradient(
            180deg,
            rgba(20, 25, 22, 0.45) 0%,
            rgba(20, 25, 22, 0.25) 30%,
            rgba(20, 25, 22, 0.55) 100%
        );
    }
}
@media (max-width: 520px) {
    .hero h1 {
        font-size: 44px;
    }
    .forest-h2 {
        font-size: 30px;
    }
    .welcome-h,
    .section-head .title,
    .newsletter h3 {
        font-size: 28px;
    }
    .amenity-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .input-row {
        flex-direction: column;
    }
    .input-row .btn {
        width: 100%;
    }
    .testimonial .quote {
        font-size: 24px;
    }
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem; /* 24px */
        padding-right: 1.5rem;
    }
    .header-menu-nav {
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem; /* 32px */
        padding-right: 2rem;
        max-width: 1280px;
    }
}