/* ==========================================================================
   Tis Abay College — design system, footer and site-wide refinements.

   Loaded after every Divi stylesheet (see functions.php), so ordinary
   selectors are enough to override Divi. !important appears only where Divi
   itself uses it and there is no other way to win.

   Tokens are namespaced --tac-* on purpose: Formidable Forms already defines
   --primary-color / --text-color / --border-color, and reusing those names
   would leak this palette into every Formidable form on the site.
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */

:root {
	/* Brand — sampled from the college emblem, and already Divi palette colours. */
	--tac-primary: #0c71c3;
	--tac-primary-dark: #085a9e;
	--tac-primary-darker: #06416f;
	--tac-primary-soft: #eaf4fc;
	--tac-secondary: #05233e;
	--tac-accent: #f2a900;

	/* Neutrals */
	--tac-text: #1f2b38;
	--tac-heading: #10243a;
	--tac-muted: #5a6b7c;
	--tac-background: #ffffff;
	--tac-background-alt: #f4f8fb;
	--tac-border: #e3eaf1;

	/* Footer */
	--tac-footer-bg: #072f52;
	--tac-footer-bg-bottom: #05233e;
	--tac-footer-text: #c6d7e6;
	--tac-footer-heading: #ffffff;
	--tac-footer-rule: rgba(255, 255, 255, 0.11);

	/* Interaction */
	--tac-focus: var(--tac-primary);
	--tac-radius: 8px;
	--tac-radius-sm: 6px;
	--tac-shadow: 0 10px 30px rgba(9, 42, 74, 0.09);
	--tac-shadow-lg: 0 18px 44px rgba(9, 42, 74, 0.14);
	--tac-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Layout */
	--tac-gap: clamp(24px, 3vw, 44px);
}

/* 2. Base and typography
   --------------------------------------------------------------------------
   Divi Builder modules emit their own per-module font sizes, so these rules
   only take effect where the builder has not made an explicit choice. Existing
   builder layouts are left exactly as the college designed them.
   ========================================================================== */

body {
	color: var(--tac-text);
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--tac-heading);
	line-height: 1.25;
	font-weight: 700;
	text-wrap: balance;
}

h1 {
	font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
}

h2 {
	font-size: clamp(1.45rem, 1.2rem + 1.05vw, 2.05rem);
}

h3 {
	font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
}

h4 {
	font-size: clamp(1.05rem, 1rem + 0.28vw, 1.25rem);
}

p {
	text-wrap: pretty;
}

/* Divi renders empty headings used as spacers; functions.php converts those to
   divs so they stop polluting the outline. These metrics mirror Divi's own
   heading box exactly (30px/1em + 10px padding) so page height is unchanged. */
.tac-spacer {
	line-height: 1em;
	padding-bottom: 10px;
	font-weight: 500;
	margin: 0;
}

.tac-spacer--h1 { font-size: 30px; }
.tac-spacer--h2 { font-size: 26px; }
.tac-spacer--h3 { font-size: 22px; }
.tac-spacer--h4 { font-size: 18px; }
.tac-spacer--h5 { font-size: 16px; }
.tac-spacer--h6 { font-size: 14px; }

@media only screen and (max-width: 767px) {
	.tac-spacer--h1 { font-size: 22px; }
	.tac-spacer--h2 { font-size: 20px; }
	.tac-spacer--h3 { font-size: 18px; }
}

/* 3. Accessibility
   ========================================================================== */

:focus-visible {
	outline: 3px solid var(--tac-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Divi clears outlines on several interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.et_pb_button:focus-visible,
#top-menu a:focus-visible,
.et_mobile_menu a:focus-visible {
	outline: 3px solid var(--tac-focus);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 4. Overflow and media safety
   --------------------------------------------------------------------------
   The footer map was a hardcoded 1000px iframe and the homepage map is 600px;
   both caused horizontal scrolling on phones. Constraining replaced elements
   fixes the whole class of problem without touching page content.
   ========================================================================== */

img,
svg,
video,
canvas,
embed,
object,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
}

iframe {
	border: 0;
}

.et_pb_code iframe,
.et_pb_text iframe,
.widget_block iframe,
#main-footer iframe,
.entry-content iframe {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Long unbroken strings (URLs, IDs) must not push the layout wider. */
.entry-content,
#left-area,
.et_pb_text,
.tac-footer {
	overflow-wrap: break-word;
}

/* Grid and flex children default to min-width:auto, which lets wide content
   blow out the track. */
.et_pb_row,
.et_pb_column,
.container {
	min-width: 0;
}

/* 5. Header and navigation
   ========================================================================== */

#logo {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

#main-header {
	transition: box-shadow 0.25s var(--tac-ease), background-color 0.25s var(--tac-ease);
}

#main-header.et-fixed-header {
	box-shadow: 0 2px 16px rgba(9, 42, 74, 0.11);
}

#top-menu > li > a {
	position: relative;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color 0.2s var(--tac-ease);
}

#top-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 22px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--tac-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--tac-ease);
}

#top-menu > li > a:hover::after,
#top-menu > li.current-menu-item > a::after,
#top-menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

#top-menu > li > a:hover {
	opacity: 1;
	color: var(--tac-primary);
}

/* Dropdown panels are styled in full in section 12. */

/* Mobile navigation: larger tap targets, clearer hierarchy. */
.et_mobile_menu {
	border-top: 3px solid var(--tac-primary);
	box-shadow: 0 14px 34px rgba(9, 42, 74, 0.16);
	padding: 4px 0;
}

.et_mobile_menu li a {
	padding: 13px 5%;
	font-size: 15px;
	line-height: 1.4;
}

.et_mobile_menu .menu-item-has-children > a {
	font-weight: 700;
	background-color: transparent;
}

#et_mobile_nav_menu .mobile_menu_bar::before {
	color: var(--tac-primary);
}

/* Header contact details and social icons. */
#et-info a:hover,
#top-header .et-social-icon a:hover {
	opacity: 1;
	color: var(--tac-accent);
}

/* 6. Buttons
   ========================================================================== */

/* Divi's own buttons animate their arrow icon on hover, so they are left alone
   apart from the focus ring above. These rules cover plugin form buttons,
   which ship unstyled. */
.wpcf7-form input[type="submit"],
.frm_button_submit,
button,
input[type="submit"],
input[type="button"] {
	transition: background-color 0.22s var(--tac-ease), color 0.22s var(--tac-ease),
		border-color 0.22s var(--tac-ease), transform 0.22s var(--tac-ease),
		box-shadow 0.22s var(--tac-ease);
}

.wpcf7-form input[type="submit"]:hover,
.frm_button_submit:hover,
input[type="submit"]:hover {
	transform: translateY(-1px);
}

.wpcf7-form input[type="submit"],
.frm_button_submit,
#left-area input[type="submit"] {
	background: var(--tac-primary);
	color: #fff;
	border: 0;
	border-radius: var(--tac-radius-sm);
	padding: 12px 26px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover,
.frm_button_submit:hover,
#left-area input[type="submit"]:hover {
	background: var(--tac-primary-dark);
	box-shadow: var(--tac-shadow);
}

/* 7. Cards, sections and images
   ========================================================================== */

.et_pb_blog_grid .et_pb_post,
.et_pb_portfolio_item,
.et_pb_gallery_item {
	border-radius: var(--tac-radius);
	overflow: hidden;
	transition: transform 0.25s var(--tac-ease), box-shadow 0.25s var(--tac-ease);
}

.et_pb_blog_grid .et_pb_post:hover,
.et_pb_portfolio_item:hover {
	transform: translateY(-3px);
	box-shadow: var(--tac-shadow);
}

.et_pb_image img,
.et_pb_blog_grid .et_pb_image_container img {
	border-radius: var(--tac-radius-sm);
}

/* Divi's circle counters read as statistics; keep the numerals legible. */
.et_pb_circle_counter .percent p {
	font-variant-numeric: tabular-nums;
}

/* 8. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 textarea,
.frm_form_field input:not([type="submit"]),
.frm_form_field select,
.frm_form_field textarea {
	max-width: 100%;
	border: 1px solid var(--tac-border);
	border-radius: var(--tac-radius-sm);
	padding: 11px 14px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--tac-text);
	background: #fff;
	transition: border-color 0.18s var(--tac-ease), box-shadow 0.18s var(--tac-ease);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--tac-primary);
	box-shadow: 0 0 0 3px rgba(12, 113, 195, 0.15);
}

label {
	font-weight: 600;
	color: var(--tac-heading);
}

.wpcf7 form .wpcf7-response-output {
	border-radius: var(--tac-radius-sm);
	border-width: 1px;
	padding: 12px 16px;
	margin: 18px 0 0;
}

.wpcf7-not-valid-tip {
	font-size: 0.875rem;
}

/* 9. Tables
   ========================================================================== */

#left-area table,
.entry-content table,
.et_pb_text table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--tac-border);
	font-size: 0.95rem;
}

#left-area table th,
.entry-content table th,
.et_pb_text table th {
	background: var(--tac-primary-soft);
	color: var(--tac-heading);
	text-align: left;
	font-weight: 700;
}

#left-area table th,
#left-area table td,
.entry-content table th,
.entry-content table td,
.et_pb_text table th,
.et_pb_text table td {
	border: 1px solid var(--tac-border);
	padding: 10px 12px;
}

#left-area table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even) {
	background: var(--tac-background-alt);
}

@media only screen and (max-width: 640px) {
	.entry-content table,
	.et_pb_text table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* 10. Footer
   --------------------------------------------------------------------------
   Divi's own footer grid is float-based with !important widths on
   .footer-widget. The new footer deliberately uses its own class names and CSS
   Grid so none of that has to be fought. Selectors are qualified with the
   #main-footer / #footer-bottom IDs where Divi's customizer CSS sets the same
   property on those IDs.
   ========================================================================== */

#main-footer.tac-footer {
	background: var(--tac-footer-bg);
	color: var(--tac-footer-text);
	--tac-focus: #ffd166;
}

.tac-footer a {
	color: var(--tac-footer-text);
	text-decoration: none;
}

.tac-footer__main {
	padding: clamp(44px, 5.5vw, 78px) 0 clamp(36px, 4.5vw, 60px);
}

.tac-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 38px;
}

.tac-footer__col {
	min-width: 0;
}

/* Column headings: uppercase, tracked out, with a short accent rule. */
.tac-footer__heading {
	position: relative;
	margin: 0 0 20px;
	padding: 0 0 12px;
	color: var(--tac-footer-heading);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.tac-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	border-radius: 2px;
	background: var(--tac-accent);
}

/* --- Brand column --- */

.tac-footer__logo {
	display: inline-block;
	background: #fff;
	padding: 12px 16px;
	border-radius: var(--tac-radius);
	line-height: 0;
}

.tac-footer__logo img {
	display: block;
	width: auto;
	height: clamp(44px, 4vw, 54px);
}

.tac-footer__wordmark {
	margin: 0;
	color: var(--tac-footer-heading);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
}

.tac-footer__about {
	margin: 20px 0 0;
	max-width: 42ch;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--tac-footer-text);
}

.tac-footer__tagline {
	margin: 14px 0 0;
	color: var(--tac-accent);
	font-size: 0.875rem;
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0.02em;
}

/* --- Social icons --- */

.tac-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.tac-footer__social li {
	margin: 0;
	padding: 0;
}

.tac-footer__social li::before {
	display: none;
}

.tac-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--tac-radius);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--tac-footer-rule);
	color: #e7f0f8;
	transition: background-color 0.22s var(--tac-ease), border-color 0.22s var(--tac-ease),
		color 0.22s var(--tac-ease), transform 0.22s var(--tac-ease);
}

.tac-footer__social-link:hover {
	color: #fff;
	border-color: transparent;
	transform: translateY(-2px);
}

.tac-footer__social-link--facebook:hover { background: #1877f2; }
.tac-footer__social-link--youtube:hover { background: #ff0033; }
.tac-footer__social-link--telegram:hover { background: #229ed9; }
.tac-footer__social-link--instagram:hover { background: #c13584; }
.tac-footer__social-link--linkedin:hover { background: #0a66c2; }
.tac-footer__social-link--x:hover { background: #000; }

.tac-footer__social-link .tac-icon {
	width: 19px;
	height: 19px;
}

/* --- Link columns --- */

.tac-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tac-footer__links li {
	margin: 0;
	padding: 0;
}

.tac-footer__links li::before {
	display: none;
}

.tac-footer__links a {
	position: relative;
	display: block;
	padding: 8px 0 8px 17px;
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: color 0.2s var(--tac-ease), transform 0.2s var(--tac-ease);
}

.tac-footer__links a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
	transition: background-color 0.2s var(--tac-ease), opacity 0.2s var(--tac-ease);
}

.tac-footer__links a:hover {
	color: #fff;
	transform: translateX(3px);
}

.tac-footer__links a:hover::before {
	background: var(--tac-accent);
	opacity: 1;
}

/* --- Contact column --- */

.tac-footer__contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tac-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.tac-footer__contact li::before {
	display: none;
}

.tac-footer__contact .tac-icon {
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	margin-top: 3px;
	color: var(--tac-accent);
}

.tac-footer__contact a {
	transition: color 0.2s var(--tac-ease);
}

.tac-footer__contact a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Preserved Divi widget areas ---
   Rendered only when the site owner actually puts widgets back into
   Appearance → Widgets → Footer Area #1–#4. */

.tac-footer__widgets {
	border-top: 1px solid var(--tac-footer-rule);
	padding: 8px 0 0;
}

.tac-footer__widgets #footer-widgets {
	padding: clamp(30px, 4vw, 50px) 0 0;
}

#main-footer .tac-footer__widgets .footer-widget h4,
#main-footer .tac-footer__widgets .widget_block h1,
#main-footer .tac-footer__widgets .widget_block h2,
#main-footer .tac-footer__widgets .widget_block h3,
#main-footer .tac-footer__widgets .widget_block h4,
#main-footer .tac-footer__widgets .widget_block h5,
#main-footer .tac-footer__widgets .widget_block h6 {
	color: var(--tac-footer-heading);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Bottom bar --- */

#footer-bottom.tac-footer__bottom {
	background: var(--tac-footer-bg-bottom);
	border-top: 1px solid var(--tac-footer-rule);
	padding: 18px 0;
}

#footer-bottom.tac-footer__bottom .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 28px;
}

.tac-footer__copyright {
	margin: 0;
	font-size: 0.875rem;
	color: var(--tac-footer-text);
}

.tac-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

.tac-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tac-footer__legal-list li {
	margin: 0;
	padding: 0;
}

.tac-footer__legal-list li::before {
	display: none;
}

.tac-footer__legal a,
.tac-footer__legal-extra {
	font-size: 0.875rem;
	color: var(--tac-footer-text);
	transition: color 0.2s var(--tac-ease);
}

.tac-footer__legal a:hover,
.tac-footer__legal-extra:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 11. Footer responsive behaviour
   --------------------------------------------------------------------------
   Mobile-first: one column, then two, then the full four-column layout.
   ========================================================================== */

@media only screen and (min-width: 600px) {
	.tac-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 36px;
	}
}

@media only screen and (min-width: 981px) {
	.tac-footer__grid {
		grid-template-columns: 1.7fr 1fr 1.15fr 1.35fr;
		gap: clamp(28px, 3vw, 56px);
	}
}

/* Below the two-column breakpoint the bottom bar reads better centred. */
@media only screen and (max-width: 599px) {
	#footer-bottom.tac-footer__bottom .container {
		justify-content: center;
		text-align: center;
	}

	.tac-footer__legal,
	.tac-footer__legal-list {
		justify-content: center;
	}

	/* Comfortable tap targets on phones. */
	.tac-footer__links a {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tac-footer__contact li {
		padding: 10px 0;
	}
}

/* 12. Navigation
   --------------------------------------------------------------------------
   The primary menu is five levels deep: 7 top-level items, then 21 / 27 / 8 / 3
   below them, with labels up to 42 characters. Divi sizes every panel to a
   fixed 240px and every link to 200px, so the long labels wrap badly; it
   positions nested panels with a hardcoded `left: 240px`, which breaks as soon
   as that width changes; and it marks nested parents with a downward chevron
   even though their panel opens sideways.

   Everything below re-does that geometry in relative units so panels can size
   to their content, and hands edge detection to assets/js/tac-nav.js.

   On mobile Divi forces every sub-menu open with !important, so the same file
   drives an accordion instead.
   ========================================================================== */

@media only screen and (min-width: 981px) {

	/* --- The panel --- */

	#top-menu li ul.sub-menu {
		width: max-content;
		min-width: 240px;
		max-width: 340px;
		padding: 8px;
		background: var(--tac-background);
		border: 1px solid var(--tac-border);
		border-top: 3px solid var(--tac-primary);
		border-radius: var(--tac-radius);
		box-shadow: 0 16px 38px rgba(9, 42, 74, 0.16), 0 2px 6px rgba(9, 42, 74, 0.06);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		/* Visibility flips only once the fade has finished, so the panel can
		   animate out instead of vanishing. */
		transition: opacity 0.19s var(--tac-ease), transform 0.19s var(--tac-ease),
			visibility 0s linear 0.19s;
	}

	/* Divi opens panels via :hover and via .et-hover / .et-touch-hover from its
	   own script; :focus-within adds keyboard and assistive tech. */
	#top-menu li:hover > ul.sub-menu,
	#top-menu li:focus-within > ul.sub-menu,
	#top-menu li.et-hover > ul.sub-menu,
	#top-menu li.et-touch-hover > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.19s var(--tac-ease), transform 0.19s var(--tac-ease),
			visibility 0s;
	}

	/* --- Items --- */

	#top-menu li li {
		padding: 0;
		margin: 0;
		line-height: 1.45;
	}

	/* Divi's critical CSS is injected after this stylesheet and carries
	   `#main-header .nav li ul a { color }` at the same specificity, which
	   would win on order alone. Matching its #main-header settles it. */
	#main-header #top-menu li ul.sub-menu li a {
		width: auto;
		padding: 9px 14px;
		border-radius: var(--tac-radius-sm);
		color: var(--tac-text);
		font-size: 14px;
		line-height: 1.45;
		transition: background-color 0.18s var(--tac-ease), color 0.18s var(--tac-ease);
	}

	#top-menu li li.menu-item-has-children > a:first-child {
		padding-right: 32px;
	}

	#top-menu li ul.sub-menu li a:hover,
	#top-menu li ul.sub-menu li a:focus-visible {
		background: var(--tac-primary-soft);
		color: var(--tac-primary-dark);
		opacity: 1;
	}

	/* --- Current page, at every level --- */

	#top-menu li ul.sub-menu li.current-menu-item > a,
	#top-menu li ul.sub-menu li.current-menu-ancestor > a,
	#top-menu li ul.sub-menu li.current-menu-parent > a {
		position: relative;
		background: var(--tac-primary-soft);
		color: var(--tac-primary-dark);
		font-weight: 700;
	}

	#top-menu li ul.sub-menu li.current-menu-item > a::before {
		content: "";
		position: absolute;
		left: 4px;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: 3px;
		background: var(--tac-primary);
	}

	/* Once the header is stuck, Divi forces current items to #000 with
	   !important. That is its own choice for the top level, so it stands there;
	   inside a panel it would drop the only colour cue, so it is reinstated. */
	.et-fixed-header #top-menu li ul.sub-menu li.current-menu-item > a,
	.et-fixed-header #top-menu li ul.sub-menu li.current-menu-ancestor > a,
	.et-fixed-header #top-menu li ul.sub-menu li.current-menu-parent > a {
		color: var(--tac-primary-dark) !important;
	}

	/* --- Chevrons ---
	   Divi draws these with the ETmodules icon font. Re-using the same
	   pseudo-element as a CSS chevron keeps the markup untouched and lets the
	   nested ones point the way their panel actually opens. */

	#top-menu .menu-item-has-children > a:first-child::after {
		content: "";
		font-family: inherit;
		position: absolute;
		width: 6px;
		height: 6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		opacity: 0.6;
		transition: transform 0.2s var(--tac-ease), opacity 0.2s var(--tac-ease);
	}

	/* Top level: pointing down, aligned to the first line of the label. */
	#top-menu > li.menu-item-has-children > a:first-child::after {
		right: 2px;
		top: 4px;
		transform: rotate(45deg);
	}

	#top-menu > li.menu-item-has-children:hover > a:first-child::after,
	#top-menu > li.menu-item-has-children:focus-within > a:first-child::after {
		opacity: 1;
		transform: rotate(45deg) translate(1px, 1px);
	}

	/* Nested: pointing right, because the panel opens sideways. */
	#top-menu li li.menu-item-has-children > a:first-child::after {
		right: 14px;
		top: 50%;
		margin-top: -4px;
		transform: rotate(-45deg);
	}

	#top-menu li li.menu-item-has-children:hover > a:first-child::after {
		opacity: 1;
		transform: rotate(-45deg) translate(1px, -1px);
	}

	/* --- Nested panel placement ---
	   Relative offsets, so a panel that sizes to its content still lines up.
	   -9px lifts the panel by its own padding plus border, putting its first
	   item level with the item that opened it. */

	#top-menu li li ul.sub-menu {
		top: -9px;
		left: 100%;
		transform: translateX(-6px);
	}

	#top-menu li li:hover > ul.sub-menu,
	#top-menu li li:focus-within > ul.sub-menu,
	#top-menu li li.et-hover > ul.sub-menu,
	#top-menu li li.et-touch-hover > ul.sub-menu {
		transform: translateX(0);
	}

	/* Opening leftward instead: Divi's own branch-level detection, then the
	   per-panel correction from tac-nav.js. */
	#top-menu li.et-reverse-direction-nav li ul.sub-menu,
	#top-menu li li.tac-flip > ul.sub-menu {
		left: auto;
		right: 100%;
		transform: translateX(6px);
	}

	#top-menu li.et-reverse-direction-nav li:hover > ul.sub-menu,
	#top-menu li.et-reverse-direction-nav li:focus-within > ul.sub-menu,
	#top-menu li li.tac-flip:hover > ul.sub-menu,
	#top-menu li li.tac-flip:focus-within > ul.sub-menu {
		transform: translateX(0);
	}

	#top-menu li li.tac-flip.menu-item-has-children > a:first-child::after {
		transform: rotate(135deg);
	}

	#top-menu li li.tac-flip.menu-item-has-children:hover > a:first-child::after {
		transform: rotate(135deg) translate(1px, -1px);
	}

	/* tac-nav.js measured this one and it fits: cancel an inherited flip. */
	#top-menu li li.tac-noflip > ul.sub-menu {
		left: 100%;
		right: auto;
	}

	#top-menu li li.tac-noflip.menu-item-has-children > a:first-child::after {
		transform: rotate(-45deg);
	}

	/* A first-level panel near the right edge aligns to its parent instead. */
	#top-menu > li.tac-flip-end > ul.sub-menu {
		left: auto;
		right: 0;
	}

	/* Escape collapses the open branch without moving focus off the menu. */
	#top-menu li.tac-dd-closed > ul.sub-menu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
	}
}

@media only screen and (min-width: 981px) and (prefers-reduced-motion: reduce) {
	#top-menu li ul.sub-menu,
	#top-menu li:hover > ul.sub-menu,
	#top-menu li:focus-within > ul.sub-menu,
	#top-menu li.et-hover > ul.sub-menu,
	#top-menu li.et-touch-hover > ul.sub-menu {
		transform: none;
		transition: opacity 0.01s linear, visibility 0s;
	}
}

/* --- Header CTA: the existing Admission item, promoted to a button --- */

@media only screen and (min-width: 981px) {
	#top-menu li.tac-nav-cta {
		padding-right: 0;
		margin-left: 14px;
	}

	#top-menu li.tac-nav-cta > a {
		display: inline-block;
		padding: 9px 20px;
		border-radius: var(--tac-radius-sm);
		background: var(--tac-primary);
		color: #fff;
		font-weight: 700;
		line-height: 1.4;
		transition: background-color 0.22s var(--tac-ease), box-shadow 0.22s var(--tac-ease),
			transform 0.22s var(--tac-ease);
	}

	#top-menu li.tac-nav-cta > a:hover {
		background: var(--tac-primary-dark);
		color: #fff;
		opacity: 1;
		transform: translateY(-1px);
		box-shadow: 0 6px 18px rgba(12, 113, 195, 0.28);
	}

	/* The shared hover underline would sit under the button. */
	#top-menu li.tac-nav-cta > a::after {
		display: none;
	}

	#main-header.et-fixed-header #top-menu li.tac-nav-cta > a {
		padding: 7px 17px;
	}
}

/* --- Mobile panel --- */

@media only screen and (max-width: 980px) {
	body.tac-menu-open {
		overflow: hidden;
	}

	#main-header .et_mobile_menu {
		position: fixed;
		top: var(--tac-header-h, 66px);
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - var(--tac-header-h, 66px));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 0 0 48px;
		border-top: 3px solid var(--tac-primary);
		box-shadow: 0 18px 44px rgba(9, 42, 74, 0.18);
	}

	/* Divi forces every sub-menu open with !important. Rather than switching
	   them off with display:none, which cannot animate, they stay displayed and
	   collapse to zero height; visibility keeps the collapsed links out of the
	   tab order. tac-nav.js sets max-height in pixels so the transition has a
	   real distance to travel. */
	#main-header .et_mobile_menu li ul.sub-menu {
		display: block !important;
		visibility: hidden !important;
		max-height: 0;
		overflow: hidden;
		padding-left: 0;
		background: rgba(12, 113, 195, 0.04);
		transition: max-height 0.26s var(--tac-ease), visibility 0s linear 0.26s;
	}

	#main-header .et_mobile_menu li.tac-open > ul.sub-menu {
		visibility: visible !important;
		transition: max-height 0.26s var(--tac-ease), visibility 0s;
	}

	#main-header .et_mobile_menu li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	#main-header .et_mobile_menu li.menu-item-has-children > a {
		flex: 1 1 auto;
		min-width: 0;
	}

	#main-header .et_mobile_menu li.menu-item-has-children > ul.sub-menu {
		flex: 1 1 100%;
	}

	#main-header .et_mobile_menu li li {
		padding-left: 14px;
	}

	/* Indentation reads as hierarchy, with a rule tying children to a parent. */
	#main-header .et_mobile_menu li ul.sub-menu {
		border-left: 2px solid rgba(12, 113, 195, 0.18);
		margin-left: 5%;
	}

	#main-header .et_mobile_menu li.tac-open > a {
		color: var(--tac-primary-dark);
	}

	/* An open branch and the current page both stay marked. */
	#main-header .et_mobile_menu li.current-menu-item > a {
		color: var(--tac-primary-dark);
		font-weight: 700;
		box-shadow: inset 3px 0 0 var(--tac-primary);
		background: var(--tac-primary-soft);
	}

	/* 56 x full-row: comfortably past the 44px minimum touch target. */
	.tac-subnav-toggle {
		flex: 0 0 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		background: transparent;
		color: var(--tac-primary);
		cursor: pointer;
	}

	.tac-subnav-toggle:hover,
	.tac-open > .tac-subnav-toggle {
		background: var(--tac-primary-soft);
	}

	.tac-subnav-toggle__icon {
		display: block;
		width: 9px;
		height: 9px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.25s var(--tac-ease);
	}

	.tac-open > .tac-subnav-toggle .tac-subnav-toggle__icon {
		margin-top: 3px;
		transform: rotate(-135deg);
	}

	.tac-menu-close-item {
		display: flex;
		justify-content: flex-end;
		padding: 6px 5%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	.tac-menu-close {
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--tac-radius-sm);
		background: transparent;
		color: var(--tac-muted);
		font-size: 30px;
		line-height: 1;
		cursor: pointer;
		transition: background-color 0.2s var(--tac-ease), color 0.2s var(--tac-ease);
	}

	.tac-menu-close:hover {
		background: var(--tac-primary-soft);
		color: var(--tac-primary-dark);
	}

	/* The hamburger is a real control now, so give it a real target. */
	#et_mobile_nav_menu .mobile_menu_bar {
		padding: 6px;
		border-radius: var(--tac-radius-sm);
	}
}

@media only screen and (max-width: 980px) and (prefers-reduced-motion: reduce) {
	#main-header .et_mobile_menu li ul.sub-menu,
	#main-header .et_mobile_menu li.tac-open > ul.sub-menu {
		transition: none;
	}

	.tac-subnav-toggle__icon {
		transition: none;
	}
}

@media only screen and (min-width: 981px) {
	.tac-subnav-toggle,
	.tac-menu-close-item {
		display: none !important;
	}
}

/* 13. Landing page
   --------------------------------------------------------------------------
   Supports the rebuilt homepage: consistent section rhythm, card treatments
   for the programme / partner / gallery image grids, and a readable hero.
   ========================================================================== */

.home .et_pb_section {
	position: relative;
}

/* Section rhythm lives here rather than in each module's custom_padding,
   because Divi's padding field takes a bare number plus a unit and turns a
   clamp() into the invalid `0clamp(...)`. */
.tac-stats.et_pb_section,
.tac-programs.et_pb_section,
.tac-about.et_pb_section,
.tac-news.et_pb_section,
.tac-cards.et_pb_section,
.tac-campus.et_pb_section,
.tac-partners.et_pb_section {
	padding-top: clamp(52px, 6.5vw, 94px);
	padding-bottom: clamp(52px, 6.5vw, 94px);
}

.tac-programs.et_pb_section,
.tac-news.et_pb_section {
	padding-bottom: clamp(40px, 5vw, 72px);
}

.tac-stats.et_pb_section {
	padding-top: clamp(48px, 6vw, 86px);
	padding-bottom: clamp(48px, 6vw, 86px);
}

.tac-cta.et_pb_section {
	padding-top: clamp(52px, 6.5vw, 88px);
	padding-bottom: clamp(52px, 6.5vw, 88px);
}

.tac-social.et_pb_section {
	padding-top: 34px;
	padding-bottom: 34px;
}

/* --- Hero --- */

.tac-hero .et_pb_slide_description {
	padding: clamp(48px, 7vw, 104px) 0;
	max-width: 720px;
}

.tac-hero .et_pb_slide_title,
.tac-hero h1.et_pb_slide_title {
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.tac-hero .et_pb_slide_content {
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
	line-height: 1.7;
	max-width: 58ch;
}

.tac-hero .et_pb_slide_description .tac-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}

/* Secondary CTA, rendered inside the slide content. */
.tac-btn-ghost {
	display: inline-block;
	padding: 12px 26px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--tac-radius-sm);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.22s var(--tac-ease), border-color 0.22s var(--tac-ease),
		color 0.22s var(--tac-ease);
}

.tac-btn-ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--tac-primary-dark);
}

/* --- Section headings --- */

.tac-section-title h2,
.tac-section-title h3 {
	text-align: center;
	margin-bottom: 6px;
}

.tac-section-title .tac-eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--tac-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

.tac-section-title p {
	max-width: 68ch;
	margin: 0 auto;
	color: var(--tac-muted);
	text-align: center;
}

/* --- Image cards (programmes, campus life, partners) --- */

.tac-cards .et_pb_image {
	margin-bottom: 0;
	overflow: hidden;
	border-radius: var(--tac-radius);
	background: var(--tac-background);
	box-shadow: 0 4px 16px rgba(9, 42, 74, 0.08);
	transition: transform 0.28s var(--tac-ease), box-shadow 0.28s var(--tac-ease);
}

.tac-cards .et_pb_image:hover {
	transform: translateY(-4px);
	box-shadow: var(--tac-shadow-lg);
}

.tac-cards .et_pb_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.5s var(--tac-ease);
}

.tac-cards .et_pb_image:hover img {
	transform: scale(1.04);
}

/* Partner logos read better contained than cropped. */
.tac-partners .et_pb_image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border: 1px solid var(--tac-border);
	box-shadow: none;
	background: #fff;
}

.tac-partners .et_pb_image img {
	width: auto;
	max-height: 96px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.75;
	transition: filter 0.28s var(--tac-ease), opacity 0.28s var(--tac-ease);
}

.tac-partners .et_pb_image:hover img {
	filter: grayscale(0);
	opacity: 1;
	transform: none;
}

/* --- Programme cards ---
   These replace four low-resolution graphics that carried their programme
   lists as baked-in pixels: unreadable when scaled on a phone, invisible to
   search engines and to screen readers. Same wording, now real text. */

.tac-progcards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

@media only screen and (min-width: 600px) {
	.tac-progcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (min-width: 1100px) {
	.tac-progcards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}

.tac-progcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 24px 24px;
	background: var(--tac-background);
	border: 1px solid var(--tac-border);
	border-radius: var(--tac-radius);
	box-shadow: 0 2px 10px rgba(9, 42, 74, 0.05);
	transition: transform 0.28s var(--tac-ease), box-shadow 0.28s var(--tac-ease),
		border-color 0.28s var(--tac-ease);
}

.tac-progcard:hover {
	transform: translateY(-4px);
	border-color: rgba(12, 113, 195, 0.35);
	box-shadow: var(--tac-shadow);
}

.tac-progcard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: var(--tac-radius);
	background: var(--tac-primary-soft);
	color: var(--tac-primary);
}

.tac-progcard__title {
	margin: 0 0 14px;
	padding: 0;
	color: var(--tac-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.tac-progcard__list {
	flex: 1 1 auto;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.tac-progcard__list li {
	position: relative;
	padding: 5px 0 5px 18px;
	color: var(--tac-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tac-progcard__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tac-accent);
}

.tac-progcard__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--tac-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.tac-progcard__link:hover {
	color: var(--tac-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tac-progcard__arrow {
	transition: transform 0.22s var(--tac-ease);
}

.tac-progcard__link:hover .tac-progcard__arrow {
	transform: translateX(4px);
}

/* --- Shared solid button used inside text modules --- */

.tac-btn {
	display: inline-block;
	padding: 13px 28px;
	border: 2px solid var(--tac-primary);
	border-radius: var(--tac-radius-sm);
	background: var(--tac-primary);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.22s var(--tac-ease), border-color 0.22s var(--tac-ease),
		transform 0.22s var(--tac-ease), box-shadow 0.22s var(--tac-ease);
}

.tac-btn:hover {
	background: #fff;
	color: var(--tac-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--tac-shadow);
}

.tac-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

/* --- About split --- */

.tac-about__image img {
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--tac-radius);
	box-shadow: var(--tac-shadow);
}

/* --- Map --- */

.tac-map iframe {
	display: block;
	width: 100%;
	min-height: 320px;
	border-radius: var(--tac-radius);
	box-shadow: var(--tac-shadow);
}

/* --- Hero slide overlay, only on slides that carry copy --- */

.tac-hero .et_pb_slide.tac-hero__slide--text .et_pb_slide_description {
	max-width: 760px;
	margin-right: auto;
}

.tac-hero .et_pb_slide_description .et_pb_more_button {
	margin-right: 12px;
}

.tac-hero__secondary {
	margin-top: 8px;
}

/* The headline, copy and both buttons are all white over a photograph held
   back by only a 55% scrim, so on the lighter frames they wash out. A shadow
   rather than a heavier scrim keeps the image visible. */
.tac-hero .et_pb_slide_title,
.tac-hero .et_pb_slide_title a,
.tac-hero .et_pb_slide_content {
	text-shadow: 0 1px 14px rgba(6, 32, 58, 0.6);
}

/* Both calls to action were white outlines, leaving no primary action. The
   admission button becomes solid; "Explore Our Programs" keeps the outline. */
.tac-hero .tac-btn-ghost {
	background: var(--tac-primary);
	border-color: var(--tac-primary);
	box-shadow: 0 8px 22px rgba(6, 32, 58, 0.32);
	text-shadow: none;
}

.tac-hero .tac-btn-ghost:hover,
.tac-hero .tac-btn-ghost:focus-visible {
	background: var(--tac-primary-dark);
	border-color: var(--tac-primary-dark);
	color: #fff;
}

/* --- Statistics --- */

.tac-stats .et_pb_circle_counter {
	margin-bottom: 0;
}

.tac-stats .et_pb_circle_counter .et_pb_module_header {
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	letter-spacing: 0.02em;
}

.tac-stats .percent p {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* --- News / post slider --- */

.tac-news .et_pb_slide_description {
	padding: clamp(30px, 4vw, 56px) clamp(20px, 4vw, 56px);
}

.tac-news .et_pb_slide_title {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.85rem);
	line-height: 1.3;
}

/* --- Closing call to action --- */

.tac-cta {
	background: linear-gradient(135deg, var(--tac-primary-darker), var(--tac-primary));
}

.tac-cta h2 {
	color: #fff;
}

.tac-cta p {
	color: rgba(255, 255, 255, 0.88);
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

/* --- Entrance animation, opt-in and motion-safe --- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.tac-reveal {
			animation: tac-fade-up linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
	}
}

@keyframes tac-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* 14. Print
   ========================================================================== */

@media print {
	#main-header,
	#main-footer,
	#et_mobile_nav_menu,
	.et_pb_scroll_top {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}
}