/* ==========================================================================
   BC Muslims — design tokens (pulled directly from the Lovable prototype)
   ========================================================================== */

:root {
	--bg: #fdfaf4;
	--fg: #071f20;
	--primary: #004e4b;
	--primary-fg: #fbf8f1;
	--secondary: #e6f3e8;
	--secondary-fg: #00312e;
	--muted: #f3eee3;
	--muted-fg: #425b5c;
	--accent: #DDA15E;
	--accent-fg: #4c2905;
	--border: #dce0d5;
	--radius: .75rem;
	--radius-lg: 1rem;
}

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: 'Figtree', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.header-logo__name,
.hp-listing__title,
.hp-listing-category__name,
.hp-page__title,
.hp-section__title,
.bcm-font-display {
	font-family: 'DM Serif Text', serif;
	font-weight: 400;
	letter-spacing: -0.01em;
}

a { color: var(--primary); }
a:hover { color: var(--accent-fg); }

/* Plain-text page content (About Us, etc.) — underline inline links so
   they read as clickable, since the site's buttons/nav links otherwise
   rely on color alone. */
.page__text a, .bcm-listing-about a { text-decoration: underline; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	background-color: var(--primary);
	background-image: url('header-bg.jpg');
	background-repeat: repeat;
	background-size: 220px 220px;
	border-bottom: 1px solid var(--primary);
	color: var(--primary-fg);
}
.site-header a { color: var(--primary-fg); }

.custom-logo-link { display: inline-flex; align-items: center; gap: .6rem; }
.header-logo img.custom-logo { height: 40px; width: auto; max-width: none; }
/* line-height: 1 keeps the two-line name ("British Columbia" / "Muslims")
   within the 40px logo image's height so the header doesn't grow taller. */
.header-logo__name { color: var(--primary-fg); font-size: 1.25rem; line-height: 1; }
/* Parent theme has a higher-specificity `.header-logo:hover .header-logo__name`
   rule that recolors the name on hover — override it so it stays readable. */
.header-logo:hover .header-logo__name { color: var(--primary-fg) !important; }
.header-logo__description { color: rgba(251, 248, 241, .75); font-family: 'Figtree', sans-serif; font-size: .75rem; }

/* Parent theme's default plain-page title (e.g. "Eid Prayer Locations")
   renders in the default dark body color, which is unreadable against the
   dark teal .header-hero background it sits in. */
.header-hero .page__title { color: var(--primary-fg); }

.header-navbar__menu ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.header-navbar__menu ul li a {
	font-family: 'Figtree', sans-serif;
	font-weight: 500;
	font-size: .9rem;
	color: var(--primary-fg);
	border-radius: .5rem;
	padding: .5rem .65rem;
	display: inline-block;
}
.header-navbar__menu ul li a:hover { background-color: rgba(251, 248, 241, .15); }
.header-navbar__menu ul li.current-menu-item > a {
	background-color: var(--accent);
	color: #000;
}
.header-navbar__burger > a { color: var(--primary-fg); }

/* HivePress injects the Sign In / account link into the header menu itself
   (not a real menu item we can delete) via its Template component — hide
   it here instead of unhooking a private plugin method. */
.menu-item--user-login, .menu-item--user-account { display: none !important; }

/* ==========================================================================
   Prayer-times bar
   ========================================================================== */

/* On non-homepage pages, the parent theme wraps the hero filter output in
   its own .header-hero (a parallax/banner component with its own padding,
   background and likely overflow:hidden to contain a background image) —
   that clips or hides our full-bleed bar entirely on those pages even
   though it's present in the DOM. Neutralize that wrapper specifically
   when it contains our bar, so the bar's own full-bleed trick can work. */
.header-hero:has(.bcm-prayer-bar) {
	padding: 0;
	overflow: visible;
	background: none;
}
.header-hero:has(.bcm-prayer-bar) .header-hero__content,
.header-hero:has(.bcm-prayer-bar) .container {
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
}

/* The parent theme wraps the hero filter output in its own centered,
   max-width .container — break the bar out of that to span the full
   viewport while keeping .bcm-prayer-bar__inner's content centered. */
.bcm-prayer-bar {
	background-color: #DDA15E;
	color: #000;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.bcm-prayer-bar__inner {
	max-width: 1152px; margin: 0 auto; padding: .5rem 1.5rem;
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; font-size: .85rem;
}
.bcm-prayer-bar__today { color: #000; font-weight: 600; }
.bcm-prayer-bar__item { display: inline-flex; gap: .35rem; align-items: baseline; }
.bcm-prayer-bar__label { font-weight: 700; }
.bcm-prayer-bar__time { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Hero
   ========================================================================== */

.bcm-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--secondary);
}

.bcm-hero__pattern {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 60%;
	pointer-events: none;
}

.bcm-hero__pattern img {
	width: 100%; height: 100%; object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent, black 70%);
	mask-image: linear-gradient(to right, transparent, black 70%);
	opacity: .12;
	mix-blend-mode: multiply;
}

/* Footer pattern — same tiled header-bg.jpg at the same tile size as the
   top nav, with the same left-to-right fade mask as the other hero
   patterns above (a div + CSS background instead of an <img>, since an
   <img> can't tile at a fixed size the way a CSS background can). */
/* On a dark (primary teal) background the pattern needs to lighten
   rather than darken, or it disappears — "screen" blend instead of
   "multiply", slightly higher opacity. */
.bcm-hero__pattern--dark img {
	opacity: .176;
	mix-blend-mode: screen;
}

.bcm-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1152px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem 3.5rem;
}

.bcm-hero__eyebrow {
	font-family: 'DM Serif Text', serif;
	font-size: 1.1rem;
	color: var(--primary);
	margin: 0 0 .5rem;
}

.bcm-hero__title {
	font-family: 'DM Serif Text', serif;
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.15;
	color: var(--fg);
	max-width: 75%;
	margin: 0 0 2rem;
}
/* 75% of a narrow phone screen wraps the headline too tightly — let it
   use the full width below the point where the search card also stacks. */
@media (max-width: 640px) { .bcm-hero__title { max-width: 100%; } }

.bcm-search {
	display: grid;
	gap: .5rem;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: .75rem;
	box-shadow: 0 12px 30px -14px rgba(0, 78, 75, .35);
	max-width: 56rem;
}

@media (min-width: 640px) {
	.bcm-search { grid-template-columns: 2fr 1fr 1fr auto; }
}

.bcm-search input[type="text"],
.bcm-search input[type="search"],
.bcm-search select {
	height: 3rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--bg);
	padding: 0 1rem;
	font-size: 1rem;
	font-family: 'Figtree', sans-serif;
	width: 100%;
}

.bcm-search button {
	height: 3rem;
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--primary-fg);
	border: none;
	padding: 0 1.5rem;
	font-weight: 600;
	font-family: 'Figtree', sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	cursor: pointer;
}

.bcm-search button:hover { background: #00615c; }

/* ==========================================================================
   Sections
   ========================================================================== */

.bcm-section { max-width: 1152px; margin: 0 auto; padding: 3.5rem 1.5rem 0; }
.bcm-section__title { font-size: 1.85rem; margin: 0 0 1.5rem; }

/* ==========================================================================
   Category tiles
   ========================================================================== */

.bcm-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
}

@media (min-width: 768px) { .bcm-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .bcm-tiles { grid-template-columns: repeat(5, 1fr); } }

.bcm-tile {
	position: relative;
	display: flex;
	min-height: 13rem;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	text-decoration: none;
	color: inherit;
}

.bcm-tile img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .3s;
	filter: brightness(.82);
	z-index: 0;
}

.bcm-tile:hover img { transform: scale(1.05); }

/* Darkens the whole photo (not just the text strip) so the image never
   fights with the label — tuned for busy/light images like the butcher
   diagram and the blue-and-white pattern tile. */
.bcm-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(7,31,32,.88) 0%, rgba(7,31,32,.45) 45%, rgba(7,31,32,.15) 100%);
	pointer-events: none;
}

.bcm-tile__overlay {
	position: relative;
	z-index: 2;
	margin-top: auto;
	width: 100%;
	padding: .9rem 1rem;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.bcm-tile__name { display: block; font-family: 'DM Serif Text', serif; font-size: 1.1rem; line-height: 1.2; }
.bcm-tile__count { display: block; margin-top: .25rem; font-size: .85rem; opacity: .9; }

/* ==========================================================================
   Listing cards
   ========================================================================== */

.bcm-cards {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) { .bcm-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bcm-cards { grid-template-columns: repeat(3, 1fr); } }

.bcm-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: #fff;
	padding: 1.25rem;
	transition: box-shadow .2s;
}

.bcm-card:hover { box-shadow: 0 12px 30px -14px rgba(0, 78, 75, .35); }

.bcm-card__badges { display: flex; flex-wrap: wrap; gap: .35rem; }

.bcm-card__badge {
	display: inline-block;
	width: fit-content;
	border-radius: .4rem;
	background: rgba(242, 175, 72, .25);
	color: var(--accent-fg);
	padding: .15rem .55rem;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.bcm-sect-badge {
	display: inline-block;
	width: fit-content;
	border-radius: .4rem;
	padding: .15rem .55rem;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.bcm-sect-badge--sunni { background: var(--secondary); color: var(--secondary-fg); }
.bcm-sect-badge--shia { background: #efe3f7; color: #4a2a6b; }

.bcm-listing-hero__sect--sunni { background: var(--secondary); color: var(--secondary-fg); border-color: transparent; }
.bcm-listing-hero__sect--shia { background: #efe3f7; color: #4a2a6b; border-color: transparent; }

.bcm-card__title {
	margin: .6rem 0 0;
	font-size: 1.15rem;
	line-height: 1.25;
}

.bcm-card__title a { color: var(--fg); }
.bcm-card__title a:hover { color: var(--primary); }

.bcm-card__subtitle { margin: .2rem 0 0; color: var(--muted-fg); font-size: .88rem; }

.bcm-card__location {
	margin: .6rem 0 0;
	display: flex;
	gap: .4rem;
	align-items: flex-start;
	font-size: .88rem;
}

.bcm-card__location svg { flex-shrink: 0; margin-top: .15rem; color: var(--primary); }

.bcm-card__tags { margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.bcm-card__tag {
	border-radius: 999px;
	background: var(--secondary);
	color: var(--secondary-fg);
	padding: .15rem .65rem;
	font-size: .75rem;
}

.bcm-card__more {
	margin-top: auto;
	padding-top: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--primary);
}

/* ==========================================================================
   About + prayer-times widget row
   ========================================================================== */

.bcm-about-row {
	max-width: 1152px;
	margin: 3.5rem auto 0;
	padding: 0 1.5rem 3.5rem;
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 1024px) { .bcm-about-row { grid-template-columns: 1fr 1.4fr; } }

.bcm-about-card {
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: #fff;
	padding: 1.5rem;
}

.bcm-about-card h2 { font-size: 1.5rem; margin: 0; }
.bcm-about-card p { color: var(--muted-fg); margin: .75rem 0 0; }
.bcm-about-card a { font-weight: 600; margin-top: 1rem; display: inline-block; }

.bcm-prayer-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--primary);
	color: var(--primary-fg);
	padding: 1.5rem;
}

.bcm-prayer-card > h2, .bcm-prayer-card > .bcm-prayer-grid { position: relative; z-index: 1; }

.bcm-prayer-card h2 { font-size: 1.5rem; margin: 0 0 1rem; color: var(--primary-fg) !important; }

.bcm-prayer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	list-style: none;
	margin: 0; padding: 0;
}

@media (min-width: 640px) { .bcm-prayer-grid { grid-template-columns: repeat(6, 1fr); } }

.bcm-prayer-grid li {
	border-radius: var(--radius);
	background: rgba(251, 248, 241, .1);
	padding: .7rem;
	text-align: center;
}

.bcm-prayer-grid .bcm-prayer-grid__label { display: block; font-size: .82rem; font-weight: 700; color: #fff; }
.bcm-prayer-grid .bcm-prayer-grid__time { display: block; font-family: 'DM Serif Text', serif; font-size: 1.3rem; }

/* ==========================================================================
   Category / archive pages
   ========================================================================== */

/* We render our own hero banner on these templates — hide the parent
   theme's default one instead of stacking both (it re-adds itself after
   our hook runs, so a PHP-side fix isn't reliable; CSS is). The parent
   theme also wraps our .bcm-prayer-bar in this same .header-hero element
   (via the hivetheme/v1/areas/site_hero filter), so :not(:has(...)) is
   required here — without it, this rule was silently hiding the prayer
   bar on every category/archive/single-listing page too. */
body.tax-hp_listing_category > .site-container > .header-hero:not(:has(.bcm-prayer-bar)),
body.post-type-archive-hp_listing > .site-container > .header-hero:not(:has(.bcm-prayer-bar)),
body.single-hp_listing > .site-container > .header-hero:not(:has(.bcm-prayer-bar)),
.tax-hp_listing_category .header-hero:not(:has(.bcm-prayer-bar)),
.post-type-archive-hp_listing .header-hero:not(:has(.bcm-prayer-bar)),
.single-hp_listing .header-hero:not(:has(.bcm-prayer-bar)) {
	display: none !important;
}

/* The prayer bar and HivePress's own native category/listing title+count
   block both end up inside the SAME .header-hero element (confirmed on
   the live page — our prayer bar sits in .header-hero__content > .container,
   HivePress's redundant title/count sits in a sibling .row right after
   it). The rule above now keeps the whole wrapper visible because it
   contains our bar, so hide just HivePress's own block specifically.
   Targeting it directly by its own class (same body-class-scoped
   !important pattern as the rule above, which is confirmed working)
   instead of :has() + .row, in case that was a specificity/support
   issue. */
.tax-hp_listing_category .hp-listing-category__header,
.post-type-archive-hp_listing .hp-listing-category__header,
.single-hp_listing .hp-listing__header {
	display: none !important;
}

.bcm-archive-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--secondary);
}

.bcm-archive-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1152px;
	margin: 0 auto;
	padding: 2.75rem 1.5rem;
}

.bcm-archive-hero__eyebrow {
	margin: 0 0 .5rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--primary);
}

.bcm-archive-hero__title {
	font-family: 'DM Serif Text', serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 .5rem;
	color: var(--fg);
}

.bcm-archive-hero__desc { margin: 0 0 .5rem; color: var(--muted-fg); max-width: 40rem; }
.bcm-archive-hero__count { margin: 0; font-weight: 600; }

.bcm-archive-body {
	max-width: 1152px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) { .bcm-archive-body { grid-template-columns: 16rem 1fr; } }

.bcm-archive-filters form { display: flex; flex-direction: column; gap: .4rem; }

.bcm-filter-label { font-weight: 600; font-size: .85rem; margin-top: 1rem; }
.bcm-archive-filters select {
	height: 2.75rem; border-radius: var(--radius); border: 1px solid var(--border);
	background: #fff; padding: 0 .75rem; font-family: 'Figtree', sans-serif;
}
.bcm-filter-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.bcm-filter-submit {
	margin-top: 1.25rem; height: 2.75rem; border-radius: var(--radius); border: none;
	background: #DDA15E !important; color: #004e4b; font-weight: 600; cursor: pointer;
}
.bcm-filter-submit:hover { background: #c98f4e !important; }

.bcm-view-toggle { display: inline-flex; gap: .3rem; background: var(--muted); padding: .3rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.bcm-view-toggle__btn {
	padding: .45rem 1rem; border-radius: calc(var(--radius) - .3rem); font-weight: 600; font-size: .9rem;
	color: var(--fg); text-decoration: none;
}
.bcm-view-toggle__btn.is-active { background: var(--primary); color: var(--primary-fg); }

.bcm-archive-content--split { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .bcm-archive-content--split { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.bcm-archive-content--split .bcm-cards { grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 1099px) { .bcm-archive-content--split .bcm-cards { grid-template-columns: repeat(2, 1fr); } }

.bcm-archive-map {
	width: 100%;
	height: 28rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--muted);
}

.bcm-archive-content--split .bcm-archive-map { position: sticky; top: 1rem; height: 36rem; }
.bcm-archive-content--map .bcm-archive-map { height: 36rem; }

.bcm-pagination { margin-top: 2.5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.bcm-pagination span, .bcm-pagination a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border-radius: 999px;
	font-weight: 600; text-decoration: none; color: var(--fg);
}
.bcm-pagination a:hover { background: var(--secondary); }
.bcm-pagination .current { background: var(--primary); color: var(--primary-fg); }

/* ==========================================================================
   Single listing page
   ========================================================================== */

.bcm-listing-hero { background-color: var(--secondary); }
.bcm-listing-hero__inner { max-width: 1152px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.bcm-listing-hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.bcm-listing-hero__sect {
	border-radius: 999px; border: 1px solid var(--border); background: #fff;
	padding: .15rem .65rem; font-size: .72rem;
	font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.bcm-listing-hero__title { font-family: 'DM Serif Text', serif; font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 1.25rem; }

.bcm-listing-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.bcm-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	height: 2.75rem; padding: 0 1.1rem; border-radius: var(--radius);
	background: #fff; border: 1px solid var(--border); color: var(--fg);
	font-weight: 600; text-decoration: none; cursor: pointer; font-family: 'Figtree', sans-serif; font-size: .95rem;
}
.bcm-btn--primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.bcm-btn--primary:hover { background: #00615c; color: var(--primary-fg); }
.bcm-btn:hover { background: var(--muted); color: var(--fg); }

.bcm-share { position: relative; display: inline-block; }
.bcm-share summary.bcm-btn { list-style: none; }
.bcm-share summary.bcm-btn::-webkit-details-marker { display: none; }
.bcm-share__chevron { font-size: .7em; transition: transform .15s ease; }
.bcm-share[open] .bcm-share__chevron { transform: rotate(180deg); }
.bcm-share__menu {
	position: absolute; top: calc(100% + .4rem); left: 0; z-index: 20;
	display: flex; flex-direction: column; min-width: 10rem;
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: 0 12px 30px -14px rgba(0, 78, 75, .35); overflow: hidden;
}
.bcm-share__menu a, .bcm-share__copy {
	display: flex; align-items: center; gap: .6rem;
	padding: .65rem 1rem; color: var(--fg); text-decoration: none;
	font-family: 'Figtree', sans-serif; font-size: .9rem; font-weight: 600;
	white-space: nowrap;
}
.bcm-share__menu a i, .bcm-share__copy i { width: 1rem; text-align: center; color: var(--muted-fg); }
.bcm-share__menu a:hover, .bcm-share__copy:hover { background: var(--muted); }
.bcm-share__copy {
	border: none; border-top: 1px solid var(--border); background: none;
	cursor: pointer; text-align: left; width: 100%;
}

.bcm-listing-body {
	max-width: 1152px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem;
	display: grid; gap: 2.5rem; grid-template-columns: 1fr;
}
@media (min-width: 960px) { .bcm-listing-body { grid-template-columns: 1fr 20rem; } }

.bcm-listing-section-title { font-family: 'DM Serif Text', serif; font-size: 1.4rem; margin: 2rem 0 1rem; }
.bcm-listing-section-title:first-child { margin-top: 0; }
.bcm-listing-address { display: flex; align-items: center; gap: .4rem; color: var(--muted-fg); }
.bcm-listing-address svg { color: var(--primary); }

.bcm-facility-tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.bcm-facility-tag {
	display: inline-flex; align-items: center; gap: .4rem;
	border-radius: 999px; background: var(--secondary); color: var(--secondary-fg);
	padding: .35rem .8rem; font-size: .88rem;
}
.bcm-facility-tag i { color: var(--primary); }

.bcm-listing-about { color: var(--fg); line-height: 1.7; }

.bcm-sidebar-card {
	border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff;
	padding: 1.25rem; margin-bottom: 1rem;
}
.bcm-sidebar-card h3 { margin: 0 0 .75rem; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; }
.bcm-sidebar-card h3 i { color: var(--primary); }

.bcm-hours-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; }
.bcm-hours-list dt { font-weight: 600; }
.bcm-hours-list dd { margin: 0; color: var(--muted-fg); text-align: right; }

.bcm-sidebar-note {
	border-radius: var(--radius); background: var(--secondary); color: var(--secondary-fg);
	padding: .75rem 1rem; font-size: .88rem; margin-bottom: 1rem;
}

.bcm-sidebar-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }

/* ==========================================================================
   Eid Prayer Locations page
   ========================================================================== */

.bcm-eid-notice {
	border-radius: var(--radius); background: rgba(242, 175, 72, .18); color: var(--accent-fg);
	padding: .85rem 1.1rem; font-size: .9rem; margin-bottom: 2rem;
}
.bcm-eid-day { font-family: 'DM Serif Text', serif; font-size: 1.3rem; margin: 2rem 0 .75rem; }
.bcm-eid-day:first-of-type { margin-top: 0; }
.bcm-eid-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bcm-eid-row {
	display: grid; grid-template-columns: 1fr 1fr 2fr 2fr 2fr; gap: .5rem;
	padding: .75rem 1rem; font-size: .92rem; align-items: center;
}
.bcm-eid-row--head { background: var(--primary); color: var(--primary-fg); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.bcm-eid-row--alt { background: var(--muted); }
.bcm-eid-address { color: var(--muted-fg); font-weight: 400; }

/* Below 640px, a 5-up grid reads as noise — stack each entry as a small
   labeled card instead (data-label attrs on each cell supply the label). */
@media (max-width: 640px) {
	.bcm-eid-row--head { display: none; }
	.bcm-eid-row { grid-template-columns: 1fr; gap: .4rem; padding: 1rem; }
	.bcm-eid-row [data-label]::before {
		content: attr(data-label) ": "; font-weight: 600; color: var(--primary);
	}
}

/* ==========================================================================
   Moon sighting results (homepage, toggled via Customizer)
   ========================================================================== */

.bcm-moon-sighting { max-width: 1152px; margin: 0 auto; padding: 3.5rem 1.5rem; }
.bcm-moon-sighting h2 { font-size: 1.85rem; margin: 0 0 .5rem; }
.bcm-moon-intro { color: var(--muted-fg); margin: 0 0 1.5rem; }
.bcm-moon-table {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--border); border: 1px solid var(--border);
	border-radius: var(--radius); overflow: hidden;
}
.bcm-moon-col { background: #fff; padding: 1.25rem; }
.bcm-moon-col h3 {
	font-family: 'Figtree', sans-serif; font-weight: 700; font-size: .8rem;
	text-transform: uppercase; letter-spacing: .03em; color: var(--primary);
	margin: 0 0 .85rem; padding-bottom: .6rem; border-bottom: 2px solid var(--accent);
}
.bcm-moon-org-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.bcm-moon-org-list a { font-weight: 600; }
.bcm-moon-empty { color: var(--muted-fg); font-size: .9rem; }
@media (max-width: 720px) {
	.bcm-moon-table { grid-template-columns: 1fr; }
	.bcm-moon-col { border-bottom: 1px solid var(--border); }
	.bcm-moon-col:last-child { border-bottom: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.bcm-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--primary);
	background-image: url('header-bg.jpg');
	background-repeat: repeat;
	background-size: 220px 220px;
	color: var(--primary-fg);
	margin-top: 3rem;
	font-weight: 600;
}

.bcm-footer__inner, .bcm-footer__copyright { position: relative; z-index: 1; }

.bcm-footer__inner {
	max-width: 1152px; margin: 0 auto; padding: 3rem 1.5rem;
	display: grid; gap: 2rem;
}

@media (min-width: 640px) { .bcm-footer__inner { grid-template-columns: repeat(3, 1fr); } }

.bcm-footer__logo { font-family: 'DM Serif Text', serif; font-size: 1.5rem; margin: 0; }
.bcm-footer__tagline { margin: .5rem 0 0; font-size: .88rem; opacity: .8; }

.bcm-footer__nav { display: flex; flex-direction: column; gap: .5rem; }
.bcm-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.header-navbar__menu ul li.current-menu-item::before { display: none; }
.bcm-footer__nav a, .bcm-footer__social a { color: var(--primary-fg); opacity: .9; text-decoration: none; }
.bcm-footer__nav a:hover, .bcm-footer__social a:hover { opacity: 1; color: var(--accent); }

.bcm-footer__social { display: flex; flex-direction: row; gap: .75rem; }
.bcm-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: transparent; border: 1.5px solid var(--primary-fg); font-size: 1rem;
}
.bcm-icon-x { width: .95em; height: .95em; }

.bcm-footer__copyright {
	max-width: 1152px; margin: 0 auto;
	border-top: 1px solid rgba(251, 248, 241, .15);
	padding: 1rem 1.5rem;
	text-align: center;
	font-size: .85rem;
	opacity: .7;
}

/* ==========================================================================
   Misc resets so HivePress/parent styles don't leak through on our markup
   ========================================================================== */

.bcm-reset, .bcm-reset * { box-sizing: border-box; }