/* ==========================================================================
   Sidebar Widget — Contact Info Card
   --------------------------------------------------------------------------
   Styles the phone + address info card (Figma node 431:2266).
   Reads icons via inline SVG (currentColor) so colour inherits from teal token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Widget aside wrapper — strip GeneratePress inner-padding
   -------------------------------------------------------------------------- */
.azuri-contact-info-widget.widget {
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */
.azuri-contact-info__card {
	background: var(--azuri-color-white);
	border: 0.5px solid #deeaec;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-4);                   /* 16px between phone row and address row */
	padding: var(--azuri-space-6) var(--azuri-space-6) 0; /* 24px top/sides, flush bottom — content provides own spacing */
	padding-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Row — icon + content side by side
   -------------------------------------------------------------------------- */
.azuri-contact-info__row {
	align-items: flex-start;
	display: flex;
	gap: var(--azuri-space-4); /* 16px — matches Figma left:32px offset (icon 14-16px + gap) */
}

/* --------------------------------------------------------------------------
   Icon wrapper
   -------------------------------------------------------------------------- */
.azuri-contact-info__icon {
	color: var(--azuri-sidebar-accent, var(--azuri-color-teal));
	flex-shrink: 0;
	line-height: 1;
	margin-top: 3px; /* optical alignment with the meta label */
}

.azuri-contact-info__icon--phone {
	width: 14px;
	height: 14px;
}

.azuri-contact-info__icon--address {
	width: 16px;
	height: 16px;
}

.azuri-contact-info__icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
.azuri-contact-info__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Small grey label ("Phone", "Address") */
.azuri-contact-info__meta-label {
	color: #9aabb8;
	display: block;
	font-family: var(--azuri-font-family-base);
	font-size: 12px;
	font-weight: var(--azuri-font-weight-regular);
	line-height: 18px;
}

/* Main value text (phone number, address lines) */
.azuri-contact-info__value {
	color: var(--azuri-color-ink);
	font-family: var(--azuri-font-family-base);
	font-weight: var(--azuri-font-weight-medium);
	line-height: 1.5;
	text-decoration: none;
}

.azuri-contact-info__value--phone {
	font-size: 15px;
	letter-spacing: -0.2344px;
	line-height: 22.5px;
}

.azuri-contact-info__value--phone:hover {
	color: var(--azuri-sidebar-accent, var(--azuri-color-teal));
}

/* Address: two lines stacked */
.azuri-contact-info__value--address {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	font-weight: var(--azuri-font-weight-regular);
	letter-spacing: -0.1504px;
	line-height: 22.4px;
}

.azuri-contact-info__value--address:is(a):hover {
	color: var(--azuri-sidebar-accent, var(--azuri-color-teal));
}