/*!
 * SkillBridge – Elementor compatibility layer.
 *
 * main.css carries the original design (Tailwind utilities, specificity 0,3,0).
 * Every rule below uses a LOWER specificity (0,2,0) on purpose: it beats Elementor's own defaults
 * (padding, gaps, widget margins, kit typography/colours) but never beats a Tailwind utility,
 * so the original design always wins and Elementor controls still work for anything you add.
 */

/* ---------- page chrome ---------- */
body.sbc-theme { margin: 0; }
.sbc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 .5rem 0; }
.sbc-skip-link:focus { left: 0; }
.sbc-main { display: block; }

/* ---------- Elementor containers ---------- */
.e-con.sbc-c {
	--display: block;
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px;
	--widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
	--kit-widget-spacing: 0px;
	--flex-direction: row; --flex-wrap: nowrap; --align-items: normal; --justify-content: normal;
	display: block;
	flex-direction: row;
	flex-wrap: nowrap;
	width: auto;
	max-width: none;
	min-width: 0;
	box-sizing: border-box;
}
/* a container that is NOT a flex/grid parent keeps normal block flow */
.e-con.sbc-c > .e-con-inner { display: contents; }

/* ---------- Elementor widgets ---------- */
.elementor-widget.sbc-w {
	width: auto;
	max-width: 100%;
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}
:where(.sbc-c) > .elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor-widget.sbc-w > .elementor-widget-container { color: inherit; font: inherit; margin: 0; padding: 0; }

body.sbc-theme .sbc-w .elementor-heading-title {
	font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit;
	text-transform: inherit; text-decoration: inherit; margin: 0; padding: 0;
}
body.sbc-theme .sbc-w h1.elementor-heading-title,
body.sbc-theme .sbc-w h2.elementor-heading-title,
body.sbc-theme .sbc-w h3.elementor-heading-title,
body.sbc-theme .sbc-w h4.elementor-heading-title { font-family: var(--font-display); }

body.sbc-theme .sbc-w p { margin: 0; }

/* Elementor Kit defaults for plain headings/links (e.g. inside HTML / Shortcode widgets) must not recolour the design.
   Utilities (0,3,0) and Elementor's per-element controls (0,4,0) still win over these. */
body.sbc-theme .elementor h1, body.sbc-theme .elementor h2, body.sbc-theme .elementor h3,
body.sbc-theme .elementor h4, body.sbc-theme .elementor h5, body.sbc-theme .elementor h6 {
	color: inherit; font-family: var(--font-display); font-weight: inherit; line-height: inherit;
}
body.sbc-theme .elementor a { color: inherit; text-decoration: inherit; }

/* ---------- images ---------- */
.sbc-img > .elementor-widget-container { height: 100%; object-fit: inherit; }
body.sbc-theme .sbc-img img {
	height: 100%; width: auto; max-width: 100%;
	object-fit: inherit; object-position: inherit;
	border-radius: inherit; display: block;
}
body.sbc-theme .sbc-img.w-full img { width: 100%; }

/* ---------- svg icons ---------- */
.sbc-svg > .elementor-widget-container { display: flex; line-height: 0; }

/* ---------- buttons (re-creates .btn / .btn-primary / .btn-navy / .btn-ghost-light) ---------- */
.sbc-btn.elementor-widget-button { width: auto; }
body.sbc-theme .sbc-btn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	white-space: nowrap; border-radius: 9999px; padding: .8rem 1.75rem;
	font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1.5;
	transition: all .2s; border: 0; text-decoration: none; fill: currentColor;
	box-shadow: none; text-shadow: none;
}
body.sbc-theme .sbc-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: .5rem; }
body.sbc-theme .sbc-btn .elementor-button-icon { order: 2; display: inline-flex; font-size: .8rem; margin: 0; }
body.sbc-theme .sbc-btn .elementor-button-text { order: 1; }
body.sbc-theme .sbc-btn-primary .elementor-button { background: var(--teal); color: oklch(99% .005 195); box-shadow: 0 8px 24px -8px oklch(47% .1 205 / .5); }
body.sbc-theme .sbc-btn-primary .elementor-button:hover { background: var(--teal-dark); color: oklch(99% .005 195); transform: translateY(-2px); }
body.sbc-theme .sbc-btn-navy .elementor-button { background: var(--navy); color: var(--primary-foreground); }
body.sbc-theme .sbc-btn-navy .elementor-button:hover { background: var(--navy-deep); color: var(--primary-foreground); transform: translateY(-2px); }
body.sbc-theme .sbc-btn-ghost-light .elementor-button {
	color: oklch(99% .005 195); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	background: oklch(100% 0 0 / .1); border: 1px solid oklch(100% 0 0 / .35);
}
body.sbc-theme .sbc-btn-ghost-light .elementor-button:hover { background: oklch(100% 0 0 / .2); color: oklch(99% .005 195); }

/* ---------- mobile menu (new – the static export had none) ---------- */
.sbc-mobile-menu { border-top: 1px solid var(--border); background: var(--background); }
.sbc-mobile-menu[hidden] { display: none; }
.sbc-mobile-nav { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 0 1.25rem; }
.sbc-mobile-link { display: block; padding: .8rem 1rem; border-radius: .75rem; font-size: .95rem; font-weight: 600; color: var(--foreground); }
.sbc-mobile-link:hover, .sbc-mobile-link.is-active { color: var(--teal-dark); background: var(--secondary); }
.sbc-mobile-nav .btn { margin-top: .5rem; }
@media (min-width: 64rem) { .sbc-mobile-menu { display: none !important; } }

/* ---------- contact form extras ---------- */
.sbc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sbc-notice { border-radius: .75rem; padding: .85rem 1rem; font-size: .9rem; font-weight: 500; }
.sbc-notice--ok { background: var(--secondary); color: var(--teal-dark); border: 1px solid var(--teal-light); }
.sbc-notice--error { background: oklch(96% .03 25); color: var(--destructive); border: 1px solid oklch(85% .08 25); }

/* ---------- generic content (blog posts / non-Elementor pages) ---------- */
.sbc-prose { font-size: 1rem; line-height: 1.75; color: var(--foreground); }
.sbc-prose > * + * { margin-top: 1.1rem; }
.sbc-prose h2, .sbc-prose h3 { font-family: var(--font-display); font-weight: 700; margin-top: 2rem; }
.sbc-prose h2 { font-size: 1.6rem; } .sbc-prose h3 { font-size: 1.25rem; }
body.sbc-theme .sbc-prose a { color: var(--teal-dark); text-decoration: underline; }
.sbc-prose ul, .sbc-prose ol { padding-left: 1.4rem; } .sbc-prose ul { list-style: disc; } .sbc-prose ol { list-style: decimal; }
.sbc-prose img { max-width: 100%; height: auto; border-radius: 1rem; }

/* ---------- Elementor editor niceties ---------- */
.elementor-editor-active .sbc-c:empty { min-height: 1px; }