/* ==========================================================================
   Secure Connection indicator — shared across all three themes.
   Themes provide --clf-secure-color (their own cool teal/blue-green accent);
   everything else pulls from each theme's existing bg/border/text tokens so
   this always reads as part of that theme's own system, not a bolted-on
   badge. Deliberately plain: no gold, no ribbon, no "certified" styling.
   ========================================================================== */

.clf-secure-badge {
	position: relative;
	display: inline-block;
}

.clf-secure-badge__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	background: var(--clf-bg-alt, #fff);
	color: var(--clf-text, #16181A);
	border: 1px solid var(--clf-border, rgba(0, 0, 0, 0.15));
	border-radius: var(--clf-radius-computed, 0.75rem);
	padding: 0.55em 0.9em;
	font: inherit;
	text-align: left;
	cursor: pointer;
	line-height: 1.25;
	/* Without a cap, this button has nothing forcing its label/sublabel
	   text to wrap, so at large text-size settings it just keeps growing
	   on one line — vw-based (not rem) so the cap holds regardless of how
	   large the accessibility text-size setting goes. */
	max-width: min(22rem, 82vw);
}
.clf-secure-badge__text { min-width: 0; }
.clf-secure-badge__label, .clf-secure-badge__sublabel { overflow-wrap: break-word; }
.clf-secure-badge__trigger:hover {
	border-color: var(--clf-secure-color, #0a8a8a);
}

.clf-secure-badge__icon {
	flex: none;
	display: inline-flex;
	color: var(--clf-secure-color, #0a8a8a);
}
.clf-secure-badge__icon svg { display: block; }

.clf-secure-badge__text {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}
.clf-secure-badge__label {
	font-size: 0.85rem;
	font-weight: 700;
}
.clf-secure-badge__sublabel {
	font-size: 0.74rem;
	color: var(--clf-text-muted, #666);
	font-weight: 400;
}

/* ---- Popover panel ---- */
.clf-secure-badge__panel {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 0;
	z-index: 200;
	width: min(80vw, 22rem);
	max-width: calc(100vw - 2rem);
	background: var(--clf-bg-alt, #fff);
	color: var(--clf-text, #16181A);
	border: 1px solid var(--clf-border, rgba(0, 0, 0, 0.18));
	border-radius: var(--clf-radius-computed, 0.9rem);
	box-shadow: var(--clf-shadow, 0 12px 32px rgba(0, 0, 0, 0.18));
	padding: 1.1rem 1.2rem;
	font-size: 0.9rem;
	line-height: 1.55;
	/* text-align is inherited — without this, a host page that centers
	   text on narrow screens (e.g. the Home page's Secure Connection
	   section) leaks that centering into this popover's own copy, even
	   though the popover is a self-contained panel that should always
	   read flush-left regardless of what's centered around its trigger. */
	text-align: left;
}
.clf-secure-badge__panel[hidden] { display: none; }

.clf-secure-badge__panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
}
.clf-secure-badge__panel-header h2 {
	font-size: 1rem;
	margin: 0;
	color: var(--clf-heading, var(--clf-text, #16181A));
}
.clf-secure-badge__close {
	flex: none;
	background: none;
	border: none;
	padding: 0.1em 0.35em;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--clf-text-muted, #666);
	cursor: pointer;
	border-radius: 0.3em;
}
.clf-secure-badge__close:hover { color: var(--clf-text, #16181A); }

/* Explicit colour here (not just inherited from the panel above) and bumped
   specificity via the attribute selector — themes that mark a section
   ".clf-section--inverse" (dark bg, light text) also carry a bare
   ".clf-section--inverse p" rule for their OWN content, which otherwise
   wins over inheritance and washes this panel's text out, since the panel
   itself stays light-background regardless of the section behind it. */
.clf-secure-badge__panel[data-clf-secure-panel] p {
	margin: 0 0 0.75rem;
	color: var(--clf-text, #16181A);
}
.clf-secure-badge__panel[data-clf-secure-panel] .clf-secure-badge__note {
	font-size: 0.8rem;
	color: var(--clf-text-muted, #666);
	margin-bottom: 0 !important;
}

/* Footer placement tends to be near the bottom of the viewport — open the
   panel upward (already default above) so it stays on screen. In the Home
   page security section there's room below, so let that context reopen it
   downward instead. */
.clf-security .clf-secure-badge__panel {
	bottom: auto;
	top: calc(100% + 0.6rem);
}

@media (max-width: 480px) {
	.clf-secure-badge__sublabel { display: none; }
}