/*
============================================================
4TFIED Technologies Website Framework
Copyright © 2026 Benjamin Pendleton / 4TFIED Technologies
All rights reserved.

This file is part of a proprietary website framework created
by 4TFIED Technologies.

Unauthorized copying, reuse, redistribution, resale, or use
on another website or project is prohibited without written
permission from 4TFIED Technologies.

Client receives permission to use this code only as part of
the approved website/project delivered by 4TFIED Technologies.

Author: Benjamin Pendleton
Website: https://4tfied.us
============================================================
*/

:root {
    --primary-green: #6FAF4A;
    --dark-green: #4E7F34;
    --accent-gold: #C89B3C;
    --light-cream: #F4F1E8;
    --warm-header: #F3EFE7;
    --warm-header-dark: #EDE5D8;
    --soft-brown: #5A4A3A;
}

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

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--light-cream);
    color: #222;
    line-height: 1.6;
}

/* CONTAINER */
.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

/* HEADER */
.site-header {
    background: linear-gradient(to bottom, var(--warm-header), var(--warm-header-dark));
    border-bottom: 3px solid var(--dark-green);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-wide {
    width: 100%;
    padding: 0 12px;
}

.header-inner {
    min-height: 175px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

/*
.brand {
    background: rgba(244, 241, 232, 0.75);
    padding: 8px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    display: inline-flex;
    align-items: center;
}
*/

.brand {
    background: #f3efe7;
    padding: 6px;
    border-radius: 12px;

    /* subtle inner edge (like a mounted plate) */
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.06),
        0 3px 8px rgba(0,0,0,0.15);

    display: inline-flex;
    align-items: center;
}
.logo {
    height: 125px;
    width: auto;
    display: block;
    border: none;
    border-radius: 8px;
}

/* NAVIGATION */
.nav {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
}

/* subtle tap rail */
.nav::before {
    content: "";
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(90, 74, 58, 0.14);
    border-radius: 999px;
}

.nav a {
    color: var(--soft-brown);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-left: 0;
    min-width: 78px;
    position: relative;
    z-index: 1;
}

.tap {
    height: 82px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: transform 0.18s ease;
    transform-origin: bottom center;
    position: relative;
}

.tap-svg {
    width: 44px;
    height: 82px;
    display: block;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25));
}

.label {
    color: var(--soft-brown);
    line-height: 1.1;
    transition: color 0.18s ease;
}

.nav a:hover .tap {
    transform: translateY(5px) rotate(1.5deg);
}

.nav a:hover .label {
    color: var(--primary-green);
}

.nav a.active .label {
    color: var(--primary-green);
    font-weight: 600;
}

.nav a.active .tap::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 12px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(200, 155, 60, 0.45);
    filter: blur(5px);
}

/* HERO */
.hero {
    padding: 80px 0;
    text-align: center;
    color: #ffffff;
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
        url('/assets/hero.jpeg') center/cover no-repeat;
}

.hero h1 {
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.hero p {
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* SECTIONS */
section {
    padding: 60px 0;
}

.intro {
    background: #ffffff;
}

.highlights {
    background: var(--light-cream);
}

.visit {
    background: #ffffff;
    text-align: center;
}

/* GRID */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* CARDS */
.card {
    background: #ffffff;
    border: 1px solid #e5e0d6;
    border-left: 4px solid var(--primary-green);
    padding: 20px;
    border-radius: 6px;
}

/* FOOTER */
.site-footer {
    background: #1a1d22;
    color: #ccc;
    padding: 30px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-inner a {
    color: var(--accent-gold);
    text-decoration: none;
}

/* PAGE HEADER */
.page-header {
    background: #ffffff;
    padding: 60px 0;
    border-bottom: 1px solid #e5e0d6;
}

.page-header h1 {
    margin-bottom: 10px;
}

/* EVENTS */
.events {
    padding: 60px 0;
    background: var(--light-cream);
}

.event-card {
    background: #ffffff;
    border: 1px solid #e5e0d6;
    border-left: 4px solid var(--accent-gold);
    padding: 20px;
    border-radius: 6px;
}

.events-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.events-header-image {
    text-align: right;
}

.events-header-image img {
    width: 70%;
    max-width: 400px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* CONTACT PAGE */
.contact-section {
    padding: 60px 0;
    background: var(--light-cream);
}

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

.contact-info {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #e5e0d6;
    border-left: 4px solid var(--primary-green);
    border-radius: 6px;
}

.contact-form {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #e5e0d6;
    border-left: 4px solid var(--accent-gold);
    border-radius: 6px;
}

/* FORM */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--soft-brown);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

button {
    background: var(--primary-green);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

button:hover {
    background: var(--dark-green);
}

/* ABOUT PAGE */
.about-section {
    padding: 60px 0;
    background: var(--light-cream);
}

.about-block {
    background: #ffffff;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #e5e0d6;
    border-left: 4px solid var(--primary-green);
    border-radius: 6px;
}

.about-block h2 {
    margin-bottom: 10px;
}

.about-highlight {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    background: var(--primary-green);
    color: #ffffff;
    border-radius: 6px;
    font-size: 1.1rem;
}

.about-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-header-image {
    text-align: left;
}

.about-header-image img {
    width: 100%;
    max-width: 420px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.about-header-text {
    text-align: left;
}