/* ==========================================================================
   Component: Site footer
   Figma: "Footer - Mada" (master 220:2492, verified via instance 4193:35618)
   — light band #EAECEF (Neutral/150), py 48, three rows gap 48:
   1) logo (40px) + address 12/16 #6B7280 · "Get the App" white QR card
      (r8, shadow-base, QR 66px, label SemiBold 16/24 #071124)
   2) 4 link columns — heading Bold 18/28 #071124, links SemiBold 16/24
      #002D4E, gap 8
   3) "Follow us" SemiBold 12/16 #111827 + six 28px navy social icons
      (Facebook · Instagram · LinkedIn · X · YouTube · WhatsApp, gap 12) ·
      copyright SemiBold 10/16 #6B7280 at inline-end
   RTL: logical properties throughout; copyright flips naturally.
   ========================================================================== */

.mada-footer {
	background-color: var(--color-neutral-150);
	color: var(--color-black);
	padding-block: var(--space-13);
}

.mada-footer__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-13);                        /* 48 */
}

/* Row 1 — brand + app card */
.mada-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-9);
}
.mada-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);                         /* 12 */
}
.mada-footer__brand .mada-logo {
	color: var(--color-vault-navy);              /* navy mark on light band */
	display: inline-flex;
}
.mada-footer__brand svg {
	block-size: 40px;
	inline-size: auto;
	display: block;
}
.mada-footer__address {
	margin: 0;
	font-size: var(--fs-xs);                     /* 12 */
	line-height: 16px;
	color: var(--color-neutral-600);
}
.mada-footer__appcard {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);                         /* 4 */
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	padding-block: var(--space-3);
	padding-inline: var(--space-3) var(--space-5);
	box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
	color: var(--color-black);
	font-size: var(--fs-md);
	line-height: 24px;
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

/* S4: "could we use a pressed state instead of the underline behavior?" — the
   card is an <a>, so base.css's a:hover was striking a line through the label.
   DS 503:3058 shows the two states as a background shift, so hover/focus tint
   the card and :active presses it in. */
.mada-footer__appcard:hover,
.mada-footer__appcard:focus-visible {
	background-color: var(--color-ice-credit);      /* #D3EFFF */
	text-decoration: none;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.10), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}
.mada-footer__appcard:active {
	background-color: var(--color-ice-credit-dark); /* #A8D9FF */
	box-shadow: inset 0 1px 2px 0 rgba(0, 45, 78, 0.16);
}
.mada-footer__qr { inline-size: 66px; block-size: 66px; display: block; }

/* Row 2 — link columns */
.mada-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-9);
}
.mada-footer__col h4 {
	color: var(--color-black);
	font-size: var(--fs-lg);                     /* 18 */
	line-height: 28px;
	font-weight: var(--fw-bold);
	margin-block: 0 var(--space-3);
}
.mada-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 2px;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);                         /* 8 */
}
.mada-footer__col a {
	color: var(--color-vault-navy);
	font-size: var(--fs-md);
	line-height: 24px;
	font-weight: var(--fw-semibold);
	text-decoration: none;
}
.mada-footer__col a:hover,
.mada-footer__col a:focus-visible {
	color: var(--color-primary);
}

/* Row 3 — socials + copyright */
.mada-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-9);
}
.mada-footer__follow {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);                         /* 12 */
}
.mada-footer__follow-label {
	margin: 0;
	font-size: var(--fs-xs);                     /* 12 */
	line-height: 16px;
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
}
.mada-footer__social {
	display: flex;
	align-items: center;
	gap: var(--space-4);                         /* 12 */
}
/* Social marks — Figma "sm" row (I4133:10504;220:2540): six 28px
   monochrome navy (#002C45) glyphs, 12px gap, no chrome/background.
   `--unset` = platform URL not configured yet: identical to the design,
   just not interactive. RTL: the row is a plain flex row, so it mirrors
   with the document direction — no directional properties used. */
.mada-footer__social-link {
	display: inline-flex;
	inline-size: 28px;
	block-size: 28px;
	flex: 0 0 auto;
	transition: opacity 0.15s ease;
}
a.mada-footer__social-link:hover,
a.mada-footer__social-link:focus-visible {
	opacity: 0.7;
}
.mada-footer__social-icon { inline-size: 28px; block-size: 28px; display: block; }
.mada-footer__copyright {
	margin: 0;
	flex: 1 1 auto;
	text-align: end;
	font-size: var(--fs-xxs);                    /* 10 */
	line-height: 16px;
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-600);
}

/* The mobile-only teal pill is hidden by default; the ≤639 block below turns
   it on and hides the QR card. Declared here so ≥640 needs no override. */
.mada-footer__appbtn { display: none; }

@media (min-width: 1024px) {
	.mada-footer__cols {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-7);                     /* 24 */
	}
}

/* ==========================================================================
   MOBILE ≤639 — round-3 feedback ("revisit the design system that shows how
   the mobile footer looks like", DS 219:2607).
   Verbatim from DS "Footer - Mada" Size=Mobile (222:2683 EN / 222:2679 AR):
     band  #EAECEF, padding 24 block / 16 inline, section gap 32
     brand gap 12 · logo 30px tall · address SemiBold 10/16 #6B7280
     pages gap 24 · 2×2 column grid
           heading Bold 14/20 #071124 · links SemiBold 12/16 #002D4E gap 8
     CTA   full-width (max 288) teal #00B2AF pill r40, py12 px16,
           label SemiBold 14/20 #F8FAFC — REPLACES the white QR card
     bottom gap 32 · "Follow us" SemiBold 12/16 + 28px socials gap 12
           · copyright Regular 10/16 #6B7280, start-aligned (NOT end)
   ========================================================================== */
@media (max-width: 639px) {
	.mada-footer            { padding-block: var(--space-7); }   /* 24 */
	.mada-footer__inner     { gap: var(--space-9); }             /* 32 */

	/* Row 1 collapses to the brand block alone — the QR card is desktop-only. */
	.mada-footer__top       { gap: var(--space-4); }             /* 12 */
	.mada-footer__appcard   { display: none; }
	.mada-footer__brand svg { block-size: 30px; }
	.mada-footer__address   { font-size: var(--fs-xs); }         /* 10 mobile */

	.mada-footer__cols      { gap: var(--space-7); }             /* 24 */
	.mada-footer__col h4    {
		font-size: var(--fs-md);                                 /* 14 mobile */
		line-height: var(--lh-sm);                               /* 20 */
	}
	.mada-footer__col a     {
		font-size: var(--fs-sm);                                 /* 12 mobile */
		line-height: var(--lh-xs);                               /* 16 */
	}

	.mada-footer__appbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		max-inline-size: 288px;
		padding-block: var(--space-4);                           /* 12 */
		padding-inline: var(--space-5);                          /* 16 */
		border-radius: var(--radius-5xl);                        /* 40 */
		background-color: var(--color-primary);                  /* #00B2AF */
		color: var(--color-white);                               /* #F8FAFC */
		font-size: var(--fs-md);                                 /* 14 mobile */
		line-height: var(--lh-sm);                               /* 20 */
		font-weight: var(--fw-semibold);
		text-decoration: none;
		transition: background-color 0.18s ease;
	}
	/* State = colour shift, never an underline (round-2 principle). */
	.mada-footer__appbtn:hover,
	.mada-footer__appbtn:focus-visible {
		background-color: var(--color-primary-hover);            /* #008E8C */
		color: var(--color-white);
		text-decoration: none;
	}
	.mada-footer__appbtn:active { background-color: var(--color-mint-70); }

	/* Socials stack above the copyright; copyright is start-aligned. */
	.mada-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-9);                                     /* 32 */
	}
	.mada-footer__copyright {
		flex: 0 0 auto;
		text-align: start;
		font-weight: var(--fw-regular);
		font-size: var(--fs-xs);                                 /* 10 mobile */
	}
}