/* Custom Styles for Waypoint Center */

/* Root Variables */
:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --dark-color: #212529;
    --light-color: #f8f9fa;
    /* Hero / header background control - can be a color or a CSS image() url() value */
    --hero-bg-color: #d5e5f2;
    --hero-bg-image: url(/img/waypoint-roundel.svg); /* e.g. url('/img/hero.jpg') */
    --hero-bg-size: 50%;
    --hero-bg-position: bottom -200% right -45%;

    --waypoint-blue1: #048abf;
    --waypoint-blue2: #049dd9;
    --waypoint-blue3: #04b2d9;
    --waypoint-blue4: #d5e5f2;
}

/* Ensure card backgrounds contrast against the blue section */
#aircraft .card {
    background-color: #ffffff; /* pure white cards */
}


/* Removed section-specific padding: card body spacing is controlled with Bootstrap utilities and .logo-wrap height */

/* Make buttons stand out on blue background when present */
#aircraft .btn-primary {
    background-color: var(--waypoint-blue2);
    border-color: var(--waypoint-blue2);
}

/* Resources section should visually match Aircraft with gradient */

#resources .card {
    background-color: #ffffff; /* pure white cards */
}

#resources .btn-primary {
    background-color: var(--waypoint-blue2);
    border-color: var(--waypoint-blue2);
}

#resources .accordion-button {
    background-color: var(--waypoint-blue1);
    color: white;
}

/* Aircraft section background using WPE blue gradient */
#aircraft,
#contact {
    background-color: var(--waypoint-blue1);
    background-image: linear-gradient(to top, var(--waypoint-blue1) 0%, var(--waypoint-blue2) 100%);
}

#resources,
#about {
    background: linear-gradient(to bottom, white 0%, var(--waypoint-blue4) 500%) !important;
}

footer {
    background-color: var(--waypoint-blue1);
}

/* Global Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Hero / Header: combined nav + hero */
.hero {
    /* Allow easy swapping between solid color or image background by adjusting variables */
    /* background-color: var(--hero-bg-color); */
    /* background-image: var(--hero-bg-image);
    background-size: var(--hero-bg-size);
    background-position: var(--hero-bg-position);
    background-repeat: no-repeat; */
    
    /* Ensure content contrasts when image used (overlay can be added later) */
    /* color: inherit; */
    margin-top: 1.5rem; 
}

/* Stronger rule to override utility classes (e.g. Bootstrap bg-*) when necessary */
.hero {
    background: linear-gradient(to bottom, white 0%, var(--waypoint-blue4) 500%) !important;
    /* background-color: var(--hero-bg-color, #d5e5f2) !important; */
}

/* Use this utility where needed: minimum viewport height for hero content */
.hero .min-vh-50 {
    min-height: 50vh;
    display: flex;
    align-items: center;
}

/* Card Hover Effects */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}




/* Make card images constrained and keep a reserved area for logos */
.card .card-body img {
    /* max-width: 80%;
    height: auto; */
}
.card .card-body img {
    /* margin: auto; */
    /* margin-top: 4rem; */
    /* height: 3rem; */
    max-width: 60%;
    /* height: 150px; */
    width: auto;
    max-height: 110px
}

/* Logo wrapper keeps a fixed height; layout utilities are applied in HTML */
.logo-wrap {
    /* width: 100%; */
    height: 140px; /* fixed area reserved for logo */
}

/* External link icon positioned in the top-right of a card */
.card .external-link {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 0.9rem;
}

/* .card .external-link svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
} */

/* Ensure card container is positioned so absolute children (icon) are relative to it */
.card {
    /* position: relative; */
}

@media (max-width: 576px) {
    .logo-wrap {
        /* height: 72px; */
    }
}

/* Button Animations */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Navigation */
.navbar {
    /* Keep the navbar visually elevated but transparent so header background shows through */
    background-color: transparent !important;
    box-shadow: none !important;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.5rem;
}

/* Logo image sizing inside navbar-brand */
.navbar-brand img {
    height: 64px;
    width: auto;
    display: inline-block;
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 60px; /* slightly larger on small screens */
    }

    /* Make the hamburger icon darker and slightly thicker on small screens */
    /* .navbar-light .navbar-toggler-icon,
    .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23020a0a' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    } */
}

/* Navbar link colors */
.navbar .nav-link {
    color: var(--waypoint-blue1) !important;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--waypoint-blue2) !important; /* slightly darker on hover for contrast */
    text-decoration: underline;
}

.navbar .nav-link.active {
    color: #024f6f !important; /* active state */
    font-weight: 600;
}

/* Section Spacing */
section {
    position: relative;
}

/* Image Styling */
img {
    max-width: 100%;
    height: auto;
}

/* Form Styling */
/* .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
} */

/* Responsive Typography */
@media (max-width: 768px) {
    /* .display-4 {
        font-size: 2.5rem;
    }
    
    .display-5 {
        font-size: 2rem;
    } */
}

/* Loading Animation (Optional) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* About */