/**
 * Elementor SEO Site Title & Image — Frontend Styles
 *
 * Design philosophy:
 *   1. The wrapper element (.c6gx-sst-h1) is a flex container. All flex
 *      properties (direction, justify-content, align-items, gap, wrap) are
 *      driven entirely by Elementor's responsive style controls. The CSS here
 *      only declares `display: flex` and resets heading defaults — it sets no
 *      opinionated flex values so the panel controls are always authoritative.
 *   2. The Display Name span (.c6gx-sst-name) inherits ALL typographic
 *      properties from the theme's computed H1 styles via explicit `inherit`
 *      declarations. Elementor style panel controls layer on top as overrides.
 *   3. Image/SVG sizing is panel-driven; only object-fit and display defaults
 *      are set here.
 *
 * @package C6GX_SEO_Site_Title
 */

/* ── Wrapper element ─────────────────────────────────────────────────────── */
/*
 * Establish the flex container. All other flex properties are injected inline
 * by Elementor from the responsive controls (direction, justify-content,
 * align-items, column-gap, row-gap, flex-wrap).
 *
 * Heading margin/padding is reset to zero so the widget integrates cleanly
 * into Elementor header sections without fighting theme H1 block styles.
 * The semantic element (h1–h6, div, strong) is still present in the DOM for
 * the accessibility tree and SEO; we are only resetting its visual defaults.
 */
.c6gx-sst-h1 {
	display: flex;
	/* Flex axis controls — all set via panel, no defaults here */
	margin: 0;
	padding: 0;
}

/* ── Anchor ──────────────────────────────────────────────────────────────── */
/*
 * The anchor inherits flex behaviour from the wrapper and passes `gap: inherit`
 * to its own flex children so the image/name spacing is consistent whether
 * the link wraps both or neither.
 */
.c6gx-sst-link {
	display: inline-flex;
	flex-wrap: inherit;
	flex-direction: inherit;
	justify-content: inherit;
	align-items: inherit;
	column-gap: inherit;
	row-gap: inherit;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
	/* Allow the link to grow/shrink with the wrapper */
	width: 100%;
}

.c6gx-sst-link:hover,
.c6gx-sst-link:focus-visible {
	text-decoration: none;
}

/* ── Raster image — Rank 2 ───────────────────────────────────────────────── */
.c6gx-sst-img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	/* Prevent the image from being a flex-stretch candidate */
	flex-shrink: 0;
}

/* ── Inline SVG wrapper — Rank 1 ─────────────────────────────────────────── */
.c6gx-sst-svg {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.c6gx-sst-svg svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Display Name span ───────────────────────────────────────────────────── */
/*
 * TYPOGRAPHIC INHERITANCE
 * ─────────────────────────
 * .c6gx-sst-name is an inline child of the wrapper element. We use explicit
 * `inherit` on every typographic property to guarantee the span always
 * reflects the theme's heading styling regardless of what Elementor's wrapper
 * divs may reset in the cascade. The Elementor typography group control in
 * the "Display Name" panel section layers on top of these as overrides.
 */
.c6gx-sst-name {
	display: inline-block;

	font-family:     inherit;
	font-size:       inherit;
	font-weight:     inherit;
	font-style:      inherit;
	line-height:     inherit;
	letter-spacing:  inherit;
	text-transform:  inherit;
	text-decoration: inherit;
	color:           inherit;

	/* Reasonable flex child behaviour — don't let a long name blow the layout */
	min-width: 0;
	word-break: break-word;
}

/* ── Elementor editor SVG preview badge ──────────────────────────────────── */
/*
 * In the editor the SVG is shown as a scaled <img> preview because Elementor's
 * iframe cannot safely execute injected SVG markup. The dashed outline signals
 * the designer that this will render as inline SVG on the live front-end.
 */
.c6gx-sst-svg-preview {
	outline: 2px dashed #aab;
	outline-offset: 3px;
	border-radius: 3px;
}