/*
Theme Name: UT Brand Theme
Theme URI: https://iamservices.utexas.edu
Author: UT Austin IAM Team
Author URI: https://iamservices.utexas.edu
Description: A standalone WordPress theme for iamservices.utexas.edu built to the University of Texas at Austin's official brand standards (burnt orange & white primary palette, Libre Franklin / Charis SIL typography). No parent theme dependency.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ut-brand
*/

/* ==========================================================================
   1. Brand tokens
   Source: brand.utexas.edu (Colors + Typography), umac.utexas.edu/brand-center
   ========================================================================== */

:root {
	/* Primary palette */
	--ut-orange: #bf5700;   /* PMS 159 - primary */
	--ut-white: #ffffff;

	/* Secondary / supportive palette */
	--ut-slate: #333f48;    /* PMS 432 */
	--ut-orange-light: #f8971f; /* PMS 2011 - secondary orange, use sparingly, never more prominent than primary */
	--ut-tan: #d6d2c4;      /* PMS 7527 */
	--ut-steel: #9cadb7;    /* PMS 7543 */

	/* Accent palette - use sparingly, never overwhelm primary */
	--ut-blue: #005f86;     /* PMS 7469 */
	--ut-teal: #00a9b7;     /* PMS 320 */
	--ut-green: #579d42;    /* PMS 2277 */
	--ut-green-light: #a6cd57; /* PMS 2300 */
	--ut-yellow: #ffd600;   /* PMS 116C/114U */

	/* Derived, accessibility-driven working colors
	   Burnt orange on white measures 4.59:1 - passes AA for body links there,
	   matching tech.utexas.edu's use of burnt orange for hyperlinks - but it
	   drops below 4.5:1 on our off-white/tan surfaces (#f4f2ee 4.10:1,
	   #f7f5f1 4.21:1, tan #d6d2c4 3.03:1). --color-link is the default (white
	   backgrounds); contexts on those tinted surfaces override to
	   --ut-orange-text (5:1+ on white and light-gray, still fails on tan) or
	   another explicitly-checked color instead - see .contact-info a,
	   .footer-main a, .utility-bar a, .page-toc a. --color-link-hover
	   (#8a3d00) is a darker orange chosen to clear 4.5:1 on every surface in
	   the theme, tan included, so it never needs a per-context override. */
	--color-text: #1a1a1a;
	--color-text-muted: #55606a;
	--color-link: var(--ut-orange);
	--color-link-hover: #8a3d00;
	--color-bg: var(--ut-white);
	--color-border: #e0ddd5;
	--ut-orange-text: #b45200;

	/* Typography - brand.utexas.edu web-safe substitutes */
	--font-sans: "Libre Franklin", Arial, Helvetica, sans-serif;
	--font-serif: "Charis SIL", Georgia, "Times New Roman", serif;

	--max-width: 1200px;
	--radius: 4px;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg);
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-link);
	text-decoration: underline;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--ut-blue);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ut-slate);
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.35rem; }

/* Optional serif accent per brand.utexas.edu (Charis SIL replaces GT Sectra) -
   apply sparingly, e.g. to pull quotes or the academic wordmark treatment. */
.font-serif-accent {
	font-family: var(--font-serif);
}

/* Section heading with the short, thick underline rule used throughout
   tech.utexas.edu (Enterprise Technology, our parent org). */
.section-heading {
	position: relative;
	padding-bottom: 0.6rem;
	margin-bottom: 1.75rem;
}

.section-heading::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 130px;
	max-width: 100%;
	height: 4px;
	background: var(--ut-orange);
}

p { margin: 0 0 1.25em; }

ul, ol { padding-left: 1.5em; }

blockquote {
	margin: 1.75em 0;
	padding: 0.25em 1.5em;
	border-left: 4px solid var(--ut-orange);
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--ut-slate);
}

blockquote p:last-child {
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	margin-top: 0.5em;
	font-family: var(--font-sans);
	font-style: normal;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

blockquote cite::before {
	content: "\2014 ";
}

/* Editorial icons inserted via the block editor's Font Awesome rich-text
   tool (e.g. a lock for "login required," an arrow for "opens in a new
   tab") - used across many content pages, always annotating the link
   immediately before them. The plugin marks the SVG aria-hidden and
   fill="currentColor", but doesn't set its own color, so by default it
   just inherits the surrounding paragraph's dark text color instead of
   reading as an accent. Recolor to the same accessible orange used for
   the theme's own icon+link pairs (.icon-lock, .icon-external), which
   passes AA on white and on every tinted surface in the theme. */
.entry-content .wp-rich-text-font-awesome-icon {
	color: var(--ut-orange-text);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	left: -9999px;
	position: absolute;
	top: 0;
	z-index: 100000;
	background: var(--ut-slate);
	color: var(--ut-white);
	padding: 0.75em 1.25em;
	text-decoration: none;
}

.skip-link:focus {
	left: 0.5em;
	top: 0.5em;
	/* .screen-reader-text (also on this link) clips it to 1x1px with
	   !important - repositioning alone isn't enough, the clip has to be
	   released too (also !important) or the focused skip-link stays
	   invisible even though it correctly receives keyboard focus. */
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.site-content {
	/* Longhand (not shorthand) so this doesn't clobber .container's
	   left/right padding when both classes land on the same element. */
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}

.content-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 782px) {
	.content-layout.has-sidebar {
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	}
}

.button,
button:not(.wp-block-search__button):not([class]),
input[type="submit"] {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 600;
	background: var(--ut-orange);
	color: var(--ut-white);
	border: 2px solid var(--ut-orange);
	border-radius: var(--radius);
	padding: 0.65em 1.4em;
	text-decoration: none;
	cursor: pointer;
	font-size: 1rem;
}

.button:hover,
.button:focus,
input[type="submit"]:hover {
	background: var(--ut-slate);
	border-color: var(--ut-slate);
	color: var(--ut-white);
}

.button--outline {
	background: transparent;
	color: var(--ut-orange-text);
}

.button--outline:hover {
	background: var(--ut-orange);
	color: var(--ut-white);
}

/* ==========================================================================
   4. Site header
   Modeled on tech.utexas.edu (Enterprise Technology, our parent org):
   a thin utexas.edu utility bar, a white branding row with a two-line
   wordmark lockup, then a separate white primary nav row with a hairline
   bottom border. Burnt orange is reserved for the top rule, the utility
   bar link and hover/active states - not a full-bleed orange masthead.
   ========================================================================== */

.utility-bar {
	background: #f4f2ee;
	border-top: 4px solid var(--ut-orange);
	font-size: 0.8rem;
}

.utility-bar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.utility-bar a {
	color: var(--ut-orange-text);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.utility-bar a:hover,
.utility-bar a:focus {
	color: var(--color-link-hover);
}

.utility-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.utility-nav a {
	text-transform: none;
	font-weight: 600;
	color: var(--ut-slate);
}

.site-header {
	background: var(--ut-white);
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}

.brand-bar {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

/* Flex goes on .brand-bar .container (not .brand-bar itself) - .container
   has its own `margin: 0 auto`, and an auto-margined flex ITEM self-centers
   regardless of the parent's justify-content, which was pulling the whole
   row to the middle instead of spanning edge-to-edge. */
.brand-bar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.site-branding img {
	max-height: 64px;
	width: auto;
}

.site-branding-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.site-parent-line {
	font-family: var(--font-serif);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ut-orange-text);
}

.site-title {
	font-family: var(--font-sans);
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0;
	color: var(--ut-slate);
}

.site-title a {
	color: var(--ut-slate);
	text-decoration: none;
}

.site-description {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--color-text-muted);
}

.header-search .search-form {
	margin: 0;
}

.header-search input[type="search"] {
	min-width: 220px;
}

.primary-nav-row {
	background: var(--ut-white);
	border-bottom: 1px solid var(--color-border);
}

.menu-toggle {
	display: none;
	background: transparent;
	border: 2px solid var(--ut-slate);
	color: var(--ut-slate);
	padding: 0.5em 0.9em;
	font-weight: 600;
	margin: 0.75rem 0;
}

.primary-navigation > ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	/* Links carry their own 1em horizontal padding (for a full hover/focus
	   hit box), which otherwise pushes the "Home" label a few px right of
	   the logo/hero text above and below it. Shift the whole row left by
	   that same amount so the text - not the padded box - sets the edge. */
	margin: 0 0 0 -1em;
	padding: 0;
}

.primary-navigation li {
	position: relative;
}

.primary-navigation a {
	display: block;
	color: var(--ut-slate);
	text-decoration: none;
	font-weight: 600;
	padding: 0.9em 1em;
	border-bottom: 3px solid transparent;
}

.primary-navigation a:hover,
.primary-navigation a:focus {
	color: var(--ut-orange-text);
	border-bottom-color: var(--ut-orange-text);
}

.primary-navigation .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: 0.1em;
}

/* Submenus: hidden dropdowns on desktop, not flat full-width rows. */
.primary-navigation ul ul {
	list-style: none;
	margin: 0;
	padding: 0.4em 0;
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--ut-white);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--ut-orange);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
	z-index: 20;
}

.primary-navigation ul ul a {
	padding: 0.6em 1em;
	border-bottom: none;
	white-space: nowrap;
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul a:focus {
	background: #f4f2ee;
}

.primary-navigation li:hover > ul,
.primary-navigation li:focus-within > ul {
	display: flex;
}

@media (max-width: 781px) {
	.menu-toggle {
		display: inline-block;
	}

	.primary-navigation {
		display: none;
		width: 100%;
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-navigation > ul {
		flex-direction: column;
	}

	.primary-navigation ul ul {
		display: block;
		position: static;
		box-shadow: none;
		border: none;
		border-left: 3px solid var(--ut-tan);
		padding-left: 1em;
	}

	.primary-navigation li:hover > ul,
	.primary-navigation li:focus-within > ul {
		display: block;
	}

	.utility-nav ul {
		flex-direction: column;
		gap: 0.5rem;
	}
}

/* ==========================================================================
   5. Hero (front page)
   White background, two-column split (copy left / photography right) -
   the pattern used on tech.utexas.edu rather than a solid-color masthead.
   ========================================================================== */

.hero {
	background: var(--ut-white);
	padding-top: 3rem;
	padding-bottom: 1rem;
}

.hero .container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.hero .container {
		grid-template-columns: 1fr 1fr;
	}
}

.hero h1 {
	color: var(--ut-slate);
}

.hero p {
	max-width: 42em;
	font-size: 1.15rem;
	color: var(--color-text-muted);
}

.hero .button {
	margin-top: 0.5rem;
}

.hero-media img {
	border-radius: var(--radius);
}

/* Tan callout band (e.g. a "Get Support" style highlight), matching the
   supportive-palette tan used for emphasis bands on tech.utexas.edu. */
.callout-band {
	background: var(--ut-tan);
	padding: 2.5rem 0;
	margin: 3rem 0;
}

.callout-band .container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 782px) {
	.callout-band .container {
		grid-template-columns: 1fr 2fr;
	}
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	align-items: start;
	gap: 1.75rem;
	margin: 2.5rem 0;
}

.feature-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ut-white);
}

.feature-card img {
	width: 100%;
}

.feature-card .feature-card-body {
	padding: 1.5rem;
}

.feature-card h3 {
	margin-bottom: 0.5rem;
	color: var(--ut-orange);
	font-size: 1.15rem;
}

/* "A Closer Look at IAM" - modeled directly on tech.utexas.edu's "A Closer
   Look at Enterprise Technology": a photo (3:2) above a linked title and a
   one-line description, no card border/shadow/background/padding - that
   section is a flat image+text stack, not a boxed card. Only the title is
   a link (matches the source pattern), so cards have no whole-card hover
   affordance. */
.closer-look {
	margin: 3rem auto;
}

.closer-look-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.75rem 2rem;
	margin-top: 1.5rem;
}

.closer-look-card .image-wrapper {
	margin: 0 0 0.75rem;
	border-radius: var(--radius);
	overflow: hidden;
}

.closer-look-card .image-wrapper img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.closer-look-card h3 {
	font-size: 1.15rem;
	margin-bottom: 0.4rem;
}

.closer-look-card h3 a {
	color: var(--ut-orange);
	text-decoration: none;
}

.closer-look-card h3 a:hover,
.closer-look-card h3 a:focus {
	text-decoration: underline;
}

.closer-look-card p {
	color: var(--color-text-muted);
	margin: 0;
}

/* Lock icon appended to the Technical Docs title link, flagging that
   destination as requiring authentication. fill="currentColor" in the SVG
   markup keeps it the same orange as the link text automatically. */
.closer-look-card .icon-lock {
	/* Overrides the global `img, svg { display: block; }` reset, which
	   otherwise forces the icon onto its own line below the link text
	   instead of staying inline right after it. */
	display: inline-block;
	margin-left: 0.3em;
	vertical-align: -1px;
}

/* "Latest Updates" home-page teaser - a flat vertical list (linked title +
   date, no image/excerpt/card box) with a single "View all Updates" button
   below, matching tech.utexas.edu's "ET News and Events" list styling.
   Scoped to its own classes rather than reusing .feature-grid/.feature-card,
   which stay in place for the real News archive/search/index templates. */
.update-list {
	list-style: none;
	margin: 1.5rem 0 2rem;
	padding: 0;
	max-width: 700px;
}

.update-list li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-border);
}

.update-list li:first-child {
	padding-top: 0;
}

.update-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.update-list h3 {
	margin: 0 0 0.3rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.update-list h3 a {
	color: var(--ut-orange);
	text-decoration: none;
}

.update-list h3 a:hover,
.update-list h3 a:focus {
	color: var(--color-link-hover);
	text-decoration: underline;
}

.update-date {
	display: block;
	font-size: 0.9rem;
	color: var(--ut-slate);
}

/* ==========================================================================
   6. Posts / archive / single
   ========================================================================== */

.entry-meta {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-bottom: 0.75rem;
}

.entry-summary + .entry-meta,
.post-list article + article {
	margin-top: 2.5rem;
}

.post-list article {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--color-border);
}

.post-list article:last-child {
	border-bottom: none;
}

.pagination {
	display: flex;
	gap: 0.75rem;
	margin-top: 2rem;
	list-style: none;
	padding: 0;
}

.pagination a,
.pagination span {
	padding: 0.5em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination .current {
	background: var(--ut-orange);
	color: var(--ut-white);
	border-color: var(--ut-orange);
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.5rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   7. Sidebar / widgets
   ========================================================================== */

.widget {
	margin-bottom: 2rem;
}

.widget-title {
	font-size: 1.1rem;
	border-bottom: 2px solid var(--ut-orange);
	padding-bottom: 0.4em;
}

.page-toc {
	background: #f7f5f1;
	border-left: 4px solid var(--ut-orange);
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
}

@media (min-width: 782px) {
	.page-toc {
		position: sticky;
		top: 1.5rem;
	}
}

.page-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-toc li {
	margin: 0.5em 0;
	line-height: 1.35;
}

.page-toc .toc-level-3 {
	margin-left: 1.1em;
	font-size: 0.92rem;
}

.page-toc a {
	color: var(--ut-slate);
	text-decoration: none;
}

.page-toc a:hover,
.page-toc a:focus {
	color: var(--color-link-hover);
	text-decoration: underline;
}

.widget-recent-posts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget-recent-posts li {
	margin: 0 0 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--ut-tan);
}

.widget-recent-posts li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.widget-recent-posts a {
	display: block;
	font-weight: 600;
	color: var(--ut-slate);
	text-decoration: none;
}

.widget-recent-posts a:hover,
.widget-recent-posts a:focus {
	color: var(--color-link-hover);
	text-decoration: underline;
}

.widget-recent-posts .post-date {
	display: block;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-top: 0.2em;
}

/* ==========================================================================
   8. Contact template
   ========================================================================== */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 782px) {
	.contact-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-info {
	background: #f7f5f1;
	border-left: 4px solid var(--ut-orange);
	padding: 1.5rem;
	border-radius: var(--radius);
}

/* Default --color-link (#bf5700) drops to 4.21:1 on this box's #f7f5f1
   background - under the 4.5:1 AA threshold for normal text - so any link
   here (e.g. a phone/email link) uses the darker --ut-orange-text (4.65:1)
   instead. */
.contact-info a {
	color: var(--ut-orange-text);
}

.contact-form .form-row {
	margin-bottom: 1.1rem;
}

.contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 1rem;
	padding: 0.6em 0.75em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.contact-form textarea {
	min-height: 140px;
}

.form-message {
	padding: 0.9em 1.1em;
	border-radius: var(--radius);
	margin-bottom: 1.25rem;
}

.form-message.success {
	background: #eaf4e6;
	border: 1px solid var(--ut-green);
	color: #2f5223;
}

.form-message.error {
	background: #fdecea;
	border: 1px solid #b3261e;
	color: #7d1a15;
}

.honeypot-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   9. Landing (full-width) template
   ========================================================================== */

.landing-page .site-content .container {
	max-width: var(--max-width);
}

.landing-page article > .entry-content {
	max-width: 100%;
}

/* ==========================================================================
   10. Footer
   Light-gray informational band (logo lockup + quick links + social),
   topped with a hairline, then a full-width solid burnt-orange bar with the
   required University links and copyright - matching tech.utexas.edu.
   ========================================================================== */

.site-footer {
	margin-top: 0;
}

.footer-main {
	background: #f4f2ee;
	color: var(--color-text);
	padding: 2.5rem 0;
}

/* Same reasoning as .contact-info a: default --color-link (#bf5700) only
   reaches 4.10:1 on this #f4f2ee background, under AA for normal text.
   More specific widget-area link rules (.footer-social a, .widget-title,
   etc.) already set their own color and take precedence over this. */
.footer-main a {
	color: var(--ut-orange-text);
}

.footer-main .container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 782px) {
	.footer-main .container {
		grid-template-columns: 1.2fr 0.85fr 1fr;
	}
}

/* Quick-links middle column - a plain vertical list with a single divider
   rule along its own left edge, matching the highlighted link group in
   tech.utexas.edu's footer (rather than a bulleted or per-item divider). */
.footer-quick-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

@media (min-width: 782px) {
	.footer-quick-links ul {
		padding-left: 1.5rem;
		border-left: 1px solid var(--color-border);
	}
}

.footer-quick-links a {
	text-decoration: none;
	font-weight: 600;
}

.footer-quick-links a:hover,
.footer-quick-links a:focus {
	text-decoration: underline;
}

.footer-quick-links .icon-external {
	/* Same fix as .icon-lock - overrides `img, svg { display: block; }`. */
	display: inline-block;
	margin-left: 0.3em;
	vertical-align: -1px;
}

.footer-branding .site-title {
	font-size: 1.25rem;
}

.footer-branding .site-parent-line {
	font-size: 0.85rem;
}

.footer-colophon {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-top: 0.75rem;
}

.footer-social {
	display: flex;
	gap: 0.6rem;
	margin-top: 1rem;
	list-style: none;
	padding: 0;
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ut-slate);
	color: var(--ut-white);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 700;
}

.footer-main .widget-title {
	color: var(--ut-slate);
	border-bottom-color: var(--ut-orange);
}

.footer-required {
	background: var(--ut-orange);
	color: var(--ut-white);
	padding: 1rem 0;
}

.footer-required .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.footer-required ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
}

.footer-required li {
	padding: 0 0.9rem;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.footer-required li:first-child {
	border-left: none;
	padding-left: 0;
}

.footer-required a {
	color: var(--ut-white);
}

/* Without this, hover/focus would inherit the global a:hover color
   (--color-link-hover), a dark orange that's nearly invisible against this
   bar's solid --ut-orange background (1.67:1). These links are already
   underlined at rest (inherited from the base `a` rule), so that's the only
   hover affordance needed once color stays fixed. */
.footer-required a:hover,
.footer-required a:focus {
	color: var(--ut-white);
}

.footer-copyright {
	font-size: 0.85rem;
	margin: 0;
}

/* ==========================================================================
   11. 404 / search
   ========================================================================== */

.error-404 .container,
.search-no-results .container {
	max-width: 700px;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 0.65em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 1rem;
	font-family: var(--font-sans);
}