/* Additions to the stock readthedocs theme. Loaded via `extra_css` in
   mkdocs.yml, after the theme's own stylesheets. */

/* --- "Last updated" stamp --------------------------------------------- */

.apex-updated {
    margin: 2rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid #e1e4e5;
    color: #6b7c85;
    font-size: 0.8rem;
    line-height: 1.5;
}

.apex-updated strong {
    color: #404040;
    font-weight: 600;
}

/* --- "Was this page helpful?" ------------------------------------------ */

.apex-feedback {
    margin: 1.25rem 0 0;
    font-size: 0.82rem;
}

.apex-feedback a,
.apex-feedback a:visited {
    color: #6b7c85;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.apex-feedback a:hover,
.apex-feedback a:focus {
    color: #2980b9;
}

@media print {
    .apex-feedback { display: none; }
}

/* --- Footer call to action -------------------------------------------- */

.apex-cta {
    margin: 2.5rem 0 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid #d7dde2;
    border-top: 3px solid #2980b9; /* the theme's link/accent blue */
    border-radius: 3px;
    background: #f7f9fa;
}

.apex-cta__lead {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: #343131;
    line-height: 1.4;
}

.apex-cta__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    align-items: center;
}

.apex-cta__links li {
    margin: 0;
    list-style: none;
}

/* Every colour rule below is paired with :visited. The theme sets
   `a:visited { color: #9b59b6 }` at specificity (0,1,1), which outranks a bare
   class at (0,1,0) — without the pairing, a visited CTA turns purple, and on
   the primary button that is purple text on a blue fill. */

.apex-cta__link,
.apex-cta__link:visited {
    display: inline-block;
    padding: 0.4rem 0.95rem;
    border: 1px solid #c3ccd3;
    border-radius: 3px;
    background: #fff;
    color: #2980b9;
    font-size: 0.9rem;
    line-height: 1.5;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}

.apex-cta__link:hover,
.apex-cta__link:focus {
    background: #eef4f8;
    border-color: #2980b9;
    color: #2980b9;
    text-decoration: none;
}

.apex-cta__link:focus-visible {
    outline: 2px solid #2980b9;
    outline-offset: 2px;
}

.apex-cta__link--primary,
.apex-cta__link--primary:visited {
    background: #2980b9;
    border-color: #2980b9;
    color: #fff;
}

.apex-cta__link--primary:hover,
.apex-cta__link--primary:focus {
    background: #21689a;
    border-color: #21689a;
    color: #fff;
}

@media (max-width: 480px) {
    .apex-cta__links {
        flex-direction: column;
        align-items: stretch;
    }

    .apex-cta__link {
        text-align: center;
    }
}

@media print {
    .apex-cta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apex-cta__link {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   SVG diagrams

   The pin maps and wiring drawings carry 12–13 px type inside their own
   coordinate system. The theme's `img { max-width: 100% !important }` would
   shrink one to phone width and take the labels with it, which is worse than
   not showing it at all.

   `min-width` beats `max-width` in the CSS cascade, so the diagram keeps a
   legible floor and the paragraph around it scrolls sideways instead. Only the
   paragraph scrolls — the page body never does.

   `:has()` is the whole mechanism: a markdown image has no wrapper element to
   target, so the containing paragraph has to be selected by its content. Where
   it is unsupported the rules are dropped and the diagram simply scales down
   as before, which is the current behaviour rather than a broken one.
   --------------------------------------------------------------------------- */
.rst-content p:has(> img[src$=".svg"]) {
    overflow-x: auto;
    /* Room for the scrollbar so it does not sit on the diagram's bottom edge. */
    padding-bottom: 0.25rem;
}

.rst-content p > img[src$=".svg"] {
    min-width: 520px;
}

@media print {
    /* Paper is wide enough; let it fit the page instead of clipping. */
    .rst-content p > img[src$=".svg"] {
        min-width: 0;
    }
}