/* =========================================================
   Bosveldrus - Modern base layer + legacy components cleanup
   Works with Bootstrap 5
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --bg: #D9CBA0;
    --surface: #ffffff;
    --surface-2: #f8f5ea;
    --text: #1f2328;
    --muted: #6c757d;
    --brand: #2f6f4e; /* bushveld green */
    --brand-2: #c57f2e; /* warm accent */

    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 10px 30px rgba(0,0,0,.10);
    --shadow-sm: 0 6px 16px rgba(0,0,0,.10);
    --content-max: 1100px;
}

/* ---------- Base / typography ---------- */
html, body {
    height: 100%;
}

    body.mainbody {
        background: var(--bg);
        color: var(--text);
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    margin-top: 0;
}

p {
    cursor: default;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

/* Keep line lengths readable without breaking Bootstrap containers */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: var(--content-max);
}

/* ---------- Buttons (Bootstrap override) ---------- */
.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    border-radius: 999px !important;
    padding: .7rem 1.1rem !important;
    font-weight: 600 !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: #275c40 !important;
        border-color: #275c40 !important;
    }

/* Optional: a secondary brand button */
.btn-outline-primary {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: var(--brand) !important;
        border-color: var(--brand) !important;
        color: #fff !important;
    }

/* ---------- Utility: surface card wrapper (use on your <main>) ---------- */
.surface {
    background: var(--surface);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow-sm);
}

/* ---------- Website header image (if used) ---------- */
.websiteHeader {
    background-image: url("../../Images/WebsiteHeader.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* =========================================================
   Legacy Slideshow (custom)
   NOTE: Rename your old ".text" caption class -> ".slide-caption"
   ========================================================= */

/* Slideshow container */
.slideshow-container {
    max-width: 900px;
    position: relative;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #111;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Make slide images behave */
.slideshow-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Navigation buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 12px 14px;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    transition: background-color 0.25s ease, opacity 0.25s ease;
    border-radius: 8px;
}

/* =========================================================
   Landing page - bilingual rotator + property photo slideshow
   Used on the root index.html language-choice page
   ========================================================= */

/* Rotating EN/AF heading + tagline */
.lang-rotator {
    position: relative;
    min-height: 4.5rem; /* reserve space so layout doesn't jump between EN/AF line lengths */
}

.lang-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease;
}

.lang-slide.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* Rotating property photo slideshow */
.photo-slideshow {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.photo-slideshow .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-slideshow .slide.is-active {
    opacity: 1;
}

/* Blurred, scaled-up copy of the same photo fills the space behind it */
.photo-slideshow .slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.6);
    transform: scale(1.1); /* avoids blur revealing hard edges */
    z-index: 1;
}

/* The real photo sits centered, fully visible, never cropped */
.photo-slideshow .slide img {
    position: relative;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    z-index: 2;
}

@media (max-width: 576px) {
    .photo-slideshow {
        height: 260px;
    }

    .lang-rotator {
        min-height: 6.5rem;
    }
}