/* Phase 1A: provider-page presentation.
   Scoped additions only - the existing default.min.css grid and breakpoints are
   untouched. Sizes chosen for the 64% of visitors who arrive on a phone. */


/* Primary actions: full-width and thumb-sized on phones, inline on wider screens. */
/*
 * Layout only. Colour, border, sizing and focus now come from .dc-btn in
 * shell.css — these buttons carry both classes. Leaving `background: #fff`
 * here beat `.dc-btn--primary` at equal specificity (provider.css loads
 * later) and rendered the Call button white-on-white.
 */
.provider-action {
    flex: 1 1 100%;
}

/*
 * Phase 1B: the colour and sizing of these buttons now comes from the shared
 * .dc-btn system in shell.css, which carries the same #content scoping needed
 * to outrank `div#left a`. Only the layout of the action row stays here.
 */


/*
 * Listing cards moved to shell.css in Phase 3C.
 *
 * There were two definitions of the same component, and this one won because
 * provider.css loads after shell.css - which is why the redesign's teal
 * buttons kept rendering maroon. The card, its actions and their colours are
 * now owned by the token layer, and this file keeps only what is genuinely
 * provider-page-specific.
 *
 * What remains is the focus ring, because it is scoped under #content for the
 * reason recorded below and shell.css's plain :focus-visible cannot outrank it.
 */
#content .listing-actions a:focus-visible {
    outline: 3px solid var(--dc-focus);
    outline-offset: 2px;
}

/* Coverage / empty-state messaging. */
.coverage-note {
    margin: 0 0 16px; padding: 12px 14px;
    border-left: 4px solid var(--dc-action); background: var(--dc-brand-tint);
    font-size: 1rem; line-height: 1.55;
}
.coverage-note p { margin: 0 0 8px; }
.coverage-note p:last-child { margin-bottom: 0; }
.state-links { list-style: none; padding: 0; margin: 8px 0 0; }
.state-links li { display: inline-block; margin: 0 10px 8px 0; }
.state-links a { display: inline-block; min-height: 44px; line-height: 44px; }

.city-index { columns: 2; column-gap: 24px; margin: 12px 0; padding: 0; list-style: none; }
.city-index li { break-inside: avoid; margin: 0 0 6px; }
.city-index a { display: inline-block; padding: 4px 0; }

@media (min-width: 680px) {
    .provider-action { flex: 0 1 auto; }
    .city-index { columns: 3; }
}
@media (min-width: 992px) {
    .city-index { columns: 4; }
}

.listing-index { list-style: none; padding: 0; margin: var(--dc-space-3) 0 var(--dc-space-6); }
.listing-index li { padding: var(--dc-space-3) 0; border-bottom: 1px solid var(--dc-line-soft);
    font-size: var(--dc-text-sm); line-height: var(--dc-leading); }
.listing-index a { display: inline-block; padding: 2px 0; font-weight: 700; }

/* Provider add/update forms (Phase 1A). */
.req { color: var(--dc-error); font-weight: 700; }
.form-intro { margin: var(--dc-space-1) 0 var(--dc-space-4); color: var(--dc-text-muted);
    max-width: var(--dc-measure); }
.form-note {
    margin: 0 0 var(--dc-space-5);
    padding: var(--dc-space-4) var(--dc-space-5);
    border-left: 4px solid var(--dc-brand);
    border-radius: 0 var(--dc-radius) var(--dc-radius) 0;
    background: var(--dc-surface-sunken);
    font-size: var(--dc-text-sm);
    line-height: var(--dc-leading);
    max-width: var(--dc-measure);
}

/*
 * Phase 1A mobile fixes for the legacy stylesheet.
 *
 * `default.min.css` sets `div#left h1 { width: 550px; float: left }`, which at a
 * real 375px viewport made every provider, city and state h1 overhang the screen
 * by 210px. This file loads after it, and matches the same specificity, so the
 * override lands without editing the minified legacy build.
 */
div#left h1 {
    width: auto;
    max-width: 100%;
    float: none;
    overflow-wrap: break-word;
}

/* Nothing in the content column may force the page wider than the screen. */
#left img,
#left iframe,
#left table {
    max-width: 100%;
}

/* A legacy `table.widget` on /infantcare overhung a 375px screen by 13px:
   max-width alone cannot shrink a cell below its longest unbreakable string,
   and provider details in production contain long URLs. */
#left table {
    width: 100%;
}

#left table td,
#left table th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The mobile menu toggle measured 43px tall - just under the 44px touch target
   minimum, and it is the only way to reach navigation on a phone. */
.mobile_toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
}

/* Coverage fallbacks: the legacy `ul { list-style: none }` left these links
   floating with uneven gaps. */
.coverage-note .state-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    list-style: none;
    margin: 8px 0 14px;
    padding: 0;
}

.coverage-note .state-links li { margin: 0; }

.coverage-note .state-links a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    font-weight: 700;
}

/*
 * The Phase 1A mobile source-order hack is gone: Phase 1B moved the markup, so
 * all 14 templates now emit #left before #right and stacking follows DOM order
 * without help. Assistive technology and the visual order finally agree.
 */

}

/* ---------------------------------------------------------------------------
   Inactive directory records (Phase 2A-R4)

   A listing whose Texas permit was revoked keeps its URL and stops being a
   provider page. The design brief was "visually distinct, not a tiny badge":
   somebody who lands here from an old bookmark should register that this is a
   historical record before they read a phone number, so the notice occupies
   the position the action buttons used to and carries the page's only strong
   colour. Everything below it is deliberately drained of emphasis.
   --------------------------------------------------------------------------- */

.provider-header--inactive h1 {
    color: var(--dc-ink-soft);
}

/*
 * Phase 3C: the historical notice now draws its colour from the status role
 * rather than five hand-picked ambers. The amber itself is kept - it is the
 * one place on the site that must not read as either "fine" or "danger" - but
 * it is now the same amber the .dc-status--historical badge uses, so a
 * historical record looks like one wherever it appears.
 */
.provider-inactive {
    border: 1px solid var(--dc-status-historical-line);
    border-left: 6px solid var(--dc-status-historical);
    background: var(--dc-status-historical-bg);
    border-radius: var(--dc-radius-lg);
    padding: var(--dc-space-5) var(--dc-space-4);
    margin: 0 0 var(--dc-space-5);
}

/*
 * Phase 3C: the eyebrow is now the .dc-status badge the design system defined
 * in 3B and never used anywhere. A pill reads as a state; uppercase letter-
 * spaced text reads as a section label, which is not what this is.
 */
.provider-inactive__eyebrow {
    margin: 0 0 var(--dc-space-3);
}

.provider-inactive__eyebrow .dc-status {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* The badge's own ground is the same amber as the notice it sits in, so on
       this one surface it reads as a label rather than a pill. Put it on white
       here, where the pill is the point. */
    background: var(--dc-surface);
    border: 1px solid var(--dc-status-historical-line);
}

.provider-inactive__heading {
    margin: 0 0 var(--dc-space-3);
    font-size: var(--dc-h2);
    line-height: var(--dc-leading-tight);
    color: var(--dc-status-historical-ink);
}

.provider-inactive__body {
    margin: 0 0 var(--dc-space-3);
    line-height: var(--dc-leading);
    color: var(--dc-ink);
}

.provider-inactive__body--muted {
    font-size: var(--dc-text-sm);
    color: var(--dc-ink-soft);
}

/* The only calls to action left on the page point at current care. */
.provider-inactive__actions {
    display: flex;
    flex-direction: column;
    gap: var(--dc-space-2);
    margin-top: var(--dc-space-4);
}

/* Historical contact details read as a record, not an invitation. */
.provider-contact--historical {
    color: var(--dc-ink-soft);
}

.provider-contact--historical .provider-address {
    color: var(--dc-ink-soft);
}

@media (min-width: 700px) {
    .provider-inactive__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .provider-inactive__actions .dc-btn--block {
        width: auto;
        flex: 1 1 260px;
    }
}

/* =====================================================================
   Phase 3C - the provider page on the design system.
   ---------------------------------------------------------------------
   Not a redesign of this page: its content, order and wording are exactly
   what Phase 1A/1D established and Phase 3E owns what comes next. What
   changes here is only that it now uses the site's surfaces, scale and
   spacing tokens instead of its own hand-set pixels, so it stops looking
   like a different site from the city page that links to it.
   ===================================================================== */

.provider-header {
    margin: 0 0 var(--dc-space-4);
}

.provider-header h1 {
    font-size: var(--dc-h1);
    line-height: var(--dc-leading-tight);
    margin: 0 0 var(--dc-space-2);
}

.provider-subhead {
    font-size: var(--dc-text);
    color: var(--dc-text-muted);
    margin: 0;
}

.provider-actions {
    gap: var(--dc-space-3);
    margin: var(--dc-space-5) 0 var(--dc-space-6);
}

/*
 * The body of the page now sits on the same white surface the listing cards
 * use, rather than floating on the page ground beside a white rail. One
 * surface per block, so the eye can tell where contact ends and the recorded
 * details begin.
 */
.provider-contact,
.provider-about,
.provider-details,
.provider-map {
    margin: 0 0 var(--dc-space-5);
    padding: var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
}

.provider-contact h2,
.provider-about h2,
.provider-details h2,
.provider-map h2 {
    font-size: var(--dc-h3);
    margin: 0 0 var(--dc-space-3);
}

.provider-address {
    margin: 0 0 var(--dc-space-2);
    font-size: var(--dc-text);
    line-height: var(--dc-leading);
}

.provider-about p { font-size: var(--dc-text); line-height: var(--dc-leading); }

.provider-facts { font-size: var(--dc-text); line-height: var(--dc-leading); }
.provider-facts dt { font-weight: 700; margin-top: var(--dc-space-3); }
.provider-facts dd { margin: 0 0 var(--dc-space-1); }

.provider-facts-note {
    font-size: var(--dc-text-sm);
    margin: var(--dc-space-3) 0 0;
    max-width: var(--dc-measure);
}

/*
 * The freshness note appears on city and state pages too. It is a caveat, not
 * a warning: it should read as quieter than the listings it introduces, which
 * is why it stays on the sunken ground rather than taking a status colour.
 */
.provider-freshness {
    margin: 0 0 var(--dc-space-6);
    padding: var(--dc-space-4) var(--dc-space-5);
    border-left: 4px solid var(--dc-brand);
    border-radius: 0 var(--dc-radius) var(--dc-radius) 0;
    background: var(--dc-surface-sunken);
    font-size: var(--dc-text-sm);
    line-height: var(--dc-leading);
    color: var(--dc-text-muted);
}

.provider-freshness p { margin: 0 0 var(--dc-space-2); max-width: var(--dc-measure); }
.provider-freshness p:last-child { margin-bottom: 0; }
.provider-freshness strong { color: var(--dc-ink); }

.provider-map iframe {
    max-width: 100%;
    border-radius: var(--dc-radius-sm);
    display: block;
}

.provider-ad { margin: var(--dc-space-6) 0; }

.breadcrumb {
    font-size: var(--dc-text-sm);
    margin: 0 0 var(--dc-space-3);
    line-height: 1.6;
}

/* The historical notice keeps its own ground - it must not read as a card
   like the current-provider blocks above it. */
.provider-inactive { padding: var(--dc-space-5); }

/*
 * The legacy sheet styles headings as `div#left h2`, and an id outranks a
 * class however late the class rule is written. Every attempt above to give a
 * section heading its own scale or rhythm therefore lost silently - the
 * "Contact" and "Details" headings kept the page-h2 scale and the page-h2 top
 * margin, which doubled with the card padding they now sit inside.
 *
 * Matched on specificity rather than reached for !important, so a later phase
 * can still override these the ordinary way.
 */
div#left .provider-contact h2,
div#left .provider-about h2,
div#left .provider-details h2,
div#left .provider-map h2 {
    font-size: var(--dc-h3);
    margin: 0 0 var(--dc-space-3);
}

div#left .provider-header h1 {
    margin: 0 0 var(--dc-space-2);
}