/* ============================================================
   Use Case Box — Estilos del Bloque
   Condor Agency / Blog Module
   Aplica tanto en el editor Gutenberg como en el frontend.
   ============================================================ */


/* ──────────────────────────────────────────────────────────────
   Wrapper externo (espacio para el badge colgante)
   ────────────────────────────────────────────────────────────── */
.usecase-wrapper {
	position:      relative;
	padding-top:   16px;
	margin-top:    1.5em;
	margin-bottom: 1.5em;
	max-width:     100%;
}

.wp-block-condor-usecase-box.usecase-wrapper {
	overflow: visible !important;
}


/* ──────────────────────────────────────────────────────────────
   Card / contenedor principal — fondo azul claro
   ────────────────────────────────────────────────────────────── */
.usecase-box {
	position:         relative;
	border:           1px solid #BFE3F2;
	border-radius:    14px;
	padding:          32px 36px 34px;
	background-color: #EAF6FC;
	box-sizing:       border-box;
}


/* ──────────────────────────────────────────────────────────────
   Badge / Label — cyan con texto blanco
   ────────────────────────────────────────────────────────────── */
.usecase-box__label-wrap {
	position: absolute;
	top:      -15px;
	left:     22px;
	z-index:  2;
}

.usecase-box__label {
	display:          inline-block;
	background-color: #29B6D8;
	color:            #ffffff;
	font-family:      inherit;
	font-size:        11.5px;
	font-weight:      700;
	line-height:      1.6;
	padding:          3px 14px;
	border-radius:    0;
	letter-spacing:   0.015em;
	white-space:      nowrap;
}


/* ──────────────────────────────────────────────────────────────
   Secciones
   ────────────────────────────────────────────────────────────── */
.usecase-box .usecase-sections {
	margin:  0;
	padding: 0;
}

.usecase-box .usecase-section {
	position:      relative;
	margin:        0 0 22px 0;
	padding:       0;
}

.usecase-box .usecase-section:last-child {
	margin-bottom: 0;
}

/* Título subrayado */
.usecase-box .usecase-section__heading {
	margin:               0 0 6px 0;
	padding:              0;
	font-size:            16px;
	font-weight:          700;
	line-height:          1.4;
	color:                #1a1a1a;
	text-decoration:      underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Párrafo */
.usecase-box .usecase-section__body {
	margin:      0;
	padding:     0;
	font-size:   15px;
	line-height: 1.75;
	color:       #333333;
}

.usecase-box .usecase-section__body strong {
	font-weight: 700;
	color:       #111111;
}

.usecase-box .usecase-section__body a {
	color:           #1f7fa6;
	text-decoration: underline;
}


/* ──────────────────────────────────────────────────────────────
   Editor overrides
   ────────────────────────────────────────────────────────────── */

/* Badge RichText hereda estilos del label */
.usecase-box__label-wrap .rich-text,
.usecase-box__label-wrap .block-editor-rich-text__editable {
	display:          inline-block;
	background-color: #29B6D8;
	color:            #ffffff;
	font-size:        11.5px;
	font-weight:      700;
	line-height:      1.6;
	padding:          3px 14px;
	border-radius:    0;
	letter-spacing:   0.015em;
	white-space:      nowrap;
	border:           none;
	outline:          none;
	min-width:        44px;
	cursor:           text;
	box-shadow:       none;
}

.usecase-box__label-wrap .rich-text:focus,
.usecase-box__label-wrap .block-editor-rich-text__editable:focus {
	box-shadow: 0 0 0 2px #007cba;
}

/* Mantener el subrayado del heading editable dentro del editor */
.usecase-box .usecase-section__heading.block-editor-rich-text__editable {
	text-decoration: underline;
}

/* Botón eliminar sección — solo visible en hover (editor) */
.usecase-section__remove {
	position:   absolute;
	top:        -2px;
	right:      -8px;
	opacity:    0;
	transition: opacity 0.15s ease;
	color:      #cc1818 !important;
}

.usecase-section:hover .usecase-section__remove {
	opacity: 1;
}

/* Botón "Agregar sección" */
.usecase-add-btn {
	margin-top: 18px !important;
	display:    inline-flex !important;
}