/* ============================================================================
   The Stanford Law School site footer.

   This is a deliberate, near-verbatim copy of the footer on law.stanford.edu,
   taken from that site's own theme stylesheet
   (wp-content/themes/stanford-law-school/css/dist/master.min.css) so the hub's
   footer matches the school's exactly rather than approximately. Values below
   are theirs, not ours, and should be changed only by re-copying from source.

   Because it is a copy, this file is the one place in the hub that is NOT held
   to the SLS web palette. The footer's own colours are #252b2c for the upper
   band, #9a9c9a for its text, and #8c1515 for the lower band -- none of which
   are in the palette on p. 27 of the identity guidelines, but all of which are
   what the school actually ships. Matching them is the point. Do not
   "normalise" these to palette values; that would make the footer wrong.

   Two necessary deviations from the source, both unavoidable:

     1. Their body face is proxima-nova, served under their Typekit licence.
        The footer inherits the hub's sans instead, which is Open Sans -- the
        secondary HTML typeface the identity guidelines name (p. 41) and the
        same substitution the rest of the hub makes.
     2. Their markup sits inside a global reset (`* { margin:0; padding:0 }`,
        `ol,ul { list-style:none }`, `a { color:inherit; text-decoration:none }`).
        The hub has no such reset and does style links and lists, so that reset
        is reproduced here scoped to `.slsFooter` rather than applied globally.

   Kept in its own file, and loaded after styles.css, so the cascade is
   predictable and a future re-copy is a single-file operation.
   ========================================================================== */

/* Their icon font, for the social row. Self-hosted copy; upstream serves eot,
   woff, ttf and svg, and woff plus ttf covers every browser that matters now. */
@font-face {
  font-family: stanford;
  src: url("fonts/stanford-icons.woff") format("woff"),
       url("fonts/stanford-icons.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ---- Scoped reset ---------------------------------------------------------
   Stands in for the global reset their markup assumes. Scoped to the footer so
   none of it reaches the rest of the hub. */
.slsFooter,
.slsFooter * {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
.slsFooter ol,
.slsFooter ul { list-style: none; }
.slsFooter a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  font-weight: inherit;
}
.slsFooter address { font-style: normal; }
.slsFooter img { max-width: 100%; height: auto; }
.slsFooter,
.slsFooter input,
.slsFooter button {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  /* Their base, not ours: 16px with a 1.55 line-height, which is what every
     footer size below is expressed relative to. The hub's body is 1.02rem
     (16.32px), and inheriting that shifted every computed size in here by 2%. */
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: normal;
}

/* Their visually-hidden helper, verbatim. */
.slsFooter .accessibility {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Their icon glyphs. Codepoints read out of their own font's cmap, verbatim.
   Only four of the six social icons come from this font: upstream draws X and
   RSS from Font Awesome, which it loads from a CDN. Their font has no X glyph
   at all -- its \ea91 is the old Twitter bird, which is not what the live site
   shows -- so those two are inline SVG below instead, using Font Awesome's own
   path data (icons are CC BY 4.0). That keeps the rendering identical without
   pulling a whole icon library, or a third-party request, for two glyphs. */
.slsFooter .icon {
  font-family: stanford;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slsFooter .icon-facebook:before  { content: "\ea8c"; }
.slsFooter .icon-instagram:before { content: "\ea90"; }
.slsFooter .icon-youtube:before   { content: "\ea97"; }
.slsFooter .icon-linkedin:before  { content: "\eac9"; }

/* The two Font Awesome stand-ins. Sized to sit on the same baseline as the
   font glyphs: 1em square, vertically centred in the 35px (later 22px) tile. */
.slsFooter .social-follow svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  display: inline-block;
}

/* ---- Layout container ----------------------------------------------------- */
.slsFooter .content-wrap {
  width: 100%;
  margin: 0 auto;
  max-width: 1250px;
  padding-left: 25px;
  padding-right: 25px;
}
.slsFooter .content-wrap:after { content: ""; display: table; clear: both; }

/* ---- Base (their rules with no media query) ------------------------------- */
.slsFooter {
  position: relative;
  z-index: 2;
  background-color: #252b2c;
  margin-top: 50px;
}
.slsFooter .fn-wrap { line-height: 1.16; font-size: 16px; }
.slsFooter .fn-wrap li ~ li { margin-top: 6px; }
.slsFooter .f-primary { color: #9a9c9a; padding: 38px 0 44px; }
.slsFooter .f-logo a,
.slsFooter .f-logo svg { display: block; }
.slsFooter .fpb-logo { width: 200px; }
.slsFooter .fp-brand { position: relative; }
.slsFooter .fpb-address { margin: 30px 0 10px; }
.slsFooter .fpb-phone { margin-bottom: 38px; font-size: 16px; }
.slsFooter .fnpc-wrap a:focus,
.slsFooter .fnpc-wrap a:hover { color: #fff; }
.slsFooter .fnpc-title {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1;
}
.slsFooter .fnp-column { display: none; visibility: hidden; }
.slsFooter .f-secondary { background-color: #8c1515; color: #fff; padding: 38px 0 40px; }
.slsFooter .f-secondary .content-wrap { position: relative; }
.slsFooter .f-secondary a:focus,
.slsFooter .f-secondary a:hover { color: rgb(217, 217, 217); }
.slsFooter .fnl-wrap,
.slsFooter .fns-wrap { margin-bottom: 30px; }
.slsFooter .fnl-wrap li ~ li,
.slsFooter .fns-wrap li ~ li { margin-top: 10px; }
.slsFooter .fns-wrap { font-weight: 600; }
.slsFooter .fnl-address { line-height: 1.4; margin-bottom: 0; }
.slsFooter .fnl-address address { display: inline; }

.slsFooter .social-follow { font-size: 18px; }
.slsFooter .social-follow li { display: inline-block; }
.slsFooter .social-follow a {
  display: block;
  width: 35px;
  height: 35px;
  background-color: #9a9c9a;
  color: #252b2c;
  text-align: center;
}
.slsFooter .social-follow a:focus,
.slsFooter .social-follow a:hover { background-color: #fff; }
.slsFooter .social-follow a:focus,
.slsFooter .social-follow a:hover { color: #b30000; }
.slsFooter .social-follow i { line-height: 35px; vertical-align: middle; }
.slsFooter .social-follow i.icon-facebook { position: relative; right: 1px; bottom: 1px; }

/* ---- @media (min-width: 768px) -------------------------------------------- */
@media (min-width: 768px) {
  .slsFooter .content-wrap { padding-right: 28px; padding-left: 28px; }
  .slsFooter { margin-top: 56px; }
  .slsFooter .f-logo { position: absolute; top: 6px; }
  .slsFooter .fpb-logo { width: 155px; }
  .slsFooter .fpb-address,
  .slsFooter .fpb-phone { padding-left: 230px; }
  .slsFooter .fpb-address { margin-top: 0; }
  .slsFooter .social-follow { padding-left: 230px; }
  .slsFooter .fnl-wrap,
  .slsFooter .fns-wrap { padding-left: 230px; margin-bottom: 10px; }
  .slsFooter .fnl-wrap li,
  .slsFooter .fns-wrap li { line-height: 1.5; display: inline-block; margin-right: 15px; }
  .slsFooter .fnl-wrap li a,
  .slsFooter .fns-wrap li a { display: inline-block; }
  .slsFooter .fnl-wrap li ~ li,
  .slsFooter .fns-wrap li ~ li { margin-top: 0; }
}

/* ---- @media (min-width: 960px) -------------------------------------------- */
@media (min-width: 960px) {
  .slsFooter { margin-top: 105px; }
  .slsFooter .f-primary { padding: 65px 0 54px; }
  .slsFooter .fpb-logo { position: static; }
  .slsFooter .fp-brand { width: 150px; float: left; margin-right: -150px; }
  .slsFooter .fpb-address,
  .slsFooter .fpb-phone { padding-left: 0; font-size: 13px; }
  .slsFooter .fpb-address { margin: 24px 0 10px; line-height: 1.25; }
  .slsFooter .fpb-phone { line-height: 1.25; margin-bottom: 24px; }
  .slsFooter .f-nav-primary { float: left; width: 100%; padding-left: 214px; }
  .slsFooter .fnp-column {
    display: inline-block;
    visibility: visible;
    margin-right: -4px;
    padding-right: 32px;
    width: 33.33%;
    vertical-align: top;
  }
  .slsFooter .fnpc-wrap { margin-bottom: 18px; }
  .slsFooter .social-follow { padding-left: 0; font-size: 12px; }
  .slsFooter .social-follow a { width: 22px; height: 22px; }
  .slsFooter .social-follow i { line-height: 22px; }
  .slsFooter .f-secondary { padding: 30px 0 38px; }
  .slsFooter .fnl-wrap,
  .slsFooter .fns-wrap { padding-left: 150px; margin-bottom: 8px; }
  .slsFooter .fns-wrap { font-size: 17px; }
  .slsFooter .fnl-wrap { font-size: 16px; }
}

/* ---- @media (min-width: 1048px) ------------------------------------------- */
@media (min-width: 1048px) {
  .slsFooter .fnp-column { width: 16.6666667%; }
}

/* ---- Print ---------------------------------------------------------------
   The hub's print stylesheet hides its own `.footer`. This footer is not that
   element, so it needs telling separately: a printed page does not want six
   columns of site navigation. */
@media print {
  .slsFooter { display: none !important; }
}