/* ===================================================================
   Category listing page.

   Loaded alongside toolspage.css, which supplies the hero, filter field,
   card and grid - a category page is the all-tools directory filtered to
   one category, so it should not look like a different product. This
   file only adds what is specific to it: the hero glyph, the stored
   copy block, the ad slot and the onward category nav.
   =================================================================== */

/* ---- hero glyph ----------------------------------------------------- */
.cat-hero-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto clamp(.85rem, 2.5vw, 1.15rem);
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border-radius: var(--h-r-md);
}

.cat-hero-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

/* The single group on this page needs no heading rule above it. */
.catpage .cat-single {
    margin-top: 0;
}

/* -------------------------------------------------------------------
   STORED CATEGORY COPY

   Admin-authored HTML from ToolsCategory.PageContent. It arrives with
   its own Bootstrap wrappers (several start with
   <div class="container py-5">), so the rules below neutralise that
   nesting and then impose this page's typography on whatever is inside.
   Styling by element rather than by class is deliberate - the markup is
   written by hand and its classes cannot be relied on.
   ------------------------------------------------------------------- */
.cat-prose {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--h-line-soft);
    color: var(--h-ink-2);
    font-size: 1rem;
    line-height: 1.7;
}

/* Undo the nested Bootstrap container so the copy lines up with the
   grid above it instead of gaining a second gutter and 3rem of padding. */
.cat-prose .container,
.cat-prose .container-fluid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.cat-prose .py-5,
.cat-prose .py-4,
.cat-prose .my-5 {
    padding-block: 0 !important;
    margin-block: 0 !important;
}

.cat-prose > *:first-child,
.cat-prose .container > *:first-child {
    margin-top: 0;
}

.cat-prose h2 {
    margin: 2rem 0 .75rem;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--h-ink);
}

.cat-prose h3 {
    margin: 1.5rem 0 .5rem;
    font-size: 1.0625rem;
    line-height: 1.35;
    font-weight: 650;
    color: var(--h-ink);
}

.cat-prose h4,
.cat-prose h5,
.cat-prose h6 {
    margin: 1.25rem 0 .5rem;
    font-size: 1rem;
    font-weight: 650;
    color: var(--h-ink);
}

.cat-prose p {
    margin: 0 0 1rem;
    max-width: 78ch;
}

.cat-prose ul,
.cat-prose ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
    max-width: 78ch;
}

.cat-prose li {
    margin-bottom: .4rem;
}

.cat-prose a {
    color: var(--h-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cat-prose a:hover {
    color: var(--h-accent-strong);
}

.cat-prose strong,
.cat-prose b {
    color: var(--h-ink);
    font-weight: 650;
}

/* Stored copy sometimes carries inline colours from the editor that were
   picked against a white page. Images and tables also need to be told to
   stay inside the column on a phone. */
.cat-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--h-r-sm);
}

.cat-prose table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: .9375rem;
}

.cat-prose th,
.cat-prose td {
    padding: .55rem .7rem;
    border: 1px solid var(--h-line);
    text-align: left;
}

.cat-prose th {
    background: var(--h-canvas);
    color: var(--h-ink);
    font-weight: 650;
}

/* A wide table scrolls in its own box rather than widening the page. */
.cat-prose .table-responsive,
.cat-prose table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.cat-prose blockquote {
    margin: 0 0 1rem;
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--h-accent-soft);
    color: var(--h-muted);
}

.cat-prose pre,
.cat-prose code {
    font-size: .875rem;
    background: var(--h-canvas);
    border-radius: 6px;
}

.cat-prose code {
    padding: .1rem .3rem;
}

.cat-prose pre {
    padding: .85rem 1rem;
    overflow-x: auto;
}

/* ---- ad slot -------------------------------------------------------- */
.cat-ad {
    /* Reserve the space so the ad arriving does not push the section below
       it down the page - the layout shift Lighthouse charges for. */
    min-height: 280px;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
}

/* -------------------------------------------------------------------
   ONWARD CATEGORY NAV
   ------------------------------------------------------------------- */
.cat-others {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--h-line-soft);
}

.cat-others-h {
    margin: 0 0 1.15rem;
    font-size: clamp(1.125rem, 2.8vw, 1.375rem);
    line-height: 1.25;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--h-ink);
}

.cat-others-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-other {
    display: flex;
    align-items: center;
    gap: .65rem;
    height: 100%;
    min-height: 44px;
    padding: .6rem .8rem;
    text-decoration: none;
    color: var(--h-ink);
    background: var(--h-canvas);
    border: 1px solid var(--h-line-soft);
    border-radius: var(--h-r-md);
    transition: border-color .16s ease, background .16s ease;
}

.cat-other:hover {
    background: var(--h-paper);
    border-color: var(--h-accent);
    text-decoration: none;
    color: var(--h-ink);
}

.cat-other-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border-radius: 8px;
}

.cat-other-icon svg {
    width: 17px;
    height: 17px;
    display: block;
}

.cat-other-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-other-count {
    flex: 0 0 auto;
    padding: .1rem .45rem;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--h-muted);
    background: var(--h-paper);
    border: 1px solid var(--h-line-soft);
    border-radius: var(--h-r-pill);
}

.cat-all-link {
    display: inline-block;
    margin-top: 1.15rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--h-accent);
    text-decoration: none;
}

.cat-all-link:hover {
    color: var(--h-accent-strong);
    text-decoration: none;
}

/* ---- breakpoints ---------------------------------------------------- */
@media (min-width: 480px) {
    .cat-others-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .cat-others-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .cat-others-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================================
   Device Testing feature block
   ============================================================

   Only rendered on /device-testing-tool, where the unified
   Device Health Check leads and the twenty individual tools
   follow underneath.

   Uses the same A-to-Z tokens as the rest of the site with the
   same fallbacks, so it needs no new palette and inherits the
   theme cleanly.
   ============================================================ */

.cat-feature {
    background: linear-gradient(135deg,
        var(--az-a-1, #5b8def) 0%,
        var(--az-a-2, #7b5bf0) 55%,
        var(--az-mid, #c05ad9) 100%);
    border-radius: var(--az-r-lg, 18px);
    color: #fff;
    padding: clamp(20px, 4vw, 34px);
    margin: 0 0 22px;
    box-shadow: var(--az-shadow, 0 4px 16px rgba(16, 22, 43, .06));
}

.cat-feature-eyebrow {
    margin: 0 0 6px;
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .9;
}

.cat-feature h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(1.3rem, 3.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.cat-feature-lede {
    margin: 0 0 18px;
    max-width: 62ch;
    color: rgba(255, 255, 255, .94);
    font-size: clamp(.94rem, 2.2vw, 1.02rem);
}

.cat-feature-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.cat-feature-btn {
    display: inline-flex;
    align-items: center;
    /* The Z end of the journey against the blue-purple A field. */
    background: linear-gradient(135deg, var(--az-z-1, #f0655f), var(--az-z-2, #f89a4d));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 999px;
    padding: 12px 24px;
    min-height: 44px;
}

.cat-feature-btn:hover { color: #fff; filter: brightness(1.05); }

.cat-feature-link {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: 10px 16px;
    min-height: 44px;
}

.cat-feature-link:hover { color: #fff; background: rgba(255, 255, 255, .16); }

/* Visible focus on a coloured field needs its own treatment -
   the site's default focus ring disappears against this. */
.cat-feature-btn:focus-visible,
.cat-feature-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.cat-feature-or {
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--az-ink, #10162b);
}