/* Custom styles for the fapico2 book.
   mdBook 0.4's DOM has no per-page id or body class — page content lives
   in #content > main — so classes used on a single page (the landing)
   are unscoped. Only variables mdBook actually defines are used:
   --links, --quote-bg, --quote-border, --table-header-bg.

   NOTE: mdBook sets html { font-size: 62.5% }, so 1rem = 10px here.
   All rem values below are written against that scale (16px body = 1.6rem). */

/* Hero: the opening paragraphs of the landing page */
.hero {
    padding: 2rem 2.4rem;
    border-left: 3px solid var(--links);
    border-radius: 0 8px 8px 0;
    background: var(--quote-bg);
    margin: 0 0 1.6rem;
}

.hero p:first-child {
    font-size: 1.9rem;
    margin-bottom: 1.2rem;
}

.hero p:last-child {
    margin-bottom: 0;
}

/* "What it is for": answers the first-time visitor's pain point, so the
   lead and the cards carry the largest body text on the page — this
   section is the pitch, not a table. */
.pain-lead {
    font-size: 1.9rem;
    line-height: 1.55;
    margin: 1.6rem 0;
}

.pain-lead p:first-child {
    margin-bottom: 1rem;
}

.pain-lead p:last-child {
    margin-bottom: 0;
}

.pain-lead strong {
    font-size: 2.15rem;
}

/* Use-case grid on the landing page */
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
    margin: 1.6rem 0;
}

.usecase {
    border: 1px solid var(--table-header-bg);
    border-radius: 8px;
    background: var(--quote-bg);
    padding: 1.6rem 1.9rem 1.5rem;
}

.usecase .uc-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.usecase h3 {
    margin: 0.8rem 0 0.6rem;
    font-size: 1.75rem;
}

/* mdBook wraps heading text in an anchor; keep card titles page-colored */
.usecase h3 .header {
    color: inherit;
}

.usecase p {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.55;
}

/* Security callout */
.security-callout {
    border-left: 4px solid var(--quote-border);
    padding: 1.6rem 2.4rem;
    margin: 2.4rem 0;
    background-color: var(--quote-bg);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6rem 0;
}

th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--table-header-bg);
}

th {
    background-color: var(--table-header-bg);
    font-weight: 600;
}

tr:hover {
    background-color: var(--quote-bg);
}