/*==================================================
COMPLIANCEATLAS

MYTHS VS. REALITY
myths.html — generated from content/myths.json by
scripts/myths.mjs

Mobile first: base rules are the phone layout, the
media queries at the end widen it. The hero, banner,
topic pills and topic sections reuse the Case Law
Library's styles; this file adds the myth cards, the
search tools and the most-asked grid.

Requires:
main.css
jobrestrictions.css (hero, disclaimer, legend, --navy, --gold)
travel.css (travel-meta, travel-banner)
caselaw.css (case-btn, cases-roles, cases-filter,
             issue-pill, issue-block, start-num)

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


.myths-page{

--myth:#B91C1C;
--myth-bg:#FEF2F2;
--fact:#166534;
--fact-bg:#F0FDF4;
--ink:#1E293B;
--slate:#475569;

}

.myth-sr{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0 0 0 0);

white-space:nowrap;

border:0;

}


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

.myths-eyebrow{

display:inline-block;

margin-bottom:12px;

padding:5px 14px;

border:1px solid rgba(201,162,39,.55);

border-radius:999px;

color:var(--gold);

font-size:.78rem;

font-weight:800;

letter-spacing:.12em;

text-transform:uppercase;

}


/*==================================================
MOST ASKED
==================================================*/

.myth-start-grid{

display:grid;

grid-template-columns:1fr;

gap:12px;

max-width:1100px;

margin:0 auto;

padding:0;

list-style:none;

}

.myth-start-grid li{

margin:0;

}

.myth-start-card{

display:flex;

gap:14px;

height:100%;

padding:16px;

background:white;

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

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

border-radius:14px;

color:var(--ink);

text-decoration:none;

transition:transform .15s ease, box-shadow .15s ease;

}

.myth-start-card:hover,
.myth-start-card:focus-visible{

transform:translateY(-2px);

box-shadow:0 10px 24px rgba(8,26,51,.08);

}

.myth-start-body{

display:flex;

flex-direction:column;

gap:6px;

min-width:0;

}

.myth-start-q{

color:var(--navy);

font-size:1.04rem;

font-weight:800;

line-height:1.35;

}

.myth-start-a{

color:var(--slate);

font-size:.92rem;

line-height:1.5;

}


/*==================================================
SEARCH + TOOLS (shown by myths.js)
==================================================*/

.myth-tools{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:10px;

margin-bottom:10px;

}

.myth-tools[hidden]{

display:none;

}

.myth-search{

flex:1 1 260px;

}

.myth-search input{

width:100%;

min-height:var(--tap, 44px);

padding:10px 16px;

border:1px solid #CBD5E1;

border-radius:12px;

background:#F8FAFC;

color:var(--ink);

font:inherit;

font-size:1rem;

}

.myth-search input:focus{

outline:none;

border-color:var(--navy);

background:white;

box-shadow:0 0 0 3px rgba(201,162,39,.35);

}

.myth-actions{

display:flex;

gap:8px;

}

.myth-tool{

min-height:var(--tap, 44px);

padding:8px 16px;

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

border-radius:12px;

background:white;

color:var(--navy);

font:inherit;

font-size:.9rem;

font-weight:700;

cursor:pointer;

white-space:nowrap;

}

.myth-tool:hover{

border-color:#94A3B8;

}

.myth-tool[aria-pressed="true"]{

background:var(--navy);

border-color:var(--navy);

color:white;

}

.myth-tool:focus-visible,
.myth-chip:focus-visible,
.myth-share:focus-visible,
.myth summary:focus-visible{

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

outline-offset:2px;

}

.myth-empty{

max-width:1100px;

margin:10px auto 0;

padding:22px;

border:1px dashed #CBD5E1;

border-radius:14px;

color:var(--slate);

text-align:center;

}

.myth-empty[hidden]{

display:none;

}

.myth-empty p{

margin:0 0 12px;

}


/*==================================================
MYTH CARDS
==================================================*/

.myth-list{

display:flex;

flex-direction:column;

gap:12px;

}

.myth{

background:white;

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

border-radius:14px;

scroll-margin-top:170px;

transition:box-shadow .15s ease, border-color .15s ease;

}

.myth[hidden]{

display:none;

}

.myth:hover{

border-color:#CBD5E1;

}

.myth details[open]{

box-shadow:0 12px 30px rgba(8,26,51,.08);

border-radius:14px;

}

.myth.is-target{

border-color:var(--gold);

box-shadow:0 0 0 3px rgba(201,162,39,.35);

}

.myth summary{

position:relative;

display:grid;

gap:6px;

padding:16px 52px 16px 18px;

cursor:pointer;

list-style:none;

border-radius:14px;

}

.myth summary::-webkit-details-marker{

display:none;

}

.myth summary::after{

content:"+";

position:absolute;

top:14px;

right:16px;

display:flex;

align-items:center;

justify-content:center;

width:28px;

height:28px;

border-radius:50%;

background:#F1F5F9;

color:var(--navy);

font-size:1.2rem;

font-weight:700;

line-height:1;

}

.myth details[open] summary::after{

content:"–";

background:var(--navy);

color:white;

}

.myth-tag{

justify-self:start;

padding:2px 10px;

border-radius:999px;

background:var(--myth-bg);

color:var(--myth);

font-size:.72rem;

font-weight:800;

letter-spacing:.06em;

text-transform:uppercase;

}

.myth-title{

margin:0;

color:var(--navy);

font-size:1.08rem;

line-height:1.35;

}

.myth-verdict{

color:var(--fact);

font-size:.93rem;

font-weight:600;

line-height:1.5;

}

.myth-body{

padding:0 18px 18px;

border-top:1px solid #EEF2F7;

}

.myth-pair{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin-top:16px;

}

.myth-claim,
.myth-fact{

padding:14px 16px;

border-radius:12px;

}

.myth-claim{

background:var(--myth-bg);

border-left:4px solid var(--myth);

}

.myth-fact{

background:var(--fact-bg);

border-left:4px solid var(--fact);

}

.myth-kicker{

display:block;

margin-bottom:6px;

font-size:.72rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

}

.myth-claim .myth-kicker{ color:var(--myth); }
.myth-fact .myth-kicker{ color:var(--fact); }

.myth-claim p,
.myth-fact p{

margin:0;

color:var(--ink);

line-height:1.65;

}

.myth-law{

margin-top:18px;

}

.myth-law h4,
.myth-sources h4{

margin:0 0 8px;

color:var(--navy);

font-size:.82rem;

letter-spacing:.08em;

text-transform:uppercase;

}

.myth-law p{

margin:0 0 10px;

color:var(--ink);

line-height:1.75;

}

.myth-cite{

display:flex;

flex-wrap:wrap;

gap:4px 12px;

align-items:baseline;

margin:14px 0 0;

padding:10px 14px;

border-radius:10px;

background:#F8FAFC;

border:1px solid #E2E8F0;

}

.myth-cite-label{

color:var(--slate);

font-size:.72rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

}

.myth-cite-value{

color:var(--ink);

font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

font-size:.85rem;

line-height:1.5;

}

.myth-sources{

margin-top:16px;

}

.myth-source-list{

margin:0;

padding-left:18px;

}

.myth-source-list li{

margin:0 0 6px;

color:var(--slate);

font-size:.92rem;

line-height:1.55;

}

.myth-source-list a{

color:#1D4ED8;

overflow-wrap:anywhere;

}

.myth-source-list a.myth-ll{

margin-left:4px;

color:var(--navy);

font-size:.82rem;

font-weight:700;

white-space:nowrap;

}

.myth-links{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:14px;

}

.myth-chip{

display:inline-flex;

align-items:center;

gap:8px;

min-height:36px;

padding:6px 12px;

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

border-radius:999px;

background:white;

color:var(--navy);

font-size:.86rem;

font-weight:700;

text-decoration:none;

}

.myth-chip:hover{

border-color:var(--navy);

}

.myth-chip-label{

padding:1px 8px;

border-radius:999px;

background:#E2E8F0;

font-size:.68rem;

letter-spacing:.06em;

text-transform:uppercase;

}

.myth-chip.is-case .myth-chip-label{

background:var(--navy);

color:white;

}

.myth-foot{

display:flex;

flex-wrap:wrap;

justify-content:space-between;

gap:8px;

margin-top:16px;

padding-top:12px;

border-top:1px solid #EEF2F7;

color:var(--slate);

font-size:.82rem;

}

.myth-share{

color:var(--navy);

font-weight:700;

}

.myths-about p{

max-width:900px;

margin:0 auto 14px;

line-height:1.8;

color:#334155;

}


/*==================================================
WIDER SCREENS
==================================================*/

@media (min-width:640px){

.myth-start-grid{

grid-template-columns:1fr 1fr;

}

.myth-pair{

grid-template-columns:1fr 1fr;

}

.myth summary{

padding:18px 60px 18px 22px;

}

.myth-body{

padding:0 22px 22px;

}

}

@media (min-width:900px){

.myth-start-grid{

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

}

.myth-title{

font-size:1.15rem;

}

}

@media print{

.myths-filter,
.myths-start,
.cases-hero-actions{

display:none;

}

.myth details > *{

display:block;

}

}