/* -------------------------
COLOR PALETTE
-------------------------- */

:root {
--campaign-red: #9e1b32;
--campaign-red-dark: #7f1528;
--navy: #172a46;
--warm-white: #faf9f6;
--gold: #d4af37;
--charcoal: #252525;
}


/* -------------------------
BASIC RESET
-------------------------- */

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background-color: var(--warm-white);
color: var(--charcoal);
font-family: "Source Sans 3", Arial, sans-serif;
}


/* -------------------------
HEADER
-------------------------- */

.site-header {
background-color: var(--campaign-red);
color: white;
text-align: center;
padding-top: 28px;
}

.header-title h1 {
font-family: "Merriweather", Georgia, serif;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
letter-spacing: 2px;
margin: 0;
}

.header-title p {
font-family: "Merriweather", Georgia, serif;
font-size: 1rem;
letter-spacing: 4px;
margin: 8px 0 25px;
}


/* -------------------------
NAVIGATION
-------------------------- */

.main-nav {
background-color: var(--campaign-red-dark);

display: flex;
justify-content: center;
flex-wrap: wrap;

gap: 35px;

padding: 14px 20px;
}

.main-nav a {
color: white;
text-decoration: none;

font-weight: 700;
font-size: 0.95rem;

text-transform: uppercase;
letter-spacing: 1px;
}

.main-nav a:hover {
color: #f5df91;
}


/* -------------------------
HERO
-------------------------- */

.hero {
max-width: 1200px;

margin: 0 auto;

min-height: 570px;

display: grid;
grid-template-columns: 1fr 1fr;

align-items: center;

gap: 60px;

padding: 60px 40px;
}


/* HERO TEXT */

.eyebrow {
color: var(--campaign-red);

font-weight: 700;
letter-spacing: 3px;

margin-bottom: 15px;
}

.hero h2 {
font-family: "Merriweather", Georgia, serif;

color: var(--navy);

font-size: clamp(2.5rem, 5vw, 4.5rem);

line-height: 1.15;

margin: 0 0 25px;
}

.hero-description {
font-size: 1.25rem;
line-height: 1.6;

max-width: 520px;
}


/* -------------------------
BUTTONS
-------------------------- */

.hero-buttons {
display: flex;
flex-wrap: wrap;

gap: 15px;

margin-top: 30px;
}

.button {
display: inline-block;

padding: 13px 25px;

text-decoration: none;

font-weight: 700;

border-radius: 3px;

text-transform: uppercase;

letter-spacing: 1px;
}

.primary-button {
background-color: var(--campaign-red);
color: white;
}

.primary-button:hover {
background-color: var(--campaign-red-dark);
}

.secondary-button {
color: var(--navy);

border: 2px solid var(--navy);
}

.secondary-button:hover {
background-color: var(--navy);
color: white;
}


/* -------------------------
CLINTON PHOTO
-------------------------- */

.hero-photo {
display: flex;
justify-content: center;
}

.hero-photo img {
width: 100%;

max-width: 460px;

height: 500px;

object-fit: cover;

object-position: center top;

border-radius: 4px;

box-shadow: 12px 12px 0 var(--campaign-red);
}


/* -------------------------
MOBILE
-------------------------- */

@media (max-width: 750px) {

.site-header {
padding-top: 22px;
}

.header-title p {
letter-spacing: 2px;
}

.main-nav {
gap: 15px 25px;
}

.hero {
grid-template-columns: 1fr;

padding: 40px 25px;

gap: 40px;
}

.hero-text {
text-align: center;
}

.hero-description {
margin-left: auto;
margin-right: auto;
}

.hero-buttons {
justify-content: center;
}

.hero-photo img {
max-width: 400px;
height: 450px;
}
}


/* Stewardship & Accountability Section */

.stewardship {
background-color: var(--navy);
color: white;
padding: 75px 40px;
text-align: center;
}

.section-heading {
text-align: center;
max-width: 800px;
margin: 0 auto 50px;
}

.section-label {
color: #f0d77a;
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 10px;
}

.section-heading h2 {
font-family: "Merriweather", Georgia, serif;
font-size: clamp(2rem, 4vw, 3rem);
margin: 0;
}

.heading-line {
width: 70px;
height: 3px;
background-color: var(--campaign-red);
margin: 20px auto 0;
}

.stewardship-grid {
max-width: 1050px;
margin: 0 auto;

display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
}

.priority {
text-align: center;
}

.priority h3 {
font-family: "Merriweather", Georgia, serif;
font-size: 1.5rem;
margin: 0 0 15px;
}

.priority p {
font-size: 1.1rem;
line-height: 1.7;
margin: 0;
color: #f2f2f2;
}

@media (max-width: 750px) {

.stewardship {
padding: 55px 25px;
}

.stewardship-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}

/* -------------------------
MEET CLINTON
-------------------------- */

.about {
background-color: var(--warm-white);
padding: 80px 40px;
}

.about-container {
max-width: 900px;
margin: 0 auto;
}

.about-heading {
text-align: center;
margin-bottom: 45px;
}

.section-label-red {
color: var(--campaign-red);
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 10px;
}

.about-heading h2 {
font-family: "Merriweather", Georgia, serif;
color: var(--navy);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.25;
margin: 0;
}

.about-content {
max-width: 800px;
margin: 0 auto;
}

.about-content p {
font-size: 1.1rem;
line-height: 1.8;
margin: 0 0 24px;
color: var(--charcoal);
}

.about-closing {
font-family: "Merriweather", Georgia, serif;
font-size: 1.35rem !important;
font-weight: 700;
color: var(--campaign-red) !important;
text-align: center;
margin-top: 40px !important;
}


/* Meet Clinton on phones */

@media (max-width: 750px) {

.about {
padding: 55px 25px;
}

.about-heading {
margin-bottom: 35px;
}

.about-content p {
font-size: 1.05rem;
line-height: 1.7;
}
}

/* MEET CLINTON - PHOTO AND BIO LAYOUT */

.about-layout {
display: flex;
align-items: flex-start;
gap: 45px;
}

.about-photo {
flex: 0 0 300px;
}

.about-photo img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}

.military-disclaimer {
margin-top: 10px;
font-size: 10px;
line-height: 1.4;
color: #666666;
text-align: left;
}

.about-content {
flex: 1;
min-width: 0;
}


/* MOBILE */

@media (max-width: 768px) {

.about-layout {
flex-direction: column;
gap: 25px;
}

.about-photo {
width: 100%;
max-width: 320px;
margin: 0 auto;
flex: none;
}

.military-disclaimer {
text-align: center;
}

}