/*
 * The two API pages (/pdf-generator-api, /image-generation-api): hero additions, the specs table, the
 * code tabs, check lists, callouts, the AI agents card and the FAQ. Markup in
 * templates/product/_api_blocks.ftl. DESIGN.md: coral #ff7171 is the accent (buttons, the selected tab
 * as a border), coral ink #c2413f carries link text, purple #7f0052 stays on headings, icons are white
 * on the coral gradient square.
 */

.apx-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---- Hero ------------------------------------------------------------------------------------ */
/* welcome.css makes every <section> a flex column; the hero relies on it like the other product pages. */
.apx-hero__lead {
    max-width: 860px;
    margin: 0 auto;
}
.apx-hero .hero_actions {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 16px;
}
.apx-hero .btn_hero .apx-icon,
.apx-mid-cta .apx-icon {
    margin-left: 12px;
    margin-right: 0;
    width: 24px;
    height: 24px;
}
.apx-hero__secondary {
    font-size: 18px;
    gap: 8px;
}
.apx-hero__secondary .apx-icon {
    margin: 0;
}
.apx-hero__micro {
    margin: 8px 0 24px;
    text-align: center;
    font-size: 15px;
    color: #515050;
}
.apx-hero__actions .apx-link {
    margin-top: 4px;
}

/* ---- Generic section pieces ------------------------------------------------------------------ */
/* The two-column feature blocks: an h2 that looks like the old h3 (api.css), left-aligned on wide screens. */
.container .apx-feature-title {
    margin: 0 0 16px;
    font-size: 32px;
    line-height: 1.3;
    text-align: left;
    color: #7f0052;
}
.apx-section {
    padding: 8px 0;
}
.apx-section--tint {
    background: #f9f4f2;
}
.apx-head {
    max-width: 860px;
    margin: 0 auto 32px;
    text-align: center;
}
.apx-head h2 {
    margin: 0 0 12px;
}
.apx-head__lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: #515050;
}
.apx-link,
.apx-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c2413f;
    font-weight: 500;
    text-decoration: none;
}
.apx-link:hover {
    text-decoration: underline;
}
.apx-link:focus-visible,
.apx-code__tab:focus-visible,
.apx-code__copy:focus-visible,
.apx-faq__item summary:focus-visible {
    outline: 3px solid rgba(255, 113, 113, .55);
    outline-offset: 3px;
}
.apx-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 32px;
    margin-top: 32px;
}
.apx-mid-cta {
    max-width: 100%;
}

/* api.css colours the advantage lines purple; DESIGN.md keeps purple for headings. */
.learn_text {
    color: #383838;
}

/* ---- Check list ------------------------------------------------------------------------------ */
.apx-checks {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.apx-checks li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 17px;
    line-height: 1.55;
    color: #383838;
}
.apx-checks__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, #ff9f8f, #ff7171);
    color: #fff;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---- Specs table ----------------------------------------------------------------------------- */
.apx-specs {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e6e1e4;
    border-radius: 12px;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.55;
    box-shadow: 0 0.3em 1.2em rgba(160, 160, 160, .2);
}
.apx-specs th,
.apx-specs td {
    padding: 16px 20px;
    border-bottom: 1px solid #efeaed;
    text-align: left;
    vertical-align: top;
}
.apx-specs tr:last-child th,
.apx-specs tr:last-child td {
    border-bottom: 0;
}
.apx-specs th {
    width: 30%;
    font-weight: 600;
    color: #300224;
    background: #fdf9f8;
}
.apx-specs td {
    color: #383838;
}
.apx-specs code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .9em;
    background: #f3eef0;
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* ---- Code tabs ------------------------------------------------------------------------------- */
.apx-code {
    max-width: 980px;
    margin: 0 auto;
}
.apx-code__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.apx-code__tabs[hidden] {
    display: none;
}
.apx-code__tab {
    font-family: Rubik, Open-Sans, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #383838;
    background: #fff;
    border: 2px solid #e6e1e4;
    border-radius: 8px;
    padding: 8px 18px;
    cursor: pointer;
}
.apx-code__tab[aria-selected="true"] {
    border-color: #ff7171;
    box-shadow: 0 0.4em 1.4em rgba(255, 113, 113, .25);
}
.apx-code__panel {
    background: #1e222a;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.apx-code__panel[hidden] {
    display: none;
}
.apx-code__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 0 18px;
    min-height: 36px;
}
.apx-code__lang {
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #a9b1c0;
}
.apx-code__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Rubik, Open-Sans, sans-serif;
    font-size: 13px;
    color: #e6e9ef;
    background: transparent;
    border: 1px solid #4a5160;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}
.apx-code__copy[hidden] {
    display: none;
}
/* Snippets are copied verbatim, so they scroll sideways rather than wrap. */
.apx-code__pre {
    margin: 0;
    padding: 12px 18px 18px;
    overflow-x: auto;
}
.apx-code__pre code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    line-height: 1.6;
    color: #e6e9ef;
    white-space: pre;
}
.apx-code__note {
    max-width: 980px;
    margin: 4px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: #515050;
}

/* ---- Callout (comparison guide, HTML to image) ----------------------------------------------- */
.apx-callout {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e1e4;
    border-radius: 12px;
    padding: 28px 32px;
}
.apx-callout h2,
.apx-callout h3 {
    margin: 0 0 8px;
    text-align: left;
    font-size: 24px;
}
.apx-callout p {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.6;
    color: #383838;
}
.apx-callout__icon,
.apx-agents__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff9f8f, #ff7171);
    color: #fff;
    flex-shrink: 0;
}
.apx-callout__icon .apx-icon,
.apx-agents__icon .apx-icon {
    width: 28px;
    height: 28px;
}

/* ---- AI agents ------------------------------------------------------------------------------- */
.apx-agents {
    max-width: 980px;
    margin: 0 auto;
}
.apx-agents__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.apx-agents__card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 0.3em 1.2em rgba(160, 160, 160, .35);
}
.apx-agents__card h3 {
    margin: 16px 0 8px;
    font-size: 19px;
}
.apx-agents__card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #383838;
    overflow-wrap: anywhere;
}
.apx-agents__links {
    margin-top: 28px;
    text-align: center;
}
.apx-agents__links h3 {
    margin: 0 0 12px;
    font-size: 19px;
}
.apx-agents__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
}

/* ---- Compare links (to /data/compare) -------------------------------------------------------- */
.apx-compare {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}
.apx-head + .apx-compare {
    justify-content: center;
}
.apx-callout .apx-compare__lead {
    margin: 18px 0 0;
}

/* ---- FAQ ------------------------------------------------------------------------------------- */
.apx-faq {
    max-width: 880px;
}
.apx-faq h2 {
    margin-bottom: 24px;
}
.apx-faq__item {
    border-bottom: 1px solid #eadbd6;
}
.apx-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    list-style: none;
    font-size: 19px;
    font-weight: 500;
    color: #300224;
    cursor: pointer;
}
.apx-faq__item summary::-webkit-details-marker {
    display: none;
}
.apx-faq__item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1;
    color: #c2413f;
    transition: transform .2s ease;
}
.apx-faq__item[open] summary::after {
    transform: rotate(45deg);
}
.apx-faq__answer p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.65;
    color: #515050;
}

/* ---- Make (HTTP module) tile in the no-code strip -------------------------------------------- */
.apx-make-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .apx-faq__item summary::after {
        transition: none;
    }
}

/* ---- Phones ---------------------------------------------------------------------------------- */
@media (max-width: 767.99px) {
    .container .apx-feature-title {
        font-size: 26px;
        text-align: center;
    }
    .apx-hero__micro {
        margin: 12px 0 8px;
    }
    .apx-hero__actions {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .apx-head__lead {
        font-size: 17px;
    }
    .apx-specs,
    .apx-specs tbody,
    .apx-specs tr,
    .apx-specs th,
    .apx-specs td {
        display: block;
        width: auto;
    }
    .apx-specs th {
        padding: 14px 16px 4px;
        border-bottom: 0;
        background: transparent;
    }
    .apx-specs td {
        padding: 0 16px 14px;
    }
    .apx-specs code {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .apx-callout {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px;
    }
    .apx-agents__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .apx-faq__item summary {
        font-size: 17px;
    }
}