/*

=========================================================

BLACK BORREGO — GLOBAL CSS (/inc/bb_css.php)

Brand Archetype: Outlaw / Hero / Sage

Brand Colors: Iron Black, Desert Ivory, Saddle Brown

=========================================================

*/

:root {

--iron-black: #1A1A1A;

--desert-ivory: #E8E1D6;

--saddle-brown: #6B4A2E;

}

body {

background-color: var(--desert-ivory);

background-image: url('/assets/textures/bb_paper.jpg');

background-position: center top;

background-size: cover;

background-attachment: fixed;

color: var(--iron-black);

font-family: 'Georgia', serif;

margin: 0;

padding: 0;

line-height: 1.6;

}

/* Headings */

h1, h2, h3 {

font-family: 'Arial Black', sans-serif;

text-transform: uppercase;

letter-spacing: -1px;

margin: 0;

}

a {

transition: 0.3s ease-in-out;

}

/* =========================================================

LAYOUT STRUCTURE

========================================================= */

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 5%;

display: flex;

justify-content: space-between;

align-items: center;

}

/* =========================================================

HEADER & BRANDING

========================================================= */

.site-header {

background-color: var(--iron-black);

background-image: url('/assets/textures/bb_iron.jpg');

background-position: center center;

background-size: cover;

border-bottom: 3px solid var(--saddle-brown);

padding: 20px 0;

position: -webkit-sticky;

position: sticky;

top: 0;

z-index: 1000;

}

.brand-title {

display: flex;

align-items: center;

margin: 0;

}

.brand-link {

display: flex;

align-items: center;

text-decoration: none;

color: var(--desert-ivory);

font-size: 32px;

font-weight: 900;

line-height: 1;

}

.brand-ranch {

font-family: 'Georgia', serif;

font-style: italic;

font-size: 22px;

margin-left: 12px;

color: var(--desert-ivory);

border-left: 1px solid var(--saddle-brown);

padding-left: 12px;

}

/* =========================================================

NAVIGATION & HAMBURGER BASE

========================================================= */

.nav {

display: flex;

gap: 30px;

}

.nav a {

text-decoration: none;

color: var(--desert-ivory);

font-weight: bold;

text-transform: uppercase;

font-size: 13px;

letter-spacing: 0.5px;

white-space: nowrap;

}

.nav a:hover {

color: var(--saddle-brown);

}

.nav-toggle {

display: none;

}

.nav-toggle-label {

display: none;

cursor: pointer;

padding: 10px 0;

}

.nav-toggle-label span,

.nav-toggle-label span::before,

.nav-toggle-label span::after {

display: block;

background: var(--desert-ivory);

height: 2px;

width: 28px;

position: relative;

transition: all 0.3s ease-in-out;

}

.nav-toggle-label span::before,

.nav-toggle-label span::after {

content: '';

position: absolute;

}

.nav-toggle-label span::before { bottom: 8px; }

.nav-toggle-label span::after { top: 8px; }


.nav-lock {
    display: inline-block;
    padding: 0px 5px;
    transition: opacity 0.2s ease;
}

.nav-lock:hover {
    opacity: 0.7;
}


/* =========================================================

HERO SECTION & BUTTONS

========================================================= */

.hero-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px 20px 80px;
    box-sizing: border-box;
    overflow: hidden;
}

/* VIDEO BACKGROUND */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* DARK OVERLAY (matches your previous gradient) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}

/* TEXT ABOVE VIDEO */
.hero-text {
    position: relative;
    z-index: 2;
    color: #fff;
}


.hero-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/textures/grain-200x.png');
    background-repeat: repeat;
    opacity: 0.4;
    z-index: 2;
    pointer-events: none;
}




.hero-text h2 {

font-size: 4.5rem;

margin-bottom: 10px;

color: #ffffff;

}

.hero-text p {

font-family: 'Georgia', serif;

font-style: italic;

font-size: 1.8rem;

margin-bottom: 40px;

color: #ffffff;

}

.btn-ranch {

background-color: var(--saddle-brown);

color: #ffffff;

padding: 15px 35px;

text-decoration: none;

font-weight: bold;

text-transform: uppercase;

border-radius: 2px;

display: inline-block;

}

.btn-ranch:hover {

background-color: var(--iron-black);

}

.btn-ranch.dark {

background-color: var(--iron-black);

}

.btn-ranch.dark:hover {

background-color: var(--saddle-brown);

}

/* =========================================================

CONTENT SECTIONS

========================================================= */

.content-section {

padding: 80px 10%;

text-align: center;

}

.content-section.bordered {

padding: 60px 10%;

border-top: 2px solid var(--saddle-brown);

}

.section-inner {

max-width: 850px;

margin: 0 auto;

}

.section-title {

color: var(--saddle-brown);

margin-bottom: 20px;

font-size: 2.5rem;

}

.section-title.dark {

color: var(--iron-black);

font-size: 2rem;

}

.section-text {

font-size: 1.4rem;

color: var(--iron-black);

font-family: 'Georgia', serif;

line-height: 1.8;

margin-bottom: 30px;

}

/* =========================================================

CELL PHONE RECEIVERS (MOBILE RESPONSIVENESS)

========================================================= */

@media (max-width: 850px) {

.site-header {

position: relative;

}

.container {

flex-direction: row;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

gap: 0;

}

.brand-title {

display: flex;

flex-direction: row;

flex-wrap: nowrap;

align-items: center;

white-space: nowrap;

}

.brand-link {

font-size: 18px;

white-space: nowrap;

}

.brand-link img {

height: 30px !important;

}

.brand-ranch {

font-size: 16px;

border-left: 1px solid var(--saddle-brown);

padding-left: 8px;

margin-left: 8px;

margin-top: 0;

white-space: nowrap;

}

/* Hamburger Activation */

.nav-toggle-label {

display: block;

}

.nav {

display: none;

width: 100%;

flex-direction: column;

align-items: center;

padding-top: 25px;

padding-bottom: 10px;

gap: 20px;

}

.nav-toggle:checked ~ .nav {

display: flex;

}

.nav-toggle:checked ~ .nav-toggle-label span {

background: transparent;

}

.nav-toggle:checked ~ .nav-toggle-label span::before {

transform: rotate(45deg);

bottom: 0;

}

.nav-toggle:checked ~ .nav-toggle-label span::after {

transform: rotate(-45deg);

top: 0;

}

/* General Layout Tweaks */

.hero-text {

margin-top: 20px;

}

.hero-text h2 {

font-size: 2.5rem;

}

.hero-text p {

font-size: 1.2rem;

}

.section-title {

font-size: 2rem;

}

}