.login-aside h3 {
    color: #ffffff !important;
}

.login-aside,
.aside-left,
.aside-menu,
#kt_aside_menu,
#kt_brand,
#kt_header_mobile {
    background-color: #113174 !important;
}

.aside-menu .menu-nav {
    padding: 3px 0 !important;
}

.brand {
    padding: 20px !important;
    height: 80px !important;
}

.btn-primary {
    color: #ffffff !important;
    background-color: #1e3a5f !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background-color: #0f2542 !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-active {
    background-color: #1e3a5f !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-link {
    background-color: #1e3a5f !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-here>.menu-heading,
.aside-menu .menu-nav>.menu-item.menu-item-here>.menu-link {
    background-color: #1e3a5f !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-here>.menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #ffffff !important;
}

.user-dropdown {
    background-color: #113174 !important;
}

.aside-menu .menu-nav>.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover {
    background-color: transparent !important;
    transition: 0.3s !important;
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item.menu-item-active>.menu-heading,
.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item.menu-item-active>.menu-link {
    background-color: #1e3a5f !important;
}

.aside-menu .menu-nav>.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-link {
    background-color: #113174 !important;
    color: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-open>.menu-heading,
.aside-menu .menu-nav>.menu-item.menu-item-open>.menu-link {
    background-color: #113174 !important;
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover {
    background-color: #113174 !important;
}

.aside-menu .menu-nav>.menu-item>.menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item>.menu-heading .menu-icon.svg-icon svg g [fill],
.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item>.menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #ffffff !important;
}

.menu-text {
    color: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item>.menu-heading .menu-text,
.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item>.menu-link .menu-text {
    color: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item>.menu-heading .menu-bullet.menu-bullet-dot>span,
.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item>.menu-link .menu-bullet.menu-bullet-dot>span {
    background-color: #ffffff !important;
}

.aside-menu .menu-nav>.menu-item>.menu-heading .menu-arrow,
.aside-menu .menu-nav>.menu-item>.menu-link .menu-arrow {
    color: #ffffff !important;
}

.svg-icon.svg-icon-primary svg g [fill] {
    fill: #111827 !important;
}

@media (min-width: 992px) {
    .header-mobile .burger-icon span {
        background-color: #ffffff !important;
    }

    .brand .btn .svg-icon svg g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
        fill: #111827 !important;
    }
}

@media (max-width: 991.98px) {
    .header-mobile .burger-icon:hover span {
        background-color: #ffffff !important;
    }
}

/* Datatable */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active>.page-link {
    background-color: #113174 !important;
    color: #FFFFFF !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover {
    background-color: #113174 !important;
    color: #FFFFFF !important;
}

/* Navbar dropdown background */
.navbar .dropdown-menu {
    background-color: #113174 !important;
}

/* Dropdown item hover */
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #113174 !important;
}

/* Tooltip styling */
.tooltip-inner {
    background-color: #111827 !important;
    color: #ffffff !important;
}

/* Popover styling */
.popover {
    background-color: #111827 !important;
    color: #ffffff !important;
}

/* Scroll to top */
.scrolltop {
    background-color: #111827 !important;
    color: #ffffff !important;
}

/* Swal confirm dialog button */
.swal2-styled.swal2-confirm {
    background-color: #111827 !important;
}

/* System notification */
.system-notification {
    background-color: #111827 !important;
}

/* Nav link */
.nav-link.active {
    color: #111827 !important;
}

.nav .show>.nav-link,
.nav .nav-link:hover:not(.disabled),
.nav .nav-link.active {
    color: #111827 !important;
}

/* Card on mobile */
@media (max-width: 767.98px) {
    .card.card-custom>.card-header:not(.flex-nowrap) {
        padding-top: 1rem !important;
    }

}

/* Hero button styles for admin header */
.btn-hero-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    background-color: #1e3a5f !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.btn-hero-secondary:hover {
    background-color: #0f2542 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

.btn-hero-secondary .btn-icon {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

/* ============================================================================
   PUBLIC THEME — unified look across all guest-facing pages.
   Matches the homepage SPA at / (src/lovable-homepage). Applied 2026-04-18.
   Scope: inside .guest-page-wrapper only — admin/user pages are untouched.
   ============================================================================ */
:root {
    --public-bg: #FAF7F2;          /* cream chassis */
    --public-bg-alt: #F1EDE4;      /* secondary surface */
    --public-navy: #0A2342;        /* deep navy — headings, primary nav */
    --public-ink: #0E1726;         /* body ink */
    --public-red: #B22234;         /* Old Glory red — CTAs, accents */
    --public-red-hover: #8F1B2A;   /* CTA hover */
    --public-gold: #D4AF37;        /* antique gold — hairlines, separators */
    --public-gold-soft: rgba(212, 175, 55, 0.4);
    --public-navy-soft: rgba(10, 35, 66, 0.1);
}

/* Typography — Cormorant Garamond display for headings, Inter for body */
.guest-page-wrapper h1,
.guest-page-wrapper h2,
.guest-page-wrapper h3,
.guest-page-wrapper .font-display,
.guest-page-wrapper .display-1,
.guest-page-wrapper .display-2,
.guest-page-wrapper .display-3,
.guest-page-wrapper .display-4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: var(--public-navy);
    letter-spacing: -0.01em;
    font-weight: 500;
}
.guest-page-wrapper h4,
.guest-page-wrapper h5,
.guest-page-wrapper h6 {
    font-family: 'Inter', sans-serif;
    color: var(--public-navy);
    font-weight: 600;
}
.guest-page-wrapper .font-body {
    font-family: 'Inter', sans-serif !important;
}

/* Eyebrow labels — small-caps above headings, SPA-style */
.guest-page-wrapper .label-eyebrow,
.guest-page-wrapper .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--public-navy);
}

/* Gold hairline divider */
.guest-page-wrapper .hairline-gold,
.guest-page-wrapper .hr-public {
    border-top: 1px solid var(--public-gold-soft);
    margin: 0;
}

/* Page-header accent rule — short (48px) centered gold mark between the
   eyebrow label and the h3 title. Replaces the previous top+bottom
   hairline frame (bobo). Pattern cribbed from The Atlantic / NYT Magazine
   section openers: a deliberate accent, not a container. Gold is used
   SPARINGLY — one rule per header, never framing. */
.guest-page-wrapper .page-header .page-header-rule {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--public-gold);
    border: 0;
    margin: 14px auto 18px;
    opacity: 0.85;
}

/* Background utility classes */
.guest-page-wrapper .bg-public-bg { background-color: var(--public-bg) !important; }
.guest-page-wrapper .bg-public-bg-alt { background-color: var(--public-bg-alt) !important; }
.guest-page-wrapper .bg-public-navy { background-color: var(--public-navy) !important; color: #fff; }
.guest-page-wrapper .bg-public-red { background-color: var(--public-red) !important; color: #fff; }

/* Text color utilities */
.guest-page-wrapper .text-public-navy { color: var(--public-navy) !important; }
.guest-page-wrapper .text-public-ink { color: var(--public-ink) !important; }
.guest-page-wrapper .text-public-red { color: var(--public-red) !important; }
.guest-page-wrapper .text-public-gold { color: var(--public-gold) !important; }

/* Primary CTA — matches SPA "Download the App" / "Get Started" */
.guest-page-wrapper .btn-public-primary,
.guest-page-wrapper .btn-public-primary:focus {
    background-color: var(--public-red);
    border-color: var(--public-red);
    color: #fff;
    padding: 12px 28px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.guest-page-wrapper .btn-public-primary:hover {
    background-color: var(--public-red-hover);
    border-color: var(--public-red-hover);
    color: #fff;
    opacity: 0.95;
}

/* Ghost CTA — underlined navy link, SPA "Watch the Video" style */
.guest-page-wrapper .btn-public-ghost {
    color: var(--public-navy);
    border-bottom: 1px solid rgba(10, 35, 66, 0.3);
    padding: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    background: transparent;
    display: inline-block;
    transition: color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}
.guest-page-wrapper .btn-public-ghost:hover {
    color: var(--public-red);
    border-bottom-color: var(--public-red);
    text-decoration: none;
}

/* Public hero — cream-chassis banner wrapper, used by pages that want a
   SPA-style hero. Pages keep their own content; just wrap the hero block. */
.guest-page-wrapper .public-hero {
    background-color: var(--public-bg);
    padding: 80px 16px 64px;
    text-align: center;
    border-bottom: 1px solid var(--public-gold-soft);
}
.guest-page-wrapper .public-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 1.1;
    margin-bottom: 1.25rem;
}
/* Page-header title — shared font-size for the marketing-page pattern
   '.public-hero > .page-header > h1'. Previously every page .blade.php
   duplicated its own '.<slug>-page .page-header h3 { font-size: 34px }'
   rule; after the h3 → h1 a11y promotion we consolidate once here so
   each page inherits the same title size and line-height. This selector
   is more specific than '.guest-page-wrapper .public-hero h1' above, so
   the .page-header h1 stays at its intentional 34px instead of the
   clamp()-scaled hero size. */
.guest-page-wrapper .public-hero .page-header h1 {
    font-size: 34px;
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
}
/* Page-content lead — used by demoted body h2.page-lead elements on
   marketing pages. Sits one level above the standard subsection h2
   (1.5rem) so the visual hierarchy (h1 page title → h2 lead → h2
   subsection) reads correctly despite both being h2 semantically. */
.guest-page-wrapper .page-content h2.page-lead {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--public-navy);
    margin-top: 0;
    margin-bottom: 1.5rem;
}
.guest-page-wrapper .public-hero p.lead,
.guest-page-wrapper .public-hero > p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: rgba(14, 23, 38, 0.8);
    font-style: italic;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

/* Generic public section wrapper — alternating cream surfaces */
.guest-page-wrapper .public-section {
    padding: 80px 16px;
}
.guest-page-wrapper .public-section--alt {
    background-color: var(--public-bg-alt);
}

/* Public card — feature card style */
.guest-page-wrapper .public-card {
    background: var(--public-bg);
    border: 1px solid var(--public-navy-soft);
    border-radius: 2px;
    padding: 32px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.guest-page-wrapper .public-card:hover {
    border-color: var(--public-gold-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.guest-page-wrapper .public-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Override the legacy nav palette to match SPA cream chassis.
   Nav-header.blade.php's hard-coded hexes (#012269, #1e3a5f, #dc2626) are
   recolored here without editing the component file. */
.guest-page-wrapper header.bg-white,
.guest-page-wrapper header {
    background-color: var(--public-bg) !important;
    border-bottom: 1px solid var(--public-navy-soft);
    box-shadow: none !important;
}
.guest-page-wrapper .nav-menu-link,
.guest-page-wrapper .nav-menu-link:visited {
    color: var(--public-navy) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
}
.guest-page-wrapper .nav-menu-link:hover {
    color: var(--public-red) !important;
    opacity: 1;
}
.guest-page-wrapper .nav-menu-link-active {
    color: var(--public-red) !important;
}
.guest-page-wrapper header .btn-danger {
    background-color: var(--public-red) !important;
    border-color: var(--public-red) !important;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
    border-radius: 2px !important;
}
.guest-page-wrapper header .btn-danger:hover {
    background-color: var(--public-red-hover) !important;
    border-color: var(--public-red-hover) !important;
}
.guest-page-wrapper .webmail-btn {
    background: var(--public-navy) !important;
    border-color: var(--public-navy) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.guest-page-wrapper .webmail-btn:hover {
    background: #061a31 !important;
    border-color: #061a31 !important;
    box-shadow: 0 2px 6px rgba(10, 35, 66, 0.2) !important;
}
.guest-page-wrapper .text-hover-primary:hover {
    color: var(--public-red) !important;
}

/* GOPvalues logo mark in nav — swap hard-coded navy to palette */
.guest-page-wrapper header span[style*="#1e3a5f"] {
    color: var(--public-navy) !important;
}

/* Brand lockup — Cormorant Garamond display serif, matches homepage SPA
   brand treatment at gopvalues.com/. Applied to nav logo span and footer
   brand span via class; do NOT inline font-family in templates. Loaded
   globally (not scoped to .guest-page-wrapper) so auth, user, and admin
   chrome pick it up too. */
.brand-mark {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    letter-spacing: 0;
}

/* Mobile menu panel cream chassis */
.guest-page-wrapper .mobile-nav-menu {
    background-color: var(--public-bg) !important;
}
.guest-page-wrapper .mobile-nav-link:hover {
    background-color: var(--public-bg-alt) !important;
}

/* Footer — recolor without editing component file. Laravel footer uses
   inline styles for dark-blue CTA (#133375) and dark-gray base (#111827).
   We keep the dark-blue CTA band as a single deliberate inverted section
   (SPA's ElectionsTeaser pattern), but swap its navy to the palette. */
.guest-page-wrapper footer [style*="#133375"],
.guest-page-wrapper footer [style*="133375"] {
    background-color: var(--public-navy) !important;
}
.guest-page-wrapper footer [style*="#111827"],
.guest-page-wrapper footer [style*="111827"] {
    background-color: var(--public-bg-alt) !important;
    color: var(--public-ink) !important;
}
.guest-page-wrapper footer [style*="#111827"] a,
.guest-page-wrapper footer [style*="111827"] a {
    color: rgba(14, 23, 38, 0.8) !important;
}
.guest-page-wrapper footer [style*="#111827"] a:hover,
.guest-page-wrapper footer [style*="111827"] a:hover {
    color: var(--public-red) !important;
}
.guest-page-wrapper footer h5,
.guest-page-wrapper footer h6 {
    color: var(--public-navy) !important;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 11px;
}

/* Generic link color in body */
.guest-page-wrapper main a:not(.btn):not(.nav-menu-link):not(.webmail-btn):not(.btn-public-primary):not(.btn-public-ghost),
.guest-page-wrapper .container a:not(.btn):not(.nav-menu-link):not(.webmail-btn):not(.btn-public-primary):not(.btn-public-ghost) {
    color: var(--public-red);
}
.guest-page-wrapper main a:hover:not(.btn):not(.nav-menu-link):not(.webmail-btn):not(.btn-public-primary):not(.btn-public-ghost) {
    color: var(--public-red-hover);
}

/* Bootstrap btn-primary on public pages → red (admin pages override this
   via the higher-specificity rule at the top of this file) */
.guest-page-wrapper .btn-primary:not(.aside-menu *) {
    background-color: var(--public-red) !important;
    border-color: var(--public-red) !important;
    color: #fff !important;
}
.guest-page-wrapper .btn-primary:not(.aside-menu *):hover {
    background-color: var(--public-red-hover) !important;
    border-color: var(--public-red-hover) !important;
}

/* Form controls — cream chassis friendly */
.guest-page-wrapper .form-control:focus {
    border-color: var(--public-gold);
    box-shadow: 0 0 0 3px var(--public-gold-soft);
}

/* Legacy hero class on Laravel welcome (in case the old welcome.blade.php
   is still loaded somewhere): swap primary red from #dc2626 → palette red */
.guest-page-wrapper .btn-hero-primary {
    background-color: var(--public-red) !important;
}
.guest-page-wrapper .btn-hero-primary:hover {
    background-color: var(--public-red-hover) !important;
}
.guest-page-wrapper .btn-hero-secondary {
    background-color: var(--public-navy) !important;
    border-color: var(--public-navy) !important;
}
.guest-page-wrapper .btn-hero-secondary:hover {
    background-color: #061a31 !important;
}