: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; 
    /* Project background image (full-screen) */
    background-image: url('../Images/beautifulskybkgnd.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* cover entire viewport */
    background-position: center center;
    background-attachment: fixed; /* keep fixed for a parallax-like effect */
}

/* 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;
}

/* Utility: use header/nav navy for page titles when desired */
.title-nav-navy {
    color: var(--sj-navy) !important;
}

/* 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;
}

/* Page grid for home page (2 columns x 6 rows) */
.page-grid {
    display: grid;
    /* increase box width by enforcing a larger minimum column size while
       allowing flexible growth. This makes boxes wider on larger screens */
    /* Raised minimum from 360px to 480px so grid-box content has more horizontal
       room before wrapping on medium and large viewports. */
    grid-template-columns: repeat(2, minmax(1000px, 1fr));
    grid-auto-rows: auto;
    gap: 1.25rem;
    width: 100%;
}
.page-grid .grid-box {
    border: 1px solid #ececec;
    padding: 1.25rem;
    background: #fff;
    min-height: 110px;
    /* center each grid box and constrain its width so it appears centered
       within the page-grid container */
    margin: 0 auto;
    max-width: 880px;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .page-grid { grid-template-columns: 1fr; }
}



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

/* 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; }

.fc-footer { background-color: var(--sj-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; }

/* 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;
}

/* OCIMS heading style: dark gold to match site accent */
.ocims-heading {
    color: var(--sj-gold) !important;
}

/* Edit Interment page styling */
.edit-interment-page {
    background-color: var(--sj-gold);
    color: #000;
    padding: 1.25rem;
    border-radius: 0.5rem;
}
.edit-interment-page form {
    margin-left: auto;
    margin-right: auto;
}
.edit-interment-page .form-control,
.edit-interment-page .form-select,
.edit-interment-page textarea {
    background-color: #fff;
    color: #000;
}
.edit-interment-page .card {
    background-color: rgba(255,255,255,0.9);
}

/* Page-level contact wrapper: set page background to site navy and adjust
   form/card colors for readability */
.contact-page {
    background-color: var(--sj-navy);
    color: #fff;
    padding: 2.5rem 1rem;
}
.contact-page h1,
.contact-page h2,
.contact-page p,
.contact-page label {
    color: #fff;
}
.contact-page .contact-form-card {
    /* use a darker gold background for the contact form to match site accent */
    background-color: var(--sj-gold); /* dark gold from sjheader.css */
    color: #000;
}

/* Navy panel used to tint inner rows (e.g., contact inner row) */
.panel-navy {
    background-color: var(--sj-navy);
    color: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
}

.panel-navy a { color: #ffd24a; }
.panel-navy p, .panel-navy h2, .panel-navy label { color: #fff; }
.contact-page .contact-form-card .form-label { color: #000; }
.contact-page .contact-form-card .form-control { background-color: #fff; color: #000; }

.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;
}

/* Navy search card: apply navy to both card shell and card body */
.search-card-navy,
.search-card-navy .card-body {
    background-color: var(--sj-navy) !important;
    color: #fff;
    border: none;
}

.search-card-navy .form-control { background-color: #fff; color: #000; }
.search-card-navy .form-text,
.search-card-navy label,
.search-card-navy .form-label { color: #fff; }

.search-card-navy .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255,255,255,0.45);
}

.search-card-navy .btn-outline-secondary:hover,
.search-card-navy .btn-outline-secondary:focus {
    background-color: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.65);
}