/* =========================================================================
   Shared footer — loaded by demofooter.php itself.
   -------------------------------------------------------------------------
   Why this file exists: the footer's column layout lived in css/misc.css
   (`div#foocolumn { width:350px; display:inline-block }`) and its typography
   was inherited from whatever the host page happened to load. That worked on
   the ~450 pages including misc.css and broke everywhere else - when
   footer.php and footer1.php became shims for demofooter.php (2026-08-24),
   those 44 pages rendered the footer in one column with 60px headings.

   Every value below was measured from a page where the footer already looked
   right (study_trip.php at 1366px) and is reproduced here verbatim, so the
   pages that were correct do not shift. Selectors are prefixed with
   .footerContainer so host-page rules for bare `p` / `li` cannot outrank them.

   Phone overrides still live in css/mobile-sections.css and load after this.
   ========================================================================= */

.footerContainer {
  padding-left: 15px;
  padding-right: 15px;
  background-color: #263238;
  text-align: center;
}

/* the three contact blocks and the six link blocks */
.footerContainer div#foocolumn,
.footerContainer div#foocolumn1 {
  width: 350px;
  height: auto;
  border: 0;
  margin-left: 20px;
  display: inline-block;
}

/* group headings ("About & Policies", "Admissions", ...) */
.footerContainer #foocolumn1 > p,
.footerContainer #foocolumn > p {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .5px;
  text-align: center;
  text-transform: none;
  margin: 10px 0;
  padding: 0;
}

.footerContainer #foocolumn ul,
.footerContainer #foocolumn1 ul {
  padding-left: 0;
  margin: 0 0 10px;
  list-style: none;
  text-align: center;
}

.footerContainer #foocolumn ul li,
.footerContainer #foocolumn1 ul li {
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  letter-spacing: .5px;
  text-align: center;
  text-transform: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

.footerContainer #foocolumn ul li a,
.footerContainer #foocolumn1 ul li a {
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
}

.footerContainer #foocolumn ul li a:hover,
.footerContainer #foocolumn1 ul li a:hover {
  text-decoration: underline;
}

/* affiliation logos paragraph */
.footerContainer #foocolumn1 img {
  max-width: 100%;
  height: auto;
}

.footerContainer .social_icon_container {
  /* px, not rem - see the header note: the root font-size is not shared */
  padding-bottom: 14px;
}

/* ---- Social row --------------------------------------------------------
   These lived only in css/footerdesign.css, which the pages that used to
   include footer.php never loaded - so the five icons stacked vertically.
   Copied verbatim from footerdesign.css so pages loading both agree. */
.footerContainer ul.social-network {
  list-style: none;
  display: inline;
  margin-left: 0 !important;
  padding: 0;
}

.footerContainer ul.social-network li {
  display: inline;
  margin: 0 5px;
}

.footerContainer .social-network a.icoFacebook:hover  { background-color: #3B5998; }
.footerContainer .social-network a.icoTwitter:hover   { background-color: #33ccff; }
.footerContainer .social-network a.icoGoogle:hover    { background-color: #BD3518; }
.footerContainer .social-network a.icoInstagram:hover { background-color: #e4405f; }
.footerContainer .social-network a.icoYoutube:hover   { background-color: #c4302b; }