.nh-announcement {
    --nh-announcement-indent: clamp(20px, 11.5vw, 164px);
    background: color-mix(in srgb, var(--nh-softblue) 17%, #fff);
    padding-block: clamp(40px, 5.5vw, 72px);
}

.nh-announcement__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: var(--nh-announcement-indent) 20px;

}

.nh-announcement__eyebrow {
    margin: 0px 0px clamp(15px, 1.9vw, 22px);
    padding: 0.5em 0.5em;
    background: var(--nh-blue);
    color: rgb(255, 255, 255);
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.nh-announcement__text {
    max-width: 24em;
    margin: 0px;
    color: var(--nh-blue);
    font-size: clamp(1.375rem, 2.2vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
}

.nh-announcement__button {
    margin: clamp(22px, 1.8vw, 22px) 0 0 calc(-1 * var(--nh-announcement-indent));
    padding: 0.7em 1.8em 0.7em var(--nh-announcement-indent);
    background: var(--nh-blue);
    border-radius: 0px 4px 4px 0px;
    color: rgb(255, 255, 255);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    font-size: clamp(0.9rem, 1.6vw, 1.6rem);
}

.nh-announcement__button:hover, .nh-announcement__button:focus-visible {
    color: rgb(255, 255, 255);
    box-shadow: rgba(13, 74, 103, 0.19) 0px 0px 80px;
    text-shadow: rgba(5, 51, 115, 0.81) 0px 0px 30px;
    transform: scale(1.02);
}

.nh-announcement__button:focus-visible {
    outline: 2px solid var(--nh-blue);
    outline-offset: 3px;
}
/* Segno grafico: linea gialla da destra che termina con pallino e cerchio accanto al testo. */
.nh-announcement {
	--nh-signal-gap: clamp(32px, 5vw, 72px);  /* distanza tra testo e cerchio */
	--nh-signal-ring: 30px;                   /* diametro del cerchio */
	overflow: hidden;                         /* fallback */
	overflow: clip;                           /* la linea si ferma al bordo della finestra, senza scroll orizzontale */
}

.nh-announcement__text {
	position: relative;
}

@media (min-width: 900px) {
	/* Cerchio con pallino pieno al centro: sopra la linea, che vi entra fino al centro. */
	.nh-announcement__text::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 50%;
		left: calc(100% + var(--nh-signal-gap));
		width: var(--nh-signal-ring);
		height: var(--nh-signal-ring);
		box-sizing: border-box;
		border: 1.5px solid var(--nh-yellow);
		border-radius: 50%;
		background: radial-gradient(circle, var(--nh-yellow) 4.5px, transparent 4px);
		transform: translateY(-50%);
	}

	/* Linea: dal centro del cerchio fino al bordo della finestra, centrata in verticale. */
	.nh-announcement__text::after {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(100% + var(--nh-signal-gap) + var(--nh-signal-ring) / 2);
		width: 100vw;
		height: 1.5px;
		background: var(--nh-yellow);
		transform: translateY(-50%);
	}
}
/* Il contorno del focus resta dentro il pulsante: con overflow: clip uscirebbe tagliato a sinistra. */
.nh-announcement__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}