/* ================================================================
   FDAOffenders.com — Government Compliance Branding
   USWDS-inspired institutional design system
   Rebranded to match admin.html official US government style
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root{
  /* Primary — USWDS Blue */
  --primary-darkest:#080e1a;
  --primary-darker:#0f1b33;
  --primary-dark:#0f1b33;
  --primary:#005ea2;
  --primary-vivid:#0076d6;
  --primary-light:#73b3e7;
  --primary-lighter:#d9e8f6;
  --primary-lightest:#eff6fb;

  /* Accent */
  --secondary:#b51d09;
  --secondary-vivid:#e52207;
  --secondary-dim:rgba(181,29,9,.06);
  --accent-red:#d83933;
  --accent-red-dim:rgba(216,57,51,.08);
  --accent-gold:#ffbe2e;
  --success:#00a91c;
  --success-dim:rgba(0,169,28,.06);

  /* Neutrals */
  --ink:#1b1b1b;
  --text:#1b1b1b;
  --text-soft:#565c65;
  --text-dim:#8d9297;
  --base-darkest:#1b1b1b;
  --base-darker:#3d4551;
  --base-dark:#565c65;
  --base:#71767a;
  --base-light:#a9aeb1;
  --base-lighter:#dfe1e2;
  --base-lightest:#f0f0f0;

  /* Surfaces */
  --bg:#f0f0f0;
  --bg-white:#ffffff;
  --white:#ffffff;
  --surface:#ffffff;
  --surface2:#f0f0f0;
  --surface-alt:#f0f0f0;
  --border:#dfe1e2;
  --border2:#e8e8e8;
  --border-dark:#a9aeb1;

  /* Typography — Public Sans only, no Merriweather */
  --heading:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Roboto Mono','Courier New',monospace;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:800px;margin:0 auto;padding:0 24px}

/* ── Government Banner (simple 🇺🇸 style matching admin.html) ── */
.usa-banner{background:var(--bg);padding:4px 0;font-size:11px;color:var(--text-soft);border-bottom:1px solid var(--border)}
.usa-banner .usa-banner__inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:6px}
.usa-banner-flag{font-size:12px}
.usa-banner-text{letter-spacing:.02em}

/* ── Navigation (dark blue, matching admin.html) ───────────────── */
.usa-nav{background:var(--primary-dark);padding:0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.usa-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;max-width:1200px;margin:0 auto}
.usa-nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;line-height:1}
.usa-nav__brand:hover{text-decoration:none;color:#fff}
.usa-nav__brand:visited{color:#fff}
.usa-nav__brand-icon{font-size:20px}
.usa-nav__links{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.usa-nav__links a{color:rgba(255,255,255,.7);font-size:13px;font-weight:600;text-decoration:none;padding:8px 12px;border-radius:4px;transition:color .15s}
.usa-nav__links a:hover{color:#fff;text-decoration:none}
.usa-nav__links a:visited{color:rgba(255,255,255,.7)}
.usa-nav__links a:visited:hover{color:#fff}
.usa-nav__links .usa-btn-nav{background:rgba(255,255,255,.12);color:#fff;padding:8px 18px;font-size:13px;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.2);border-radius:4px}
.usa-nav__links .usa-btn-nav:hover{background:rgba(255,255,255,.2);color:#fff}
.usa-nav__links .usa-btn-nav:visited{color:#fff}

/* ── Hero / Page Header (light backgrounds) ────────────────────── */
.usa-hero{padding:48px 0 40px;background:var(--surface);border-bottom:1px solid var(--border)}
.usa-hero__callout{max-width:720px}
.usa-hero__heading{font-family:var(--font);font-size:clamp(28px,4.5vw,44px);font-weight:900;line-height:1.2;color:var(--ink);margin-bottom:12px}
.usa-hero__heading .accent{color:var(--primary)}
.usa-hero__text{font-size:17px;color:var(--text-soft);line-height:1.7;margin-bottom:28px;max-width:640px}
.usa-hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.page-header{padding:40px 0 24px;border-bottom:1px solid var(--border);background:var(--surface)}
.page-header h1{font-family:var(--font);font-size:clamp(24px,4vw,36px);font-weight:900;color:var(--ink);margin-bottom:8px}
.page-header p{font-size:15px;color:var(--text-soft);max-width:600px;line-height:1.6}

/* ── Buttons ───────────────────────────────────────────────────── */
.usa-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:700;font-family:var(--font);cursor:pointer;border:none;text-decoration:none;transition:background .15s;border-radius:4px}
.usa-btn--primary{background:var(--primary);color:#fff}
.usa-btn--primary:hover{background:var(--primary-dark);color:#fff;text-decoration:none}
.usa-btn--primary:visited{color:#fff}
.usa-btn--outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.usa-btn--outline:hover{background:var(--primary-lightest);color:var(--primary-dark);text-decoration:none}
.usa-btn--outline:visited{color:var(--primary)}
.usa-btn--secondary{background:var(--accent-red);color:#fff}
.usa-btn--secondary:hover{background:#b02e29;color:#fff;text-decoration:none}

/* ── Stats ─────────────────────────────────────────────────────── */
.usa-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin:32px 0;border-radius:6px;overflow:hidden}
.usa-stat{background:var(--surface);padding:20px 16px;text-align:center}
.usa-stat__number{font-family:var(--font);font-size:32px;font-weight:800;color:var(--primary);line-height:1}
.usa-stat__number.red{color:var(--accent-red)}
.usa-stat__label{font-size:11px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;font-weight:600}

/* ── Main Grid Layout ──────────────────────────────────────────── */
.usa-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;padding:40px 0}
.usa-layout__main{min-width:0}

/* ── Section Headers ───────────────────────────────────────────── */
.usa-section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.usa-section-title{font-family:var(--font);font-size:22px;font-weight:800;color:var(--ink)}

/* ── Report Cards ──────────────────────────────────────────────── */
.usa-card-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.usa-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border-color .15s;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.usa-card:hover{border-color:var(--primary);text-decoration:none}
.usa-card__header{padding:16px 16px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.usa-card__body{padding:12px 16px 16px;flex:1}
.usa-card__body h3{font-family:var(--font);font-size:16px;font-weight:700;color:var(--primary-dark);margin-bottom:6px;line-height:1.3}
.usa-card__body p{font-size:13px;color:var(--text-soft);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.usa-card__footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-dim)}

/* ── Badges ────────────────────────────────────────────────────── */
.usa-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-family:var(--font);border-radius:4px}
.usa-badge--violation{background:var(--accent-red-dim);color:var(--accent-red)}
.usa-badge--review{background:rgba(0,94,162,.08);color:var(--primary)}
.usa-badge--noncompliant{background:rgba(84,39,143,.06);color:#54278f}
.usa-badge--compliant{background:var(--success-dim);color:var(--success)}
.usa-badge--tag{font-size:10px;font-weight:700;color:var(--base-darker);background:var(--surface2);padding:2px 8px}

/* ── Sidebar ───────────────────────────────────────────────────── */
.usa-sidebar{position:sticky;top:80px;align-self:start}
.usa-sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.usa-sidebar-card h3{font-family:var(--font);font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.usa-sidebar-card .activity-item{padding:8px 0;border-bottom:1px solid var(--border2);font-size:12px;color:var(--text-soft);line-height:1.4}
.usa-sidebar-card .activity-item:last-child{border-bottom:none}
.usa-sidebar-card .activity-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.usa-sidebar-card .activity-type.comment{color:var(--primary)}
.usa-sidebar-card .activity-type.view{color:var(--success)}
.usa-sidebar-card .activity-type.report{color:var(--accent-red)}
.usa-sidebar-card .activity-time{font-size:10px;color:var(--text-dim);margin-top:2px}
.activity-loading{text-align:center;padding:16px;color:var(--text-dim);font-size:12px}

/* ── CTA ───────────────────────────────────────────────────────── */
.usa-cta{background:var(--primary-lightest);border:1px solid var(--primary-lighter);border-radius:6px;padding:40px;text-align:center;margin:40px 0}
.usa-cta h2{font-family:var(--font);font-size:24px;font-weight:800;color:var(--ink);margin-bottom:8px}
.usa-cta p{color:var(--text-soft);max-width:560px;margin:0 auto 20px;font-size:15px}

/* ── Steps / How It Works ──────────────────────────────────────── */
.usa-process-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px}
.usa-process-step{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:20px;text-align:left;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.usa-process-step__number{width:32px;height:32px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:10px;font-family:var(--font);border-radius:4px}
.usa-process-step h4{font-family:var(--font);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.usa-process-step p{font-size:13px;color:var(--text-soft);line-height:1.5}

/* ── Info Cards / Content Sections ─────────────────────────────── */
.usa-section{padding:48px 0}
.usa-content-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:24px;margin:20px 0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.usa-content-card h2{font-family:var(--font);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--primary)}
.usa-content-card p{font-size:14px;color:var(--text-soft);margin-bottom:10px;line-height:1.6}
.usa-content-card ul{margin:8px 0 12px 20px;font-size:14px;color:var(--text-soft)}
.usa-content-card li{margin-bottom:6px;line-height:1.5}

/* ── Info Grid (key-value pairs) ───────────────────────────────── */
.usa-info-grid{display:grid;grid-template-columns:180px 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;margin:20px 0;overflow:hidden}
.usa-info-grid dt,.usa-info-grid dd{background:var(--surface);padding:10px 14px;font-size:13px}
.usa-info-grid dt{font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;font-size:11px;background:var(--surface2)}
.usa-info-grid dd{color:var(--ink)}

/* ── FAQ / Accordion ───────────────────────────────────────────── */
.usa-accordion{max-width:800px;margin:0 auto}
.usa-accordion details{background:var(--surface);border:1px solid var(--border);border-radius:6px;margin-bottom:4px;overflow:hidden}
.usa-accordion summary{font-family:var(--font);font-weight:700;color:var(--primary-dark);cursor:pointer;font-size:15px;padding:14px 16px;list-style:none}
.usa-accordion summary::-webkit-details-marker{display:none}
.usa-accordion summary::before{content:'▸';margin-right:8px;color:var(--primary);font-size:14px;display:inline-block;transition:transform .2s}
.usa-accordion details[open] summary::before{transform:rotate(90deg)}
.usa-accordion details p{padding:0 16px 14px;font-size:14px;color:var(--text-soft);line-height:1.6}

/* ── Forms ──────────────────────────────────────────────────────── */
.usa-form label{display:block;font-size:11px;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;margin-top:16px}
.usa-form label:first-of-type{margin-top:0}
.usa-form input[type="text"],.usa-form input[type="email"],.usa-form input[type="url"],.usa-form textarea,.usa-form select{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);color:var(--ink);font-size:14px;font-family:var(--font);outline:none;transition:border-color .15s;border-radius:4px}
.usa-form input:focus,.usa-form textarea:focus,.usa-form select:focus{border-color:var(--primary)}
.usa-form input::placeholder,.usa-form textarea::placeholder{color:var(--text-dim)}
.usa-form select{-webkit-appearance:none;appearance:none;cursor:pointer}
.usa-form textarea{min-height:120px;resize:vertical}
.usa-form .usa-hint{font-size:13px;color:var(--text-dim);margin-top:4px}
.usa-form .usa-file-upload{border:2px dashed var(--border);border-radius:6px;padding:24px;text-align:center;cursor:pointer;transition:border-color .15s;margin-top:8px}
.usa-form .usa-file-upload:hover{border-color:var(--primary)}
.usa-form .usa-file-upload input{display:none}
.usa-form .usa-checkbox{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:14px;color:var(--text-soft);line-height:1.5}
.usa-form .usa-checkbox input{margin-top:3px;accent-color:var(--primary);width:18px;height:18px}

/* ── Status Messages ───────────────────────────────────────────── */
.usa-alert{padding:12px 16px;margin:16px 0;font-size:14px;border-left:4px solid;border-radius:4px}
.usa-alert--success{background:var(--success-dim);border-color:var(--success);color:#0a6c2e}
.usa-alert--error{background:var(--accent-red-dim);border-color:var(--accent-red);color:var(--accent-red)}
.usa-alert--info{background:var(--primary-lightest);border-color:var(--primary);color:var(--primary-dark)}

/* ── Comments ──────────────────────────────────────────────────── */
.usa-comment{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:16px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.usa-comment.reply{margin-left:32px;border-left:4px solid var(--primary-lighter);background:var(--surface2)}
.usa-comment__author{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.usa-comment__author .name{font-weight:700;color:var(--primary-dark);font-size:14px}
.usa-comment__time{font-size:11px;color:var(--text-dim);margin-left:auto}
.usa-comment__body{font-size:14px;color:var(--text-soft);line-height:1.6;margin-bottom:8px}
.usa-comment__actions{display:flex;gap:12px;font-size:12px}
.usa-comment__actions button{background:none;border:1px solid var(--border);color:var(--text-soft);cursor:pointer;font-family:var(--font);font-size:12px;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;transition:border-color .15s;border-radius:4px}
.usa-comment__actions button:hover{border-color:var(--primary);color:var(--primary)}

/* ── Data Table ────────────────────────────────────────────────── */
.usa-table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
.usa-table th,.usa-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
.usa-table th{background:var(--surface2);font-weight:700;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.usa-table td{color:var(--text-soft)}
.usa-table tr:hover td{background:var(--primary-lightest)}

/* ── Skeleton Loading ──────────────────────────────────────────── */
.usa-skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);background-size:200% 100%;animation:usa-shimmer 1.5s infinite;height:180px;border:1px solid var(--border);border-radius:6px}
@keyframes usa-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Footer ────────────────────────────────────────────────────── */
.usa-footer{background:var(--primary-darker);padding:0;margin-top:48px;color:rgba(255,255,255,.7)}
.usa-footer__return-to-top{background:var(--primary-dark);text-align:center;padding:10px}
.usa-footer__return-to-top a{color:var(--primary-light);font-size:13px;font-weight:600;text-decoration:none}
.usa-footer__return-to-top a:hover{color:#fff}
.usa-footer__primary{padding:32px 24px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px}
.usa-footer__logo{display:flex;align-items:flex-start;gap:12px}
.usa-footer__logo-icon{font-size:20px}
.usa-footer__logo-text{font-family:var(--font);font-size:15px;font-weight:800;color:#fff;line-height:1.3;text-transform:uppercase;letter-spacing:.04em}
.usa-footer__logo-text span{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.5;text-transform:none;letter-spacing:0}
.usa-footer__nav h4{font-size:11px;font-weight:700;color:var(--primary-light);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.usa-footer__nav a{display:block;color:rgba(255,255,255,.55);font-size:13px;margin-bottom:6px;text-decoration:none;font-weight:400}
.usa-footer__nav a:hover{color:#fff}
.usa-footer__nav a:visited{color:rgba(255,255,255,.55)}
.usa-footer__secondary{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:16px 24px;font-size:11px;color:rgba(255,255,255,.35)}

/* ── Auth Card (Login) ─────────────────────────────────────────── */
.usa-auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.usa-auth-card__header{background:var(--primary-dark);padding:28px 24px;text-align:center}
.usa-auth-card__header .title{font-family:var(--font);font-size:18px;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase}
.usa-auth-card__header .subtitle{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.usa-auth-card__body{padding:24px}
.usa-auth-card__footer{padding:14px 24px;border-top:1px solid var(--border);text-align:center;font-size:11px;color:var(--text-dim);line-height:1.6}
.usa-auth-card__footer a{color:var(--primary);text-decoration:none;font-weight:600}

/* ── Divider ───────────────────────────────────────────────────── */
.usa-divider{width:48px;height:3px;background:var(--primary);margin-bottom:16px;border-radius:2px}

/* ── Flag icon ─────────────────────────────────────────────────── */
.flag-icon{display:inline-flex;align-items:center;gap:4px;color:var(--accent-red);font-weight:600;font-size:12px}
.card-views{display:inline-flex;align-items:center;gap:4px;color:var(--text-dim);font-size:11px}

/* ── No Results ────────────────────────────────────────────────── */
.usa-no-results{text-align:center;padding:48px 20px;color:var(--text-soft);font-size:15px}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:920px){
  .usa-layout{grid-template-columns:1fr}
  .usa-sidebar{position:static}
  .usa-hero{padding:32px 0 28px}
  .usa-card-group{grid-template-columns:1fr}
  .usa-cta{padding:28px 20px}
  .usa-footer__primary{grid-template-columns:1fr 1fr;gap:24px}
  .usa-nav__links{gap:2px}
  .usa-nav__links a{font-size:12px;padding:6px 8px}
  .usa-info-grid{grid-template-columns:1fr}
  .usa-info-grid dt{border-bottom:none;padding-bottom:2px}
  .usa-info-grid dd{padding-top:2px;padding-bottom:10px}
}
@media(max-width:600px){
  .usa-footer__primary{grid-template-columns:1fr}
  .usa-nav__brand{gap:8px;font-size:14px}
  .page-header h1{font-size:24px}
}