/*
 * AIE Solicitor Directory: public directory (/find-a-solicitor/,
 * views/public/firm-directory.php).
 *
 * AIG directory composition (design-reference/notes/aig-visual-language.md
 * 3.2, 3.4 B, 4.5, 4.7; docs/DESIGN_SYSTEM.md section 5): the intro in the
 * main column, the filters as AIG's plum side box in a 290px column on the
 * left, the results (count, filters in use, listing cards, pagination)
 * below the intro. One column at 860px and below, where the filters sit
 * behind a "Show filters" toggle before the results.
 *
 * Depends on tokens.css, ui.css (buttons, fields, chips, status pills, empty
 * state, the on-colour context) and firm-card.css (the listing card). The
 * root is the page-level .aie-ui.aie-ui--page, whose side padding centres the
 * content in AIG's 1320px wrap. Every rule is scoped under .aie-ui.
 *
 * Boxes start their text at the shared inset (--aie-inset, border included:
 * 24px, 18px at 600px and below), so the side box, the disclaimer, the
 * listing cards and the empty state line up when they share a column.
 */

/* ------------------------------------------------------------------ */
/* Layout (AIG .dir-layout)                                            */
/* ------------------------------------------------------------------ */

.aie-ui .aie-firm-directory__layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "side intro"
        "side results";
    align-items: start;
    column-gap: var(--aie-space-9);
    row-gap: 0;
    padding-top: var(--aie-space-8);
}

.aie-ui .aie-firm-directory__intro {
    grid-area: intro;
    min-width: 0;
    padding-bottom: var(--aie-space-7);
}

.aie-ui .aie-firm-directory__side {
    grid-area: side;
    min-width: 0;
}

.aie-ui .aie-firm-directory__main {
    grid-area: results;
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Intro: eyebrow (ui.css), title, lead, disclaimer as a quiet note    */
/* ------------------------------------------------------------------ */

.aie-ui .aie-firm-directory__intro h1 {
    max-width: 21em;
    margin: 0 0 var(--aie-space-4);
    text-wrap: balance;
}

/* "pretty" keeps a single word off the last line where supported. */
.aie-ui .aie-firm-directory__lead {
    max-width: 44rem;
    margin: 0 0 var(--aie-space-5);
    text-wrap: pretty;
}

/* AIG .note: pale, 1px line, 12px radius. */
.aie-ui .aie-firm-directory__disclaimer {
    max-width: 44rem;
    margin: 0;
    padding: var(--aie-space-4) calc(var(--aie-inset) - 1px);
    color: var(--aie-ink);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
    background: var(--aie-pale);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-field);
}

/* ------------------------------------------------------------------ */
/* Filters: the plum side box (AIG .side-box)                          */
/* ------------------------------------------------------------------ */

/* The aside also carries ui.css's .aie-on-colour: white text and the white
   keyboard focus ring for everything inside it (teal is 2.39:1 on plum, AIG
   flag F4). */
.aie-ui .aie-firm-directory__filters {
    margin: 0;
    padding: 22px var(--aie-inset) var(--aie-inset);
    color: var(--aie-white);
    background: var(--aie-plum);
    border-radius: var(--aie-radius-nav);
}

.aie-ui .aie-firm-directory__filters h2 {
    margin: 0 0 var(--aie-space-1);
    color: var(--aie-white);
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

.aie-ui .aie-firm-directory__field {
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-2);
    margin: 18px 0 0;
}

/* Group labels: small capitals in #F3D9E7 (AIG .side-box__area). The label
   text itself stays "Region" etc.; only CSS sets the capitals. Balanced like
   the shared box labels, so a long label never leaves one word alone. */
.aie-ui .aie-firm-directory__field > label,
.aie-ui .aie-firm-directory__choices > legend {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--aie-on-plum-label);
    font-family: var(--aie-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--aie-label-tracking);
    text-transform: uppercase;
    text-wrap: balance;
}

.aie-ui .aie-firm-directory__choices {
    margin: 22px 0 0;
    padding: 0;
    border: 0;
}

.aie-ui .aie-firm-directory__choices > legend {
    margin-bottom: var(--aie-space-1);
}

/* Each option is a 44px row; the row takes the side box's 14% white wash
   on hover (AIG side-box links). The checkbox keeps its native shape with a
   white accent, so the tick shows on plum. */
.aie-ui .aie-firm-directory__choice {
    display: flex;
    align-items: center;
    gap: var(--aie-space-3);
    min-height: 44px;
    margin: 0 calc(-1 * var(--aie-space-2));
    padding: 6px var(--aie-space-2);
    color: var(--aie-white);
    font-family: var(--aie-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: var(--aie-radius-small);
    cursor: pointer;
    transition: var(--aie-transition);
}

.aie-ui .aie-firm-directory__choice:hover {
    background: var(--aie-on-plum-wash);
}

.aie-ui .aie-firm-directory__choice:has(input:checked) {
    font-weight: 600;
}

.aie-ui .aie-firm-directory__choice input[type="checkbox"] {
    margin: 0;
    accent-color: var(--aie-white);
}

/* "Apply filters" (shown without JavaScript) is ui.css's white pill for
   coloured surfaces (.aie-button--on-colour, AIG .btn--solid). */
.aie-ui .aie-firm-directory__filter-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aie-space-3);
    margin: 22px 0 0;
}

.aie-ui .aie-firm-directory__auto-filter-note {
    margin: 0;
    color: var(--aie-on-plum-label);
    font-size: 0.92rem;
    line-height: 1.5;
}

.aie-ui .aie-firm-directory__clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 calc(-1 * var(--aie-space-2));
    padding: 0 var(--aie-space-2);
    color: var(--aie-white);
    font-family: var(--aie-font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: var(--aie-radius-small);
}

/* Like AIG's side-box links, the text stays white on the 14% wash. The
   selector matches ui.css's general on-colour link hover (0,4,1), which
   would tint the text, and wins because directory.css loads after ui.css
   (a declared dependency). */
.aie-ui .aie-firm-directory__filters a.aie-firm-directory__clear:hover {
    color: var(--aie-white);
    background: var(--aie-on-plum-wash);
}

/* A focused select keeps a plum edge inside the white ring that
   .aie-on-colour gives it. */
.aie-ui .aie-firm-directory__filters .aie-firm-directory__field select:focus {
    border-color: var(--aie-plum);
}

/* "Show filters" (phones only; firm-directory.js shows it). AIG .dir-toggle:
   a white pill with a plum edge. */
.aie-ui .aie-firm-directory__filter-toggle {
    display: none;
}

.aie-ui .aie-firm-directory__toggle-icon {
    display: block;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}

.aie-ui .aie-firm-directory__toggle-count {
    display: inline-flex;
    align-items: center;
}

/* ------------------------------------------------------------------ */
/* Results                                                             */
/* ------------------------------------------------------------------ */

.aie-ui .aie-firm-directory__summary {
    margin: 0 0 18px;
}

/* The result count is the results heading (AIG .dir-count look) and the
   place focus returns to after "Clear all filters", removing a filter or
   changing page. */
.aie-ui .aie-firm-directory__count {
    margin: 0;
    color: var(--aie-muted);
    font-family: var(--aie-font-body);
    font-size: var(--aie-text-size);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    border-radius: var(--aie-radius-small);
    scroll-margin-top: var(--aie-space-6);
}

.aie-ui .aie-firm-directory__count:focus-visible {
    outline-offset: 4px;
}

/* Filters in use: removable pills and "Clear all filters". */
.aie-ui .aie-firm-directory__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aie-space-2) var(--aie-space-3);
    margin: var(--aie-space-3) 0 0;
}

.aie-ui .aie-firm-directory__active-label {
    margin: 0;
    color: var(--aie-rose);
    font-family: var(--aie-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--aie-label-tracking);
    text-transform: uppercase;
}

.aie-ui .aie-firm-directory__active-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aie-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aie-ui .aie-firm-directory__active-list > li {
    margin: 0;
}

.aie-ui .aie-firm-directory__active-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--aie-space-2);
    min-height: 44px;
    padding: 0 14px 0 var(--aie-space-4);
    color: var(--aie-plum);
    font-family: var(--aie-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    background: var(--aie-white);
    border: 1px solid var(--aie-line-field);
    border-radius: var(--aie-radius-pill);
    transition: var(--aie-transition);
}

.aie-ui .aie-firm-directory__active-filter:hover {
    color: var(--aie-plum-deep);
    background: var(--aie-pale);
    border-color: var(--aie-rose);
}

.aie-ui .aie-firm-directory__remove-icon {
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* No side padding: on a line of its own the link starts on the same left
   edge as the label and the pills; the row's 12px gap separates it from
   the last pill otherwise. */
.aie-ui .aie-firm-directory__active-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Listing cards (AIG .orgs): two columns in the 922px main column at 1440. */
.aie-ui .aie-firm-directory__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 18px;
    margin: 0;
}

/* Empty result (AIG .legal-empty, ui.css .aie-empty-state). */
.aie-ui .aie-firm-directory__empty {
    max-width: 44rem;
}

.aie-ui .aie-firm-directory__empty h3 {
    margin: 0 0 var(--aie-space-2);
}

.aie-ui .aie-firm-directory__empty p {
    margin: 0 0 var(--aie-space-2);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.aie-ui .aie-firm-directory__empty p:last-child {
    margin-bottom: 0;
}

.aie-ui .aie-firm-directory__empty a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
}

/* Updating: the current results fade while the next set loads. */
.aie-ui .aie-firm-directory__results {
    transition: opacity var(--aie-duration) var(--aie-easing);
}

.aie-ui.aie-firm-directory--loading .aie-firm-directory__results {
    opacity: 0.55;
}

/* ------------------------------------------------------------------ */
/* Pagination: pills, the current page as the pressed pill             */
/* ------------------------------------------------------------------ */

.aie-ui .aie-firm-directory__pagination {
    margin: var(--aie-space-8) 0 0;
}

/* WordPress puts .page-numbers on the list and on every item, so the list
   reset names the <ul> only. */
.aie-ui .aie-firm-directory__pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aie-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aie-ui .aie-firm-directory__pagination ul.page-numbers > li {
    margin: 0;
}

/* The same pill family as "Filters in use": white with a 1px field-line
   edge (3.62:1 on white), a rose edge on pale when hovered, plum for the
   current page (aria-current="page"). */
.aie-ui .aie-firm-directory__pagination a.page-numbers,
.aie-ui .aie-firm-directory__pagination span.page-numbers.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aie-space-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    color: var(--aie-plum);
    font-family: var(--aie-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    background: var(--aie-white);
    border: 1px solid var(--aie-line-field);
    border-radius: var(--aie-radius-pill);
    transition: var(--aie-transition);
}

.aie-ui .aie-firm-directory__pagination a.page-numbers:hover {
    color: var(--aie-plum-deep);
    background: var(--aie-pale);
    border-color: var(--aie-rose);
}

.aie-ui .aie-firm-directory__pagination span.page-numbers.current {
    color: var(--aie-white);
    background: var(--aie-plum);
    border-color: var(--aie-plum);
}

.aie-ui .aie-firm-directory__pagination a.prev,
.aie-ui .aie-firm-directory__pagination a.next {
    padding: 0 var(--aie-space-5);
}

/* Drawn chevrons (no text glyphs): they never change the link names. */
.aie-ui .aie-firm-directory__pagination a.prev::before,
.aie-ui .aie-firm-directory__pagination a.next::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
}

.aie-ui .aie-firm-directory__pagination a.next::after {
    border-width: 2px 2px 0 0;
}

.aie-ui .aie-firm-directory__pagination span.page-numbers.dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 44px;
    color: var(--aie-muted);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* 860px and below: one column, filters behind a toggle                */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
    .aie-ui .aie-firm-directory__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "intro"
            "side"
            "results";
        row-gap: var(--aie-space-6);
        padding-top: var(--aie-space-5);
    }

    .aie-ui .aie-firm-directory__intro {
        padding-bottom: 0;
    }

    /* In one column every box spans it, like the side box and the cards, so
       the column has one right edge (the lead keeps its text width). */
    .aie-ui .aie-firm-directory__disclaimer,
    .aie-ui .aie-firm-directory__empty {
        max-width: none;
    }

    .aie-ui .aie-firm-directory__filter-toggle {
        display: inline-flex;
    }

    .aie-ui.aie-firm-directory--collapsible .aie-firm-directory__filters {
        margin-top: var(--aie-space-3);
    }

    .aie-ui.aie-firm-directory--collapsible .aie-firm-directory__filters:not(.is-open) {
        display: none;
    }
}

/* Phones: keep the count and the first listing on the first screen. The
   "Filters in use" label stays available to screen readers (it names the
   list) while the pills speak for themselves on screen. */
@media (max-width: 600px) {
    .aie-ui .aie-firm-directory__disclaimer {
        padding-top: var(--aie-space-3);
        padding-bottom: var(--aie-space-3);
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .aie-ui .aie-firm-directory__active-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .aie-ui .aie-firm-directory__results,
    .aie-ui .aie-firm-directory__choice,
    .aie-ui .aie-firm-directory__active-filter,
    .aie-ui .aie-firm-directory__pagination a.page-numbers {
        transition: none;
    }
}

@media print {
    .aie-ui .aie-firm-directory__side,
    .aie-ui .aie-firm-directory__active,
    .aie-ui .aie-firm-directory__pagination {
        display: none;
    }

    .aie-ui .aie-firm-directory__layout {
        display: block;
    }
}