/*
 * Area packs on /gardeners-near-me/[area] (2026-10-18) — app/views/partials/area-local.php.
 *
 * Loaded only on an area page with a live pack. Reuses directory.css's --dir-* colours so
 * the block sits in the same page rather than beside it. Below the fold by construction
 * (it follows the listings), so nothing here shifts what loads first. Badges always carry
 * their words; colour only repeats them.
 */

.al { padding-bottom: 20px; }
.al-h3 { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; color: var(--dir-ink); }
.al-centre h4, .al-month h4 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; color: var(--dir-ink); }
.al-body p, .al-intro p { margin: 0 0 12px; }
.al-body ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.al-body li { margin: 0 0 6px; list-style: disc; }
.al-intro { max-width: 70ch; font-size: 17px; line-height: 1.65; color: var(--dir-body); margin: 0 0 28px; }
.al-body, .al-centre p, .al-faq { font-size: 15px; line-height: 1.65; color: var(--dir-body); }
.al-muted { color: var(--dir-muted); }
.al a { color: var(--dir-deep); text-decoration: underline; text-underline-offset: 2px; }
.al a:focus-visible, .al summary:focus-visible { outline: 3px solid var(--dir-deep); outline-offset: 2px; }

.al-cite { margin-left: 2px; font-size: 11px; white-space: nowrap; }
.al-cite a { text-decoration: none; padding: 0 1px; }

.al-block { margin: 0 0 40px; }

.al-card {
    border: 1px solid var(--dir-line); border-radius: 10px; background: var(--dir-card);
    padding: 22px 24px; margin: 0 0 40px;
}
.al-facts { display: grid; grid-template-columns: 1fr; gap: 14px 32px; margin: 0; }
.al-facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dir-muted); margin: 0 0 3px; }
.al-facts dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dir-body); }

.al-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 16px; }
.al-chips li {
    background: var(--dir-wash); border: 1px solid var(--dir-line); border-radius: 8px;
    padding: 8px 12px; font-size: 15px; color: var(--dir-ink);
}
.al-chips li span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dir-muted); }

.al-button {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 8px;
    background: var(--dir-dark); color: #fff !important; text-decoration: none !important; font-weight: 600;
}

.al-centres { display: grid; grid-template-columns: 1fr; gap: 16px; }
.al-centre { border: 1px solid var(--dir-line); border-radius: 10px; background: var(--dir-card); padding: 18px 20px; }
.al-centre p { margin: 0 0 8px; }

.al-badges { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 10px; }
.al-badge { font-size: 13px; line-height: 1.3; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.al-badge--yes   { background: #E8F5D6; color: #2F4F00; border-color: #C8E3A2; }
.al-badge--warn  { background: #FFF4D6; color: #6B4A00; border-color: #F0D894; }
.al-badge--no    { background: #FBE5E1; color: #7A2214; border-color: #F0C3BA; }
.al-badge--info  { background: #E3EEF9; color: #163F6B; border-color: #BDD3EC; }
.al-badge--muted { background: var(--dir-wash); color: var(--dir-body); border-color: var(--dir-line); }

.al-trade { background: #FBF1E4; border-left: 4px solid #C77A1A; padding: 10px 12px; border-radius: 4px; color: #4A2E08; }
.al-notice { background: #FFF4D6; padding: 8px 12px; border-radius: 4px; color: #6B4A00; }

.al-callout { background: var(--dir-wash); border: 1px solid var(--dir-line); border-left: 5px solid var(--dir-deep); border-radius: 10px; padding: 22px 24px; }

.al-months { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.al-month { border: 1px solid var(--dir-line); border-radius: 10px; padding: 16px 18px; background: var(--dir-card); }
.al-month.is-now { border-color: var(--dir-deep); box-shadow: inset 4px 0 0 var(--dir-deep); }
.al-month-name { margin: 0 0 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dir-muted); }
.al-month-name span { text-transform: none; letter-spacing: 0; }

.al-faq { border-top: 1px solid var(--dir-line); }
.al-faq:last-of-type { border-bottom: 1px solid var(--dir-line); }
/* A chevron on every question, because that is what says "this opens" (owner, 2026-10-18).
   Drawn in CSS, not an icon font, so it is there before Font Awesome's deferred load. It
   points down when closed and up when open; the browser's own marker is hidden. */
.al-faq summary {
    cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 14px; padding: 12px 0;
    font-size: 17px; font-weight: 600; color: var(--dir-ink); list-style: none;
}
.al-faq summary::-webkit-details-marker { display: none; }
.al-faq summary span { flex: 1; }
.al-faq summary::after {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 6px;
    border-right: 2.5px solid var(--dir-deep); border-bottom: 2.5px solid var(--dir-deep);
    transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.al-faq[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.al-faq summary:hover span { color: var(--dir-deep); }
@media (prefers-reduced-motion: reduce) { .al-faq summary::after { transition: none; } }
.al-faq .al-body { padding: 0 0 14px; }

.al-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.al-posts li { font-size: 16px; }
.al-posts span { display: block; font-size: 14px; color: var(--dir-muted); }

.al-sources { border-top: 1px solid var(--dir-line); padding-top: 24px; font-size: 14px; line-height: 1.6; color: var(--dir-body); }
.al-sources .al-h3 { font-size: 18px; }
.al-sources ol { padding-left: 22px; margin: 0 0 12px; }
.al-sources li { margin: 0 0 4px; overflow-wrap: anywhere; }
.al-sources li:target { background: #FFF4D6; }

@media (min-width: 768px) {
    .al-months { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .al-facts { grid-template-columns: 1fr 1fr; }
    .al-centres { grid-template-columns: 1fr 1fr; }
    .al-months { grid-template-columns: repeat(3, 1fr); }
}