/* Social Kit Generator — front-end styles.
   Loaded only for the [social_kit_generator] shortcode. Provides the base + button
   styling that WordPress admin CSS gives us on the dashboard, scoped to .skg-scope
   so it never leaks into the surrounding theme. */

.skg-frontend { max-width: 1180px; margin: 0 auto; }

/* base resets so themes don't distort the tool */
.skg-scope, .skg-scope * { box-sizing: border-box; }
.skg-scope {
	font-size: 14px;
	line-height: 1.5;
	color: #1d2327;
	-webkit-font-smoothing: antialiased;
}
.skg-scope h1, .skg-scope h2, .skg-scope p { margin: 0 0 10px; padding: 0; }
.skg-scope h2 { font-weight: 600; }
.skg-scope a { box-shadow: none; }
.skg-scope img { max-width: 100%; height: auto; }
.skg-scope label { margin: 0; font-weight: 400; }
.skg-scope input[type="checkbox"],
.skg-scope input[type="radio"] { margin: 0 4px 0 0; vertical-align: middle; }

/* WordPress-style buttons (stand-ins for wp-admin's .button classes) */
.skg-scope .button,
.skg-scope .button-primary,
.skg-scope .button-secondary {
	display: inline-block;
	font-size: 13px;
	line-height: 2.15;
	min-height: 30px;
	margin: 0;
	padding: 0 12px;
	cursor: pointer;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #f6f7f7;
	color: #0e5e97;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	transition: background .12s, border-color .12s;
}
.skg-scope .button:hover,
.skg-scope .button-secondary:hover { background: #f0f0f1; border-color: #8c8f94; }

.skg-scope .button-primary {
	background: var(--skg-blue, #1275bd);
	border-color: var(--skg-blue-d, #0e5e97);
	color: #fff;
}
.skg-scope .button-primary:hover { background: var(--skg-blue-d, #0e5e97); }

.skg-scope .button-hero {
	width: 100%;
	font-size: 15px;
	line-height: 2.6;
	min-height: 46px;
	text-align: center;
}
.skg-scope .button-small { font-size: 12px; line-height: 2; min-height: 26px; padding: 0 8px; }

.skg-scope .button-link {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #b32d2e;
	text-decoration: underline;
}

/* color input + inputs sizing inside the tool */
.skg-scope input[type="color"] { min-height: 26px; }

/* keep the front-end brand header a touch tighter than admin */
.skg-frontend .skg-brandbar { padding-top: 0; }