/*
 * Directory Index — typography & flat/ruled visual system for bali.business
 * Added 2026-08-20. Layered on top of Listeo's compiled CSS via wp_enqueue_style
 * with the parent stylesheet as a dependency, so this loads after and can override.
 * Scoped to real Listeo/bb-* classes confirmed on the live DOM — no template changes.
 */

:root {
	--bbdi-paper: #faf6ec;
	--bbdi-ink: #1c1a15;
	--bbdi-ink-muted: #5b5644;
	--bbdi-accent: #b23a2e;
	--bbdi-rule: #c9c0a4;
	--bbdi-rule-strong: #1c1a15;
}

/* ---- typography: one grotesk family site-wide, monospace for data-like bits ---- */

body,
input,
select,
textarea,
button {
	font-family: 'Libre Franklin', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.listing-title-nl,
.highlighted-categories-headline,
.section-title {
	font-family: 'Libre Franklin', Arial, sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.listing-category-tag-nl,
.listing-rating-nl,
.listing-location-nl,
.bb-directions-button,
.price,
.listing-price {
	font-family: 'Courier Prime', ui-monospace, monospace;
}

/* ---- nav: rule instead of shadow, uppercase small-caps links ---- */

header.sticky-header {
	box-shadow: none !important;
	border-bottom: 1px solid var(--bbdi-rule-strong);
}

header .menu > .menu-item > a {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 13px;
	font-weight: 500;
}

/* CTA button — flat, bordered, typewriter label (replaces the orange gradient pill).
   Solid paper fill, not transparent: this sits in the sticky nav over a photo hero,
   and red-on-photo was unreadable when tested. */
.menu-item-cta a.bb-cta-flat {
	background: var(--bbdi-paper) !important;
	border: 1px solid var(--bbdi-accent) !important;
	color: var(--bbdi-accent) !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	font-family: 'Courier Prime', monospace !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.03em !important;
	padding: 8px 14px !important;
	line-height: normal !important;
}

.menu-item-cta a.bb-cta-flat:hover {
	background: var(--bbdi-accent) !important;
	color: var(--bbdi-paper) !important;
}

/* ---- buttons generally: sharp corners, no shadow ---- */

.button,
a.button,
.bb-directions-button {
	border-radius: 2px !important;
	box-shadow: none !important;
}

.bb-directions-button {
	border: 1px solid var(--bbdi-rule-strong);
	background: transparent;
	color: var(--bbdi-ink);
}

/* ---- search form: rectangular, ruled fields instead of rounded pill ---- */

.main-search-form,
.main-search-form .main-search-input {
	border-radius: 2px !important;
	box-shadow: none !important;
}

.main-search-form button,
.main-search-form .button,
.main-search-form .main-search-input button,
.main-search-form .main-search-input .button,
.main-search-form button[type="submit"],
.main-search-form .search_submit,
#main-search-btn {
	border-radius: 2px !important;
	background: var(--bbdi-accent) !important;
	background-color: var(--bbdi-accent) !important;
	box-shadow: none !important;
}

/* ---- category cards (section.bb-cat-section, "Explore Local Businesses in Bali") ---- */

.bb-cat-card {
	border-radius: 2px !important;
	box-shadow: none !important;
	border: 1px solid var(--bbdi-rule);
}

.bb-cat-desc {
	font-family: 'Libre Franklin', Arial, sans-serif;
}

/* "N listings" pill: was a rounded Bootstrap-blue pill, now flat/bordered like
   .listing-category-tag-nl for consistency. */
.bb-cat-count {
	font-family: 'Courier Prime', ui-monospace, monospace !important;
	background: transparent !important;
	color: var(--bbdi-accent) !important;
	border: 1px solid var(--bbdi-accent);
	border-radius: 2px !important;
}

/* Icon glyph bug: markup is <i class="bb-cat-icon sl-icon-camera"> but is missing
   the base .sl class Simple Line Icons needs to set font-family — so no glyph ever
   rendered (empty box / literal escape shown instead). Setting font-family directly
   here fixes it without touching whatever template emits this markup. Recolored to
   the accent to match the rest of the system instead of the old Bootstrap blue. */
.bb-cat-icon {
	font-family: 'simple-line-icons' !important;
	color: var(--bbdi-accent) !important;
}

/* ---- listing cards: flatten, rule instead of shadow ---- */

.listing-card-nl,
.listing-card-container-nl {
	border-radius: 2px !important;
	box-shadow: none !important;
	border: 1px solid var(--bbdi-rule);
}

.listing-title-nl {
	font-weight: 700;
}

.listing-category-tag-nl {
	background: transparent !important;
	border: 1px solid var(--bbdi-accent);
	color: var(--bbdi-accent) !important;
	border-radius: 2px !important;
	box-shadow: none !important;
}

/* ---- footer: rule instead of shadow ---- */

.footer-widget,
footer {
	box-shadow: none !important;
}