/*
================================================================================
    S.T.A.R. - Southern Trinity Area Rescue
    Main Stylesheet

    Owner:       S.T.A.R. Southern Trinity Area Rescue
    Created by:  Josiah
    Copyright:   (c) 2026 S.T.A.R. Southern Trinity Area Rescue. All rights reserved.

    This stylesheet was created for the exclusive use of
    S.T.A.R. Southern Trinity Area Rescue. Unauthorized reproduction,
    redistribution, or reuse is prohibited without permission.
================================================================================
*/
:root {
    --primary-color: #68151A;
    --secondary-color: #156963;
    --accent-color: #f0e6d2;
    --accent-color2: #c14a43;
    /* --analogous-color: #693915;
    --analogous-color2: #691544; */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding-top: 350px;
}

.header-container {
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.8) 0%, rgba(128, 128, 128, 0.6) 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.4s ease;
}

.logo-container {
    display: flex;
    justify-content: center;
    transition: all 0.4s ease;
}

.logo {
    width: 250px;
    height: auto;
    transition: all 0.4s ease;
}

.logo-moto {
    position: absolute;
    left: 80%;
    top: 60%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 18px;
    color: var(--secondary-color);
    margin-top: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.banner {
    position: relative;
    width: 100%;
    height: 130px;
    transition: all 0.4s ease;
}

.banner svg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.curved-banner {
    top: -40px;
    transition: opacity 0.4s ease;
}

.straight-banner {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ================================================================
    NAVIGATION LAYOUT
    - Initial: split into left/right groups, each centered in their half
    - Scrolled: groups combine and float left next to the logo */
nav {
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    transition: all 0.4s ease;
}

/* Each side takes 40% of the header width and centers its links */
nav .left,
nav .right {
    width: 40%;
    display: flex;
    justify-content: center;
    gap: 2rem;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Slightly reduce gap on narrow screens */
@media (max-width: 600px) {
    nav .left, nav .right { gap: 1rem; }
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: color 0.3s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

nav a:hover {
    color: var(--accent-color);
}

/* Scrolled state */
.header-container.scrolled {
    padding-top: 0;
}

.header-container.scrolled .logo-container {
    position: absolute;
    top: 10px;
    left: 20px;
    padding: 0;
    justify-content: flex-start;
    z-index: 10;
}

.header-container.scrolled .logo {
    width: 70px;
}

.header-container.scrolled .logo-moto {
    display: none;
}

.header-container.scrolled .banner {
    height: 80px;
}

.header-container.scrolled .curved-banner {
    opacity: 0;
}

.header-container.scrolled .straight-banner {
    opacity: 1;
}

.header-container.scrolled nav {
    top: 50%;
    transform: translateY(-50%);
    /* Position to the right of the shrunken logo */
    left: 110px;
    right: auto;
    width: auto;
    justify-content: flex-start;
    padding: 0;
    gap: 20px;
}

/* When scrolled, collapse halves to inline left-aligned groups */
.header-container.scrolled nav .left,
.header-container.scrolled nav .right {
    width: auto;
    justify-content: flex-start;
}

.header-container.scrolled nav .right {
    margin-left: 0.75rem;
}

/* ================================================================
    PAGE CONTENT */
.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
}

.hero {
    position: relative;
    width: 100%;
    height: auto;
    padding: 36px 24px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    background-color: var(--primary-color);
    background-image:
        radial-gradient(ellipse 90% 70% at 50% 45%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(circle at 50% 92%, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 62%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(255, 255, 255, 0) 1px 2px),
        radial-gradient(140% 110% at 50% 45%, #7a252a 0%, var(--primary-color) 56%, #4c1014 100%);
    background-size: cover, cover, 3px 3px, 2px 2px, cover;
    background-position: center, center, 0 0, 0 0, center;
    background-blend-mode: screen, multiply, soft-light, soft-light, normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.hero-image {
    width: 100%;
    height: auto;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* ================================================================
    TYPOGRAPHY */
.content h1, h2, h3 {
    font-weight: 500;
    line-height: 1.2;
    color: var(--secondary-color);
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
}

.content h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: calc(1.375rem + 1.5vw);
}

.content h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: calc(1.325rem + 0.9vw);
}

.content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
    .content h1 {
        font-size: 2.5rem;
    }
    .content h2 {
        font-size: 2rem;
    }
    .content h3 {
        font-size: 1.75rem;
    }
}

.content p {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.tagline {
    margin: 36px auto 0;
    padding-top: 18px;
    max-width: 32rem;
    text-align: center;
    color: var(--secondary-color);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-top: 2px solid rgba(21, 105, 99, 0.18);
}

/* Inline link style */
.link-style {
    color: var(--secondary-color);
    text-decoration: underline;
    text-decoration-color: rgba(21,105,99,0.4);
    text-underline-offset: 3px;
    font-weight: bold;
    transition: color 0.2s;
}
.link-style:hover { color: var(--primary-color); text-decoration-color: rgba(104,21,26,0.5); }

/* Reusable section divider */
.divider-line {
    width: 100%;
    border: 0;
    border-top: 2px solid rgba(104, 21, 26, 0.25);
    margin: 32px 0;
}

/* ================================================================
    CARD FANCY — reusable card component
    Variants:
      .card-fancy--side-secondary  left accent bar in secondary color
      .card-fancy--top-primary     top accent bar in primary color
    Layouts:
      .card-fancy-list             two-column grid of list items
      .card-fancy-section          featured + stack two-column layout
      .card-fancy-stack            single-column stack of cards */

.card-fancy {
    padding: 20px 20px 18px;
    border: 1px solid rgba(21, 105, 99, 0.12);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(240, 230, 210, 0.42) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    color: #333;
    line-height: 1.45;
}

.card-fancy--side-secondary {
    border-left: 4px solid var(--secondary-color);
}

.card-fancy--top-primary {
    border-top: 5px solid var(--primary-color);
}

.card-fancy strong {
    color: var(--primary-color);
}

.content .card-fancy h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.content .card-fancy p:last-child {
    margin-bottom: 0;
}

/* Label pill inside a card */
.card-fancy-label {
    margin: 0 0 8px;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Italic example/quote block inside a card */
.card-fancy-example {
    padding-top: 14px;
    border-top: 1px solid rgba(104, 21, 26, 0.16);
    color: #4a4a4a;
    font-style: italic;
}

/* Inner list inside a card */
.card-fancy-inner-list {
    margin: 0;
    padding-left: 1.2rem;
}

.card-fancy-inner-list li {
    margin-bottom: 0.5rem;
    color: #333;
}

.card-fancy-inner-list li:last-child {
    margin-bottom: 0;
}

/* Two-column grid of card items (Values) */
.card-fancy-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.card-fancy-list .card-fancy {
    background: rgba(240, 230, 210, 0.34);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
}

/* Featured + stack two-column section (Leadership) */
.card-fancy-section {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 24px;
    margin-top: 20px;
}

/* Vertically stacked sub-cards */
.card-fancy-stack {
    display: grid;
    gap: 24px;
}

@media (max-width: 900px) {
    .card-fancy-list,
    .card-fancy-section {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
    CARDS */
.card-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    margin-top: 20px;
}

.card-group .card {
    overflow: hidden;
}

.card-group .card-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.25rem;
}

/* Responsive for tablets */
@media (max-width: 992px) {
    .card-group {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive for mobile */
@media (max-width: 600px) {
    .card-group {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
    BUTTONS */
.btn {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
}

/* Primary button */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--accent-color);
    border: 2px solid var(--primary-color);
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.btn-primary:hover { background-color: #8a1c23; border-color: #8a1c23; }
.btn-primary:active { transform: scale(0.97); }

/* Secondary button */
.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    border: 2px solid var(--secondary-color);
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.btn-secondary:hover { background-color: #1a857d; border-color: #1a857d; }
.btn-secondary:active { transform: scale(0.97); }

/* Outline Button Primary */
.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    letter-spacing: 0.03em;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}
.btn-outline-primary:hover { background-color: var(--primary-color); color: var(--accent-color); }
.btn-outline-primary:active { transform: scale(0.97); }

/* Outline Button Secondary */
.btn-outline-secondary {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    letter-spacing: 0.03em;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}
.btn-outline-secondary:hover { background-color: var(--secondary-color); color: var(--accent-color); }
.btn-outline-secondary:active { transform: scale(0.97); }

/* Ghost Button */
.btn-ghost {
    background-color: rgba(240, 230, 210, 0.15);
    color: #f0e6d2;
    border: 2px solid rgba(240, 230, 210, 0.6);
    letter-spacing: 0.03em;
    transition: background 0.2s, transform 0.1s;
}
.btn-ghost:hover { background-color: rgba(240, 230, 210, 0.28); }
.btn-ghost:active { transform: scale(0.97); }

/* Urgent Button */
.btn-urgent {
    background-color: var(--accent-color2);
    color: #fff;
    border: 2px solid var(--accent-color2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 2px 0 #8a2d28;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn-urgent:hover { background-color: #d45750; border-color: #d45750; }
.btn-urgent:active { transform: translateY(2px); box-shadow: none; }

/* ================================================================
    Footer and Footer Navigation */
.footer-container {
    position: relative;
}

.footer-buttons {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 3rem;
    z-index: 10;
}

.footer-extend {
    background-color: #0E0E10;
    height: auto;
    width: 100%;
    padding: 20px;
    position: relative;
    top: -5px;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 15px;
}

.footer-nav a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: var(--accent-color2);
}

@media (max-width: 600px) {
    .footer-nav {
        gap: 1.5rem;
    }
}

/* ================================================================
    MOBILE NAVIGATION */
@media (max-width: 768px) {

    /* On mobile, keep nav full-width when scrolled so hamburger stays right */
    .header-container.scrolled nav {
        left: 0;
        right: 0;
        width: 100%;
        justify-content: flex-end;
        padding: 0 20px;
    }

    /* Hide the desktop left/right nav groups */
    nav .left,
    nav .right {
        display: none;
    }

    /* Show the hamburger button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: white;
        border-radius: 3px;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform-origin: center;
    }

    /* Animate into X when open */
    .hamburger.open span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    /* Mobile overlay menu */
    .mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(104, 21, 26, 0.97); /* --primary-color at near-full opacity */
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        gap: 0;
    }

    .mobile-menu.open {
        opacity: 1;
        pointer-events: all;
    }

    .mobile-menu a {
        display: block;
        text-align: center;
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 24px;
        padding: 18px 40px;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        transition: background 0.2s, color 0.2s;
    }

    .mobile-menu a:first-child {
        border-top: 1px solid rgba(255,255,255,0.15);
    }

    .mobile-menu a:hover,
    .mobile-menu a:active {
        background: rgba(255,255,255,0.12);
        color: var(--accent-color);
    }
}

/* Hide hamburger and mobile menu on desktop */
@media (min-width: 769px) {
    .hamburger { display: none; }
    .mobile-menu { display: none; }
}