/* Buyer's Guide Directory — front end. Colors follow Astra's global palette. */
:root {
	--bg-accent: var(--ast-global-color-0, #c91d1d);
	--bg-accent-dark: var(--ast-global-color-1, #8a1c1c);
	--bg-ink: var(--ast-global-color-2, #1f1a17);
	--bg-text: var(--ast-global-color-3, #3d3632);
	--bg-surface: var(--ast-global-color-4, #f7f3ef);
	--bg-bg: var(--ast-global-color-5, #ffffff);
	--bg-line: #e4dcd4;
	--bg-muted: #6f655e;
	--bg-gold: #b7791f;
	--bg-on-accent: #fff;
	/* Filled buttons/chips. Same as the brand red in light mode; in dark mode the brand red
	   (links) is softened, but buttons keep the site icon's red. */
	--bg-button: var(--bg-accent);
	--bg-button-hover: var(--bg-accent-dark);
	--bg-field: #fff;
	--bg-field-line: #cfc5bb;
	--bg-gold-tint: #fdf3e1;
	--bg-gold-line: #f0d9ad;
	--bg-gold-ink: #7a4d0b;
	--bg-error-tint: #fdecec;
	--bg-error: #b42318;
	--bg-success-tint: #ecf7ef;
	--bg-success: #1f7a3d;
	--bg-cta: #1f1a17;
	--bg-cta-ink: #f2ece6;
	--bg-cta-head: #fff;
	--bg-star-off: #b8aca2;
	--bg-placeholder-bg: #e9e3dd;
	--bg-placeholder-ink: #fbf8f5;
	color-scheme: light;
	--bg-radius: 10px;
}

.bg-muted { color: var(--bg-muted); }
.bg-hint { color: var(--bg-muted); font-weight: 400; font-size: .9em; }
.bg-req { color: var(--bg-accent); }

.bg-btn {
	display: inline-block; padding: .7em 1.3em; border-radius: 999px; border: 2px solid var(--bg-button);
	color: var(--bg-accent); background: transparent; font-weight: 700; text-decoration: none; line-height: 1.2; cursor: pointer;
}
.bg-btn:hover, .bg-btn:focus-visible { background: var(--bg-button); color: var(--bg-on-accent); }
.bg-btn--primary { background: var(--bg-button); color: var(--bg-on-accent); }
.bg-btn--primary:hover, .bg-btn--primary:focus-visible { background: var(--bg-button-hover); border-color: var(--bg-button-hover); color: var(--bg-on-accent); }

/* Hero + search */
/* margin-top: the home page has no page title, so without it the hero butts against the header's bottom border. */
.bg-hero { background: var(--bg-surface); border: 1px solid var(--bg-line); border-radius: var(--bg-radius); padding: clamp(24px, 5vw, 56px); margin: clamp(24px, 4vw, 48px) 0 40px; }
.bg-hero__title { margin: 0 0 .3em; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--bg-ink); }
.bg-hero__sub { max-width: 60ch; margin-bottom: 1.4em; }
.bg-search { display: flex; flex-wrap: wrap; gap: 10px; }
.bg-search input[type=search] { flex: 3 1 280px; min-width: 0; }
.bg-search select { flex: 1 1 200px; min-width: 0; }
/* One shared height for box, dropdown and button; override Astra's fixed select height/line-height that clipped the text. */
.bg-search input[type=search], .bg-search select, .bg-search .bg-btn { box-sizing: border-box; height: 52px; min-height: 52px; margin: 0; font-size: 1rem; line-height: 1.25; }
/* "html body" keeps this ahead of Astra Pro's dark-mode input rule (its background value is malformed). */
html body .bg-search input[type=search], html body .bg-search select { padding: 0 16px; border: 1px solid var(--bg-line); border-radius: 8px; background-color: var(--bg-field); color: var(--bg-ink); }
.bg-search select { padding-right: 36px; text-overflow: ellipsis; }
.bg-search .bg-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.6em; }
.bg-archive__header + .bg-search, .bg-index > .bg-search { margin: 0 0 28px; }

/* Cards */
.bg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0 0 32px; }
.bg-card { display: flex; gap: 14px; padding: 18px; background: var(--bg-surface); border: 1px solid var(--bg-line); border-radius: var(--bg-radius); position: relative; }
.bg-card:hover { border-color: var(--bg-accent); }
.bg-card--featured { border-color: var(--bg-gold); box-shadow: inset 4px 0 0 var(--bg-gold); }
/* Proportional (never cropped): wide logos get up to 96px wide, tall/square ones up to 56px high. */
.bg-card__logo { width: auto; height: auto; max-width: 96px; max-height: 56px; object-fit: contain; flex: none; align-self: flex-start; border-radius: 6px; background: #fff; }
.bg-card__body { min-width: 0; }
.bg-card__title { font-size: 1.1rem; margin: 0 0 4px; display: inline; }
.bg-card__title a { color: var(--bg-ink); text-decoration: none; }
.bg-card__title a::after { content: ""; position: absolute; inset: 0; } /* Whole card clickable */
.bg-card__meta { margin: 6px 0 8px; font-size: .92rem; color: var(--bg-muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bg-card__meta a { position: relative; z-index: 1; color: var(--bg-accent); overflow-wrap: anywhere; }
.bg-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--bg-gold-tint); color: var(--bg-gold-ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.bg-badge--sm { font-size: .65rem; padding: 1px 6px; }

.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.bg-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--bg-bg); border: 1px solid var(--bg-line); color: var(--bg-text); font-size: .82rem; text-decoration: none; }
a.bg-chip:hover { background: var(--bg-button); border-color: var(--bg-button); color: var(--bg-on-accent); }
.bg-chip--top { background: var(--bg-gold-tint); border-color: var(--bg-gold-line); color: var(--bg-gold-ink); font-weight: 600; }
.bg-chip--top::before { content: "★ "; color: var(--bg-gold); }
a.bg-chip--top:hover { background: var(--bg-gold); color: var(--bg-on-accent); }
a.bg-chip--top:hover::before { color: var(--bg-on-accent); }
.bg-chip--more { background: transparent; border-color: transparent; color: var(--bg-muted); }
.bg-count { color: var(--bg-muted); font-size: .85em; }
a.bg-chip:hover .bg-count { color: var(--bg-on-accent); }

.bg-results__title, .bg-featured h2, .bg-browse h2 { font-size: 1.4rem; margin-bottom: 16px; }
.bg-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.bg-pager a { padding: 6px 12px; border: 1px solid var(--bg-line); border-radius: 6px; text-decoration: none; }
.bg-pager a.is-current { background: var(--bg-button); color: var(--bg-on-accent); border-color: var(--bg-button); }

/* Browse */
.bg-browse { margin: 16px 0 40px; }
.bg-browse__grid { columns: 3 260px; column-gap: 32px; }
.bg-browse__group { break-inside: avoid; margin-bottom: 24px; }
.bg-browse__group h3 { font-size: 1.05rem; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--bg-accent); }
.bg-browse__group ul { list-style: none; margin: 0; padding: 0; }
.bg-browse__group li { padding: 3px 0; }
.bg-browse__group a { text-decoration: none; }

/* CTA */
.bg-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px; border-radius: var(--bg-radius); background: var(--bg-cta); color: var(--bg-cta-ink); margin: 24px 0; }
.bg-cta h2 { color: var(--bg-cta-head); margin: 0 0 4px; font-size: 1.3rem; }
.bg-cta p { margin: 0; max-width: 60ch; }

/* Breadcrumbs */
.bg-crumbs { font-size: .9rem; color: var(--bg-muted); margin-bottom: 18px; }
.bg-crumbs a { text-decoration: none; }

/* Single company */
/* Header uses the same two columns as the body so the logo/placeholder sits right above the Contact card. */
.bg-company__header { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 40px; align-items: center; margin-bottom: 32px; }
.bg-company__visual { display: flex; align-items: center; justify-content: center; height: 150px; border-radius: var(--bg-radius); }
.bg-company__visual--logo { background: #fff; border: 1px solid var(--bg-line); padding: 16px 20px; }
.bg-company__visual--logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bg-company__visual--placeholder { background: var(--bg-placeholder-bg); color: var(--bg-placeholder-ink); padding: 24px 28px; }
.bg-company__visual--placeholder svg { width: 100%; height: 100%; }
.bg-company__title { margin: 0; display: inline; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.bg-company__header p { margin: 6px 0 0; }
.bg-company__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 40px; }
.bg-company__main h2, .bg-company__contact h2 { font-size: 1.25rem; }
.bg-company__main > :first-child { margin-top: 0; }
.bg-company__contact h2 { margin-top: 0; }
.bg-company__main h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bg-muted); margin: 18px 0 8px; }
.bg-company__contact { background: var(--bg-bg); border: 1px solid var(--bg-line); border-radius: var(--bg-radius); padding: 24px; align-self: start; }
.bg-company__contact dl { margin: 0; }
.bg-company__contact dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bg-muted); margin-top: 12px; }
.bg-company__contact dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.bg-company__contact address { font-style: normal; margin: 0; }
.bg-company__update { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--bg-line); font-size: .92rem; }
@media (max-width: 760px) {
	.bg-company__grid, .bg-company__header { grid-template-columns: 1fr; gap: 24px; }
	.bg-company__visual--placeholder { display: none; }
	.bg-company__visual--logo { order: -1; height: 96px; justify-content: flex-start; width: fit-content; max-width: 100%; }
}

.bg-specialties { margin: 0 0 28px; padding: 16px 20px; background: var(--bg-gold-tint); border-radius: var(--bg-radius); }
.bg-specialties h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bg-gold-ink); margin: 0 0 10px; }
.bg-specialties .bg-chips { margin: 0; }
.bg-specialties .bg-chip { font-size: 1rem; padding: 6px 14px; background: var(--bg-bg); }
.bg-also { margin-top: 18px; }

/* "See their ad in the … issue" on listings of current-issue advertisers */
.bg-issue-link { margin: 10px 0 0; font-weight: 600; }
.bg-issue-link a::before { content: "📖"; display: inline-block; margin-right: .4em; text-decoration: none; }
.bg-issue-link a::after { content: " →"; }

/* Home: current issue cover (left) + compact Featured list (right) */
.bg-feature { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 40px; align-items: start; margin: 0 0 48px; }
.bg-feature--no-issue { grid-template-columns: 1fr; }
.bg-feature__issue { text-align: center; }
.bg-feature__cover { display: block; margin: 0 0 14px; }
.bg-feature__cover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 12px 28px rgba(0,0,0,.14); transition: transform .2s ease; }
.bg-feature__cover:hover img, .bg-feature__cover:focus-visible img { transform: translateY(-3px); }
.bg-feature__eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-muted); }
.bg-feature__title { margin: 2px 0 14px; font-size: 1.15rem; font-weight: 700; color: var(--bg-ink); }
.bg-feature__list h2 { margin: 0 0 4px; font-size: 1.4rem; }
.bg-feature__sub { margin: 0 0 16px; font-size: .95rem; }
.bg-feature__names { columns: 2 240px; column-gap: 32px; list-style: none; margin: 0; padding: 14px 0 0; border-top: 2px solid var(--bg-accent); }
.bg-feature__names li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--bg-line); font-size: .98rem; line-height: 1.35; }
html body .entry-content .bg-feature__names a { font-weight: 600; text-decoration: none; } /* outranks Astra's ".ast-single-post .entry-content a" underline */
html body .entry-content .bg-feature__names a:hover { text-decoration: underline; }
html body .entry-content a.bg-btn, html body .entry-content a.bg-chip { text-decoration: none; }
.bg-feature__names .bg-muted { display: block; font-size: .82rem; }
.bg-feature__names .bg-feature__page { font-weight: 600; color: var(--bg-gold-ink); }
/* Page numbers open that ad in the digital issue: arrow marks it as a link out; underline on hover. */
html body .entry-content .bg-feature__names a.bg-page-link { color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
html body .entry-content .bg-feature__names a.bg-page-link::after { content: "\2197"; margin-left: .1em; font-size: .9em; }
html body .entry-content .bg-feature__names a.bg-page-link:hover,
html body .entry-content .bg-feature__names a.bg-page-link:focus-visible { text-decoration: underline; }
@media (max-width: 760px) {
	.bg-feature { grid-template-columns: 1fr; gap: 28px; }
	.bg-feature__issue { max-width: 240px; margin: 0 auto; }
}

/* A–Z */
.bg-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; position: sticky; top: 0; background: var(--bg-bg); padding: 8px 0; z-index: 2; }
.bg-az a { min-width: 2.2em; text-align: center; padding: 4px 6px; border: 1px solid var(--bg-line); border-radius: 6px; text-decoration: none; }
.bg-az a:hover { background: var(--bg-button); color: var(--bg-on-accent); }
.bg-az__section { scroll-margin-top: 70px; }
.bg-az__section h2 { border-bottom: 2px solid var(--bg-accent); padding-bottom: 4px; }
.bg-az__list { columns: 2 300px; column-gap: 32px; list-style: none; margin: 0 0 28px; padding: 0; }
.bg-az__list li { padding: 3px 0; break-inside: avoid; }
.bg-az__list .bg-muted { font-size: .85em; }

/* Notices */
.bg-notice { padding: 16px 20px; border-radius: var(--bg-radius); background: var(--bg-bg); border-left: 4px solid var(--bg-accent); margin-bottom: 24px; }
.bg-notice--error { background: var(--bg-error-tint); border-color: var(--bg-error); }
.bg-notice--error ul { margin: 8px 0 0 1.2em; }
.bg-notice--success { background: var(--bg-success-tint); border-color: var(--bg-success); }
.bg-notice h2 { margin-top: 0; font-size: 1.3rem; }

/* Form */
.bg-form fieldset { border: 1px solid var(--bg-line); border-radius: var(--bg-radius); padding: 20px 24px 8px; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.bg-form legend { font-weight: 700; font-size: 1.15rem; padding: 0 8px; color: var(--bg-ink); }
.bg-field { margin-bottom: 16px; min-width: 0; }
.bg-col-full, .bg-form fieldset > .bg-checks, .bg-form .bg-cat-intro, .bg-form .bg-top-summary, .bg-form .bg-cat-grid { grid-column: 1 / -1; }
.bg-field label, .bg-label { display: block; font-weight: 600; margin-bottom: 4px; }
.bg-field input[type=text], .bg-field input[type=email], .bg-field input[type=tel], .bg-field textarea, .bg-field select { width: 100%; padding: .65em .8em; border: 1px solid var(--bg-field-line); border-radius: 6px; background: var(--bg-field); font-size: 1rem; }
.bg-field input:focus, .bg-field textarea:focus, .bg-field select:focus { outline: 2px solid var(--bg-accent); outline-offset: 1px; border-color: var(--bg-accent); }
.bg-field input[aria-invalid=true] { border-color: var(--bg-error); }
.bg-checks label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 0 0 6px; cursor: pointer; }
.bg-checks input { margin-top: .3em; flex: none; }
.bg-checks--inline { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.bg-cat-intro { margin: 0 0 6px; }
.bg-star-demo { color: var(--bg-gold); }
.bg-top-summary { margin: 0 0 12px; min-height: 1.5em; font-weight: 600; color: var(--bg-accent); }
.bg-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px 28px; margin-bottom: 16px; }
.bg-cat-group h4 { font-size: .95rem; margin: 8px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--bg-line); }
.bg-cat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 3px 6px; margin: 0 -6px 2px; border-radius: 6px; }
.bg-cat-row.is-top { background: var(--bg-gold-tint); }
.bg-cat-label { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; cursor: pointer; margin: 0; }
.bg-cat-label input { margin-top: .3em; flex: none; }
.bg-star-toggle { position: relative; flex: none; cursor: pointer; width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; visibility: hidden; }
.bg-cat-row.is-checked .bg-star-toggle, .bg-cat-row:has(input[name="bg_cats[]"]:checked) .bg-star-toggle { visibility: visible; }
.bg-star-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bg-star-icon::before { content: "☆"; font-size: 1.25rem; line-height: 1; color: var(--bg-star-off); }
.bg-star-toggle:hover .bg-star-icon::before { color: var(--bg-gold); }
.bg-star-toggle input:checked + .bg-star-icon::before { content: "★"; color: var(--bg-gold); }
.bg-star-toggle input:focus-visible + .bg-star-icon { outline: 2px solid var(--bg-accent); outline-offset: 2px; border-radius: 4px; }
.bg-star-toggle input:disabled { cursor: not-allowed; }
.bg-star-toggle input:disabled + .bg-star-icon { opacity: .35; }
.bg-submit { display: grid; gap: 16px; justify-items: start; }
.bg-confirm { display: flex; gap: 8px; align-items: flex-start; }
.bg-confirm input { margin-top: .3em; }
.bg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
	.bg-form fieldset { grid-template-columns: 1fr; padding: 16px 14px 4px; }
	.bg-search .bg-btn { width: 100%; }
}


/* =========================================================================
   Dark mode is Astra Pro's color switcher (palette "Dark"): it swaps the
   --ast-global-color-* values itself and puts .astra-dark-mode-enable on <body>.
   These are the directory's own colors that aren't from that palette.
   ========================================================================= */
body.astra-dark-mode-enable {
	--bg-line: #3a3a3a;
	--bg-muted: #bdbdbd;
	--bg-gold: #e0a84a;
	--bg-on-accent: #fff;
	--bg-field: #1a1a1a;
	--bg-field-line: #555;
	--bg-gold-tint: #3a2e1c;
	--bg-gold-line: #5c4626;
	--bg-gold-ink: #f1c77a;
	--bg-error-tint: #3d1c1a;
	--bg-error: #f08a80;
	--bg-success-tint: #18301f;
	--bg-success: #7fd19a;
	--bg-cta: #141414;
	--bg-cta-ink: #e0e0e0;
	--bg-cta-head: #fff;
	--bg-star-off: #777;
	--bg-placeholder-bg: #2e2e2e;
	--bg-placeholder-ink: #474747;
	color-scheme: dark; /* browser-drawn controls (checkboxes, dropdowns) go dark too */
}

/* reCAPTCHA / Turnstile draw their own dark widget inside a frame whose page is "light".
   With the page in dark mode, the browser would back that frame with opaque white, which
   shows as white corners around the widget. Declaring the frame light keeps it see-through. */
.g-recaptcha iframe,
.cf-turnstile iframe {
	color-scheme: light;
}

/* Dropdowns (form + search bar): our own chevron, inset from the right edge.
   The browser's arrow sits tight against the border and can't be padded. */
.bg-field select,
html body .bg-search select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236f655e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}
body.astra-dark-mode-enable .bg-field select,
html body.astra-dark-mode-enable .bg-search select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bdbdbd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bg-field select::-ms-expand { display: none; }

/* Home Featured list: advertisers in the issue without a Buyer's Guide listing (name isn't a link). */
.bg-feature__names .bg-feature__unlisted .bg-feature__name { font-weight: 600; color: var(--bg-ink); }

/* Home Featured list on phones: bigger, separate tap targets.
   Name = full-height link on the left; each ad page = its own rounded button on the right. */
@media (max-width: 760px) {
	html body .entry-content .bg-feature__names { columns: 1; margin-left: 0; padding-left: 0; }
	/*.bg-feature__names .bg-sep { display: none; }*/
	.bg-feature__names li { display: flex; align-items: center; gap: 12px; padding: 0; min-height: 52px; }
	html body .entry-content .bg-feature__names a.bg-feature__name,
	.bg-feature__names span.bg-feature__name { flex: 1 1 auto; display: flex; align-items: center; min-height: 52px; padding: 6px 0; line-height: 1.3; }
	.bg-feature__names .bg-muted { flex: 0 0 auto; text-align: right; }
	/*.bg-feature__names .bg-feature__page { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; max-width: 55%; font-size: .78rem; }*/
	html body .entry-content .bg-feature__names a.bg-page-link {
		/*display: inline-flex; align-items: center; justify-content: center;*/
		/*min-width: 44px; min-height: 40px; padding: 0 12px;*/
		/*border: 1px solid var(--bg-gold-line); border-radius: 999px; background: var(--bg-gold-tint);
		font-size: .9rem; text-decoration: none;*/
	}
	html body .entry-content .bg-feature__names a.bg-page-link:active { filter: brightness(.95); }
}