/* =====================================================================
   Chargoalpara School — base design system + shared components
   Scope: every rule is under .cgs-* classes or body.cgs-redesign so the
   parent theme and Elementor content are not affected.
   ===================================================================== */

:root {
	/* Text scale: 0.9 / 1 / 1.15 (set by data-ts on <html>). */
	--ts: 1;

	--emerald-950: #072d19;
	--emerald-900: #0a3f24;
	--emerald-800: #0d5631;
	--emerald-700: #116b3e;
	--emerald-600: #1a7f4b;
	--emerald-500: #239a5c;
	--emerald-100: #e3f1e8;
	--ivory: #fbf7ec;
	--ivory-2: #f5eedc;
	--paper: #fffdf8;
	--gold: #c9a24a;
	--gold-2: #e6c56f;
	--gold-dark: #8f6c1f;
	--blue: #1f56c4;
	--blue-2: #3b74e0;
	--blue-dark: #163f93;
	--ink: #17271e;
	--ink-2: #45564b;
	--ink-3: #6b7a70;
	--line: rgba(13, 86, 49, .14);
	--line-gold: rgba(201, 162, 74, .45);

	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--shadow-sm: 0 2px 8px rgba(10, 63, 36, .08);
	--shadow: 0 12px 30px -8px rgba(10, 63, 36, .18);
	--shadow-lg: 0 28px 60px -18px rgba(10, 63, 36, .32);

	--font-bn: "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", "Vrinda", sans-serif;
	--font-display: "Noto Serif Bengali", "Hind Siliguri", "Nirmala UI", serif;

	--fs-2xs: calc(.75rem * var(--ts));
	--fs-xs: calc(.8125rem * var(--ts));
	--fs-sm: calc(.9375rem * var(--ts));
	--fs-base: calc(1.0625rem * var(--ts));
	--fs-md: calc(1.1875rem * var(--ts));
	--fs-lg: calc(1.375rem * var(--ts));
	--fs-xl: calc(1.75rem * var(--ts));
	--fs-2xl: calc(2.125rem * var(--ts));
	--fs-hero: calc(clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem) * var(--ts));
	--fs-title: calc(clamp(1.75rem, 1.2rem + 2.2vw, 3rem) * var(--ts));

	/* Shared content width: grows gently on large monitors, capped for 4K/TV. */
	--wrap: clamp(1240px, 86vw, 1760px);
	--gutter: clamp(16px, 3vw, 32px);
	--bottomnav-h: 68px;
	--ease: cubic-bezier(.22, .8, .24, 1);
}
html[data-ts="90"] { --ts: .9; }
html[data-ts="115"] { --ts: 1.15; }

/* ---------- language visibility ---------- */
html:not([data-lang="en"]) [data-l="en"],
html[data-lang="en"] [data-l="bn"] { display: none !important; }

/* ---------- base ---------- */
body.cgs-redesign {
	font-family: var(--font-bn);
	font-size: var(--fs-base);
	color: var(--ink);
	background: var(--paper);
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}
body.cgs-redesign *,
.cgs-top *,
.cgs-nav * { box-sizing: border-box; }

.cgs-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.cgs-ico { width: 1.15em; height: 1.15em; flex: none; }
.cgs-sr,
.cgs-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.cgs-skip {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	background: var(--gold); color: var(--emerald-950);
	padding: 10px 16px; border-radius: var(--radius-sm);
	font-weight: 700; text-decoration: none;
	transition: top .2s;
}
.cgs-skip:focus { top: 12px; }

body.cgs-redesign :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
	border-radius: 6px;
}

/* =====================================================================
   Utility bar (top green strip): contact, text size, language, social,
   search. Full-bleed background; content in its own wide container.
   ===================================================================== */
.cgs-utility {
	--ub-bg-1: #005c4b;
	--ub-bg-2: #006553;
	--ub-bg-3: #006b57;
	--ub-fg: #f4f9f6;
	--ub-fg-soft: rgba(244, 249, 246, .78);
	--ub-line: rgba(255, 255, 255, .24);
	--ub-hover: rgba(255, 255, 255, .13);
	--ub-pad: clamp(12px, 4vw, 80px);
	--ub-gap: clamp(14px, 1.6vw, 30px);
	--ub-tools-gap: clamp(4px, .55vw, 12px);
	--ub-ctl: 32px;
	position: relative;
	width: 100%;
	background: linear-gradient(90deg, var(--ub-bg-1), var(--ub-bg-2) 50%, var(--ub-bg-3));
	color: var(--ub-fg);
	font-family: var(--font-bn);
	font-size: calc(clamp(.8125rem, .74rem + .22vw, 1rem) * var(--ts));
	line-height: 1.35;
}
.cgs-utility__in {
	max-width: 1800px;
	padding-inline: var(--ub-pad);
	min-height: 46px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 6px 24px;
}
.cgs-utility__info {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 4px var(--ub-gap);
	list-style: none; margin: 0; padding: 0; min-width: 0;
}
.cgs-utility__item {
	display: inline-flex; align-items: center; gap: .5em;
	white-space: nowrap; color: var(--ub-fg);
}
.cgs-utility__item .cgs-ico { width: 1.05em; height: 1.05em; opacity: .9; }
.cgs-utility__item a {
	display: inline-flex; align-items: center; gap: .5em;
	color: inherit; border-radius: 4px;
	text-decoration: underline; text-decoration-color: transparent;
	text-underline-offset: 3px; text-decoration-thickness: 1px;
	transition: text-decoration-color .18s, opacity .18s;
}
.cgs-utility__item a:hover { color: inherit; text-decoration-color: currentColor; }

.cgs-utility__tools {
	display: flex; align-items: center; gap: var(--ub-tools-gap); flex: none;
}

/* Shared look for the icon/text controls on the right. */
.cgs-utility .cgs-ts,
.cgs-utility__ts-toggle,
.cgs-utility .cgs-lang,
.cgs-utility .cgs-social,
.cgs-utility__search-btn {
	appearance: none; border: 0; margin: 0; cursor: pointer;
	height: var(--ub-ctl); border-radius: 6px;
	background: transparent; color: var(--ub-fg);
	line-height: 1; text-decoration: none;
	transition: background-color .18s, color .18s, transform .18s;
}
.cgs-utility .cgs-ts:hover,
.cgs-utility__ts-toggle:hover,
.cgs-utility .cgs-lang:hover,
.cgs-utility .cgs-social:hover,
.cgs-utility__search-btn:hover,
.cgs-utility__search-btn[aria-expanded="true"] { background: var(--ub-hover); color: #fff; }
.cgs-utility :is(a, button, input):focus-visible {
	outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px;
}

/* A A A — fixed sizes: the controls themselves do not scale. */
.cgs-textsize { display: inline-flex; align-items: center; gap: 1px; }
.cgs-utility .cgs-ts {
	min-width: 28px; padding: 0 5px;
	font-family: Georgia, "Times New Roman", serif; font-weight: 700;
	color: var(--ub-fg-soft);
}
.cgs-ts--sm { font-size: 12px; }
.cgs-ts--md { font-size: 14.5px; }
.cgs-ts--lg { font-size: 17px; }
.cgs-utility .cgs-ts[aria-pressed="true"] {
	color: #fff; background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85);
}
/* Single "larger text" switch, shown instead of A A A on phones. */
.cgs-utility__ts-toggle {
	display: none; place-items: center; min-width: var(--ub-ctl); padding: 0;
	font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 700;
}
.cgs-utility__ts-toggle[aria-pressed="true"] { background: rgba(255, 255, 255, .16); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85); }

.cgs-utility .cgs-lang {
	display: inline-flex; align-items: center; gap: 6px; padding: 0 8px;
	font-family: var(--font-bn); font-size: calc(.875rem * min(var(--ts), 1)); font-weight: 600;
	white-space: nowrap;
}
.cgs-lang__txt { display: inline-flex; }
.cgs-utility .cgs-lang__globe { width: 17px; height: 17px; }

.cgs-utility__social { display: inline-flex; align-items: center; gap: 2px; }
.cgs-utility .cgs-social { width: var(--ub-ctl); }
.cgs-utility .cgs-social .cgs-ico { width: 17px; height: 17px; }
.cgs-utility .cgs-social path[fill="#fff"] { fill: var(--ub-bg-2); } /* YouTube play mark */

.cgs-utility__sep { flex: none; width: 1px; height: 18px; margin-inline: 2px; background: var(--ub-line); }

.cgs-utility__search-btn { display: inline-grid; place-items: center; width: var(--ub-ctl); padding: 0; flex: none; }
.cgs-utility__search-btn .cgs-ico { width: 18px; height: 18px; }

@media (hover: hover) {
	.cgs-utility .cgs-social:hover,
	.cgs-utility__search-btn:hover { transform: scale(1.03); }
}

/* Search panel: drops over the header, does not push the page down. */
.cgs-utility__search {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 80;
	background: var(--ub-bg-1);
	box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .5);
	padding-block: 10px 12px;
}
.cgs-utility__search[hidden] { display: none; }
.cgs-utility__search-in {
	max-width: 1800px; margin-inline: auto; padding-inline: var(--ub-pad);
	display: flex; justify-content: flex-end;
}
.cgs-utility__search .cgs-search { width: min(100%, 520px); }
.cgs-utility__search .cgs-search input { height: 42px; }
.cgs-utility__search .cgs-search button { width: 42px; height: 42px; }

/* Utility bar — responsive */
@media (min-width: 1920px) {
	.cgs-utility__in { min-height: 50px; }
}
/* Tablet: drop the location first so the row never wraps. */
@media (max-width: 899.98px) {
	.cgs-utility__item--place { display: none; }
}
/* Large phones / small tablets: one compact row. */
@media (max-width: 767.98px) {
	.cgs-utility { --ub-ctl: 36px; --ub-tools-gap: 2px; }
	.cgs-utility__social,
	.cgs-textsize { display: none; }
	.cgs-utility__ts-toggle { display: inline-grid; }
	.cgs-utility__in { gap: 6px 16px; }
}
/* Phones: contact stacked on the left, controls on the right. */
@media (max-width: 575.98px) {
	.cgs-utility {
		--ub-pad: clamp(10px, 3.6vw, 16px);
		font-size: clamp(.75rem, .69rem + .35vw, .875rem); /* fixed 12–14px band on phones */
	}
	.cgs-utility__in {
		display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
		column-gap: 8px; min-height: 58px; padding-block: 7px;
	}
	.cgs-utility__info { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px; }
	.cgs-utility__item a { min-height: 22px; }
	.cgs-utility__sep { display: none; }
	.cgs-utility .cgs-lang {
		gap: 5px; padding: 0 6px;
		font-size: 12px;
	}
	.cgs-utility .cgs-lang__globe { width: 16px; height: 16px; }
}
@media (max-width: 374.98px) {
	.cgs-utility { --ub-ctl: 34px; }
	.cgs-utility__in { column-gap: 4px; }
	.cgs-utility__item,
	.cgs-utility__item a { gap: .4em; }
	.cgs-utility .cgs-lang { gap: 4px; padding: 0 4px; letter-spacing: .02em; }
	.cgs-utility .cgs-lang__globe { width: 15px; height: 15px; }
	.cgs-utility__search-btn .cgs-ico { width: 17px; height: 17px; }
}

.cgs-social {
	width: 30px; height: 30px; border-radius: 50%;
	display: inline-grid !important; place-items: center;
	background: rgba(255, 255, 255, .1);
}
.cgs-social .cgs-ico { width: 16px; height: 16px; }

/* =====================================================================
   Identity header (white): crest, names, motto, leadership buttons
   ===================================================================== */
.cgs-identity {
	position: relative; overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #fffdf8 100%);
}
.cgs-botanical {
	position: absolute; z-index: 0; width: 260px; height: auto;
	color: #6aa583; opacity: .2; pointer-events: none;
}
.cgs-botanical--l { left: -36px; bottom: -40px; }
.cgs-botanical--r { right: -36px; top: -44px; transform: scale(-1, -1); }
.cgs-identity__in {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
	gap: 14px clamp(20px, 3vw, 48px);
	padding-block: clamp(14px, 1.4vw, 22px);
}
.cgs-brand {
	display: flex; align-items: center; gap: clamp(14px, 1.5vw, 24px);
	min-width: 0; color: inherit; text-decoration: none;
}
.cgs-brand__logo {
	flex: none; display: block;
	width: auto; height: clamp(104px, 2.4rem + 6vw, 136px); aspect-ratio: 1 / 1;
	object-fit: contain;
}
.cgs-brand__names { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cgs-brand__bn {
	font-family: var(--font-display); font-weight: 700;
	font-size: calc(clamp(1.75rem, 1.05rem + 1.45vw, 2.625rem) * var(--ts));
	line-height: 1.3; color: var(--emerald-800);
}
.cgs-brand__en {
	margin-top: 1px;
	font-family: Georgia, "Times New Roman", serif; font-weight: 700;
	font-size: calc(clamp(1.0625rem, .82rem + .55vw, 1.4375rem) * var(--ts));
	line-height: 1.3; letter-spacing: .01em; color: var(--emerald-900);
}
.cgs-brand__motto {
	margin-top: 6px;
	font-size: calc(clamp(.9375rem, .84rem + .25vw, 1.125rem) * var(--ts));
	font-weight: 500; line-height: 1.55; color: #355f49;
}
.cgs-brand__rule {
	display: block; width: min(100%, 22rem); height: 2px; margin-top: 8px; border-radius: 2px;
	background: linear-gradient(90deg, var(--gold), rgba(201, 162, 74, .55) 60%, rgba(201, 162, 74, 0));
}
.cgs-goldline {
	height: 1px; opacity: .8;
	background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold-2) 50%, var(--gold) 85%, transparent);
}

/* ---------- leadership buttons + values line ---------- */
.cgs-identity__aside { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.cgs-leaders { display: flex; gap: clamp(12px, 1.2vw, 18px); padding-block: 7px; }
.cgs-leader {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-width: clamp(150px, 6rem + 6vw, 184px); min-height: 60px; padding: 10px 22px 10px 16px;
	border-radius: 14px; border: 1px solid rgba(255, 255, 255, .24);
	color: #fff !important; text-decoration: none !important; /* beats plugin and editor link colours */
	font-size: calc(1.0625rem * var(--ts)); font-weight: 700; line-height: 1.35;
	box-shadow: 0 16px 26px -16px rgba(4, 30, 16, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
	/* The whole button floats as one unit; the pair runs in opposite phase. */
	animation: cgs-leader-float 4.6s ease-in-out infinite;
	transition: filter .2s;
}
.cgs-leader:hover,
.cgs-leader:focus-visible { animation-play-state: paused; filter: brightness(1.07); }
.cgs-leader--ht { background: linear-gradient(160deg, #23955b, var(--emerald-800) 70%); }
.cgs-leader--pr { background: linear-gradient(160deg, #4a83ea, #1a439e 70%); animation-delay: -2.3s; }
.cgs-leader__ico { flex: none; display: grid; place-items: center; }
.cgs-leader__ico .cgs-ico { width: 26px; height: 26px; }
.cgs-leader__txt { white-space: nowrap; }
@keyframes cgs-leader-float {
	0%, 100% { transform: translateY(3px); }
	50% { transform: translateY(-3px); }
}
.cgs-values {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0;
	list-style: none; margin: 0; padding: 0;
	font-size: calc(.9375rem * var(--ts)); font-weight: 600; line-height: 1.5; color: var(--emerald-800);
}
.cgs-values li { display: inline-flex; align-items: center; }
.cgs-values li + li::before {
	content: ""; width: 1px; height: 1em; margin-inline: 12px; background: var(--gold);
}

/* =====================================================================
   Notice strip
   ===================================================================== */
.cgs-ticker {
	background: #eef7f3;
	border-bottom: 1px solid rgba(13, 86, 49, .12);
	font-size: var(--fs-sm);
}
.cgs-ticker__in { display: flex; align-items: center; gap: 14px; min-height: 48px; padding-block: 6px; }
.cgs-ticker__label {
	flex: none; margin: 0;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px 6px 11px; border-radius: 8px;
	background: linear-gradient(135deg, var(--emerald-700), var(--emerald-900));
	color: #fff; font-family: var(--font-bn); font-size: var(--fs-sm); font-weight: 700; line-height: 1.45;
	box-shadow: var(--shadow-sm);
}
.cgs-ticker__label .cgs-ico { width: 18px; height: 18px; color: var(--gold-2); }
.cgs-ticker__viewport {
	position: relative; flex: 1; min-width: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.cgs-ticker__track { display: flex; width: max-content; will-change: transform; }
.cgs-ticker__group { display: flex; list-style: none; margin: 0; padding: 0 0 0 18px; }
.cgs-ticker__group li { flex: none; }
.cgs-ticker__item {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 6px 30px 6px 0; color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1.5;
}
a.cgs-ticker__item:hover .cgs-ticker__text { color: var(--emerald-700); text-decoration: underline; text-underline-offset: 4px; }
.cgs-ticker__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8a9a90; }
.cgs-ticker__dot--admission { background: var(--blue-2); }
.cgs-ticker__dot--exam { background: var(--gold); }
.cgs-ticker__dot--routine { background: var(--emerald-500); }
.cgs-ticker__empty { margin: 0; color: var(--ink-2); }
.cgs-ticker__ctrl { flex: none; display: flex; align-items: center; gap: 4px; }
.cgs-tbtn {
	appearance: none; cursor: pointer;
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid rgba(13, 86, 49, .2); background: #fff; color: var(--emerald-800);
	display: grid; place-items: center; transition: background-color .18s;
}
.cgs-tbtn:hover { background: var(--emerald-100); }
.cgs-tbtn .cgs-ico { width: 15px; height: 15px; }
.cgs-tbtn__play { display: none; }
.cgs-tbtn[aria-pressed="true"] .cgs-tbtn__play { display: inline; }
.cgs-tbtn[aria-pressed="true"] .cgs-tbtn__pause { display: none; }
.cgs-ticker__all {
	margin-left: 6px; padding: 6px 4px;
	font-size: var(--fs-xs); font-weight: 700; color: var(--emerald-700);
	text-decoration: none; white-space: nowrap;
}
.cgs-ticker__all:hover { text-decoration: underline; }
/* Reduced motion (wide screens): a normal scrollable row. */
.cgs-ticker.is-static .cgs-ticker__viewport { overflow-x: auto; scrollbar-width: thin; }
/* Phones: one readable notice at a time (class set by cgs-core.js). */
.cgs-ticker.is-single .cgs-ticker__viewport { -webkit-mask-image: none; mask-image: none; }
.cgs-ticker.is-single .cgs-ticker__track { display: block; width: auto; }
.cgs-ticker.is-single .cgs-ticker__group { display: block; padding: 0; }
.cgs-ticker.is-single .cgs-ticker__group li { display: none; }
.cgs-ticker.is-single .cgs-ticker__group li.is-active { display: block; }
.cgs-ticker.is-single .cgs-ticker__item { display: flex; align-items: baseline; padding: 2px 0; white-space: normal; }
.cgs-ticker.is-single .cgs-ticker__text {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* =====================================================================
   Main navigation: ONE row at every width —
   [menu items that fit] [free space] [Login] [⋯]

   cgs-core.js measures the items in a hidden copy (.cgs-nav__measure,
   same classes, so it follows the font, language and A/A/A size), finds
   the longest run of items, in order, that fits next to Login and ⋯, and
   moves the rest — whole, with their submenus — into the ⋯ panel. Login
   and ⋯ never move. Nothing here depends on the screen width.
   Without JavaScript the items wrap instead (every link stays reachable).
   ===================================================================== */
.cgs-nav {
	container: cgs-nav / inline-size;
	font-size: calc(1rem * var(--ts));
	position: sticky; top: 0; z-index: 60;
	background: linear-gradient(180deg, #f6fbf8, #eef7f2);
	border-bottom: 1px solid rgba(13, 86, 49, .14);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 8px 18px -16px rgba(7, 45, 25, .55);
}
body.admin-bar .cgs-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .cgs-nav { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .cgs-nav { top: 0; } } /* the admin bar scrolls away here */

/* Wider than the page content on laptops (1240px there): the menu needs the room. */
.cgs-nav__in {
	--nav-pad: calc(10px * var(--ts));
	position: relative;
	max-width: max(var(--wrap), 1680px);
	display: flex; align-items: center; gap: 10px; min-height: 58px;
}
.cgs-menu { list-style: none; margin: 0; padding: 0; }
.cgs-menu--desktop { display: flex; align-items: center; }
/* The flexible part of the row: it holds only the items that fit. */
.cgs-nav__list { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 2px; padding-block: 6px; }
/* Until the first measurement (one frame) nothing may stick out of the row. */
html.cgs-js .cgs-nav:not(.is-fit) .cgs-nav__list { overflow: hidden; }
html:not(.cgs-js) .cgs-nav__list,
.cgs-nav.is-static .cgs-nav__list { flex-wrap: wrap; }
html:not(.cgs-js) .cgs-more,
.cgs-nav.is-static .cgs-more { display: none; }
.cgs-nav__tools { flex: none; display: flex; align-items: center; gap: 8px; }

/* Hidden copy for measuring: laid out (not display:none) but invisible,
   inert, outside the page flow and clipped to zero height. */
.cgs-nav__measure {
	position: absolute; left: 0; top: 0; width: 100%; height: 0;
	overflow: hidden; visibility: hidden; pointer-events: none;
}
.cgs-nav__measure > .cgs-menu { width: max-content; flex-wrap: nowrap; }

.cgs-menu--desktop > .cgs-menu__item {
	position: relative; flex: none; display: flex; align-items: center;
	border-radius: 8px; transition: background-color .18s, box-shadow .18s;
}
.cgs-menu--desktop > .cgs-menu__item:hover,
.cgs-menu--desktop > .cgs-menu__item.is-open { background: rgba(13, 86, 49, .08); }
.cgs-menu--desktop > .cgs-menu__item > .cgs-menu__link,
.cgs-menu--desktop > .cgs-menu__item > .cgs-menu__btn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--nav-pad);
	color: var(--emerald-950); text-decoration: none; white-space: nowrap;
	font: inherit; font-size: calc(1rem * var(--ts)); font-weight: 600; line-height: 1.4;
}
.cgs-menu--desktop > .cgs-menu__item.has-sub > .cgs-menu__link { padding-right: 2px; }
.cgs-menu--desktop > .cgs-menu__item > .cgs-menu__btn { width: auto; height: auto; padding-right: calc(var(--nav-pad) - 3px); border-radius: 8px; }
.cgs-menu--desktop > .cgs-menu__item.is-current,
.cgs-menu--desktop > .cgs-menu__item.is-current:hover {
	background: linear-gradient(160deg, var(--emerald-600), var(--emerald-800));
	box-shadow: 0 -2px 0 var(--gold-2) inset, 0 8px 16px -10px rgba(10, 63, 36, .7);
}
.cgs-menu--desktop > .cgs-menu__item.is-current > .cgs-menu__link,
.cgs-menu--desktop > .cgs-menu__item.is-current > .cgs-sub-toggle,
.cgs-menu--desktop > .cgs-menu__item.is-current .cgs-menu__icon { color: #fff; }

.cgs-sub-toggle {
	appearance: none; border: 0; background: transparent; color: var(--emerald-800); cursor: pointer;
	width: 28px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 6px;
}
.cgs-sub-toggle .cgs-ico { width: 16px; height: 16px; }
.cgs-sub-toggle > .cgs-ico:last-child { transition: transform .2s; }
.cgs-sub-toggle[aria-expanded="true"] > .cgs-ico:last-child { transform: rotate(180deg); }
.cgs-menu__btn { text-align: left; }
.cgs-menu__btn .cgs-menu__chev { width: 15px; height: 15px; color: var(--emerald-700); }
.cgs-menu__item.is-current > .cgs-menu__btn .cgs-menu__chev { color: inherit; }
.cgs-menu__icon { display: inline-grid; place-items: center; flex: none; color: var(--emerald-700); }
.cgs-menu__icon .cgs-ico { width: calc(18px * var(--ts)); height: calc(18px * var(--ts)); }

/* ---------- dropdowns of the items in the bar ---------- */
.cgs-menu--desktop .cgs-sub {
	position: absolute; left: 0; top: calc(100% + 6px); z-index: 70;
	width: max-content; min-width: min(240px, calc(100vw - 24px)); max-width: min(360px, calc(100vw - 24px));
	/* cgs-core.js sets the exact room below the bar; this is the fallback. */
	max-height: var(--sub-max, min(70vh, calc(100vh - 160px)));
	overflow-y: auto; overscroll-behavior: contain;
	list-style: none; margin: 0; padding: 6px;
	background: linear-gradient(180deg, #11603b 0%, #0b4a2c 100%);
	border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
	box-shadow: 0 24px 40px -20px rgba(4, 30, 16, .7), 0 2px 6px rgba(4, 30, 16, .2);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .16s, transform .2s var(--ease), visibility 0s .2s;
}
/* Item near the right edge: the panel hangs from its right side (cgs-core.js). */
.cgs-menu--desktop > .has-sub.is-end > .cgs-sub { left: auto; right: 0; }
/* Short screen with the bar near the bottom: open upward (cgs-core.js). */
.cgs-menu--desktop > .has-sub.is-up > .cgs-sub { top: auto; bottom: calc(100% + 6px); }
/* Invisible bridge over the 6px gap, so the pointer can reach an open panel. */
.cgs-menu--desktop > .has-sub.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.cgs-menu--desktop > .has-sub.is-open.is-up::after { top: auto; bottom: 100%; }
.cgs-menu--desktop .is-open > .cgs-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Without JavaScript: hover and keyboard focus open them. */
html:not(.cgs-js) .cgs-menu--desktop .cgs-menu__item:is(:hover, :focus-within) > .cgs-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cgs-menu--desktop .cgs-sub .cgs-menu__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.cgs-menu--desktop .cgs-sub > .cgs-menu__item + .cgs-menu__item { border-top: 1px solid rgba(255, 255, 255, .07); }
.cgs-menu--desktop .cgs-sub .cgs-menu__link,
.cgs-menu--desktop .cgs-sub .cgs-menu__btn {
	flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border-radius: 7px;
	color: #e8f4ed; text-decoration: none; font: inherit; font-size: var(--fs-sm); line-height: 1.5;
	width: auto; height: auto;
	transition: background-color .15s, color .15s, box-shadow .15s;
}
.cgs-menu--desktop .cgs-sub .cgs-menu__btn { justify-content: space-between; }
.cgs-menu--desktop .cgs-sub .cgs-menu__link:hover,
.cgs-menu--desktop .cgs-sub .cgs-menu__btn:hover,
.cgs-menu--desktop .cgs-sub .cgs-menu__link:focus-visible,
.cgs-menu--desktop .cgs-sub .is-current > .cgs-menu__link {
	background: rgba(255, 255, 255, .12); color: #fff;
	box-shadow: inset 3px 0 0 var(--gold-2);
}
.cgs-menu--desktop .cgs-sub .cgs-sub-toggle,
.cgs-menu--desktop .cgs-sub .cgs-menu__chev { color: #e8f4ed; }
/* A third level opens inside the panel (the panel scrolls, so no flyout). */
.cgs-menu--desktop .cgs-sub .cgs-sub {
	position: static; display: none; flex-basis: 100%;
	width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible;
	margin: 0 0 4px 12px; padding: 0 0 0 8px;
	background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .2); border-radius: 0; box-shadow: none;
	opacity: 1; visibility: visible; transform: none; transition: none;
}
.cgs-menu--desktop .cgs-sub .is-open > .cgs-sub { display: block; }

/* ---------- ⋯ : the items that do not fit (always the last control) ---------- */
.cgs-more { position: relative; flex: none; }
.cgs-more__btn {
	appearance: none; cursor: pointer; position: relative;
	width: 44px; height: 44px; padding: 0; border-radius: 10px;
	display: grid; place-items: center;
	border: 1px solid rgba(7, 45, 25, .3);
	background: linear-gradient(160deg, var(--emerald-600), var(--emerald-800)); color: #fff;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 14px -8px rgba(10, 63, 36, .8);
	transition: filter .18s, box-shadow .18s;
}
.cgs-more__btn .cgs-ico { width: 22px; height: 22px; }
.cgs-more__btn:hover { filter: brightness(1.08); }
.cgs-more__btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(201, 162, 74, .45), 0 6px 14px -8px rgba(10, 63, 36, .8); }
/* The current page is inside ⋯: a gold dot (and a screen-reader note, cgs-core.js). */
.cgs-more__btn.is-current::after {
	content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%;
	background: var(--gold-2); box-shadow: 0 0 0 2px var(--emerald-700);
}
@media (prefers-reduced-motion: no-preference) {
	.cgs-more__btn .cgs-ico circle { transition: transform .2s var(--ease); transform-box: fill-box; transform-origin: center; }
	.cgs-more__btn:is(:hover, :focus-visible, [aria-expanded="true"]) .cgs-ico circle { transform: scale(1.18); }
}

/* Right-aligned with the bar; cgs-core.js keeps it inside the screen and
   sets the height left below (or above) the bar — it scrolls inside. */
.cgs-more__panel {
	position: absolute; right: 0; top: calc(100% + 7px); z-index: 70;
	width: min(340px, calc(100vw - 16px));
	max-height: var(--sub-max, min(70vh, calc(100vh - 160px)));
	overflow-y: auto; overscroll-behavior: contain;
	padding: 6px;
	background: linear-gradient(180deg, #11603b 0%, #0b4a2c 100%);
	border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
	box-shadow: 0 24px 40px -20px rgba(4, 30, 16, .7), 0 2px 6px rgba(4, 30, 16, .2);
}
.cgs-more__panel[hidden] { display: none; }
.cgs-more.is-up > .cgs-more__panel { top: auto; bottom: calc(100% + 7px); }
@media (prefers-reduced-motion: no-preference) {
	.cgs-more__panel { animation: cgs-more-in .18s var(--ease) both; }
}
@keyframes cgs-more-in { from { opacity: 0; transform: translateY(4px); } }
.cgs-more__empty { margin: 0; padding: 10px 12px; color: rgba(232, 244, 237, .82); font-size: var(--fs-sm); line-height: 1.5; }
.cgs-more:not(.is-empty) .cgs-more__empty,
.cgs-more.is-empty .cgs-more__list { display: none; }

/* Items in the panel: one per row; a submenu opens as an accordion below its row. */
.cgs-more__list { display: flex; flex-direction: column; }
.cgs-more__list .cgs-menu__item { display: flex; flex-wrap: wrap; align-items: center; border-radius: 8px; }
.cgs-more__list > .cgs-menu__item + .cgs-menu__item { border-top: 1px solid rgba(255, 255, 255, .08); }
.cgs-more__list .cgs-menu__link,
.cgs-more__list .cgs-menu__btn {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
	width: auto; height: auto; min-height: 44px; padding: 9px 12px; border-radius: 7px;
	color: #e8f4ed; text-decoration: none; text-align: left;
	font: inherit; font-size: calc(1rem * var(--ts)); font-weight: 600; line-height: 1.5;
	transition: background-color .15s, color .15s;
}
.cgs-more__list .cgs-menu__btn .cgs-menu__chev { margin-left: auto; width: 16px; height: 16px; color: inherit; }
.cgs-more__list .cgs-sub-toggle:not(.cgs-menu__btn) { width: 44px; height: 44px; color: #e8f4ed; border-radius: 7px; }
.cgs-more__list .cgs-menu__icon { color: var(--gold-2); }
.cgs-more__list :is(.cgs-menu__link, .cgs-sub-toggle):hover,
.cgs-more__list .cgs-menu__link:focus-visible,
.cgs-more__list .is-open > .cgs-menu__btn { background: rgba(255, 255, 255, .1); color: #fff; }
.cgs-more__list .is-current > :is(.cgs-menu__link, .cgs-menu__btn) {
	background: rgba(255, 255, 255, .12); color: #fff;
	box-shadow: inset 3px 0 0 var(--gold-2);
}
.cgs-more__list .cgs-sub {
	display: none; flex-basis: 100%; list-style: none;
	margin: 0 0 6px 14px; padding: 0 0 0 8px;
	border-left: 1px solid rgba(201, 162, 74, .55);
}
.cgs-more__list .is-open > .cgs-sub { display: block; }
.cgs-more__list .cgs-sub .cgs-menu__link,
.cgs-more__list .cgs-sub .cgs-menu__btn { font-size: var(--fs-sm); font-weight: 500; }
.cgs-more__panel :is(a, button):focus-visible { outline-color: var(--gold-2); outline-offset: -2px; }

/* Roomy bar on large monitors, without stretching the gaps. */
@container cgs-nav (min-width: 104em) {
	.cgs-nav__in { --nav-pad: calc(14px * var(--ts)); gap: 14px; }
}
/* Phones: a little less padding around the labels (the targets stay 44px high). */
@container cgs-nav (max-width: 37.5em) {
	.cgs-nav__in { --nav-pad: calc(8px * var(--ts)); gap: 8px; }
	.cgs-nav__tools { gap: 6px; }
}
/* The sticky bar must not cover focused elements or anchor targets. */
html:has(.cgs-nav) { scroll-padding-top: 76px; }

/* ---------- category icons: a small motion on hover / focus ---------- */
.cgs-navi__page { opacity: 0; }
.cgs-navi__check { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
	.cgs-navi { transition: transform .22s var(--ease); }
	.cgs-navi__page, .cgs-navi__dot { transform-box: view-box; }
	.cgs-navi__page { transform-origin: 12px 12px; }
	.cgs-navi__dot { transition: transform .2s var(--ease); }
	/* Academic: the book tilts and a page turns over the spine. */
	.cgs-menu__item--academic:is(:hover, :focus-within, .is-open) .cgs-navi--academic { transform: rotate(-8deg); }
	.cgs-menu__item--academic:is(:hover, :focus-within, .is-open) .cgs-navi__page { animation: cgs-navi-page .24s ease-out; }
	/* Admission: the tick is written again, like a pen stroke. */
	.cgs-menu__item--admission:is(:hover, :focus-within, .is-open) .cgs-navi--admission { transform: translateY(-1px) rotate(-4deg); }
	.cgs-menu__item--admission:is(:hover, :focus-within, .is-open) .cgs-navi__check { animation: cgs-navi-draw .25s ease-out both; }
	/* More: the four dots spread a little. */
	.cgs-menu__item--more:is(:hover, :focus-within, .is-open) .cgs-navi__dot--1 { transform: translate(-1.4px, -1.4px); }
	.cgs-menu__item--more:is(:hover, :focus-within, .is-open) .cgs-navi__dot--2 { transform: translate(1.4px, -1.4px); }
	.cgs-menu__item--more:is(:hover, :focus-within, .is-open) .cgs-navi__dot--3 { transform: translate(-1.4px, 1.4px); }
	.cgs-menu__item--more:is(:hover, :focus-within, .is-open) .cgs-navi__dot--4 { transform: translate(1.4px, 1.4px); }
}
@keyframes cgs-navi-page { from { opacity: 1; transform: scaleX(1); } to { opacity: 0; transform: scaleX(-.6); } }
@keyframes cgs-navi-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.cgs-search { display: flex; gap: 8px; }
.cgs-search input {
	flex: 1; min-width: 0; height: 46px; padding: 0 16px;
	border: 1px solid var(--line); border-radius: 999px; background: #fff;
	font-family: var(--font-bn); font-size: var(--fs-base); color: var(--ink);
}
.cgs-search button {
	flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--gold); color: var(--emerald-950); display: grid; place-items: center;
}

/* =====================================================================
   Bottom navigation (mobile / tablet)
   ===================================================================== */
.cgs-bottomnav { display: none; }

/* =====================================================================
   Responsive: laptop, then app-like layout ≤ 991px
   ===================================================================== */
@media (max-width: 1199.98px) {
	.cgs-brand__logo { height: 104px; }
	.cgs-leaders { gap: 12px; }
	.cgs-leader { min-width: 144px; min-height: 56px; padding: 8px 16px 8px 12px; gap: 10px; font-size: calc(1rem * var(--ts)); }
	.cgs-leader__ico .cgs-ico { width: 24px; height: 24px; }
	.cgs-values { font-size: calc(.875rem * var(--ts)); }
}
@media (max-width: 991.98px) {
	.cgs-hide-md { display: none !important; }

	/* Identity: crest + names, leaders on their own row (the menu bar stays below the notices). */
	.cgs-identity__in {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "brand" "aside";
		gap: 8px 14px; padding-block: 14px 12px;
	}
	.cgs-brand { grid-area: brand; }
	.cgs-identity__aside { grid-area: aside; gap: 6px; }
	.cgs-brand__logo { height: 88px; }
	.cgs-botanical { width: 170px; }

	.cgs-ticker__in { gap: 10px; }
	.cgs-ticker__label { padding: 6px 10px; }
	.cgs-ticker__all { display: none; }

	body.cgs-redesign { padding-bottom: calc(var(--bottomnav-h) + 18px + env(safe-area-inset-bottom)); }
	/* Keyboard focus (e.g. the menu toolbar) never ends up behind the bottom bar. */
	html:has(.cgs-bottomnav) { scroll-padding-bottom: calc(var(--bottomnav-h) + 18px); }
	.cgs-bottomnav {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		padding-bottom: env(safe-area-inset-bottom);
		background: linear-gradient(180deg, var(--emerald-800), var(--emerald-900));
		border-radius: 22px 22px 0 0;
		box-shadow: 0 -10px 30px -12px rgba(7, 45, 25, .55);
		transition: transform .25s var(--ease);
	}
	body.cgs-kb-open .cgs-bottomnav { transform: translateY(110%); }
	.cgs-bottomnav ul {
		list-style: none; margin: 0 auto; padding: 0 6px; max-width: 640px;
		display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
		height: var(--bottomnav-h);
	}
	.cgs-bottomnav__item {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		height: var(--bottomnav-h); color: rgba(255, 255, 255, .82); text-decoration: none;
		font-size: calc(.75rem * min(var(--ts), 1)); font-weight: 600; line-height: 1.2; text-align: center;
	}
	.cgs-bottomnav__item .cgs-ico { width: 24px; height: 24px; }
	.cgs-bottomnav__item.is-current { color: var(--gold-2); }
	.cgs-bottomnav__item.is-disabled { opacity: .4; }
	.cgs-bottomnav__item--home { justify-content: flex-end; padding-bottom: 8px; color: #fff; }
	.cgs-bottomnav__item--home .cgs-bottomnav__ico {
		width: 62px; height: 62px; margin-top: -30px; margin-bottom: 2px; border-radius: 50%;
		display: grid; place-items: center;
		background: radial-gradient(circle at 35% 30%, #f7dd8f, var(--gold) 60%, var(--gold-dark));
		color: var(--emerald-950);
		box-shadow: 0 0 0 5px var(--emerald-800), 0 14px 24px -8px rgba(0, 0, 0, .55);
	}
	.cgs-bottomnav__item--home .cgs-ico { width: 28px; height: 28px; }
}
@media (max-width: 599.98px) {
	.cgs-hide-sm { display: none !important; }
	.cgs-social { display: none !important; }
	.cgs-nav__in { min-height: 56px; }

	.cgs-brand { gap: 10px; }
	.cgs-brand__logo { height: 70px; }
	.cgs-brand__bn { font-size: calc(1.25rem * var(--ts)); }
	.cgs-brand__en { font-size: calc(.9375rem * var(--ts)); }
	.cgs-brand__motto { margin-top: 3px; font-size: calc(.8125rem * var(--ts)); line-height: 1.5; }
	.cgs-brand__rule { margin-top: 5px; }

	/* Side by side while they fit; stacked otherwise. */
	.cgs-identity__aside { align-items: stretch; }
	.cgs-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 10px; }
	.cgs-leader { min-width: 0; min-height: 52px; padding: 8px 12px; gap: 8px; font-size: calc(.9375rem * var(--ts)); }
	.cgs-leader__ico .cgs-ico { width: 22px; height: 22px; }
	.cgs-values { font-size: calc(.8125rem * var(--ts)); }
	.cgs-values li + li::before { margin-inline: 9px; }

	/* Keep the heading text for screen readers, show only the icon. */
	.cgs-ticker__label span[lang] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cgs-ticker__label { padding: 8px; }
	.cgs-ticker__in { gap: 8px; }
	.cgs-tbtn { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
	.cgs-brand__logo { height: 60px; }
	.cgs-brand__bn { font-size: calc(1.125rem * var(--ts)); }
	.cgs-brand__en { font-size: calc(.875rem * var(--ts)); }
	.cgs-ticker__ctrl { gap: 2px; }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cgs-leader { animation: none; }
	/* Menu panels just fade (no slide); the category icons stay still (motion rules need no-preference). */
	.cgs-menu--desktop .cgs-sub { transform: none; transition: opacity .16s, visibility 0s .16s; }
	.cgs-sub-toggle > .cgs-ico:last-child { transition: none; }
}