/* =====================================================================
   CUHK Business School footer — 2026 style guide.
   Mobile + tablet reproduce the deployed (HEAD) layout verbatim:
     left  = logo / social
     right = accreditation / legal links / copyright
   Desktop (>=90rem / 1440px) expands to the two-column sitemap layout:
     left  = logo / social / legal (vertical) / copyright
     right = 4-column sitemap / accreditation
   Rendered as an FSE template part (editable in the Site Editor).
   ===================================================================== */

/* Shared tokens (--util-*, --heading-purple, --shadow, --cuhk-gutter) come
   from wp-content/mu-plugins/cuhk-shared/variables.css, loaded first. */
.footer {
	font-family: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
	padding-inline: var(--cuhk-gutter); /* outer gutter, like the header bar */
}
.footer * { box-sizing: border-box; }
.footer a { text-decoration: none; }

/* Hide the Tailwind/Flowbite-hidden CMS leftovers (the Portals modal) and the
   Portals item itself inside the legal nav — keeping just Privacy/Disclaimer. */
.footer .hidden { display: none !important; }
.footer [id^="footer-modal-"] { display: none !important; }
.footer__widget .nav > .menu-item.menu-item-has-children,
.footer__widget .nav-mobile > .menu-item.menu-item-has-children { display: none !important; }

/* Match the content column width (TT5 wideSize 1340px) + inner inset, exactly
   like the header, so the footer lines up with the header and page content. */
.footer__wrapper {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-block: 40px 35px;
	padding-inline: var(--wp--preset--spacing--30, 20px);
}
@media (min-width: 64rem) {
	.footer__wrapper { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 40px; }
}

/* ---- left column ---- */
.footer__left { display: flex; flex-direction: column; align-items: center; gap: 18px; }
@media (min-width: 64rem) { .footer__left { flex: 1; align-items: flex-start; justify-content: flex-start; gap: 13px; } }

.footer__logo { display: flex; justify-content: center; gap: 32px; }
.footer__logo > img { width: auto; max-width: none; height: 75px; }
@media (min-width: 64rem) { .footer__logo { justify-content: flex-start; margin-block-end: 10px; } }

.footer__social {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 22px;
	margin-block-end: 10px;
}
/* Internal comments (UI Issues v2, #6.1): client-specified exact hex
   values, not yet matching any existing shared color variable. */
.footer__social a { color: #959595; display: inline-flex; }
.footer__social a:hover, .footer__social a:focus-visible { color: #5c33ad; }
.footer__social svg { width: 25px; height: auto; }
@media (min-width: 64rem) { .footer__social svg { width: 27px; } }

/* Legal links + copyright live in the RIGHT column on mobile/tablet (style-guide
   layout): right uses <ul class="nav-mobile"> shown horizontally. The left-column
   <ul class="nav"> + copyright duplicates are hidden until desktop. */
.footer__left .footer__widget, .footer__left .footer__copyright { display: none; }

/* left-column legal links (vertical) — only shown at desktop */
.footer__widget .nav { display: flex; flex-direction: column; gap: 17px; white-space: nowrap; font-size: 16px; font-weight: 300; line-height: normal; list-style: none; margin: 0; padding: 0; }
.footer__widget .nav > .menu-item.menu-item-has-children { display: none; }
.footer__widget .nav > .menu-item > a { color: var(--util-500); }
.footer__widget .nav > .menu-item > a:hover { text-decoration: underline; }

/* right-column legal links: horizontal, right-aligned (style guide .nav-mobile) */
.footer__widget .nav-mobile {
	display: flex;
	justify-content: center;
	gap: 22px;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 64rem) { .footer__widget .nav-mobile { justify-content: flex-end; gap: 30px; font-size: 18px; line-height: 20px; } }
.footer__widget .nav-mobile > .menu-item > a { color: var(--util-500); cursor: pointer; }
.footer__widget .nav-mobile > .menu-item > a:hover { text-decoration: underline; }

.footer__copyright { display: flex; flex-direction: column; align-items: center; color: var(--util-400); font-size: 16px; font-weight: 300; line-height: 26px; margin: 0; }
@media (min-width: 64rem) { .footer__copyright { align-items: flex-end; font-size: 15px; line-height: 20px; } } /* tablet/mobile keep 2 lines */

/* ---- right column: accreditation, legal links, copyright (top→bottom) ---- */
.footer__right { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 64rem) { .footer__right { flex: 1; align-items: flex-end; } }

.footer__accreditation { display: flex; justify-content: center; gap: 16px; }
.footer__accreditation img { height: 40px; width: auto; max-width: none; }
@media (min-width: 48rem) { .footer__accreditation img { height: 48px; } }
@media (min-width: 64rem) { .footer__accreditation { justify-content: flex-end; } }

/* sitemap hidden on mobile/tablet (simple all-white variant); shown on desktop */
.footer__sitemap { display: none; }
.footer__sitemap .nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 55px; list-style: none; margin: 0; padding: 0; }
.footer__sitemap .nav .sub-menu { list-style: none; margin: 0; padding: 0; }
/* hidden grouping labels ("Column 1".."Column 4") */
.footer__sitemap .nav > .menu-item > a { display: none; }
/* section headings (Our School, Programmes, ...) */
.footer__sitemap .nav > .menu-item > .sub-menu { display: flex; flex-direction: column; gap: 16px; max-width: 230px; margin-top: 13px; font-size: 21px; font-weight: 400; line-height: 28px; }
.footer__sitemap .nav > .menu-item > .sub-menu > .menu-item > a { font-weight: 700; color: var(--util-700); }
.footer__sitemap .nav > .menu-item > .sub-menu > .menu-item > a:hover { text-decoration: underline; }
.footer__sitemap .nav > .menu-item > .sub-menu > .menu-item > a[href="#"] { cursor: default; pointer-events: none; }
/* links under each heading */
.footer__sitemap .nav > .menu-item > .sub-menu > .menu-item > .sub-menu { display: flex; flex-direction: column; gap: 16px; max-width: 230px; margin-top: 13px; font-size: 21px; font-weight: 400; line-height: 28px; }
.footer__sitemap .nav > .menu-item > .sub-menu > .menu-item > .sub-menu .menu-item > a { color: var(--util-500); font-weight: 400; }
.footer__sitemap .nav > .menu-item > .sub-menu > .menu-item > .sub-menu .menu-item > a:hover { text-decoration: underline; }

/* =====================================================================
   DESKTOP (>=90rem / 1440px) — two-column sitemap layout.
   Everything above is untouched below this breakpoint, so mobile + tablet
   match the deployed (HEAD) footer exactly.
   ===================================================================== */
@media (min-width: 90rem) {
	/* two-tone split per style guide (base.css --Footer-Bg): left #f2f3f4,
	   right --util-200 (#e2e3e4) — a subtly different, cooler grey, not white. */
	.footer { position: relative; background-color: #f2f3f4; }
	.footer::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		background-color: var(--util-200);
	}
	.footer__wrapper { position: relative; z-index: 1; padding-block: 0; }
	.footer__left, .footer__right { padding-top: 70px; padding-bottom: 80px; }

	/* left column grows, right column hugs its content */
	.footer__left { flex: 1; min-width: 300px; padding-right: 20px; }
	.footer__right { position: relative; flex: unset; align-items: stretch; padding-left: 51px; background-color: var(--util-200); }

	/* content swap: left shows legal + copyright, right hides them */
	.footer__left .footer__widget { display: flex; margin-bottom: auto; }
	.footer__left .footer__copyright { display: block; }
	.footer__right .footer__widget { display: none; }
	.footer__right .footer__copyright { display: none; }

	.footer__logo { gap: 30px; margin-block: 20px 56px; }
	.footer__logo > img { height: 100px; }

	.footer__social { max-width: 312px; justify-content: space-between; gap: 10px; margin-block-end: 36px; }
	.footer__social svg { width: 33px; }

	.footer__copyright { align-items: flex-start; text-align: left; font-size: 18px; line-height: normal; }

	.footer__accreditation { order: 2; gap: 50px; margin-right: 26px; margin-bottom: 0; }
	.footer__accreditation img { height: 74px; }

	.footer__sitemap { display: block; margin-bottom: 80px; }

	/* Sitemap columns (native wp:navigation blocks, 2026-07-10) — driven by
	   the "Footer Useful Links"/"About Us"/"Open Programmes"/"Custom
	   Solutions" navigation menus so the Site Editor stays fully editable
	   (drag columns, swap which menu fills a slot, edit headings inline).
	   core/navigation's markup doesn't share any classes with the classic
	   .menu-item/.sub-menu structure the rules above target, so these are
	   new selectors — but the values are copied verbatim from
	   variables.css's --util-700/--util-500, not new design decisions. */
	/* !important: WP prints this block's own layout support CSS
	   (id="core-block-supports-inline-css") as "flex-wrap:nowrap" via a
	   same-specificity single-class selector (.wp-container-core-columns-
	   is-layout-<hash>) — confirmed by testing that a plain (higher-
	   specificity, two-class) override here is still silently outweighed by
	   it, so matching normal cascade rules isn't enough here; !important is
	   the only thing that reliably wins. */
	/* .footer__sitemap .wp-block-columns { gap: 40px 55px; flex-wrap: wrap !important; } */
	/* The reference site (bschool.cuhk.edu.hk) renders these 4 columns in a
	   fixed 230px-per-column grid (matches this file's own legacy
	   .footer__sitemap .nav > .menu-item > .sub-menu max-width:230px rule
	   above, kept for the pre-2026-07-10 markup). The Columns block here has
	   no per-column width set, so without this it falls back to flex-grow:1
	   plus cuhk-shared/core-blocks.css's site-wide
	   ".wp-block-column...{ min-width:320px }" floor (added for a different,
	   wider single/two-column use case) — 4 × 320px + 3 × 55px gaps needs
	   ~1445px, more than .footer__right actually has at 1440-1600px
	   viewports, so the last column(s) were pushed off the right edge.
	   Pinning each column to 230px (higher specificity than that global
	   rule) fixes the overflow and matches the reference's own width.
	   flex-wrap:wrap above is a safety net, not the primary fix — Columns
	   block's flex-wrap:nowrap (its own default) would otherwise still force
	   an overflow instead of dropping to a 2nd row on any narrower edge case. */
	.footer__sitemap .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
		width: 230px;
		min-width: 180px;
		max-width: 230px;
		flex-grow: 0;
		flex-shrink: 0;
	}
	/* Internal comments (Functional Issues v2, #3): was 21px, larger than
	   the rest of the site's own text - client asked for the same size as
	   the site's <h3>/<p> (both var(--wp--preset--font-size--medium), see
	   wp_global_styles), so referencing that same custom property instead
	   of a separate hardcoded value keeps this in sync with it going
	   forward. */
	.footer__sitemap-heading { margin: 0 0 13px; font-size: var(--wp--preset--font-size--medium); font-weight: 700; line-height: 28px; color: var(--util-700); }
	.footer__sitemap-nav .wp-block-navigation__container { display: flex; flex-direction: column; gap: 16px; }
	.footer__sitemap-nav .wp-block-navigation-item__content { padding: 0; font-size: var(--wp--preset--font-size--medium); font-weight: 400; line-height: 28px; }
	/* Core's own .wp-block-navigation-item__content.wp-block-navigation-item__content
	   {color:inherit} rule doubles the class to reach specificity (0,3,0);
	   our plain 2-class selector above (0,2,0) loses regardless of stylesheet
	   order, so match the same doubling trick to actually win. */
	.footer__sitemap-nav .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--util-500); }
	.footer__sitemap-nav .wp-block-navigation-item__content:hover { text-decoration: underline; }
}