/* =========================================================
   COUNTRY TANYA × TEXAS RANCH
   Premium Western Design System
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Rye&family=Roboto+Slab:wght@500;600;700;800&display=swap");

:root {
    /* Texas Ranch palette */
    --color-cream: #f4ead8;
    --color-cream-dark: #e5d3b7;

    --color-forest: #211813;
    --color-forest-light: #38271d;

    --color-brown: #65452f;

    --color-terracotta: #a55332;
    --color-terracotta-dark: #78351f;

    --color-text: #2b211a;
    --color-text-soft: #6c5b4d;

    --color-white: #fffaf0;

    --color-border: rgba(72, 48, 31, 0.18);

    /* Texas materials */
    --texas-walnut: #241710;
    --texas-walnut-light: #392419;
    --texas-leather: #874a2c;
    --texas-leather-dark: #60301d;
    --texas-brass: #c49a58;
    --texas-brass-light: #e0bd7a;
    --texas-iron: #242321;
    --texas-paper: #f4ead8;

    --font-display: "Roboto Slab", Georgia, serif;
    --font-western: "Rye", Georgia, serif;
    --font-body: "DM Sans", sans-serif;

    --radius-sm: 5px;
    --radius-md: 9px;
    --radius-lg: 14px;

    --shadow-sm:
        0 4px 12px rgba(35, 22, 14, 0.08);

    --shadow-md:
        0 14px 32px rgba(35, 22, 14, 0.14);

    --shadow-lg:
        0 24px 60px rgba(20, 12, 8, 0.24);
}


/* =========================================================
   GLOBAL
   ========================================================= */

body {
    background:
        linear-gradient(
            rgba(255,255,255,.12),
            rgba(92,55,30,.025)
        ),
        var(--color-cream);

    color: var(--color-text);
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    color: var(--color-text);
}

.section-tag {
    font-family: var(--font-body);
    color: var(--texas-leather);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.section-tag::before {
    content: "★";
    color: var(--texas-brass);
    margin-right: 9px;
}

.section-tag::after {
    content: none;
}

.section-title {
    font-weight: 800;
    letter-spacing: -.025em;
}


/* =========================================================
   HEADER — DARK WALNUT / BLACK IRON
   ========================================================= */

.site-header {
    transition:
        background 260ms ease,
        box-shadow 260ms ease,
        border-color 260ms ease;
}

.site-header.solid {
    background:
        linear-gradient(
            180deg,
            rgba(43,27,18,.98),
            rgba(31,20,14,.98)
        );

    border-bottom: 1px solid rgba(196,154,88,.42);

    box-shadow:
        0 8px 30px rgba(15,9,6,.28);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header.solid .brand,
.site-header.solid .nav-links a {
    color: #f6e8cf;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.02em;
}

.brand-mark {
    position: relative;

    width: 44px;
    height: 44px;

    border-radius: 0;

    background:
        linear-gradient(
            145deg,
            #e1c07f,
            #b68745 58%,
            #8b642f
        );

    color: #2c2015;

    clip-path: polygon(
        50% 0%,
        61% 24%,
        85% 15%,
        76% 39%,
        100% 50%,
        76% 61%,
        85% 85%,
        61% 76%,
        50% 100%,
        39% 76%,
        15% 85%,
        24% 61%,
        0% 50%,
        24% 39%,
        15% 15%,
        39% 24%
    );

    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 800;

    box-shadow: none;

    transition:
        transform 300ms ease,
        filter 300ms ease;
}

.brand:hover .brand-mark {
    transform: rotate(7deg) scale(1.06);
    filter: brightness(1.08);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-links a {
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.nav-links a::after {
    height: 2px;
    background: var(--texas-brass);
}

.site-header.solid .site-lang-toggle {
    background: rgba(255,255,255,.08);
}

.site-header.solid .site-lang-toggle button {
    color: rgba(255,255,255,.68);
}

.site-header.solid .site-lang-toggle button.active {
    background: var(--texas-brass);
    color: #291c13;
}


/* =========================================================
   BUTTONS — COGNAC LEATHER
   ========================================================= */

.btn {
    position: relative;

    border-radius: 5px;

    padding: 14px 25px;

    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 700;

    letter-spacing: .035em;

    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.btn-primary,
.nav-cta.btn-secondary {
    color: #fff8ec;

    background:
        linear-gradient(
            180deg,
            #a95b35,
            #854126
        );

    border: 1px solid #bd754c;

    box-shadow:
        inset 0 1px rgba(255,255,255,.20),
        0 4px 0 #572a19,
        0 10px 22px rgba(50,25,15,.18);
}

.btn-primary:hover,
.nav-cta.btn-secondary:hover {
    background:
        linear-gradient(
            180deg,
            #b7653c,
            #91472a
        );

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.20),
        0 5px 0 #572a19,
        0 13px 26px rgba(50,25,15,.22);
}

.btn-primary:active,
.nav-cta.btn-secondary:active {
    transform: translateY(2px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.15),
        0 1px 0 #572a19;
}

.btn-secondary {
    color: var(--texas-walnut);

    border: 1px solid rgba(74,47,30,.48);

    background: rgba(255,250,240,.34);
}

.btn-secondary:hover {
    background: var(--texas-walnut);
    border-color: var(--texas-walnut);
    color: #fff5e5;
}

.btn-ghost {
    color: #fff6e8;

    border: 1px solid rgba(224,189,122,.58);

    background: rgba(27,17,11,.28);

    backdrop-filter: blur(4px);
}

.btn-ghost:hover {
    background: rgba(196,154,88,.18);
    border-color: var(--texas-brass-light);
}


/* =========================================================
   HERO — TEXAS RANCH CINEMATIC
   ========================================================= */

.hero {
    background: #1b120d;
}

.hero-media {
    filter:
        sepia(.10)
        saturate(.88)
        contrast(1.08)
        brightness(.88);

    background:
        linear-gradient(
            90deg,
            rgba(20,12,8,.94) 0%,
            rgba(27,16,10,.82) 32%,
            rgba(31,19,12,.52) 58%,
            rgba(24,15,10,.18) 82%,
            rgba(18,11,7,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(18,10,6,.36),
            transparent 45%
        ),
        url("../assets/images/hero-texas-ranch.png");

    background-size: cover;
    background-position: 82% 42%;
}


/* finom vignette */

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 46%,
            rgba(12,7,4,.28) 100%
        );

    z-index: 0;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
    max-width: 690px;
}

.hero-content::before {
    content: "★  COUNTRY TANYA  ★";

    display: inline-block;

    margin-bottom: 21px;

    padding: 7px 0;

    color: var(--texas-brass-light);

    border-top: 1px solid rgba(224,189,122,.52);
    border-bottom: 1px solid rgba(224,189,122,.52);

    font-family: var(--font-western);

    font-size: .72rem;

    letter-spacing: .19em;
}

.hero-eyebrow {
    color: #e6c58d;

    font-size: .76rem;

    font-weight: 700;

    letter-spacing: .18em;
}

.hero-eyebrow::before {
    content: none;
}

.hero h1 {
    max-width: 680px;

    margin-bottom: 23px;

    color: #fff7e9;

    font-family: var(--font-display);

    font-size: clamp(2.7rem, 5.3vw, 4.7rem);

    font-weight: 800;

    line-height: .99;

    letter-spacing: -.045em;

    text-shadow:
        0 3px 0 rgba(0,0,0,.16),
        0 15px 42px rgba(0,0,0,.38);
}

.hero h1::after {
    content: "";

    display: block;

    width: 96px;
    height: 2px;

    margin-top: 25px;

    background:
        linear-gradient(
            90deg,
            var(--texas-brass),
            rgba(196,154,88,0)
        );
}

.hero p {
    max-width: 570px;

    color: rgba(255,244,226,.82);

    font-size: 1.08rem;

    line-height: 1.72;

    text-shadow: 0 3px 14px rgba(0,0,0,.24);
}


/* =========================================================
   HERO SCROLL INDICATOR
   ========================================================= */

.hero-scroll-cue {
    color: rgba(239,215,176,.72);

    font-size: .68rem;

    letter-spacing: .18em;
}

.hero-scroll-cue .line {
    background:
        linear-gradient(
            var(--texas-brass),
            transparent
        );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .hero-media {
        background-position: 65% center;
    }

    .hero-content::before {
        font-size: .62rem;
        letter-spacing: .13em;
    }

    .hero h1 {
        font-size: clamp(2.25rem, 10vw, 3.2rem);
        line-height: 1.03;
    }

    .hero p {
        font-size: 1rem;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
    }
}/* =========================================================
   FINAL HERO BACKGROUND FIX
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    background: #1b120d;
}

.hero .hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(20, 12, 8, 0.92) 0%,
            rgba(20, 12, 8, 0.78) 28%,
            rgba(20, 12, 8, 0.45) 50%,
            rgba(20, 12, 8, 0.15) 72%,
            rgba(20, 12, 8, 0.04) 100%
        ),
        url("../assets/images/hero-texas-ranch.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    filter: none !important;

    z-index: 0 !important;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero::after {
    z-index: 1;
}