/* Scoped to our own container instead of a bare `*` -- a bare universal
   selector applies to the ENTIRE page (nav, footer, everything else on
   whatever page the shortcode sits on), not just the contact cards,
   since this stylesheet loads on every front-end page. */
.bbv-wrap {
	--bbv-green: #255616;
	font-family: "Poppins", Sans-serif !important;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	list-style: none;
	box-sizing: border-box;
}
.bbv-wrap * {
	font-family: "Poppins", Sans-serif !important;
}
.bbv-wrap a {
    text-decoration: none !important;
}

.bbv-header {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}

.bbv-title {
	flex: 0 0 50%;
	max-width: 50%;
	font-family: "Poppins", Sans-serif;
	font-size: 24px !important;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	padding: 0;
	color: #1a1a1a !important;
	border: none;
	text-transform: none;
	letter-spacing: normal;
}

/* Filter form + print button, grouped together on the right,
   horizontally aligned with each other, within the right half. */
.bbv-header-right {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

.bbv-print-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--bbv-green);
	padding: 4px;
	line-height: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.bbv-print-btn:hover {
	opacity: 0.75;
}

.bbv-filter-form {
	display: inline-flex;
	align-items: center;
}

/* inline-flex + nowrap keeps "Filter:" and the dropdown on one line
   regardless of container width, rather than relying on ordinary
   inline text wrapping. */
.bbv-filter-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 16px;
	color: #1a1a1a;
	font-weight: 400;
}

.bbv-filter-select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	font-family: "Poppins", Sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--bbv-green);
	cursor: pointer;
	padding: 2px 4px;
}

.bbv-filter-select:focus {
	outline: 1px dotted var(--bbv-green);
}

.bbv-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	align-items: stretch;
}

/* Multi-Column: pure CSS, no JS. Fills the first column completely
   before starting the second (native CSS columns behavior) -- trades
   left-to-right reading order for zero wasted whitespace. column-gap
   only affects the gap BETWEEN columns, not between stacked cards
   within the same column, hence the explicit margin-bottom below. */
.bbv-cards-grid.bbv-layout-multicolumn {
	display: block;
	columns: 2;
	column-gap: 12px;
}

.bbv-cards-grid.bbv-layout-multicolumn .bbv-card {
	break-inside: avoid;
	margin-bottom: 24px;
}

/* Masonry: JS-driven (see initMasonryLayout() in bbv-frontend.js),
   which reparents each .bbv-card into whichever of these column
   wrapper divs currently has the least accumulated height. This rule
   just sets up the flex container the JS-created columns sit inside;
   .bbv-masonry-column itself is added dynamically, not present in the
   server-rendered HTML at all. */
.bbv-cards-grid.bbv-layout-masonry {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.bbv-masonry-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
}

.bbv-search-row {
	margin-bottom: 20px;
}

.bbv-search-input {
	width: 100%;
	max-width: 360px;
	padding: 10px 14px;
	border: 2px solid #ddd;
	border-radius: 8px;
	box-sizing: border-box;
}

.bbv-search-input:focus {
	outline: none;
	border-color: var(--bbv-green);
}

.bbv-cards-grid-wrap {
	position: relative;
}

.bbv-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.bbv-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #ddd;
	border-top-color: var(--bbv-green);
	border-radius: 50%;
	animation: bbv-spin 0.8s linear infinite;
}

@keyframes bbv-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 780px) {
	.bbv-header {
		flex-wrap: wrap;
		gap: 12px;
	}
	.bbv-title,
	.bbv-header-right {
		flex: 0 0 100%;
		max-width: 100%;
		justify-content: flex-start;
	}
	.bbv-cards-grid {
		grid-template-columns: 1fr;
	}
	.bbv-cards-grid.bbv-layout-multicolumn {
		columns: 1;
	}
    .bbv-cards-grid.bbv-layout-masonry {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: stretch;
    }
}

/* -------------------------------------------------------------
   Card border/radius logic:
   - .bbv-card is a plain grouping wrapper, no border of its own.
   - .bbv-card-main ("the parent element") owns the border by
     default on all 4 sides with full radius -- this is the state
     when there are no notes at all (button/panel aren't rendered).
   - .bbv-has-notes removes the bottom border/radius from
     .bbv-card-main, handing the bottom border+radius to whichever
     of the toggle button / notes panel is currently the visible
     bottom-most element, so the border always wraps seamlessly
     around the whole card regardless of expanded/collapsed state.
------------------------------------------------------------- */

.bbv-card {
	display: flex;
	flex-direction: column;
	break-inside: avoid;
	page-break-inside: avoid;
    width: 100%;
}

.bbv-card-main {
	border: 3px solid var(--bbv-green);
	border-radius: 14px;
	background: #fff;
	flex: 1 1 auto;
}

.bbv-has-notes .bbv-card-main {
	border-bottom: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	/* Don't stretch to fill row height here -- a has-notes card's
	   toggle button and (when open) notes panel need to sit flush
	   against card-main with no gap between them. Letting card-main
	   grow to match a taller sibling would leave dead blank space
	   between the visible contact info and the toggle button/panel,
	   making them look disconnected from each other rather than one
	   continuous card. Cards with no notes at all are unaffected --
	   they're a single unbroken box, so it's safe (and desired) for
	   them to stretch and match a taller neighbor's border. */
	flex-grow: 0;
}

.bbv-has-notes {
	align-self: start;
}

.bbv-has-notes .bbv-card-main {
	cursor: pointer;
}

.bbv-card-body {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 6px;
	padding: 20px;
}

/* Grid items default to min-width: auto, which refuses to shrink
   below the width of their content -- a single long, unbroken token
   (a URL or email address with no spaces to wrap on) was forcing this
   column wider than the grid track, which is what pushed the right
   column off-screen. min-width: 0 lets the column actually respect
   the grid's own sizing instead of being overridden by content. */
.bbv-card-left,
.bbv-card-right {
	min-width: 0;
}

/* Left column -- name, main contact, address, contacts, web.
   All links here are unstyled-by-default (no underline) and use the
   green accent, per spec; hover adds underline as the only visual
   affordance that they're clickable. */
.bbv-card-left a {
	color: var(--bbv-green);
	text-decoration: none;
}

.bbv-card-left a:hover {
	text-decoration: underline;
}

.bbv-card-name {
	font-size: 22px;
    line-height: 1em;
	font-weight: 700;
	color: #000;
	margin-bottom: 0;
}

.bbv-card-main-contact {
	font-size: 13px;
	line-height: 13px;
	font-weight: 500;
	color: #000;
	margin-bottom: 5px;
}

.bbv-card-address-block {
	margin-bottom: 10px;
    padding-left: 4px;
    border-left: 1px solid #CCC;
}

.bbv-card-address-label {
	font-size: 10px;
    line-height: 1em;
	font-weight: 500;
	color: #777;
	text-transform: uppercase;
	margin-bottom: 0;
	margin-top: 10px;
}

.bbv-card-address-link {
	display: block;
	font-size: 15px !important;
    line-height: 1em !important;
	font-weight: 500 !important;
}

.bbv-card-subheading {
	font-size: 13px;
    line-height: 1em;
	font-weight: 600;
	color: #333;
	margin-top: 16px;
}

.bbv-card-general-contact {
	font-size: 13px;
	font-weight: 400;
	color: #777;
	line-height: 1.5;
	margin-top: 6px;
	margin-bottom: 10px;
    padding-left: 4px;
    border-left: 1px solid #CCC;
}

.bbv-card-phone-row {
	margin-top: 4px;
    padding-left: 4px;
    border-left: 1px solid #CCC;
}
.bbv-card-phone-row,
.bbv-card-phone-link {
	font-size: 15px !important;
	font-weight: 600 !important;
	margin-top: 2px !important;
    line-height: 1em !important;
}

.bbv-card-email-block {
	margin-top: 6px;
    padding-left: 4px;
    border-left: 1px solid #CCC;
}

.bbv-card-email-label {
	font-size: 10px;
    line-height: 1em;
	font-weight: 500;
	color: #777;
	text-transform: uppercase;
	margin-bottom: 0;
	margin-top: 10px;
}

/* Truncates a long email with an ellipsis instead of forcing the
   column wider -- max-width:100% + the min-width:0 fix above on the
   grid item is what actually lets this shrink; without both, a long
   unbroken address ignores overflow:hidden entirely. Full address
   still available via the title attribute (hover tooltip) and is
   always the real mailto: target regardless of how it's displayed. */
.bbv-card-email-link {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1em !important;
    text-transform: lowercase;
}

.bbv-card-web-block {
	margin-top: 6px;
    padding-left: 4px;
    border-left: 1px solid #CCC;
}

.bbv-card-web-label {
	font-size: 10px;
    line-height: 1em;
	font-weight: 500;
	color: #777;
	text-transform: uppercase;
	margin-bottom: 0;
	margin-top: 10px;
}

/* Same truncation treatment as .bbv-card-email-link -- a long URL was
   forcing the grid column wider than intended before the min-width:0
   fix above; this keeps it visually contained regardless. Full URL
   still lives in the title attribute and is always the real href
   no matter how much of it is visibly shown. */
.bbv-card-web-link {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.3em !important;
}

/* Print-only credential block -- see render_web_slot()'s docblock for
   why plaintext username/password are acceptable here specifically
   (gated by the same reveal-credentials permission as the on-screen
   copy button, not a new exposure). */
.bbv-card-web-block-print {
	margin-top: 6px;
    padding-left: 4px;
    border-left: 1px solid #CCC;
}

.bbv-card-web-label-print {
	font-size: 10px;
    line-height: 1em;
	font-weight: 500;
	color: #777;
	text-transform: uppercase;
	margin-bottom: 0;
	margin-top: 10px;
}

.bbv-card-web-url-print,
.bbv-card-web-cred-print {
	font-size: 13px;
    line-height: 1em;
	color: #111;
	word-break: break-all;
	margin-bottom: 2px;
}

.bbv-card-cred-label-print {
	font-size: 10px;
    line-height: 1em;
	font-weight: 500;
	color: #777;
	text-transform: uppercase;
	margin-top: 6px;
	margin-bottom: 0;
}

.bbv-credential-btns {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

/* Small green/white buttons for Username and Password -- deliberately
   tiny to conserve space per spec, uppercase via text-transform rather
   than baked into the button text itself so the underlying label
   stays normal-case for screen readers and for the "Copied!"/"Error"
   states that temporarily replace it. */
.bbv-mini-btn {
	background: var(--bbv-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 3px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	padding: 3px 7px !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
}

.bbv-mini-btn:hover {
	opacity: 0.85 !important;
}

.bbv-mini-btn:disabled {
	opacity: 0.6 !important;
	cursor: default !important;
}

.bbv-card-bracket-label {
	font-size: 11px;
	font-weight: 400;
	color: #777;
	margin-left: 2px;
}

.bbv-card-right {
	text-align: right;
}

.bbv-card-right-block {
	margin-bottom: 14px;
}

.bbv-card-right-heading {
	font-size: 16px;
	font-weight: 700;
	color: #000;
    line-height: 1em;
}

.bbv-card-right-detail {
	font-size: 12px;
	font-weight: 400;
	color: #777;
	line-height: 1.2em;
}

/* Toggle button: bottom border+radius by default (collapsed state,
   sitting visually at the very bottom of the card). When expanded
   (.bbv-card.is-open), the panel below takes over the bottom
   border+radius instead, so the button becomes a plain middle strip. */
.bbv-notes-toggle {
	width: 100% !important;
	background: var(--bbv-green) !important;
	color: #fff !important;
	border: 3px solid var(--bbv-green) !important;
	border-top: none !important;
	font-family: "Poppins", Sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
	font-size: 16px !important;
	text-transform: uppercase !important;
	padding: 10px 10px 7px !important;
	cursor: pointer !important;
	border-radius: 0 0 14px 14px !important;
}

.bbv-notes-toggle:hover {
	opacity: 0.9 !important;
}

.bbv-card.is-open .bbv-notes-toggle {
	border-bottom: none !important;
	border-radius: 0 !important;
}

/* Notes panel slides open/closed via a JS-driven max-height transition
   (see bbv-frontend.js) rather than an instant show/hide, since the
   `hidden` attribute can't be animated. The border/radius only apply
   once open -- while collapsed, the toggle button above already owns
   the card's visual bottom edge, so an always-on border here would
   show as a thin colored sliver even when "closed". */
.bbv-notes-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	background: #f6f7f6;
	border: 3px solid transparent;
	border-top: none;
	border-radius: 0 0 14px 14px;
}

.bbv-card.is-open .bbv-notes-panel {
	border-color: var(--bbv-green);
}

.bbv-notes-panel-inner {
	padding: 16px 24px;
}

.bbv-note-entry {
	padding: 8px 0;
	border-bottom: 1px solid #e5e5e5;
}

.bbv-note-entry:last-child {
	border-bottom: none;
}

.bbv-note-meta {
	font-size: 12px;
	color: #777;
	margin-bottom: 2px;
}

.bbv-note-content {
	font-size: 14px;
	color: #1a1a1a;
	font-weight: 500;
}

.bbv-access-denied,
.bbv-no-results {
	font-size: 15px;
	color: #555;
	font-family: "Poppins", Sans-serif;
}

/* Login gate / access-denied box -- shown in place of the card grid
   when the visitor is logged out or lacks ham_view_records. */
.bbv-login-gate {
	max-width: 420px;
	margin: 40px auto;
	padding: 32px;
	border: 3px solid var(--bbv-green);
	border-radius: 14px;
	background: #fff;
	text-align: center;
}

.bbv-login-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #1a1a1a;
}

.bbv-login-sub {
	font-size: 14px;
	color: #555;
	margin: 0 0 16px;
	line-height: 1.5;
}

#bbv-loginform {
	text-align: left;
}

#bbv-loginform p {
	margin-bottom: 14px;
}

#bbv-loginform label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 4px;
	color: #1a1a1a;
}

#bbv-loginform input[type="text"],
#bbv-loginform input[type="password"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}

#bbv-loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
}

#bbv-loginform .login-remember input {
	width: auto;
}

#bbv-loginform .login-submit {
	text-align: center;
	margin-top: 8px;
}

#bbv-loginform .button.button-primary,
.bbv-logout-btn {
	display: inline-block;
	background: var(--bbv-green);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 24px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

#bbv-loginform .button.button-primary:hover,
.bbv-logout-btn:hover {
	opacity: 0.9;
}

/* Print: hide interactive chrome, always show notes fully expanded
   (override the max-height collapse from screen styles), avoid card
   splits. */
@media print {
	.bbv-print-btn,
	.bbv-filter-form {
		display: none;
	}
	.bbv-notes-toggle {
		display: none;
	}
	.bbv-has-notes .bbv-card-main {
		border-bottom: none;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.bbv-notes-panel {
		max-height: none;
		overflow: visible;
		border: 3px solid var(--bbv-green);
		border-top: none;
		border-radius: 0 0 14px 14px;
	}
	.bbv-card {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.bbv-cards-grid:not(.bbv-layout-multicolumn):not(.bbv-layout-masonry) {
		grid-template-columns: repeat(2, 1fr);
	}
}