:root {
    /* Primary site color changed from navy to a mild green */
    --fc-navy: #2e8b57; /* primary green (replaces navy) */
    --fc-navy-hover: #3aa072; /* slightly brighter green for hover states */
    --fc-gold: #c9a227; /* darker gold for active/selected (unchanged) */
    --fc-gold-bright: #ffd24a; /* brighter gold for hover (unchanged) */
}

html { font-size: 15px; position: relative; min-height: 100%; }

/* Responsive font sizing based on screen width */
@media (min-width: 576px) {
    html { font-size: 16px; }
}

@media (min-width: 768px) {
    html { font-size: 17px; }
}

@media (min-width: 992px) {
    html { font-size: 18px; }
}

@media (min-width: 1200px) {
    html { font-size: 19px; }
}

@media (min-width: 1400px) {
    html { font-size: 20px; }
}

body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: #1e1e1f; line-height: 1.6; }

/* Top border image - responsive and full width */
.pc-top-border {
    width: 100%;
    overflow: hidden;
    background-color: var(--fc-navy);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure the full header image is visible (no cropping). The image will scale to fit
   the container while preserving aspect ratio. max-height limits visual height. */
.pc-top-border img {
    display: block;
    max-width: 100%; /* don't overflow horizontally */
    width: auto;
    height: auto;
    max-height: 360px; /* banner target height */
}

/* Smaller max height on narrow screens */
@media (max-width: 767.98px) {
    .pc-top-border img { max-height: 180px; }
}

/* Slightly taller header on very large displays */
@media (min-width: 1400px) {
    .pc-top-border img { max-height: 420px; }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    /* replace blue focus ring with a subtle green ring */
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(46,139,87,0.25);
}

/* Navigation bar (replaces the retired Flash menu) */
.fc-navbar { background-color: var(--fc-navy); padding: 0; }
.fc-navbar .nav-link { color: #fff; padding: 0.6rem 1.1rem; transition: color .15s ease, background-color .15s ease; }
.fc-navbar .nav-link:hover,
.fc-navbar .nav-link:focus { background-color: transparent; color: var(--fc-gold-bright); box-shadow: none; outline: none; }
.fc-navbar .nav-link.active { background-color: var(--fc-gold); color: #fff; font-weight: 600; }
.fc-navbar .navbar-toggler { border-color: rgba(255,255,255,.5); }
.fc-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Content - responsive sizing */
main h1, main h2 { color: var(--fc-navy); }
main h1 { 
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 1rem; 
}
main h2 {
    font-size: clamp(1.25rem, 3vw, 2rem);
}
main img { 
    max-width: 100%; 
    height: auto; 
    display: block;
}

/* Responsive container adjustments */
.container {
    max-width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1540px;
    }
}

/* Responsive images - ensure they scale properly */
img {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Responsive tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Plot map container: on mobile allow pinch/zoom by keeping image natural size and enabling overflow for pinch gestures */
.plotmap-container {
    width: 100%;
    overflow: auto; /* allow pinch/zoom and panning on mobile browsers */
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation; /* allow gestures */
}
.plotmap-img {
    display: block;
    max-width: 100%;
    height: auto;
    width: auto; /* preserve native width to allow pinch zoom on mobile */
    margin: 0 auto;
    image-rendering: -webkit-optimize-contrast;
}

/* On small screens, constrain visual width to 100% but allow zoom gestures */
@media (max-width: 767.98px) {
    .plotmap-img { max-width: 100%; }
}

/* Ensure text scales properly on larger screens */
p, li, td, th {
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
}

/* Dark-blue button (matches nav/footer) */
.btn-fc { background-color: var(--fc-navy); border-color: var(--fc-navy); color: #fff; }
.btn-fc:hover, .btn-fc:focus, .btn-fc:active { background-color: var(--fc-navy-hover); border-color: var(--fc-navy-hover); color: #fff; }

/* Footer */
.fc-footer { background-color: var(--fc-navy); color: #fff; }
.fc-footer a { color: #cdd6ff; }

table.fc-table { width: 100%; }

/* Open dropdown menus on hover for desktop viewports */
@media (min-width: 992px) {
    .fc-navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0; /* keep aligned with toggle */
    }
    /* Ensure proper z-index so dropdown appears above other content */
    .fc-navbar .dropdown-menu {
        z-index: 2000;
    }
}

/* Make dropdown menu background a soft light-gray to reduce contrast */
.fc-navbar .dropdown-menu {
    background-color: #e0e0e0; /* slightly darker light gray */
}

.fc-navbar .dropdown-menu .dropdown-item { color: #111; }

/* Hide Bootstrap dropdown caret/arrow in the navbar */
.fc-navbar .nav-link.dropdown-toggle::after,
.fc-navbar .nav-link.dropdown-toggle-split::after {
    display: none !important;
}

/* Donate button in navbar */
.nav-donate { display: flex; align-items: center; }
.nav-donate img { transition: filter .15s ease, transform .15s ease; }
.nav-donate img:hover { filter: brightness(0.9); transform: translateY(-1px); }
.nav-donate a:focus img { outline: 2px solid var(--fc-gold); }

/* Donate SVG button styles */
.donate-btn { display: inline-flex; align-items: center; padding: 0.25rem 0; }
.donate-svg { height: 38px; width: auto; display: block; max-width: 100%; font-size: 1rem; }
.donate-rect { fill: var(--fc-gold); stroke: #b58f1d; stroke-width: 2; }
.donate-text { fill: #000; font-size: 1rem; }
.donate-btn:hover .donate-rect { fill: #b58f1d; }
.donate-btn:hover .donate-text { fill: #fff; }
.donate-btn:focus { outline: 3px solid rgba(201,162,39,0.25); border-radius: 6px; }

/* Donate page header underline */
.donate-header h1 { font-weight: 700; }
.donate-underline { height: 6px; width: 220px; background-color: var(--fc-gold); margin: 0.5rem auto 0; }

/* Support box under donate header */
.donate-support-box {
    display: inline-block;
    background-color: var(--fc-gold);
    color: #000;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-weight: 700;
}

/* Narrow the donation form width a bit */
.donate-form { max-width: 640px; }

/* Donation amount preset buttons */
.donation-choices .choice { border-radius: 6px; background-color: #fff; border-color: #d0d0d0; }
.donation-choices .choice:hover, .donation-choices .choice.active { background-color: var(--fc-gold); color: #000; border-color: #b58f1d; }

/* Light golden background for the donation form */
.donate-form {
    background-color: #fff7e0; /* light gold */
    padding: 1rem;
    border-radius: 8px;
}

/* Overall donation card background */
.donate-card { background-color: #f3f3f4; }
/* no-op anchor */

/* Admin interment form background matching site primary green */
.interment-form {
    /* darker green background while keeping translucency */
    background-color: rgba(46,139,87,0.25); /* increased opacity for a darker appearance */
    padding: 1rem;
    border-radius: 8px;
}

/* Background for Records search area to match main menu green */
.records-search-bg {
    background-color: var(--fc-navy);
    color: #fff;
}

.records-search-bg .form-label,
.records-search-bg .form-text,
.records-search-bg .form-control {
    /* keep placeholder and helper text white, but typed input should be black */
    color: #000 !important;
}
.records-search-bg .form-label,
.records-search-bg label {
    /* Make the visible label text white for contrast on green background */
    color: #ffffff !important;
}
.records-search-bg .form-text { color: #fff; }

/* Admin markers search background — use the same primary site color */
.markers-search-bg {
    background-color: var(--fc-navy);
}
.markers-search-bg .form-control { color: #000 !important; }
.markers-search-bg .form-control::placeholder,
.markers-search-bg .form-control::-webkit-input-placeholder,
.markers-search-bg .form-control:-ms-input-placeholder,
.markers-search-bg .form-control::-ms-input-placeholder { color: #ffffff !important; opacity: 1; }
.markers-search-bg .btn { color: #fff; }

/* Ensure manage account content uses readable text on the green background */
.records-search-bg h1, .records-search-bg p, .records-search-bg label, .records-search-bg .form-text {
    color: #ffffff !important;
}
.records-search-bg .form-control { color: #000 !important; }

.records-search-bg .form-control::placeholder,
.records-search-bg .form-control::-webkit-input-placeholder,
.records-search-bg .form-control:-ms-input-placeholder,
.records-search-bg .form-control::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1;
}

.records-search-bg .form-text {
    color: rgba(255,255,255,0.9);
}

.records-search-bg .btn {
    color: #fff;
}

/* Ensure muted helper text appears white even with Bootstrap's .text-muted class */
.records-search-bg .form-text.text-muted,
.records-search-bg small.form-text.text-muted {
    color: #ffffff !important;
}

/* Donate submit rollover effect */
.donate-card #donateSubmit {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.donate-card #donateSubmit:hover {
    background-color: var(--fc-navy-hover) !important; /* use mild green hover */
    border-color: var(--fc-navy-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.donate-card #donateSubmit:focus {
    outline: 3px solid rgba(46,139,87,0.15);
    box-shadow: 0 0 0 0.15rem rgba(46,139,87,0.15);
}

/* Make the PayPal button hover match the Donate submit button appearance */
#paypalLink.btn-outline-secondary {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#paypalLink.btn-outline-secondary:hover,
#paypalLink.btn-outline-secondary:focus {
    background-color: var(--fc-navy-hover); /* match primary hover (now green) */
    border-color: var(--fc-navy-hover);
    color: #fff;
}

/* Make all donate-related buttons match the donation preset hover color (gold) */

/* Also ensure any background image used for toggler is not visible */
.fc-navbar .nav-link.dropdown-toggle,
.fc-navbar .nav-link.dropdown-toggle-split {
    background-image: none !important;
}

/* Dropdown menu item hover styling to match gold nav active color */
.fc-navbar .dropdown-menu .dropdown-item:hover,
.fc-navbar .dropdown-menu .dropdown-item:focus {
    background-color: var(--fc-gold) !important;
    color: #fff !important;
}

/* Also style active/selected dropdown item */
.fc-navbar .dropdown-menu .dropdown-item.active,
.fc-navbar .dropdown-menu .dropdown-item:active {
    background-color: var(--fc-gold) !important;
    color: #fff !important;
}

/* Contact form light gold background */
.contact-form-card {
    background-color: var(--fc-navy); /* navy background for contact form */
    color: #fff; /* make text readable on dark background */
    padding: 1.25rem;
    border-radius: 0.5rem;
}

.contact-form-card .form-label {
    color: #fff;
}

.contact-form-card .form-control::placeholder {
    color: rgba(255,255,255,0.7);
}

.contact-form-card .form-control,
.contact-form-card .form-select,
.contact-form-card textarea {
    background-color: #fff; /* keep input backgrounds white for readability */
    color: #000;
}

/* Donate form navy background */

.donate-form {
    background-color: var(--fc-navy); /* navy background for donate form */
    color: #fff;
    padding: 1.25rem;
    border-radius: 0.5rem;
}

.donate-form .form-control,
.donate-form .form-select,
.donate-form textarea {
    background-color: #fff;
    color: #000;
}

/* Center donate card under the page heading and constrain its width */
.donate-card {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.donate-card .donate-form {
    padding: 1.5rem;
}

/* Center the inner navy form area and constrain its width */
.donate-form-inner {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}