/* -----------------------------------------
Colors
----------------------------------------- */
@black: #000000;
@white: #ffffff;
@purple: #4b2e83;
@gold: #b7a57a;
@lightgold: #b7a57a;
@neutral: #eeeae0;
@grey: #d9d9d9;
@blue: #006ec3;
@textblack: #3d3d3d;
@metallicgold: #85754d;
@lightgrey: #d1d1d1;


/* Typography */

/* Open Sans — Upright Variable */
@font-face {
font-family: "Open Sans";
src: url("/site/templates/styles/fonts/opensans/opensans_variable.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}

/* Open Sans — Italic Variable */
@font-face {
font-family: "Open Sans";
src: url("/site/templates/styles/fonts/opensans/opensans_variable_italic.woff2") format("woff2");
font-weight: 300 800;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'encodesanscompressed-600-semibold-webfont';
src: url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.eot');
src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'encodesanscompressed-800-extrabold-webfont';
src: url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.eot');
src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'encodesanscompressed-900-black';
src: url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.eot');
src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'encode_sans_compressedregular';
src: url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.eot');
src: local('☺'), 
url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.woff') format('woff'),
url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.ttf') format('truetype'),
url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@bodytext: 'Open Sans', sans-serif;
@leadtextheavy: 'encodesanscompressed-600-semibold-webfont';
@nav: 'encodesanscompressed-800-extrabold-webfont', sans-serif;
@tenet: 'encodesanscompressed-900-black', sans-serif;
@featuretext: 'encode_sans_compressedregular', sans-serif;


/* global */

body {
background: @white;
color: @textblack;
font-family: @bodytext;
margin: 0;
padding: 0;
}

h1 {
color: @purple;
font-family: @nav;
font-weight: normal;
font-size: 2.05em;
margin: 0;
padding: 0;
}

h2 {
font-family: @nav;
font-weight: normal;
color: @purple;
font-weight: normal;
font-size: 1.75em;
margin: 0;
padding: 0;
}

h2.bigh2 {
color: @purple;
font-family: @nav;
font-weight: normal;
font-size: 2.05em;
margin: 0;
padding: 0;
}

h3 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @nav;
color: @purple;
font-size: 23px;
}

h4 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @leadtextheavy;
color: @purple;
font-size: 21px;
}

h5 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @bodytext;
color: @purple;
font-size: 15px;
text-transform: uppercase;
}

h6 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @bodytext;
color: @purple;
font-size: 14px;
font-style: oblique;
}

a {
color: @blue;
}

a:hover {
color: @metallicgold;
}

p {
font-size: 17px;
}

li {
font-size: 17px;
margin-bottom: .5em;
}

li li {
font-size: 17px;
margin-bottom: .25em;   
}

li ul li:first-of-type {
margin-top: .5em;
}

p, li {
line-height: 1.7em;
color: @textblack;
-webkit-font-smoothing: antialiased;
}

li blockquote {
margin: 1em 0 1em 0;
}

blockquote {
position:relative;
margin:1.25em 0;
padding:1.1em 1.1em 1em 1.2em;
border-left:0.35em solid @purple;
border-bottom:0.18em solid @gold;
border-radius:0.5em;
background:rgba(75,46,131,0.06);
box-shadow:0 0.25em 0.9em rgba(0,0,0,0.10);
}

#bodycontent details, .tabpanels details {
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 1em;
padding: 0;
overflow: hidden;
transition: all 0.3s ease;
background: #fafafa;
}

#bodycontent details[open], .tabpanels details[open] {
border-color: #999;
background: #f5f5f5;
}

#bodycontent details summary, .tabpanels details summary {
cursor: pointer;
padding: 1em;
background-color: #e8e8f8;
font-weight: bold;
position: relative;
list-style: none;
}

#bodycontent details summary::marker, .tabpanels details summary::marker {
display: none;
}

#bodycontent details summary::after, .tabpanels details summary::after {
content: "+";
position: absolute;
right: 1em;
font-size: 1.2em;
transition: transform 0.2s ease;
}

#bodycontent details[open] summary::after, .tabpanels details[open] summary::after {
content: "–";
}

#bodycontent details > *:not(summary), .tabpanels details > *:not(summary) {
padding: 1em;
border-top: 1px solid #ddd;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}

/*-----------------------------------

Utilities

--------------------------------------*/


hr {
margin: 2em 0 2em 0;
height: 9px;
border: 0;
box-shadow: inset 0 9px 9px -9px rgba(0, 0, 0, 0.1);
}

.nolinkstyle {
color: @purple;
text-decoration: none;
}

.nolinkstyle:hover {
text-decoration: underline;
}

.imgborder {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1);
border-radius: 4px; /* optional for softer corners */
margin-bottom: 1em;
width: 100%;
}

em.uwsmall {
font-style: normal;
font-family: @leadtextheavy;
}

.uw-btn, .uw-btn-reverse {
display: inline-grid;
grid-template-columns: 1fr auto;
align-items: stretch;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
color: #5a5a5a;
background-color: @neutral;
font-family: @leadtextheavy;
max-width: 22rem;
border: none;
position: relative;
overflow: hidden;
}

.uw-btn::after, .uw-btn-reverse::after {
content: "";
background-color: #b7a57a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.82 27.22'%3E%3Cpolygon fill='%23fff' points='15.81 13.61 15.82 13.6 2.9 0 0 2.75 10.3 13.61 0 24.47 2.9 27.22 15.82 13.62 15.81 13.61'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.8075rem 1.425rem;
width: 4rem;
height: 100%;
align-self: stretch;
}


/* Hover effects */
.uw-btn:hover,
.uw-btn:focus {
outline: none;
}

.uw-btn:hover {
color: #5a5a5a;
}

.uw-btn:hover::after {
background-color: @purple;
}

.uw-btn-text {
display: flex;
align-items: center;
justify-content: center;
padding: 0.6em 1em;
text-align: center;
min-height: 34px;
}

.uw-btn-reverse {
background: @purple;
}

.uw-btn-reverse, .uw-btn-reverse:hover  {
color: @white;
}

.uw-btn-reverse:hover::after {
background-color: @metallicgold;
}

@keyframes spinOnce {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.uw-btn-mini, .uw-btn-mini-reverse {
display: inline-grid;
grid-template-columns: 1fr auto;
align-items: stretch;
text-decoration: none;
font-size: 13px; /* smaller font */
text-transform: uppercase;
color: #5a5a5a;
background-color: @neutral;
font-family: @leadtextheavy;
max-width: 14rem; /* reduced width */
border: none;
position: relative;
overflow: hidden;
line-height: 1.4;
}

/* Arrow segment */
.uw-btn-mini::after, .uw-btn-mini-reverse::after {
content: "";
background-color: #b7a57a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.82 27.22'%3E%3Cpolygon fill='%23fff' points='15.81 13.61 15.82 13.6 2.9 0 0 2.75 10.3 13.61 0 24.47 2.9 27.22 15.82 13.62 15.81 13.61'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.6rem 1rem;
width: 2.5rem;
height: 100%;
align-self: stretch;
}

/* Hover/focus behavior */
.uw-btn-mini:hover,
.uw-btn-mini:focus {
outline: none;
color: #5a5a5a;
}

.uw-btn-mini:hover::after {
background-color: @purple;
}

/* Button text block */
.uw-btn-mini-text {
display: flex;
align-items: center;
justify-content: center;
padding: 0.4em 0.75em;
text-align: center;
min-height: 28px;
}

/* Reverse variant */
.uw-btn-mini-reverse {
background: @purple;
}

.uw-btn-mini-reverse,
.uw-btn-mini-reverse:hover {
color: @white;
}

.uw-btn-mini-reverse:hover::after {
background-color: @metallicgold;
}


.emphasized_link {
display: inline-block;
font-size: 1.25rem;
font-weight: 600;
color: #4b2e83;
text-decoration: none;
position: relative;
padding-right: .8em;
transition: color 0.3s ease;
font-family: @leadtextheavy;
margin-top: 1em;
}

.emphasized_link::after {
content: "▸";
position: absolute;
right: 0;
top: 0;
font-size: 1.25rem;
color: inherit;
transform-origin: center;
}

.emphasized_link:hover {
color: #2f1e55;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}

.emphasized_link:hover::after {
animation: spinOnce 0.5s ease forwards;
}




/* -----------------------------------------


UW banner

__________________________________________ */

.uw-banner {
background: @purple;
padding: .6em 0 0 0;
box-shadow: 0 2px 5px rgba(0,0,0,1);
}

.uw-banner div {
width: 80%;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center; /* enables vertical centering */
}

.uw-banner div > :nth-child(2) {
align-self: center;       /* vertical centering */
justify-self: end;        /* horizontal right alignment */
}

.uw-banner ul {
display: flex;
gap: 1em; /* adds space between links */
padding: 0;
margin: .8em 0 0 0;
list-style: none;
}

.uw-banner ul li {
display: inline; /* or omit entirely, since flex handles it */
}

.uw-banner ul a {
text-decoration: none;
color: @white;
font-family: @leadtextheavy;
}

.uw-banner ul a:hover {
text-decoration: underline;
}

.uw-banner li + li::before {
content: "/";
display: inline-block;
font-size: 1.1em;               /* smaller so it doesn’t look heavy */
font-weight: 100;               /* thinnest allowed by the font */
color: #8c8c8c;                 /* UW metallic gold */
line-height: 1;
transform: rotate(10deg) scaleY(2.5); /* stretched tall */
margin-right: 0.4em;
vertical-align: middle;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* optional: better hairlines */
}

.uw-banner img {
width: 400px;
}

@media (max-width: 1030px) {
.uw-banner nav {
display: none;
}
}

@media (max-width: 600px) {
.uw-banner img {
width: 100%;
}
.uw-banner div {
display: block;
}
}

.udub-slant-bar, .udub-slant-bar-light {
--bar-h: .67em;                 /* control the height here */
--dx: calc(var(--bar-h) * 0.268); /* tan(15°) ≈ 0.268 */
height: var(--bar-h);
background: @gold;
width: 40% !important;
margin: 1em 0 0 0 !important;
clip-path: polygon(0 0, 100% 0, calc(100% - var(--dx)) 100%, 0 100%);
}

.udub-slant-bar-light {
background: @white;
}



/* -----------------------------------------


Top Nav

----------------------------------------- */


.site-nav {
border-bottom: 1px solid #eee;
padding: 1.3em 0 .6em 0;
margin: 0 0 1em 0;
background: #f9f9f9;
}


/* ——————————————————————
1. Reset & Horizontal Layout
—————————————————————— */
.site-menu {
display: flex;
flex-wrap: wrap;             /* allow wrapping onto multiple rows */
align-items: baseline;     /* keep all rows top-aligned */
gap: 0.5em 1.5em;            /* row-gap then column-gap */
padding: 0;
list-style: none;
font-family: @nav;
width: 80%;
margin: 0 auto 0 auto;
}

.site-menu a {
text-decoration: none;
color: @purple;
}

.site-menu a:hover {
text-decoration: underline;
color: @metallicgold;
}

.site-menu > li {
flex: 0 0 auto;              /* size to content, don’t grow or shrink */
position: relative;          /* positioning context for dropdowns */
}

/* focus outline for both buttons and links */
.site-menu .submenu-toggle:focus,
.site-menu a:focus {
outline: 3px solid Highlight;
outline-offset: 2px;
}

.site-menu button, .site-menu a {
font-size: 18px !important;
}

/* ——————————————————————
2. Visually Hidden Helper
—————————————————————— */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}

/* ——————————————————————
3. Toggle Button Styling
—————————————————————— */
.site-menu .submenu-toggle {
background: none;
border: none;
padding: 0;
font: inherit;
color: @purple;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
}

.site-menu .submenu-toggle:hover {
text-decoration: underline;
color: @metallicgold;
}

.site-menu .submenu-toggle .caret {
margin-left: 0.25em;
transition: transform 0.2s;
}

.site-menu .submenu-toggle[aria-expanded="true"] .caret {
transform: rotate(-180deg);
}

/* ——————————————————————
4. Submenu Visibility & Indentation
—————————————————————— */
/* hide any submenu marked hidden */
.site-menu ul[hidden] {
display: none;
}

/* indent all nested lists (second-level and deeper) */
.site-menu ul {
margin: 0.5em 0 0 1.5em;
padding: 0;
list-style: none;
}

/* ——————————————————————
5. Dropdown Panel Positioning
—————————————————————— */
/* float only first-level submenus */
.site-menu > li > ul {
margin: 0;                   /* remove the indent */
padding: 0.8em;              /* panel padding */
position: absolute;
top: 100%;
left: 0;
background: #f9f9f9;
border-top: 4px solid @purple;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 10;
min-width: 18em;             /* adjust as needed */
font-family: @leadtextheavy;
}

/* keep deeper lists normal inside the panel */
.site-menu > li > ul > li > ul {
margin: 0.5em 0 0 1.5em;
padding: 0;
position: static;
box-shadow: none;
background: none;
}

/* bullets for submenu items */
.site-menu > li > ul > li a {
position: relative;
padding-left: 0.6em;
}

.site-menu > li > ul > li a::before {
content: "•";
position: absolute;
left: 0;
top: -0.2em;
font-size: 1em;
color: @purple;
}

/* ——————————————————————
6. Search button
—————————————————————— */

.search-item {
position: relative; /* anchor context */
}

.search-panel {
display: none;
position: absolute;
top: 100%;
background: white;
border: 1px solid #ccc;
padding: 0.5rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
min-width: 18em;
max-width: 90vw;
box-sizing: border-box;
}

.search-panel button {
font-family: @nav;
color: @purple;
}

.search-panel[hidden] {
display: none;
}

.search-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
}

#search-panel form {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: .3em;
}

#search-panel input::placeholder{
font-family: @bodytext;
}

.search-toggle {
color: @purple;              /* or your default link/nav color */
background: #eeeeee;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0.8em; /* makes the clickable area bigger */
display: inline-flex;
align-items: center;
}

.search-toggle:hover {
color: @metallicgold; 
cursor: pointer;
}

.search-toggle:active {
color: @gold;        /* or whatever hover color you want */
}

.search-toggle svg {
width: 1.1em;
height: 1.1em;
fill: currentColor;
vertical-align: middle;
}




/* -----------------------------------------


Breadcrumb

----------------------------------------- */

.breadcrumbinner {
position: relative;
top: .6em;
}

#uwhomelink {
background: url(/site/templates/styles/img/uw-sprite.svg) no-repeat -249px -6px;
text-indent: -99999px;
display: inline-block;
width: 1.8em;
position: relative;
top: 0;
}

.breadcrumb a {
border-bottom: none;
text-decoration: none;
color: lighten(@black, 35%);
font-family: @featuretext;
}

.breadcrumb a:hover {
text-decoration: underline;
}

.breadcrumb {
color: lighten(@black, 35%);
font-family: @featuretext;
width: 80%;
margin: 1.8em auto 2.5em auto;
}

.breadcrumb-arrow {
width: 12px;
height: 12px;
margin: 0 0.4em;
stroke: #666;
vertical-align: middle;
}




/* -----------------------------------------


Basic page structure

----------------------------------------- */


#omsfabanner {
background: @purple;
padding: 2.4em 0 2.4em 0;
position: relative;
color: white;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* subtle shadow at bottom */
}

#omsfabanner a {
color: @white;
text-decoration: none;
}

#omsfabanner div {
width: 80%;
margin: auto;
}

/* Lighter scrim overlay: more subtle, still improves text contrast */
#omsfabanner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.35) 45%,
rgba(0, 0, 0, 0.15) 100%
);
z-index: 1;
pointer-events: none;
}

/* Compact content layout with lighter shadow */
#omsfabanner > div {
position: relative;
z-index: 2;
padding: 1em 0 1em 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Optional mobile adjustment */
@media (max-width: 600px) {
#omsfabanner::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5));
}

#omsfabanner > div {
padding: 1em;
}
}

#content, .pagewidth {
width: 80%;
margin: 0 auto 3em auto;
}

#content h2:first-of-type {
margin: 1em 0 .6em 0;
}

#content h2:first-of-type::after, #content h2.headerbar::after {
content: "";
display: block;
width: 60px;
height: 5px;
background-color: #b7a57a; /* UW Metallic Gold */
margin-top: 0.3em;
}

#content h2.bigh2:first-of-type::after {
display: none;
}

#bodycontent > p:first-of-type {
font-family: @featuretext;
font-size: 1.4em;
margin-top: 0;
}

#bodygrid {
display: grid;
grid-template-columns: 8fr 3fr;
grid-column-gap: 3.6em;
}

/* responsive adjustment */
@media (max-width: 1200px) {
#bodygrid {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 3.6em;
}
}

#bodygrid #basic-page-sidebar {
background-color: #f9f9f9;
padding: 1.5em;
border-left: 4px solid #eee;
font-size: 0.95em;
position: relative;
}

/* responsive adjustment */
@media (max-width: 1200px) {
#bodygrid #basic-page-sidebar {
margin-top: 3em;
}
}


#basic-page-sidebar h4 {
font-size: 19px;
margin-top: 3em;
}

#basic-page-sidebar .sidebar-label {
color: #4b2e83;
font-size: 1em;
margin: 2em 0 .4em 0;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.4em;
font-family: @nav;
}


#basic-page-sidebar .sidebar-top-label {
color: @gold;
text-align: center;
font-weight: bold;
position: relative;
width: 100%;
display: inline-block;  /* allows ::before/::after to work neatly */
margin-top: 2em;
margin-bottom: .8em;
}

#basic-page-sidebar .sidebar-top-label::before,
#basic-page-sidebar .sidebar-top-label::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 30px;
height: 1px;
background-color: currentColor;
margin: 0 0.75em;
transform: translateY(-0.1em); /* adjust vertical alignment if needed */
}



#basic-page-sidebar h4.sidebarnews {
margin: 0;
padding: 0;
}

.sidebartext {
font-family: @featuretext;
}

.news-section p {
margin: .6em 0 1em 0;
padding: 0;
font-family: @featuretext;
}

.news-section img {
width: 100%;
border-radius: 8px;         /* soft rounded corners */
transition: box-shadow 0.3s ease;           /* smooth hover animation */
border: 1px solid #eee;
margin: 0 0 .6em 0;
}

.news-section article {
margin-bottom: 4em;
}

.news-section article:last-of-type {
margin-bottom: 1em;
}

.dateline {
font-size: 14px;
color: lighten(@textblack,22%);
font-style: oblique;
margin: .9em 0 0 0;
}

#bodygrid #basic-page-sidebar::after {
content: "";
display: block;
height: 20px;
background-image: repeating-linear-gradient(
105deg,            /* Was 75deg, now reversed */
#d9d9d9,
#d9d9d9 1px,
transparent 1px,
transparent 6px
);
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}

.uw-edit-float {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.6em 1em;
font-size: 0.875rem;
font-weight: 600;
background-color: #b7a57a; /* UW Gold */
color: @white; /* UW Purple text */
border: 2px solid #4b2e83;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.uw-edit-float:hover,
.uw-edit-float:focus {
background-color: #a7966c;
color: #301b55;
transform: scale(1.05);
text-decoration: none;
}

.uw-edit-icon {
font-size: 1rem;
}



/* -----------------------------------------



Homepage slideshow



----------------------------------------- */

/* Tunable default; JS overrides to tallest slide before init */
.omsfa-carousel-container { --carousel-min-h: clamp(220px, 30vh, 440px); }

.omsfa-carousel-container {
max-width: 960px;
margin: 2.3em auto 4.5em auto;
position: relative;
}

/* --- Carousel shell: reserve space + fade in when ready --- */
.carousel {
min-height: var(--carousel-min-h);     /* prevents flash/collapse */
visibility: hidden;                    /* hidden until Flickity attaches */
opacity: 0;                            /* fade start */
transform: translateY(6px);            /* soft entrance */
}
.flickity-enabled { visibility: visible; }
.carousel.is-ready {
opacity: 1;
transform: none;
transition: opacity 400ms ease, transform 400ms ease;
}

/* Flickity viewport honors the min-height (constant height mode) */
.omsfa-carousel-container .flickity-viewport {
min-height: var(--carousel-min-h);
transition: height 200ms ease;         /* smooth in case of tiny adjustments */
}

/* --- Slides --- */
.carousel-cell {
width: 100%;                 /* one per view */
margin: 0;
padding: clamp(1rem, 4vw, 3.5rem);
background: #f8f8f8;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
text-align: left;
border-left: 6px solid #4b2e83; /* UW Purple */
box-sizing: border-box;
min-height: clamp(160px, 28vh, 360px);
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.6em;
}

.carousel-cell.temporary {
background: #fffdf5;
border-left-color: #e8b400;  /* UW Gold */
}

/* Images inside slides (reduce layout shift) */
.carousel-cell img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}

/* overlap slides by 1px so the next left-border can't peek in */
.carousel-cell { margin-right: 1px; }


/* --- Type --- */
.carousel-cell h3 {
margin: 1em 0 0 0;
font-size: 1.25rem;
color: #4b2e83;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;       /* up to 2 lines */
-webkit-box-orient: vertical;
}
.carousel-cell p  {
margin: 1em 0 1.6em 0;
font-size: 1rem;
color: #444;
}

/* --- Buttons --- */
.uw-btn--disabled { pointer-events: none; opacity: .6; }

/* --- Dots (UW white/unselected, gold/selected) --- */
.flickity-page-dots .dot { background: #fff; opacity: 1; }
.flickity-page-dots .dot.is-selected { background: #b7a57a; }

/* --- Accessibility helpers --- */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
.omsfa-carousel-container .flickity-viewport { transition: none; }
.carousel.is-ready { transition: none; transform: none; }
}

.carousel-toggle {
background-color: @neutral;
color: @textblack;
font-family: @bodytext;
border: none;
padding: 0.5em 1em;
margin-top: 0.5rem;
font-size: 1rem;
cursor: pointer;
border-radius: 0.25em;
transition: background 0.3s;
position: absolute;
bottom: 0;
right: 0;
min-width: 110px;
min-height: 50px;
}
.carousel-toggle:hover {
background-color: darken(@neutral,10%);
}
.carousel-toggle:active {
background-color: darken(@neutral,20%);
}

.carousel.is-paused {
opacity: 0.5;
filter: grayscale(20%) brightness(0.95);
transition: opacity 400ms ease, filter 400ms ease;
}


.carousel-cell {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
transform: scale(0.98) translateX(0);
}

.carousel-cell.is-selected {
opacity: 1;
transform: scale(1) translateX(0);
}

/* Optional: subtle parallax slide-in effect */
.carousel.is-ready .carousel-cell {
transition: opacity 0.6s ease, transform 0.6s ease;
}

.carousel.is-ready .carousel-cell:not(.is-selected) {
opacity: 0;
transform: scale(0.98) translateX(-10px);
}




/* -----------------------------------------


Featured scholarships

----------------------------------------- */


#scholarshipcardfiltergrid {
display: grid;
grid-template-columns: 3fr 6fr;
grid-column-gap: 1em;
transition: grid-template-columns 0.3s ease;
margin: 3em 0 0 0;
}

/* responsive adjustment */
@media (max-width: 1200px) {
#scholarshipcardfiltergrid {
grid-template-columns: 1fr;
}
}

#scholarshipcardfiltergrid p, #scholarshipcardfiltergrid li {
font-size: 15px;
line-height: 20px;
}

#scholarshipcardfiltergrid h3 {
font-size: 18px;
font-family: @leadtextheavy;
color: @purple;
margin: 1em 0 .2em 0;
}

.smallsubhead {
font-weight: bold;
font-family: @bodytext;
font-size: 12px;
margin: 1.6em 0 .6em 0;
}

#scholarshipcardfiltergrid > div:nth-of-type(1) {
background: @neutral;
border-radius: 1em;
padding: 2em 1em 1em 1em;
color: @textblack;
font-size: 14px;
line-height: 24px;
}

#scholarshipcardfiltergrid label {
cursor: pointer;
font-weight: normal;
}

#scholarshipcardfiltergrid > div:nth-of-type(2) span {
text-transform: uppercase;
color: @metallicgold;
font-weight: bold;
font-size: 13px;
}

#results {
padding: 0;
margin: 1em 0 0 0;
display: grid;
grid-template-columns: 1fr;
gap: 1em;
}

#results > li {
list-style-type: none;
display: grid;
grid-template-columns: auto 1fr;
gap: 1em;
border: 1px solid #eee;
padding: 1em;
border-radius: 1em;
}

#results li img {
margin: 0 auto 1em auto;
}

#results li h4 {
color: @purple;
margin: 0 0 .6em 0;
}


.amount p {
font-family: @nav;
color: @purple;
}

#scholarshipcardfiltergrid .description.amount p::first-letter {
text-transform: uppercase;
}

#resetbox {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 1em;
align-items: center;
}

/* ================================
Details / Summary: UW Snazz Pack
(no HTML changes required)
================================ */

/* Base details container */
#results details {
border: 0;
margin: 0.25rem 0 0;
}

/* Summary line: title + amount + indicator */
#results summary {
list-style: none;
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto;  /* left: text stack, right: indicator */
grid-template-rows: auto auto;    /* row 1: title, row 2: amount/meta */
gap: .2rem .75rem;
align-items: end;
padding: 0;
color: inherit;
text-align: left;
}

/* Hide native marker */
#results summary::-webkit-details-marker { display: none; }

/* Title (your existing h4 inside summary) */
#results summary h4 {
grid-column: 1 / 2;
grid-row: 1;
margin: 0 0 .2rem 0;
color: @purple;
font-size: 1.125rem; /* ~18px */
line-height: 1.25;
transition: color .2s ease;
}

/* Amount block sits on second row, left column */
#results summary .amount {
grid-column: 1 / 2;
grid-row: 2;
margin: 0;
}
#results summary .amount p {
margin: 0;
font-weight: 600;
color: @purple;
}

/* Custom indicator (text + chevron) on the right */
#results summary::after {
grid-column: 2 / 3;
grid-row: 1 / 3; /* vertically spans both rows */
justify-self: end;
align-self: end;
/* indicator content: "Show ▸" closed, "Hide ▾" open */
content: "Show details ▸";
font-size: .9rem;
line-height: 1;
color: @purple;
border: 1px solid @purple;
border-radius: .5rem;
padding: .25rem .5rem;
transform-origin: 50% 50%;
transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease, opacity .2s ease;
opacity: .95;
}

/* Open state: flip label and style */
#results details[open] summary::after {
content: "Hide ▾";
color: @gold;
border-color: @gold;
}

/* Hover/Active states */
#results summary:hover h4,
#results summary:hover::after {
color: @gold;
border-color: @gold;
}
#results summary:active::after {
transform: translateY(1px);
}

/* Keyboard focus ring on the whole summary row */
#results summary:focus-visible {
outline: 2px solid @gold;
outline-offset: 3px;
border-radius: .25rem;
}

/* Smooth reveal of the content under summary */
#results details > *:not(summary) {
opacity: 0;
transform: translateY(-4px);
transition: opacity .22s ease, transform .22s ease;
}
#results details[open] > *:not(summary) {
opacity: 1;
transform: none;
}

/* Section headers inside details */
#results .smallsubhead {
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
margin: 1rem 0 .5rem 0;
color: @purple;
}

/* Link styling within details */
#results details a {
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .2s ease, border-color .2s ease;
color: @purple;
}
#results details a:hover {
color: @gold;
border-color: @gold;
}

/* Image frame + separation from white background */
#results > li > center {
/* create a subtle card behind the image */
background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
padding: .6rem;
border-radius: .75rem;
border: 1px solid rgba(0,0,0,.08);
box-shadow:
0 1px 0 rgba(0,0,0,.03),
0 6px 16px rgba(0,0,0,.08);
display: grid;
place-items: center;
align-self: start;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
position: relative; /* for the decorative gold ring */
}

#results > li:hover > center {
box-shadow:
0 2px 2px rgba(0,0,0,.02),
0 10px 24px rgba(0,0,0,.12);
transform: translateY(-1px);
}

/* subtle gold accent ring (very light) */
#results > li > center::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 2px @gold;
opacity: .12;            /* gentle! */
pointer-events: none;
}

/* keep your existing image tidy + add inner separation */
#results > li > center img {
width: 140px;
height: auto;
display: block;
border-radius: .5rem;
background: #fff;        /* helps SVGs/transparent PNGs pop */
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
object-fit: cover;       /* keeps photos neat if not square */
aspect-ratio: 1 / 1;     /* optional: keeps the box square */
}

/* optional focus style if images can receive focus (e.g., links) */
#results > li > center img:focus-visible {
outline: 2px solid @gold;
outline-offset: 3px;
}


/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
#results details > *:not(summary) {
transition: none;
opacity: 1;
transform: none;
}
#results summary::after {
transition: none;
}
}


/* -----------------------------------------


News stories

----------------------------------------- */

/* Masonry via CSS columns */
.masonry-cols {
--gap: clamp(1rem, 3vw, 2rem); /* ↑ bigger min/max */
column-width: 320px;     /* target column width; browser will choose # of columns */
column-gap: var(--gap);
margin: 1.5rem 0;
}

/* Each card is an inline-block that avoids breaking across columns */
.news-card {
break-inside: avoid;
display: inline-block;
width: 100%;
margin: 0 0 var(--gap);
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
overflow: hidden;
}

/* Image */
.news-card__img {
display: block;
width: 100%;
height: auto;
}

/* Content area */
.news-card__title { margin: 0.75rem 0 0; font-size: 1.35rem; line-height: 1.3; padding: 0 0.9rem; }
.news-card__title-link { color: #1f2937; text-decoration: none; }
.news-card__title-link:hover { text-decoration: underline; }
.news-card__meta { color: #6b7280; font-size: .9rem; padding: .25rem .9rem 0; }
.news-card__body {
padding: .5rem .9rem .9rem;
}

.news-card__body p, .news-card__body li {
line-height: 1.5em;
}

.news-card__body p:last-child { margin-bottom: 0; }

/* “Learn more” list */
.news-card__more-h { padding: 0 .9rem; margin: .5rem 0 0; font-size: .95rem; }
.news-card__more { margin: .25rem .9rem .9rem; padding-left: 1.1rem; }
.news-card__more a { text-decoration: none; }
.news-card__more a:hover { text-decoration: underline; }

/* Focus style for the image/title links */
.news-card a:focus-visible {
outline: 2px solid #85754d;
outline-offset: 3px;
border-radius: 6px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.news-card { transition: none; }
}





/* -----------------------------------------


Student stories

----------------------------------------- */

.featured-student {
margin-bottom: 4em;
}

.featured-heading {
font-size: 1.1em;
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #444;
}

#basic-page-sidebar .student-thumb {
float: left;
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
margin-right: 1em;
border: 2px solid #ddd;
}

.student-quote {
margin: 0;
padding-left: 0;
color: #333;
font-family: @featuretext;
}

.student-quote footer {
display: block;
color: #666;
font-family: @bodytext;
font-size: 15px;
}

.student-quote footer div {
margin-bottom: .6em;
font-style: oblique;
}

.scholarship-filter-form {
margin: 1.5em 0;
background: #f9f9f9;
padding: 1em 1.5em;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 1em;
}

.scholarship-filter-form fieldset {
border: none;
padding: 0;
margin: 0;
}

.scholarship-filter-form legend {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 0.75em;
}

.filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1em;
gap: 0.5em;
}

.filter-row label {
min-width: 120px;
font-weight: 500;
}

.filter-row select {
flex: 1;
min-width: 200px;
padding: 0.4em 0.5em;
border-radius: 4px;
border: 1px solid #bbb;
font-size: 1em;
background-color: white;
}


.student-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.student-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
overflow: hidden;
text-align: center;
transition: box-shadow 0.2s ease;
}

.student-card:hover {
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.student-link {
display: block;
text-decoration: none;
color: inherit;
padding: 0.75rem;
height: 100%;
}

.student-link:hover,
.student-link:focus {
background: #f9f9f9;
outline: none;
}

.student-thumb {
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 0.75rem;
}

.student-link h4 {
font-size: 1rem;
margin: 0.25rem 0;
}

.student-link p {
font-size: 0.875rem;
margin: 0;
}

.badge {
display: none;
}

/* -----------------------------------------


Student profiles page


----------------------------------------- */


.studentprofile {
display: grid;
grid-template-columns: 1.8fr 4fr;
gap: 3em;
font-family: @featuretext;
margin-top: 3em;
}

.studentprofile img {
width: 100%;
display: block;
border-radius: 14px;
border: 6px solid @gold;
}

.studentprofile h3 {
color: @metallicgold;
margin-bottom: 0.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.25rem;
}

.scholarshiptitle {
font-family: @nav;
text-transform: uppercase;
color: @metallicgold;
margin: 1em 0 0 0;
max-width: 500px;
}

.student-text-meta {
color: @textblack;
margin-top: 1em;
}

.student-text-meta div {
margin-bottom: .2em;
}

.student-text-lead-in {
margin-top: 3em;
}

.student-text-lead-in p:first-of-type::first-line {
font-size: 1.25em;
line-height: 1.4;
}

.student-text-lead-in p:first-of-type::first-letter {
float: left;
font-size: 2em;
line-height: 1;
background: @gold;
padding: .4em;
margin: 0 .2em .2em 0;
font-weight: 700;
font-family: @nav;
color: @white;
border-radius: .2em;
}

.student-text .uw-btn {
margin-top: 3em;
}



/* -----------------------------------------
   Guides (1 → 2 → 3 up)
----------------------------------------- */


.guideintroimage{
  float:right;
  width:clamp(10em, 40vw, 34em);
  max-width:100%;
  height:auto;
  margin:0 0 2em 2em;

  /* grounded + crisp */
  border-radius:0.5em;
  border:1px solid rgba(0,0,0,0.10);
  background:#fff;



  /* optional: slight polish */
  filter:saturate(1.03) contrast(1.02);
}

/* UW-ish little anchor stripe (gold-ish) */
.guideintroimage{
  border-bottom:0.28em solid @purple;
}

/* Narrow screens: stop floating, center it */
@media (max-width:45em){
  .guideintroimage{
    float:none;
    display:block;
    width:100%;
    max-width:28em;
    margin:0.9em auto 1.1em;
  }
}





.featured-scholarships-guide {
  display: grid;
  gap: 1rem;                                   /* tighter gap */
  grid-template-columns: 1fr;                  /* mobile: 1-up */
  margin-top: 1.25rem;
}

@media (min-width: 40em) {                     /* tablet+: 2-up */
  .featured-scholarships-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {                     /* desktop+: 3-up */
  .featured-scholarships-guide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.featured-scholarships-guide .scholarship-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.featured-scholarships-guide .scholarship-card {
  display: flex;
  flex-direction: column;                      /* media above text on all sizes */
  align-items: stretch;
  gap: .75rem;
  background: #fafafa;
  padding: .85rem;
  border-radius: 10px;
  border: 1px solid #eee;                      /* subtle edge for definition */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.featured-scholarships-guide .scholarship-card:hover {
  transform: translateY(-2px);                 /* gentle lift */
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  border-color: #e6e3db;                       /* UW light border */
}

.featured-scholarships-guide .scholarship-card:focus-within {
  outline: 2px solid #4b2e83;                  /* UW purple */
  outline-offset: 3px;
}

.featured-scholarships-guide .scholarship-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;                        /* 1/1 for square; 4/3 classic */
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  margin-bottom: .65rem;
}

.featured-scholarships-guide .scholarship-details {
  flex: 1 1 auto;
  min-width: 0;                                /* prevent text overflow */
}

.featured-scholarships-guide .scholarship-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  color: #2a2a2a;
}

.featured-scholarships-guide .scholarship-description {
  color: #444;
  font-size: .95rem;
  line-height: 1.4;
  margin: 0;
}

.featured-scholarships-guide .scholarship-link {
  display: inline-block;
  margin-top: .5rem;
  font-weight: 700;
  color: #4b2e83;
  opacity: 0;
  transition: opacity .18s ease;
}
.featured-scholarships-guide .scholarship-card:hover .scholarship-link,
.featured-scholarships-guide .scholarship-card:focus-within .scholarship-link {
  opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .featured-scholarships-guide .scholarship-card {
    transition: none;
    transform: none !important;
  }
}


/* ================================
Guide “Book Cover” Grid
================================ */

/* --- Grid layout --- */
.guide-grid {
--gap: clamp(0.75rem, 2vw, 1rem);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--gap);
margin: 2.5rem 0;
padding: 2em 0 0 0;
list-style: none;
}

/* --- Card/link resets --- */
.guide-card { display: block; }
.guide-card__link {
display: block;
text-decoration: none;
color: inherit;
}
.guide-card__link:focus-visible {
outline: 2px solid #85754d;        /* UW gold-ish */
outline-offset: 4px;
border-radius: 12px;
}

/* --- Book cover frame --- */
.guide-cover {
margin: 0;
display: block;
}

.guide-cover__frame {
position: relative;
display: block;
border-radius: 14px;
padding: 10px;                      /* white border space around image */
background: #fff;
box-shadow:
0 1px 2px rgba(0,0,0,.06),
0 8px 24px rgba(0,0,0,.10);
transition: transform .2s ease, box-shadow .2s ease;
overflow: hidden;                   /* clip caption/spine to rounded corners */
}

.guide-cover__img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}

/* Subtle “spine” on the left edge */
.guide-cover__spine {
position: absolute;
left: 10px; top: 10px; bottom: 10px;
width: 12px;
border-radius: 8px 0 0 8px;
background: linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0));
pointer-events: none;
}

/* --- Caption overlay (inside the cover) --- */
.guide-cover__caption {
position: absolute;
left: 10px; right: 10px; bottom: 10px;
pointer-events: none;               /* clicks go to the link */
border-radius: 0 0 10px 10px;
}

.guide-cover__caption-inner {
display: block;
padding: .6rem .75rem;
border-radius: 8px;
background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.30));
color: #fff;
font-family: @nav;
line-height: 20px;
letter-spacing: .2px;

/* clamp to two lines for neatness */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: calc(2 * 1.25em + 0.25rem);
}

/* Hover polish */
.guide-card__link:hover .guide-cover__frame {
transform: translateY(-2px);
box-shadow:
0 2px 6px rgba(0,0,0,.08),
0 14px 32px rgba(0,0,0,.16);
}

/* Optional: UW vibe on hover */
@media (hover:hover) {
.guide-card__link:hover .guide-cover__caption-inner {
background:
linear-gradient(to top, rgba(75,46,131,.75), rgba(75,46,131,.35)); /* UW purple tint */
}
}


.guide-card__link {
text-decoration: none;
}
.guide-card__link:hover .guide-cover__caption-inner,
.guide-card__link:focus-visible .guide-cover__caption-inner {
text-decoration: underline;
text-underline-offset: 3px;
}

.guide-card__link:focus-visible {
outline: 3px solid #85754d; /* UW gold */
outline-offset: 4px;
border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
.guide-card__link:hover .guide-cover__frame { transform: none; }
.guide-cover__frame { transition: none; }
}





/* -----------------------------------------


media archives

----------------------------------------- */

.image-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
margin: 1em 0 3em 0;
}

.image-grid img {
border: 1px solid @textblack;
width: 100%;
}


.toast {
visibility: hidden;
max-width: 90%;
background-color: #333;
color: #fff;
padding: 16px 24px;
border-radius: 8px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
opacity: 0;
transition: opacity 0.4s ease, visibility 0.4s ease;
white-space: pre-wrap;
word-wrap: break-word;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toast.show {
visibility: visible;
opacity: 1;
}

/* -----------------------------------------


tabs

----------------------------------------- */
:root {
--tabs-width: 220px;
--radius: 14px;
}

.tabs {
display: grid;
grid-template-columns: var(--tabs-width) 1fr;
gap: 1em;
align-items: start;
margin: 2.4em 0 3em 0;
}

/* Tablist (vertical) */
.tabs [role="tablist"] {
display: flex;
flex-direction: column;
gap: .25rem;
padding: .25rem;
border: 1px solid #ddd;
border-radius: var(--radius);
}

/* Tabs (use buttons with role=tab) */
.tabs [role="tab"] {
display: block;
text-align: left;
border: 0;
background: transparent;
padding: .8rem .8rem;
border-radius: .75rem;
cursor: pointer;
font-family: @leadtextheavy;
line-height: 20px;
color: @textblack;
cursor: pointer;
font-size: 17px;
}

.tabs [role="tab"][aria-selected="true"] {
background: #f2f2fb;
outline: 2px solid #c9c9f7;
}

.tabs [role="tab"]:hover {
background: #f7f7fa;
}

.tabs [role="tab"]:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}

/* Panels */
.tabpanels {
min-height: 10rem;
border: 1px solid #ddd;
border-radius: var(--radius);
padding: 2em;
}

.tabpanels p,
.tabpanels li,
.tabpanels li li {
font-size: 17px;
}

/* Keep space consistent as panels switch */
[role="tabpanel"] {
min-height: 8rem;
}

/* Base, hidden by default for a11y/layout */
.tabpanels [role="tabpanel"] {
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Become visible when JS adds .is-active */
.tabpanels [role="tabpanel"].is-active {
opacity: 1;
transform: translateY(0);
}

/* Keep using the native [hidden] a11y hide */
.tabpanels [role="tabpanel"][hidden] {
display: none;
}

@media (prefers-reduced-motion: reduce) {
.tabpanels [role="tabpanel"] {
transition: none;
transform: none;
}
}


@media (max-width: 720px) {
.tabs {
grid-template-columns: 1fr;
}
:root { --tabs-width: auto; }
.tabs [role="tablist"] { flex-direction: row; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
.tabs [role="tab"][aria-selected="true"] {
transition: background .15s ease, outline-color .15s ease;
}
.tabpanels {
transition: border-color .15s ease;
}
}

@media (prefers-reduced-motion: reduce) {
.tabpanels [role="tabpanel"] {
transition: none;
transform: none;
}
}

/* Headings inside panels */
.tabpanels h3:first-of-type {
margin: 0 0 1em 0;
padding: 0;
font-family: @nav;
color: @purple;
}


/* -----------------------------------------
   Search results
----------------------------------------- */

#searchtop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Results list */
.search-results {
  padding: 0;
  margin: 1em 0;
}
.search-results li {
  border-bottom: 1px solid #ddd;
  padding: 1em 0;
}
.search-results a {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 0.25em;
}
.search-results a:hover { text-decoration: underline; }
.search-results em {
  font-size: 0.9em;
  color: #666;
  display: inline-block;
  font-style: normal;
}
.search-results p {
  margin: 0.25em 0 0.75em;
  line-height: 1.4;
  color: #333;
}
.search-results strong {
  background-color: #fff5a2;
  padding: 0 2px;
  border-radius: 2px;
}

/* Filter pills */
.filter-pill {
  display: inline-block;
  background: #eee;
  padding: 0.3em 0.7em;
  margin: 0.2em;
  border-radius: 1em;
  text-decoration: none;
  color: @textblack;
  font-size: 0.9em;
}
.filter-pill:hover { background: #ccc; color: @textblack; }
.filter-pill:active { background: @purple; color: #fff; }

.search-form form {
  position: relative;
  display: block;                 /* unified field (no flex split) */
  width: 100%;
  margin: 1em 0;
  background: #fff;
  border-radius: .75em;           /* gentler rectangle */
  border: 2px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.search-form form:focus-within {
  border-color: #8575b5;          /* UW lavender focus */
  box-shadow: 0 0 0 3px rgba(133,117,181,.2);
}
.search-form input[type="search"] {
  width: 100%;
  border: 0;
  outline: none;
  font-size: 17px;
  font-family: @bodytext;
  color: #333;
  background: transparent;
  padding: .85em 2.75em .85em 1em; /* room for icon on right */
    border-radius: inherit;
  background-clip: padding-box;
}
.search-form button {
  position: absolute;
  inset-inline-end: .5em;         /* right in LTR */
  top: 50%;
  transform: translateY(-50%);
  background: transparent;       
  border: 0;
  padding: .4em;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: .5em;
  cursor: pointer;
}
.search-form button:hover { background: #f2eef8; }     /* subtle lavender hover */
.search-form button:focus-visible {
  outline: 2px solid @purple;
  outline-offset: 2px;
  background: #efe9f7;
}
.search-form svg {
  width: 1.15em; height: 1.15em;
  stroke: @purple;
  fill: none;
}
@media (max-width: 40em) {
  .search-form input[type="search"] { font-size: 16px; } /* avoid iOS zoom */
}
@media (prefers-reduced-motion: reduce) {
  .search-form form, .search-form button { transition: none; }
}

/* ---------------- UW Lavender highlight for snippets ---------------- */
.search-results mark {
  color: inherit;                       /* keep baseline text contrast */
  background-color: #ece6f4;            /* soft UW lavender */
  box-shadow: 0 0 0 .15em #ece6f4;      /* halo around glyphs */
  border-radius: .2em;
  padding: 0 .12em;
  text-decoration-line: underline;      /* not color-only */
  text-decoration-style: dotted;
  text-decoration-thickness: .12em;
  text-underline-offset: .12em;
}
/* if mark is inside a link, keep focus obvious */
.search-results a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  text-decoration-thickness: .16em;
}
@media (prefers-contrast: more) {
  .search-results mark {
    text-decoration-style: solid;
    text-decoration-thickness: .18em;
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}
@media (forced-colors: active) {
  .search-results mark {
    forced-color-adjust: auto;
    background-color: Highlight;
    color: HighlightText;
    box-shadow: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
  }
}
@media (prefers-color-scheme: dark) {
  .search-results mark {
    background-color: #3b2469;          /* deeper UW purple for contrast */
    box-shadow: 0 0 0 .15em #3b2469;
    color: #fff;
  }
}

/* ---------------- Pagination ---------------- */
.pagination { margin-top: 2em; text-align: center; }
.pagination-list {
  list-style: none;
  padding: 0;
  display: inline-flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination-list a:hover { color: @textblack; }
.pagination-list a:active { background: @gold; }
.page-link {
  display: inline-block;
  padding: 0.5em 0.75em;
  background-color: #ececec;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: all .2s ease;
}
.page-link:hover,
.page-link:focus { background-color: #d5d5d5; }
.page-link.current {
  background-color: @purple;
  color: #fff;
  pointer-events: none;
  font-weight: 700;
}
.page-link.prev,
.page-link.next { font-weight: 600; }



/* Glossary */

.glossary-nav a {
display: inline-flex;         /* Center the letter inside */
justify-content: center;
align-items: center;
width: 2.2em;                 /* Adjust as needed */
height: 2.2em;                /* Same as width for circle */
border-radius: 50%;          /* Makes it circular */
background-color: #eee;      /* Optional: background color */
text-decoration: none;
font-weight: bold;
color: #333;
transition: background-color 0.2s;
margin: 0.15em;              /* Adds spacing between circles */
}

.glossary-nav a:hover {
background-color: #ccc;      /* Optional: hover effect */
}

.glossary-nav a:active {
background: @purple;
color: white;
}

#gloss dt {
font-family: @nav;
}

.back-to-top {
text-align: right;
margin-top: 1em;
}

.back-to-top a {
font-size: 0.9em;
color: #4b2e83; /* UW Purple */
text-decoration: none;
}

.back-to-top a:hover {
text-decoration: underline;
}

.permalink {
text-decoration: none;
margin-left: 0.25em;
font-size: 0.9em;
color: #999;
opacity: 0;
transition: opacity 0.2s ease;
}

dt:hover .permalink {
opacity: 1;
}

.permalink:hover {
color: #4b2e83; /* UW purple or any accent */
}


/*-----------------------------------------



Embedded images



------------------------------------------*/

.align_left {
float: left;
margin: 0 1em 1em 0;
}

.align_right {
float: right;
margin: 1em 0 1em 1em;
}

.align-center {
margin: auto;
}

figure {
padding: 1em;
margin: 0;
font-family: @featuretext;
background: #eee;
border-radius: .3em;
}

figure img {
width: 100%;
}


#bodycontent h3 { clear: both; } 


/*-----------------------------------------



Videos



------------------------------------------*/



.video-embed-wrapper {
margin: 2em 0 2em 0;
}

/*-----------------------------------------



Staff cards



------------------------------------------*/

.staff-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2em;
justify-items: center; /* centers content in each cell */
box-sizing: border-box;
}

.staff-card-grid,
.staff-card-grid > li {
list-style: none;
margin: 0;
padding: 0;
}

/* Ensure each direct child becomes a proper grid item box */
.staff-card-grid > * {
width: 100%;
}


/*-----------------------------------------
Flip card component
------------------------------------------*/

.flip-card {
background: none;
border: none;
padding: 0;
perspective: 1000px;
cursor: pointer;
width: 100%;
height: 100%;
aspect-ratio: 3 / 4;
font-family: @bodytext;
color: @textblack;
font-size: 17px;
}


/*-----------------------------------------
Flip mechanics
------------------------------------------*/

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}

/*-----------------------------------------
Card faces
------------------------------------------*/

.flip-card-front,
.flip-card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
background-color: #f7f7f9; /* slightly darker than grid bg to show gutters */
border-radius: 0.5em;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
padding: 1rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #999 transparent;
transition: background-color 0.4s ease;
}

.flip-card-front em, .flip-card-back em, {
font-family: @featuretext;
font-style: normal;
}

.flip-card-back {
transform: rotateY(180deg);
text-align: left;
overflow-y: auto;
}

/* Hover styling both sides */
.flip-card:hover .flip-card-front,
.flip-card:hover .flip-card-back {
background-color: lighten(@purple,60%);
}

/* Hover styling both sides */
.flip-card:active .flip-card-front,
.flip-card:active .flip-card-back {
background-color: lighten(@purple,50%);
}





/*-----------------------------------------
Inside content
------------------------------------------*/

.flip-card-front img {
max-width: 100%;
height: auto;
margin-bottom: 0.5em;
border-radius: 0.25em;
}

.flip-card h4 {
margin: 0;
}

.flip-card h5 {
margin: 1.6em 0 0.6em 0;
color: @purple;
line-height: 1.6em;
}

.flip-card p {
margin: 0;
padding: 0;
line-height: 1.3em;
font-family: @featuretext;
}




/* --------------------------------------------


  Values: Stylized Columns 


---------------------------------------------- */

.uw-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); /* 240px = 15em */
gap: 2em;                      /* formerly 2rem */
margin: 2em 0;                 /* formerly 4rem 0 */
padding: 2em;                  /* formerly 1rem */
border-top: 0.375em solid #4b2e83; /* 6px in ems */
background-image: url('/site/assets/files/1408/20231113_november-campus_107-x5.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: rgba(248, 247, 243, 0.7); /* UW Cream @ 70% */
background-blend-mode: lighten;
}

/* Individual “column” blocks */
.column-block {
background: #ffffff;
border: 1px solid #e6e3db;
border-radius: 0.5em;                   /* formerly 0.5rem */
box-shadow: 0 0.125em 0.625em rgba(0,0,0,0.07); /* 2px 10px */
padding: 2em 1.5em;                     /* formerly 2rem 1.5rem */
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}

.column-block:hover {
transform: translateY(-0.25em);         /* 4px = 0.25em */
box-shadow: 0 0.375em 1em rgba(0,0,0,0.12); /* 6px 16px */
}

/* Decorative top to resemble architectural column */
.column-block::before {
content: '';
display: block;
height: 0.375em;                       /* 6px */
width: 100%;
background: #b7a57a;                   /* UW gold */
border-radius: 0.375em 0.375em 0 0;
margin-bottom: 1em;
}

/* Heading like a column capital */
.column-block h3 {
font-family: @leadtextheavy;
font-size: 1.4em;                      /* was 1.4rem */
color: #4b2e83;
margin: 0;
line-height: 1.2;
border-bottom: 0.125em solid #e6e3db;  /* 2px = 0.125em */
padding-bottom: 0.5em;
text-align: center;
}

/* Body text */
.column-body {
font-family: @bodytext;
font-size: 1em;
color: #1f2937;
line-height: 1.6;
}

@media (max-width: 37.5em) { /* 600px = 37.5em */
.column-block {
padding: 1.5em 1em;
}
}

/* =============================


Student profile submission form


============================= */


.student-story-form {
width: 70%;
margin: 2em auto 3em auto;
padding: 2em 3em 3em 3em;
border-radius: 1em;
border: 1px solid #ccc;
}

.student-story-form .field {
margin: 2em 0 1em 0;
}

.student-story-form label {
display:block;
font-weight:600;
margin:0 0 0.25em 0;
}

.student-story-form input[type="text"],
.student-story-form input[type="date"],
.student-story-form select,
.student-story-form textarea {
width: 95%;
padding:0.4em 0.5em;
border:1px solid #ccc;
border-radius:0.3em;
font-size:1em;
margin: .3em 0 .6em 0;
}

.student-story-form textarea {
min-height:5em;
}

.student-story-form .field-notes {
margin:0 0 0.5em 0;
font-size:0.9em;
color:#555;
}

.awards-fieldset {
border:1px solid #ddd;
border-radius:0.4em;
padding:0.75em 0.75em 0.5em 0.75em;
margin:3em 0 !important;
}

.awards-fieldset legend {
padding:0 0.25em;
font-weight:700;
}

.award-row {
display:flex;
flex-wrap:wrap;
align-items:flex-end;
margin:0 0 0.5em 0;
gap:0.5em;
}

.award-row label {
flex:1 1 10em;
margin:0;
font-size: .9em;
}

.award-remove {
flex:0 0 auto;
padding:0.25em 0.6em;
border:0;
background:#eee;
border-radius:1em;
font-size:1.1em;
cursor:pointer;
}

#award-add {
margin-top:0.25em;
padding:0.35em 0.9em;
border-radius:1em;
border:1px solid #4b2e83;
background:#4b2e83;
color:#fff;
cursor:pointer;
}

.field-actions {
text-align:right;
}

.field-actions button {
padding:0.45em 1.3em;
border-radius:1.5em;
border:1px solid #4b2e83;
background:#4b2e83;
color:#fff;
font-weight:600;
cursor:pointer;
}

.field-actions button:hover {
background:#2a1755;
}

.form-errors {
border:1px solid #c0392b;
background:#fdf1f0;
color:#6b1d16;
padding:0.75em 1em;
border-radius:0.4em;
margin:1em 0 1.5em 0;
}

.form-errors h2 {
margin:0 0 0.3em 0;
font-size:1.05em;
}

.form-errors ul {
margin:0;
padding-left:1.2em;
}

.form-errors li {
margin:0.15em 0;
}



/* =============================


OMSFA-Managed Scholarships


============================= */




/* --- short list --- */
#omsfaprograms {
margin-top: 1em;
/* Caret + interaction tokens (tweak to taste) */
--caret-size: .9rem;
--caret-nudge-y: -3px;
--caret-rotate-closed: 0deg;
--caret-rotate-open: 90deg;
--summary-hover: inherit;          /* color on hover (inherits by default) */
--summary-active: inherit;         /* color while open */
--focus-ring: #ffbf47;             /* fallback focus color if you don't have one */
}

/* Reset / layout */
#omsfaprograms details {
border: 0;
margin: 0 0 1.6em 0;
background: none;
}

#omsfaprograms summary {
list-style: none;
padding: 0;
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto; /* text column + caret column */
grid-template-rows: auto auto;   /* line 1 (label) + line 2 (meta) */
align-items: center;
column-gap: .5rem;
color: inherit;
}

#omsfaprograms summary::-webkit-details-marker { display: none; }

/* Hover/Focus styles on the whole summary line */
#omsfaprograms summary:hover {
color: var(--summary-hover);
}

#omsfaprograms summary:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
}

/* Line 1: Title */
#omsfaprograms .dir-label {
grid-column: 1;
grid-row: 1;
font-family: @nav;
color: @purple;
font-size: 1.2em;
transition: color .24s ease;
margin: 0 0 .3em 0;
}

#omsfaprograms p {
margin: 0;
padding: 0;
}

/* Line 2: Meta info + dotted leader to the caret */
#omsfaprograms .dir-meta {
grid-column: 1;
grid-row: 2;
display: flex;
align-items: center;
gap: .5rem;
}

#omsfaprograms .dir-meta {
margin: 0;
padding: 0;
font-family: @featuretext;
font-size: 17px;
}

/* Dotted leader */
#omsfaprograms .dir-meta::after {
content: "";
flex: 1 1 auto;
height: 0;
border-bottom: 2px dotted currentColor;
opacity: .6;
transform: translateY(1px);
}

/* Caret via rotated Unicode glyph (no borders) */
#omsfaprograms .dir-caret {
grid-column: 2;
grid-row: 2;              /* sit with the meta row; bottom-right */
justify-self: end;
align-self: end;
margin-left: .25rem;
color: @purple;
display: inline-block;
font-size: var(--caret-size);
line-height: 1;
transform-origin: 50% 50%;
transform: translateY(var(--caret-nudge-y)) rotate(var(--caret-rotate-closed));
transition: transform .2s ease, opacity .2s ease, color .2s ease;
opacity: .9;
}

/* Actual glyph (choose one you like best) */
#omsfaprograms .dir-caret::before {
content: "❯"; /* alternatives: "›", "▸" */
display: block;
}

#omsfaprograms summary:hover .dir-label, #omsfaprograms summary:hover .dir-caret  {
color: @gold;
}

/* Hover affects the caret too */
#omsfaprograms summary:active .dir-caret, #omsfaprograms summary:active .dir-label {
color: rgb(0,136,221);
}

/* Open state: rotate caret + allow a different color if desired */
#omsfaprograms details[open] summary {
color: var(--summary-active);
}

#omsfaprograms details[open] .dir-caret {
transform: translateY(var(--caret-nudge-y)) rotate(var(--caret-rotate-open));
}

/* Reveal area under the summary (animated fade/slide on open) */
#omsfaprograms .omsfa-program-details {
margin-top: .5rem;
padding-left: 0;
/* Start collapsed visuals (for the moment the element gets toggled) */
opacity: 0;
transform: translateY(-4px);
}

#omsfaprograms details[open] .omsfa-program-details {
animation: omsfa-fade-in .24s ease forwards;
}

/* Keyframes for the open animation */
@keyframes omsfa-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: keep it snappy and accessible */
@media (prefers-reduced-motion: reduce) {
#omsfaprograms .dir-caret { transition: none; }
#omsfaprograms details[open] .omsfa-program-details { animation: none; opacity: 1; transform: none; }
}

#omsfaprograms > details:last-of-type {
margin-bottom: 1.8em;
}

/* standalone list */


/* ========== Grid shell ========== */
#bodycontent .omsfa-scholarship-list {
--line: #e6e3db;     /* UW light border */
--line-strong: #b7a57a; /* UW gold (optional hover) */
list-style: none;
padding: 0;
margin-top: 2em;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0; /* important: no gaps for true gridlines */
}

/* responsive adjustment */
@media (max-width: 1200px) {
#bodycontent .omsfa-scholarship-list {
display: block;
}
}

/* ========== Grid items ========== */
.omsfa-scholarship-list > li {
padding: 1.25rem;
/* Draw only bottom & right lines by default… */
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #fff;
}

/* …then add the outer top and left edges so there’s a single-pixel frame */
.omsfa-scholarship-list > li:nth-child(-n + 3) { /* first row (3 columns) */
border-top: 1px solid var(--line);
}
.omsfa-scholarship-list > li:nth-child(3n + 1) { /* first column (3 columns) */
border-left: 1px solid var(--line);
}


/* responsive adjustment */
@media (max-width: 1200px) {
.omsfa-scholarship-list > li {
/* Draw only bottom & right lines by default… */
border-right: 0;
border-bottom: 0;
}

/* …then add the outer top and left edges so there’s a single-pixel frame */
.omsfa-scholarship-list > li:nth-child(-n + 3) { /* first row (3 columns) */
border-top: 0;
}
.omsfa-scholarship-list > li:nth-child(3n + 1) { /* first column (3 columns) */
border-left: 0;
}
}

.omsfa-scholarship-list img {
width: 100%;
height: auto;
border-radius: 0.25rem;
margin-bottom: 0.8em;
object-fit: cover;
max-height: 280px;
}
.omsfa-scholarship-list h3 {
margin-top: 0;
color: #4b2e83;
}

/* 2 columns */
@media (max-width: 980px) {
.omsfa-scholarship-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.omsfa-scholarship-list > li {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
/* reset just in case */
border-top: none;
border-left: none;
}
.omsfa-scholarship-list > li:nth-child(-n + 2) { /* first row (2 cols) */
border-top: 1px solid var(--line);
}
.omsfa-scholarship-list > li:nth-child(2n + 1) { /* first column (2 cols) */
border-left: 1px solid var(--line);
}
}

/* 1 column (just a vertical rule) */
@media (max-width: 620px) {
.omsfa-scholarship-list {
grid-template-columns: 1fr;
}
.omsfa-scholarship-list > li {
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-top: none;
}
.omsfa-scholarship-list > li:first-child {
border-top: 1px solid var(--line);
}
}



/*-------------------------------



OMSFA footer



--------------------------------*/


#omsfafooter {
background-image: url('/site/assets/files/1408/20181007_october_campus_0672-l.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: rgba(248, 247, 243, 0.9); /* UW Cream @ 70% */
background-blend-mode: lighten;
position: relative;
padding: 3em 0 0 0;
margin: 5em 0 0 0;
}

#omsfafooter img {
border-radius: .3em;
}

#omsfafooter::after {
content: "";
display: block;
height: 45px;
background-image: repeating-linear-gradient(105deg, /* Was 75deg, now reversed */ @gold, @gold 1px, transparent 1px, transparent 6px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
opacity: 0.4; /* 👈 This dims the whole pseudo-element */
}

#omsfafooter p, #omsfafooter li, #omsfafooter h3, #omsfafooter h4, #omsfafooter a {
color: @purple;
}

#omsfafooter p {
font-family: @featuretext;
margin: .6em 0 0 0;
padding: 0;
line-height: 24px;
font-weight: 600;
}

#omsfafooter a {
text-decoration: none;
}

#omsfafooter a:hover {
text-decoration: underline;
}

#omsfafooter h4 {
margin-top: 0;
line-height: 31px;
}

#omsfafooter h5 {
color: @gold;
margin-top: 0;
}

#omsfafooter .pagewidth {
display: grid;
grid-template-columns: 2fr 2fr auto;
margin-bottom: 0;
gap: 4em;
padding: 2em 0 2em 0;
align-items: top;
}

/* responsive adjustment */
@media (max-width: 1200px) {
#omsfafooter .pagewidth {
grid-template-columns: 1fr 1fr;
}
}

/* responsive adjustment */
@media (max-width: 700px) {
#omsfafooter .pagewidth {
grid-template-columns: 1fr;
}
}


.cta-links ul {
list-style: none;
padding: 0;
margin: 1em 0;
display: grid;
gap: 0.75rem;
max-width: 400px;
}

.cta-links li a {
display: block;
position: relative;
background-color: lighten(@gold,20%);
color: #ffffff;
border-radius: .3em;
text-decoration: none;
font-weight: 600;
padding: .8em 1em .8em 3em;
font-size: 1rem;
line-height: 1.4;
font-family: @nav;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.5' height='19.21' viewBox='0 0 11.5 19.21'%3E%3Crect x='4.45' y='-1.06' transform='rotate(-45 5.76 5.64)' fill='%23FFFFFF' width='2.63' height='13.6'/%3E%3Crect x='-1.06' y='12.16' transform='rotate(-45 6.75 13.47)' fill='%23FFFFFF' width='13.61' height='2.63'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 1rem center;
background-size: 11.5px 19.21px;
transition:
background-color 0.2s ease,
background-position 0.3s ease,
background-image 0.3s ease;
}

#omsfafooter .cta-links li a:hover,
#omsfafooter .cta-links li a:focus {
background-color: @purple;
color: @white;
text-decoration: none;
background-position: left 1.75rem center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.5' height='19.21' viewBox='0 0 11.5 19.21'%3E%3Crect x='4.45' y='-1.06' transform='rotate(-45 5.76 5.64)' fill='%23b7a57a' width='2.63' height='13.6'/%3E%3Crect x='-1.06' y='12.16' transform='rotate(-45 6.75 13.47)' fill='%23b7a57a' width='13.61' height='2.63'/%3E%3C/svg%3E");
}

.cta-links li a:active {
background-color: lighten(#4b2e83, 20%);
}

.cta-links li a:focus-visible {
outline: 1px solid #ffffff;
outline-offset: 2px;
}


h3.footer-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
padding: 1em 0;
text-align: center;
width: 80%;
margin: auto;
color: @purple !important;
}

.footer-header::before,
.footer-header::after {
content: "";
flex: 1;
height: 1px;
background-color: @gold;
}



/*-------------------------------


UW footer


--------------------------------*/

.uw-footer {
background: url("assets/images/footer.jpg") center bottom;
background-size: cover;
padding: 0 0 30px 0;
background-color: #4b2e83;
border-top: 7px solid #d1d1d1;
text-align: center;
position: relative;
}

/* --- Wordmark --- */
.uw-footer .footer-wordmark {
display: inline-block;
width: 335px;
background: url(assets/svg/uw-sprite.svg) no-repeat 0 -434px;
text-indent: -9999px;
overflow: hidden;
margin-top: 50px;
}
.uw-footer .footer-wordmark:focus,
.uw-footer .footer-wordmark:hover {
background: url(assets/svg/uw-sprite-focus.svg) no-repeat 0 -434px;
}

/* --- Be Boundless --- */
.uw-footer .be-boundless {
line-height: 24px;
background: url(assets/images/boundless.png) no-repeat center top;
display: block;
text-indent: -99999px;
margin: 10px 0 60px;
opacity: 1;
color: #fff;
transition: opacity 0.25s;
}
.uw-footer .be-boundless:hover,
.uw-footer .be-boundless:focus {
opacity: 0.8;
}

/* --- Headings --- */
.uw-footer h4 {
font-family: "Encode Sans Compressed", sans-serif;
color: #fff;
font-weight: 400;
font-size: 20px;
position: relative;
margin: 41px 0 11px 0;
}
.uw-footer h4:before,
.uw-footer h4:after {
content: "";
position: absolute;
width: 85px;
height: 1px;
background-color: #9184aa;
left: 50%;
margin-left: -40px;
}
.uw-footer h4:before {
top: -27px;
}
.uw-footer h4:after {
bottom: -85px;
}

/* --- Social Links --- */
.uw-footer ul.footer-social li {
list-style: none;
display: inline-block;
}
.uw-footer ul.footer-social li a {
display: inline-block;
width: 44px;
height: 40px;
text-indent: -9999px;
overflow: hidden;
background-image: url(assets/svg/uw-sprite.svg);
background-repeat: no-repeat;
background-position-y: -185px;
transition: background-position 0.3s ease;
}

/* --- Individual sprite frames --- */
.uw-footer a.facebook  { background-position-x: 0; }
.uw-footer a.twitter   { background-position-x: -46px; }
.uw-footer a.pinterest { background-position-x: -92px; }
.uw-footer a.youtube   { background-position-x: -138px; }
.uw-footer a.linkedin  { background-position-x: -184px; }
.uw-footer a.instagram { background-position-x: -322px; }

/* --- Hover slide effect --- */
.uw-footer a.facebook:hover,
.uw-footer a.facebook:focus {
background-position-y: -225px;
}
.uw-footer a.twitter:hover,
.uw-footer a.twitter:focus {
background-position-y: -225px;
}
.uw-footer a.pinterest:hover,
.uw-footer a.pinterest:focus {
background-position-y: -225px;
}
.uw-footer a.youtube:hover,
.uw-footer a.youtube:focus {
background-position-y: -225px;
}
.uw-footer a.linkedin:hover,
.uw-footer a.linkedin:focus {
background-position-y: -225px;
}
.uw-footer a.instagram:hover,
.uw-footer a.instagram:focus {
background-position-y: -225px;
}

/* --- Footer Links --- */
.uw-footer ul.footer-links {
margin: 45px 0 0 0;
}
.uw-footer ul.footer-links li {
list-style: none;
display: inline-block;
}
.uw-footer ul.footer-links li:last-child a:after {
display: none;
}
.uw-footer ul.footer-links li a {
color: #fff;
position: relative;
margin-right: 20px;
}
.uw-footer ul.footer-links li a:after {
content: "/";
opacity: 0.5;
position: relative;
right: -14px;
top: -2px;
}
.uw-footer ul.footer-links li a:focus,
.uw-footer ul.footer-links li a:hover {
color: #b7a57a;
text-decoration: none;
}
.uw-footer ul.footer-links li a:focus:after,
.uw-footer ul.footer-links li a:hover:after {
color: #fff;
}

/* --- Copyright --- */
.uw-footer p {
color: #fff;
font-size: 0.8em;
margin-top: 15px;
}

@media only screen and (max-width: 767px) {
.uw-footer .footer-wordmark {
background-position: 25px -338px;
background-size: 690px;
}
.uw-footer h4:after {
display: none;
}
}