:root{

--navy:#081A33;
--gold:#C9A227;
--light:#F8FAFC;
--border:#E5E7EB;
--text:#334155;
--radius:18px;

}


.job-page{

background:#f5f7fb;

min-height:100vh;

}


/*==================================================

HERO

==================================================*/

.job-hero{

padding:70px 0;

background:
linear-gradient(
135deg,
#081A33,
#133A63);

color:white;

}


.job-hero h1{

font-size:3rem;

margin-bottom:20px;

}

.hero-text{

max-width:850px;

font-size:1.1rem;

line-height:1.8;

opacity:.92;

}


/*==================================================

LETTER BAR

==================================================*/

.quick-links{

background:white;

padding:18px 0;

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

position:sticky;

top:82px;

z-index:100;

}

.quick-links .container{

display:flex;

gap:10px;

overflow-x:auto;

padding-bottom:4px;

}

.letter{

min-width:48px;

height:48px;

border:none;

border-radius:12px;

background:#EEF3F8;

font-weight:800;

cursor:pointer;

transition: var(--transition);

}

.letter:hover{

background:var(--gold);

}

.letter.active{

background:var(--navy);

color:white;

}



/*==================================================

LAYOUT

==================================================*/

.job-layout{

padding:50px 0;

}

.layout{

display:grid;

grid-template-columns:340px 1fr;

gap:35px;

align-items:start;

}



/*==================================================

SIDEBAR

==================================================*/

#stateCount{

background:var(--gold);

color:var(--navy);

padding:5px 12px;

border-radius:40px;

font-size:.9rem;

}



/*==================================================

STATE LIST

==================================================*/

.state-item{

padding:18px 22px;

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

cursor:pointer;

transition: var(--transition);

}

.state-item:hover{

background:#F4F7FB;

}

.state-item.active{

background:#081A33;

color:white;

border-left:5px solid var(--gold);

}

.state-item h3{

margin:0;

font-size:1rem;

}

.state-item small{

display:block;

margin-top:6px;

opacity:.75;

}



/*==================================================

DETAIL PANEL

==================================================*/

.details-panel{

background:#fcfcfd;
border: 1px solid #E5E7EB;

border-radius:22px;

padding:40px;

box-shadow: var(--shadow);

min-height:700px;

}

/*==================================================

STATE HEADER

==================================================*/

.state-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:30px;

margin-bottom:35px;

padding-bottom:25px;

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

}

.state-header h2{

font-size:2.3rem;

margin:0 0 10px;

color:var(--navy);

}

.state-subtitle{

color:#64748B;

line-height:1.7;

}

.last-reviewed{

font-size:.9rem;

color:#94A3B8;

}

/*==================================================

BADGES

==================================================*/

.badges{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:25px 0;

}

.badge{

display:inline-flex;

align-items:center;

padding:10px 16px;

border-radius:999px;

font-size:.9rem;

font-weight:700;

}

.badge.red{

background:#FEE2E2;

color:#B91C1C;

}

.badge.yellow{

background:#FEF3C7;

color:#92400E;

}

.badge.green{

background:#DCFCE7;

color:#166534;

}

.badge.blue{

background:#DBEAFE;

color:#1D4ED8;

}

/*==================================================

CONTENT GRID

==================================================*/

.info-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:24px;

margin:35px 0;

}

.info-card{

background:#F8FAFC;

border:1px solid #e5e7eb;

border-radius:14px;

padding:10px 16px;

}

.info-card h3{

margin:0 0 15px;

color:var(--navy);

font-size:1.15rem;

}

.info-card ul{

margin:0;
padding-left:20px;

}

.info-card li{

margin-bottom:10px;

line-height:1.6;

color:var(--text);

}

/*==================================================

STATUTE

==================================================*/

.statute{

margin-top:35px;

padding:30px;

background:#081A33;

border-radius:18px;

color:white;

}

.statute h3{

margin:0 0 15px;

color:#fff;

}

.statute code{

display:inline-block;

padding:12px 16px;

margin-top:10px;

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

border-radius:10px;

font-family:ui-monospace,monospace;

font-size:.95rem;

word-break:break-word;

}

/*==================================================

NOTES

==================================================*/

.notes{

margin-top:35px;

padding:30px;

border-left:5px solid var(--gold);

background:#FFFDF7;

border-radius:12px;

}

.notes h3{

margin:0 0 15px;

color:var(--navy);

}

.notes ul, .legend ul {
list-style: none;
margin: 0;
padding: 0;
}

.notes li{

margin-bottom:12px;

line-height:1.7;

}

/*==================================================

LEGEND

==================================================*/

.legend{
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 14px;
}

.legend h2{

margin-bottom:25px;

text-align:center;

color:var(--navy);

}

.legend-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}

.legend-grid>div{

background:#fff;

padding:24px;

border-radius:18px;

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

}

/*==================================================

DISCLAIMER

==================================================*/

.disclaimer{

padding:80px 0;

background:#fff;

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

}

.disclaimer h2{

color:var(--navy);

margin-bottom:20px;

}

.disclaimer p{

max-width:900px;

line-height:1.9;

color:var(--text);

}

/*==================================================

MOBILE

==================================================*/

@media(max-width:1000px){

.layout{

grid-template-columns:1fr;

}

.state-item{

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

}

.details-panel{

padding:24px;

min-height:auto;

}

.state-header{

flex-direction:column;

}

.job-hero h1{

font-size:2.2rem;

}

}

@media(max-width:600px){

.info-grid{

grid-template-columns:1fr;

}

.badges{

flex-direction:column;

align-items:flex-start;

}

.quick-links .container{

gap:8px;

}

.letter{

min-width:42px;

height:42px;

}

}


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

.details-panel{
    animation:fade .35s ease;
}

@keyframes fade{

from{
opacity:0;
transform:translateY(15px);
}

to{
opacity:1;
transform:none;
}

}

.state-item{

transition: var(--transition);
}

.state-item:hover{

transform:translateX(4px);

}

.info-card{

transition: var(--transition);

}

.info-card:hover{

transform:translateY(-4px);

box-shadow: var(--shadow);

}


/*==================================================

EMPTY SEARCH

==================================================*/

.no-results{

padding:60px 30px;

text-align:center;

color:#64748B;

}


/*==================================================

ACCESSIBILITY

==================================================*/

button:focus,
input:focus,
.state-item:focus{

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

outline-offset:3px;

}

html{

scroll-behavior:smooth;

}

miniBadges{

margin:8px 0;

display:flex;

gap:8px;

flex-wrap:wrap;

}

.mini{

padding:4px 10px;

border-radius:20px;

font-size:.72rem;

font-weight:700;

}

.mini.red{

background:#FEE2E2;

color:#B91C1C;

}

.mini.green{

background:#DCFCE7;

color:#166534;

}

html{

scroll-behavior:smooth;

}

@media(max-width:900px){

.state-item{

border-radius:14px;

margin:6px;

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

}

.state-item.active{

border-left:none;

border:2px solid var(--gold);

}

}