/**
 * 220 Listings — Local Resources Stylesheet
 *
 * Owns every Local Resource shortcode and template:
 *   • Tagged Rows list layout
 *   • Category Accordion (LR-specific design layer over accordion.css)
 *
 * Lazy-loaded by AssetLoader::has_local_resource_content() — only
 * enqueued when the page surfaces Local Resource content (singular,
 * archive, taxonomy, or one of the LR shortcodes).
 *
 * Companion stylesheets:
 *   • 220-listings-shared.css   — Buttons, contact links, pagination, a11y
 *   • 220-listings-accordion.css — Accordion shell + JS
 *
 * @package TwoTwenty\Listings
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS · Directory palette
   ---------------------------------------------------------------
   The --220-navy / --220-gold / --220-warm-white / --220-text-*
   tokens consumed throughout this file are defined globally by
   ColorSettings::output_css_variables() (src/Frontend). To
   customize, edit the Brand Colors in the plugin settings.
═══════════════════════════════════════════════════════════════ */
/* Local :root block removed in v2.3.1 — see ColorSettings.php */

/* ═══════════════════════════════════════════════════════════════
   SHARED · Typography
   ---------------------------------------------------------------
   Body type baseline (DM Sans) used across local-resource lists
   and accordions.
═══════════════════════════════════════════════════════════════ */
.twotwenty-lr-list,
.twotwenty-lr-accordion {
	font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--220-text);
	line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   LOCAL RESOURCES · List · Tagged Rows
   ---------------------------------------------------------------
   Default [220_local_resources] layout. Two-column information rows
   with category tag chips pulled from 220_lr_category. Class prefix
   .twotwenty-lr-*. Used by list-compact-rows.php.
═══════════════════════════════════════════════════════════════ */
.twotwenty-lr-list {
	list-style: none;
	max-width: 760px;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.twotwenty-lr-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--220-border-cool);
}
.twotwenty-lr-row:first-child { border-top: 1px solid var(--220-border-cool); }

.twotwenty-lr-row-left { min-width: 0; }
.twotwenty-lr-row-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}
.twotwenty-lr-row-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--220-text-warm);
	background: var(--220-warm-white);
	border: 1px solid var(--220-border);
	border-radius: 3px;
	padding: 2px 8px;
	white-space: nowrap;
}
.twotwenty-lr-row-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--220-navy);
	margin: 0;
	line-height: 1.3;
}
.twotwenty-lr-row-desc {
	font-size: 12px;
	color: var(--220-text-muted);
	line-height: 1.6;
	font-weight: 300;
	margin: 3px 0 0;
}
.twotwenty-lr-row-right {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
	text-align: right;
	flex-shrink: 0;
}
.twotwenty-lr-row-phone {
	font-size: 12.5px;
	color: var(--220-text-2);
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.twotwenty-lr-row-phone svg { color: var(--220-gold); flex-shrink: 0; }
.twotwenty-lr-row-phone a { color: var(--220-text-2); text-decoration: none; }
.twotwenty-lr-row-phone a:hover { text-decoration: underline; }
.twotwenty-lr-row-website a {
	font-size: 12px;
	font-weight: 600;
	color: var(--220-gold-dark);
	text-decoration: none;
	white-space: nowrap;
}
.twotwenty-lr-row-website a:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.twotwenty-lr-row { grid-template-columns: 1fr; }
	.twotwenty-lr-row-right { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════════
   LOCAL RESOURCES · Category Accordion · Tinted Panel
   ---------------------------------------------------------------
   [220_lr_categories] shortcode. Warm tinted panels with slug-keyed
   icons (school / restaurant / moving / health / service) keyed off
   the 220_lr_category taxonomy. Class prefix .twotwenty-lr-acc-*.
   Used by category-accordion.php.
═══════════════════════════════════════════════════════════════ */
.twotwenty-lr-accordion { max-width: 1200px; margin: 0 0 2rem; }

.twotwenty-lr-accordion .twotwenty-accordion-filter {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--220-border-cool);
	background: none;
	border-radius: 0;
	flex-wrap: wrap;
}
.twotwenty-lr-accordion .twotwenty-accordion-filter-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--220-text-2);
	margin: 0;
}
.twotwenty-lr-accordion .twotwenty-accordion-filter-select {
	padding: 7px 28px 7px 11px;
	font-size: 14px;
	font-family: 'DM Sans', sans-serif;
	border: 1px solid var(--220-border);
	border-radius: 6px;
	background-color: #fff;
	color: var(--220-text);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e99' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
	min-width: 140px;
	max-width: 260px;
}

/* No border/radius on the <ul> itself — each <li> below owns its own
   border (a bottom divider between items), and the first/last items own
   the rounded corners that used to live here. The gap is admin-editable
   (Settings → Local Resources → Main Button Spacing); it defaults to 0,
   the original seamless stacked look divided only by each item's own
   border-bottom. */
.twotwenty-lr-accordion .twotwenty-accordion-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--220-lr-button-spacing, 0);
}
/* box-shadow: none cancels a generic .twotwenty-accordion-item.is-open
   rule in 220-listings-accordion.css (box-shadow: 0 1px 3px rgba(0,0,0,.06))
   that this Tinted Panel design never opted into — nothing here overrides
   box-shadow specifically, so it was bleeding through as a stray darker
   line under the trigger button whenever a category was expanded. */
/* border-radius: 10px on every item (not just first/last) — overflow:
   hidden clips each item's own content (trigger button when closed, or
   the whole expanded panel when open) to that radius on all 4 corners,
   simpler than tracking which item is currently first/last-in-view and
   still reads as one cohesive rounded list. */
/* No border at all (and !important): every line under the main button was
   removed on request — see the "No lines under the main button" note on
   the trigger below. Items are separated by Main Button Spacing instead. */
.twotwenty-lr-accordion .twotwenty-accordion-item,
.twotwenty-lr-accordion .twotwenty-accordion-item.is-open {
	border: 0 !important;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-shadow: none !important;
	transition: none;
}

.twotwenty-lr-accordion .twotwenty-accordion-header { margin: 0; padding: 0; }
.twotwenty-lr-accordion .twotwenty-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	background: var(--220-lr-btn-bg, var(--220-warm-white)) !important;
	cursor: pointer;
	text-align: left;
	font-family: 'DM Sans', sans-serif;
	transition: background 0.15s;
	color: var(--220-lr-btn-text, var(--220-navy)) !important;
}
/* !important: Beaver Builder's own button styling
   (.fl-builder-content button:not(.fl-content-ui-button)) outranks this
   two-class selector on specificity, same reason the icon color/stroke and
   the Reco Pros/Staff CTA button colors needed it above. */
.twotwenty-lr-accordion .twotwenty-accordion-trigger:hover,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:focus-visible {
	background: var(--220-lr-btn-bg-hover, #f3f1e9) !important;
	color: var(--220-lr-btn-text-hover, var(--220-lr-btn-text, var(--220-navy))) !important;
}
/* No lines under the main button, in any state. The trigger is a <button>,
   so Beaver Builder's global button styles
   (.fl-builder-content button:not(.fl-content-ui-button) and its :hover /
   :focus / :active variants) and some themes' button:focus rules give it a
   border, box-shadow or outline that outrank a plain `border: none` and
   change on every click — that was the line blinking under the button as
   a category opened/closed. !important strips all of it. Keyboard users
   still get the :focus-visible outline below. */
.twotwenty-lr-accordion .twotwenty-accordion-trigger,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:hover,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:focus,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:active,
.twotwenty-lr-accordion .twotwenty-accordion-item.is-open .twotwenty-accordion-trigger {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	/* BB's button rule uses `transition: all`, which would also fade any
	   of the above in/out — only the background should animate. */
	transition: background 0.15s !important;
}
.twotwenty-lr-accordion .twotwenty-accordion-trigger:focus-visible { outline: 2px solid var(--220-gold) !important; outline-offset: -2px; }

/* !important + the --fl-global-text---body fallback: Beaver Builder's
   .fl-builder-content button:not(.fl-content-ui-button) rule sets this
   trigger <button>'s color to its own "light text" global color, which
   made the icon (stroke="currentColor") invisible against the white box.
   The Icon Color setting (when set) wins first, then the theme's Body Text
   color, then the original warm-tinted default — !important so it wins
   regardless of BB's rule. */
.twotwenty-lr-acc-icon {
	width: 35px;
	height: 35px;
	border-radius: 6px;
	flex-shrink: 0;
	background: var(--220-lr-icon-bg, #fff) !important;
	border: 1px solid var(--220-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--220-lr-icon-color, var(--fl-global-text---body, var(--220-text-warm))) !important;
}
.twotwenty-lr-accordion .twotwenty-accordion-trigger:hover .twotwenty-lr-acc-icon,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:focus-visible .twotwenty-lr-acc-icon {
	background: var(--220-lr-icon-bg-hover, var(--220-lr-icon-bg, #fff)) !important;
	color: var(--220-lr-icon-color-hover, var(--220-lr-icon-color, var(--fl-global-text---body, var(--220-text-warm)))) !important;
}
/* Explicit size/display/stroke on the svg itself, not just the parent span
   — a Beaver Builder rule sets `color` directly on the <svg> (not just the
   trigger <button>), which overrides inheritance from .twotwenty-lr-acc-icon
   regardless of that rule's own specificity, so stroke: currentColor was
   still resolving to BB's color. Setting stroke explicitly (bypassing
   currentColor) sidesteps that entirely, and mirrors the same fallback
   chain as the icon box color above. Same for width/height — a
   theme/builder-wide "svg { width: 100%; height: auto; }"-style reset can
   silently override the SVG's own width/height attributes and collapse it
   to nothing inside this flex box. */
.twotwenty-lr-acc-icon svg {
	display: block;
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0;
	stroke: var(--220-lr-icon-color, var(--fl-global-text---body, var(--220-text-warm))) !important;
}
.twotwenty-lr-accordion .twotwenty-accordion-trigger:hover .twotwenty-lr-acc-icon svg,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:focus-visible .twotwenty-lr-acc-icon svg {
	stroke: var(--220-lr-icon-color-hover, var(--220-lr-icon-color, var(--fl-global-text---body, var(--220-text-warm)))) !important;
}

.twotwenty-lr-accordion .twotwenty-accordion-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--220-lr-btn-text, var(--220-navy)) !important;
	flex: 1;
	min-width: 0;
}
.twotwenty-lr-accordion .twotwenty-accordion-trigger:hover .twotwenty-accordion-title,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:focus-visible .twotwenty-accordion-title {
	color: var(--220-lr-btn-text-hover, var(--220-lr-btn-text, var(--220-navy))) !important;
}
.twotwenty-lr-accordion .twotwenty-accordion-count {
	font-size: 14px;
	font-weight: 700;
	color: var(--220-lr-count-text, var(--220-gold-dark)) !important;
	background: var(--220-lr-count-bg, var(--220-gold-light)) !important;
	border: 1px solid var(--220-gold-border);
	border-radius: 100px;
	padding: 2px 10px;
	flex-shrink: 0;
	display: inline-flex;
	line-height: 1.2;
	transition: background 0.15s, color 0.15s;
}
/* Hover/focus lives on the trigger <button> — the count pill itself isn't
   independently interactive — so the color change is keyed off that.
   !important for the same reason as the trigger background/icon above:
   the count pill sits inside a <button> that Beaver Builder's global
   button color rule also targets, and BB's selector outranks ours. */
.twotwenty-lr-accordion .twotwenty-accordion-trigger:hover .twotwenty-accordion-count,
.twotwenty-lr-accordion .twotwenty-accordion-trigger:focus-visible .twotwenty-accordion-count {
	color: var(--220-lr-count-text-hover, var(--220-gold-dark)) !important;
	background: var(--220-lr-count-bg-hover, var(--220-gold-light)) !important;
}
.twotwenty-lr-accordion .twotwenty-accordion-chevron {
	color: var(--220-text-muted);
	flex-shrink: 0;
	transition: transform 0.25s ease;
}
.twotwenty-lr-accordion .twotwenty-accordion-trigger[aria-expanded="true"] .twotwenty-accordion-chevron {
	transform: rotate(180deg);
}

/* border-top: 0 cancels 220-listings-accordion.css's generic panel
   border-top. The open trigger's own bottom divider already draws that
   line (and fades with the slide); the panel's border isn't part of the
   animated height, so it popped in at full strength the instant a panel
   started opening and lingered until it finished closing — doubling the
   line and causing the "blink". */
.twotwenty-lr-accordion .twotwenty-accordion-panel {
	background: #fff;
	padding: 0;
	border-top: 0;
	position: relative;
}
/* Outline the open list (left, right, bottom) so it reads as part of the
   button above it. Drawn by an overlay on top of the rows (their white
   backgrounds would hide an inset box-shadow) rather than as a border on
   the panel: the overlay is sized to the panel's CURRENT height and the
   panel clips it while sliding, so the outline grows/shrinks with the
   slide — invisible when collapsed — instead of popping in at full
   strength the way a border did (the old "blink"). Bottom corners match
   the item's 10px radius. */
.twotwenty-lr-accordion .twotwenty-accordion-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--220-border);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	pointer-events: none;
}
.twotwenty-lr-accordion .twotwenty-accordion-panel[hidden] { display: none; }

.twotwenty-lr-accordion .twotwenty-accordion-subgrid { display: flex; flex-direction: column; }
.twotwenty-lr-accordion .twotwenty-accordion-subsection { padding: 12px 20px 8px; border-bottom: 1px solid var(--220-border-cool); }
.twotwenty-lr-accordion .twotwenty-accordion-subsection:last-child { border-bottom: none; }
.twotwenty-lr-accordion .twotwenty-accordion-subtitle {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--220-gold-dark);
	margin: 0 0 6px;
}
.twotwenty-lr-accordion .twotwenty-accordion-subcount {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--220-text-muted);
	margin-left: 6px;
	font-size: 10.5px;
}

.twotwenty-lr-accordion .twotwenty-accordion-rows,
.twotwenty-lr-accordion > .twotwenty-accordion-panel > .twotwenty-accordion-rows {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	border: 0;
	border-radius: 0;
}
.twotwenty-lr-accordion .twotwenty-lr-acc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--220-border-cool);
	background: #fff;
	flex-wrap: wrap;
}
.twotwenty-lr-accordion .twotwenty-lr-acc-row:last-child { border-bottom: none; }
.twotwenty-lr-acc-row-name { font-size: 13.5px; font-weight: 600; text-align: left; color: var(--220-navy); flex: 1; min-width: 0; margin: 0; }
.twotwenty-lr-acc-row-contacts { display: flex; align-items: center; gap: 70px; flex-shrink: 0; flex-wrap: wrap; }
.twotwenty-lr-acc-row-phone {
	font-size: 14px;
	color: var(--220-text-2);
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.twotwenty-lr-acc-row-phone svg { color: var(--220-gold); flex-shrink: 0; }
.twotwenty-lr-acc-row-phone a { color: var(--220-text-2); text-decoration: none; }
.twotwenty-lr-acc-row-phone a:hover { text-decoration: underline; }
.twotwenty-lr-acc-row-website a {
	font-size: 14px;
	font-weight: 600;
	color: var(--220-gold-dark);
	text-decoration: none;
	white-space: nowrap;
}
.twotwenty-lr-acc-row-website a:hover { text-decoration: underline; }
.twotwenty-lr-acc-row-desc {
	font-size: 11.5px;
	color: var(--220-text-muted);
	line-height: 1.55;
	padding: 0 20px 11px;
	font-weight: 300;
	margin: 0;
}

.twotwenty-lr-accordion .twotwenty-no-results {
	padding: 14px 20px;
	margin: 0;
	color: var(--220-text-muted);
	font-size: 12.5px;
	font-style: italic;
}

@media (max-width: 600px) {
	.twotwenty-lr-accordion .twotwenty-lr-acc-row { flex-direction: column; align-items: flex-start; gap: 6px; }
	.twotwenty-lr-acc-row-contacts { flex-direction: column; align-items: flex-start; gap: 4px; }
}