/* ──────────────────────────────────────────────────────────────
   header.css  —  Shared social-bar + top-nav styling.
   This file is loaded LAST so its rules always win.  Everything
   needed for a consistent header on every page lives here, so
   it does not matter what state css/themes/white.css is in.
   ────────────────────────────────────────────────────────────── */

/* ---- Social bar (top-right) -------------------------------- */
/* No gap between buttons — they sit edge-to-edge. */
.social {
  font-size: 0;          /* kills inline-block whitespace between <a>s */
}

.social a {
  display: inline-block !important;
  width: 35px !important;
  height: 35px !important;
  line-height: 35px !important;
  text-align: center;
  margin: 0 !important;
  vertical-align: top;
  font-size: 1.4rem;     /* re-set because parent has font-size: 0 */
  transition: background 0.2s, color 0.2s;
}

/* Hover: keep height fixed so adjacent buttons don't shift */
.social a:hover {
  height: 35px !important;
}

/* IMDb: custom branded text button (yellow letters on black) */
.social a.icon-imdb {
  width: auto !important;
  min-width: 35px;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 900;
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: -0.5px;
  color: #f5c518;
  background: #000;
  text-decoration: none;
}
.social a.icon-imdb:hover {
  background: #f5c518;
  color: #000;
  height: 35px !important;
}

/* ---- Top navigation bar ------------------------------------ */
/* Every nav panel gets the SAME light background (including ABOUT).
   This is the failsafe for the old template's nth-child rules. */
#nav ul.nav li a {
  background: #f2f2f2 !important;
  color: #505050 !important;
  opacity: 1 !important;
}

/* Active or hovered panel: white background + green icon/label */
#nav ul.nav li.active a,
#nav ul.nav li a:hover {
  background: #ffffff !important;
  color: #16a085 !important;
}

/* The <li> itself stays transparent so the .nav dark gray only
   shows where there is no panel (the right-side spacer). */
#nav ul.nav li {
  background-color: transparent !important;
}