/* ========================================
   GLOBAL STYLES - SHARED ACROSS ALL PAGES
   ======================================== */

/* ===== FONTS ===== */
/* Load custom Sansation font */
@font-face {
    font-family: "Sansation";
    src: url("fonts/sansation.regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Apply Sansation font to paragraphs */
p {
	font-family: Sansation;
}

/* ===== COLOR VARIABLES ===== */
/* Tuning knobs: change brand color site-wide => --brand, container max width => --maxw,
   logo size => --logo-size */
:root {
	--bg: #FDFBF0; /* off-white */
	--ink: #1d1f1e;
	--muted: #5e625e;
	--brand: #465940; /* provided green */
	--brand-800: #2f4031;
	--white: #FDFBF0;
	--maxw: 1120px;
	--logo-size: 40px; /* fixed logo size applied site-wide */
}

/* ===== GLOBAL RESET ===== */
* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: Sansation;
	line-height: 1.6;
}

/* Global fluid media */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent layout shift on small screens */
.container {
    width: 100%;
}

/* ===== TYPOGRAPHY ===== */
/* Remove all italic styling from semantic and presentational elements */
em, i, dfn, cite, var, address { font-style: normal; }

/* Global heading typography - Amagro, forced upright */
h1, h2, h3, h4, h5, h6 {
	font-family: "Amagro";
	font-weight: 400;
	font-style: normal;
	font-synthesis: none;
}

/* ===== LAYOUT CONTAINERS ===== */
.container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 20px;
}

/* ===== HEADER & NAVIGATION ===== */
/* Tuning knobs: sticky header height => .header-inner height, nav gaps => .nav ul gap,
   active underline thickness => .nav a.active text-decoration-thickness */
.site-header {
    background: #FDFBF0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

/* Logo */
.logo {
    font-family: "Sansation";
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--brand);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.logo:hover {
    opacity: 0.8;
}

.logo-img {
    height: var(--logo-size);
    width: auto;
	object-fit: contain;
}

/* Navigation Menu */
.nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	align-items: center;
}

.nav a {
    text-decoration: none;
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.nav a:hover,
.nav a:focus {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.nav a.active {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: var(--brand-800);
}

.dropdown-arrow {
    width: 12px;
    height: 12px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.has-dropdown { position: relative; }
.has-dropdown .dropdown {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 300px;
	background: var(--white);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	border: 1px solid rgba(0,0,0,0.05);
	padding: 8px 0;
	display: none;
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown li { padding: 0; }
.dropdown a { 
	display: block; 
	padding: 10px 14px; 
	color: var(--brand); 
	font-weight: 700; 
	line-height: 1.5; 
	white-space: normal; 
	text-decoration: none;
}
.dropdown a:hover { 
	background: #FDFBF0; 
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mobile-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	font-size: 22px;
}

/* ===== BUTTONS ===== */
.btn {
	display: inline-block;
	background: var(--brand);
	color: var(--white);
	padding: 10px 18px;
	border-radius: 3px;
	text-decoration: none;
	font-size: 14px;
	box-shadow: 0 2px 0 var(--brand-800);
}
.btn:hover { filter: brightness(1.05); }
.btn-light {
	background: var(--white);
	color: var(--ink);
	box-shadow: none;
}

/* ===== SECTIONS ===== */
.section { padding: 72px 0; }
.section-intro { 
	text-align: center; 
	max-width: 760px; 
	margin: 0 auto 28px auto; 
	color: var(--muted); 
}
.section-divider { 
	width: 220px; 
	margin: 14px auto 10px; 
	border: 0; 
	border-top: 2px solid rgba(70, 89, 64, 0.35); 
}

/* ===== HOMEPAGE MOBILE RESPONSIVE ===== */
@media (max-width: 900px) {
	.story-grid { grid-template-columns: 1fr; }
	.cards { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    /* Shared mobile nav menu styling used by all pages */
    .nav ul {
        display: none;
        position: absolute;
        right: 20px;
        top: 64px;
        background: #FDFBF0;
        padding: 14px;
        border: 1px solid #e5e5df;
        border-radius: 6px;
        flex-direction: column;
        gap: 12px;
        z-index: 110;
    }
    .nav ul.open { display: flex; }
    .mobile-nav-toggle { display: inline-block; }
    .footer-grid { grid-template-columns: 1fr; }

    /* Mobile spacing utilities */
    .section { padding: 48px 0; }
}