/* Craftor frontend base styles: minimal reset + layout primitives. */

/* Prevent Craftor content from ever causing horizontal scrollbars. */
body:has(.craftor-page) {
	overflow-x: hidden;
}

/* ── Page wrapper ──────────────────────────────────────────────────────── *
 * Single source of content-width constraint — same pattern as Astra's
 * `.content-area`. All children inherit the constrained width without
 * needing their own max-width / margin:auto.                             */

.craftor-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--craftor-content-width, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--craftor-gap, 24px);
	padding-right: var(--craftor-gap, 24px);
	padding-top: var(--craftor-spacing-md, 16px);
	padding-bottom: var(--craftor-spacing-md, 16px);
	box-sizing: border-box;
}

/* ── Widget wrapper ────────────────────────────────────────────────────── *
 * Every non-container widget renders inside one of these (see
 * PageRenderer::render_element()). It — not the widget's own natural content
 * size — is what StyleGenerator's box/layout properties target and what the
 * editor measures for selection/hover, so a compact widget (e.g. a Button,
 * which stays `width: fit-content` on its own tag) still gets a selection
 * box consistent with a full-width widget (e.g. a Heading). Same role as
 * Elementor's `.elementor-element`.                                        */

.craftor-widget-wrap {
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* Header / footer theme parts: different max-width and no page-rhythm padding.
   --craftor-header-gap is only set (to 0) when Header Width is "Full" —
   otherwise it falls through to the same --craftor-gap regular pages use. */
.craftor-page.craftor-theme-part {
	max-width: var(--craftor-header-width, var(--craftor-content-width, 1200px));
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--craftor-header-gap, var(--craftor-gap, 24px));
	padding-right: var(--craftor-header-gap, var(--craftor-gap, 24px));
}

/* Popup content fills the popup dialog; page-rhythm padding is unwanted. */
.craftor-popup-content.craftor-page {
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Container (section) ───────────────────────────────────────────────── */

.craftor-container {
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	width: 100%;
}

.craftor-container,
.craftor-container * {
	box-sizing: border-box;
}

.craftor-container__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ── Columns ───────────────────────────────────────────────────────────── */

.craftor-columns {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.craftor-columns,
.craftor-columns * {
	box-sizing: border-box;
}

.craftor-columns > * {
	min-width: 0;
}

/* Containers used as flex children in a row layout must be able to shrink
   below their content's intrinsic size. Without this, min-width:auto causes
   one child to collapse when siblings contain non-wrapping content. */
.craftor-container > .craftor-container {
	min-width: 0;
}

/* ── Images ────────────────────────────────────────────────────────────── */

.craftor-page img {
	max-width: 100%;
	height: auto;
}

/* ── Neutralize theme button resets ────────────────────────────────────── */
/* Exclude widget buttons that carry their own full styling (accordion trigger,
   tabs tab, canvas toolbar buttons). The :not() arguments must be kept in sync
   with widget CSS files that use doubled-class selectors for specificity.       */

.craftor-page button:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab),
.craftor-page [type='button']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab),
.craftor-page [type='submit']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab),
.craftor-page [type='reset']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab) {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: none;
	white-space: normal;
	width: auto;
	cursor: pointer;
}

.craftor-page button:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):hover,
.craftor-page button:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):focus,
.craftor-page [type='button']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):hover,
.craftor-page [type='button']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):focus,
.craftor-page [type='submit']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):hover,
.craftor-page [type='submit']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):focus,
.craftor-page [type='reset']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):hover,
.craftor-page [type='reset']:not(.craftor-button):not(.craftor-accordion__trigger):not(.craftor-tabs__tab):focus {
	background: none;
	color: inherit;
}

/* ── Theme part edit overlay (header/footer hover) ─────────────────────── */

.craftor-theme-part--editable {
	position: relative;
}

.craftor-theme-part__edit-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.92);
	color: #4f46e5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 11px;
	font-weight: 500;
	border-radius: 4px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
	z-index: 91;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	pointer-events: none;
	line-height: 1.4;
}

.craftor-theme-part__edit-btn:hover {
	background: #fff;
	color: #4338ca;
}

.craftor-theme-part--editable:hover .craftor-theme-part__edit-btn {
	opacity: 1;
	pointer-events: auto;
}

.craftor-theme-part--editable::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px dashed transparent;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s, border-color 0.15s;
	z-index: 90;
}

.craftor-theme-part--editable:hover::before {
	opacity: 1;
	border-color: rgba(99, 102, 241, 0.25);
}

/* ── Custom SVG icons ───────────────────────────────────────────────────── */
/* A custom-uploaded/linked icon renders as <img>, not a dashicons <span> —
   sized in `em` so it inherits the same font-size-based size controls the
   dashicons font glyph already responds to. */
.craftor-icon-svg {
	width: 1em;
	height: 1em;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
}

/* ── Responsive visibility helpers ─────────────────────────────────────── */

@media ( min-width: 1025px ) {
	.craftor-hide-desktop {
		display: none !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.craftor-hide-tablet {
		display: none !important;
	}
}

@media ( max-width: 767px ) {
	.craftor-hide-mobile {
		display: none !important;
	}

	.craftor-page {
		padding-left: 16px;
		padding-right: 16px;
	}
}