/* FlowPress Frontend + Preview Styles — base layer; global CSS is appended inline */

.flowpress-heading { display: block; margin: 0; margin-block: 0; }

.flowpress-text    { display: block; }
.flowpress-text p:last-child { margin-bottom: 0; }

/* Custom bullet/number markers, laid out with flex so `row-gap` creates spacing
   strictly between list items (never before the first or after the last one),
   while padding-inline-start on the <li> controls the marker-to-text gap. Both
   are exposed as sliders on the FP Text widget. */
.flowpress-text ul,
.flowpress-text ol {
	/* !important: themes and WordPress's own core-block-library CSS commonly
	   carry their own `display`/`list-style` rules for lists at the same
	   specificity, and whichever loads later would otherwise win the tie —
	   silently turning off flex (and with it, the item-spacing slider) even
	   though the marker-spacing slider on the <li> itself keeps working
	   (that one doesn't depend on the <ul> being a flex container at all). */
	display: flex !important;
	flex-direction: column !important;
	list-style: none !important;
	margin: 0 0 1em;
	padding: 0;
}
.flowpress-text ul li,
.flowpress-text ol li {
	position: relative;
	padding-inline-start: 25px;
}
.flowpress-text ul li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
}
.flowpress-text ol { counter-reset: fp-ol-counter; }
.flowpress-text ol li { counter-increment: fp-ol-counter; }
.flowpress-text ol li::before {
	content: counter(fp-ol-counter) ".";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
}
.flowpress-text ul ul,
.flowpress-text ul ol,
.flowpress-text ol ul,
.flowpress-text ol ol {
	margin: 0;
}

.flowpress-video-outer {
	width: 100%;
	text-align: center;
}

.flowpress-video-wrap {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	max-width: 100%;
}

/* Aspect ratio helpers */
.fp-ratio-169 { aspect-ratio: 16/9; }
.fp-ratio-43  { aspect-ratio: 4/3; }
.fp-ratio-32  { aspect-ratio: 3/2; }
.fp-ratio-11  { aspect-ratio: 1/1; }

.fp-ratio-169 iframe,
.fp-ratio-43  iframe,
.fp-ratio-32  iframe,
.fp-ratio-11  iframe,
.fp-ratio-custom iframe,
.fp-ratio-custom video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Center video content vertically when aspect ratios differ */
.fp-ratio-169 video,
.fp-ratio-43  video,
.fp-ratio-32  video,
.fp-ratio-11  video,
.fp-ratio-custom video {
	object-fit: contain;
	object-position: center;
}

.flowpress-image-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.flowpress-image-wrap img {
	max-width: 100%;
	height: auto;
	display: block;
}

.fp-image-title {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	text-align: center;
}

.fp-image-caption {
	display: block;
	font-size: 0.875em;
	color: #666;
	margin-top: 6px;
	text-align: center;
}

.flowpress-portfolio-entry,
.flowpress-project-entry {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ── Blog Converter canvas widget ────────────────────────────────────────── */

.fp-blog-converter {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.fp-bc-header {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	background: #f0eeff;
	border-bottom: 1px solid #ddd;
	color: #6c63ff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.fp-bc-content {
	min-height: 260px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.75;
	color: #333;
	outline: none;
	overflow-y: auto;
	word-break: break-word;
}

.fp-bc-content:focus {
	background: #fafaff;
	box-shadow: inset 0 0 0 2px #6c63ff;
}

.fp-bc-content.fp-bc-empty::before {
	content: attr(data-placeholder);
	color: #bbb;
	pointer-events: none;
	font-style: italic;
	display: block;
}

/* Heading styles inside the paste area — gives visual feedback */
.fp-bc-content h1 { font-size: 1.75em; font-weight: 700; margin: .3em 0 .2em; color: #111; }
.fp-bc-content h2 { font-size: 1.4em;  font-weight: 700; margin: .3em 0 .2em; color: #111; }
.fp-bc-content h3 { font-size: 1.15em; font-weight: 600; margin: .3em 0 .2em; color: #111; }
.fp-bc-content h4,
.fp-bc-content h5,
.fp-bc-content h6 { font-size: 1em; font-weight: 600; margin: .3em 0 .2em; color: #111; }
.fp-bc-content p  { margin: 0 0 .6em; }
.fp-bc-content img { max-width: 100%; height: auto; border-radius: 4px; }

.fp-bc-footer-hint {
	padding: 7px 14px;
	font-size: 11px;
	color: #aaa;
	background: #fafafa;
	border-top: 1px solid #eee;
	text-align: center;
}

/* ── Image + Text widget ─────────────────────────────────────────────────── */

.flowpress-image-text { display: block; }
.flowpress-image-text::after { content: ""; display: table; clear: both; }

.flowpress-image-text .fp-it-image-wrap { margin: 0; }

.flowpress-image-text .fp-it-image {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}

.flowpress-image-text .fp-it-title {
	font-weight: 600;
	margin-bottom: 6px;
	text-align: center;
}

.flowpress-image-text .fp-it-caption {
	display: block;
	font-size: 0.875em;
	color: #666;
	margin-top: 6px;
	text-align: center;
}

.flowpress-image-text .fp-it-text p:last-child { margin-bottom: 0; }

/* ── Table widget ─────────────────────────────────────────────────────────── */

.fp-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fp-table {
	width: 100%;
	/* Minimum width is set per-widget (see the "Minimum Table Width" control) —
	   below that, the .fp-table-scroll wrapper above scrolls horizontally
	   instead of squeezing columns further. */
	border-collapse: collapse;
}
.fp-table th,
.fp-table td {
	border: 1px solid #e0e0e0;
	padding: 10px;
	text-align: left;
	vertical-align: top;
}
.fp-table th {
	background: #2c3e50;
	color: #fff;
	font-weight: 600;
}

/* Lists inside table cells — same custom flex/marker approach as
   .flowpress-text (see below there for why), so the FP Table widget's own
   "Lists in Cells" spacing sliders (Bullet/Number Spacing, Item Spacing)
   work the same way authors already know from the text widget. */
.fp-table td ul,
.fp-table td ol,
.fp-table th ul,
.fp-table th ol {
	display: flex !important;
	flex-direction: column !important;
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.fp-table td ul li,
.fp-table td ol li,
.fp-table th ul li,
.fp-table th ol li {
	position: relative;
	padding-inline-start: 20px;
}
.fp-table td ul li::before,
.fp-table th ul li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
}
.fp-table td ol,
.fp-table th ol { counter-reset: fp-table-ol-counter; }
.fp-table td ol li,
.fp-table th ol li { counter-increment: fp-table-ol-counter; }
.fp-table td ol li::before,
.fp-table th ol li::before {
	content: counter(fp-table-ol-counter) ".";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
}
.fp-table td ul ul, .fp-table td ul ol, .fp-table td ol ul, .fp-table td ol ol,
.fp-table th ul ul, .fp-table th ul ol, .fp-table th ol ul, .fp-table th ol ol {
	margin: 0;
}

/* Canvas editing chrome — only ever present inside the Elementor preview
   iframe (flowpress-table.js only adds data-widget-id in edit mode). */
.fp-table-toolbar {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.fp-table-toolbar-btn {
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border: none;
	border-radius: 4px;
	background: #6c63ff;
	color: #fff;
	cursor: pointer;
}
.fp-table-toolbar-btn:hover { background: #5a52d5; }

/* Cells are directly editable (type right into one) and also open their
   matching row in the panel when clicked (Elementor's own repeater "click to
   edit" wiring) — this is a hover/focus cue for both. */
.fp-table[data-widget-id] th,
.fp-table[data-widget-id] td {
	outline: 1px dashed transparent;
	cursor: text;
}
.fp-table[data-widget-id] th:hover,
.fp-table[data-widget-id] td:hover,
.fp-table[data-widget-id] th:focus,
.fp-table[data-widget-id] td:focus {
	outline-color: #6c63ff;
}

.fp-table-actions-cell {
	border: none !important;
	padding: 2px !important;
	width: 22px;
	text-align: center !important;
	background: transparent !important;
}
.fp-table-actions-row .fp-table-actions-cell { padding-bottom: 6px !important; }

.fp-table-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	line-height: 1;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #c0392b;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.fp-table-btn:hover { background: #992d22; }

/* ── Docx Upload widget (canvas) ─────────────────────────────────────────── */

.fp-docx-upload {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.fp-du-header {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	background: #f0eeff;
	border-bottom: 1px solid #ddd;
	color: #6c63ff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.fp-du-dropzone {
	/* A <label> (not a <div>) as of the PHP template — labels default to
	   inline, and this needs to stay block to keep its existing box/padding
	   layout, plus it's what makes the *entire* dashed area natively open the
	   file picker on click (no JS needed for that part at all: clicking
	   anywhere inside a <label> activates the form control it wraps). */
	display: block;
	position: relative;
	margin: 16px;
	padding: 2rem 1rem;
	border: 1.5px dashed #b4b2a9;
	border-radius: 10px;
	text-align: center;
	color: #6b6a64;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.fp-du-dropzone:hover,
.fp-du-dropzone.fp-du-dragging { border-color: #6c63ff; background: #f5f4ff; }

/* Visually hidden rather than `display:none` — some assistive tech doesn't
   reliably activate a form control its label wraps once the control itself
   is removed from the render tree entirely, so this keeps it "present" (just
   invisible and out of the way) instead. Every property here is load-bearing
   for that and !important specifically so nothing else on the page (a theme
   or admin-area reset targeting `input[type=file]`, say) can partially
   override just one of them and leave the raw browser control peeking
   through — which is exactly what a plain `display:none`-less reset would
   do if it forced width/height back to auto here. */
.fp-du-file-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
}

.fp-du-dz-text { margin: 0; }

.fp-du-status {
	padding: 0 16px 16px;
	font-size: 12px;
	min-height: 14px;
}

.fp-du-badge {
	display: inline-block;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 8px;
}

.fp-du-badge-ok   { background: #eaf3de; color: #3b6d11; }
.fp-du-badge-warn { background: #faeeda; color: #854f0b; }
.fp-du-badge-info { background: #e6f1fb; color: #185fa5; }