/* ─── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-primary:    #2C3E50;
    --color-accent:     #E67E22;
    --color-bg:         #FAFAFA;
    --color-text:       #222222;
    --color-muted:      #777777;
    --font-main:        'Inter', system-ui, sans-serif;
    --max-width:        1200px;
    --radius:           8px;
    --spacing:          1.5rem;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }

/* ─── Layout Helpers ─────────────────────────────────────── */
.site-main { flex: 1; }

/* ─── Header ─────────────────────────────────────────────── */
.site-header {
    width: 100%;
    height: 10vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo {
    height: 6vh;
    width: auto;
}

/* ─── Search Hero ─────────────────────────────────────────── */
.search-hero {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.search-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.search-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.search-hero > :not(.search-hero__video):not(.search-hero__overlay) {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin-top: 4rem;
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
    width: 100%;
    height: 10vh;
    background: #000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.25rem;
}

.site-footer p {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

/* ─── Properties page ────────────────────────────────────── */
.properties-page .vblistcontainer {
    padding: 0 15vw;
}

/* ─── Search results page ────────────────────────────────── */
/* Width is constrained via VikBooking containers in vikbooking_custom.css.
   This rule fires only when the Search Results template is explicitly
   assigned to the page in WP admin. */
.search-results-page {
    padding: 0;
}

/* ─── Room details page ───────────────────────────────────── */
.room-details-page {
    padding: 2rem 15vw;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-header, .site-footer { height: auto; min-height: 10vh; }
}