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


/* ──────────────────────────────────────────────────────────────
   Wrapper externo
   Genera el espacio superior para que el badge no quede cortado.
   ────────────────────────────────────────────────────────────── */
.definition-box-wrapper {
	position:      relative;
	padding-top:   16px;    /* espacio para el badge colgante */
	margin-top:    1.5em;
	margin-bottom: 1.5em;
	max-width:     100%;
}


/* ──────────────────────────────────────────────────────────────
   Card / contenedor principal
   ────────────────────────────────────────────────────────────── */
.definition-box {
	position:         relative;
	border:           1.5px solid #FFCC29;
	border-radius:    0px 54px;
	padding:          26px 30px 28px;
	background-color: #ffffff;
	box-sizing:       border-box;
}


/* ──────────────────────────────────────────────────────────────
   Badge / Label
   Posicionado para que solape el borde superior de la card.
   ────────────────────────────────────────────────────────────── */
.definition-box__label-wrap {
	position: absolute;
	top:      -15px;  /* mitad de la altura del badge (~28px total) */
	left:     22px;
	z-index:  2;
}

.definition-box__label {
	display:          inline-block;
	background-color: #FFCC29;
	color:            #1a1a1a;
	font-family:      inherit;
	font-size:        11.5px;
	font-weight:      700;
	line-height:      1.6;
	padding:          3px 14px;
	border-radius:    0px;
	letter-spacing:   0.015em;
	white-space:      nowrap;
	text-transform:   none;
}


/* ──────────────────────────────────────────────────────────────
   Cuerpo / Rich Text
   ────────────────────────────────────────────────────────────── */
.definition-box__content {
	margin:      0;
	padding:     0;
	font-size:   15px;
	line-height: 1.8;
	color:       #333333;
}

.definition-box__content strong {
	font-weight: 700;
	color:       #111111;
}


/* ──────────────────────────────────────────────────────────────
   Editor overrides — aplica solo dentro del editor Gutenberg
   ────────────────────────────────────────────────────────────── */

/*
 * El RichText del badge hereda todos los estilos visuales del label.
 * .rich-text        → clase base del componente RichText en el editor
 * .block-editor-rich-text__editable → clase del área editable activa
 */
.definition-box__label-wrap .rich-text,
.definition-box__label-wrap .block-editor-rich-text__editable {
	display:          inline-block;
	background-color: #F5B800;
	color:            #1a1a1a;
	font-size:        11.5px;
	font-weight:      700;
	line-height:      1.6;
	padding:          3px 14px;
	border-radius:    5px;
	letter-spacing:   0.015em;
	white-space:      nowrap;
	border:           none;
	outline:          none;
	min-width:        44px;
	cursor:           text;
	box-shadow:       none;
}

/* Ring de foco cuando se edita el badge */
.definition-box__label-wrap .rich-text:focus,
.definition-box__label-wrap .block-editor-rich-text__editable:focus {
	box-shadow: 0 0 0 2px #007cba;
}

/* Ajuste tipográfico del content area en el editor
   Evita que el placeholder quede desalineado */
.definition-box .block-editor-rich-text__editable[data-type="p"].definition-box__content {
	margin: 0;
}

/* Asegurar que el badge no se recorte si el tema tiene overflow: hidden */
.wp-block-condor-definition-box.definition-box-wrapper {
	overflow: visible !important;
}