/* Whitelabel (Ambition) child theme styles */

/*
 * The News panel (Vue-rendered by the parent theme) always outputs a
 * hero/hero__wrapper/hero__body wrapper above the actual news cards, even
 * when there's no panel title or category dropdown to show inside it. That
 * wrapper picks up min-height: 700px from:
 *
 *   .panel.panel--hero .panel--mid .hero,
 *   .panel.panel--hero .panel--mid .media-wrap { min-height: 700px; }
 *
 * ...a rule defined in main-ambition.min.css, hosted externally by Kent
 * (kent.ac.uk/kent-theme-assets/...), not something editable at the
 * source. That selector has 4 class-selectors' worth of specificity
 * (panel, panel--hero, panel--mid, hero) — an earlier attempt at this
 * override only had 3, so it silently lost regardless of load order.
 * Matching the same class combination (swapping in panel--news) here
 * gives this rule equal specificity, and !important settles it decisively
 * — reaching for !important against a hosted, out-of-our-control
 * stylesheet like this one is a reasonable, deliberate exception to
 * normally avoiding it.
 */
.panel.panel--news.panel--hero.panel--mid .hero,
.panel.panel--news.panel--hero.panel--mid .media-wrap {
	min-height: auto !important;
}

/* Belt-and-braces for the fully-empty case (no title, no dropdown): collapse
   the wrapper outright rather than relying on min-height: auto alone, which
   can still leave a small gap from flex alignment/padding. */
.panel.panel--news.panel--hero.panel--mid .hero--full-width:has(.hero__body:empty) {
	display: none !important;
}

/*
 * Restores the header's original height/vertical rhythm, lost when the
 * University of Kent logo was removed for whitelabeling.
 *
 * .global-head uses align-items: center, with .global-head__core and
 * #main-menu as its two flex children — the row's overall height is set by
 * whichever is tallest. That was always .global-head__core, purely because
 * it contained a.global-head__unikent-logo, which has substantial padding
 * (30px/20px desktop, 40px/30px at 1366px+) plus a 60px-tall SVG, giving it
 * roughly 120–140px of height. The nav menu on the right was simply
 * centered to match via align-items: center — nothing to do with .header's
 * border-top or the (still unexplained) --header-content-height variable,
 * which were both dead ends in earlier attempts at this.
 *
 * Removing the logo collapsed .global-head__core down to just the small
 * "SChOOL YARD" tag, so the whole row collapsed with it. Giving
 * .global-head__core an explicit min-height, matching what the logo's own
 * padding used to provide at each breakpoint, reproduces the original
 * proportions without needing the logo itself.
 */
.global-head__core {
	min-height: 55px;
}
@media (min-width: 375px) {
	.global-head__core { min-height: 68px; }
}
@media (min-width: 544px) {
	.global-head__core { min-height: 85px; }
}
@media (min-width: 1024px) {
	.global-head__core { min-height: 120px; }
}
@media (min-width: 1366px) {
	.global-head__core { min-height: 140px; }
}

/*
 * One level of sub-page dropdowns in the primary nav (see
 * inc/nav-submenu.php for why these are needed and assets/js/nav-submenu.js
 * for the open/close behaviour this relies on).
 *
 * Deliberately scoped only by the parent theme's own ".in" class, which its
 * JS already adds to .department-nav__list when the nav is in its collapsed
 * state (the desktop "More" overflow panel and the mobile hamburger menu
 * both land on this one state) — never by an @media breakpoint of our own,
 * since the exact pixel values the parent switches between its horizontal
 * and collapsed layouts at aren't something this child theme controls or
 * has reason to duplicate. Whichever layout the parent is in, this follows
 * automatically.
 */

/* The toggle button: a small chevron next to the parent link. Closed by default. */
.department-nav__subtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.75rem;
	padding: 0;
	margin-left: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	vertical-align: middle;
	/* The chevron below is drawn with currentColor, and the parent theme's own generic button
	   reset (button,input,select,textarea{line-height:inherit;font:inherit}) never sets a text
	   color, so without this a <button> falls back to the browser's native default button text
	   color (dark in every common browser) -- invisible against this nav's dark background.
	   .department-nav__link (the sibling link text) sets color:#fff explicitly for the same
	   reason; this does the same for the toggle. */
	color: #fff;
}
/* The chevron is an inline <svg> in the markup (inc/nav-submenu.php), not drawn here -- a plain
   open "v" with rounded stroke ends rather than a filled triangle, matching how this looks on
   other Kent sites. stroke="currentColor" on the svg means it already follows the button's own
   color:#fff above without anything further here; this just handles the open/closed rotation. */
.department-nav__subtoggle svg {
	display: block;
	transition: transform 0.15s ease-in-out;
}
.department-nav__subtoggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* The dropdown itself: closed (not just hidden) until its parent <li> is marked open, so it
   can't be reached by keyboard or picked up by the parent theme's own nav-overflow detection
   (which measures whether the visible row has wrapped) while collapsed. */
.department-nav__submenu {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.department-nav__item--has-children.is-open > .department-nav__submenu {
	display: block;
}

/* The parent theme's own .department-nav__list carries overflow: hidden (needed for its collapse
   animation between the horizontal row and the "More"/mobile panel states), which also silently
   clips anything positioned to flow outside it -- including this dropdown, regardless of where
   on the page it's positioned relative to. Lifted only while a dropdown is actually open (the
   "has-open-submenu" class is added/removed by nav-submenu.js), and only in the horizontal
   state; the collapsed state's own overflow/max-height transition is untouched. */
.department-nav__list:not(.in).has-open-submenu {
	overflow: visible;
}

/* Horizontal row (the normal, non-collapsed nav): a flyout panel under the parent item. */
.department-nav__item--has-children {
	position: relative;
}
.department-nav__list:not(.in) .department-nav__item--has-children.is-open > .department-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	background-color: var(--panel-header-color, #101921);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	z-index: 20;
}
.department-nav__list:not(.in) .department-nav__subitem {
	display: block;
}
.department-nav__list:not(.in) .department-nav__sublink {
	display: block;
	padding: 0.6rem 1rem;
	white-space: nowrap;
}

/* Collapsed state (the "More" panel / the mobile menu): a simple indented accordion in the
   normal document flow, not a flyout — the parent theme's own ".in" class already presents the
   whole list as a full-width vertical panel, so a flyout here would look out of place. */
.department-nav__list.in .department-nav__submenu {
	position: static;
	padding-left: 1rem;
}
.department-nav__list.in .department-nav__sublink {
	display: block;
	padding: 0.5rem 0;
}

/*
 * White by default, in both states and regardless of link history. There is no generic
 * `a { color }` rule anywhere in the parent theme's stylesheet (confirmed by searching its
 * compiled CSS directly), so without this a sublink would fall back to the browser's own
 * default colours -- including its default *visited*-link colour (a dark purple in most
 * browsers) once a tester or visitor has actually clicked through to one, which is easy to
 * trigger without noticing while testing. One unconditional rule, covering :link and :visited
 * explicitly, removes that ambiguity rather than relying on inheritance or state-scoped rules.
 */
.department-nav__sublink,
.department-nav__sublink:link,
.department-nav__sublink:visited {
	color: #fff;
	/* The parent theme sets font-size:0 on .department-nav__list at desktop widths (a common trick
	   to remove inline-list whitespace gaps, confirmed by reading its actual CSS), relying on
	   every piece of text inside to set its own size back -- .department-nav__link does
	   (font-size:1.2rem), but nothing did for sublinks, so this text was inheriting the zero and
	   rendering at zero height: present, correctly positioned, entirely invisible, regardless of
	   colour. (The chevron svg was unaffected because it uses explicit pixel width/height
	   attributes, not font-relative sizing -- which is why it displayed correctly while the text
	   next to it did not.) Unconditional, not scoped to either nav state, because the "More"
	   overflow panel can also appear above the 1024px breakpoint where the zero applies. */
	font-size: 1rem;
}

.department-nav__sublink--active {
	text-decoration: underline;
}