/*
 * TAMUS overrides for the Aggie UX (AUX) header + footer.
 *
 * Matches the TAMUS-003 Figma wireframes (file RexniAOcolFOVWWMdnp42Z,
 * frame 995:10435 "About_Interior Design"): header = frame 995:10436,
 * footer = frame 995:10518.
 *
 * The Figma design is composed from AUX 2.0 design-system components
 * (.utility-nav, .main-nav, .aux-footer, .link--cta-leading), so AUX
 * already ships the maroon #500000 bars, Work Sans / Open Sans type,
 * the "Quicklinks & Search" button, the » leading-icon link lists and
 * the compliance row. Only the deltas between AUX defaults and the
 * Figma spec live here. Selectors verified against aux-styles.css
 * v2.0.4 (aux.tamu.edu) and the rendered markup on the AUX sandbox.
 *
 * Header/footer *content* (menus, CTAs, identity lockup, footer link
 * columns, compliance links) is Customizer + Menus config — see README.
 */

/* --------------------------------------------------------------------------
   HEADER — utility nav (Figma 995:10438)
   The Figma comp draws the utility CTAs ("Government Relations", "Giving")
   upright, so this file used to force font-style: normal. Dropped 9-2-26:
   tamu.edu renders them italic, which is also the AUX default, and header
   parity with tamu.edu takes precedence over the comp here. Deleting the
   rule rather than restating the default keeps AUX as the single source.
   -------------------------------------------------------------------------- */

/* "Quicklinks & Search" mega panel — the button (.utility-nav__quicklinks-
   search), the panel (#quicklinks-search.site-header__search) and the mobile
   toggle (.mobile-toggle__quicklinks-search) are all styled by aux-styles.css
   and driven by aux.js on the AUX CDN, exactly as on tamu.edu. The child
   templates only emit the markup contract — no CSS deltas needed here beyond
   the flex-layout slot below. */

/* --------------------------------------------------------------------------
   HEADER — identity + primary nav (Figma 995:10443)
   TAMUS uses the horizontal "THE TEXAS A&M UNIVERSITY SYSTEM" lockup
   (300x64 secondary mark, uploaded via Customizer > Site Header Settings);
   keep it at the Figma size instead of growing to AUX's default logo box.
   -------------------------------------------------------------------------- */

.main-header .site-header__identity .identity--tamus a {
	max-width: none;
}

/* 224px keeps the 8-13-26 horizontal lockup (4.21:1) at the Figma 53px
   identity-row height. */
.main-header .site-header__identity .identity--tamus .identity__logo {
	max-width: 224px;
	width: 224px;
}

.site-header__identity .identity__logo img {
	max-height: 64px;
	width: 100%;
	height: auto;
}

/* Figma 995:10443 puts the primary nav on the identity row (logo left,
   nav right, one 100px band) instead of AUX's separate nav bar below.
   Desktop only — mobile keeps AUX's overlay menu untouched. */
@media (min-width: 1025px) {
	header#navbar.main-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	header#navbar.main-header .utility-nav {
		flex: 0 0 100%;
	}

	/* The Quicklinks & Search mega panel sits between the utility bar and the
	   identity row (source order) and must span the full flex row. */
	header#navbar.main-header .site-header__search {
		flex: 0 0 100%;
	}

	/* Measured off tamu.edu (see the header-parity block below): its identity
	   row is a 1400px-max wrapper centred with auto margins — so a 20px gutter
	   at 1440 — and the lockup sits 16px inside that wrapper, putting its left
	   edge at 36px. AUX's own 16px is the inner half; this is the outer.
	   The floor is 0, not a fixed minimum: below 1400px tamu.edu's auto
	   margins collapse and the row runs edge to edge, with only the 16px
	   inner inset (and the nav links' own 16px padding) holding the text
	   off the viewport edge. A 1.5rem floor here left us 24px narrower
	   than tamu.edu at every width between 1025px and 1400px. */
	header#navbar.main-header .site-header__identity {
		flex: 0 0 auto;
		border-bottom: none;
		margin-left: max(0px, calc((100% - 1400px) / 2));
		/* tamu.edu's identity row is a flat 96px regardless of lockup height,
		   with the mark centred in it — so set the row height and centre,
		   rather than deriving it from padding around the logo. This also
		   supersedes the 9-1-26 "+5px header height" request: 96px is 6px
		   taller than the 90px that request produced. */
		padding-block: 0;
		min-height: 96px;
		display: flex;
		align-items: center;
	}

	header#navbar.main-header .nav-overlay {
		flex: 1 1 0;
		margin-right: max(0px, calc((100% - 1400px) / 2));
		/* tamu.edu's nav items are the full height of the identity row, so the
		   hover/active state paints the whole band. The header row is
		   align-items:center, so the overlay has to opt out of that. */
		align-self: stretch;
	}

	/* No rule under the header: tamu.edu ends its header at the identity row
	   with nothing drawn below it (measured total 157px, border-width 0), and
	   the 1px #d1d1d1 line this file used to add was the last thing keeping
	   us off that number. */

	header#navbar.main-header .site-header__nav {
		border-top: none;
		border-bottom: none;
	}

	header#navbar.main-header .site-header__nav .menu {
		display: flex;
		justify-content: flex-end;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* --------------------------------------------------------------------
	   Primary-nav parity with tamu.edu (measured with Playwright at 1440px
	   against https://www.tamu.edu/index.html, 9-2-26):

	     item height   96px (full identity row)   AUX department default 48px
	     font-size     17.6px (1.1rem)            AUX 16px
	     font-weight   700                        AUX 600
	     line-height   20px                       AUX normal / 24px
	     padding       16px                       AUX 12px

	   tamu.edu is on the AUX *flagship* header (.main-nav__item > a); this
	   install renders the department header (#menu .menu-item > a|button),
	   so the same numbers need different selectors. The #menu id is load-
	   bearing here — without it AUX's own department rules win on
	   specificity and the type silently stays at 16px/600.
	   -------------------------------------------------------------------- */
	header#navbar.main-header .site-header__nav,
	header#navbar.main-header .site-header__nav .menu,
	header#navbar.main-header .site-header__nav .menu > .menu-item,
	header#navbar.main-header .site-header__nav .menu > .menu-item > a,
	header#navbar.main-header .site-header__nav .menu > .menu-item > button {
		height: 100%;
	}

	header#navbar.main-header .site-header__nav .menu#menu > .menu-item > a,
	header#navbar.main-header .site-header__nav .menu#menu > .menu-item > button {
		font-size: 1.1rem;
		font-weight: 700;
		line-height: 20px;
		padding: 16px;
	}

	/* tamu.edu draws its lockup 56px tall. The TAMUS horizontal lockup is
	   4.21:1, so 236px wide lands on the same 56px optical height. */
	.main-header .site-header__identity .identity--tamus .identity__logo {
		max-width: 236px;
		width: 236px;
	}
}

/* Flagship-header markup (.main-nav__item), which this install does not
   render — kept so the rule still applies if AUX's flagship header is ever
   switched on. The department-header equivalents live in the parity block
   inside the desktop media query above. */
.main-nav .main-nav__links .main-nav__item a,
.main-nav .main-nav__links .main-nav__item button {
	font-weight: 700;
	line-height: 20px;
}

/* AUX left-aligns every dropdown under its toggle, so the last item's panel
   (Service) overflows the right viewport edge. Pin it to the right instead —
   fix supplied by the Aggie UX team (TAMUS1-78). */
#menu .menu-item:last-child .dropdown {
	right: 0;
}

/* Tablet: the nav is its own row under the logo, and AUX packs the five
   items at the left, leaving the right half of the row empty (iPad Pro 11,
   TAMUS2-149). tamu.edu spreads its items across the full row at these
   widths, so do the same. The 4px inset plus the items' own 12px padding
   puts the first and last labels 16px in, level with the logo. */
@media (min-width: 769px) and (max-width: 1024px) {
	header#navbar.main-header .site-header__nav .menu {
		justify-content: space-between;
		padding-inline: 4px;
	}
}

/* --------------------------------------------------------------------------
   CONTENT — full-bleed media features (Figma 731:10016)
   AUX runs .media-feature edge-to-edge with a 66/33 split that pins the text
   panel ~2rem off the viewport edge. The Figma home comps use a ~60/45 split
   with a real right margin, and the design is authored at 1440 — so above
   1600px cap the band instead of letting it stretch, keeping it balanced
   against the 1400px-wide sections around it. Desktop only; AUX's stacked
   mobile layout (max-width media queries, same specificity) stays untouched.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.media-feature {
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Image variant only — AUX's --video rules are more specific and keep
	   their 50/50 split, which already matches the Figma video band. */
	.media-feature .media-feature__media {
		width: 60%;
	}

	.media-feature .media-feature__content {
		width: calc(40% + 4rem);
		margin-left: -7rem;
		margin-right: 3rem;
	}
}

/* Uploaded video in a Media Feature. AUX sizes only the iframe (YouTube /
   Vimeo) to its 16:9 media box; an uploaded file renders as <video> carrying
   the file's own pixel width/height, so a 1920x1080 upload spills past the
   column. Fill the same box the iframe does. All widths: AUX's stacked mobile
   layout keeps the 16:9 box too. Drop this once AUX sizes <video> itself. */
.media-feature.media-feature--video .media-feature__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   FOOTER — main columns (Figma 995:10519)
   AUX's .aux-footer already gives the maroon background, gray italic
   uppercase column headings and white address block. Deltas:
   - Figma headings have no underline rule (AUX draws a #732f2f border).
   - Figma links are bold white with white » leading icons.
   -------------------------------------------------------------------------- */

/* Columns are AUX "Footer Column - Link List" blocks, which output
   .footer__column + .column__header; older markup used .aux-footer__column
   + h2. Style both so the maroon footer looks right either way. */
.aux-footer .aux-footer__container .aux-footer__column,
.aux-footer .aux-footer__container .footer__column {
	justify-content: flex-start;
	align-items: flex-start;
	width: 25%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) :is(h2, .column__header) {
	font-size: 1rem;
	font-family: "Open Sans", Arial, sans-serif;
	text-transform: uppercase;
	font-style: italic;
	font-weight: 700;
	color: #a7a7a7;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0.5rem;
}

.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) ul li a {
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) ul li a:hover,
.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) ul li a:focus,
.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) ul li a:active {
	color: #d6d3c4;
}

/* The AUX "Footer Column - Link List" block renders plain links inside
   .link-list--leading (no .link--cta-leading class), so cover both — AUX
   otherwise paints the » icons maroon-on-maroon (invisible). */
.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) :is(.link--cta-leading, .link-list--leading a:not(.btn))::before {
	background-color: #ffffff;
}

.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) :is(.link--cta-leading, .link-list--leading a:not(.btn)):hover::before,
.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) :is(.link--cta-leading, .link-list--leading a:not(.btn)):focus::before,
.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) :is(.link--cta-leading, .link-list--leading a:not(.btn)):active::before {
	background-color: #d6d3c4;
}

/* Figma spaces heading → first link ~16px; AUX's .link-list wrapper adds
   its own 1rem/1.5rem margins on top of the column's 8px gap. */
.aux-footer .aux-footer__container :is(.aux-footer__column, .footer__column) .link-list {
	margin-top: 0;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   FOOTER — identity column (Figma 995:10539)
   White System seal + address block. AUX pads its footer logo and lets it
   grow to 275px; Figma shows a 193px seal flush with the column.
   -------------------------------------------------------------------------- */

.aux-footer .aux-footer__container .aux-footer__column.aux-footer__column--identity {
	display: block;
}

/* TAMUS1-113: the identity column is the seal alone now, so the 1.5rem that
   separated it from the <address> below would just hang as dead space. The
   two address rules that lived here went with the markup. */
.aux-footer .aux-footer__container .aux-footer__column--identity .aux-footer__logo {
	padding: 0;
	max-width: 200px;
}

/* Tablet (TAMUS2-143): AUX gives the seal its own full-width row at <=992px
   and the columns a third each, but the 25% above still held the three
   link columns, so they filled 610 of 834px and left the right quarter
   empty. The seal also kept AUX's 1.5rem padding (the rule above loses to
   AUX's five-class selector), so it sat 24px in from the column text.
   Thirds fill the row, and the seal draws at the same 227px it drew inside
   the padding.

   Centred (10-13-26), as on phones: the seal in its row, and each column's
   heading and links in its third. See FOOTER ON MOBILE below for why the
   column needs align-items as well as text-align, and the logo auto
   margins. */
@media (min-width: 769px) and (max-width: 992px) {
	.aux-footer .aux-footer__container .footer__column {
		width: 33.33%;
		align-items: center;
		text-align: center;
	}

	.aux-footer .aux-footer__container .footer__column .link-list {
		padding-left: 0;
	}

	.aux-footer .aux-footer__container .aux-footer__column.aux-footer__column--identity .aux-footer__logo {
		padding-inline: 0;
		max-width: calc(275px - 3rem);
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   FOOTER — compliance bar (Figma 995:10542)
   Figma separates the main footer from the compliance links with a plain
   1px #732f2f rule, centers the list, and puts the © line on its own row.
   -------------------------------------------------------------------------- */

.aux-footer .aux-footer__sub {
	border-top: 1px solid #732f2f;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	justify-content: center;
}

.aux-footer .aux-footer__sub .compliance {
	flex-wrap: wrap;
	justify-content: center;
	padding-right: 0;
	/* Tighter wrapped rows than AUX's uniform 1rem gap (Figma row pitch). */
	gap: 0.5rem 1rem;
}

/* AUX's global `ul li` bottom margin stacked on the row gap, spreading the
   wrapped lines ~18px apart (TAMUS2-198); the gap alone spaces them. */
.aux-footer .aux-footer__sub .compliance li {
	margin-bottom: 0;
}

.aux-footer .aux-footer__sub .compliance li a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: #ffffff;
}

.aux-footer .aux-footer__sub .compliance li.compliance__copyright {
	width: 100%;
	text-align: center;
	margin-bottom: 0.75rem;
}

.aux-footer .aux-footer__sub .compliance li.compliance__copyright::after {
	content: none;
	padding: 0;
}

.aux-footer .aux-footer__sub .compliance li.compliance__copyright a {
	font-weight: 700;
	text-decoration: none;
}

/* Centred lines, no "|" separators. AUX puts a pipe after each link, so
   every wrapped line ended in a dangling one, and CSS can't tell which link
   ends a line. Moving the pipes in front and clipping them at the left edge
   (10-9-26) only works on left-aligned lines, and the client wants the
   lines centred (TAMUS2-198: a short last line looked off at the left).
   So the pipes go, as on phones, and the links are spaced by the old
   separator's width instead. */
@media (min-width: 769px) {
	.aux-footer .aux-footer__sub .compliance {
		column-gap: 2.25rem;
	}

	.aux-footer .aux-footer__sub .compliance li::after {
		content: none;
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   LOGO GRID (About page — Figma 995:10480 "Universities", 995:10490
   "Agencies"). AUX ships the component in CSS (.logo-grid, .logo-grid--small
   = 6-up, matching the Figma placeholder row). The one delta: AUX sizes each
   cell by width, and the institution marks are exported at mixed aspect
   ratios, so pin the row height the way Figma does (90px art + AUX's
   0.75rem cell padding) and let each logo letterbox inside its cell.

   Scoped to .logo-grid__container itself, not to a wrapper: the grids have
   now been an AUX Custom Content WYSIWYG, the child's tamus-logo-grid fork,
   and (9-18-26, TAMUS1-124) the parent's own aux/aux-logo-grid. Under the
   native block the marks rendered 63px to 275px tall until this rule stopped
   keying on .custom-content.
   -------------------------------------------------------------------------- */

.logo-grid__container > img {
	height: 8.625rem;
	object-fit: contain;
}

@media (max-width: 768px) {
	.logo-grid__container > img {
		height: 6.5rem;
	}
}

/* --------------------------------------------------------------------------
   RESEARCH PARTNERS linked cards (Research & Innovation page — Figma
   1133:3376 "Split Feature with Linked Cards"). The section has an intro
   heading, so AUX renders the card headings as h3 in Work Sans; Figma specs
   them Oswald 400 32px maroon. Driven by the block's "Display Card Headings"
   switch, so the re-type survives content edits.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   MEDIA FEATURE — white content background. AUX offers gray/maroon only;
   the About "System Position" video band is white in the design (it
   replaced a white callout). Driven by the block's own "White Content
   Background" switch, so the treatment travels with the row — no page IDs.
   -------------------------------------------------------------------------- */

.media-feature--tamus-white {
	background-color: #fff;
}

[class*="--tamus-display-headings"] .card .heading-group h3 {
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.2;
	color: #500000;
}

/* The `logo-grid--even` compensation that used to live here is gone. It existed
   because the "Other Institutions" marks were mixed-aspect Figma crops, so the
   generic rule above letterboxed tall marks (RELLIS) against wide wordmarks
   (TAMSI, BCDC). The client's 8-11-26 white logo set ships all nine at a
   uniform 600x400 with the art centered inside, which is what AUX's own
   width-based flow already expects — the grid renders like the Universities
   and Agencies grids above it with no delta. */

/* --------------------------------------------------------------------------
   OFFICES — keep "Quick Links" out of the On This Page sidebar (TAMUS1-66)
   Each office's Quick Links renders as a plain AUX link-list group; the
   group heading is an <h2> whenever the block has no section intro, and
   aux.js builds the in-page nav from every main#main-content h2 — so the
   sidebar repeats "Quick Links" once per office. Hide those entries; the
   office headings remain the navigation.
   -------------------------------------------------------------------------- */
#in-page-nav li:has(> a[href^="#quick-links"]) {
	display: none;
}

/* --------------------------------------------------------------------------
   SECTION INTRO — left-aligned heading option
   AUX centers a section intro (rule-flanked heading) whenever it has no
   description and no CTA; the Leadership Executive Team intro lost its
   button in TAMUS1-79 and snapped to center. Client wants it left like the
   other sections. Driven by the block's "Left-Align Section Heading"
   switch, so it survives an editor renaming the Row Anchor.
   -------------------------------------------------------------------------- */
.tamus-section--align-left .section-intro.section-intro--center .section-intro__container::before,
.tamus-section--align-left .section-intro.section-intro--center .section-intro__container::after {
	content: none;
}

.tamus-section--align-left .section-intro.section-intro--center .section-intro__container .section-intro__content .heading-group {
	justify-content: flex-start;
	text-align: left;
}

/* --------------------------------------------------------------------------
   INTERIOR HEROES — About / Academics / Leadership / Research (Figma 995:10460 etc.)
   Same client-approved treatment as the front page (see tamus-home.css):
   eyebrow + H1 float over the hero image in white Work Sans with the Figma
   drop shadow, and the 858px white panel below them — capped by a solid
   maroon bar — holds breadcrumbs, subhead and CTAs, overlapping the image
   bottom. AUX markup is untouched; the interior hero puts breadcrumbs,
   heading group and CTAs inside one .hero__content, so instead of absolute
   positioning the content becomes a grid, the heading group is flattened
   with display:contents, and the pieces are re-ordered — eyebrow, H1, then
   the white "panel" pieces (breadcrumbs, subhead, CTAs) each painting their
   own white background. The art is a fixed 600px and the text stack is
   anchored to the image top, so the eyebrow, headline and panel land on the
   same y on every interior page and the hero's own height follows the text
   below the panel (TAMUS1-108). Desktop only; below 1025px AUX drops the
   image overlap and the stock in-panel rendering stays.
   Scoped to .hero--tamus-float, added by header-hero.php when the page's
   "Floated Headline Hero" toggle (tamus_page_hero_float_switch) is on —
   no hard-coded page IDs.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	/* Overlay the content on the image with grid (same cell), both anchored
	   to the TOP of the cell (TAMUS1-108). Bottom-anchoring the content used
	   to make the eyebrow start wherever the subhead + CTAs happened to end,
	   so About began 126px below the image top and Research 281px — the
	   client asked for one anchor point on every interior page. Top-anchoring
	   plus the 3-line min-height on the H1 (below) fixes the eyebrow, the
	   headline and the white panel to the same y on every page; a short
	   headline now leaves its slack between the H1 text and the panel, which
	   is what the ticket describes. The grid row is as tall as the taller of
	   the two children, so the hero's own height follows the text: no fixed
	   bottom margin standing in for the overhang any more. */
	.hero.hero--bold.hero--tamus-float {
		display: grid;
		grid-template-columns: 100%;
		margin-bottom: 3rem;
	}

	.hero.hero--bold.hero--tamus-float .hero__image,
	.hero.hero--bold.hero--tamus-float .hero__container {
		grid-area: 1 / 1;
		align-self: start;
	}

	/* TAMUS1-108: 600px of art, so an interior hero is never deeper than the
	   home hero. Figma draws the interior art 1440x710 and starts the white
	   panel at 560 — 79% of the image — so at 600px the panel lands ~475px
	   down and still overlaps the art bottom by ~125px, the same overlap the
	   2:1 crop gave. The image fills that box from the top edge and the
	   bottom is what gets cropped, so the subject stays put as the box
	   shortens. Block img + explicit height also removes the 6px inline
	   descender gap that made the box 726px instead of 720px. */
	.hero.hero--bold.hero--tamus-float .hero__image {
		aspect-ratio: auto;
		height: 600px;
	}

	.hero.hero--bold.hero--tamus-float .hero__image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}

	/* Image top -> eyebrow. Scaled from Figma's 710px art (panel at 560,
	   headline block 297 tall, 20px headline-to-panel gap per client
	   8-28-26): 600 - 125 overlap - 20 - 297 - 38 eyebrow = ~120px. */
	.hero.hero--bold.hero--tamus-float .hero__container {
		position: relative;
		z-index: 1;
		/* auto sides, not `margin: 0` — the container is a 1400px max-width
		   box that AUX centres with auto inline margins, and zeroing all four
		   pinned it to the left edge. */
		margin: 0 auto;
		padding-top: 7.5rem;
	}

	.hero.hero--bold.hero--tamus-float .hero__container .hero__content {
		display: grid;
		grid-template-columns: 100%;
		width: min(858px, 92%);
		margin: 0 auto;
		padding: 0;
		background: transparent;
	}

	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group {
		display: contents;
	}

	/* No bold-style accent block between subhead and CTAs (Figma). */
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group::after {
		display: none;
	}

	/* --- floated eyebrow + H1 --- */
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group .superhead {
		order: 1;
		margin: 0 0 0.25rem;
		color: #ffffff;
		font-family: "Work Sans", Arial, sans-serif;
		font-weight: 700;
		font-size: 1.75rem;
		line-height: 1.2;
		text-transform: uppercase;
		text-shadow: 0 4px 19px rgba(0, 0, 0, 0.85);
	}

	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group h1 {
		order: 2;
		margin: 0 0 20px; /* client 8-28-26: same 20px headline-to-panel gap as the home hero */
		/* TAMUS1-108: always reserve three lines (Figma draws the headline
		   block 297px tall whether the copy runs two lines or three), so the
		   white panel starts at the same y on every interior page. em, so it
		   tracks the clamped font size. 3 x the 1.03 line-height below. */
		min-height: 3.09em;
		color: #ffffff;
		font-family: "Work Sans", Arial, sans-serif;
		font-style: normal;
		font-weight: 800;
		font-size: clamp(3.25rem, 6.875vw, 6.1875rem);
		line-height: 1.03;
		text-transform: uppercase;
		text-shadow: 0 4px 19px rgba(0, 0, 0, 0.85);
	}

	/* --- white panel pieces --- */
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .breadcrumbs {
		order: 3;
		margin: 0;
		padding: 2rem 3rem 0;
		background: #ffffff;
		border-top: 8px solid #500000;
	}

	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group .subhead {
		order: 4;
		display: block;
		margin: 0;
		padding: 0.75rem 3rem 0;
		background: #ffffff;
		/* TAMUS1-110: AUX sets the bold-hero subhead italic; the home hero's
		   description is roman and the client wants the interior heroes to
		   match it. */
		font-style: normal;
	}

	/* TAMUS1-110: 1.5rem, so copy-to-CTA is the 24px the home hero uses
	   (its .hero__description carries a 24px bottom margin). */
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .button-group,
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content > .btn {
		order: 5;
		margin: 0;
		padding: 1.5rem 3rem 3rem;
		background: #ffffff;
	}

	/* A hero with no CTAs still needs the panel bottom closed — but ONLY
	   then. This rule also carried `.subhead:last-child`, which is true on
	   every page (the subhead is always the last child of .heading-group),
	   so the 48px closing pad fired underneath the copy even on pages that
	   DO have buttons — 48px of subhead padding plus the button row's own
	   top padding put 64px between copy and CTAs where the home hero has 24.
	   .heading-group:last-child is the real "no CTAs" test: the heading
	   group is the last child of .hero__content only when no button group
	   follows it. */
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group:last-child .subhead {
		padding-bottom: 3rem;
	}
}

/* Below 1025px the stock AUX panel stays, but it still sits on the image,
   so it carries the desktop panel's maroon top edge (TAMUS3-33: missing on
   iPad portrait, there in landscape). */
@media (max-width: 1024px) {
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content {
		border-top: 8px solid #500000;
	}
}

/* --------------------------------------------------------------------------
   FLOATED-HERO CTAS — match the front-page hero buttons (TAMUS1-90 +
   client 8-28-26: every floated hero, not just About).
   The page-CTA repeater renders .btn--cta (solid, chevron on hover only) and
   .btn--cta-secondary (italic text link); the front page renders solid
   maroon .btn--primary with the » chevron always visible (tamus-home.css)
   in the CDN's 50/50 .button-group--primary grid (1rem gap, each button
   calc(50% - 0.75rem)). Restyle the floated-hero CTAs to that look and
   lay them out on the same grid. The inline sprite each button ships
   (angles-right / arrow-right-long) is hidden and the same masked
   angles-right ::after is drawn instead, so the buttons match exactly.
   -------------------------------------------------------------------------- */

.hero--tamus-float .hero__content .button-group--cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.hero--tamus-float .hero__content .button-group--cta .btn {
	width: calc(50% - 0.75rem);
	background: #500000;
	color: #ffffff;
	border: 2px solid #3c0000;
	border-radius: 0;
	font-size: 1rem;
	font-style: normal;
	padding: 0.65rem 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s ease;
}

/* Stack the pair on mobile (client 9-9-26). This rule existed already but sat
   ABOVE the calc(50% - 0.75rem) declaration -- same specificity, so the
   desktop width won at every viewport and the buttons stayed side by side at
   151px. Ordering it after the base rule is what makes it take effect.
   align-self is reset because the buttons carry flex-start, which would keep
   them at their content width inside the stretched row. */
@media (max-width: 768px) {
	.hero--tamus-float .hero__content .button-group--cta .btn {
		width: 100%;
		align-self: stretch;
	}
}

.hero--tamus-float .hero__content .button-group--cta .btn:hover,
.hero--tamus-float .hero__content .button-group--cta .btn:focus,
.hero--tamus-float .hero__content .button-group--cta .btn:active {
	background-color: #732f2f;
	color: #ffffff;
}

.hero--tamus-float .hero__content .button-group--cta .btn svg {
	display: none;
}

.hero--tamus-float .hero__content .button-group--cta .btn::after {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-left: 0.5rem;
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg") no-repeat center / contain;
	mask: url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   MEDIA SLAB — explicit bottom spacing (TAMUS1-93 + client 8-28-26).
   The CDN reserves margin-bottom: 3rem under every slab, which read as
   unexplained padding under image-only slabs. Spacing is now driven by the
   block's "Bottom Spacing" toggle (tamus_media_slab_spacing_switch, child
   fork of the Media Slab template): off (default) = the slab ends at the
   figure; on (.captioned-media--slab-spaced) = 6rem below it. A hanging
   caption (bottom: -3rem) always keeps the 3rem it needs.
   -------------------------------------------------------------------------- */

/* Site-wide: the CDN sets slab bottom margins from several context
   selectors (e.g. body.aux-sidebar--none:not(.news-template-default)
   .aux-body-content > figure.captioned-media--slab { margin-bottom: 6rem })
   that outrank any flat rule, and the set varies by CDN version. The
   toggle must win everywhere, so these carry !important — the one place
   in this sheet where that is the design, not a shortcut. Within the
   trio, source order resolves: caption beats base, spaced beats both. */
.captioned-media.captioned-media--slab {
	margin-bottom: 0 !important;
}

.captioned-media.captioned-media--slab:has(figcaption) {
	margin-bottom: 3rem !important;
}

.captioned-media.captioned-media--slab.captioned-media--slab-spaced {
	margin-bottom: 6rem !important;
}

/* Spaced slabs scale down on small screens the way the parent theme's own
   rule did (6rem -> 2.25rem under 992px). */
@media (max-width: 992px) {
	.captioned-media.captioned-media--slab.captioned-media--slab-spaced {
		margin-bottom: 2.25rem !important;
	}
}

/* --------------------------------------------------------------------------
   STANDARD PAGE HEADER — Figma cleanup (TAMUS1-97).
   1. No maroon color bar under the heading (AUX's [class*=bold]
      .heading-group::after block).
   2. Headings render upright — AUX's bold display style italicizes h1.
   3. On headers without an image, CTAs sit on the right side of the
      header row: the child header-standard.php emits them in a
      .page-header__ctas sibling of .page-header__content, and the
      container's existing space-between flex row pushes them to the right
      edge. Image headers keep them under the heading (the image covers
      the right edge).
   -------------------------------------------------------------------------- */

.page-header[class*="bold"] .heading-group::after {
	display: none;
}

.page-header .heading-group--display h1 {
	font-style: normal;
}

/* TAMUS1-112: except on the two "bold" page headers — News & Stories and
   Offices & Departments are the only pages that render page-header--bold, and
   the client wants the display italic back on them. TAMUS1-97 had taken it
   off every page header at once; this puts it back on exactly those two
   without disturbing the ~10 default headers. */
.page-header[class*="bold"] .heading-group--display h1 {
	font-style: italic;
}

/* The CDN caps .page-header__content at 55% to leave room for the optional
   clip-path header image. With no image that cap just wraps the heading
   early — let the heading column take the row (minus the CTA column). */
.page-header:not(:has(.page-header__image)) .page-header__container .page-header__content {
	width: auto;
	flex: 1 1 auto;
}

.page-header .page-header__container .page-header__ctas {
	flex: 0 0 auto;
	margin-left: auto;
}

.page-header .page-header__container .page-header__ctas .button-group {
	justify-content: flex-end;
}

@media (max-width: 992px) {
	.page-header .page-header__container .page-header__ctas {
		flex-basis: 100%;
		margin-left: 0;
	}

	.page-header .page-header__container .page-header__ctas .button-group {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   CONTACT CARDS — bio line (TAMUS1-101).
   The child block fork renders contact_card_bio as .info__bio under the
   name/title block; AUX has no styling for it.
   -------------------------------------------------------------------------- */

.profile-preview .profile-preview__info .info__bio {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #3e3e3e;
}

/* --------------------------------------------------------------------------
   CONTACT CARDS — matching heights, bio on the card bottom (TAMUS1-111 +
   client 9-1-26).
   .inline-flow is a wrapping flex row, so cards already stretch to their
   OWN row — a one-line job title left the whole row 26px shorter than a row
   holding a two-line one, and the bio started at a different height in every
   card. Reserving two title lines (2 x the 1.5 line-height = 3em) levels
   every row, and the bio's auto top margin keeps it on the card bottom for
   any bio that runs short of the space left over.
   -------------------------------------------------------------------------- */

.profile-preview--sidebar .profile-preview__info {
	flex: 1 1 auto;
	justify-content: flex-start;
}

.profile-preview--sidebar .profile-preview__info .info__title {
	display: block;
	min-height: 3em;
}

.profile-preview--sidebar .profile-preview__info .info__bio {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* ------------------------------------------------ brag bars (TAMUS1-107)
   "Brag bar" on this site is AUX's Standard Card Group rendered with icon
   cards: `.card-group > .standard-flow > .card` where each card leads with
   an `.icon-wrapper`. Three pages carry one — the home page, /research/
   (Row Anchor #tamus-stat-cards) and /academics/ — and only those card
   groups contain `.icon-wrapper`, so `:has()` keys the rules to the
   component instead of to a per-page anchor. Any brag bar added later
   picks the styling up with no CSS change.

   Client 9-1-26 asks for two things on every brag bar: centered items, and
   the figure line at 24px / 800 / italic.

   Measured on staging at 1440px before the change: `.card` and its text
   resolve to text-align:start with the 48px icon flush to the card's left
   edge (icon centre sits 196px left of the card centre, card width 464px);
   the figure `h2` computes to 25.6px / 600 / normal in Work Sans. AUX gives
   `.card` display:flex/column, so align-items:center pulls the icon onto
   the card's centre line and text-align:center handles the two text rows.
   -------------------------------------------------------------------- */

.card-group:has(.card > .icon-wrapper) .card {
	align-items: center;
	text-align: center;
}

.card-group:has(.card > .icon-wrapper) .card .card__content .heading-group :is(h1, h2, h3, h4, h5, h6) {
	font-size: 24px;
	font-weight: 800;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   CONTENT FEATURE — keep the image column inside its column
   AUX's two-col container is a flex row whose columns are declared at 50%,
   but a flex item's min-width is auto, so a `large` image (1024px) pushes its
   column wider than the declaration and the row runs past the content column
   — under the page sidebar on a sidebar layout. min-width:0 lets the column
   honour its 50%, and the image scales inside it.
   -------------------------------------------------------------------------- */
.custom-content--two-col .custom-content__container .custom-content__col {
	min-width: 0;
}

.custom-content--two-col .custom-content__container .custom-content__col img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   CONTENT FEATURE — the image fills its column instead of fitting inside it
   Client 9-9-26: cover, not contain. The image column is absolutely
   positioned so the picture cannot drive the row height -- the column then
   takes its height from the text beside it (flex stretch) and the picture
   crops to fill. min-height keeps a sensible band when the text is short.
   Stacked (below), there is no column height to fill and the picture keeps
   its own proportions again.

   The block's "Stretch Image to Text Height" switch (TAMUS1-153) turns this
   off per block: off adds custom-content--tamus-image-natural, and the
   picture keeps its own shape at the top of its column instead.
   -------------------------------------------------------------------------- */
.custom-content--two-col:not(.custom-content--tamus-image-natural) .custom-content__container .custom-content__col:has(> img) {
	position: relative;
	overflow: hidden;
	min-height: 15rem;
}

.custom-content--two-col:not(.custom-content--tamus-image-natural) .custom-content__container .custom-content__col > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.custom-content--tamus-image-natural.custom-content--two-col .custom-content__container .custom-content__col:has(> img) {
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   MEDIA BLOCKS — stack by the block's own width (TAMUS2-146)
   AUX stacks image-beside-text layouts on the viewport (<=768px), so a block
   never saw the page sidebar: at iPad Pro 11 portrait (834px) a sidebar page
   gave the Content Feature 536px and each column 244px, side by side, while
   AUX Callout beside it had already stacked; the Leadership page's Media
   Feature laid a 290px text panel over its picture. Every child block that
   sets an image beside text is now a `tamus-media` container and stacks on
   its own width, into AUX's own phone layout for that component:

     Content Feature           the block
     Card Group, In the News   .card-group (inline and featured-inline cards)
     Contact Card Collection   .contact-card-collection
     Media Feature             its parent column: the block sets its own flex
                               row, and an element cannot query itself. The
                               column is the block's width (608 vs 584px on a
                               sidebar page, equal at full width).

   Media Slab (one full-width figure) and Social Banner (a row of icons) have
   nothing side by side.

   Thresholds, measured on staging 10-9-26 (Content Feature width at
   viewport; the Media Feature's column runs the full viewport width):
     full width   834 → 786, Surface Pro 7 912 → 864, Surface Pro 8+ 960 →
                  912, iPad Pro 13 1032 → 984, 1210 → 1162
     with sidebar 834 → 536, 1210 → 818, 1280 → 870, 1440+ → 960 (cap)
   A single width cannot split those: tablet portrait reaches 1032px while a
   desktop sidebar page is 960px. Orientation does: held upright, a block
   stacks below 65rem (1040px, just past the widest upright tablet, iPad Pro
   13 at 1032px), and in landscape — desktops, laptops, tablets on their
   side — only below 48rem (768px, AUX's own stacking breakpoint), so
   sidebar pages keep their two columns from 1210px up.

   Container queries cannot test orientation, so the stacked rules appear
   twice, once per threshold. The two copies must stay identical.
   -------------------------------------------------------------------------- */
.custom-content--two-col,
.card-group,
.contact-card-collection,
.aux-body-content:has(> .media-feature) {
	container: tamus-media / inline-size;
}

@media (orientation: portrait) {
	@container tamus-media (width < 65rem) {
		/* Content Feature */
		.custom-content.custom-content--two-col .custom-content__container {
			flex-direction: column;
		}

		.custom-content.custom-content--two-col .custom-content__container .custom-content__col {
			width: 100%;
		}

		.custom-content--two-col:not(.custom-content--tamus-image-natural) .custom-content__container .custom-content__col:has(> img) {
			position: static;
			min-height: 0;
		}

		.custom-content--two-col:not(.custom-content--tamus-image-natural) .custom-content__container .custom-content__col > img {
			position: static;
			height: auto;
			max-width: 100%;
		}

		/* Card Group, In the News */
		.card--inline,
		.card--featured.card--inline .featured-container {
			flex-direction: column;
			flex-wrap: wrap;
			gap: 0;
		}

		.card--inline .card__image {
			width: 100%;
			max-width: 100%;
			margin-bottom: 0.75rem;
		}

		.card--featured.card--inline .featured-container .card__image {
			width: 100%;
			align-self: flex-start;
		}

		.card--featured.card--inline .featured-container .icon-wrapper {
			margin-left: 0;
		}

		.inline-flow .card.card--inline {
			width: 100%;
		}

		.card-group--feed .inline-flow .card--inline .card__image {
			order: 1;
		}

		.card-group--feed .inline-flow .card--inline .card__content {
			order: 2;
		}

		/* Contact Card Collection */
		.contact-card__main {
			flex-direction: column;
		}

		.contact-card__main .contact-card__content {
			order: 2;
			width: 100%;
		}

		.contact-card__main .contact-card__image {
			order: 1;
		}

		.contact-card--featured .contact-card__main .contact-card__image {
			width: 100%;
			min-width: unset;
		}

		/* Media Feature */
		.media-feature {
			flex-wrap: wrap;
		}

		.media-feature .media-feature__media {
			width: 100%;
			clip-path: none;
			aspect-ratio: 16/9;
		}

		.media-feature .media-feature__content {
			width: 100%;
			margin: 0;
		}

		.media-feature.media-feature--bold .media-feature__content {
			box-shadow: 0px 10px 0 #500000;
		}

		.media-feature.media-feature--bold.media-feature--gray-900 .media-feature__content,
		.media-feature.media-feature--bold.media-feature--maroon .media-feature__content {
			box-shadow: 0px 10px 0 #d6d3c4;
		}

		.media-feature.media-feature--right .media-feature__media {
			clip-path: none;
			order: 1;
		}

		.media-feature.media-feature--right .media-feature__content {
			margin: 0;
			order: 2;
		}

		.media-feature.media-feature--video .media-feature__media,
		.media-feature.media-feature--video .media-feature__content {
			width: 100%;
		}
	}
}

@container tamus-media (width < 48rem) {
	/* Content Feature */
	.custom-content.custom-content--two-col .custom-content__container {
		flex-direction: column;
	}

	.custom-content.custom-content--two-col .custom-content__container .custom-content__col {
		width: 100%;
	}

	.custom-content--two-col:not(.custom-content--tamus-image-natural) .custom-content__container .custom-content__col:has(> img) {
		position: static;
		min-height: 0;
	}

	.custom-content--two-col:not(.custom-content--tamus-image-natural) .custom-content__container .custom-content__col > img {
		position: static;
		height: auto;
		max-width: 100%;
	}

	/* Card Group, In the News */
	.card--inline,
	.card--featured.card--inline .featured-container {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 0;
	}

	.card--inline .card__image {
		width: 100%;
		max-width: 100%;
		margin-bottom: 0.75rem;
	}

	.card--featured.card--inline .featured-container .card__image {
		width: 100%;
		align-self: flex-start;
	}

	.card--featured.card--inline .featured-container .icon-wrapper {
		margin-left: 0;
	}

	.inline-flow .card.card--inline {
		width: 100%;
	}

	.card-group--feed .inline-flow .card--inline .card__image {
		order: 1;
	}

	.card-group--feed .inline-flow .card--inline .card__content {
		order: 2;
	}

	/* Contact Card Collection */
	.contact-card__main {
		flex-direction: column;
	}

	.contact-card__main .contact-card__content {
		order: 2;
		width: 100%;
	}

	.contact-card__main .contact-card__image {
		order: 1;
	}

	.contact-card--featured .contact-card__main .contact-card__image {
		width: 100%;
		min-width: unset;
	}

	/* Media Feature */
	.media-feature {
		flex-wrap: wrap;
	}

	.media-feature .media-feature__media {
		width: 100%;
		clip-path: none;
		aspect-ratio: 16/9;
	}

	.media-feature .media-feature__content {
		width: 100%;
		margin: 0;
	}

	.media-feature.media-feature--bold .media-feature__content {
		box-shadow: 0px 10px 0 #500000;
	}

	.media-feature.media-feature--bold.media-feature--gray-900 .media-feature__content,
	.media-feature.media-feature--bold.media-feature--maroon .media-feature__content {
		box-shadow: 0px 10px 0 #d6d3c4;
	}

	.media-feature.media-feature--right .media-feature__media {
		clip-path: none;
		order: 1;
	}

	.media-feature.media-feature--right .media-feature__content {
		margin: 0;
		order: 2;
	}

	.media-feature.media-feature--video .media-feature__media,
	.media-feature.media-feature--video .media-feature__content {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   CTA FEATURE AFTER A MEDIA FEATURE ON MOBILE (Academics)
   At 992px and below AUX pulls the CTA box up 15rem into its own 15rem top
   margin (room for the black band behind it). AUX's spacing rule for a CTA
   that follows a Media Feature, Split Feature or colored section sets that
   margin to 8rem at every width and comes later in AUX's CSS, so on mobile
   the box rises 7rem into the block above and covers its button. Restore
   the mobile margin. :is() takes its strongest argument's specificity
   (0,2,0), matching AUX's two-class section-wrap selectors.
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
	:is(.media-feature, .split-feature, .section-wrap.section-wrap) + .feature-cta {
		margin-top: 15rem;
	}
}

/* --------------------------------------------------------------------------
   FOOTER ON MOBILE — stack the link columns, centre the identity (9-9-26)
   The footer container is a wrap flex row, but the three link columns hold
   their width instead of wrapping: measured at 390px each column is 92px
   wide while its own headings and links need ~127px, so every column
   overflows its box. Giving them the full row makes them stack. The identity
   block sits left of centre at that width (48px of space on one side, 115px
   on the other), so it is centred here too.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.aux-footer .aux-footer__container .footer__column {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.aux-footer .aux-footer__column--identity,
	.aux-footer .aux-footer__logo {
		text-align: center;
	}

	/* The logo block carries max-width:275px and no side margins, so it sits
	   flush left in the 342px column no matter what text-align says -- a block
	   needs auto margins to centre. */
	.aux-footer .aux-footer__logo {
		margin-inline: auto;
	}

	/* Stacked columns need to read as separate groups: spacing between the
	   groups. Type is left alone -- same family, size and weight the footer
	   already uses. */
	.aux-footer .aux-footer__container .footer__column .column__header {
		margin-bottom: 0.75rem;
	}

	/* Centre every stacked column, headings and links alike (client 9-9-26).
	   This replaces the 1rem link indent that landed the day before: an indent
	   reads as a group only against a left edge, and there is no left edge
	   left once the content is centred.

	   The column is a flex column pinned to align-items:flex-start, so its
	   children are shrink-wrapped boxes sitting at the left edge -- the h3 is
	   72px wide in a 366px column, and text-align inside a 72px box moves
	   nothing. align-items centres the boxes; text-align then centres the
	   wrapped lines inside the ones that do fill the row (the link list, a
	   heading that runs to two lines). The leading ">>" icon is a ::before on
	   the anchor with a hanging negative margin, so it stays with its label. */
	.aux-footer .aux-footer__container .footer__column {
		align-items: center;
		text-align: center;
	}

	.aux-footer .aux-footer__container .footer__column .link-list {
		padding-left: 0;
	}

	/* Stacked columns had no margin at all between them, so the last link of
	   one column sat on the heading of the next. */
	.aux-footer .aux-footer__container .footer__column {
		margin-bottom: 2rem;
	}

	.aux-footer .aux-footer__container .footer__column:last-of-type {
		margin-bottom: 0;
	}

	.aux-footer .aux-footer__logo a {
		display: inline-block;
	}
}

/* --------------------------------------------------------------------------
   FOOTER ON MOBILE — keep the fixed menu bar off the footer (TAMUS1-119)
   AUX pins .mobile-toggle to the bottom of the viewport at <=768px (measured
   61px tall at 390px, plus the safe-area inset it adds for the home
   indicator). The document ends flush with the footer's sub band, so at full
   scroll that bar sits on top of the last 61px of the footer. Reserving the
   same height below the compliance links means the bar can only ever cover
   empty maroon.

   env() mirrors .mobile-toggle's own padding-bottom so the reserve tracks the
   bar on a device with a home indicator; browsers without env() fall back to
   the bar height alone.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.aux-footer .aux-footer__sub {
		padding-bottom: calc(61px + env(safe-area-inset-bottom, 1px));
	}
}

/* --------------------------------------------------------------------------
   HEADER ON MOBILE — drop the empty utility bar (TAMUS1-120)
   AUX hides the utility nav's contents at <=768px: .utility-nav__right goes
   display:none and the only thing left of it is the flagship link, which this
   site does not use. What survives is the bar itself -- a bare 16px band of
   #500000 above the identity row, which is the maroon strip the client
   flagged.

   Nothing is lost by removing it: the utility CTAs (Member Hub, Government
   Relations, Giving) are rendered a second time inside the drawer's
   .mobile-content, and search lives on the "Quicklinks & Search" button in
   the bottom bar. Scoped with a child combinator to the bar the header emits
   directly, so an AUX build that moves a utility nav into .nav-overlay is
   unaffected.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	header#navbar.main-header > .utility-nav {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   IN THE NEWS — source logo in the card subhead
   The TAMUS In the News block puts the News Source term's Logo/Icon before
   the outlet name, as news.engineering.tamu.edu does. AUX ships no rule for
   .term-icon, so the thumbnail would render at its intrinsic size (180px
   measured in the row layout on staging 10-2-26); this sizes it to the
   subhead's line in both the feed and the row-of-three cards.
   -------------------------------------------------------------------------- */
.card .subhead .term-icon {
	display: inline-block;
	width: auto;
	height: 1.25em;
	margin-right: 0.35em;
	vertical-align: text-bottom;
}

/* In the News links open in a new tab and carry AUX's .external-link icon,
   which AUX sets up as display:inline-block. Inside the feed card's heading
   and subhead that shrink-wraps the link: a short headline breaks early and
   the source logo drops onto its own line. Inline keeps them flowing as
   text; the ::after icon stays attached to the last word. The row-of-three
   (standard) cards keep the subhead outside .heading-group, hence the
   second selector: without it the logo sat above the outlet name. */
.card--inline-feed .heading-group a.external-link,
.card .subhead a.term-link {
	display: inline;
}

/* --------------------------------------------------------------------------
   SEARCH PANEL — bottom spacing without Quicklinks
   AUX's open panel has no bottom padding of its own: the space under the
   search form came from the Quicklinks block below it (margin-top 2rem +
   its link columns). With the panel cut to search-only (2f5666e) it ended
   flush with the form — 0px measured on staging 9-30-26. 2.5rem is the
   bottom spacing AUX gives this container at its other breakpoint. Scoped
   to a panel without Quicklinks so AUX's spacing returns untouched if the
   links come back.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	/* Not on phones: at <=768px AUX pads the open panel itself, and adding
	   this on top left 104px under the form. From 769px up AUX adds none
	   (0px measured at 1024 and 1440). */
	#quicklinks-search.site-header__search .site-header__search__container:not(:has(.quicklinks)) {
		padding-bottom: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   TABLEPRESS — keep the table in the text column after DataTables loads
   The parent narrows immediate children of .aux-body-content (p, h2 … table)
   to the text column on no-sidebar pages (aux-wordpress style.css, "Align
   html elements output by native WP blocks"). A TablePress table with
   sorting/paging on starts as a matching <table>, then DataTables moves it
   into div.dt-container, which is not on that list — so it rendered
   constrained, then jumped to full width (Open Records, TAMUS1-142). Same
   values and breakpoints as the parent rule, applied to the wrapper.
   -------------------------------------------------------------------------- */
body.aux-sidebar--none:not(.news-template-default) .aux-body-content > .dt-container {
	/* The parent's elements are border-box; DataTables' wrapper is not, so
	   width: 100% + side padding overflowed phones by the padding. */
	box-sizing: border-box;
	max-width: calc(.6666 * 1400px);
	margin: 0 auto 1rem;
	padding: 0 .75rem;
	width: calc(66.66666%);
}

@media screen and (max-width: calc(1400px + 3rem)) {
	body.aux-sidebar--none:not(.news-template-default) .aux-body-content > .dt-container {
		max-width: unset;
		width: calc(66.66666% - 3.6rem);
		padding: 0;
	}
}

@media screen and (max-width: 992px) {
	body.aux-sidebar--none:not(.news-template-default) .aux-body-content > .dt-container {
		width: 100%;
		padding: 0 2.25rem;
	}
}

/* The table itself fills the wrapper; the wrapper carries the column width. */
body.aux-sidebar--none:not(.news-template-default) .aux-body-content > .dt-container table {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* DataTables controls without TablePress's default CSS: AUX looks. The
   length select and search input keep AUX's field styling at their natural
   width; the paging buttons are AUX pagination (.pagination__page). */
.dt-container .dt-layout-row:not(.dt-layout-table) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0;
}

.dt-container .dt-length,
.dt-container .dt-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dt-container .dt-length select.dt-input {
	width: auto;
	min-width: 5rem;
}

.dt-container .dt-search input.dt-input {
	width: 16rem;
	max-width: 100%;
	padding: 0.75rem;
	border: solid #d1d1d1 2px;
	border-radius: 12px;
}

.dt-container .dt-paging nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dt-container .dt-paging .dt-paging-button {
	padding: 0.5rem 1rem;
	border: solid #d1d1d1 2px;
	border-radius: 12px;
	background: transparent;
	font-weight: bold;
	color: #500000;
	cursor: pointer;
}

.dt-container .dt-paging .dt-paging-button.current {
	background: #500000;
	border-color: #500000;
	color: #ffffff;
}

.dt-container .dt-paging .dt-paging-button:not(.current):not(.disabled):hover,
.dt-container .dt-paging .dt-paging-button:not(.current):not(.disabled):focus-visible {
	background: #eaeaea;
	border-color: #500000;
}

.dt-container .dt-paging .dt-paging-button.disabled {
	color: #a7a7a7;
	cursor: default;
}

/* Long unbroken strings (e.g. AM-SAPublic.InformationRequests@tamusa.edu)
   set the table's minimum width; on a phone that pushed it 72px past the
   318px text column. Let them wrap inside the cell when space runs out —
   no effect where the column is wide enough. */
.tablepress th,
.tablepress td {
	overflow-wrap: anywhere;
}

/* At <=768px AUX stacks table cells into full-width blocks, but the table
   is still display:table with DataTables' two-column <colgroup> (measured
   widths written inline), so the browser kept sizing columns and the
   stacked table ran past the screen edge. Stacked, there are no columns:
   make the table and its body plain blocks and drop the colgroup. */
@media (max-width: 768px) {
	.dt-container table.tablepress,
	.dt-container table.tablepress > tbody {
		display: block;
		width: 100% !important;
	}

	.dt-container table.tablepress > colgroup {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   CONTENT FEATURE — 24px column gap (TAMUS1-146)
   AUX spaces the two- and three-column containers 1rem (16px) apart; the
   client asked for 24px, site-wide. Columns are 50% / 33.33% flex items
   that shrink, so the wider gap narrows them instead of overflowing.
   -------------------------------------------------------------------------- */
.custom-content.custom-content--two-col .custom-content__container,
.custom-content.custom-content--three-col .custom-content__container {
	gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   SEARCH PANEL — close button level with the heading
   On desktop AUX stacks the panel's top row as blocks, so "× Close" sat on
   its own line above "SEARCH" (61-85px vs heading 85-143px, measured on
   staging 9-30-26). One flex row, heading left and close right, text tops
   aligned. Phones keep AUX's own layout for this row.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	/* 24px top padding keeps the heading where it sat before (85px): that
	   space used to be the close button's own row, and without it the close
	   button crowded the utility bar above. */
	#quicklinks-search.site-header__search .site-header__top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		padding-top: 1.5rem;
	}

	#quicklinks-search.site-header__search .site-header__top .site-header__search-heading {
		order: 1;
		width: auto;
		margin-bottom: 0;
	}

	/* Box tops align at 61px, but the 48px heading's letters start 6px lower
	   than the button's (half-leading + cap height; ink measured at 13px vs
	   7px). Drop the button by that difference so the text tops match. */
	#quicklinks-search.site-header__search .site-header__top .site-header__close {
		order: 2;
		width: auto;
		margin: 6px 0 0;
	}
}

/* --------------------------------------------------------------------------
   SEARCH PANEL — phone layout, ported from AUX
   AUX styles the phone search panel with `.site-header .site-header__search
   …` rules. tamu.edu's header carries .site-header; ours is
   `main-header site-header--alt`, so none of them matched: no top-row flex
   and divider, a bare "Close" with no ×, and a panel that did not fill the
   screen. These are AUX 2.1.x's own max-width:768px rules for the panel,
   re-scoped to our header (generated from aux-styles.css 9-30-26, values
   unchanged; quicklinks rules left out — the panel has none — and so is
   the container margin, which AUX's later .active rule overrides on
   tamu.edu but which would win here, loading after AUX). The scope is
   the single class .site-header--alt so specificity equals AUX's
   .site-header and AUX's later .active rules still win ties as they do on
   tamu.edu; a two-class scope pushed the search box off the screen edge. Adding
   .site-header to the header instead would pull in every other
   .site-header rule site-wide. Re-check against aux-styles.css on AUX
   upgrades.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.site-header--alt .site-header__search [class*=__top] {
		display: flex;
		justify-content: flex-end;
		border-bottom: solid #d1d1d1 2px;
	}

	.site-header--alt .site-header__search [class*=__top] .back {
		width: 70%;
		padding: 0.5rem 1rem;
		font-family: "Work Sans", Arial, sans-serif;
		text-align: left;
		font-size: 0.9rem;
		color: #000000;
	}

	.site-header--alt .site-header__search [class*=__top] .close {
		width: 30%;
	}

	.site-header--alt .site-header__search [class*=__top] .close::after {
		content: "×";
		font-style: normal;
		font-weight: 700;
		padding-left: 0.3rem;
	}

	.site-header--alt .site-header__search [class*=__top] .close {
		background: none;
		border: none;
		border-radius: 0;
		font-family: "Work Sans", Arial, sans-serif;
		font-weight: 400;
		font-size: 0.9rem;
		padding: 0.5rem 0.75rem;
		font-style: italic;
		text-align: right;
		color: #000000;
		cursor: pointer;
	}

	.site-header--alt .site-header__search {
		background: #ffffff;
		border: 0;
		height: 100%;
		overflow-y: scroll;
		padding: 0;
		position: fixed;
		width: 100%;
		z-index: 13;
	}

	.site-header--alt .site-header__search .search .search__form .search__input,
	.site-header--alt .site-header__search .search .search__form button[type=submit] {
		height: 55px;
	}

	.site-header--alt .site-header__search .search .search__form .search__input,
	.site-header--alt .site-header__search .search .search__form button[type=submit] {
		height: 55px;
		font-size: 16px;
	}

}

/* --------------------------------------------------------------------------
   SEARCH PANEL — side inset at tablet widths
   From 769px up the panel's top row and search container are width:100%
   capped at 1200px and centred, so below ~1250px the heading, Close and the
   search box ran flush to the window edges (800-1024px measured 9-30-26).
   24px side padding — the phone inset — with the cap widened by the same
   amount, so wide screens keep the content exactly at 1200px (120-1320px
   at 1440).
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	#quicklinks-search.site-header__search .site-header__top,
	#quicklinks-search.site-header__search .site-header__search__container {
		box-sizing: border-box;
		max-width: calc(1200px + 3rem);
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   KEYBOARD FOCUS — phone Search toggle and Search Filters button (TAMUS1-161)
   AUX gives the bottom bar's Menu toggle a 4px gold focus ring, but the
   Search toggle beside it and the results page's "Search Filters" button
   have no focus rule of their own, so keyboard users got the browser's thin
   1px default (staging tab pass at 375px, 10-2-26). Same ring as AUX's
   Menu toggle and sidebar controls.
   -------------------------------------------------------------------------- */
.mobile-toggle .mobile-toggle__quicklinks-search:focus-visible {
	outline: solid #af8846 4px;
	outline-offset: -2px;
}

.sidebar .sidebar__trigger:focus-visible {
	outline: solid #af8846 4px;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   GRAVITY FORMS SUBMIT — same padding and » chevron as the site's buttons
   The submit carries AUX's btn btn--primary (TAMUS1-152, functions.php),
   but AUX's generic button[type=submit] rule outranks .btn and set its
   padding to 0.75rem 1rem, so it rendered squat beside every other primary
   button (98x52 vs the site's 0.65rem 2rem, staging 10-2-26). Restore the
   .btn padding and draw the same masked angles-right chevron the front-page
   and floated-hero buttons carry. It is a <button>, so ::after renders.
   The MembershipWorks Join Now button (also a <button>) shares the chevron
   (TAMUS2-213).
   -------------------------------------------------------------------------- */
.gform_wrapper .btn.btn--primary.gform_button {
	padding: 0.65rem 2rem;
	line-height: 1.5;
}

.gform_wrapper .btn.btn--primary.gform_button::after,
.tamus-membershipworks #SFctr button.SFfpybtn::after {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-left: 0.5rem;
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg") no-repeat center / contain;
	mask: url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   SEARCH RESULTS — long terms and the filter pills (site + News search)
   A search term with no spaces is one unbreakable word, so a 100-character
   term pushed the page-header H1 ("Search results for …"), the status line
   and the term's pill past the right edge, and the pill squeezed Clear All
   until its label wrapped (TAMUS3-1, TAMUS3-3; on phones even "university
   research" wrapped it). Long words now break where they must; the pills
   shrink and Clear All keeps its one-line width.

   With two or more filters the pills sit in a list and the collection's
   own 1.5rem bottom margin is zeroed by AUX's `.section-wrap > *` reset, so
   the last pill touched the first result's image (TAMUS3-21). A single pill
   only looked spaced because Clear All carries a 1rem bottom margin; the
   collection margin now does that job for both.
   -------------------------------------------------------------------------- */
.page-header h1,
.tamus-search-status {
	overflow-wrap: anywhere;
}

.section-wrap > .dismissible-tag-collection {
	margin-bottom: 1.5rem;
}

.dismissible-tag-collection .dismissible-tag-collection__container > .tag-collection,
.dismissible-tag-collection .tag--dismissible {
	min-width: 0;
	overflow-wrap: anywhere;
}

.dismissible-tag-collection a.dismissible-tag-collection__clear {
	flex-shrink: 0;
	white-space: nowrap;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ICON LISTS — long email addresses wrap
   An address is one unbreakable word, so on phones the longer ones
   (SystemOfficesEmployment@tamus.edu, researchdevelopment@tamus.edu) ran
   ~30px past the screen on Offices and Departments and the whole page
   could be dragged sideways (TAMUS3-27). They now break where they must.
   -------------------------------------------------------------------------- */
.icon-list li,
.icon-list li > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   MEMBERSHIPWORKS FORM — centred, with the site's form styles (TAMUS2-213)
   functions.php wraps the plugin's #SFctr in a .section-wrap, which gives
   it the page gutters. Here it gets a centred reading-width column and the
   Contact form's AUX look: Work Sans labels, full-width fields with a 2px
   grey border and no rounding, maroon radios and checkboxes, and the
   site's square maroon uppercase button. Colours and radii go through the
   plugin's own --SF-* variables where it has one.
   -------------------------------------------------------------------------- */
.tamus-membershipworks {
	max-width: 48rem;
	margin-inline: auto;
}

.tamus-membershipworks #SFctr {
	--SF-color-button-background: #500000;
	--SF-color-button-text: #fff;
	--SF-color-checkbox-background: #500000;
	--SF-color-outline: #af8846;
	--SF-border-radius-half: 0;
	--SF-border-radius-full: 0;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 1rem;
	color: #000;
}

.tamus-membershipworks #SFctr td,
.tamus-membershipworks #SFctr label,
.tamus-membershipworks #SFctr h4 {
	font-family: "Work Sans", Arial, sans-serif;
}

.tamus-membershipworks #SFctr table.SFfrm {
	width: 100%;
}

.tamus-membershipworks #SFctr input[type=text],
.tamus-membershipworks #SFctr input[type=email],
.tamus-membershipworks #SFctr input[type=tel],
.tamus-membershipworks #SFctr input[type=password],
.tamus-membershipworks #SFctr select,
.tamus-membershipworks #SFctr textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
	border: 2px solid #a7a7a7;
	border-radius: 0;
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 1rem;
}

.tamus-membershipworks #SFctr button.SFfpybtn {
	padding: 0.65rem 2rem;
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	border-radius: 0;
}

.tamus-membershipworks #SFctr button.SFfpybtn:hover,
.tamus-membershipworks #SFctr button.SFfpybtn:focus-visible {
	background: #732f2f;
	filter: none;
}

/* --------------------------------------------------------------------------
   DETAILS COLLECTIONS ON PHONES — headings stay inside the border
   In the body column a details box sits inside four gutters (container,
   column, section, collection: 60px a side), so at 320px it was 200px wide
   and the 24px summary padding left "ADVANCEMENT:" in the Strategic Plan
   objectives no room: it ran over the padding to the maroon border
   (TAMUS3-22). Below 768px the collection drops its own extra gutter and
   the summary and content pad 1rem; a word longer than the box still breaks.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.details-collection .details-collection__container {
		padding-inline: 0;
	}

	.details-collection .details > summary,
	.details-collection .details > .details__content {
		padding-inline: 1rem;
	}

	.details-collection .details > summary > span {
		overflow-wrap: anywhere;
	}
}

/* --------------------------------------------------------------------------
   HERO HEADLINES — a dark backing for contrast scanners (TAMUS2-277)
   The white eyebrow and H1 sit over the hero photo or video, but that art
   is a sibling, not an ancestor, so accessibility scanners walk up to the
   white page and flag white-on-white. Every ancestor box is taller than
   the art, so a background there would show below it. Instead each text
   element gets a black background clipped to its own glyphs: the opaque
   white fill paints over it, nothing changes on screen, and scanners read
   white on black. Only where the text is white over the art — the home
   hero above 768px, the floated interior heroes from 1025px.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	.hero.hero--home .hero__container h1 {
		background-color: #000000;
		-webkit-background-clip: text;
		background-clip: text;
	}
}

@media (min-width: 1025px) {
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group .superhead,
	.hero.hero--bold.hero--tamus-float .hero__container .hero__content .heading-group h1 {
		background-color: #000000;
		-webkit-background-clip: text;
		background-clip: text;
	}
}