/* =============================================================================
   /css/landings.css
   Public landing pages (BA front-end chrome).
   Mobile-first. SEO-friendly semantic markup.
   NOT for portal pages -- portal landings use LACMS portal CSS.
   ============================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ldg-page {
    font: 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Helvetica,Arial,sans-serif;
    color: #1a2332;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ldg-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Header / nav */
.ldg-header {
    background: #0a3d62;
    color: #fff;
    padding: 12px 0;
    border-bottom: 3px solid #b8941c;
}
.ldg-header .ldg-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ldg-brand {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.3px;
}
.ldg-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.ldg-nav a {
    color: #d6e4f0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.ldg-nav a:hover { color: #fff; border-bottom-color: #b8941c; }

@media (max-width: 600px) {
    .ldg-header .ldg-container { flex-direction: column; align-items: flex-start; }
    .ldg-nav { width: 100%; justify-content: flex-start; gap: 12px; }
    .ldg-nav a { font-size: 13px; }
}

/* Breadcrumbs */
.ldg-breadcrumbs {
    background: #f6f8fb;
    padding: 10px 0;
    font-size: 13px;
    color: #6b7785;
    border-bottom: 1px solid #e1e7ee;
}
.ldg-breadcrumbs a { color: #0a3d62; text-decoration: none; }
.ldg-breadcrumbs a:hover { text-decoration: underline; }
.ldg-bc-sep { color: #a8b1ba; margin: 0 4px; }
.ldg-bc-current { color: #1a2332; font-weight: 600; }

/* Main content */
.ldg-main { padding: 32px 0 56px; min-height: 60vh; }

/* Headings */
h1.ldg-h1 {
    font-size: 32px;
    line-height: 1.25;
    color: #0a3d62;
    margin: 0 0 8px;
    font-weight: 700;
}
h2.ldg-h2 {
    font-size: 22px;
    color: #0a3d62;
    margin: 32px 0 12px;
    font-weight: 700;
    border-bottom: 2px solid #e1e7ee;
    padding-bottom: 6px;
}
h3.ldg-h3 {
    font-size: 17px;
    color: #1a2332;
    margin: 20px 0 8px;
    font-weight: 700;
}
.ldg-lede {
    font-size: 18px;
    color: #4a5564;
    line-height: 1.55;
    margin: 0 0 24px;
}

/* Hero */
.ldg-hero {
    background: linear-gradient(135deg, #0a3d62 0%, #1c5d8a 100%);
    color: #fff;
    /* 2026-08-21: was 48px 0. Two lines of copy plus a button did not need
       ~170px of dark blue; the block read as mostly empty space. */
    padding: 30px 0 32px;
    margin: -32px 0 32px;
}
.ldg-hero h1 { color: #fff; font-size: 36px; margin: 0 0 10px; line-height: 1.15; }
.ldg-hero .ldg-lede {
    color: #d6e4f0;
    font-size: 19px;
    /* 2026-08-21: was max-width 760px inside an 1180px container, so a normal
       two-clause sentence broke early and left ~400px of empty blue to its
       right. 62em keeps a readable measure without stranding a third of the
       row - it only wraps once the line genuinely gets long. */
    max-width: 62em;
    margin-bottom: 16px;
}
.ldg-hero .ldg-cta {
    display: inline-block;
    background: #b8941c;
    color: #fff;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 8px;
}
.ldg-hero .ldg-cta:hover { background: #d1a727; }

/* Cards / sections */
.ldg-card {
    background: #fff;
    border: 1px solid #e1e7ee;
    border-radius: 6px;
    padding: 24px;
    margin: 16px 0;
}
.ldg-card-blue {
    background: #f1f7fc;
    border-color: #c5dcec;
}
.ldg-card-gold {
    background: #fdf8e8;
    border-color: #ebd882;
}

/* Stat grid */
.ldg-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.ldg-stat {
    background: #f6f8fb;
    border-left: 4px solid #0a3d62;
    padding: 16px 18px;
    border-radius: 4px;
}
.ldg-stat .num {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #0a3d62;
    line-height: 1.1;
}
.ldg-stat .lbl {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7785;
    margin-top: 4px;
}

/* Tables ===============================================================
   IMPORTANT: column-alignment fix per Zachery's req. table-layout: fixed
   keeps columns uniform regardless of cell content length; word-wrap +
   text-ellipsis handles overflow. Reports portal also pulls from this. */
table.ldg-table,
table.ldg-data {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 16px 0;
    font-size: 14px;
    background: #fff;
}
table.ldg-table th,
table.ldg-data th {
    background: #0a3d62;
    color: #fff;
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #b8941c;
}
table.ldg-table td,
table.ldg-data td {
    padding: 10px 12px;
    border-bottom: 1px solid #e1e7ee;
    color: #1a2332;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}
/* Alternating rows with consistent contrast - light mode safe */
table.ldg-table tbody tr:nth-child(odd) td,
table.ldg-data tbody tr:nth-child(odd) td  { background: #fafbfc; }
table.ldg-table tbody tr:nth-child(even) td,
table.ldg-data tbody tr:nth-child(even) td { background: #fff; }
table.ldg-table tbody tr:hover td,
table.ldg-data tbody tr:hover td { background: #eef4fa; }

/* Right-align numeric columns when marked */
table.ldg-table td.num,
table.ldg-data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Lists */
.ldg-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}
.ldg-list li {
    padding: 8px 0 8px 24px;
    position: relative;
    border-bottom: 1px solid #eef2f7;
}
.ldg-list li:before {
    content: "\2713";
    color: #b8941c;
    position: absolute;
    left: 4px;
    font-weight: 700;
}

/* Two-column layout */
.ldg-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 24px 0;
}
@media (max-width: 720px) {
    .ldg-cols-2 { grid-template-columns: 1fr; }
}
.ldg-cols-2-sidebar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    margin: 24px 0;
}
@media (max-width: 900px) {
    .ldg-cols-2-sidebar { grid-template-columns: 1fr; }
}

/* Sidebar */
.ldg-sidebar {
    background: #f6f8fb;
    border-radius: 6px;
    padding: 20px;
    border-top: 4px solid #b8941c;
}
.ldg-sidebar h3 {
    margin-top: 0;
    color: #0a3d62;
    font-size: 16px;
    border-bottom: 1px solid #d6dde4;
    padding-bottom: 8px;
}
.ldg-sidebar ul { list-style: none; padding: 0; margin: 0; }
.ldg-sidebar li { padding: 6px 0; }
.ldg-sidebar a { color: #0a3d62; text-decoration: none; font-size: 14px; }
.ldg-sidebar a:hover { text-decoration: underline; }

/* Buttons */
.ldg-btn {
    display: inline-block;
    background: #0a3d62;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.ldg-btn:hover { background: #0f4d7a; }
.ldg-btn-gold { background: #b8941c; }
.ldg-btn-gold:hover { background: #d1a727; }
.ldg-btn-outline { background: #fff; color: #0a3d62; border: 2px solid #0a3d62; padding: 8px 18px; }
.ldg-btn-outline:hover { background: #0a3d62; color: #fff; }

/* Pills / badges */
.ldg-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.ldg-pill-blue   { background: #d6e9f7; color: #0a3d62; }
.ldg-pill-gold   { background: #fdf3c8; color: #856404; }
.ldg-pill-green  { background: #d4edda; color: #155724; }
.ldg-pill-gray   { background: #e9ecef; color: #495057; }

/* Footer */
.ldg-footer {
    /* 2026-08-21: was #1a2332 (near-black) against a #0a3d62 header - the two
       did not read as one site. Footer now carries the same blue as the
       header, darkened slightly so the two bands are distinguishable, with
       the gold rule mirroring the header's bottom border. */
    background: #072e4a;
    color: #c5d0db;
    padding: 40px 0 20px;
    margin-top: 64px;
    border-top: 3px solid #b8941c;
}
.ldg-footer h4 {
    color: #fff;
    font-size: 14px;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ldg-footer ul { list-style: none; padding: 0; margin: 0; }
.ldg-footer li { padding: 4px 0; }
.ldg-footer a { color: #c5d0db; text-decoration: none; font-size: 14px; }
.ldg-footer a:hover { color: #b8941c; }
.ldg-footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}
.ldg-footer-bottom {
    border-top: 1px solid #1c4d70;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #8993a0;
}
.ldg-eho { font-size: 13px; }

/* Mobile tweaks */
@media (max-width: 600px) {
    .ldg-hero { padding: 32px 0; }
    .ldg-hero h1 { font-size: 26px; }
    .ldg-hero .ldg-lede { font-size: 16px; }
    h1.ldg-h1 { font-size: 26px; }
    h2.ldg-h2 { font-size: 19px; }
    .ldg-card { padding: 16px; }
    .ldg-main { padding: 20px 0 40px; }
}

/* Print */
@media print {
    .ldg-header, .ldg-footer, .ldg-nav, .ldg-breadcrumbs { display: none; }
    body { background: #fff; color: #000; }
    .ldg-main { padding: 0; }
}