/* =========================================================
   CredMen — site-wide accessibility & motion layer
   Loaded from the credmen-brand mu-plugin so it applies to
   every page template without editing each one.
========================================================= */

/* ---- Intrinsic sizing --------------------------------
   Every <img> now carries width/height attributes so the
   browser can reserve space (CLS). Those attributes also
   map to a presentational height, which distorts any image
   the layout scales by width alone — so height stays auto
   unless a template explicitly sets one (higher specificity).
------------------------------------------------------ */
img {
    height: auto;
}

/* ---- Skip link -------------------------------------- */
.credmen-skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100000;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    background: #062b55;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: top .2s ease;
}

.credmen-skip-link:focus {
    top: 0;
}

/* ---- Visible keyboard focus -------------------------
   The page templates ship no focus styling at all, so a
   keyboard user has no idea where they are. Pointer users
   are unaffected (:focus-visible, not :focus).
------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    /* !important because several page templates set `outline: none` on
       inputs and buttons at equal specificity; a keyboard user must still
       be able to see where they are. */
    outline: 3px solid #1680ff !important;
    outline-offset: 3px;
    border-radius: 3px;
}

/* Dark sections: keep the ring legible against navy. */
.credmen-header a:focus-visible,
footer a:focus-visible,
.credmen-service.dark a:focus-visible,
.cmcr-debt a:focus-visible {
    outline-color: #ffffff;
}

/* Targets reached via the skip link / in-page anchors are
   offset so a sticky header doesn't cover them. */
:target {
    scroll-margin-top: 100px;
}

#main-content:focus {
    outline: none;
}

/* ---- Reduced motion ---------------------------------
   Every template animates on scroll, on hover and on load.
   Honour the OS-level preference across all of them.
------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Reveal-on-scroll starts at opacity 0; if the observer is
       throttled by reduced motion the content must still show. */
    .credmen-reveal,
    .cmcr-reveal,
    .cmipo-reveal,
    .cmind-reveal,
    .cmmd-reveal,
    .cmct-hidden {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---- Touch targets ----------------------------------
   WCAG 2.5.8 asks for 24x24 CSS px minimum.
------------------------------------------------------ */
.credmen-mobile-toggle,
.cmcr-mobile,
.cmipo-mobile,
.cmind-mobile,
.cmmd-mobile,
.cmct-mobile {
    min-width: 44px;
    min-height: 44px;
}

/* The templates render nav and footer links as bare inline anchors, which
   measure 16-18 px tall — a cramped tap target on a phone. Vertical padding
   on an inline box grows the hit area without altering the line box, so the
   footer keeps its spacing while the target gets to a thumb-friendly size. */
/* Header nav links measure 23px tall - one pixel under the 24x24 minimum.
   They are flex items in a vertically centred bar, so a min-height grows the
   hit area and the row re-centres around it. */
nav a {
    min-height: 24px;
}

/* Footer links, breadcrumbs and inline calls to action render as bare
   anchors 15-20px tall. Vertical padding on an inline box grows the hit
   area without altering the line box, so this applies at every width and
   the layout is unchanged. */
footer a,
[class$="-breadcrumb"] a,
.cmlg-crumb a,
[class*="-service-link"],
.cmmd-read,
button.cmmd-read-toggle,
a[href^="tel:"],
a[href^="mailto:"] {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* A phone number or an email address on a contact page is the single most
   likely thing a visitor taps; give it a target with room to spare. */
a[href^="tel:"],
a[href^="mailto:"] {
    display: inline-block;
    min-height: 24px;
}

/* The mobile drawer stacks the nav links, so they get the same treatment. */
@media (max-width: 900px), (pointer: coarse) {

    nav a {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* ---- Print ------------------------------------------ */
@media print {

    header,
    footer,
    .credmen-mobile-toggle,
    .cmcr-mobile,
    .cmipo-mobile,
    .cmind-mobile,
    .cmmd-mobile,
    .cmct-mobile {
        display: none !important;
    }

    body {
        background: #fff;
    }
}