/*
Theme Name: Directory Cards
Version: 2.1.0
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: directory-cards
License: GPL-2.0-or-later
*/
:root { --dc-bg: #f2f5f7; --dc-card: #fff; --dc-text: #18212a; --dc-accent: #005f73; --dc-border: #aab6bf; --dc-max: 80rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dc-bg); color: var(--dc-text); font-family: system-ui, sans-serif; line-height: 1.5; }
a { color: var(--dc-accent); text-underline-offset: .18em; }
a:focus-visible { outline: .25rem solid #9b4d00; outline-offset: .2rem; }
img { max-width: 100%; height: auto; }
.directory-skip { position: fixed; top: -5rem; left: 1rem; z-index: 10; padding: .8rem 1rem; background: var(--dc-text); color: white; }
.directory-skip:focus { top: 1rem; }
.directory-header { padding: 1rem max(1rem, calc((100% - var(--dc-max)) / 2)); background: var(--dc-text); color: white; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.directory-logo { color: white; font-size: 1.3rem; font-weight: 900; text-decoration: none; }
.directory-header ul, .directory-footer ul { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.directory-header a { color: white; }
.directory-shell { max-width: var(--dc-max); margin: auto; padding: clamp(2rem, 5vw, 4rem) 1rem; display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; }
.directory-title { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 3fr; gap: .5rem 2rem; border-bottom: .25rem solid var(--dc-text); }
.directory-title > p { font-weight: 800; text-transform: uppercase; }
.directory-title h1 { margin: 0 0 1rem; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1; }
.directory-filters { grid-column: 1; }
.filter-group { margin-bottom: 2rem; }
.filter-group h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.filter-group ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dc-border); }
.filter-group a { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .2rem; border-bottom: 1px solid var(--dc-border); font-weight: 700; text-decoration: none; }
.directory-description, .card-results, .directory-facts { grid-column: 2; }
.directory-description { max-width: 54rem; }
.results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.directory-card { min-width: 0; background: var(--dc-card); border: 1px solid var(--dc-border); }
.directory-card figure { margin: 0; border-bottom: 1px solid var(--dc-border); }
.directory-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-body { padding: 1rem; }
.card-body h2, .card-body h3 { margin: .25rem 0; font-size: 1.25rem; }
.verified-mark { margin: 0; color: #235c2f; font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.card-meta { color: #52616b; font-size: .85rem; }
.directory-facts dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.directory-facts dl div { padding: 1rem; border: 1px solid var(--dc-border); }
.directory-facts dt { font-weight: 800; }
.directory-facts dd { margin: .4rem 0; }
.content-rows { grid-column: 2; }
.content-rows article { display: grid; grid-template-columns: 2fr 3fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--dc-border); }
.single-document { display: block; }
.single-document article { max-width: 48rem; margin: auto; }
.document-body > * + * { margin-top: 1.25rem; }
.directory-footer { max-width: var(--dc-max); margin: auto; padding: 2rem 1rem; border-top: .25rem solid var(--dc-text); display: flex; justify-content: space-between; gap: 2rem; }
@media (max-width: 48rem) { .directory-shell, .directory-title { grid-template-columns: 1fr; } .directory-shell > *, .directory-title > * { grid-column: 1; } .cards, .directory-facts dl { grid-template-columns: 1fr; } .directory-header, .directory-footer { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .directory-card, .filter-group a, .directory-facts dl div { border-color: CanvasText; } .verified-mark { color: CanvasText; } }