/**
 * File to add styles within the gutenberg editor
 *
 */

.gowp--controls-wrapper-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.gowp--controls-wrapper-row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	width: 100%;
	flex-wrap: wrap;
}

.gowp-spacing-sizes-control fieldset {
	display: flex;
	flex-direction: column;
	gap: 7px;
}


.gowp-svg-icon {
	width: 30px;
	display: flex;
	box-sizing: content-box;

	& svg {
		width: 100%;
		height: 100%;
		display: block;
		overflow: visible;
	}
}


.gowp-footer-heading-with-stroke {
	position: relative;

	&:after {
		content: "";
		background-color: #3681C3;
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 50px;
		height: 2px;

	}
}

.gowp-align-viewport-left,
.gowp-align-viewport-center,
.gowp-align-viewport-right {
	/* Temporary */
	top: auto;

}

.gowp-button-default {
	display: flex;
	width: 100%;
	text-align: center;
	align-items: center;
	justify-content: center !important;
	gap: 7px;
	box-shadow: inset 0 0 0 1px #ccc !important;
	color: #1e1e1e !important;

	&:focus,
	&:hover {
		color: var(--wp-admin-theme-color) !important;
		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
	}

	& .gowp-svg-icon {
		max-width: 20px;
		max-height: 20px;

		& svg {
			width: 100%

		}
	}
}

.gowp-button-icon {
	display: flex;
	align-items: center;
	justify-content: center !important;
	width: 24px;
	height: 24px !important;
	padding: 5.25px !important;
	box-shadow: inset 0 0 0 1px #ccc !important;
	color: #1e1e1e !important;

	&:focus,
	&:hover {
		color: var(--wp-admin-theme-color) !important;
		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
	}

	/* Active/toggled state (e.g. a proxied native toggle that is pressed). */

	&.is-active {
		color: #fff !important;
		background: #1e1e1e !important;
		box-shadow: inset 0 0 0 1px #1e1e1e !important;
	}

}

.gowp-svg-icon {
	width: 14px;
	height: 14px;

	& svg {
		width: 100% !important;
		height: 100% !important;
	}
}

.gowp-tools-panel-gap-0 {
	gap: 0 !important;

	& .components-grid {
		gap: 0 !important;
	}
}

.gowp-padding-0 {
	padding: 0 !important;
}

/**
 * Utility to drop the default bottom margin of a control.
 * The `__nextHasNoMarginBottom` prop doesn't reliably remove it, so apply this
 * class (lands on the component root, usually `.components-base-control`) to any
 * control that needs it. Covers both the root element and a nested base-control.
 */
.gowp--no-margin-bottom-control,
.gowp--no-margin-bottom-control .components-base-control {
	margin-bottom: 0 !important;
}

/**
 * Two controls side by side inside a flex row: each takes ~half the width and
 * grows to fill the remaining space.
 */
.gowp--half-width-flex-control {
	width: 40%;
	flex-grow: 1;
}

.gowp-box-controls .components-grid {
	width: 100%;

	& .components-base-control {
		margin: 0 !important;
	}
}


/* TODO: Use the responsive controls instead of css.*/
.gowp-faq-listing-section {

	interpolate-size: allow-keywords;

	& details::details-content {
		block-size: 0;
		transition: block-size .7s, content-visibility .7s;
		transition-behavior: allow-discrete;
	}

	& details p {
		margin: 0 !important;
		opacity: 0;
		transition: opacity .2s;
	}

	& details[open] {

		&::details-content {
			block-size: auto;
		}

		p {
			opacity: 1;
		}
	}
}

@media screen and (max-width: 1024px) {

	.gowp-faq-listing-section {

		.gowp-faq-listing-2-columns {
			grid-template-rows: 1fr;

			grid-auto-flow: row;
		}

		& h2 {
			font-size: 26px !important;
			line-height: 1.4em;
			width: auto;
		}

	}
}

/* Event Details sidebar panel — make the date dropdown fill the panel width. */
.gowp-event-date-dropdown {
	width: 100%;
}

.gowp-event-date-popover, .gowp-event-date-fields {
	will-change: transform;
}

.gowp-event-date-popover *, .gowp-event-date-fields * {
	will-change: transform;
}

/**
 * Podcast publication date: reuse the DateTimePicker (editable month/day/year
 * fields + calendar) but hide the time fieldset — the publication date is
 * date-only. The date fieldset holds month/day/year; the time fieldset is the
 * one containing `.components-datetime__time-field-time`, so hide that fieldset
 * (`:has`) and, as a fallback for older browsers, the time inputs themselves.
 */
.gowp-podcast-date-fields
	fieldset:has( .components-datetime__time-field-time ) {
	display: none;
}

.gowp-podcast-date-fields .components-datetime__time-field-time,
.gowp-podcast-date-fields .components-datetime__time-field-am-pm {
	display: none;
}

/**
 * Synced pattern instances: hide WordPress' native "Content" panel.
 *
 * Inside a synced pattern every inner block is in `contentOnly` editing mode, so
 * the block inspector renders a native "Content" panel that just lists those
 * blocks for navigation (a `BlockQuickNavigation`). That list is redundant here:
 * our own per-block override panels (src/editor/pattern-inspector-panel) already
 * expose the editable fields. Scoped to the synced-pattern inspector (the
 * `.is-synced` block card) and matched by the quick-navigation it contains, so
 * our panels — which don't contain it — stay untouched, and content-locked
 * templates keep their navigation.
 */
.block-editor-block-inspector {
	&:has(> .block-editor-block-card.is-synced) {
		& > .components-panel__body {
			display: none;
		}
	}
}


/*
 * Hide the core per-block "Additional CSS" field (Advanced panel) in the editor
 * sidebar — the theme provides its own gowpCustomCss control, so the native one
 * is redundant. Scoped to `.editor-sidebar` so it only affects the inspector.
 */
.editor-sidebar .block-editor-global-styles-advanced-panel__custom-css-input {
	display: none;
}