/* css/styles.css */
:root{
    --brand-wood: #866c4a;
    --brand-cream: #f6efdd;
    --accent: #4b2e1f;
    --muted: #6c6c6c;
    --radius: 8px;
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --shadow-1: 0 10px 30px rgba(33,33,33,.08);
    --shadow-2: 0 18px 40px rgba(33,33,33,.12);
    --font-body: 'Montserrat', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body {
    font-family: var(--font-body);
    font-size:16px;
    line-height:1.6;
    color:#222;
    background-color:#fff;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);margin:0 0 .5rem}

/* Header / Nav */
.navbar{box-shadow:0 2px 6px rgba(0,0,0,.06)}
.bg-theme{background-color:var(--brand-cream) !important}
.logo{height:48px}
.navbar .nav-link{color:var(--accent);font-weight:600}
.navbar .nav-link:hover{color:#000}

/* Hero */
.hero{
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    padding:3.5rem 1rem;
    background-color:var(--brand-wood);
    background-size:cover;
    background-position:center;
    position:relative;
}
.hero.hero-bottom{align-items:flex-end;padding-bottom:3.5rem}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.35));border-radius:0}
.hero .hero-inner{position:relative;z-index:2;max-width:1100px}

/* Semi-transparent content box over hero images */
.hero .hero-inner{
    display:inline-block;
    /* increased transparency for better image visibility */
    background: rgba(246,239,221,0.35); /* warm cream, matches brand (more transparent) */
    color: #fff; /* white text over hero */
    padding: 1.1rem 1.6rem;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(33,33,33,0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-align: center;
}

/* Hero heading: brand font, Title Case, improved tracking */
.hero .hero-inner h1{
    text-transform: none;
    letter-spacing: -0.02em;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 700;
    color: #000;
    margin: 0 0 0.25rem 0;
}
.hero .hero-inner p{
    text-transform: none; /* keep sentence case */
    font-style: italic;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    color: rgba(255,255,255,0.92); /* softer white for readability */
    letter-spacing: 0.01em;
    margin:0.25rem 0 0;
}

@media(max-width:576px){
    .hero .hero-inner{display:block;width:100%;padding:1rem;border-radius:8px}
}
.hero h1{
    font-weight: 700;
    font-size:clamp(1.6rem,3.5vw,3rem);
    margin-bottom:.5rem;
    letter-spacing: -0.02em;
}
.hero p{font-size:1.05rem;color:rgba(255,255,255,.95)}

/* Image helpers */
.responsive-img{width:100%;height:auto;display:block;object-fit:cover}
.img-cover{width:100%;height:100%;object-fit:cover}
.card-img-top{height:220px;object-fit:cover}

/* Cards */
.card{border:none;border-radius:var(--radius);box-shadow:var(--shadow-1);transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}

.process-section{background:#fafafa;padding:2.5rem;border-radius:8px}

/* Buttons */
.btn-primary{background:var(--accent);border:none}
.btn-primary:hover{background:rgba(75,46,31,.9)}

/* Footer */
footer{border-top:1px solid #eee;padding:1.25rem 0;background:#fff}

/* Utilities */
.container{max-width:1100px}

/* Desktop layout tweaks */
@media(min-width:992px){
    .hero{min-height:420px}
}

/* Mobile-first adjustments */
@media(max-width:768px){
    .card-img-top{height:160px}
    .process-section{padding:1.25rem}
}

/* Accessibility: focus state */
a:focus{outline:3px solid rgba(70,40,20,.12);outline-offset:2px}

/* Carousel image sizing fallback */
.carousel-img{
    width:100%;
    aspect-ratio: 16/9;
    max-height:480px;
    height:auto;
    object-fit:cover;
    object-position:center;
    background:transparent;
}

@media(min-width:992px){
    .carousel-img{max-height:520px}
}

/* Helpful classes for content authors */
.site-section{padding:3rem 1rem}
.section-title{text-align:center;margin-bottom:1.5rem}

/* Skip link for accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#000;color:#fff;z-index:10000;border-radius:4px}