:root {
            --primary-navy: #0F172A; 
            --accent-blue: #1E3A8A; 
            --accent-red: #B91C1C; 
            --bg-light: #F8FAFC; 
            --text-dark: #1E293B; 
            --text-muted: #475569;
            --font-base: 18px; 
            --font-md: 22px;   
            --font-lg: 28px;   
            --font-xl: 48px;   
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: system-ui, -apple-system, sans-serif;
        }

       /*
        body {
            background-color: var(--bg-light);
            color: var(--text-dark);
            font-size: var(--font-base);
            line-height: 1.7;
        } */
html { height: 100%; }
        body {
            background-color: var(--bg-light);
            color: var(--text-dark);
            font-size: var(--font-base);
            line-height: 1.7;
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }
		
		.main-container section ul,
.main-container section ol {
    padding-left: 1.5rem;
    margin: 0 0 1rem;
    list-style-position: outside;
}
.main-container section li {
    margin: 0.35rem 0;
}
.main-container section li > p {
    margin: 0;
}
        /* main grows to fill the space so the footer sits at the bottom
           even when the page content is short (no white gap below footer) */
        main { flex: 1 0 auto; }
        footer { flex-shrink: 0; }
		
        header {
            background-color: var(--primary-navy);
            color: white;
            padding: 25px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 5px solid var(--accent-red);
        }

        @media (max-width: 992px) {
            header { flex-direction: column; text-align: center; gap: 20px; }
            nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
            nav a { margin-left: 0 !important; }
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .alert-bar {
            background-color: #c0392b;
            color: #ffffff;
            text-align: center;
            padding: 12px 5%;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
        }
        .alert-bar a {
            color: #ffffff;
            text-decoration: underline;
        }
        .events-section {
            max-width: 1400px;
            margin: 40px auto 0;
            padding: 0 5%;
        }
        .events-heading {
            font-size: var(--font-lg);
            font-weight: 800;
            color: var(--primary-navy);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid var(--accent-gold, #c9a227);
        }
        .events-banners {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .event-banner {
            display: block;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 14px rgba(0,0,0,0.10);
        }
        .event-banner img {
            display: block;
            width: 100%;
            height: auto;
        }
        a.event-banner:hover {
            box-shadow: 0 6px 20px rgba(0,0,0,0.18);
        }
        .logo-area .site-logo {
            height: 90px;
            width: auto;
            flex-shrink: 0;
        }
        .logo-area h1 {
            font-size: var(--font-lg);
            font-weight: 800;
        }

        .logo-area p {
            color: #94A3B8;
            font-size: 16px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            font-weight: bold;
            font-size: var(--font-base);
            padding: 10px 15px;
            border-radius: 6px;
            cursor: pointer;
        }

        nav a:hover, nav a.active {
            background-color: var(--accent-blue);
        }

        /* Never let a nav label split across lines ("Contact Us" breaking
           into two rows, "More VA Resources" cut mid-word). Links wrap as
           whole pills or not at all. */
        nav a {
            white-space: nowrap;
            display: inline-block;
        }

        /* Mid-width band (tablet / small desktop): the logo plus seven links
           no longer fit on one row, so let the nav wrap cleanly as rows of
           whole links with tighter spacing, instead of overflowing and
           clipping. Below 992px the existing stacked-header rules take over. */
        @media (min-width: 993px) and (max-width: 1490px) {
            header { gap: 16px; }
            nav {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                row-gap: 8px;
                column-gap: 4px;
            }
            nav a {
                margin-left: 0;
                padding: 8px 10px;
                font-size: 15px;
            }
        }

        /* PAGE VIEWS MANAGEMENT */
        .page-view {
            display: none;
        }
        .page-view.active-view {
            display: block;
        }
/*
        .hero {
            background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
            color: white;
            padding: 30px 5% 50px 5%;
            text-align: center;
        } */
.hero {
    background:
        
        url('https://www.johnstonnc.gov/files/veterans/blueflagback.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 30px 5% 50px 5%;
    text-align: center;
}
        .hero h2 {
            font-size: var(--font-xl);
            font-weight: 900;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: var(--font-md);
            max-width: 800px;
            margin: 0 auto 35px auto;
            color: #E2E8F0;
        }

        /* QUICK FORMS & DROPDOWN SECTION STYLING */
 /*       .quick-forms-section {
            background-color: #F1F5F9;
            border-bottom: 2px solid #E2E8F0;
            padding: 30px 5%;
            text-align: center;
        }
*/

.quick-forms-section {
    background-color: #d8d9da;
    border-bottom: 2px solid #E2E8F0;
    padding: 30px 5%;
    text-align: center;
}


        .quick-forms-container {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; 
            gap: 20px;
            align-items: center;
        }

        /* Home: the Intake + Transportation row sits 2-up on desktop */
        .quick-forms-container.two-up { grid-template-columns: 1fr 1fr; }

        /* Home: the forms band renders on a white background */
        .quick-forms-section.on-white { background-color: #ffffff; }

        @media (max-width: 968px) {
            .quick-forms-container,
            .quick-forms-container.two-up {
                grid-template-columns: 1fr; 
            }
        }

        .quick-form-card {
            background: white;
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-radius: 12px;
            text-decoration: none;
            color: var(--primary-navy);
           /* border: 2px solid #CBD5E1;*/
		   border: 2px solid #b22234;
            transition: all 0.2s ease-in-out;
            height: 100%;
        }
/*
        .quick-form-card:hover {
            border-color: var(--accent-blue);
            background-color: #EFF6FF;
            transform: translateY(-2px);
        }
*/
.quick-form-card:hover {
    border-color: #8a1a28;
    background-color: #fbeaec;
    transform: translateY(-2px);
}
        .quick-form-icon {
            font-size: 32px;
            margin-right: 15px;
            background: #F8FAFC;
            padding: 8px;
            border-radius: 8px;
            min-width: 55px;
            text-align: center;
        }

        .quick-form-text {
            text-align: left;
        }

        .quick-form-title {
            display: block;
            font-size: 19px;
            font-weight: 800;
            color: var(--primary-navy);
        }

        .quick-form-desc {
            display: block;
            font-size: 15px;
            color: var(--text-muted);
            margin-top: 2px;
            line-height: 1.3;
        }

        /* CUSTOM DROPDOWN STYLE */
        .dropdown-wrapper {
            position: relative;
            display: inline-block;
            height: 100%;
            width: 100%;
        }

        .dropdown-trigger {
            cursor: pointer;
        }

        .dropdown-trigger::after {
            content: " ▼";
            font-size: 12px;
            color: var(--text-muted);
            margin-left: auto;
            padding-left: 10px;
        }

        .dropdown-menu-content {
            display: none;
            position: absolute;
            top: 102%;
            left: 0;
            width: 100%;
            background-color: white;
            border: 2px solid var(--accent-blue);
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            z-index: 100;
            overflow: hidden;
            text-align: left;
        }

        .dropdown-menu-content a {
            display: block;
            padding: 14px 20px;
            color: var(--text-dark);
            text-decoration: none;
            border-bottom: 1px solid #E2E8F0;
            font-size: 16px;
            font-weight: 600;
            transition: background 0.2s;
        }

        .dropdown-menu-content a:last-child {
            border-bottom: none;
        }

        .dropdown-menu-content a:hover {
            background-color: #EFF6FF;
            color: var(--accent-blue);
        }

        .dropdown-wrapper:hover .dropdown-menu-content {
            display: block;
        }

        .main-container {
            max-width: 1400px;
            margin: 50px auto;
            padding: 0 5%;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 50px;
        }
        .main-container.full { grid-template-columns: 1fr; }

        @media (max-width: 968px) {
            .main-container { grid-template-columns: 1fr; }
        }

        section h3 {
            font-size: var(--font-lg);
            color: var(--primary-navy);
            margin-bottom: 25px;
            border-left: 6px solid var(--accent-red);
            padding-left: 15px;
        }

        .grid-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-top: 30px;
        }

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

        .action-card {
            background: white;
            padding: 30px;
            border-radius: 12px;
            border: 1px solid #E2E8F0;
        }

        .action-card h4 {
            font-size: var(--font-md);
            color: var(--accent-blue);
            margin-bottom: 12px;
        }

        .sidebar-card {
            background: white;
            padding: 35px;
            border-radius: 12px;
            border-top: 6px solid var(--primary-navy);
            margin-bottom: 30px;
        }

        .sidebar-card h4 {
            font-size: var(--font-md);
            margin-bottom: 20px;
            color: var(--primary-navy);
        }

        .info-list-item {
            margin-bottom: 20px;
        }

        .info-list-item strong {
            display: block;
            color: var(--primary-navy);
            font-size: 19px;
        }

        .btn-primary {
            display: inline-block;
            background-color: var(--accent-red);
            color: white;
            text-decoration: none;
            padding: 15px 30px;
            font-size: var(--font-base);
            font-weight: bold;
            border-radius: 8px;
            margin-top: 15px;
            text-align: center;
        }

        /* HERO LAYOUTS FOR SUBPAGES */
        .page-hero {
            background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
            color: white;
            padding: 60px 5%;
            text-align: center;
        }

        .page-hero h2 {
            font-size: var(--font-xl);
            font-weight: 900;
        }

        .about-intro-box {
            background: white;
            padding: 40px;
            border-radius: 12px;
            border: 1px solid #E2E8F0;
            margin-bottom: 40px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }

        .about-intro-box p {
            margin-bottom: 20px;
            font-size: 20px;
        }

        .about-intro-box p:last-child {
            margin-bottom: 0;
        }

        .team-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 30px;
        }

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

        .team-card {
            background: white;
            padding: 30px;
            border-radius: 12px;
            border-top: 5px solid var(--accent-blue);
            border-left: 1px solid #E2E8F0;
            border-right: 1px solid #E2E8F0;
            border-bottom: 1px solid #E2E8F0;
        }

        .team-card.admin {
            border-top-color: var(--accent-red);
        }

        .team-card h4 {
            font-size: var(--font-md);
            color: var(--primary-navy);
            margin-bottom: 5px;
        }

        .team-card .title {
            display: block;
            font-weight: 700;
            color: var(--accent-red);
            font-size: 16px;
            text-transform: uppercase;
            margin-bottom: 15px;
            letter-spacing: 0.5px;
        }

        .team-card.admin .title {
            color: var(--accent-blue);
        }

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

        @media (max-width: 640px) {
            .contact-grid-details { grid-template-columns: 1fr; }
        }

        .contact-detail-item {
            background: #F1F5F9;
            padding: 15px 20px;
            border-radius: 8px;
            font-size: 17px;
        }

        .contact-detail-item strong {
            color: var(--primary-navy);
        }

        /* BENEFITS & FORMS GRID & TOGGLE STYLING */
        .benefits-grid, .forms-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        @media (max-width: 968px) {
            .benefits-grid, .forms-grid { grid-template-columns: 1fr; }
        }

        .benefit-resource-card, .form-resource-card {
            background: white;
            padding: 30px;
            border-radius: 12px;
            border: 1px solid #E2E8F0;
            border-left: 6px solid var(--accent-blue);
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }

        .benefit-resource-card.clickable, .form-resource-card.clickable {
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            position: relative;
        }

        .benefit-resource-card.clickable:hover, .form-resource-card.clickable:hover {
            background-color: #EFF6FF;
            transform: translateY(-2px);
        }

        .benefit-resource-card.is-open, .form-resource-card.is-open {
            grid-column: span 2;
            border-left-color: var(--accent-red);
        }

        @media (max-width: 968px) {
            .benefit-resource-card.is-open, .form-resource-card.is-open { grid-column: span 1; }
        }

        .benefit-resource-card h4, .form-resource-card h4 {
            font-size: var(--font-md);
            color: var(--primary-navy);
            margin-bottom: 8px;
        }

        .benefit-resource-card p, .form-resource-card p {
            color: var(--text-muted);
            font-size: var(--font-base);
            font-weight: 600;
        }

        /* Expanded content container */
        .card-expanded-content {
            display: none;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px dashed #CBD5E1;
            color: var(--text-dark);
            font-size: 17px;
            line-height: 1.7;
        }

        .info-block-item {
            margin-bottom: 25px;
        }

        .info-block-item:last-child {
            margin-bottom: 0;
        }

        .info-block-item h5 {
            font-size: 19px;
            color: var(--accent-blue);
            margin-bottom: 6px;
            font-weight: 700;
        }

        .info-block-item ul {
            margin-left: 20px;
            margin-top: 8px;
        }

        .info-block-item li {
            margin-bottom: 6px;
        }

        .info-block-item a {
            color: var(--accent-red);
            font-weight: 600;
            word-break: break-all;
        }

        .toggle-indicator {
            float: right;
            font-size: 14px;
            color: var(--text-muted);
            transition: transform 0.2s;
        }

        .benefit-resource-card.is-open .toggle-indicator,
        .form-resource-card.is-open .toggle-indicator {
            transform: rotate(180deg);
        }

        /* DOCUMENT DISPLAY BOXES */
        .document-view-box {
            background-color: #F8FAFC;
            border: 2px solid #CBD5E1;
            border-radius: 8px;
            padding: 25px;
            margin-top: 15px;
            font-family: monospace;
            font-size: 15px;
            color: #334155;
            white-space: pre-wrap;
            line-height: 1.5;
            max-height: 500px;
            overflow-y: auto;
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
        }

        .document-title-badge {
            background-color: var(--primary-navy);
            color: white;
            padding: 4px 10px;
            font-size: 13px;
            font-weight: bold;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 10px;
            font-family: sans-serif;
        }

        /* TABLES STYLING (RESOURCES & COUNCIL) */
        .table-responsive-wrapper {
            width: 100%;
            overflow-x: auto;
            background: white;
            border-radius: 12px;
            border: 1px solid #E2E8F0;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            margin-top: 20px;
            margin-bottom: 40px;
        }

        .resource-data-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 16px;
        }

        .resource-data-table th {
            background-color: var(--primary-navy);
            color: white;
            padding: 16px 20px;
            font-weight: 700;
            font-size: 17px;
        }

        .resource-data-table td {
            padding: 16px 20px;
            border-bottom: 1px solid #E2E8F0;
            color: var(--text-dark);
            vertical-align: top;
        }

        .resource-data-table tr:last-child td {
            border-bottom: none;
        }

        .resource-data-table tr:nth-child(even) {
            background-color: #F8FAFC;
        }

        .resource-data-table a {
            color: var(--accent-red);
            text-decoration: none;
            font-weight: 600;
        }

        .resource-data-table a:hover {
            text-decoration: underline;
        }

        .resource-phone {
            font-weight: bold;
            color: var(--accent-blue);
            white-space: pre-line;
        }

        /* CONTACT US MODULE STYLING */
        .contact-page-card {
            background: white;
            border-radius: 12px;
            border: 1px solid #E2E8F0;
            padding: 40px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }

        .contact-page-card h4 {
            font-size: var(--font-md);
            color: var(--primary-navy);
            border-bottom: 3px solid var(--accent-blue);
            padding-bottom: 10px;
            margin-bottom: 25px;
        }

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

        @media (max-width: 768px) {
            .contact-grid-row { grid-template-columns: 1fr; gap: 30px; }
        }

        .contact-method-item {
            margin-bottom: 20px;
        }

        .contact-method-item strong {
            display: block;
            font-size: 19px;
            color: var(--accent-blue);
            margin-bottom: 4px;
        }

        .contact-method-item p {
            font-size: var(--font-base);
            color: var(--text-dark);
        }

        /* SOCIAL LINK FOOTER DESIGN */
        .social-link-wrapper {
            margin-top: 15px;
            font-size: 16px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 25px;
        }

        .social-link-wrapper a {
            color: #38BDF8;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.2s ease-in-out;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .social-link-wrapper a.fb-link {
            color: #60A5FA;
        }

        .social-link-wrapper a.ig-link {
            color: #E1306C;
        }

        .social-link-wrapper a:hover {
            color: white;
            text-decoration: underline;
        }

        footer {
            background-color: var(--primary-navy);
            color: #94A3B8;
            text-align: center;
            padding: 40px 5%;
            margin-top: 100px;
            border-top: 4px solid var(--accent-blue);
			margin-top: 40px;

        }

/* ---- Forms page: online-form (primary) + PDF (secondary) actions ---- */
.form-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 18px 0 4px;
}
.form-actions-row .btn-primary { margin-top: 0; color: #fff; word-break: normal; }
.form-actions-row .btn-pdf { color: var(--primary-navy); word-break: normal; }
.btn-pdf {
    display: inline-block;
    background-color: #fff;
    color: var(--primary-navy);
    border: 2px solid var(--primary-navy);
    padding: 13px 26px;
    border-radius: 8px;
    font-size: var(--font-base);
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
.btn-pdf:hover { background-color: var(--bg-light); }

        /* ---- Homepage promo buttons (Site_Promos) ---- */
        .promo-section {
          /*  background: #e8e8e8;*/
		    background: none;
            padding: 40px 0;
            margin: 0px 0 0;
        }
        .promo-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 5%;
        }
        .promo-heading {
            font-size: var(--font-lg);
            font-weight: 800;
            color: var(--primary-navy);
            text-align: center;
            margin-bottom: 24px;
        }
        .promo-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
        }
        @media (max-width: 768px) { .promo-grid { grid-template-columns: 1fr; } }
        .promo-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 26px 56px 26px 28px;
            border-radius: 14px;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid transparent;
            box-shadow: 0 4px 14px rgba(0,0,0,0.15);
            transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
        }
        /* Arrow cue on the right so it clearly reads as a clickable button */
        .promo-card::after {
            content: "›";
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30px;
            font-weight: 700;
            line-height: 1;
            opacity: .75;
        }
        .promo-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 26px rgba(0,0,0,0.28);
            filter: brightness(1.06);
        }
        .promo-card:hover::after { right: 16px; opacity: 1; }
        .promo-icon { font-size: 38px; line-height: 1; flex-shrink: 0; }
        .promo-text { display: flex; flex-direction: column; gap: 5px; }
        .promo-title { font-size: 20px; font-weight: 800; line-height: 1.15; }
        .promo-desc  { font-size: 14px; font-weight: 500; line-height: 1.45; }

        /* Patriotic themes - solid colored buttons */
        .promo-blue  { background: #0a2a66; border-color: #c9a227; }
        .promo-blue  .promo-title, .promo-blue  .promo-desc, .promo-blue::after { color: #ffffff; }
        .promo-red   { background: #b22234; border-color: #ffffff; box-shadow: 0 4px 14px rgba(178,34,52,0.35); }
        .promo-red   .promo-title, .promo-red   .promo-desc, .promo-red::after { color: #ffffff; }
        .promo-white { background: #ffffff; border-color: #0a2a66; }
        .promo-white .promo-title { color: #0a2a66; }
        .promo-white .promo-desc  { color: #475569; }
        .promo-white::after { color: #0a2a66; }