/*
 * GDG Logo Bar — isolated, namespaced styles. Deliberately independent of
 * the active theme's CSS framework (no Bootstrap/Tailwind classes used or
 * assumed) so the component keeps working if the theme ever changes.
 *
 * The three inputs below are the ones the plugin's Settings screen can
 * override (see includes/renderer.php, which enqueues a small inline
 * override for these same three custom properties). --gdg-logo-bar-height
 * is intentionally a calc() of them, not a separate hardcoded value, so it
 * can never drift out of sync with the logo height actually being
 * rendered. theme-compat-gdgoenka.css (loaded alongside this file, only
 * under this project's own theme) reads --gdg-logo-bar-height to shift
 * that theme's fixed header down by exactly the bar's rendered height.
 */
:root {
	--gdg-logo-bar-logo-height: 40px;
	--gdg-logo-bar-gap: 32px;
	--gdg-logo-bar-bg: #ffffff;
	--gdg-logo-bar-padding-y: 12px;
	--gdg-logo-bar-height: calc(var(--gdg-logo-bar-logo-height) + (var(--gdg-logo-bar-padding-y) * 2));
}

.gdg-logo-bar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--gdg-logo-bar-height);
	padding: var(--gdg-logo-bar-padding-y) 20px;
	background-color: var(--gdg-logo-bar-bg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.gdg-logo-bar__list {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--gdg-logo-bar-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Enough room for logos to sit centered without a scrollbar on most
   tablet/desktop widths; below it they stay left-aligned and scrollable,
   which reads more naturally on a narrow, edge-to-edge strip. */
@media (min-width: 782px) {
	.gdg-logo-bar__list {
		justify-content: center;
	}
}

.gdg-logo-bar__item {
	flex: 0 0 auto;
	display: flex;
}

.gdg-logo-bar__link {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 4px;
	opacity: 0.85;
	transition: opacity 150ms ease-out;
}

a.gdg-logo-bar__link:hover,
a.gdg-logo-bar__link:focus-visible {
	opacity: 1;
}

a.gdg-logo-bar__link:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.gdg-logo-bar__logo {
	display: block;
	height: var(--gdg-logo-bar-logo-height);
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

@media (max-width: 480px) {
	.gdg-logo-bar__logo {
		max-width: 110px;
	}
}