/*
 * DiunaDent — site footer.
 *
 * Mobile-first. Everything is a centered column by default; the ≤990px
 * breakpoint only tunes spacing, since the layout is already stacked.
 */

/*
 * The bottom padding also clears the floating CTA. It is the last thing on the
 * page, so anything inside the pill's corner at full scroll cannot be scrolled
 * out from under it — and what sits there is the legal row, including the
 * "Ustawienia cookies" control that has to stay reachable. The strip it needs is
 * --dd-cta-reserve (main.css), so the number is not repeated per breakpoint here.
 */
.dd-footer {
	background: var(--dd-color-black);
	clip-path: polygon(0 clamp(18px, 4vw, 48px), 100% 0, 100% 100%, 0 100%);
	padding-block-start: clamp(3rem, 8vw, 5rem);
	padding-block-end: max(clamp(2rem, 5vw, 3rem), var(--dd-cta-reserve));
	margin-block-start: clamp(18px, 4vw, 48px);
}

/*
 * The diagonal top edge is a cut, so it shows whatever is painted behind the
 * footer — and that is the page background. On the subpages it cuts into white
 * and reads as intended. On the front page the hero above ends in near-black,
 * and the same cut drew a white band across the full width between two dark
 * blocks: 18px at 390, 48px at 1440 and 1920, the last thing a visitor sees.
 * The front page ends dark, so its background does too — the hero's own colour
 * (hero.css, .dd-hero__slide), not black, so the wedge stays a wedge.
 */
body.home {
	background-color: #0a0806;
}

.dd-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

.dd-footer__logo {
	width: 200px;
	max-width: 60vw;
	height: auto;
}

.dd-footer__address {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

/*
 * The clinic's name is not a line of the address here — the logo directly
 * above it is the name, set larger and in the brand's own lettering, and
 * spelling it out again underneath simply said it twice. So the block starts
 * at the street.
 */
.dd-footer__address-line {
	margin: 0;
	font-family: var(--dd-font-body);
	color: #cccccc;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/*
 * The e-mail sits inside the address block and inherits its colour and size;
 * only the link states are its own, and they are the ones the phone number in
 * the CTA block already uses, so a footer does not grow a third link idiom.
 */
.dd-footer__email {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid rgba(255, 255, 255, 0.25);
}

.dd-footer__email:hover,
.dd-footer__email:focus-visible {
	color: var(--dd-color-accent-light);
	border-block-end-color: currentColor;
}

/*
 * Opening hours.
 *
 * Two columns, and they are set as a grid rather than as a row per line for one
 * reason: the times have to line up under each other. With three rows reading
 * "pn, śr, pt", "wt, czw" and "sob, nd", a flex row centres each pair on its own
 * width and the three times land in three different places — which reads as
 * three unrelated facts instead of one timetable. `max-content` on both tracks
 * keeps the block as narrow as its content and still aligned.
 *
 * The whole thing is centred as a block inside the centred column, so the
 * timetable is centred while its columns stay left- and right-aligned to each
 * other.
 */
.dd-footer__hours {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.dd-footer__hours-heading {
	margin: 0;
	font-family: var(--dd-font-body);
	color: #cccccc;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dd-footer__hours-list {
	display: grid;
	grid-template-columns: max-content max-content;
	gap: 0.2rem 1rem;
	margin: 0;
}

.dd-footer__hours-row {
	display: contents;
}

.dd-footer__hours-days,
.dd-footer__hours-value {
	margin: 0;
	font-family: var(--dd-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.dd-footer__hours-days {
	color: #999999;
	text-align: end;
}

.dd-footer__hours-value {
	color: #cccccc;
	text-align: start;
	/* the digits are a timetable, so they are read as columns of figures and
	   not as prose — tabular figures keep 8:30 and 14:00 the same width */
	font-variant-numeric: tabular-nums;
}

/* a closed day is information, not an offer, so it steps back to the weight of
   the day label beside it rather than standing at the level of an opening time */
.dd-footer__hours-row--closed .dd-footer__hours-value {
	color: #808080;
}

.dd-footer__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.dd-footer__cta-caption {
	margin: 0;
	font-family: var(--dd-font-body);
	color: #cccccc;
	font-size: 0.9375rem;
}

.dd-footer__cta-number {
	margin: 0;
	font-family: var(--dd-font-body);
	color: var(--dd-color-accent-light);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.dd-footer__cta-number a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.5rem;
	color: inherit;
	text-decoration: none;
}

.dd-footer__cta-number a:hover,
.dd-footer__cta-number a:focus-visible {
	color: var(--dd-color-accent);
	text-decoration: underline;
}

.dd-footer__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding-inline: 2.5rem;
	border-radius: 999px;
	background: var(--dd-color-accent);
	color: var(--dd-color-black);
	font-family: var(--dd-font-body);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.dd-footer__cta-button:hover,
.dd-footer__cta-button:focus-visible {
	background: var(--dd-color-accent-light);
	color: var(--dd-color-black);
}

/*
 * Legal row and credit line share one hairline rule and one rhythm, so the
 * column gap on .dd-footer__inner (2.5rem at the widest) does not open between
 * two lines that belong together.
 */
.dd-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	padding-block-start: clamp(0.5rem, 2vw, 1rem);
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

.dd-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.75rem;
}

/*
 * The row is three small links at the very bottom of every page, and it had a
 * hit area 16-21px tall — the "Ustawienia cookies" button worst of all, because
 * a reset button has no line-box padding of its own. The text stays 13px; the
 * target is grown with padding to 44px (WCAG 2.5.8). The container's row gap
 * goes to zero in exchange, so the footer does not get taller than it was.
 */
.dd-footer__legal-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.25rem;
	font-family: var(--dd-font-body);
	color: #999999;
	font-size: 0.8125rem;
	line-height: 1.4;
	text-decoration: none;
}

.dd-footer__legal-link:hover,
.dd-footer__legal-link:focus-visible {
	color: var(--dd-color-accent-light);
	text-decoration: underline;
}

.dd-footer__legal-button {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/*
 * The credit sits a step below the legal links — smaller and dimmer — so it
 * closes the page without competing with them. The two halves are separate
 * spans, so on 390px the agency line wraps whole instead of breaking mid-phrase.
 */
/*
 * Registry data: the smallest type on the site. It is published because a
 * medical practice must publish it, and it is set so that it never competes
 * with anything a patient came for. Long enough to wrap on a phone — the wrap
 * is why it is centred and given a reading measure rather than left to run the
 * full width of a 1920 footer.
 *
 * It is dimmed by SIZE, not by colour. The first draft used #6e6e6e, which is
 * 4.12:1 on this footer's black and was caught by axe — under the 4.5 this site
 * holds itself to, and on the one line that carries a licence number somebody
 * may actually need to read. #7a7a7a measures 4.89:1 and looks no louder,
 * because what makes this line recede is that it is 12px.
 */
.dd-footer__registry {
	max-width: 44rem;
	margin: 0 0 0.35rem;
	font-family: var(--dd-font-body);
	color: #7a7a7a;
	font-size: 0.75rem;
	line-height: 1.6;
	text-align: center;
}

.dd-footer__credit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 0.4rem;
	margin: 0;
	font-family: var(--dd-font-body);
	color: #808080;
	font-size: 0.8rem;
	line-height: 1.5;
}

/*
 * Same 44px target as the legal links above it (WCAG 2.5.8) — but no inline
 * padding: this link ends a sentence rather than standing alone in a row, and
 * the extra 4px on each side pulled "360Marketing" away from "Made by". The
 * name is ~92px wide, so the target clears 24x24 on width alone.
 */
.dd-footer__credit-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #999999;
	text-decoration: none;
}

.dd-footer__credit-link:hover,
.dd-footer__credit-link:focus-visible {
	color: var(--dd-color-accent-light);
	text-decoration: underline;
}

@media (max-width: 990.98px) {
	.dd-footer {
		padding-block-start: clamp(2.5rem, 10vw, 3.5rem);
	}

	.dd-footer__inner {
		gap: 1.5rem;
	}

	.dd-footer__logo {
		width: 160px;
	}
}