/**
 * Social Share Images Component Styles
 *
 * Bundles the Gabarito font used on the generated canvases and the few
 * component rules the theme's Tailwind utilities don't cover. Enqueued only
 * on supported single pages.
 *
 * @package metalwomen
 */

/* Gabarito — bundled locally (SIL Open Font License). */
@font-face {
	font-family: 'Gabarito';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gabarito-400-latin.woff2') format('woff2'),
		url('../fonts/gabarito-400-latin-ext.woff2') format('woff2');
}

@font-face {
	font-family: 'Gabarito';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/gabarito-700-latin.woff2') format('woff2'),
		url('../fonts/gabarito-700-latin-ext.woff2') format('woff2');
}

@font-face {
	font-family: 'Gabarito';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/gabarito-900-latin.woff2') format('woff2'),
		url('../fonts/gabarito-900-latin-ext.woff2') format('woff2');
}

/* Preview aspect ratios (driven by the active format). */
.mw-share-preview[data-format='story'] {
	aspect-ratio: 9 / 16;
}

.mw-share-preview[data-format='post'] {
	aspect-ratio: 4 / 5;
}

/* Canvas fills its preview container. */
.mw-share-canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Hide the loading placeholder once the preview has rendered. */
.mw-share-preview.is-loaded .mw-share-loading {
	display: none;
}

/* Format toggle button states. */
.mw-share-format-btn {
	background-color: #e5e7eb;
	color: #374151;
}

.mw-share-format-btn:hover {
	background-color: #d1d5db;
}

.mw-share-format-btn.is-active {
	background-color: #f8cd02;
	color: #000000;
}

.mw-share-format-btn:focus-visible {
	outline: 2px solid #f8cd02;
	outline-offset: 2px;
}

/* Very small screens: single column. */
@media ( max-width: 380px ) {
	.mw-share-grid {
		grid-template-columns: 1fr;
	}

	.mw-share-preview {
		max-height: 320px;
	}
}