/**
 * 37d Cookie Consent — Structural overrides for orestbida/cookieconsent v3.
 *
 * Colours and fonts are injected dynamically via inline CSS from the admin
 * settings page. This file handles border-radius, shadows, transitions,
 * and focus states only.
 *
 * @link https://github.com/orestbida/cookieconsent
 * @link https://cookieconsent.orestbida.com/
 */

/* ── Panel border radius & shadow ──────────────────────── */
#cc-main .cm {
	border-radius: var(--cc-border-radius-panel, 16px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

#cc-main .pm {
	border-radius: var(--cc-border-radius-panel, 16px);
}

/* ── Button styling ────────────────────────────────────── */
#cc-main .cm__btn,
#cc-main .pm__btn {
	border-radius: var(--cc-border-radius-btn, 4px);
	font-weight: 500;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Focus states (accessibility) ──────────────────────── */
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible {
	box-shadow: 0 0 0 3px var(--cc-focus-ring-color, rgba(0, 0, 0, 0.2));
	outline: none;
}

#cc-main .pm__section--toggle .toggle__input:focus-visible + .toggle__label {
	box-shadow: 0 0 0 3px var(--cc-focus-ring-color, rgba(0, 0, 0, 0.2));
}

/* ── Description line height ───────────────────────────── */
#cc-main .cm__desc,
#cc-main .pm__body {
	line-height: 1.55;
}

/* ── Links ─────────────────────────────────────────────── */
#cc-main a {
	text-decoration: none;
	transition: color 0.3s ease;
}

/* ── Mobile: match the site's page gutter ──────────────────
 *
 * Scope: the FLOATING CONSENT BOX only (`.cm` — the "cloud"). cookieconsent v3
 * positions it with its own fixed inset, which on a phone left it out of line
 * with every other block on the page.
 *
 * The full-screen preferences panel (`.pm`) is deliberately NOT touched: it is
 * a modal that is meant to fill the screen, so a page gutter would be wrong
 * there — it would read as a floating sheet rather than a takeover.
 *
 * --bw-frame-gap is the theme's single page-gutter token (main.css :root); it
 * resolves to 24px at phone widths. The fallback keeps this sane if the widget
 * is ever used on a site without the theme.
 *
 * Only the horizontal inset is touched — vertical placement, stacking and the
 * library's own responsive behaviour are left alone.
 */
@media only screen and (max-width: 640px) {
	#cc-main .cm {
		--cc-mobile-gutter: var(--bw-frame-gap, 24px);

		left: var(--cc-mobile-gutter) !important;
		right: var(--cc-mobile-gutter) !important;
		width: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}