/* ==========================================================================
   Avira site footer (site-footer.css)
   --------------------------------------------------------------------------
   Loaded only while Theme Options → Footer → "Use this footer" is on.

   Rules of the house
   - Every selector starts with .avira-footer and uses classes (never bare
     a / h2 / button): the Elementor kit styles those elements site-wide
     (.elementor-kit-35 a / h2 / button set font size, line height and letter
     spacing) and Hello's reset colours every link and button. Class selectors
     win on specificity whatever the load order.
   - Spacing comes from gap and padding, not margins: the kit zeroes p and
     heading margins.

   Colour (all on #4C5F49, WCAG 2.2 relative luminance)
     --af-ink    #F4F3EE  6.2:1  headings, phone, email
     --af-link   #E4E7E0  5.5:1  links at rest
     --af-muted  #DDE2D9  5.3:1  labels, copyright
     --af-hover  #FFFFFF  6.9:1  hover, pressed, current
     --af-accent #C29063  2.5:1  DECORATIVE ONLY (the small rule over each
                                 heading). It never carries text or state.
   The previous footer dimmed #F6F6F6 to 75% opacity, which lands on #CCD0CB,
   4.4:1: just under the AA line for body text.

   Targets: 44px for touch (pointer: coarse), never below 32px otherwise
   (WCAG 2.2 SC 2.5.8 asks for 24px).
   ========================================================================== */

.avira-footer {
	--af-bg: #4c5f49;
	--af-ink: #f4f3ee;
	--af-link: #e4e7e0;
	--af-muted: #dde2d9;
	--af-hover: #ffffff;
	--af-accent: #c29063;
	--af-focus: #f4f3ee;
	--af-rule: rgba(244, 243, 238, 0.22);
	--af-panel: rgba(2, 1, 1, 0.16);
	--af-panel-rule: rgba(244, 243, 238, 0.18);
	--af-outline: rgba(244, 243, 238, 0.55);
	--af-radius: 1rem;

	/* Overridden inline by the template from Theme Options. */
	--af-cols: 4;
	--af-cols-t: 3;
	--af-map-h: 300px;
	--af-map-h-m: 240px;
	--af-logo-h: 64px;

	box-sizing: border-box;
	background: var(--af-bg);
	color: var(--af-link);
	border-radius: 1.5rem 1.5rem 0 0;
	font-family: 'Founders Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}

.avira-footer *,
.avira-footer *::before,
.avira-footer *::after {
	box-sizing: border-box;
}

.avira-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(3rem, 6vmax, 5rem) clamp(1.25rem, 4vw, 4rem) 0;
}

/* --------------------------------------------------------------------------
   Links: one recipe for every link in the footer
   States: rest / hover / pressed / keyboard focus / current page / section
   -------------------------------------------------------------------------- */

.avira-footer .avira-footer__link,
.avira-footer .avira-footer__contact-link {
	display: inline-block;
	margin: 0 0 0 -0.5rem;
	padding: 0.25rem 0.5rem;
	min-height: 2rem;
	border: 0;
	border-radius: 0.375rem;
	background: transparent;
	color: var(--af-link);
	font: inherit;
	line-height: 1.35;
	letter-spacing: 0;
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	scroll-margin-block: 6rem;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* Hover */
.avira-footer .avira-footer__link:hover,
.avira-footer .avira-footer__contact-link:hover {
	color: var(--af-hover);
	text-decoration: underline;
}

/* Pressed */
.avira-footer .avira-footer__link:active,
.avira-footer .avira-footer__contact-link:active {
	color: var(--af-hover);
	background: rgba(255, 255, 255, 0.14);
	text-decoration: underline;
}

/* Current page (WordPress marks it aria-current="page" and .current-menu-item),
   current section (script sets aria-current="location"). Not by colour alone:
   heavier weight and a thicker underline as well. */
.avira-footer .avira-footer__link[aria-current="page"],
.avira-footer .avira-footer__link[aria-current="location"],
.avira-footer .current-menu-item > .avira-footer__link {
	color: var(--af-hover);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Parent of the current page (page hierarchy): emphasised, not underlined. */
.avira-footer .current-menu-parent > .avira-footer__link,
.avira-footer .current-menu-ancestor > .avira-footer__link {
	color: var(--af-hover);
	font-weight: 600;
}

/* Keyboard focus: 2px ring, 6.2:1 against the olive, offset so it never
   touches the glyphs. */
.avira-footer :is(a, button):focus-visible {
	outline: 2px solid var(--af-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Top band: logo, call / email, social
   -------------------------------------------------------------------------- */

.avira-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	padding-bottom: 3rem;
}

.avira-footer .avira-footer__logo {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	border-radius: 0.5rem;
	color: var(--af-ink);
	text-decoration: none;
}

.avira-footer .avira-footer__logo-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--af-logo-h);
}

.avira-footer .avira-footer__logo-text {
	color: var(--af-ink);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.avira-footer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem 3rem;
}

.avira-footer .avira-footer__reach {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 3rem;
	margin: 0;
	padding: 0;
	font-style: normal;
}

.avira-footer .avira-footer__reach-item {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
}

.avira-footer .avira-footer__label {
	color: var(--af-muted);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.avira-footer .avira-footer__contact-link {
	color: var(--af-ink);
	font-size: 1.25rem;
	font-weight: 600;
}

.avira-footer .avira-footer__social {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.avira-footer .avira-footer__social li {
	margin: 0;
	padding: 0;
}

.avira-footer .avira-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--af-outline);
	border-radius: 50%;
	background: transparent;
	color: var(--af-ink);
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.avira-footer .avira-footer__social-link:hover {
	background: var(--af-ink);
	color: var(--af-bg);
}

.avira-footer .avira-footer__social-link:active {
	background: var(--af-muted);
	color: var(--af-bg);
}

.avira-footer .avira-footer__icon {
	display: block;
	flex: 0 0 auto;
	fill: currentColor;
}

.avira-footer .avira-footer__icon--arrow {
	fill: none;
}

/* --------------------------------------------------------------------------
   Link columns
   -------------------------------------------------------------------------- */

.avira-footer__nav {
	display: grid;
	grid-template-columns: repeat(var(--af-cols, 4), minmax(0, 1fr));
	gap: 3rem;
	padding-block: 3rem;
	border-block: 1px solid var(--af-rule);
}

.avira-footer__group {
	min-width: 0;
}

/* The heading carries a small tan rule. Decorative: it has no text and no
   state, so its 2.5:1 contrast is not a requirement. */
.avira-footer .avira-footer__title {
	position: relative;
	margin: 0 0 0.75rem;
	padding: 0.875rem 0 0;
	color: var(--af-ink);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.avira-footer .avira-footer__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.75rem;
	height: 2px;
	background: var(--af-accent);
}

.avira-footer .avira-footer__link--title {
	color: var(--af-ink);
	font-weight: 700;
}

.avira-footer .avira-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.avira-footer .avira-footer__item {
	margin: 0;
	padding: 0;
	break-inside: avoid;
}

/* Sixteen suburbs read better in two columns. */
.avira-footer .avira-footer__group--areas .avira-footer__list {
	column-count: 2;
	column-gap: 2rem;
}

.avira-footer .avira-footer__group--areas .avira-footer__item .avira-footer__link {
	font-size: 1rem;
}

.avira-footer .avira-footer__hint {
	margin: 0;
	padding: 0.625rem 0.75rem;
	border: 1px dashed var(--af-outline);
	border-radius: 0.5rem;
	color: var(--af-muted);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.avira-footer .avira-footer__hint a {
	color: var(--af-ink);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Visit band: clinic address + map
   -------------------------------------------------------------------------- */

.avira-footer__visit {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.5rem 3rem;
	align-items: stretch;
	padding-block: 3rem 3.5rem;
}

.avira-footer .avira-footer__clinic {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 2rem;
	border: 1px solid var(--af-panel-rule);
	border-radius: var(--af-radius);
	background: var(--af-panel);
}

.avira-footer .avira-footer__address {
	margin: 0;
	padding: 0;
	color: var(--af-link);
	font-style: normal;
	line-height: 1.45;
}

.avira-footer .avira-footer__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1.125rem;
	border: 1px solid var(--af-outline);
	border-radius: 999px;
	background: transparent;
	color: var(--af-ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.avira-footer .avira-footer__cta:hover {
	background: var(--af-ink);
	color: var(--af-bg);
}

.avira-footer .avira-footer__cta:active {
	background: var(--af-muted);
	color: var(--af-bg);
}

.avira-footer .avira-footer__map-wrap {
	grid-column: span 8;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The box keeps its height before the frame loads (no layout shift) and stretches
   to the clinic card when that is taller. The pale ground is what shows while
   the frame loads and behind the click-to-load button. */
.avira-footer .avira-footer__map {
	position: relative;
	flex: 1 1 auto;
	min-height: var(--af-map-h);
	overflow: hidden;
	border-radius: var(--af-radius);
	background-color: #e4e7dc;
}

.avira-footer .avira-footer__map--facade {
	background-image:
		linear-gradient(90deg, rgba(76, 95, 73, 0.1) 1px, transparent 1px),
		linear-gradient(0deg, rgba(76, 95, 73, 0.1) 1px, transparent 1px),
		linear-gradient(115deg, transparent 46%, #ffffff 46%, #ffffff 48%, transparent 48%),
		linear-gradient(25deg, transparent 60%, #f6f3ed 60%, #f6f3ed 63%, transparent 63%);
	background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}

.avira-footer .avira-footer__map-frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.avira-footer .avira-footer__map-btn {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding: 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--af-bg);
	font: inherit;
	font-size: 1rem;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.avira-footer .avira-footer__map-btn-text {
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--af-bg);
	color: var(--af-ink);
	font-weight: 700;
	transition: background-color 0.15s ease;
}

.avira-footer .avira-footer__map-btn:hover .avira-footer__map-btn-text {
	background: #3e4e3b;
}

.avira-footer .avira-footer__map-btn:active .avira-footer__map-btn-text {
	background: #34432f;
}

.avira-footer .avira-footer__map-note {
	color: #020101;
	font-size: 0.875rem;
}

.avira-footer .avira-footer__map-btn:focus-visible {
	outline-color: var(--af-bg);
	outline-offset: -6px;
}

/* Map switched off: the address card takes the full row. */
.avira-footer__visit--nomap .avira-footer__clinic {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */

.avira-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.75rem 2rem;
	border-top: 1px solid var(--af-rule);
}

.avira-footer .avira-footer__copy {
	margin: 0;
	color: var(--af-muted);
	font-size: 1rem;
	line-height: 1.4;
}

.avira-footer .avira-footer__legal .avira-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	margin-right: -0.5rem;
}

.avira-footer .avira-footer__legal .avira-footer__link {
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Visually hidden text and the "Skip map" link
   -------------------------------------------------------------------------- */

.avira-footer .avira-footer__sr,
.avira-footer .avira-footer__skip:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.avira-footer .avira-footer__skip:focus {
	position: absolute;
	z-index: 2;
	top: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--af-ink);
	color: var(--af-bg);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Touch: 44px targets
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
	.avira-footer .avira-footer__link,
	.avira-footer .avira-footer__contact-link {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.avira-footer {
		font-size: 1rem;
	}

	.avira-footer__nav {
		grid-template-columns: repeat(var(--af-cols-t, 3), minmax(0, 1fr));
		gap: 2.5rem 2rem;
	}

	.avira-footer .avira-footer__group--areas {
		grid-column: 1 / -1;
	}

	.avira-footer .avira-footer__group--areas .avira-footer__list {
		column-count: 4;
	}

	.avira-footer__visit {
		grid-template-columns: minmax(0, 1fr);
	}

	.avira-footer .avira-footer__clinic,
	.avira-footer .avira-footer__map-wrap {
		grid-column: 1 / -1;
	}

	.avira-footer .avira-footer__clinic {
		flex-direction: row;
		align-items: center;
		padding: 1.75rem 2rem;
	}

	.avira-footer .avira-footer__contact-link {
		font-size: 1.125rem;
	}
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.avira-footer {
		border-radius: 1.25rem 1.25rem 0 0;
	}

	.avira-footer__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"logo social"
			"reach reach";
		gap: 1.5rem 1rem;
		padding-bottom: 2.5rem;
	}

	.avira-footer__contact {
		display: contents;
	}

	.avira-footer .avira-footer__logo {
		grid-area: logo;
		justify-self: start;
	}

	.avira-footer .avira-footer__social {
		grid-area: social;
	}

	.avira-footer .avira-footer__reach {
		grid-area: reach;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.avira-footer__nav {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding-block: 2.5rem;
	}

	.avira-footer .avira-footer__group--areas {
		grid-column: auto;
	}

	.avira-footer__nav .avira-footer__list,
	.avira-footer .avira-footer__group--areas .avira-footer__list {
		column-count: 2;
		column-gap: 1.5rem;
	}

	.avira-footer__visit {
		padding-block: 2.5rem;
	}

	.avira-footer .avira-footer__clinic {
		flex-direction: column;
		align-items: stretch;
		padding: 1.5rem;
	}

	.avira-footer .avira-footer__cta {
		align-self: stretch;
		justify-content: center;
	}

	.avira-footer .avira-footer__map {
		min-height: var(--af-map-h-m);
	}

	.avira-footer .avira-footer__legal .avira-footer__list {
		flex-direction: column;
		gap: 0;
	}

	.avira-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		padding-block: 1.5rem 2rem;
	}
}

/* Very narrow phones: one column of links, so nothing breaks mid-word. */
@media (max-width: 359px) {
	.avira-footer__nav .avira-footer__list,
	.avira-footer .avira-footer__group--areas .avira-footer__list {
		column-count: 1;
	}
}

/* --------------------------------------------------------------------------
   User preferences and media
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.avira-footer,
	.avira-footer * {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.avira-footer :is(a, button):focus-visible {
		outline-color: Highlight;
	}

	.avira-footer .avira-footer__link,
	.avira-footer .avira-footer__contact-link {
		color: LinkText;
	}

	.avira-footer .avira-footer__link[aria-current],
	.avira-footer .current-menu-item > .avira-footer__link {
		text-decoration: underline;
	}

	.avira-footer .avira-footer__cta,
	.avira-footer .avira-footer__social-link,
	.avira-footer .avira-footer__clinic {
		border-color: ButtonText;
	}
}

@media print {
	.avira-footer {
		background: none;
		color: #000000;
	}

	.avira-footer .avira-footer__map-wrap,
	.avira-footer .avira-footer__social,
	.avira-footer .avira-footer__cta {
		display: none;
	}

	.avira-footer .avira-footer__link,
	.avira-footer .avira-footer__contact-link,
	.avira-footer .avira-footer__title,
	.avira-footer .avira-footer__label,
	.avira-footer .avira-footer__copy,
	.avira-footer .avira-footer__address {
		color: #000000;
	}
}