/*
 * Oxford Health NHS Foundation Trust — Service directory styles
 *
 * All classes are prefixed .ohft- to avoid collision with the main theme,
 * the NHS design system, or any plugin styles.
 *
 * Typography: inherits Frutiger declared at :root in the Oxford Health theme.
 * Do not redeclare font-family here.
 *
 * Relationship to the NHS design system:
 * The following components are handled entirely by NHS design system classes
 * and require no custom CSS here:
 *   - Search input       (nhsuk-search-input)
 *   - Breadcrumbs        (nhsuk-breadcrumb)
 *   - Cards              (nhsuk-card, nhsuk-card--primary, nhsuk-card--clickable)
 *   - A to Z navigation  (nhsuk-nav-a-z, nhsuk-card--feature, nhsuk-list--border)
 *   - Grid layout        (nhsuk-grid-row, nhsuk-grid-column-*)
 *
 * This file provides only what the NHS design system does not cover:
 *   1.  Custom properties (reduced token set)
 *   2.  Browse tabs (taxonomy selector — custom segmented control)
 *   3.  Locality filter (within taxonomy listing pages)
 *   4.  Service cards (taxonomy listing and search results)
 *   5.  Tags (condition, locality, age group, also-known-as)
 *   6.  Service detail page
 *   7.  No-results state
 *   8.  Utility classes
 *   9.  Responsive overrides
 */


/* =============================================================================
   1. Custom properties
   ============================================================================= */

/*
 * Scoped to .ohft-directory so tokens do not leak into the host theme.
 * Only tokens needed by the remaining custom components are declared.
 * NHS design system colour values are used directly where needed, consistent
 * with the host theme.
 */
.ohft-directory {

    /* Brand colours — consistent with NHS design system */
    --ohft-blue:          #003087;   /* NHS Blue */
    --ohft-blue-mid:      #005EB8;   /* NHS Mid Blue — links */
    --ohft-blue-light:    #d5e4f3;   /* Tinted blue — condition tag backgrounds */
    --ohft-blue-dark:     #002060;   /* Hover state */

    /* Neutrals */
    --ohft-white:         #ffffff;
    --ohft-grey-100:      #f4f4f4;   /* Hover backgrounds */
    --ohft-grey-200:      #d8dde0;   /* Borders — matches nhsuk border colour */
    --ohft-grey-600:      #6b6b6b;   /* Secondary text */
    --ohft-grey-900:      #212121;   /* Primary text */

    /* Spacing — 4px base unit */
    --ohft-space-1:       4px;
    --ohft-space-2:       8px;
    --ohft-space-3:       12px;
    --ohft-space-4:       16px;
    --ohft-space-5:       20px;
    --ohft-space-6:       24px;
    --ohft-space-8:       32px;

    /* Borders */
    --ohft-border:        1px solid var(--ohft-grey-200);

    /* Focus ring — NHS yellow focus style, WCAG 2.2 compliant */
    --ohft-focus-outline: 3px solid #ffdd00;
    --ohft-focus-shadow:  0 0 0 3px #212121;
}


/* =============================================================================
   2. Browse tabs
   ============================================================================= */

/*
 * Pill lozenge style, consistent with the .ohft-quick-link-button pattern
 * used elsewhere in the Oxford Health theme.
 *
 * Each selector is an <a> element linking to the current page with a ?browse=
 * query parameter. No JavaScript required. The active selector is identified
 * server-side and given aria-current="true".
 *
 * Inactive: NHS Blue pill, white text.
 * Active:   Darker blue, bold — visually distinct without a different shape.
 * Hover/focus: Yellow background, dark text — matches NHS focus convention
 *              and provides clear interactive feedback.
 *
 * NOTE: The original .ohft-quick-link-button uses outline:none with a
 * box-shadow substitute for focus. This version uses the proper NHS yellow
 * focus ring via outline so it is WCAG 2.2 compliant without relying on
 * box-shadow alone.
 */
.ohft-taxonomy-selectors {
    display: flex;
    flex-wrap: wrap;        /* Wraps gracefully on narrow viewports */
    gap: 0.75rem;           /* Matches ohft-quick-links__item margin-right */
    padding: 0;
    margin: 0 0 1.5rem;
    list-style: none;
}

.ohft-taxonomy-selector {
    display: inline-block;
    background-color: #005EB8;   /* NHS Mid Blue */
    color: #ffffff;
    text-decoration: none;
    padding: 0.6rem 1.4rem;
    border-radius: 9999px;       /* Full pill */
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    min-height: 44px;            /* WCAG 2.2 touch target */
    line-height: 1.9;            /* Vertically centres text at min-height */
    white-space: nowrap;
    cursor: pointer;
}

.ohft-taxonomy-selector:visited {
    color: #ffffff;
}

/* Active selector — slightly darker, bold weight, to distinguish from inactive */
.ohft-taxonomy-selector[aria-current="true"],
.ohft-taxonomy-selector.is-active {
    background-color: #003087;   /* NHS Blue — darker */
    font-weight: 700;
    color: #ffffff;
}

/* Hover and focus — yellow per NHS interaction convention */
.ohft-taxonomy-selector:hover,
.ohft-taxonomy-selector:focus {
    background-color: #ffeb3b;
    color: #212b32;
    text-decoration: none;
    box-shadow: 0 0 0 3px #212b32;
}

/* Focus-visible: use a proper outline rather than suppressing it.
   This satisfies WCAG 2.2 SC 2.4.11 (Focus Appearance) without
   relying solely on box-shadow, which some forced-colour modes ignore. */
.ohft-taxonomy-selector:focus-visible {
    outline: 3px solid #212b32;
    outline-offset: 2px;
    background-color: #ffeb3b;
    color: #212b32;
    box-shadow: 0 0 0 3px #ffeb3b;
}


/* =============================================================================
   3. Locality filter (taxonomy listing pages)
   ============================================================================= */

/*
 * Secondary filter control — visually subordinate to .ohft-taxonomy-selectors.
 * Used on condition, locality, and age group taxonomy pages to refine results
 * by area.
 *
 * Differentiated from the primary selectors by:
 *   - Pale grey background rather than NHS Blue
 *   - Dark text rather than white
 *   - Less padding — more compact
 *   - Small border-radius rather than full pill — less prominent shape
 *
 * Active state uses a mid-grey background with dark text to indicate selection
 * without competing with the primary selector active state.
 *
 * Desktop: rendered as inline links (.ohft-locality-filter-btn).
 * Mobile: hidden in favour of a <select> element (.ohft-locality-select-wrap).
 */
.ohft-locality-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 1.5rem;
    list-style: none;
}

.ohft-locality-filter-btn {
    display: inline-block;
    background-color: #f0f4f5;   /* Pale grey — NHS grey-2 equivalent */
    color: #212b32;               /* NHS dark grey — strong contrast */
    text-decoration: none;
    padding: 0.35rem 1rem;        /* More compact than primary selectors */
    border-radius: 4px;           /* Subtle rounding — less prominent than pill */
    border: 1px solid #d8dde0;   /* Soft border — matches NHS input border colour */
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    min-height: 36px;             /* Slightly shorter than primary 44px min-height */
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
}

.ohft-locality-filter-btn:visited {
    color: #212b32;
}

.ohft-locality-filter-btn:hover {
    background-color: #d8dde0;
    color: #212b32;
    text-decoration: none;
}

/* Active state — mid-grey background, dark text, bold weight */
.ohft-locality-filter-btn[aria-current="true"],
.ohft-locality-filter-btn.is-active {
    background-color: #425563;   /* NHS dark grey */
    color: #ffffff;
    border-color: #425563;
}

.ohft-locality-filter-btn[aria-current="true"]:hover,
.ohft-locality-filter-btn.is-active:hover {
    background-color: #2d3f4a;
    border-color: #2d3f4a;
    color: #ffffff;
}

.ohft-locality-filter-btn:focus-visible {
    outline: 3px solid #212b32;
    outline-offset: 2px;
    background-color: #ffeb3b;
    color: #212b32;
    box-shadow: 0 0 0 3px #ffeb3b;
}

/* Mobile select — hidden on desktop, revealed at 480px breakpoint */
.ohft-locality-select-wrap {
    display: none;
    margin-bottom: 24px;
}

.ohft-locality-select {
    width: 100%;
    min-height: 44px;
    padding: var(--ohft-space-2) var(--ohft-space-3);
    font-size: 16px;
    font-family: inherit;
    color: var(--ohft-grey-900);
    background-color: var(--ohft-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ohft-space-3) center;
    border: 2px solid var(--ohft-grey-900);   /* Matches nhsuk input border */
    padding-right: var(--ohft-space-8);
    appearance: none;
}

.ohft-locality-select:focus-visible {
    outline: var(--ohft-focus-outline);
    box-shadow: var(--ohft-focus-shadow);
    outline-offset: 0;
}


/* =============================================================================
   4. Service cards (taxonomy listing and search results)
   ============================================================================= */

/*
 * Service cards appear within taxonomy listing pages and search results.
 * Each card is an <a> wrapping the full card area, linking to the service
 * detail page. The NHS design system card component is not used here because
 * service cards carry taxonomy tags and an excerpt — a richer layout than
 * the standard card supports without significant overriding.
 */
.ohft-service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    border-top: var(--ohft-border);
}

.ohft-service-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ohft-space-6);
    padding: var(--ohft-space-5);
    border-bottom: var(--ohft-border);
    text-decoration: none;
    color: inherit;
    background: var(--ohft-white);
}

.ohft-service-card:hover {
    background: var(--ohft-grey-100);
}

.ohft-service-card:focus-visible {
    outline: var(--ohft-focus-outline);
    box-shadow: var(--ohft-focus-shadow);
    outline-offset: -3px;
    position: relative;
    z-index: 1;
}

.ohft-service-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--ohft-space-2);
    flex: 1;
}

.ohft-service-name {
    font-size: 19px;        /* nhsuk-body-l equivalent */
    font-weight: 700;
    color: var(--ohft-blue-mid);
    line-height: 1.3;
}

.ohft-service-desc {
    font-size: 16px;
    color: var(--ohft-grey-600);
    max-width: 56ch;
    line-height: 1.5;
}

/* Row of taxonomy tags beneath the service name */
.ohft-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ohft-space-2);
    align-items: center;
}

/* "View details" — right-aligned on desktop, hidden on mobile */
.ohft-service-card-action {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ohft-blue-mid);
    white-space: nowrap;
}


/* =============================================================================
   5. Tags
   ============================================================================= */

/*
 * Small inline labels used on service cards and the service detail page.
 *
 * Specificity note: the NHS design system defines .nhsuk-tag with
 * background-color, border, and color at the same specificity level as our
 * classes. To ensure our tag variants always win regardless of stylesheet
 * load order, rules are scoped under a parent selector.
 * Hard-coded values are used rather than var() because tags appear outside
 * the .ohft-directory wrapper on the single service page.
 *
 * Three variants:
 *   .ohft-tag-condition — blue tint; primary condition label
 *   .ohft-tag-neutral   — grey; locality and age group metadata
 *   .ohft-tag-aka       — outlined; "also known as" cross-reference
 */

.ohft-tag-row .ohft-tag,
.nhsuk-main-wrapper .ohft-tag {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 8px;
    margin-right: 2px;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 3px;
}

.ohft-tag-row .ohft-tag-condition,
.nhsuk-main-wrapper .ohft-tag-condition {
    background: #d5e4f3;   /* Light NHS blue tint */
    color: #003087;        /* NHS Blue */
    border: 1px solid #6b6b6b;
}

.ohft-tag-row .ohft-tag-neutral,
.nhsuk-main-wrapper .ohft-tag-neutral {
    background: #f4f4f4;
    color: #6b6b6b;
    border: 1px solid #e8e8e8;
}

.ohft-tag-row .ohft-tag-aka,
.nhsuk-main-wrapper .ohft-tag-aka {
    background: #ffffff;
    color: #212b32;
    border: 1px solid #e8e8e8;
    font-weight: 400;
    font-size: 16px;
}


/* =============================================================================
   6. Service detail page
   ============================================================================= */

/*
 * Structured contact metadata and the "Visit service page" button.
 * The detail page heading and description use standard nhsuk typography classes.
 * Only the custom structured fields and the CTA button need custom CSS here.
 */

/* Horizontal rule separating description from contact metadata */
.ohft-divider {
    border: none;
    border-top: var(--ohft-border);
    margin: 32px 0;
}

/* Contact metadata row — phone, location, referral */
.ohft-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ohft-space-8);
    margin-bottom: var(--ohft-space-8);
}

.ohft-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--ohft-space-1);
}

.ohft-meta-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ohft-grey-600);
}

.ohft-meta-value {
    font-size: 16px;
    color: var(--ohft-grey-900);
}

/* Editorial notice area — populated via the_content() on the page template */
.ohft-directory-notice {
    margin-top: var(--ohft-space-8);
    padding: var(--ohft-space-5);
    border-left: 4px solid var(--ohft-blue-mid);
    background: var(--ohft-grey-100);
}


/* =============================================================================
   7. No-results state
   ============================================================================= */

/*
 * Shown when a search or taxonomy filter returns no matches.
 */
.ohft-no-results {
    padding: var(--ohft-space-8) 0;
}


/* =============================================================================
   8. Utility classes
   ============================================================================= */

/*
 * Inactive letters in the A to Z navigation.
 * Overrides nhsuk-u-secondary-text-colour (#425563 in NHS Frontend v7)
 * which is too dark to clearly distinguish unpopulated letters from active
 * links. Scoped to #nhsuk-nav-a-z so it does not affect secondary text
 * colour elsewhere on the site.
 * #adb5bd passes WCAG 2.2 SC 1.4.3 contrast against white at this font size.
 */
#nhsuk-nav-a-z .nhsuk-u-secondary-text-colour {
    color: #adb5bd;
}

/*
 * .ohft-sr-only mirrors nhsuk-u-visually-hidden.
 * Included here in case that class is not available in all theme contexts.
 */
.ohft-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =============================================================================
   9. Responsive overrides
   ============================================================================= */

/*
 * 480px — mobile breakpoint:
 *   Browse tabs reflow to a 2×2 grid.
 *   Locality filter desktop buttons hidden; select shown.
 *   Service cards stack vertically; "View details" text hidden.
 *   Meta row stacks vertically on service detail page.
 */
@media (max-width: 480px) {

    /* Browse tabs — flex-wrap already handles reflow to multiple rows.
       No grid override needed for the pill lozenge layout. */

    /* Locality filter — swap desktop buttons for mobile select */
    .ohft-locality-filter {
        display: none;
    }

    .ohft-locality-select-wrap {
        display: block;
    }

    /* Service cards — stack body and hide the "View details" affordance */
    .ohft-service-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ohft-space-3);
    }

    .ohft-service-card-action {
        display: none;
    }

    /* Service detail meta — stack vertically */
    .ohft-meta-row {
        flex-direction: column;
        gap: var(--ohft-space-4);
    }

}

/* Respect reduced motion — remove card hover transitions if any are added */
@media (prefers-reduced-motion: reduce) {
    .ohft-service-card {
        transition: none;
    }
}