/**
 * Header Builder front-end styles — Phase B.
 *
 * Self-contained grid layout for the row/column structure emitted by
 * Header_Builder::render(). Kept narrow (~40 lines) so the existing
 * .site-header__inner rules don't fight it; the new builder is opt-in
 * and renders into its own `.ls-header-rows` container.
 */

.ls-header-rows {
	display: flex;
	flex-direction: column;
	gap: var(--ls-header-row-gap, 0.75rem);
	width: 100%;
}

.ls-header-row {
	display: grid;
	gap: var(--ls-header-col-gap, 1rem);
	align-items: center;
	min-height: var(--ls-header-height, 64px);
}

.ls-header-col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-width: 0; /* allow grid children to shrink */
}

.ls-cell { display: inline-flex; align-items: center; }
.ls-cell--spacer { flex: 1 1 auto; min-width: 1rem; }
.ls-cell__label { font-size: 0.85em; opacity: 0.7; margin-left: 0.25rem; }
.ls-cell--disabled .ls-cell__label { font-style: italic; }

/* Tablet — collapse to a single column at 900px and below. */
@media (max-width: 900px) {
	.ls-header-row { grid-template-columns: 1fr !important; }
}

/* Mobile — tighten gaps. */
@media (max-width: 600px) {
	.ls-header-rows { gap: 0.5rem; }
	.ls-header-row  { gap: 0.5rem; min-height: 0; }
	.ls-header-col  { flex-direction: column; align-items: flex-start; }
	.ls-cell        { width: 100%; }
	.ls-cell--spacer{ display: none; }
}

/* Customizer control surface. */
.customize-control-ls_header_builder .ls-builder__table { margin: 0.5em 0; }
.ls-builder__col { margin-bottom: 0.5em; }
.ls-builder__col-label { display: block; font-weight: 600; margin-bottom: 0.25em; }
.ls-builder__check { display: inline-block; margin-right: 0.75em; font-weight: 400; }

/* Sprint 1b: per-element options (Element_Options module). */
.ls-cell--logo .site-title { font-size: var(--ls-logo-size, 32px); line-height: 1; }
.ls-cell--logo-image .custom-logo { max-height: var(--ls-logo-size, 32px); width: auto; }
.button--primary { background: var(--ls-color-primary, #2563EB); color: #fff; border: 1px solid transparent; }
.button--outline { background: transparent; color: var(--ls-color-primary, #2563EB); border: 1px solid currentColor; }
.button--ghost   { background: transparent; color: inherit; border: 1px solid transparent; }
.button--sm { padding: 0.3rem 0.7rem; font-size: 0.85em; border-radius: 0.3rem; }
.button--md { padding: 0.5rem 1.1rem; font-size: 0.95em; border-radius: 0.4rem; }
.button--lg { padding: 0.7rem 1.5rem; font-size: 1.05em; border-radius: 0.5rem; }

/* Sprint 1c: customizer control surface (3-row + start/end + offcanvas). */
.ls-builder-content { margin-top: 0.75em; }
.ls-builder-devs    { display: flex; gap: 0.4em; margin-bottom: 0.75em; }
.ls-builder-devs .button-primary { background: var(--ls-color-primary, #2563EB); color: #fff; border-color: var(--ls-color-primary, #2563EB); }
.ls-builder-row     { border: 1px solid rgba(15,23,42,0.1); border-radius: 0.4rem; padding: 0.6em; margin-bottom: 0.5em; background: rgba(0,0,0,0.02); }
.ls-builder-row__label { margin: 0 0 0.4em; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.ls-builder-slot    { display: flex; flex-wrap: wrap; gap: 0.3em; align-items: center; margin-bottom: 0.3em; padding: 0.3em; background: #fff; border: 1px dashed rgba(15,23,42,0.12); border-radius: 0.3rem; }
.ls-builder-slot__label { font-size: 0.75em; opacity: 0.55; margin-right: 0.4em; min-width: 4em; }
.ls-builder-pill    { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.55em; background: var(--ls-color-primary, #2563EB); color: #fff; border-radius: 0.3rem; font-size: 0.85em; }
.ls-builder-pill__remove { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 1.1em; line-height: 1; padding: 0 0.15em; opacity: 0.7; }
.ls-builder-pill__remove:hover { opacity: 1; }
.ls-builder-add     { font-size: 0.85em; padding: 0.2em 0.4em; border-radius: 0.3rem; border: 1px solid rgba(15,23,42,0.15); }
.ls-builder__reset  { margin-top: 0.5em; }