/*==================================================
COMPLIANCEATLAS
MAIN.CSS
Shared Stylesheet
====================================================*/


/*==================================================
CSS VARIABLES
==================================================*/

:root{

/* Brand */

--primary:#2563eb;
--primary-hover:#60a5fa;

--gold:#C9A227;

/* Status */

--badge-success:green;
--badge-primary:blue;
--badge-warning:rgb(238, 238, 69);
--badge-danger:red;


/* Badges */

--success:#dcfce7;
--warning:#fff7cc;
--danger:#fef2f2;




/* Backgrounds */

--background:#111827;
--background-dark:#05070d;

--surface:#ffffff;
--surface-light:#f8fafc;

/* Text */

--text:#f9fafb;
--text-dark:#1f2937;
--muted:#6b7280;

/* Borders */

--border:#d1d5db;
--border-light:rgba(255,255,255,.12);

/* Header */

--header-bg:rgba(17,24,39,.92);

/* Effects */

--radius:16px;

--shadow:
0 8px 24px rgba(0,0,0,.08);

--shadow-lg:
0 18px 40px rgba(0,0,0,.16);

--transition:.25s ease;

--max-width:1400px;

}


/*==================================================
RESET
==================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Arial,sans-serif;

background:
linear-gradient(
135deg,
var(--background-dark),
var(--background),
#09111f);

color:var(--text);

line-height:1.6;
margin: 0;
padding:0px;

}


/*==================================================
TYPOGRAPHY
==================================================*/

h1,h2,h3,h4{

line-height:1.25;

font-weight:700;

}

p{

line-height:1.7;

}

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}


/*==================================================
LAYOUT
==================================================*/

.container{

width: 94%;

margin:0 auto;

}

.section{

padding:50px 0;

}


/*==================================================
HEADER
==================================================*/

.site-header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

background:var(--header-bg);

backdrop-filter:blur(12px);

border-bottom:
1px solid var(--border-light);

padding: 0;

}


/*==================================================
NAV CONTAINER
==================================================*/

.nav-container{

max-width:var(--max-width);

margin:auto;

padding:12px 18px;

display:flex;

justify-content:space-between;

align-items:center;

}


/*==================================================
LOGO
==================================================*/

.logo{

display:flex;

align-items:center;

gap:18px;

color:white;

}

.logo-box{

width:54px;

height:54px;

border-radius:16px;

background:var(--gold);

display:flex;

justify-content:center;

align-items:center;

font-size:1.3rem;

font-weight:900;

color:#081A33;

}

.logo h2{

margin:0;

font-size:1.3rem;

}

.logo span{

font-size:.8rem;

opacity:.75;

}


/*==================================================
DESKTOP NAVIGATION
==================================================*/

.nav-links{

display:flex;

gap:10px;

list-style:none;

color: var(--text);

}

.nav-links a{

display:block;

padding:9px 16px;

border-radius:999px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.10);

transform: var(--transition);

box-shadow: var(--shadow);
color: #fff;

}

.nav-links a:hover{

transform: var(--transition);

background:
rgba(37,99,235,.18);

border-color:
rgba(96,165,250,.5);

box-shadow:
0 0 12px rgba(37,99,235,.35);

}

.nav-links a.active{

background:var(--primary);

border-color:var(--primary);

}


/*==================================================
HAMBURGER
==================================================*/

.menu-toggle{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}

.menu-toggle span{

width:26px;

height:3px;

background:white;

border-radius:3px;

transition:.3s;

}

/*==================================================
BUTTONS
==================================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:12px 22px;

border:none;

border-radius:12px;

cursor:pointer;

font-weight:600;

transition:var(--transition);

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:var(--primary-hover);

transform:translateY(-2px);

}

.btn-secondary{

background:#374151;

color:white;

}

.btn-secondary:hover{

background:#4b5563;

}

.btn-success{

background:#15803d;

color:white;

}

.btn-warning{

background:#ca8a04;

color:white;

}

.btn-danger{

background:#b91c1c;

color:white;

}


/*==================================================
COMMON CARDS
==================================================*/

.card{

background:var(--surface);

color:var(--text-dark);

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:24px;

transition:var(--transition);

}

.card:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-lg);

}

.card-header{

margin-bottom:18px;

}

.card-title{

font-size:1.4rem;

font-weight:700;

margin-bottom:10px;

}

.card-body{

line-height:1.7;

}

.card-footer{

margin-top:20px;

padding-top:20px;

border-top:1px solid var(--border);

}


/*==================================================
BADGES
==================================================*/

.badge{

display:inline-block;

padding:6px 12px;

border-radius:999px;

font-size:.82rem;

font-weight:600;

}

.badge-primary{

background:#dbeafe;

color:#1d4ed8;

}

.badge-success{

background:#dcfce7;

color:#166534;

}

.badge-warning{

background:#fef9c3;

color:#854d0e;

}

.badge-danger{

background:#fee2e2;

color:#991b1b;

}


/*==================================================
FORM CONTROLS
==================================================*/

input,
select,
textarea{

width:100%;

padding:12px 14px;

font-size:1rem;

border:1px solid var(--border);

border-radius:10px;

background:white;

transition:var(--transition);

}

input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:
0 0 0 4px
rgba(37,99,235,.15);

}


/*==================================================
TABLES
==================================================*/

table{

width:100%;

border-collapse:collapse;

background:white;

color:var(--text-dark);

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

th{

background:var(--primary);

color:white;

padding:14px;

text-align:left;

}

td{

padding:14px;

border-bottom:1px solid var(--border);

vertical-align:top;

}

tr:last-child td{

border-bottom:none;

}


/*==================================================
UTILITY CLASSES
==================================================*/

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.mt-1{

margin-top:10px;

}

.mt-2{

margin-top:20px;

}

.mt-3{

margin-top:30px;

}

.mb-1{

margin-bottom:10px;

}

.mb-2{

margin-bottom:20px;

}

.mb-3{

margin-bottom:30px;

}

.hidden{

display:none;

}

.flex{

display:flex;

}

.grid{

display:grid;

}

/*==================================================
ALERTS
==================================================*/

.alert{

padding:16px 20px;

border-radius:12px;

margin:20px 0;

border-left:5px solid transparent;

}

.alert-info{

background:#dbeafe;

border-color:#2563eb;

color:#1e3a8a;

}

.alert-success{

background:#dcfce7;

border-color:#16a34a;

color:#166534;

}

.alert-warning{

background:#fef9c3;

border-color:#ca8a04;

color:#854d0e;

}

.alert-danger{

background:#fee2e2;

border-color:#dc2626;

color:#991b1b;

}


/*==================================================
LOADING / EMPTY STATES
==================================================*/

.loading,
.empty-state{

padding:40px;

text-align:center;

color:var(--muted);

font-size:1.05rem;

}


/*==================================================
IMAGES
==================================================*/

img{

transition:var(--transition);

}

.img-hover:hover{

filter:brightness(1.08);

transform:scale(1.01);

}


/*==================================================
FOOTER
==================================================*/

.site-footer{

margin-top:80px;

padding:40px 20px;

text-align:center;

font-size:.95rem;

line-height:1.8;

color:#cbd5e1;

border-top:1px solid rgba(255,255,255,.08);

background:rgba(255,255,255,.02);

}

.site-footer p{

max-width:900px;

margin:0 auto;

}


/*==================================================
ANIMATIONS
==================================================*/

.fade-in{

animation:fadeIn .35s ease;

}

.slide-up{

animation:slideUp .35s ease;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0f172a;

}

::-webkit-scrollbar-thumb{

background:#334155;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#475569;

}


/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

body{

padding:0;

}

.menu-toggle{

display:flex;

}

.nav-links{

display:none;

position:fixed;

top:79px;

left:0;

right:0;

width:100%;

margin:0;

padding:15px 0;

background:var(--background);

flex-direction:column;

gap:8px;

z-index:9999;

border-top:1px solid rgba(255,255,255,.08);

border-bottom:1px solid rgba(255,255,255,.08);

}

.nav-links.show{

display:flex;

}

.nav-links li{

width:100%;

}

.nav-links a{

display:block;

width:100%;

padding:15px;

text-align:center;

border-radius:0;

border-left:none;

border-right:none;

border-top:none;

background:transparent;

box-shadow:none;

}

.card{

padding:20px;

}

table{

display:block;

overflow-x:auto;

}

}


/*==================================================
PRINT
==================================================*/

@media print{

.site-header,
.menu-toggle,
.site-footer{

display:none;

}

body{

background:white;

color:black;

padding:0;

}

.card{

box-shadow:none;

border:1px solid #ccc;

}

}


/*==================================================
ACCESSIBILITY
==================================================*/

:focus-visible{

outline:3px solid var(--primary);

outline-offset:2px;

}

::selection{

background:var(--primary);

color:white;

}

/*==================================================
PAGE LAYOUT UTILITIES
==================================================*/

.page{

width:94%;

margin:0 auto;

padding-top:95px;
padding-bottom:60px;

}


.page-header{

margin-bottom:40px;

}

.page-title{

font-size:clamp(2rem,4vw,3rem);

font-weight:800;

color:var(--text);

margin-bottom:12px;

}

.page-subtitle{

max-width:850px;

font-size:1.1rem;

line-height:1.7;

color:#cbd5e1;

}

.section-title{

font-size:1.75rem;

font-weight:700;

margin-bottom:25px;

color:var(--text-dark);

}


/*==================================================
GRID SYSTEM
==================================================*/

.grid-2{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:24px;

}

.grid-3{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.grid-4{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

@media(max-width:992px){

.grid-4{

grid-template-columns:repeat(2,1fr);

}

.grid-3{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

}


/*==================================================
COMMON CONTENT SECTIONS
==================================================*/

.panel{

background:var(--surface);

border-radius:var(--radius);

padding:28px;

box-shadow:var(--shadow);

color:var(--text-dark);

}

.panel-dark{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

color:white;

border-radius:var(--radius);

padding:28px;

}


/*==================================================
COMMON SEARCH BAR
==================================================*/

.search-bar{

display:flex;

gap:15px;

align-items:center;

flex-wrap:wrap;

margin-bottom:30px;

}

.search-bar input{

flex:1;

min-width:240px;

}


/*==================================================
COMMON HERO
==================================================*/

.hero{

padding:70px 20px;

text-align:center;

border-radius:0 0 24px 24px;

background:
linear-gradient(
135deg,
#1358b8,
#1d79d8);

color:white;

}

.hero h1{

font-size:clamp(2.3rem,5vw,3.4rem);

margin-bottom:18px;

}

.hero p{

max-width:900px;

margin:auto;

font-size:1.1rem;

opacity:.95;

}


/*==================================================
HELPERS
==================================================*/

.text-muted{

color:var(--muted);

}

.rounded{

border-radius:var(--radius);

}

.shadow{

box-shadow:var(--shadow);

}

.shadow-lg{

box-shadow:var(--shadow-lg);

}

.w-100{

width:100%;

}

.center{

display:flex;

justify-content:center;

align-items:center;

}

.space-between{

display:flex;

justify-content:space-between;

align-items:center;

}

.hidden{

display:none !important;

}

/*==================================================
COMMON PAGE COMPONENTS
==================================================*/

.content-card{

background:var(--surface);

color:var(--text-dark);

padding:28px;

border-radius:var(--radius);

box-shadow:var(--shadow);

margin-bottom:24px;

}

.content-card h2{

margin-bottom:18px;

}

.content-card h3{

margin-bottom:12px;

}

.content-card p:last-child{

margin-bottom:0;

}

.section-spacing{

margin-bottom:40px;

}


/*==================================================
LISTS
==================================================*/

.list-clean{

list-style:none;

padding:0;

margin:0;

}

.list-clean li{

padding:10px 0;

border-bottom:1px solid var(--border);

}

.list-clean li:last-child{

border-bottom:none;

}


/*==================================================
STATUS COLORS
==================================================*/

.status-success{

color:#15803d;

font-weight:700;

}

.status-warning{

color:#ca8a04;

font-weight:700;

}

.status-danger{

color:#b91c1c;

font-weight:700;

}

.status-info{

color:#2563eb;

font-weight:700;

}


/*==================================================
DIVIDERS
==================================================*/

.divider{

height:1px;

background:var(--border);

margin:30px 0;

opacity:.6;

}


/*==================================================
COMMON ICON CIRCLES
==================================================*/

.icon-circle{

width:48px;

height:48px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(37,99,235,.12);

color:var(--primary);

font-size:1.25rem;

}

.bg-white{

background:var(--surface);

}

.bg-dark{

background:var(--background);

}

.rounded{

border-radius:var(--radius);

}

.shadow{

box-shadow:var(--shadow);

}

.shadow-lg{

box-shadow:var(--shadow-lg);

}

.w-100{

width:100%;

}

.center{

display:flex;

justify-content:center;

align-items:center;

}

.space-between{

display:flex;

justify-content:space-between;

align-items:center;

}

.flex-wrap{

flex-wrap:wrap;

}

.gap-10{

gap:10px;

}

.gap-20{

gap:20px;

}

.gap-30{

gap:30px;

}

/*==================================================
COMMON PAGE SECTIONS
==================================================*/

.page-section{

margin-bottom:50px;

}

.page-section:last-child{

margin-bottom:0;

}

.section-header{

margin-bottom:24px;

}

.section-title{

font-size:1.8rem;

font-weight:700;

color:var(--text-dark);

margin-bottom:8px;

}

.section-description{

color:var(--muted);

line-height:1.7;

max-width:850px;

}


/*==================================================
COMMON LIST CARDS
==================================================*/

.info-list{

display:flex;

flex-direction:column;

gap:16px;

}

.info-item{

padding:18px;

background:var(--surface);

border-radius:var(--radius);

box-shadow:var(--shadow);

color:var(--text-dark);

transition:var(--transition);

}

.info-item:hover{

transform:translateY(-3px);

box-shadow:var(--shadow-lg);

}


/*==================================================
RESPONSIVE EMBEDS
==================================================*/

.responsive{

width:100%;

overflow-x:auto;

}

iframe{

max-width:100%;

border:none;

}

/*==================================================
COMMON TABLE HELPERS
==================================================*/

.table-responsive{

width:100%;

overflow-x:auto;

}

.table-compact td,
.table-compact th{

padding:10px;

}

.table-striped tbody tr:nth-child(even){

background:#f8fafc;

}

.table-hover tbody tr:hover{

background:#eef4ff;

}


/*==================================================
COMMON TAGS
==================================================*/

.tag{

display:inline-block;

padding:6px 12px;

border-radius:999px;

font-size:.85rem;

font-weight:600;

}

.tag-blue{

background:#dbeafe;

color:#1d4ed8;

}

.tag-green{

background:#dcfce7;

color:#166534;

}

.tag-yellow{

background:#fef3c7;

color:#92400e;

}

.tag-red{

background:#fee2e2;

color:#991b1b;

}


/*==================================================
COMMON TRANSITIONS
==================================================*/

.hover-lift{

transition:var(--transition);

}

.hover-lift:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-lg);

}

.clickable{

cursor:pointer;

}

/*==================================================
COMMON PAGE TITLES
==================================================*/

.page-intro{

margin-bottom:40px;

}

.page-intro h1{

font-size:clamp(2.1rem,4vw,3rem);

font-weight:800;

margin-bottom:14px;

color:var(--text);

}

.page-intro p{

max-width:900px;

font-size:1.05rem;

line-height:1.8;

color:#d1d5db;

}


/*==================================================
CONTENT WRAPPERS
==================================================*/

.content-wrapper{

display:flex;

flex-direction:column;

gap:30px;

}

.content-grid{

display:grid;

gap:24px;

}

.content-grid-2{

grid-template-columns:repeat(2,1fr);

}

.content-grid-3{

grid-template-columns:repeat(3,1fr);

}

@media(max-width:768px){

.content-grid-2,
.content-grid-3{

grid-template-columns:1fr;

}

}

/*=========================================
PAGE SUMMARY
=========================================*/

.page-summary{
padding:3rem 0;
background:var(--surface-alt);
border-top:1px solid var(--border);
}

.page-summary h2{
margin-bottom:1rem;
}

.page-summary p{
max-width:900px;
line-height:1.8;
}

/*=========================================
LEGAL DISCLAIMER
=========================================*/

.disclaimer{
padding:3rem 0;
}

.disclaimer h2{
margin-bottom:1rem;
}

.disclaimer p{
max-width:900px;
line-height:1.8;
}

/*=========================================
LEGEND
=========================================*/

.legend{
padding:3rem 0;
}

.legend-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:2rem;
}

.legend-grid div{
background:#fff;
padding:20px;
border:1px solid var(--border);
border-radius:12px;
line-height:1.7;
}

/*=========================================
WELCOME PANEL
=========================================*/

.welcome{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:60px 30px;
text-align:center;
border:2px dashed var(--border);
border-radius:12px;
background:var(--surface);
}

.welcome-icon{
font-size:3rem;
margin-bottom:16px;
}

.welcome h2{
margin-bottom:12px;
}

.welcome p{
max-width:650px;
line-height:1.8;
color:var(--text-light);
}

/*=========================================
STATE SIDEBAR
=========================================*/

.state-sidebar{
display:flex;
flex-direction:column;
gap:18px;
}

.sidebar-title{
display:flex;
justify-content:space-between;
align-items:center;
font-size:1.2rem;
font-weight:700;
}

#stateCount{
display:flex;
align-items:center;
justify-content:center;
min-width:38px;
height:38px;
padding:0 12px;
border-radius:999px;
background:var(--primary);
color:#fff;
font-size:.9rem;
}

/*=========================================
STATE LIST
=========================================*/

.state-list{
display:flex;
flex-direction:column;
gap:8px;
}

.state-btn{
width:100%;
padding:12px 16px;
border:1px solid var(--border);
border-radius:10px;
background:#fff;
font-weight:600;
text-align:left;
cursor:pointer;
transition:var(--transition);
}

.state-btn:hover{
border-color:var(--primary);
background:#f5f9ff;
}

.state-btn.active{
background:var(--primary);
border-color:var(--primary);
color:#fff;
}



/*=========================================
CONTENT CARDS
=========================================*/

.content-card{
background:#fff;
border:1px solid var(--border);
border-radius:12px;
padding:24px;
box-shadow:var(--shadow-sm);
}

.content-card h2{
margin-bottom:16px;
}

.content-card h3{
margin-bottom:12px;
}

.content-card p{
line-height:1.75;
}

.content-card+ .content-card{
margin-top:24px;
}

/*=========================================
PAGE LAYOUT
=========================================*/

.layout{
display:grid;
grid-template-columns:300px 1fr;
gap:32px;
align-items:start;
}

.page{
padding-bottom:60px;
}

/*=========================================
SECTION SPACING
=========================================*/

.page section{
margin-top:48px;
}

.page section:first-child{
margin-top:0;
}

/*=========================================
HERO
=========================================*/

.hero-text{
max-width:850px;
margin:18px auto 0;
line-height:1.8;
font-size:1.05rem;
}

.job-hero h1{
margin:0;
}

.job-hero .container{
text-align:center;
}

/*   ### ===== Responsive =====   */


@media(max-width:900px){

.layout{
grid-template-columns:1fr;
}

.state-sidebar{
order:1;
}

.details-panel{
order:2;
}

}

/*========================
FLOAT BUTTON
=========================*/

.floating-actions{

    position:fixed;

    bottom:22px;

    right:22px;

}

#topBtn{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:1.2rem;

    cursor:pointer;

    box-shadow:var(--shadow);
    

}

#topBtn:hover {
    background:var(--primary-hover);
    transform:translateY(-2px);
}

#topBtn:focus{
    outline: none;
    box-shadow: none;
}

#topBtn:focus-visible{
        outline: none;
    box-shadow: none;
}

/*========================*/
:root{
  --ca-gold:#C9A227;
  --ca-gold-2:#e6c35c;
}

.logo-box{box-shadow:0 6px 18px rgba(201,162,39,.35);transition:transform .25s ease;}
.logo:hover .logo-box{transform:rotate(-6deg) scale(1.05);}
.logo h2{letter-spacing:-.01em;}
.btn-donate{background:linear-gradient(135deg,var(--ca-gold),var(--ca-gold-2));color:#3a2a00;font-weight:800;padding:14px 30px;border-radius:999px;box-shadow:0 10px 28px rgba(201,162,39,.45);border:1px solid rgba(255,255,255,.3);display:inline-flex;align-items:center;gap:10px;font-size:1.05rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.btn-donate:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 38px rgba(201,162,39,.6);}
.donate-banner{margin:60px auto;max-width:1100px;padding:52px 28px;border-radius:24px;background:linear-gradient(135deg,#0b2547,#133a63);box-shadow:var(--ca-shadow-lg);text-align:center;color:#fff;position:relative;overflow:hidden;}
.donate-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 220px at 50% -20%,rgba(201,162,39,.25),transparent 60%);pointer-events:none;}
.donate-banner h2{font-size:1.95rem;font-weight:800;margin-bottom:12px;position:relative;letter-spacing:-.01em;}
.donate-banner p{max-width:640px;margin:0 auto 26px;opacity:.92;line-height:1.7;position:relative;}
.donate-banner .btn-donate{position:relative;}
.donate-banner .stripe-note{display:block;margin-top:16px;font-size:.78rem;opacity:.6;position:relative;}


@media (max-width:768px){
  .donate-banner{margin:40px 16px;padding:36px 20px;}
  .donate-banner h2{font-size:1.5rem;}
}