/* Additions on top of the original theme (style.css). Keep this file small. */

/* Embedded maps/videos never wider than their column (fixes sideways scrolling on phones) */
iframe { max-width: 100%; }

/* Keyboard "skip to content" link: hidden until focused */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 8px 14px;
  background: #fff;
  color: #2f3d47;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Top bar: icon-only social links sit closer together so all four fit on one line */
.topList li.social { margin-right: 0; }
.topList li.social i { margin-right: 0; }

/* Carried over from the theme's customized Font Awesome: size modifiers win over theme icon sizes */
.fa-lg { font-size: 1.33333333em !important; }
.fa-2x { font-size: 2em !important; }
.fa-3x { font-size: 3em !important; }
.fa-4x { font-size: 4em !important; }
.fa-5x { font-size: 5em !important; }

/* Each page's main title is an <h1>; these copy the theme's .sectionTitle h2 and .teachersInfo h3
   styles so it looks the same (generated from style.css and colors/default.css). */
.sectionTitle h1 { font-family: 'Dosis', sans-serif; font-size: 36px; color: #ea7066; text-transform: capitalize; }
.sectionTitle h1 span { padding: 0 15px; }
@media (min-width: 320px) { .sectionTitle h1 span { display: inline-block; width: auto; float: none; } }
@media (min-width: 768px) { .sectionTitle h1 span { display: inline-block; width: auto; float: none; } }
@media (min-width: 320px) { .sectionTitle h1 { margin-bottom: 30px; } }
@media (min-width: 768px) { .sectionTitle h1 { margin-bottom: 70px; } }
.sectionTitle.alt h1 { color: #ffffff; }
.teachersInfo h1 { color: #ea7066; text-transform: none; font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 28px; margin: 0 0 25px 0; }
.sectionTitle h1 span.shape { width: 18px; height: 18px; border-radius: 50%; background: #ffffff; display: inline-block; padding: 0; position: relative; float: none; }
.sectionTitle h1 span.shape:after, .sectionTitle h1 span.shape:before { content: ""; height: 2px; background: #ffffff; display: inline-block; position: absolute; border-radius: 2px; }
.sectionTitle h1 span.shape:after { content: ""; width: 70px; top: 6px; }
.sectionTitle h1 span.shape:before { content: ""; width: 55px; top: 11px; }
.sectionTitle h1 span.shape-left:before, .sectionTitle h1 span.shape-left:after { right: 3px; }
.sectionTitle h1 span.shape-right:before, .sectionTitle h1 span.shape-right:after { left: 3px; }
.sectionTitle h1 span.bg-color-4, .sectionTitle h1 span.bg-color-4:after, .sectionTitle h1 span.bg-color-4:before { background-color: #9fccdf !important; }
.sectionTitle h1 span.bg-color-3, .sectionTitle h1 span.bg-color-3:after, .sectionTitle h1 span.bg-color-3:before { background-color: #ee8d85 !important; }
.sectionTitle h1, .teachersInfo h1 { color: #ea7066; }
.sectionTitle h1 span.bg-color-3, .sectionTitle h1 span.bg-color-3:after, .sectionTitle h1 span.bg-color-3:before { background-color: #ee8d85 !important; }
.sectionTitle h1 span.bg-color-4, .sectionTitle h1 span.bg-color-4:after, .sectionTitle h1 span.bg-color-4:before { background-color: #9fccdf !important; }
.homeContactContent h1 { font-size: 36px; color: #ea7066; text-transform: none; font-family: 'Dosis', sans-serif; margin: 0 0 20px 0; }
/* Plain page titles that used to be bare <h2>/<h3> */
h1.title-h2 { font-size: 30px; }
h1.title-h3 { font-size: 24px; }

/* Site footer: page links + office info, above the copyright bar */
.site-footer {
  position: relative;
  background-color: #2f3c43;
  color: rgba(255, 255, 255, 0.75);
  padding: 50px 0 20px;
  font-size: 14px;
  line-height: 1.6;
}
.site-footer::before {               /* the header's rainbow stripe, repeated */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #f0c24b 0 16.66%, #b5d56a 0 33.33%, #ea7066 0 50%, #84bed6 0 66.66%, #a597e7 0 83.33%, #ea77ad 0);
}
.site-footer .footer-col { margin-bottom: 25px; }
.site-footer .footer-heading {
  font-family: 'Dosis', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px;
  padding-bottom: 10px;
  position: relative;
}
.site-footer .footer-heading::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 40px; height: 3px; border-radius: 2px;
}
.footer-heading-1::after { background: #f0c24b; }
.footer-heading-2::after { background: #b5d56a; }
.footer-heading-3::after { background: #ea7066; }
.footer-heading-4::after { background: #84bed6; }
.site-footer .footer-links li { margin-bottom: 8px; }
.site-footer a { color: rgba(255, 255, 255, 0.75); transition: color .15s, padding-left .15s; }
.site-footer a:hover, .site-footer a:focus { color: #ffffff; text-decoration: none; }
.site-footer .footer-links a:hover, .site-footer .footer-links a:focus { padding-left: 4px; }
.site-footer .footer-links a[aria-current="page"] { color: #ffffff; font-weight: 600; }
.site-footer p { color: inherit; font-size: 14px; line-height: 1.6; }
.site-footer .footer-visit p { margin-bottom: 16px; }
.site-footer .footer-visit .fa { width: 18px; color: #f0c24b; }
.site-footer .footer-office a { display: flex; gap: 4px; }
.site-footer .footer-office .fa { padding-top: 4px; flex: none; }
.site-footer .footer-office strong { color: #ffffff; }
.site-footer .footer-hours { display: flex; gap: 4px; }
.site-footer .footer-hours .fa { padding-top: 4px; flex: none; }
.site-footer .footer-muted { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 767px) {
  .site-footer { padding-top: 40px; }
  .site-footer .footer-heading { font-size: 18px; }
}

/* Consistent look across pages: one body-text style and one heading font for page content */
/* (the home page slider is excluded: its slides are list items with their own caption styles) */
main :is(p, li):not(.bannercontainer *) { font-size: 15px; line-height: 1.7; }
main :is(p, li):not(.bannercontainer *), main .homeContactContent p, main .schoolInfo p { color: #444444; }
main h2, main h3 { font-family: 'Dosis', sans-serif; }
.sectionTitle .page-subtitle { font-size: 18px; margin: -50px 0 10px; color: #666666; }
@media (max-width: 767px) { .sectionTitle .page-subtitle { margin-top: -15px; } }
.sectionTitle .westsac-note { font-size: 18px; color: #444444; max-width: 640px; margin: 0 auto 10px; }
/* The decorative lines beside section titles can reach past the screen edge on phones; clip them */
.sectionTitle { overflow: hidden; }
/* A .container nested inside another overflowed on tablets; let it fit its parent */
.container .container { width: auto; max-width: 100%; }
/* Long web addresses in text wrap instead of pushing the page sideways on small phones */
main :is(p, li, a) { overflow-wrap: break-word; }
/* Section labels inside the main-menu dropdowns */
.navbar-nav .dropdown-menu > .dropdown-header { font-family: 'Dosis', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #999; padding: 6px 20px 2px; }
/* Tablets: slightly smaller menu labels so all five fit beside the logo on one line */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-nav > li > a > span { white-space: nowrap; font-size: 13px; }
}
/* Phones: the collapsed menu grows to fit (no tiny scroll box) and submenus open when tapped */
@media (max-width: 767px) {
  #menuBar .navbar-collapse.in, #menuBar .navbar-collapse.collapsing { max-height: none; overflow: visible; }
  #menuBar .navbar-nav > li.dropdown > .dropdown-menu { display: none !important; }
  #menuBar .navbar-nav > li.dropdown.open > .dropdown-menu { display: block !important; float: none; }
  #menuBar:has(.navbar-collapse.in), #menuBar .navbar-nav { height: auto; max-height: none; overflow: visible; }
}