/*
 * css/hpr.css - Evolve-427. HOA Provider Registry references on DLMPropertyGroup.com.
 *
 * Deliberately self-contained: every value here is a literal, not a var() into the
 * host page's theme. The 28 DLM pages each define their own :root and several define
 * none at all, so a block built on inherited variables renders differently on every
 * page and blank on some. Literals also keep the Registry reading as its own calm
 * institutional layer rather than as another DLM marketing panel - which is the whole
 * design brief.
 *
 * Palette is the Registry's own: #1C242C ink, #7B9B7E sage, #4A5561 secondary text.
 * Everything is namespaced .hpr- so it cannot collide with a host page's classes.
 */

.hpr-ink { color: #1C242C; }

/* ---------------------------------------------------------------- lockups -- */

/* Full wordmark: the house mark beside the name, as the Registry sets it. */
.hpr-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    text-decoration: none;
    color: #1C242C;
    line-height: 1;
}
.hpr-wordmark img { display: block; width: auto; height: 2.1em; flex: none; }
.hpr-wordmark .hpr-name {
    font-size: 1em;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #1C242C;
}
.hpr-wordmark .hpr-name b { font-weight: 700; }
.hpr-wordmark .hpr-name span { font-weight: 400; }

/* Small seal, for resident and business-card contexts. */
.hpr-seal { display: block; width: auto; flex: none; }

/* ------------------------------------------------------------- trust card -- */

.hpr-card {
    background: #FFFFFF;
    border: 1px solid #DFE4E8;
    border-left: 3px solid #7B9B7E;
    border-radius: 10px;
    padding: 1.75rem;
    color: #2B3540;
    font-size: 1rem;
    line-height: 1.6;
}
.hpr-card .hpr-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B7885;
    margin: 0 0 0.85rem;
}
.hpr-card h3, .hpr-card h2 {
    margin: 0 0 0.75rem;
    color: #1C242C;
    line-height: 1.25;
}
.hpr-card p { margin: 0 0 0.9rem; color: #48535F; }
.hpr-card p:last-child { margin-bottom: 0; }

/* A full-width band, for the page sections that carry the wordmark. */
.hpr-band {
    background: #F6F7F5;
    border-top: 1px solid #E3E7E2;
    border-bottom: 1px solid #E3E7E2;
    padding: 3.5rem 1.25rem;
}
.hpr-band .hpr-inner { max-width: 1080px; margin: 0 auto; }

/* ------------------------------------------------------------------ links -- */

.hpr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.hpr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid #1C242C;
    background: #1C242C;
    color: #FFFFFF;
    /* 44px minimum tap target on touch screens. */
    min-height: 44px;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}
.hpr-btn:hover, .hpr-btn:focus-visible { background: #33404C; color: #FFFFFF; }
.hpr-btn.hpr-secondary { background: transparent; color: #1C242C; }
.hpr-btn.hpr-secondary:hover, .hpr-btn.hpr-secondary:focus-visible { background: #EDF0ED; color: #1C242C; }

/* Plain inline text link, for the workflow references. */
.hpr-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #40606F;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(64, 96, 111, 0.35);
}
.hpr-link:hover, .hpr-link:focus-visible { color: #1C242C; border-bottom-color: #1C242C; }

/* The external-link arrow. Marked aria-hidden wherever it is written, and every
   cross-site link also carries a visually hidden "opens on hoaproviderregistry.org". */
.hpr-ext { font-size: 0.85em; line-height: 1; }

.hpr-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------ the two kinds of standing -- */

.hpr-standing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 0;
}
.hpr-standing > div {
    background: #FFFFFF;
    border: 1px solid #DFE4E8;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
}
.hpr-standing h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1C242C;
}
.hpr-standing p { margin: 0; font-size: 0.9rem; color: #48535F; line-height: 1.55; }

.hpr-note {
    margin: 1.1rem 0 0;
    padding: 0.85rem 1rem;
    background: #EFF2EF;
    border-left: 3px solid #7B9B7E;
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    color: #3A4550;
    line-height: 1.55;
}

.hpr-fine {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #6B7885;
}

/* -------------------------------------------------------- status on a card -- */

/* Rendered ONLY when the Registry publishes a record for that business. There is
   deliberately no "not approved" variant in this file: a business without a record
   gets .hpr-status-none, which is neutral, or nothing at all. */
.hpr-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding: 0.6rem 0.75rem;
    background: #F6F7F5;
    border: 1px solid #E3E7E2;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #48535F;
}
.hpr-status img { width: 30px; height: 30px; flex: none; }
.hpr-status .hpr-status-body { min-width: 0; }
.hpr-status .hpr-status-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7885;
}
.hpr-status .hpr-status-value { font-weight: 700; color: #1C242C; }
.hpr-status .hpr-status-id {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    color: #48535F;
    overflow-wrap: anywhere;
}
.hpr-status a { color: #40606F; font-weight: 600; text-decoration: none; }
.hpr-status a:hover, .hpr-status a:focus-visible { text-decoration: underline; }

.hpr-status-none {
    margin-top: 0.85rem;
    font-size: 0.76rem;
    color: #8A95A1;
    line-height: 1.4;
}

/* ------------------------------------------------------ footer trust block -- */

/* Sits inside whatever <footer> the host page already has. It borrows no footer
   styles, so it looks the same on all 28 of them. */
.hpr-footer {
    margin: 1.75rem 0 0;
    padding: 1.35rem 0 0;
    border-top: 1px solid rgba(128, 140, 152, 0.28);
}
.hpr-footer .hpr-footer-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.hpr-footer h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8A95A1;
}
.hpr-footer .hpr-wordmark { font-size: 0.9rem; color: inherit; }
.hpr-footer .hpr-wordmark .hpr-name { color: inherit; }
.hpr-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}
.hpr-footer li { margin: 0; }
.hpr-footer a {
    color: inherit;
    opacity: 0.82;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-block;
    padding: 0.3rem 0;
}
.hpr-footer a:hover, .hpr-footer a:focus-visible { opacity: 1; text-decoration: underline; }
.hpr-footer .hpr-footer-note {
    margin: 0.8rem 0 0;
    font-size: 0.76rem;
    line-height: 1.55;
    opacity: 0.7;
}

/* ------------------------------------------------------------------ mobile -- */

@media (max-width: 640px) {
    .hpr-card { padding: 1.35rem; }
    .hpr-band { padding: 2.5rem 1rem; }
    .hpr-actions { flex-direction: column; align-items: stretch; }
    .hpr-btn { justify-content: center; width: 100%; }
    .hpr-wordmark { font-size: 0.95em; }
    .hpr-wordmark .hpr-name { white-space: normal; }
    .hpr-footer ul { flex-direction: column; gap: 0; }
}

/* Some DLM pages render their footer on a dark ground. The block inherits the
   footer's own colour, so the only thing that needs saying is the rule separator. */
@media (prefers-reduced-motion: reduce) {
    .hpr-btn { transition: none; }
}