/**
 * Brooklyn Lite — shadcn-inspired Customizer Controls
 *
 * Targets all sections within the Brooklyn Theme Options panel.
 * Uses attribute selectors for robustness across WP versions.
 */

/* =====================================================================
   CSS Custom Properties
   ===================================================================== */
:root {
	--bl-radius: 6px;
	--bl-radius-lg: 8px;
	--bl-border: #e4e4e7;
	--bl-border-hover: #d4d4d8;
	--bl-border-focus: #fdd300;
	--bl-bg: #ffffff;
	--bl-bg-muted: #f4f4f5;
	--bl-bg-accent: #fafafa;
	--bl-fg: #09090b;
	--bl-fg-muted: #71717a;
	--bl-fg-label: #18181b;
	--bl-ring: rgba(253, 211, 0, 0.35);
	--bl-primary: #fdd300;
	--bl-primary-fg: #1c1917;
	--bl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--bl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	--bl-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
	--bl-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--bl-transition: 150ms cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   Scoping: target all Brooklyn Lite customizer sections
   ===================================================================== */

/* Short aliases via :is() for all Brooklyn sections */
#accordion-section-brooklyn_lite_section_menu,
#accordion-section-brooklyn_lite_section_blog_index,
#accordion-section-brooklyn_lite_section_blog_single,
#accordion-section-brooklyn_lite_section_footer,
#accordion-section-brooklyn_lite_section_fonts,
#accordion-section-brooklyn_lite_section_colors {
	/* marker: sections are scoped */
}

/* =====================================================================
   Panel & Section Headers
   ===================================================================== */
#accordion-panel-brooklyn_lite_panel > .accordion-section-title {
	font-family: var(--bl-font) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: -0.01em;
	border-left: 3px solid var(--bl-primary) !important;
}

#sub-accordion-panel-brooklyn_lite_panel .accordion-section-title {
	font-family: var(--bl-font) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	letter-spacing: -0.005em;
	transition: background var(--bl-transition) !important;
}

#sub-accordion-panel-brooklyn_lite_panel .accordion-section-title:hover {
	background: var(--bl-bg-muted) !important;
}

/* =====================================================================
   Control Containers — spacing & typography
   Uses [id*="brooklyn_lite_section"] to match all Brooklyn sections
   ===================================================================== */
[id*="brooklyn_lite_section"] .customize-control {
	font-family: var(--bl-font) !important;
	margin-bottom: 16px !important;
	padding: 0 12px !important;
}

[id*="brooklyn_lite_section"] .customize-control + .customize-control {
	border-top: 1px solid var(--bl-bg-muted);
	padding-top: 16px !important;
}

/* Labels */
[id*="brooklyn_lite_section"] .customize-control-title {
	font-family: var(--bl-font) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--bl-fg-label) !important;
	margin-bottom: 6px !important;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

/* Description text */
[id*="brooklyn_lite_section"] .customize-control .description {
	font-family: var(--bl-font) !important;
	font-size: 12px !important;
	color: var(--bl-fg-muted) !important;
	line-height: 1.5;
	margin-top: 4px;
}

/* =====================================================================
   Text, URL, Number, Textarea Inputs — shadcn Input style
   ===================================================================== */
[id*="brooklyn_lite_section"] .customize-control input[type="text"],
[id*="brooklyn_lite_section"] .customize-control input[type="url"],
[id*="brooklyn_lite_section"] .customize-control input[type="number"],
[id*="brooklyn_lite_section"] .customize-control input[type="email"],
[id*="brooklyn_lite_section"] .customize-control input[type="search"],
[id*="brooklyn_lite_section"] .customize-control textarea {
	display: block !important;
	width: 100% !important;
	height: 36px !important;
	padding: 6px 12px !important;
	font-family: var(--bl-font) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--bl-fg) !important;
	background: var(--bl-bg) !important;
	border: 1px solid var(--bl-border) !important;
	border-radius: var(--bl-radius) !important;
	box-shadow: var(--bl-shadow-sm) !important;
	outline: none !important;
	transition: border-color var(--bl-transition), box-shadow var(--bl-transition) !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
}

[id*="brooklyn_lite_section"] .customize-control textarea {
	height: auto !important;
	min-height: 80px !important;
	resize: vertical !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="text"]:hover,
[id*="brooklyn_lite_section"] .customize-control input[type="url"]:hover,
[id*="brooklyn_lite_section"] .customize-control input[type="number"]:hover,
[id*="brooklyn_lite_section"] .customize-control textarea:hover {
	border-color: var(--bl-border-hover) !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="text"]:focus,
[id*="brooklyn_lite_section"] .customize-control input[type="url"]:focus,
[id*="brooklyn_lite_section"] .customize-control input[type="number"]:focus,
[id*="brooklyn_lite_section"] .customize-control textarea:focus {
	border-color: var(--bl-border-focus) !important;
	box-shadow: 0 0 0 3px var(--bl-ring) !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="number"] {
	font-family: var(--bl-font-mono) !important;
	-moz-appearance: textfield !important;
}

/* Placeholder */
[id*="brooklyn_lite_section"] .customize-control input::placeholder,
[id*="brooklyn_lite_section"] .customize-control textarea::placeholder {
	color: var(--bl-fg-muted) !important;
	opacity: 0.6 !important;
}

/* =====================================================================
   Select Inputs — shadcn Select style
   ===================================================================== */
[id*="brooklyn_lite_section"] .customize-control select {
	display: block !important;
	width: 100% !important;
	height: 36px !important;
	padding: 6px 32px 6px 12px !important;
	font-family: var(--bl-font) !important;
	font-size: 13px !important;
	color: var(--bl-fg) !important;
	background-color: var(--bl-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 16px !important;
	border: 1px solid var(--bl-border) !important;
	border-radius: var(--bl-radius) !important;
	box-shadow: var(--bl-shadow-sm) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer !important;
	transition: border-color var(--bl-transition), box-shadow var(--bl-transition) !important;
	outline: none !important;
	box-sizing: border-box !important;
}

[id*="brooklyn_lite_section"] .customize-control select:hover {
	border-color: var(--bl-border-hover) !important;
}

[id*="brooklyn_lite_section"] .customize-control select:focus {
	border-color: var(--bl-border-focus) !important;
	box-shadow: 0 0 0 3px var(--bl-ring) !important;
}

/* =====================================================================
   Radio Buttons — shadcn Segmented Control / Tabs style
   ===================================================================== */

/* Hide default radio rows ONLY when our JS has transformed them */
.bl-radios-transformed .customize-inside-control-row {
	display: none !important;
}

/* The JS-generated segmented control wrapper */
.bl-segmented-control {
	display: flex;
	background: var(--bl-bg-muted);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-radius-lg);
	padding: 3px;
	gap: 2px;
	width: 100%;
	box-sizing: border-box;
}

.bl-segmented-control--vertical {
	flex-direction: column;
}

.bl-segmented-item {
	position: relative;
	flex: 1;
	min-width: 0;
}

.bl-segmented-item input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bl-segmented-item label {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 7px 12px !important;
	font-family: var(--bl-font) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--bl-fg-muted) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 5px !important;
	cursor: pointer !important;
	transition: all var(--bl-transition) !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.3 !important;
	user-select: none !important;
	margin: 0 !important;
}

.bl-segmented-item label:hover {
	color: var(--bl-fg) !important;
}

.bl-segmented-item input[type="radio"]:checked + label {
	background: var(--bl-bg) !important;
	color: var(--bl-fg) !important;
	box-shadow: var(--bl-shadow) !important;
	font-weight: 600 !important;
}

.bl-segmented-item input[type="radio"]:focus-visible + label {
	box-shadow: 0 0 0 3px var(--bl-ring) !important;
}

/* Vertical items need more room */
.bl-segmented-control--vertical .bl-segmented-item label {
	justify-content: flex-start !important;
	padding: 8px 14px !important;
}

/* =====================================================================
   Checkboxes — shadcn Toggle / Switch style
   ===================================================================== */
[id*="brooklyn_lite_section"] .customize-control-checkbox .customize-inside-control-row,
[id*="brooklyn_lite_section"] .customize-control-checkbox > label {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
}

[id*="brooklyn_lite_section"] .customize-control-checkbox input[type="checkbox"] {
	position: relative !important;
	width: 36px !important;
	height: 20px !important;
	min-width: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--bl-border) !important;
	border-radius: 999px !important;
	background: var(--bl-bg-muted) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer !important;
	transition: all var(--bl-transition) !important;
	outline: none !important;
	box-shadow: var(--bl-shadow-sm) !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}

[id*="brooklyn_lite_section"] .customize-control-checkbox input[type="checkbox"]::before {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
	transition: transform var(--bl-transition) !important;
}

[id*="brooklyn_lite_section"] .customize-control-checkbox input[type="checkbox"]:checked {
	background: var(--bl-primary) !important;
	border-color: var(--bl-primary) !important;
}

[id*="brooklyn_lite_section"] .customize-control-checkbox input[type="checkbox"]:checked::before {
	transform: translateX(16px) !important;
	background: var(--bl-primary-fg) !important;
}

[id*="brooklyn_lite_section"] .customize-control-checkbox input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 3px var(--bl-ring) !important;
}

[id*="brooklyn_lite_section"] .customize-control-checkbox input[type="checkbox"]:hover {
	border-color: var(--bl-border-hover) !important;
}

[id*="brooklyn_lite_section"] .customize-control-checkbox input[type="checkbox"]:checked:hover {
	border-color: #e5be00 !important;
	background: #e5be00 !important;
}

/* Checkbox label text */
[id*="brooklyn_lite_section"] .customize-control-checkbox label,
[id*="brooklyn_lite_section"] .customize-control-checkbox .customize-inside-control-row label {
	font-family: var(--bl-font) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--bl-fg) !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
}

/* =====================================================================
   Range Sliders — shadcn Slider style
   ===================================================================== */
[id*="brooklyn_lite_section"] .customize-control input[type="range"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 6px !important;
	border-radius: 999px !important;
	background: var(--bl-bg-muted) !important;
	border: 1px solid var(--bl-border) !important;
	outline: none !important;
	cursor: pointer !important;
	margin: 8px 0 4px !important;
	padding: 0 !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: var(--bl-bg) !important;
	border: 2px solid var(--bl-primary) !important;
	box-shadow: var(--bl-shadow) !important;
	cursor: pointer !important;
	transition: box-shadow var(--bl-transition), transform var(--bl-transition) !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="range"]::-webkit-slider-thumb:hover {
	box-shadow: 0 0 0 4px var(--bl-ring) !important;
	transform: scale(1.1) !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="range"]::-moz-range-thumb {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: var(--bl-bg) !important;
	border: 2px solid var(--bl-primary) !important;
	box-shadow: var(--bl-shadow) !important;
	cursor: pointer !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="range"]::-moz-range-track {
	height: 6px !important;
	border-radius: 999px !important;
	background: var(--bl-bg-muted) !important;
	border: 1px solid var(--bl-border) !important;
}

[id*="brooklyn_lite_section"] .customize-control input[type="range"]:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px var(--bl-ring) !important;
}

/* Range value display (added by JS) */
.bl-range-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 24px;
	padding: 0 6px;
	font-family: var(--bl-font-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--bl-fg);
	background: var(--bl-bg-muted);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-radius);
	margin-left: 8px;
	letter-spacing: -0.02em;
}

.bl-range-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2px;
}

/* =====================================================================
   Color Controls — clean up
   ===================================================================== */
[id*="brooklyn_lite_section"] .customize-control-color .wp-color-result {
	border-radius: var(--bl-radius) !important;
	border: 1px solid var(--bl-border) !important;
	box-shadow: var(--bl-shadow-sm) !important;
	transition: border-color var(--bl-transition), box-shadow var(--bl-transition) !important;
	height: 30px !important;
}

[id*="brooklyn_lite_section"] .customize-control-color .wp-color-result:hover {
	border-color: var(--bl-border-hover) !important;
}

[id*="brooklyn_lite_section"] .customize-control-color .wp-color-result:focus {
	border-color: var(--bl-border-focus) !important;
	box-shadow: 0 0 0 3px var(--bl-ring) !important;
}

[id*="brooklyn_lite_section"] .customize-control-color .wp-color-result-text {
	font-family: var(--bl-font-mono) !important;
	font-size: 12px !important;
	line-height: 30px !important;
	color: var(--bl-fg-muted) !important;
	border-left: 1px solid var(--bl-border) !important;
	border-radius: 0 var(--bl-radius) var(--bl-radius) 0 !important;
	padding: 0 10px !important;
	background: var(--bl-bg-accent) !important;
}