/*
   General Styles for Main Site Pages
*/

/*
General Rules

Put styles in general-css-2025 when possible

Build CSS for mobile first, then add tablet and desktop media query styles
-- use MIN-WIDTH instead of MAX-WIDTH if possible

The breakpoints are
375px to 767px for mobile (content stretches but does not reshape itself)
   default CSS  (preferred)
   or if you want to clearly target mobile, use
   @media (max-width: 767px) {
 768px to 1247px for tablet (content stretches but does not reshape itself)
   @media (min-width: 768px) { (preferred)
   @media (min-width: 768px) and (max-width: 1247px) { (for tablet only)
1248px and up for desktop (content is a fixed width)
   @media (min-width: 1248px) { (preferred)


- Use variables for colors, fonts, etc.
- Use variables for the container widths, side margins, border radii, etc.
- Use variables for the font sizes, line heights, letter spacings, etc.
- Use variables for the padding, margin, border, etc.
- Use variables for the width, height, etc.
- Use flex when possible.
- Use variables for the gap, spacing, etc.

*/

/* TODO switch all max-width to min-width */
/* TODO make sure all mobile margins are 30 not 40 */
/* TODO fix the link arrow so that it does not wrap to the next line


/* General styles to reset CSS before we begin. */

img, table, tr, td, div, a, form { border: 0; padding: 0; margin: 0; }
a { text-decoration: none; color: black; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Small landing buffer for heading anchors. */
#content h1[id],
#content h2[id],
#content h3[id],
#content h4[id],
#content h5[id] {
  scroll-margin-top: 16px;
}

@media (min-width: 768px) {
  #content h1[id],
  #content h2[id],
  #content h3[id],
  #content h4[id],
  #content h5[id] {
    scroll-margin-top: 24px;
  }
}


/*
   General Styles for Main Site Pages
*/

/* Some Variables. */

:root {
    --Desktop-Container-Width: 1248px;
    --Tablet-Container-Width: 600px;

    --Desktop-Side-Margin: 40px;
    --Tablet-Side-Margin: 30px;
    --Mobile-Side-Margin: 30px;

    --Container-Gap-Wide: 60px;
    --Container-Gap-Narrow: 32px;

    --Desktop-Border-Radius: 24px;
    --Tablet-Border-Radius: 24px;
    --Mobile-Border-Radius: 16px;

    --Color-Dark-Gray: #4B4B4B;
    --Color-White: #FFFFFF;

    --card-image-zoom: 1.1;

	--color-usc-cardinal: rgb(153 0 0 / 1);
	--color-usc-gold: rgb(255 204 0 / 1);
	--color-white: rgb(255 255 255 / 1);
	--color-black: rgb(0 0 0 / 1);
	--color-black-30-k: rgb(204 204 204 / 1);
	--color-black-70-k: rgb(118 118 118 / 1);
	--color-peach: rgb(242 198 167 / 1);
	--color-pink: rgb(242 97 120 / 1);
	--color-blue: rgb(43 85 151 / 1);
	--color-olive: rgb(144 140 19 / 1);
	--color-yellow: rgb(253 224 33 / 1);
	--color-lime: rgb(218 227 67 / 1);
	--color-orange: rgb(255 144 21 / 1);
	--color-red: rgb(228 61 48 / 1);
	--color-dark-gray: rgb(60 60 60 / 1);
	--color-light-gray: rgb(178 178 178 / 1);
	--color-lighter-gray: rgb(224 224 224 / 1);
	--color-usc-gold-20-tint: rgb(255 245 204 / 1);
	--color-usc-gold-40-tint: rgb(255 235 153 / 1);
	--color-black-80: rgb(51 51 51 / 1);

	--color-about-us-bg: var(--color-orange);
	--color-about-us-fg: var(--color-usc-cardinal);

	--color-education-bg: var(--color-usc-cardinal);
	--color-education-fg: var(--color-usc-gold);

	--color-people-bg: var(--color-yellow);
	--color-people-fg: var(--color-black);

	--color-research-bg: var(--color-red);
	--color-research-fg: var(--color-black);

	--color-patient-care-bg: var(--color-peach);
	--color-patient-care-fg: var(--color-usc-cardinal);

	--color-community-bg: var(--color-lime);
	--color-community-fg: var(--color-black);

	--color-news-and-events-bg: var(--color-black-80);
	--color-news-and-events-fg: var(--color-usc-gold);

	--color-search-bg: var(--color-blue);
	--color-search-fg: var(--color-white);

    --megamenu-gap: 24px;


}

/* National 2 Regular */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* National 2 Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-regular-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* National 2 Medium */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* National 2 Medium Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-medium-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* National 2 Bold */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* National 2 Bold Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* National 2 ExtraBold */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* National 2 ExtraBold Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-extrabold-italic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Body, main page container, and page (which splits into sidebar and content). */

body
   { font-family: 'Source Sans', helvetica, arial, sans-serif;
     margin: 0; background-color: white; }

#container { margin: 0; }

#chan-identity-desktop { display: none; }
#chan-identity-mobile { display: block; }
@media (min-width: 768px) {
    #chan-identity-desktop { display: block; }
    #chan-identity-mobile { display: none; }
}

#page { display: flex; flex-direction: row; align-items: flex-start; margin: 0; }


/* Main Menu Colors */

.active, #main-nav-wrapper {
  max-width: var(--Desktop-Container-Width);
  margin: 0 auto;
}
/*
#main-menu li#aboutus { background-color: var(--color-about-us-bg); }
#main-menu li#aboutus > a { color: var(--color-white); }

#main-menu li#community { background-color: var(--color-community-bg); }
#main-menu li#community a { color: var(--color-white); }

#main-menu li#education { background-color: var(--color-education-bg); }
#main-menu li#education > a { color: var(--color-white); }

#main-menu li#newsandevents { background-color: var(--color-news-and-events-bg); }
#main-menu li#newsandevents a { color: var(--color-white); }

#main-menu li#patient-care { background-color: var(--color-patient-care-bg); }
#main-menu li#patient-care a { color: var(--color-white); }

#main-menu li#people { background-color: var(--color-people-bg); }
#main-menu li#people a { color: var(--color-white); }

#main-menu li#research { background-color: var(--color-research-bg); }
#main-menu li#research a { color: var(--color-white); } */

/* up */
.sm-mint #newsandevents a.highlighted span.sub-arrow:before,
.sm-mint #newsandevents a:hover span.sub-arrow:before,
.sm-mint #newsandevents a:focus span.sub-arrow:before,
.sm-mint #newsandevents a:active span.sub-arrow:before,
.sm-mint #education a.highlighted span.sub-arrow:before,
.sm-mint #education a:hover span.sub-arrow:before,
.sm-mint #education a:focus span.sub-arrow:before,
.sm-mint #education a:active span.sub-arrow:before

{ content: "";
  display: block;
  width: 16px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 16 11' fill='none'><path d='M15.1421 1.6699L8.07107 8.74096L1 1.6699' stroke='white' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* down */
.sm-mint #newsandevents a.highlighted span.sub-arrow:before,
.sm-mint #education a.highlighted span.sub-arrow:before
/* .sm-mint #newsandevents a.current span.sub-arrow:before,
.sm-mint #newsandevents a:hover span.sub-arrow:before,
.sm-mint #newsandevents a:focus span.sub-arrow:before,
.sm-mint #newsandevents a:active span.sub-arrow:before */
{ content: "";
  display: block;
  width: 16px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'><path d='M0.999954 9.03564L8.07102 1.96458L15.1421 9.03564' stroke='white' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

#main-menu li#newsandevents:hover > a,
#main-menu li#newsandevents:focus > a,
#main-menu li#newsandevents:active > a,
#main-menu li#education:hover > a,
#main-menu li#education:focus > a,
#main-menu li#education:active > a
 {
    color: var(--color-white) !important;
}



/* Section banner (except section-specific colours). */

#colour-banner { display: none; }
#section-banner-mobile { display: block; margin-top: 10px; }
#section-banner-mobile img { display: block; width: 100%; height: auto; }
#section-banner-desktop { display: none; }

@media (min-width: 768px) {
   #colour-banner { display: block; height: 0.75vw; }
   #section-banner-desktop { display: block; }
   #section-banner-desktop img { display: block; width: 100%; height: auto; }
   #section-banner-mobile { display: none; }
}



/* Quick Links */


.arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-usc-cardinal);
  color: var(--color-usc-gold);
  white-space: nowrap;
  margin-left: .35em;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  text-indent: 1px;
  overflow: hidden;        /* clip anything outside */
  background-image: url('/assets/chan/icons/arrows/gold-arrow-13.svg');
  background-repeat: no-repeat;
  background-position: center;

  /* Alignment tweak */
  position: relative;
  top: -1px;

  /* Hide ⟩ text behind the SVG */
  color: transparent;
  vertical-align: middle;
}



/* Underline effect */
#content .links a,
#content .animate a {
  position: relative;
  display: inline-block;  /* ⬅ important! */
  text-decoration: none;  /* avoid default underline */
}

#content .links a::after,
#content .animate a::after  {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 3px;
  width: 0;
  background-color: #FDE021; /* Customize color */
  transition: width 300ms ease-out;
  z-index: 1;
}

/* Hover/focus/active expand underline */
#content .links a:hover::after,
#content .animate a:hover::after,
#content .links a:focus::after,
#content .animate a:focus::after,
#content .links a:active::after,
#content .animate a:active::after {
  width: 100%;
}


/* Navigation breadcrumbs (except section-specific colours). */

#content .crumbs-section {
    background-color: var(--color-usc-gold-20-tint);
    width: 100%;
    position: relative;
    overflow-x: clip; /* Prevent unwanted horizontal scroll */
  }
  /* Needs to be opaque for sticky positioning. */
/*
#crumbs { background-color: rgb(245, 245, 241); }
@media (min-width: 768px) { #crumbs { background-color: rgb(158 156 112 / 0.1); } }
*/

#crumbs
   { font-family: "National 2"; position: sticky; top: 5px;
     margin: 0; border: 5px solid var(--color-usc-gold-20-tint); border-radius: 0;
     color: var(--color-black);
     padding: 0 var(--Desktop-Side-Margin) 0 var(--Desktop-Side-Margin);
}
#crumbs .crumb { font-size: 100%; line-height: 120%; }
#crumbs .crumb a
   { color: var(--color-black); background-color: transparent; font-weight: 300;
     padding: 0; border-radius: 0; }
#crumbs .crumb a:hover { color: #202020; border-bottom: 1px solid #202020; }
#crumbs .crumb-divider { padding: 0 7px; }

@media (min-width: 768px)
   { #crumbs {
        max-width: var(--Desktop-Container-Width);
        position: static;
        margin: 0 auto;
        padding: 0 var(--Desktop-Side-Margin) 5px var(--Desktop-Side-Margin);
        border: 0;
     }
     #crumbs .crumb {
        font-family: "National 2";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }
     #crumbs .crumb-divider { font-size: 20px; }
     #crumbs .crumb-divider { padding: 6px 6px 6px 8px; } /* slight kerning */
    }


/* Sidebar. */

#sidebar { display: none; }
@media (min-width: 768px) {
   #sidebar { display: block; flex-basis: 28%; width: 100%; position: sticky; top: 15px;
              margin-bottom: 50px; margin-top: 15px; font-size: 1.3vw; }
   #sidebar .active { background-color: #eeeeee; }
}


/* Side-menu (except section-specific colours). */

.side-menu
   { font-family: 'Source Sans'; font-weight: 300; margin-bottom: 1em; position: sticky; }
.side-menu p.side-menu-header
   { font-weight: 500; margin: 0; padding: 5px; font-size: 120%; line-height: 120%; }
.side-submenu.expanded { background-color: #f0f0f0; border-top: 1px solid #c0c0c0; }
.side-submenu.expanded .side-submenu.expanded
   { background-color: #d8d8d8; border-top: 1px solid #a8a8a8; }
.side-menu a, .side-menu span
   { display: block; padding: 3px 5px; border-top: 1px solid #f0f0f0; }
.side-menu .side-submenu.expanded a, .side-menu .side-submenu.expanded span
   { border-top: 1px solid transparent; }

.side-menu a:hover { background-color: #f4f4f4; }
.side-menu .side-submenu.expanded a:hover { background-color: #e4e4e4; }
.side-menu .side-submenu.expanded .side-submenu.expanded a:hover { background-color: #cccccc; }

.side-menu a.bestmatch,
.side-menu .side-submenu.expanded a.bestmatch,
.side-menu .side-submenu.expanded .side-submenu.expanded a.bestmatch
   { background-color: grey; color: white; border-right: 5px solid black; }

.side-menu .side-submenu a.side-submenu-header { position: relative; padding-right: 25px; }
.side-menu .side-submenu a.side-submenu-header::after
   { content: "⟩";  position: absolute; top: 0; right: 10px; transform: rotate(90deg) scale(2.0, 1.0);
     font-size: 120%; font-weight: 400; color: #c0c0c0; }
.side-menu .side-submenu.expanded > a.side-submenu-header,
.side-menu .side-submenu.expanded > span.side-submenu-header { font-weight: 400; }
.side-menu .side-submenu.expanded > a.side-submenu-header::after
   { transform: rotate(-90deg) scale(2.0, 1.0); top: -1px; right: 12px;
     font-weight: 700; color: black; }


/* Content. */

#content { margin: 0 10px; }
@media (min-width: 768px)   {
     #content { flex-basis: 72%; margin: 0 10% 0 30px; font-size: 1.3vw; }
}

/* Items that get hidden on mobile */
.mobile-hide { display: none; }
@media (min-width: 768px)   {
    .mobile-hide { display: initial; }
}
.desktop-hide { display: initial; }
@media (min-width: 768px)   {
    .desktop-hide { display: none; }
}

/* Headers. */

#content h1
   { font-size: 225%; font-weight: 800; color: #990000;
     margin-top: 0.75em; margin-bottom: 0.75em; line-height: 120%; }
#content h2
   { font-size: 200%; font-weight: 800; color: black;
     margin-top: 0; margin-bottom: 0; line-height: 120%; }
#content h3
   { font-size: 160%; font-weight: 800; color: black;
     margin-top: 1.5em; margin-bottom: 0.75em; line-height: 130%; }
#content h4
   { font-size: 130%; font-weight: 800; color: black;
     margin-top: 1.5em; margin-bottom: 0.75em; line-height: 130%; }

@media (max-width: 767px)   {
    #content h2  { font-size: 250%; }
}

#content h3.subtitle
   { font-size: 140%; font-weight: 400; margin-top: 0; line-height: 120%;
     color: #505050; }

#content h1 a, #content h2 a, #content h3 a, #content h4 a
   { font-weight: 800; color: black; background-color: white; padding: 0; border-radius: 0; }
#content h1 a:hover, #content h2 a:hover, #content h3 a:hover, #content h4 a:hover
   { background-color: white; text-decoration-line: underline; text-decoration-thickness: 1px; }

/* The use of !important here is a hack, which might be reworked later, but I think
   we can get away with it. The point is that these styles, which are fine layout
   tweaks, should always have priority. */

#content h1.flat, #content h2.flat, #content h3.flat, #content h4.flat
   { margin-top: 0 !important; margin-bottom: 0 !important; }
#content h1.thin, #content h2.thin, #content h3.thin, #content h4.thin
   { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
#content h1.flattop, #content h2.flattop, #content h3.flattop, #content h4.flattop
   { margin-top: 0 !important; }
#content h1.thintop, #content h2.thintop, #content h3.thintop, #content h4.thintop
   { margin-top: 0.25em !important; }
#content h1.flatbase, #content h2.flatbase, #content h3.flatbase, #content h4.flatbase
   { margin-bottom: 0 !important; }
#content h1.thinbase, #content h2.thinbase, #content h3.thinbase, #content h4.thinbase
   { margin-bottom: 0.25em !important; }


/* Paragraphs, lists, hyperlinks (except section-specific colours). */

#content p.flat, #content li.flat { margin-top: 0 !important; margin-bottom: 0 !important; }
#content p.thin, #content li.thin { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
#content p.flattop, #content li.flattop { margin-top: 0 !important; }
#content p.thintop, #content li.thintop { margin-top: 0.25em !important; }
#content p.flatbase, #content li.flatbase { margin-bottom: 0 !important; }
#content p.thinbase, #content li.thinbase { margin-bottom: 0.25em !important; }
#content div.bigger p, #content div.bigger li
   { font-size: 130%; margin-top: 0.5em; margin-bottom: 0.5em; }

#content ul, #content ol { margin: 0 0 1em 0; }
#content li { margin-top: 0.5em; margin-bottom: 0.5em; font-family: "National 2";}
#content li p, #content li li, #content li li li, #content blockquote { font-size: 100%; }
#content ul.compact li, #content ol.compact li { margin-top: 0.2em; margin-bottom: 0.2em; }
#content ul > li::marker { font-size: 140%; color: rgb(from currentColor r g b / 0.6); }
#content ul ul li::marker { color: rgb(from currentColor r g b / 0.3); }
#content ol ul li::marker { color: rgb(from currentColor r g b / 0.7); }
#content ul.checkmarks { list-style-type: '\2713 '; }
#content ul.checkmarks li::marker { font-size: 120%; color: black; }

#content a.underlined, #content a.underlined:hover
   { padding: 0; border: 0; margin: 0; border-radius: 0;
     color: black; background-color: transparent; }
#content a.underlined:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content a { word-wrap: break-word; }
#content a.formanchor { visibility: hidden; }
#content .pronouns
   { display: block; font-weight: 300; font-size: 60%; margin-top: -0.3em; }


/* Styles for APA/publication list. */

#content p.apa, #content p.hanging
   { padding-left: 0.25in; text-indent: -0.25in; }
@media (min-width: 768px)
   { #content p.apa, #content p.hanging
     { padding-left: 0.5in; text-indent: -0.5in; } }
#content div.abstract { padding: 0.5em 1em; background-color: #f0f0f0; }
#content div.abstract p { padding: 0.5em 0; margin: 0; }


/* Special styles for tables. */

#content .datatable
   { width: 100%; margin-bottom: 1em; text-align: center;
     border-collapse: collapse; border-spacing: 0;
     border-left: 1px solid #999999; border-top: 1px solid #999999; }
#content .datatable.left { text-align: left; }
@media (min-width: 768px) { #content .datatable { font-size: 100%; } }
#content .datatable td, #content .datatable th
   { font-size: 110%; line-height: 120%; padding: 5px;
     border-right: 1px solid #999999; border-bottom: 1px solid #999999; }
#content .datatable.big td, #content .datatable.big th { font-size: 120%; }
#content .datatable th { font-weight: 500; background-color: #eeeeee; vertical-align: bottom; }
#content .datatable td { font-weight: 300; vertical-align: top; }

#content .plaintable { font-size: 120%; }
#content .plaintable .right { text-align: right; }
#content .plaintable td { vertical-align: top; font-weight: 300; line-height: 150%; padding: 2px; }


/* Special-case styles attaching icons to file-types, etc. */

#content a[href $='.pdf'], .newstext a[href $='.pdf']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/pdf.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.doc'], #content a[href $='.docx'], #content a[href $='.dotx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/word.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.xls'], #content a[href $='.xlsx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/excel.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.ppt'], #content a[href $='.pptx'], #content a[href $='.potx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/powerpoint.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a.underlined[href $='.pdf'], #content a.underlined[href $='.doc'],
#content a.underlined[href $='.docx'], #content a.underlined[href $='.dotx'],
#content a.underlined[href $='.xls'], #content a.underlined[href $='.xlsx'],
#content a.underlined[href $='.ppt'], #content a.underlined[href $='.pptx'],
#content a.underlined[href $='.potx']
	{ padding-left: 30px; }

/*
#content a[href ^='mailto:']
{ padding-left: 28px; background-image: url(/assets/chan/icons/mail-black.png);
  background-position: center left 4px; background-size: 18px 18px; background-repeat: no-repeat; }

#content #social-media a[href ^='mailto:']
{ padding-left: 0; background-image: none; }
*/

#content span.map-pin
{ padding-left: 24px; background-image: url(/assets/chan/icons/map-pin-black.png);
  background-position: center left; background-size: 20px 20px; background-repeat: no-repeat; }

#content span.phone
{ padding-left: 24px; background-image: url(/assets/chan/icons/phone-black.png);
  background-position: center left; background-size: 20px 20px; background-repeat: no-repeat; }


/* Pagination styles. */

.paginationcontrols { font-size: 130%; }
.paginationcontrols a, .paginationcontrols strong { margin-left: 0.5em; }


/* Styles for blog/news posts. */

#content .blogpost { margin-top: 2em; margin-bottom: 1em; clear: right; }
#content .blogpost img { max-width: 100%; height: auto; }

#content .blogpost #social-media { margin: 1em 0 0 0; }
#content .blogpost #social-media a
   { background-color: white; padding: 0; margin: 0; }
#content .blogpost #social-media img
   { height: 30px; width: 30px; padding: 0; opacity: 0.25; filter: alpha(opacity=25); }
#content .blogpost #social-media img:hover
   { opacity: 1.0; filter: alpha(opacity=100); }
#content .blogpost #social-media a.article-share-link
   { display: inline-block; vertical-align: middle; margin-right: 6px;
     color: #303030; font-size: 30px; line-height: 1; text-decoration: none;
     opacity: 0.25; filter: alpha(opacity=25); }
#content .blogpost #social-media a.article-share-link:hover
   { opacity: 1.0; filter: alpha(opacity=100); }
#content .blogpost #social-media a.article-share-link > i
   { vertical-align: -0.125em; width: 1.1em; }
@media (min-width: 768px)
   { #content .blogpost #social-media img { height: 30px; width: auto; margin-right: 5px; }
     #content .blogpost #social-media a.article-share-link { font-size: 30px; margin-right: 5px; } }


/* Styles for content images/photos. */

#content .contentimage { width: 100%; margin: 1.5em 0; }
#content .contentimage img { width: 100%; height: auto; display: block; }
#content .contentimage.shadow { box-shadow: 0 3px 6px #999999; }
#content img { max-width: 100%; height: auto; }  /* Just in case. */

#content .contentimage.centered { width: 75%; margin: 1.5em auto; }
#content .contentimage.centered60 { width: 60%; margin: 1.5em auto; }
#content .contentimage.centered50 { width: 50%; margin: 1.5em auto; }
#content .contentimage.centered.fullwidthmobile,
#content .contentimage.centered60.fullwidthmobile,
#content .contentimage.centered50.fullwidthmobile { width: 100%; }

#content .contentimage.floatright40 { float: right; width: 40%; margin: 0 0 10px 10px; }
#content .contentimage.floatright30 { float: right; width: 30%; margin: 0 0 10px 10px; }
#content .contentimage.floatright25 { float: right; width: 25%; margin: 0 0 10px 10px; }
#content .contentimage.floatleft40 { float: left; width: 40%; margin: 0 10px 10px 0; }
#content .contentimage.floatleft30 { float: left; width: 30%; margin: 0 10px 10px 0; }
#content .contentimage.floatleft25 { float: left; width: 25%; margin: 0 10px 10px 0; }

@media (min-width: 768px)
{ #content .contentimage.centered.fullwidthmobile { width: 75%; }
  #content .contentimage.centered60.fullwidthmobile { width: 60%; }
  #content .contentimage.centered50.fullwidthmobile { width: 50%; }

  #content .contentimage.floatright { float: right; width: 50%; margin: 0 0 20px 20px; }
  #content .contentimage.floatleft { float: left; width: 50%; margin: 0 20px 20px 0; }
  #content .contentimage.floatright40,
  #content .contentimage.floatright30,
  #content .contentimage.floatright25 { margin: 0 0 20px 20px; }
  #content .contentimage.floatleft40,
  #content .contentimage.floatleft30,
  #content .contentimage.floatleft25 { margin: 0 20px 20px 0; } }

#content .contentimage a
   { margin: 0; padding: 0; border: 0; color: white; background-color: white; }
#content .contentimage a img:hover { opacity: 0.75; filter: alpha(opacity=75); }

#content .contentimage p { margin: 0; }
#content .contentimage p.caption
   { padding: 0.5em; font-weight: 300; font-size: 110%;
     line-height: 150%; background-color: #f8f8f8; }
#content .contentimage p.caption.clear { background-color: inherit; }
#content .contentimage p.caption a
   { font-weight: 400; padding: 0; color: black; background-color: transparent; }
#content .contentimage p.caption a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content li .contentimage p.caption { font-size: 87%; }

#content .contentimage.righttext { text-align: right; }
#content .contentimage.centertext { text-align: center; }


/* Styles for generic form. */

.chanform input[type="text"], .chanform input[type="password"], .chanform textarea
   { font-family: 'Source Sans'; font-size: 100%; font-weight: 300;
     width: 95%; border: 1px solid #cccccc; padding: 3px; -appearance: none; }
.chanform input[type="radio"], .chanform input[type="checkbox"], .chanform input[type="submit"], .chanform input[type="reset"], .chanform input[type="button"], .chanform select
   { font-family: 'Source Sans'; font-size: 100%; font-weight: 300; }
.chanform input[type="radio"], .chanform input[type="checkbox"]
   {   /* Double-sized Checkboxes */
      -ms-transform: scale(1.4); /* IE */
      -moz-transform: scale(1.4); /* FF */
      -webkit-transform: scale(1.4); /* Safari and Chrome */
      -o-transform: scale(1.4); /* Opera */
      transform: scale(1.4); }
.chanform input[type="text"].additional { width: auto; }
.chanform input:focus, .chanform textarea:focus { background-color: #ffff99; }

.chanform > table, .chanform > div > table, .chanform > div > div > table
   { width: 100%; font-size: 120%; line-height: 125%; }
.chanform td { vertical-align: top; }
.chanform td.label
   { width: 35%; text-align: right; padding: 5px; }
#content .chanform td.label p
   { margin: 0; font-weight: 300; font-size: 90%; line-height: 120%; }
.chanform td.value
   { font-size: 90%; font-weight: 300; width: 65%; text-align: left; padding: 5px; }

.chanform #Your_URL { display: none; }
.chanform .shaded { background-color: #eeeeee; padding: 0.5em; }
.chanform .list-of-checkboxes { margin-left: 2em; }
.chanform .list-of-checkboxes p { margin: 0.25em 0; }
.chanform fieldset { border: 0; padding: 0; margin: 0; }


/* Styles for protected content login form. */

.loginform input[type="text"], .loginform input[type="password"], .loginform input[type="submit"]
   { font-family: 'Source Sans'; font-size: 140%; font-weight: 300; width: 95%;
     border: 1px solid #cccccc; padding: 3px; -appearance: none; }
.loginform input[type="text"], .loginform input[type="password"] { width: 60%; }
.loginform input[type="submit"] { width: auto; color: black; background-color: #f0f0f0; }
.loginform input[type="submit"]:hover { background-color: #e0e0e0; }


/* Some basic use of CSS flex to allow simple responsive rows/columns. */

#content div.flexbox
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; margin: 0; }
#content div.flexbox.fixed { flex-direction: row; }
#content div.flexbox.fixed.reverse { flex-direction: row-reverse; }
#content div.flexbox div { flex-basis: 48%; width: auto; }
@media (min-width: 768px)
   { #content div.flexbox { flex-direction: row; }
     #content div.flexbox.reverse { flex-direction: row-reverse; }
     #content div.flexbox.three div { flex-basis: 31%; }
     #content div.flexbox.four div { flex-basis: 24%; } }


/* Styles for video and other embed containers. */

video { width: 100%; height: auto; margin-bottom: 1em; }

.video-container
   { position: relative; padding-bottom: 56.25%; padding-top: 30px;
     height: 0; overflow: hidden; margin-bottom: 2em; clear: both; }
.video-container iframe, .video-container object, .video-container embed
   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-container-portrait
   { display: block; text-align: center; }

.map-container
   { position: relative; padding-bottom: 100%; padding-top: 30px; height: 0; overflow: hidden; }
.map-container iframe, .map-container object, .map-container embed
   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Styles for standard section divider. */

#content .section-divider
   { text-align: center; margin-top: -25px; margin-bottom: -30px;
     font-size: 500%; line-height: 100%; color: rgb(0 0 0 / 0.1); }


/* Styles for next links. */

#content .nextlinks { text-align: right; margin-top: 1.5em; }
#content .nextlinks p { margin: 0; padding: 0; }


/* Simple alert box. */

#content div.alertbox, #content p.alertbox
   { background-color: #f0f0f0; border-radius: 3px; }
#content div.alertbox { padding: 0.5em 1em; margin-bottom: 1em; }
#content div.alertbox.alignright { text-align: right; }
#content p.alertbox { padding: 1em; }
#content div.alertbox p, #content div.alertbox h3, #content div.alertbox h4
   { padding: 0.5em 0; margin: 0; }
#content div.alertbox a, #content p.alertbox a { background-color: #e0e0e0; }
#content div.alertbox a:hover, #content p.alertbox a:hover
   { background-color: #d8d8d8; }


/* Quotation box. */

#content div.quotation
   { position: relative; border: 0px solid #d0d0d0; border-radius: 40px;
     padding: 0.5em 3em; margin: 0 0 1em 0; background-color: rgb(0.97 0.97 0.97 / 0.03); }
#content div.quotation p, #content div.quotation h3, #content div.quotation h4
   { padding: 0.5em 0; margin: 0; font-size: 110%; color: rgb(1 1 1 / 0.6); }
#content div.quotation::before
   { content: "“";  position: absolute; top: -5px; left: 10px;
     font-size: 400%; font-weight: 700; color: rgb(0.95 0.95 0.95 / 0.1); }
#content div.quotation::after
   { content: "”";  position: absolute; bottom: -30px; right: 10px;
     font-size: 400%; font-weight: 700; color: rgb(0.95 0.95 0.95 / 0.1); }
@media (min-width: 768px)
   { #content div.quotation { padding: 0.5em 4.25em; }
     #content div.quotation::before { font-size: 500%; top: -5px; left: 10px; }
     #content div.quotation::after { font-size: 500%; bottom: -40px; right: 10px; } }


/* Drop-downs. */

#content a.dropdown, #content a.dropdownsub
   { display: block; padding: 0.5em 70px 0.5em 0.5em !important; position: relative;
     color: black; font-weight: 300; line-height: 125%; clear: right; }
#content a.dropdown::after, #content a.dropdownsub::after
   { content: "⟩"; position: absolute; top: 10px; right: 25px; transform: rotate(90deg) scale(2.0, 1.0);
     font-family: 'Source Sans'; font-size: 140%; font-weight: 400; color: #b0b0b0; }
#content a.dropdownsub::after
   { color: #909090; }
#content a.dropdown.dropped::after, #content a.dropdownsub.dropped::after
   { top: 10px; right: 25px; transform: rotate(-90deg) scale(2.0, 1.0); }
#content a.dropdown { background-color: #f0f0f0; }
#content a.dropdown:hover { background-color: #e0e0e0; }
#content a.dropdownsub { background-color: #d0d0d0; }
#content a.dropdownsub:hover { background-color: #c0c0c0; }
#content div.indent { margin-left: 2em; }

#content a.dropdown.big { padding: 0.5em; font-size: 125%; margin: 0 0 1em 0; }
#content a.dropdown.nocontrol { padding-right: 0.5em !important; }
#content a.dropdown.nocontrol::after { content: ""; }


/* Content tags. */

#content span.tag, #content a.tag
   { padding: 0 8px; color: #404040; border: 1px solid #cccccc; border-radius: 6px;
     margin-right: 5px; font-size: 90%; }
#content a.tag { background-color: white; font-weight: 300; }
#content a.tag:hover, #content a.tag.selected
   { color: black; border-color: black; background-color: #f8f8f8; }


/* Tags for news items. */

#content span.news-tag, #content a.news-tag,
#content span.student-blog-tag, #content a.student-blog-tag
   { font-weight: 300; font-size: 90%; padding: 0 .4em; color: rgb(0 0 0 / 0.6);
     border: 1px solid #cccccc; border-radius: 6px; margin-right: 3px; white-space: nowrap; }

#content a.news-tag, #content a.student-blog-tag { background-color: white; }
#content a.news-tag:hover, #content a.news-tag.selected, #content span.news-tag.selected,
#content a.student-blog-tag:hover, #content a.student-blog-tag.selected, #content span.student-blog-tag.selected
   { color: rgb(0 0 0 / 1); border-color: black; background-color: #f8f8f8; }


/* Tags for student blog. */

/*
#content a.student-blog-tag, #content span.student-blog-tag
   { font-weight: 300; font-size: 90%; padding: 0 3px; border: 1px solid white;
     border-radius: 6px; margin-right: 3px; white-space: nowrap; color: white; opacity: 0.5; }
*/

/* #content a.student-blog-tag.all,
#content span.student-blog-tag.all
   { background-color: rgb(128 128 128); } /* Grey */
/* #content a.student-blog-tag.admissions,
#content span.student-blog-tag.admissions
   { background-color: rgb(212 48 154); } /* Purple */
/* #content a.student-blog-tag.beginnings-and-endings,
#content span.student-blog-tag.beginnings-and-endings
   { background-color: rgb(212 48 154); } /* Purple */
/* #content a.student-blog-tag.balance,
#content span.student-blog-tag.balance
   { background-color: rgb(66 85 27); } /* Dark green */
/* #content a.student-blog-tag.classes,
#content span.student-blog-tag.classes
   { background-color: rgb(203 42 29); } /* Red */
/* #content a.student-blog-tag.community,
#content span.student-blog-tag.community
   { background-color: rgb(102 21 15); } /* Dark red */
/* #content a.student-blog-tag.diversity,
#content span.student-blog-tag.diversity
   { background-color: rgb(203 112 41); } /* Orange */
/* #content a.student-blog-tag.externships,
#content span.student-blog-tag.externships
   { background-color: rgb(208 155 53); } /* Gold */
/* #content a.student-blog-tag.fieldwork,
#content span.student-blog-tag.fieldwork
   { background-color: rgb(153 153 0); } /* Dark yellow */
/* #content a.student-blog-tag.first-gen,
#content span.student-blog-tag.first-gen
   { background-color: rgb(27 61 99); } /* Dark blue */
/* #content a.student-blog-tag.getting-involved,
#content span.student-blog-tag.getting-involved
   { background-color: rgb(132 170 53); } /* Green */
/* #content a.student-blog-tag.housing-and-transportation,
#content span.student-blog-tag.housing-and-transportation
   { background-color: rgb(78 173 167); } /* Aqua */
/* #content a.student-blog-tag.international,
#content span.student-blog-tag.international
   { background-color: rgb(54 122 197); } /* Blue */
/* #content a.student-blog-tag.life-hacks,
#content span.student-blog-tag.life-hacks
   { background-color: rgb(74 28 195); } /* Purple */
/* #content a.student-blog-tag.living-in-la,
#content span.student-blog-tag.living-in-la
   { background-color: rgb(163 42 196); } /* Magenta */
/* #content a.student-blog-tag.videos,
#content span.student-blog-tag.videos
   { background-color: rgb(147 42 56); } /* Cardinal */
/* #content a.student-blog-tag.what-are-osot,
#content span.student-blog-tag.what-are-osot
   { background-color: rgb(205 133 63); } /* Light brown */

/* #content span.student-blog-tag.selected,
#content a.student-blog-tag:hover
   { opacity: 0.8; border: 1px solid black; } */


/* Related links. */

#content .relatedlinks
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; margin: 0.5em 0; }
#content .relatedlinks p { flex-basis: 100%; margin: 0; padding: 0; }
#content .relatedlinks p.half { flex-basis: 48%; }

#content .relatedlinks p>br { display: none; }
#content .relatedlinks a
   { display: block; margin: 4px 0; padding: 0.5em 40px 0.5em 0.5em !important; position: relative;
     color: rgb(1 1 1 / 0.7); font-weight: 300; line-height: 125%; border-radius: 12px; }
#content .relatedlinks a.forward { text-align: right; }
#content .relatedlinks a.back
   { padding: 0.5em 0.5em 0.5em 40px !important; position: relative; }
@media (min-width: 768px) { #content .relatedlinks a { padding: 0.5em 60px 0.5em 0.5em; }
                            #content .relatedlinks a.back { padding: 0.5em 0.5em 0.5em 60px; } }
#content .relatedlinks a::after
   { content: "⟩"; position: absolute; top: 9px; right: 15px;
     font-size: 120%; font-weight: 400; }
#content .relatedlinks a.back::after
   { content: "⟨"; left: 15px; }


/* Image blocks. Rows of image + title/text. */

#content .imageblocks
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; }
#content .imageblocks.center
   { align-items: center; }
#content .imageblocks.twofixed,
#content .imageblocks.threefixed,
#content .imageblocks.fourfixed
   { flex-direction: row; }
#content .imageblocks div
   { flex-basis: 48%; width: 100%; margin-bottom: 1.5em; }
#content .imageblocks.compact div { margin-bottom: 0.5em; }
#content .imageblocks.twofixed div { flex-basis: 48%; }
#content .imageblocks.threefixed div { flex-basis: 31%; }
#content .imageblocks.fourfixed div { flex-basis: 24%; }
#content .imageblocks img { width: 100%; height: auto; }
#content .imageblocks a
   { border: 0; padding: 0; margin: 0; color: white; background-color: white; }
#content .imageblocks a:hover { background-color: white; }
#content .imageblocks a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .imageblocks p
   { margin: 0.2em 0; text-align: left;
     font-size: 110%; line-height: 125%; color: #404040; }
#content .imageblocks p.imagetitle
   { margin: 0.25em 0; font-size: 130%; color: black; font-weight: 600; }
#content .imageblocks p a { color: black; }
#content .imageblocks p a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content .imageblocks p.imagetitle a { font-weight: 600; }

@media (min-width: 768px)
   { #content .imageblocks { flex-direction: row; }
     #content .imageblocks.three div { flex-basis: 31%; }
     #content .imageblocks.four div { flex-basis: 24%; } }


/* Image summary. Two-column: image + title and descriptive text. */

#content .imagesummary
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; margin-bottom: 1.5em; }
#content .imagesummary .image { flex-basis: 25%; }
#content .imagesummary .image p { margin: 0; }
#content .imagesummary .image img { width: 100%; }
#content .imagesummary .image a { display: block; margin: 0; padding: 0; background-color: white; }
#content .imagesummary .image a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .imagesummary.shadow img { box-shadow: 0 3px 6px #999999; }
#content .imagesummary .imageinfo { flex-basis: 70%; }
#content .imagesummary .imageinfo p
   { font-size: 110%; line-height: 150%; margin: 0.2em 0; color: #404040; }
#content .imagesummary .imageinfo p.imagetitle
   { font-size: 150%; font-weight: 400; line-height: 130%; margin: 0.1em 0 0.25em 0; }
#content .imagesummary .imageinfo p.imagetitle a
   { font-weight: 400; padding: 0; color: black; background-color: white; }
#content .imagesummary .imageinfo p.imagetitle a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }

@media (min-width: 768px)
   { #content .imagesummary .image { flex-basis: 28%; }
     #content .imagesummary .imageinfo { flex-basis: 68%; } }


/* Info-block. A very simple style, which collapses headers and paragraphs into a
   single block. Fine-tuning of layout might then be applied using the thin and flat
   CSS tweaks. */

#content .infoblock { margin-bottom: 2em; }
#content .infoblock h2, #content .infoblock h3, #content .infoblock h4, #content .infoblock p
   { margin: 0; }


/* Some useful global styles. */

.headergrey { color: #a0a0a0; }
.subheader { font-weight: 300; color: #606060; }
.uppercase { text-transform: uppercase; }
.cardinal { color: #990000; }
.center { text-align: center; }

/*
200: ExtraLight
300: Light
400: Regular
500: Medium
600: SemiBold
700: Bold
800: ExtraBold
900: Black
*/





#content { margin: 0 10px; }
@media (min-width: 768px) {
    #content {
      max-width: 100%;
      flex-basis: 100%;
      margin: 0 auto;
      padding: 0 var(--Desktop-Side-Margin);
    }
}


#content .h1,
#content .h2,
#content .h3,
#content .h4,
#content .h5 {
	font-family: "National 2";
	font-style: normal;
	font-weight: 700;
	text-decoration: none;
	text-transform: none;
}

#content .h1 {
	font-size: 125px;
	font-weight: 900;
	line-height: 100px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}
#content .h2 {
	font-size: 40px;
	line-height: 114%;
	letter-spacing: -0.04em;
}
#content .h3 {
	font-size: 40px;
	line-height: 42px;
	letter-spacing: -0.04em;
}
#content .h4 {
	font-size: 32px;
	line-height: 36px;
}
#content .h5 {
	font-size: 24px;
	line-height: 26px;
}
@media (min-width: 768px) {
    #content .h1 {
        font-size: 125px;
        line-height: 100px;
        letter-spacing: -0.04em;
        text-transform: uppercase;
    }
    #content .h2 {
        font-size: 60px;
        letter-spacing: -0.04em;
    }
    #content .h3 {
        font-size: 40px;
        line-height: 42px;
        letter-spacing: -0.04em;
    }
    #content .h4 {
        font-size: 32px;
        line-height: 36px;
    }
    #content .h5 {
        font-size: 24px;
        line-height: 26px;
    }
}
/* General styles. */

body { font-family: 'Source Sans', helvetica, arial, sans-serif; margin: 0; background-color: #fafafa; }
img, table, tr, td, div, a, form { margin: 0; border: 0; padding: 0; }
a { text-decoration: none; color: black; }

/* Color themes — tweak to match your vars */
.div-red { background-color: var(--color-red); }
.div-usc-cardinal { background-color: var(--color-usc-cardinal); color: --color-white; }
.div-orange { background-color: var(--color-orange); }
.div-pink { background-color: var(--color-pink); }
.div-lime { background-color: var(--color-lime); }
.div-yellow { background-color: var(--color-yellow); }
.div-peach { background-color: var(--color-peach); }
.div-usc-gold { background-color: var(--color-usc-gold); }



/* Content (just an empty container, to allow for styling of content). */

#content { padding: 0; border: 0; margin: 0; }



/* Landing page headers. */

#content div.landing-header
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; }
#content div.landing-header p
   { flex-basis: 48%; width: auto; margin-bottom: 0;
     font-size: 180%; font-weight: 300; line-height: 130%;  }
#content div.landing-header p.all { text-align: right; }
#content div.landing-header p.all a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }


/* Landing page rows. */

#content .landing-row
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: stretch; flex-wrap: wrap; margin: 0; }
#content .landing-row div { flex-basis: 48%; }
@media (min-width: 768px)
   { #content .landing-row { flex-direction: row; margin: 20px 0; }
     #content .landing-row div,
     #content .landing-row.one div { flex-basis: 100%; }
     #content .landing-row.two div { flex-basis: 49%; }
     #content .landing-row.three div { flex-basis: 32%; }
     #content .landing-row.three div.two-thirds { flex-basis: 66%; }
     #content .landing-row.four div { flex-basis: 24%; }
     #content .landing-row.four div.half { flex-basis: 49.33%; }
     #content .landing-row.four div.three-quarters { flex-basis: 74.66%; } }


/* Landing page cells. */

/* #content .landing-row .landing-cell
   { background-color: white; border: 1px solid #e0e0e0; } */
#content .landing-row .landing-cell.container
   { display: flex; flex-direction: column; gap: 20px; align-items: stretch;
     justify-content: space-between; background-color: inherit;
}

/* Three-column multicards */

/* Avoid space-between + flexing image slot so headings align */
#content .landing-row.three .landing-cell {
  justify-content: flex-start;
}
#content .landing-row.three > .landing-cell.container > .landing-cell.image-top {
  flex-grow: 0;
  flex-basis: auto;
  min-height: 0;
  line-height: 0;
}

/* Pin Text A/B/C (ul.links) to the bottom of each equal-height card */
#content .landing-row.three > .landing-cell.container > ul.links {
  margin-top: auto;
}

  #content .image-text-section .landing-row.three h3 {
    margin-bottom: 0;
    font-size: 30px;
  }
  #content .image-text-section .landing-row.three .landing-text {
    padding: 0 0 0 10px;
  }
  #content .image-text-section .landing-row.three .landing-text p {
    margin: 1em 0 0 0;
    font-size: clamp(16px, 120%, 22px);
  }
  #content .image-text-section .landing-row.three .landing-cell .wrapper-action {
    display: flex ;
    justify-content: flex-end ;
    margin-left: 16px;
    margin-right: 0;
  }
  #content .image-text-section .landing-row.three ul.links {
    margin-top: auto;
    margin-bottom: 24px;
    margin-left: 0;
    margin-right: 0;
  }

#content .landing-row .landing-cell div
   { flex-basis: 50%; flex-grow: 1; }
#content .landing-row .landing-cell div.one-quarter
   { flex-basis: 25%; }
#content .landing-row .landing-cell div.one-third
   { flex-basis: 33.3%; }
#content .landing-row .landing-cell div.two-thirds
   { flex-basis: 66.7%; }
#content .landing-row .landing-cell div.three-quarters
   { flex-basis: 75%; }


/* Landing page images. */

#content .landing-row .landing-cell img
   { display: block; width: 100%; height: 100%; object-fit: cover; }

#content .landing-row .landing-cell.image-top .landing-image
   { width: 100%; height: auto; }
#content .landing-row .landing-cell.image-top .landing-image.h100
   { height: 100px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h150
   { height: 150px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h200
   { height: 200px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h300
   { height: 300px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h400
   { height: 400px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h500
   { height: 500px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h600
   { height: 600px; overflow: hidden; }

#content .landing-row .landing-cell.image-left
   { display: flex; align-items: center; }
#content .landing-row .landing-cell.image-left .landing-image
   { width: 100%; height: 100%; }
#content .landing-row .landing-cell.image-right
   { display: flex; flex-direction: row-reverse; align-items: center; }
#content .landing-row .landing-cell.image-right .landing-image
   { width: 100%; height: 100%; }

#content .landing-row .landing-cell.image-overlay
   { position: relative; }
#content .landing-row .landing-cell.image-overlay .landing-image
   { width: 100%; height: 100%; }
#content .landing-row .landing-cell.image-overlay .landing-text
   { width: 50%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w25
   { width: 25%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w33
   { width: 33.3%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w66
   { width: 66.6%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w75
   { width: 75%; }

#content .landing-row .landing-cell.image-overlay .landing-text
   { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#content .landing-row .landing-cell.image-overlay .landing-text.top-left
   { top: 0; left: 0; transform: none; }
#content .landing-row .landing-cell.image-overlay .landing-text.top-center
   { top: 0; left: 50%; transform: translate(-50%, 0); }
#content .landing-row .landing-cell.image-overlay .landing-text.top-right
   { top: 0; right: 0; transform: none; }
#content .landing-row .landing-cell.image-overlay .landing-text.center-left
   { top: 50%; left: 0; transform: translate(0, -50%); }
#content .landing-row .landing-cell.image-overlay .landing-text.center-right
   { top: 50%; right: 0; transform: translate(0, -50%); }
#content .landing-row .landing-cell.image-overlay .landing-text.bottom-left
   { top: 100%; left: 0; transform: translate(0, -100%); }
#content .landing-row .landing-cell.image-overlay .landing-text.bottom-center
   { top: 100%; left: 50%; transform: translate(-50%, -100%); }
#content .landing-row .landing-cell.image-overlay .landing-text.bottom-right
   { top: 100%; right: 0; transform: translate(0, -100%); }


/* Landing page text. */

#content .landing-row .landing-cell .landing-text.big
   { font-size: 120%; }
#content .landing-row .landing-cell .landing-text.huge
   { font-size: 150%; }
#scontent .landing-row .landing-cell h4
   { font-size: 140%; font-weight: 300; line-height: 130%; margin: 0.5em 0.75em; }
#content .landing-row .landing-cell p
   { font-size: 85%; font-weight: 300; line-height: 135%; margin: 0.25em 0 0 0; }
#content .landing-row .landing-cell p.tags
   { line-height: 175%; }
#content .landing-row .landing-cell h4 a:hover
   { background-color: white; text-decoration-line: underline; text-decoration-thickness: 1px; }
#content .landing-row .landing-cell p a
   { text-decoration: none; font-weight: 500; }
#content .landing-row .landing-cell p a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }

#content .landing-row .landing-cell.image-overlay .landing-text p,
#content .landing-row .landing-cell.image-overlay .landing-text h4
   { color: white; text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; }


/* Landing page tags. */

#content .landing-row .landing-cell p.tags a.news-tag, span.news-tag
   { font-weight: 300; font-size: 90%; padding: 0 3px; color: rgb(0 0 0 / 0.6);
     border: 1px solid #cccccc; border-radius: 6px; margin-right: 3px; white-space: nowrap; }
#content .landing-row .landing-cell p.tags a.news-tag:hover
   { color: rgb(0 0 0 / 1); border-color: black; background-color: #f8f8f8; text-decoration: none; }


/* Landing page special cases. */

#content .landing-row .landing-cell p span.date { font-weight: 400; color: #990000; }



/* General hero section  */

/* Hero section */
#content .hero-section {
    width: 100%;
    position: relative;
    overflow-x: clip; /* Prevent unwanted horizontal scroll */
  }

  /* Hero wrapper */
  #content .hero-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 0 auto;
    padding: 24px var(--Desktop-Side-Margin) 0px var(--Desktop-Side-Margin);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    height: 638px;
  }

  /* Hero header */
  #content .hero-header {
    flex: 1;
    z-index: 2; /* stays above image */
  }
  #content .hero-header h1 {
      margin-top: 0.5em;

      /* Desktop - H1 */
      font-family: "National 2";
      font-size: 125px;
      font-style: normal;
      font-weight: 800;
      line-height: 100px; /* 80% */
      letter-spacing: -5px;
      text-transform: uppercase;
      /* Light halo so dark headline stays readable on bright sky / backlit photos */
      /* text-shadow:
        0 0 1px rgb(255 255 255 / 1),
        0 0 12px rgb(255 255 255 / 0.85),
        0 0 28px rgb(255 255 255 / 0.55); */
  }

  /* Hero image */
  #content .hero-image {
    position: absolute;
    right: -200px; /* Push outside container */
    bottom: 0;
    width: 880px;
    height: 670px;
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none; /* optional */
  }

  /* Hero section action button - page-specific styles */
  /* #content .hero-section .wrapper-action {
    width: 554px;
  } */

  #content .hero-section .wrapper-action a {
    background: var(--color-usc-cardinal);
    color: var(--color-usc-gold);
  }



  /* Hero section caption */
  #content .hero-section .hero-caption {
    position: absolute;
    bottom: 24px; /* distance from bottom of .hero-wrapper */
    left: 40px;
    max-width: 554px;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    color: var(--color-black);
    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.64px;
  }


/* Mobile hero caption toggle functionality */
.hero-caption-toggle {
    display: none; /* Hide the checkbox */
    }

@media (max-width: 767px) {
    #page {
        display: block;
    }
     #content .hero-wrapper {
        max-width: 100%;
        padding: 24px var(--Mobile-Side-Margin) 0px var(--Mobile-Side-Margin);
        min-height: 511px;
        height: max(511px, 60%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Push content to bottom */
      }
      #content .hero-header h1 {
        font-size: 50px;
        line-height: 42px; /* 86.957% */
        letter-spacing: -1.84px;
        margin-top: 0.25em;
        margin-bottom: 0.25em;
      }
      #content .hero-section .hero-header h2 {
        margin: .25em 0 .35em 0;
        font-size: clamp(20px, 4vw, 32px);
        font-style: normal;
        font-weight: 500;
        line-height: 1.6;
        letter-spacing: -1.6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

    /* Mobile hero image positioning */
    #content .hero-image {
        position: absolute;           /* Keep absolute positioning for overlay effect */
        right: 0;                    /* Align to right edge of container (not -200px) */
        bottom: 0;                   /* Keep anchored to bottom */
        width: 100%;                 /* Take full width of container */
        height: 68%;                /* Take full height of hero-wrapper */
        background-size: contain;      /* Cover the entire area */
        background-position: bottom center; /* Center the image horizontally */
        z-index: 1;                  /* Keep above other content */
        pointer-events: none;        /* Keep non-interactive */
    }

    #content .hero-caption-toggle-label {
      position: absolute;
      bottom: 30px;
      right: 20px;
      width: 37px;
      height: 36px;
      cursor: pointer;
      z-index: 3;
      display: block; /* Show the info icon on mobile */
      transition: bottom 1.3s ease-in-out;
    }

    #content .hero-caption-toggle-label::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 37px;
      height: 36px;
      background-image: url('/assets/chan/icons/info-icon.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    /* Mobile hero caption toggle - position at bottom right */
      #content .hero-section .hero-wrapper .hero-caption-toggle-label {
        position: absolute;
        bottom: 30px;
        right: 20px;
        width: 37px;
        height: 36px;
        cursor: pointer;
        z-index: 3;
        display: block;
        transition: transform 0.3s ease-in-out;
      }

      /* Mobile hero caption - full width at bottom */
      #content .hero-section .hero-wrapper .hero-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgb(255 255 255 / 0.8);
        border-radius: 8px 8px 0 0;
        padding: 0 16px;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
        font-size: 14px;
        z-index: 2;
      }

      /* Show caption when checkbox is checked */
      #content .hero-section .hero-wrapper .hero-caption-toggle:checked ~ .hero-caption {
        max-height: 200px;
        padding-top: 16px;
        padding-bottom: 16px;
      }

      /* Move icon up when caption expands */
      #content .hero-section .hero-wrapper .hero-caption-toggle:checked ~ .hero-caption-toggle-label {
        transform: translateY(-50px);
      }
  }


/* Quick Links */

#content .landing-text h3 {
    font-family: "National 2";
    font-size: 40px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: -1.6px;
    color: var(--color-black);
    margin-top: 0;
    margin-bottom: 16px;
  }

  #content .landing-text h4 {
    font-family: "National 2";
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.96px;
    color: var(--color-usc-cardinal);
    margin-top: 0;
    margin-bottom: 0;
  }

  #content .landing-text p {
    font-family: "National 2";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-black);
    margin-bottom: 16px;
  }
  #content .landing-cell .landing-text .no-top-margin {
    margin-top: 0;
    margin-bottom: 16px;
  }

  #content .landing-text ul.links {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 0;
    font-family: "National 2";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.8px;
  }
  @media (min-width: 768px) {
    #content .landing-text ul.links {
      font-size: 20px;
    }
  }

  /* Avoid flex on li: it blockifies the <a> flex item and the chevron often wraps alone.
     #content .links a stays inline-block so label + chevron share one inline layout. */
  .landing-text ul.links li {
     margin-bottom: 12px;
     display: block;
   }

  /* label_links_tail.js: last word + .arrow in .links-tail */
  #content ul.links li > a {
    overflow-wrap: break-word;
  }
  #content ul.links .links-tail {
    white-space: nowrap;
  }

  .button-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
  }

  .button-row .wrapper-action {
    flex: 1;
  }

  #content .button-row .wrapper-action a {
    width: 100%;
    display: block;
    text-align: center;
  }
@media (min-width: 768px) {
    .button-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    }

    .button-row .wrapper-action {
        flex: 1;
    }
}



/* Common wrapper-action styles */

#content .wrapper-action {
  display: flex;
  /* width: 554px; */
  justify-content: left;
  color: #000;
  font-family: "National 2";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: -0.64px;
}

#content .wrapper-action a {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 20px;
  height: fit-content;
  /* min-height: 38px; */

  border-radius: 8px;
  box-shadow: 0px 2px 2px rgb(0 0 0 / 0.4);
  text-decoration: none;
  cursor: pointer;

  font-family: "National 2";
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  letter-spacing: -0.88px;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#content .wrapper-action a:hover {
  transform: none;
  box-shadow: 0px 4px 10px rgb(0 0 0 / 0.35);
}

#content .wrapper-action a:active  {
    box-shadow: 0px 2px 4px rgb(0 0 0 / 0.3);
}

#content .wrapper-action a::after {
  content: '';
  display: inline-block;
  margin-left: 0;
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity 0.2s ease 0.01s,   /* fade in after delay */
    transform 0.2s ease 0.01s,
    margin-left 0.2s ease 0.01s;
  font-weight: 700;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -0.88px;
  color: inherit;
}

#content .wrapper-action a:hover::after, #content .wrapper-action a:focus::after {
  content: ' ⟩';
  opacity: 1;
  margin-left: 8px;
  transform: translateX(2px);
}



/* Clickable Image Hover Effect */

.rounded-corners {
   border-radius: var(--Desktop-Border-Radius);
}

a .enlarge-image { /* put on the surrounding div */
   position: relative;
   overflow: hidden;
 }

 a .enlarge-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.4s ease;
   will-change: transform;
 }

a .enlarge-image:hover img {
   transform: scale(var(--card-image-zoom));
 }





/* Quote section */
#content .quote-section {
   width: 100%;
   background-color: var(--color-usc-gold-20-tint);
   padding: 60px 0;
   background-image: url('/assets/chan/icons/quote-icon.svg');
   background-repeat: no-repeat;
   background-position: center 50px;
   background-size: 50px;
 }

 #content .quote-wrapper {
   max-width: var(--Desktop-Container-Width);
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding: 0 var(--Desktop-Side-Margin);
   }

 #content .quote-text {
   display: flex;
   max-width: 1000px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 32px;
   align-self: stretch;
   color: var(--color-black);
   text-align: center;
   font-family: "National 2";
   font-size: 30px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   margin: 0 auto;
 }
@media (min-width: 768px) {
  #content .quote-text {
    font-size: 44px;
  }
}
 #content .quote-text p {
  margin-bottom: 0;
 }
 #content .quote-cite {
   color: var(--color-usc-cardinal);
   text-align: center;
   font-family: "National 2";
   font-size: 24px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
 #content .quote-cite a {
    color: var(--color-usc-cardinal);
 }
 #content .quote-location {
   margin-bottom: 1em;
 }

 #content .quote-program {
   margin-bottom: 1em;
 }

 #content .quote-class {
   margin-bottom: 1em;
 }



/* General Quad Section code */

#content .quad-section {
    width: 100%;
    padding: 60px 0;
    /* specify your background color here -- background-color: var(--color-lime); */
}

  #content .quad-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 0 auto;
    padding: 0 40px;
  }

  #content .quad-heading {
    /* specify your heading color here */
    color: var(--color-black);
    font-family: "National 2";
    font-size: 40px;
    font-weight: 700;
    /* line-height: 68px; */
    letter-spacing: -2.4px;
    margin-top: 0;
    margin-bottom: 24px;
  }
@media (min-width: 768px) {
    #content .quad-heading {
        font-size: 60px;
    }
}

  #content .quad-subhead {
    /* specify your subhead color here */
    color: var(--color-black);
    font-family: "National 2";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 133.333% */
    letter-spacing: -1.2px;
  }
  @media (min-width: 768px) {
    #content .quad-subhead {
        font-size: 30px;
        line-height: 40px; /* 133.333% */
    }
}

  #content .quad-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 40px 60px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
  }

  #content .quad-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 0 transparent;
    flex: 1 1 calc(50% - 30px); /* two columns with gap */
    min-width: 300px;
    max-width: 590px;
  }

  #content .quad-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--Desktop-Border-Radius);
    aspect-ratio: 590 / 398; /* rounded */
  }

  #content .quad-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    will-change: transform;
  }

  #content .quad-card:hover .quad-card-image img {
    transform: scale(var(--card-image-zoom));
  }

  #content .quad-card h2 {
    /* specify your h2 color here */
    color: var(--color-black);
    font-family: "National 2";
    font-size: 33px;
    font-weight: 700;
    margin: 16px 0 4px;
  }

  #content .quad-card h3 {
    /* specify your h3 color here */
    color: var(--color-black);
    font-family: "National 2";
    font-size: 33px;
    font-weight: 700;
    margin: 16px 0 4px;
  }

  #content .quad-card p {
    /* specify your p color here */
    color: var(--color-black);
    font-family: "National 2";
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    margin: 0 0 16px;
  }

  /* Also target ul.links li in other contexts (like quad-card) */
  .quad-card ul {
    margin: 0 0 16px !important;
    padding-inline-start: 0;
  }


  .quad-card ul.links li {
    /* Override browser defaults to remove list appearance */
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 0 8px 0 !important;
    display: block !important;
    font-size: 17px;
    font-weight: 700;
  }
  @media (min-width: 768px) {
    #content .quad-card h3 {
      margin: 16px 16px 4px;
    }
    #content .quad-card p {
      margin: 0 16px 16px;
    }
    .quad-card ul {
        margin: 0 16px 16px !important;
    }
  }




  /* ABOUT BLOCK section */

.about-section {
    width: 100%;
    background-color: var(--color-white); /* optional */
    padding: 60px 0;
  }

  .about-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 0 auto;
    padding: 0 var(--Desktop-Side-Margin);
  }

  #content .about-wrapper .landing-cell.container.two-thirds {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    align-self: flex-start;
    height: auto;
  }


  #content .about-section .h2 {
    color: var(--color-usc-cardinal);
    margin-block-start: 0;
  }

  #content .landing-text h3 {
    color: var(--color-usc-cardinal);
  }

  #content .about-section .landing-cell {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      #content .about-section .landing-cell {
        font-size: 30px;
      }
    }

  #content .landing-row .landing-cell .landing-image {
      background-color: unset;
      border: 0;
  }

  .landing-image {
      border-radius: var(--Desktop-Border-Radius);
      overflow: hidden;
  }

  .landing-text-wrapper {
    border-radius: var(--Desktop-Border-Radius);
    border: 1px solid var(--color-usc-cardinal);
    overflow: hidden;
      align-self: auto;
      /* Prevents stretching to match other column heights */
  }
  @media (min-width: 768px) {
      .landing-text-wrapper {
          align-self: flex-start;
      }
  }
  .landing-text {
    background-color: var(--color-white);
    padding: 24px 32px;
    border-radius: 12px;
  }


  @media (max-width: 767px) {
        .about-wrapper {
            padding: 0 var(--Mobile-Side-Margin);
        }
        .about-wrapper .landing-row {
          gap: 24px;
        }
  }




  /* STATS (NUMBERS GRID) section */


.stats-section {
    width: 100%;
    background-color: var(--color-white); /* optional */
    padding: 60px 0;
  }

  .stats-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 0 auto;
    padding: 0 var(--Desktop-Side-Margin);
  }

  .stats-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 32px;
    gap: 48px;
    width: 100%
  }

  .stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .stat-number {
    font-size: 115px;
    font-weight: 800;
    font-family: 'National 2';
    line-height: 115px;
    letter-spacing: -0.04em;
  }

  .stat-number.red { color: var(--color-red); }
  .stat-number.cardinal { color: var(--color-usc-cardinal); }
  .stat-number.pink { color: var(--color-pink); }
  .stat-number.orange { color: var(--color-orange); }

  .stat-description {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 500;
    font-family: 'National 2';
    line-height: 22px;
    letter-spacing: -0.04em;
    text-align: center;
  }

  .stat-divider {
    width: 1px;
    height: 154px;
    background-color: var(--color-usc-gold);
    align-self: center;
  }

  @media (max-width: 767px) {
    .stats-wrapper {
        padding: 0 var(--Mobile-Side-Margin);
    }
    .stat-divider {
          display: none;
      }
      .stat-number {
          font-size: 60px;
          line-height: 60px;
      }
      .stat-description {
          font-size: 16px;
          line-height: 16px;
      }
      .stats-row {
          gap: 20px;
          flex-wrap: wrap;
      }
      .stat-block {
          flex: 0 0 calc(50% - 20px); /* 2 blocks per row with gap */
          max-width: none;
      }
  }








/* Image-Text section */

#content .image-text-section {
    width: 100%;
    padding: 60px 0;
  }

  /* Pagebuilder: multicard immediately after header strip — pull up to cancel double 60px band */
  #content .image-text-section--after-header {
    margin-top: -60px;
    padding-top: 0;
  }

  #content .image-text-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 0 auto;
    padding: 0 var(--Desktop-Side-Margin);
  }

  #content .image-text-section .feature-heading {
    margin-bottom: 16px;
  }

  #content .image-text-wrapper .landing-cell.container.two-thirds {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    align-self: flex-start;
    height: auto;
  }

  #content .image-text-section .landing-text {
    padding: 0 0 0 10px;
  }

  #content .image-text-section .landing-text p {
    margin: 0;
    margin-top: var(--Desktop-Border-Radius);
    font-size: 20px;
  }
  @media (max-width: 767px) {
    #content .image-text-section .landing-text .wrapper-action {
      display: block;
      margin-right: 0;
      margin-bottom: 12px;
    }
}


    /* Container for multiple buttons */
  #content .image-text-section .landing-text .wrapper-action {
    display: block;
    margin-left: 16px;
    float: right;
  }

  #content .image-text-section .landing-text .wrapper-action:last-child {
    margin-right: 0;
  }
/* Responsive behavior for smaller screens */
@media (max-width: 767px) {
  #content .image-text-section .landing-text .wrapper-action {
    display: block;
    margin-top: 30px;
    margin-right: 0;
    margin-bottom: 12px;
  }

  #content .image-text-section .landing-text .wrapper-action:last-child {
    margin-bottom: 0;
  }
}

/* COLOR DEFINITIONS */

/* Background Peach Colors (patient-care) */
#content .background-peach,
#content .background-patient-care {
    background-color: var(--color-peach);
  }

#content .background-peach .feature-heading,
#content .background-patient-care .feature-heading {
    color: var(--color-usc-cardinal);
  }

#content .background-peach h3,
#content .background-patient-care h3 {
    color: var(--color-usc-cardinal);
  }

#content .background-peach .wrapper-action a,
#content .background-patient-care .wrapper-action a {
    background: var(--color-usc-cardinal);
    color: var(--color-usc-gold);
  }



/* Background White Colors */
#content .background-white {
    background-color: var(--color-white);
  }

#content .background-white .feature-heading {
    color: var(--color-usc-cardinal);
  }

#content .background-white h3 {
    color: var(--color-usc-cardinal);
  }

#content .background-white .wrapper-action a {
    background: var(--color-usc-cardinal);
    color: var(--color-usc-gold);
  }



/* Background Red Colors (research) */
#content .background-red,
#content .background-research {
    background-color: var(--color-red);
  }

#content .background-red .feature-heading,
#content .background-research .feature-heading {
    color: var(--color-black);
  }

#content .background-red h3,
#content .background-research h3 {
    color: var(--color-black);
  }

#content .background-red .wrapper-action a,
#content .background-research .wrapper-action a {
    background: var(--color-usc-gold);
    color: var(--color-black);
  }



/* Background Lime Colors (community) */
#content .background-lime,
#content .background-community {
    background-color: var(--color-lime);
  }

#content .background-lime .feature-heading,
#content .background-community .feature-heading {
    color: var(--color-black);
  }

#content .background-lime h3,
#content .background-community h3 {
    color: var(--color-black);
  }

#content .background-lime .wrapper-action a,
#content .background-community .wrapper-action a {
    background: var(--color-usc-cardinal);
    color: var(--color-usc-gold);
  }



/* Background Yellow Colors (people) */
#content .background-yellow,
#content .background-people {
    background-color: var(--color-yellow);
  }

#content .background-yellow .feature-heading,
#content .background-people .feature-heading {
    color: var(--color-black);
  }

#content .background-yellow h3,
#content .background-people h3 {
    color: var(--color-black);
  }

#content .background-yellow .wrapper-action a,
#content .background-people .wrapper-action a {
    background: var(--color-usc-cardinal);
    color: var(--color-usc-gold);
  }



/* Background USC Cardinal Colors (education) */
#content .background-usc-cardinal,
#content .background-education {
    background-color: var(--color-usc-cardinal);
  }

#content .background-usc-cardinal .feature-heading,
#content .background-education .feature-heading {
    color: var(--color-usc-gold);
  }

#content .background-usc-cardinal h3,
#content .background-education h3 {
    color: var(--color-usc-gold);
  }

#content .background-usc-cardinal .wrapper-action a,
#content .background-education .wrapper-action a {
    background: var(--color-usc-gold);
    color: var(--color-black);
  }



/* Background Orange Colors (about-us) */
#content .background-orange,
#content .background-about-us {
    background-color: var(--color-orange);
  }

#content .background-orange .feature-heading,
#content .background-about-us .feature-heading {
    color: var(--color-usc-cardinal);
  }

#content .background-orange h3,
#content .background-about-us h3 {
    color: var(--color-usc-cardinal);
  }

#content .background-orange .wrapper-action a,
#content .background-about-us .wrapper-action a {
    background: var(--color-usc-cardinal);
    color: var(--color-usc-gold);
  }



/* Background Black-80 Colors (news-and-events) */
#content .background-black-80,
#content .background-news-and-events {
    background-color: var(--color-black-80);
  }

#content .background-black-80 .feature-heading,
#content .background-news-and-events .feature-heading {
    color: var(--color-usc-gold);
  }

#content .background-black-80 h3,
#content .background-news-and-events h3 {
    color: var(--color-usc-gold);
  }

#content .background-black-80 .wrapper-action a,
#content .background-news-and-events .wrapper-action a {
    background: var(--color-usc-gold);
    color: var(--color-black);
  }



/* Background Blue Colors (search) */
#content .background-blue,
#content .background-search {
    background-color: var(--color-blue);
  }

#content .background-blue .feature-heading,
#content .background-search .feature-heading {
    color: var(--color-white);
  }

#content .background-blue h3,
#content .background-search h3 {
    color: var(--color-white);
  }

#content .background-blue .wrapper-action a,
#content .background-search .wrapper-action a {
    background: var(--color-usc-gold);
    color: var(--color-black);
  }











  
/* Interior (sidebar layout): mobile USC mark overlaps the 3-line Chan lockup. Home / full-bleed layouts omit #sidebar. */
@media (max-width: 767px) {
  body:has(#sidebar) #usc-identity-mobile { display: none; }
}