/* ================================================
   AMOTZ — SITE FOOTER  (Figma 538:3478 → "Frame 2147227072")
   ================================================
   band     1440x600 · photo · col · gap 57 · space-between · padding 50/60
   share    1320x27 · 18/600 centred · #FCFCF7 @ .85
   columns  1320x223 · row · gap 40 · space-between · four columns, padding 24
   heading  12/600 · #ECC55A       link  16/500 · #FFFFFF · gap 12
   rule     1320 hairline at y335
   base     brand + logo 80 · disclaimer 12/500 @ .5 · copyright 12/500 @ .8
   ================================================ */

.az-footer {
	display: flex;
	flex-direction: column;
	/* RTL start = right, the file's `cross:MAX` on an LTR canvas. */
	align-items: flex-start;
	justify-content: space-between;
	gap: 57px;
	min-height: 600px;
	padding: 50px var(--az-edge);
	background-color: var(--az-ink);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.az-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 57px;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

/* ------------------------------------------------
   SHARE LINE
   ------------------------------------------------ */
.az-footer__share {
	margin: 0;
	width: 100%;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: #FCFCF7;
	opacity: 0.85;
}

/* ------------------------------------------------
   LINK COLUMNS
   ------------------------------------------------ */
.az-footer__cols {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
}

.az-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	/* CONTENT-SIZED, NOT EQUAL-WIDTH — this was wrong in the first build and is worth spelling
	   out. The file gives 280 / 280 / 280 / 329 inside a 1320 row: they sum to 1169, and the
	   remaining 151px falls into three gaps of ~50. In other words Figma hugs each column to
	   its longest link and `space-between` spreads what is left over. The courses column is
	   329 because "איך לצאת מדכאון וחרדות בעזרת תזונה" is the longest string in the footer,
	   not because that column is special.

	   `flex: 1 1 0` — what was here before — divides the row into four equal 300px columns
	   instead, which squeezes the courses links and leaves the short columns padded out. So:
	   basis auto, no grow. `space-between` on the parent then reproduces the ~50px gaps by
	   itself, and the `gap` there is only a floor for when the content gets long. */
	flex: 0 1 auto;
	min-width: 0;
}

.az-footer__heading {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	/* No tracking and no case change: the file has plain 12/600. An earlier build added
	   letter-spacing 0.6px and uppercase that are not in the design. */
	text-align: right;
	color: #ECC55A;
}

.az-footer__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.az-footer__link {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	color: #FFFFFF;
	text-decoration: none;
	transition: color 0.15s ease;
}

.az-footer__link:hover,
.az-footer__link:focus-visible {
	color: #ECC55A;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------
   HAIRLINE  (Line 7, y335)
   ------------------------------------------------ */
.az-footer__rule {
	width: 100%;
	height: 1px;
	background-color: rgba(252, 252, 247, 0.2);
	border: 0;
	margin: 0;
}

/* ------------------------------------------------
   BASE ROW
   ------------------------------------------------ */
.az-footer__base {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

.az-footer__baserow {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
}

/* Brand lockup — FIRST in source so it lands on the right (the file puts it at x1109 against
   the signature block at x60), and logo before text so the mark sits rightmost of the pair. */
.az-footer__brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 11.87px;
}

.az-section .az-footer__logo {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.az-footer__brandtext {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.az-footer__brandname {
	font-size: 25.6px;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	color: #FFFFFF;
}

.az-footer__sig {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.az-footer__signature {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	text-align: right;
	color: #ECC55A;
}

.az-footer__social {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.az-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: #FCFCF7;
	opacity: 0.8;
	transition: opacity 0.15s ease;
}

.az-footer__social a:hover { opacity: 1; }

.az-footer__social svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------
   FINE PRINT
   ------------------------------------------------
   The medical disclaimer is the one thing in this footer that is not decoration: it states
   that Dr. Ziv-Av is a PhD and not a physician. Its 50% opacity is the design's, and it is
   left alone rather than "improved" — but it is a <p> in the document flow, never an image or
   a tooltip, so it is always readable and always selectable. */
.az-footer__disclaimer {
	margin: 0;
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.55;
	text-align: right;
	color: #FCFCF7;
	opacity: 0.5;
}

.az-footer__copyright {
	margin: 0;
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	/* LEFT in the file, and physical — this is a © line with a Latin year, not Hebrew prose. */
	text-align: left;
	color: #FCFCF7;
	opacity: 0.8;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1100px) {
	.az-footer__cols {
		flex-wrap: wrap;
	}

	.az-footer__col {
		flex: 1 1 40%;
		min-width: 200px;
	}
}

@media (max-width: 900px) {
	.az-footer {
		gap: 36px;
		min-height: 0;
		padding: 40px 20px;
	}

	.az-footer__inner { gap: 36px; }

	.az-footer__share {
		font-size: 16px;
		text-align: right;
	}

	.az-footer__col {
		flex: 1 1 100%;
		padding: 0;
	}

	.az-footer__cols { gap: 28px; }

	.az-footer__baserow {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.az-footer__copyright { text-align: right; }
}

/* ---- footer on a phone -------------------------------------------------------------------
   Two problems, both from stacking everything into one column at 900px: the footer ran to
   1265px, and the brand lockup and the signature — a pair drawn side by side in the design —
   ended up one above the other, so "ד״ר אמוץ זיו-אב" read as printed twice with a gap between. */

/* The base row is a pair, not a stack. Kept as a row at every width; it wraps only if it must. */
@media (max-width: 900px) {
	.az-footer__baserow {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}
}

/* Two link columns wherever half the screen still holds a course title. Below that they stack,
   because "איך לצאת מדכאון וחרדות בעזרת תזונה" in a 170px column is four wrapped lines and
   costs more height than it saves. */
@media (min-width: 560px) and (max-width: 900px) {
	.az-footer__col {
		flex: 1 1 calc(50% - 14px);
		min-width: 0;
	}
}

/* Centred on a phone. The desktop footer is a four-column grid read right-to-left; stacked into
   one narrow column, right-aligned headings and links leave a ragged left edge down the whole
   1200px of it. Centred, the stack reads as deliberate — and the brand and signature landing one
   above the other stops looking like the name was printed twice by mistake. */
@media (max-width: 900px) {
	.az-footer__share,
	.az-footer__heading,
	.az-footer__link,
	.az-footer__disclaimer,
	.az-footer__copyright {
		text-align: center;
	}

	.az-footer__col,
	.az-footer__list {
		align-items: center;
		text-align: center;
	}

	.az-footer__baserow {
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.az-footer__brand,
	.az-footer__sig {
		justify-content: center;
	}
}

/* ---- the fourth column, deliberately empty --------------------------------------------------
   The על אמוץ column was removed at the client's request, leaving three. The design's rhythm is
   four, and `justify-content: space-between` spread the survivors across the full width, which
   read as three columns that had drifted apart rather than a four-column footer.

   An empty flex item restores the fourth slot. It sits LAST in source order, which under
   dir="rtl" places it at the far LEFT — so the three real columns keep their positions from the
   right edge and the space opens up on the left, where the removed column used to leave a gap.

   A pseudo-element rather than an empty <div> in the markup: there is nothing here for a screen
   reader to announce, and the footer is built from a WordPress menu, so an empty column has no
   business being a menu item. */
.az-footer__cols::after {
	content: '';
	flex: 1 1 280px;
	/* Matches the design's column width so the three real ones sit where they did with four. */
	max-width: 329px;
}

/* Stacked, an empty column is just dead vertical space. */
@media (max-width: 900px) {
	.az-footer__cols::after {
		display: none;
	}
}