.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* ============================================================================
   Astràgali Teatro — Site Footer (Theme Builder template #143)

   The footer-link / footer-heading hover (white fill + ink label) lives on the
   two global classes of the same name — edit it in Site Settings, not here.

   This file only does what a global class cannot express:
   1. footer-link is also used for plain, unlinked text (address, credits, the
      About paragraph, the legal line). Those must not light up on hover.
   2. the inner <a> of a linked paragraph is `all: unset`, which loses to the
      kit's own `.elementor-kit-5 a:hover` — so the label would go accent-berry
      on the white fill instead of ink.
   3. that same `all: unset` leaves the link with no focus style, so keyboard
      focus is mirrored onto the span and reads exactly like hover.
   4. the social icons are bare glyphs with no box of their own, so their fill
      is a chip painted behind them.
   ============================================================================ */

/* 1 — plain text keeps its default look on hover */
.elementor-143 .footer-link:not(:has(> a.e-paragraph-link-base)):hover {
	background-color: transparent;
	color: var(--color-white);
}

/* the legal line carries its own inline <a>s: highlight those, not the line */
.elementor-143 .footer-link > a:not(.e-paragraph-link-base) {
	transition: background-color 200ms var(--astr-ease), color 200ms var(--astr-ease);
}

.elementor-143 .footer-link > a:not(.e-paragraph-link-base):hover,
.elementor-143 .footer-link > a:not(.e-paragraph-link-base):focus-visible {
	background-color: var(--color-white);
	color: var(--color-ink);
}

/* 2 — the label on the white fill is ink, not the kit's accent */
.elementor-143 .footer-link:hover > a.e-paragraph-link-base,
.elementor-143 .footer-link:focus-within > a.e-paragraph-link-base,
.elementor-143 .footer-heading:hover > a.e-paragraph-link-base,
.elementor-143 .footer-heading:focus-within > a.e-paragraph-link-base {
	color: var(--color-ink);
}

/* 3 — keyboard focus reads exactly like hover */
.elementor-143 .footer-link:has(> a.e-paragraph-link-base):focus-within,
.elementor-143 .footer-heading:focus-within {
	background-color: var(--color-white);
	color: var(--color-ink);
}

/* the ring has to sit on the white fill, so it is salmon like the Bookshop's */
.elementor-143 .footer-link a:focus-visible,
.elementor-143 .footer-heading a:focus-visible,
.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base:focus-visible {
	outline: 2px solid var(--color-salmon);
	outline-offset: 3px;
}

/* ==========================================================================
   4 — Social icons: the same white fill + ink glyph

   Each icon is an <a class="e-svg-base"> sized exactly to its glyph, with no
   padding to fill, so the chip is painted by ::before on a negative inset.
   The icon itself is lifted with z-index: 1 rather than pushing the chip to
   -1, because nothing between here and the footer background opens a stacking
   context that a negative layer could rely on. Nothing here changes the icon
   size or the row's gap, so the fill costs no layout.
   ========================================================================== */
.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base {
	position: relative;
	transition: color 200ms var(--astr-ease);
}

.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base > svg {
	position: relative;
	z-index: 1;
}

.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base::before {
	content: "";
	position: absolute;
	inset: -.4rem -.45rem;
	border: 1px solid transparent;
	background-color: transparent;
	transition: background-color 200ms var(--astr-ease), border-color 200ms var(--astr-ease);
	pointer-events: none;
}

.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base:hover,
.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base:focus-visible {
	color: var(--color-ink);
}

.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base:hover::before,
.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base:focus-visible::before {
	background-color: var(--color-white);
	border-color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-143 .footer-link,
	.elementor-143 .footer-link > a,
	.elementor-143 .footer-heading,
	.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base,
	.elementor-143 .elementor-element-4f66ab85 > a.e-svg-base::before {
		transition: none !important;
	}
}/* End custom CSS */