/* ==========================================================================
   Kilombo Tenondé — Identity Layer ("Terra & Axé")
   Loaded after design-system.css and dark-mode.css. Overrides tokens and
   re-skins shared components WITHOUT touching page markup or JS hooks.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
    /* -- Palette: terracotta earth, cacao, forest canopy, ochre sun -- */
    --color-bg: #F7F1E5;               /* warm cream */
    --color-surface: #FFFDF7;          /* soft paper */
    --color-sand: #F0E6D2;             /* deeper cream section */
    --color-text: #2B2118;             /* cacao ink */
    --color-text-secondary: #6B5844;
    --color-text-muted: #7D6B54;
    --color-border: #E2D5BC;
    --color-accent: #B4552D;           /* terracotta — THE moment */
    --color-accent-dark: #8F3F1F;
    --color-accent-light: #F3DFCE;
    --color-green: #3E5C41;            /* canopy green support */
    --color-green-deep: #1E3A29;

    /* legacy gradient aliases mapped to new hues */
    --gradient-coral: #B4552D;
    --gradient-terracotta: #8F3F1F;
    --gradient-gold: #D99A2B;
    --gradient-sand: #F0E6D2;
    --gradient-cream: #F7F1E5;

    /* ochre highlight used sparingly */
    --kilo-ochre: #D99A2B;

    /* -- Typography: expressive serif display + humanist sans body -- */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* -- Shape language: softer, more organic -- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* -- Shadows: warm-tinted, gentle -- */
    --shadow-sm: 0 1px 3px rgba(43,33,24,.07);
    --shadow-md: 0 4px 14px -2px rgba(43,33,24,.10);
    --shadow-lg: 0 16px 40px -8px rgba(43,33,24,.16);

    /* texture + pattern hooks */
    --kilo-pattern: url('../images/identity/pattern-tile.webp');
    --kilo-divider: url('../images/identity/divider.webp');
}

/* ======================= Dark mode ("Noite na Roça") ==================== */
[data-theme="dark"] {
    --color-bg: #191512;
    --color-surface: #231D18;
    --color-sand: #2A231C;
    --color-text: #F3EADB;
    --color-text-secondary: #CBBBA4;
    --color-text-muted: #A99A82;
    --color-border: #3A3026;
    --color-accent: #E07A4A;
    --color-accent-dark: #C4632F;
    --color-accent-light: #3A281D;
    --color-green: #7FA184;
    --color-green-deep: #14251B;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 14px -2px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 40px -8px rgba(0,0,0,.6);
}

/* ============================== Typography ============================= */
h1, h2, h3, .section-title, .hero-title {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}
h1 { line-height: 1.08; }
h2 { line-height: 1.15; }
body { letter-spacing: 0.005em; }

::selection { background: var(--color-accent); color: #FFF8EC; }

/* ============================ Body texture ============================= */
body {
    background-color: var(--color-bg);
    background-image:
        radial-gradient(rgba(180,85,45,.035) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ================================ Nav ================================== */
.nav {
    background: color-mix(in srgb, var(--color-bg) 88%, transparent) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}
.nav-logo {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 1.15rem;
    color: var(--color-text) !important;
    gap: .55rem;
}
.nav-logo-img {
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    padding: 1px;
    width: 34px; height: 34px; object-fit: cover;
}
.nav-links a {
    font-weight: 600 !important;
    font-size: .92rem;
    position: relative;
    transition: color var(--transition-fast);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -6px;
    width: 0; height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--transition-base);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 60%; }
.nav-links a[aria-current="page"] { color: var(--color-accent); }

/* ============================== Buttons ================================ */
.btn,
button.btn {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    border-radius: 999px !important;
    padding: .8rem 1.7rem !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base) !important;
}
.btn-primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
    color: #FFF8EC !important;
    box-shadow: 0 4px 14px -4px rgba(180,85,45,.45);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -6px rgba(180,85,45,.55);
}
.btn:not(.btn-primary):not(.btn-outline) {
    background: var(--color-green) !important;
    color: #FFF8EC !important;
    box-shadow: 0 4px 14px -6px rgba(62,92,65,.5);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* =============================== Cards ================================= */
.card, .room-card, .product-card, .event-card, .retreat-card, .volunteer-info-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-surface) !important;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover, .product-card:hover, .event-card:hover, .retreat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

/* =========================== Section rhythm ============================ */
.section, section { position: relative; }
.section-title::after {
    content: '';
    display: block;
    width: 64px; height: 4px;
    margin-top: .7rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--kilo-ochre));
}

/* decorative pattern band utility (opt-in class, safe no-op if unused) */
.kilo-pattern-band {
    height: 14px;
    background-image: var(--kilo-pattern);
    background-size: auto 14px;
    background-repeat: repeat-x;
    border-radius: 4px;
    opacity: .9;
}

/* =============================== Footer ================================ */
.footer {
    background:
        linear-gradient(rgba(30,58,41,.96), rgba(30,58,41,.96)),
        var(--kilo-pattern);
    background-size: auto, 420px;
    color: #EFE6D4 !important;
}
.footer-heading { color: var(--kilo-ochre) !important; font-family: var(--font-display) !important; }
.footer-text, .footer-brand { color: #EFE6D4 !important; }
.footer-links a { color: #D9CBAD !important; transition: color var(--transition-fast); }
.footer-links a:hover { color: var(--kilo-ochre) !important; }
.footer-bottom { border-top: 1px solid rgba(239,230,212,.18); }
.footer-admin-link { color: #B8AA8C !important; }
.footer-admin-link:hover { color: var(--kilo-ochre) !important; }

/* ============================== Forms ================================== */
.form-input, input[type="text"], input[type="email"], input[type="date"], select, textarea {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--color-border) !important;
    background: var(--color-surface) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(180,85,45,.15) !important;
}

/* =========================== Theme toggle ============================== */
.theme-toggle {
    border: 1.5px solid var(--color-border) !important;
    border-radius: 999px !important;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface) !important;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.theme-toggle:hover { border-color: var(--color-accent) !important; transform: rotate(12deg); }
.theme-toggle svg { stroke: currentColor; width: 18px; height: 18px; fill: none; }
[data-theme="dark"] .sun-icon svg { stroke: var(--kilo-ochre); }
.moon-icon svg { stroke: var(--color-green); }

/* ========================= Language menu =============================== */
.language-trigger {
    border: 1.5px solid var(--color-border) !important;
    border-radius: 999px !important;
    background: var(--color-surface) !important;
    font-weight: 700;
}
.language-list {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.language-option:hover { background: var(--color-accent-light) !important; }

/* ==================== Nav rescue (fixes BOOK STAY wrap, ================
   ====== cramped links, logo hugging edge, widget-y controls) ========== */
.nav-container {
    max-width: var(--container-max);
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
    gap: 1.5rem;
}
.nav-links {
    gap: clamp(.9rem, 2vw, 1.6rem) !important;
    flex-wrap: nowrap;
}
.nav-links a { white-space: nowrap; font-size: .88rem !important; }
@media (max-width: 1080px) and (min-width: 861px) {
    .nav-links a { font-size: .8rem !important; letter-spacing: 0 !important; }
}
.nav-links li { display: flex; }

/* theme + language controls: unified pill family */
.theme-toggle, .language-trigger {
    height: 38px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ============================ Motion respect =========================== */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ============================ Mobile tuning ============================ */
@media (max-width: 768px) {
    .nav-logo { font-size: 1.02rem; }
    .btn, button.btn { min-height: 46px; }
    .hero h1, .shop-hero h1, .page-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .footer { background-size: auto, 300px; }
}


/* ============ Contrast safety net (both modes) ==================== */
/* Any element that hardcodes light-mode ink gets theme-aware ink */
[data-theme="dark"] .product-desc,
[data-theme="dark"] .product-name-pt,
[data-theme="dark"] .shop-footer,
[data-theme="dark"] .retreats-section p { color: var(--color-text-secondary); }

/* Ensure text sitting on accent backgrounds stays readable in both modes */
.btn-primary, button.btn-primary, .footer-submit-btn {
    color: #FFF8EC !important;
}
.footer input.footer-input { color: var(--color-text); background: rgba(255,253,247,.96) !important; }

/* Badge/pill contrast inside cards */
.badge, .price-option { color: var(--color-accent-dark); }
[data-theme="dark"] .badge, [data-theme="dark"] .price-option { color: var(--kilo-ochre); }

/* Links inside content areas keep accessible contrast */
main a:not(.btn):not(.nav-logo) { color: var(--color-green); }
[data-theme="dark"] main a:not(.btn):not(.nav-logo) { color: #A5C9AA; }
main a:not(.btn):not(.nav-logo):hover { color: var(--color-accent); }


/* ============ Site-wide hero background (kilombo-aerial.jpg) ============
   One coherent treatment: bright aerial photo behind a dark scrim so the
   white hero text reads clearly in every mode and on every hero variant. */
header.hero:not(.no-kilo-hero),
section.hero:not(.no-kilo-hero),
section.page-hero, section.shop-hero,
section.retreats-hero, section.hero-section,
main > section:first-of-type:not(.no-kilo-hero):not([id]):has(h1) {
    position: relative;
    background-image:
        linear-gradient(rgba(24,18,14,.68), rgba(24,18,14,.55)),
        url('../images/kilombo-aerial.jpg');
    background-size: cover;
    background-position: center;
    background-color: #1E3A29;
    color: #FFF8EC;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
header.hero h1, section.hero h1,
section.page-hero h1, section.shop-hero h1,
section.retreats-hero h1, section.hero-section h1,
header.hero .text-lead, header.hero .subtitle,
section.hero .text-lead, section.hero .subtitle,
section.page-hero p, section.shop-hero p,
section.retreats-hero p, section.hero-section p {
    color: #FFF8EC;
    text-shadow: 0 1px 18px rgba(0,0,0,.6);
}
[data-theme="dark"] header.hero:not(.no-kilo-hero),
[data-theme="dark"] section.hero:not(.no-kilo-hero),
[data-theme="dark"] section.page-hero, [data-theme="dark"] section.shop-hero,
[data-theme="dark"] section.retreats-hero, [data-theme="dark"] section.hero-section,
[data-theme="dark"] main > section:first-of-type:not(.no-kilo-hero):not([id]):has(h1) {
    background-image:
        linear-gradient(rgba(15,11,9,.78), rgba(15,11,9,.62)),
        url('../images/kilombo-aerial.jpg');
    background-color: #0F0B09;
}
.retreats-hero .btn-secondary, .page-hero .btn-secondary {
    background: rgba(255,248,236,.94) !important;
    color: var(--color-green-deep) !important;
}

/* The trust/info card inside the retreats hero is a WHITE surface — its
   text must stay dark, not inherit the hero's white-on-photo color. */
.retreats-trust,
.retreats-trust h2,
.retreats-trust p {
    color: var(--color-text) !important;
    background: var(--color-surface);
}
[data-theme="dark"] .retreats-trust,
[data-theme="dark"] .retreats-trust h2,
[data-theme="dark"] .retreats-trust p {
    color: var(--color-text) !important;
    background: var(--color-surface);
}

/* ============ Compact hero (focus on content, not the banner) =========== */
.hero,
header.hero,
section.hero {
    min-height: 0 !important;
    min-height: auto !important;
    padding: var(--space-8) var(--space-4) var(--space-6) !important;
    padding-top: calc(var(--space-6) + 72px) !important;
}
.hero h1, header.hero h1, section.hero h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.1 !important;
}
.hero .text-lead, header.hero .text-lead, section.hero .text-lead {
    font-size: var(--text-lg) !important;
    max-width: 56ch;
}
.retreats-hero { padding-top: 5.5rem !important; padding-bottom: 2.5rem !important; }
.retreats-hero h1 { font-size: clamp(2rem, 4vw, 3rem) !important; }
.shop-hero, .page-hero { padding-top: 5rem !important; padding-bottom: 2.5rem !important; }
@media (max-width: 768px) {
    .hero, header.hero, section.hero {
        padding: var(--space-6) var(--space-3) var(--space-5) !important;
        padding-top: calc(var(--space-5) + 64px) !important;
    }
    .hero h1, header.hero h1, section.hero h1 { font-size: 1.9rem !important; }
}