/* Shared public newsroom header.
 *
 * One stylesheet for the header on every unified public page — newsletter list,
 * newsletter detail, News Centre list and News Centre detail. All four render the same
 * markup (<header class="newsletter-header"> wrapping .main-header, .social-icons and
 * .sub-header), so they get one set of rules rather than a copy per stylesheet. The
 * previous split between issues_news_detail_heading.css and the header block of
 * issues_news_list_default.css had already drifted: the two spellings of the Google
 * Translate dropdown disagreed, and the list copy hardcoded white and dropped the rgb()
 * wrapper on --subheading-background, which made that declaration invalid.
 *
 * Scope: base colours, typography and spacing live here. Each family's responsive
 * @media overrides stay in its own stylesheet (issues_news_detail_default.css and
 * issues_news_list_default.css), which load after this file and out-specify it.
 *
 * News Centre pages add .newsletter-header--newscentre to the same <header>. That
 * variant lives at the bottom of this file, so it wins on source order without needing
 * !important — the templates used to fight this stylesheet from an inline <style> block
 * that the browser loaded first, which is why every one of those rules shouted.
 */

/* ---------- Base header ---------- */

.newsletter-header {
  background: rgb(var(--heading-background));
  border-bottom: 1px solid #e9ecef;
  position: relative;
}

.newsletter-header .main-header {
  background: rgb(var(--heading-background));
  padding: 20px;
  color: rgb(var(--heading-font-color));
  font-family: var(--heading-font-family);
}

.newsletter-header .main-header.mobile {
  display: none;
}

.newsletter-header .main-header h1 {
  font-family: var(--heading-font-family);
  color: rgb(var(--heading-font-color));
  margin: 0;
  font-size: var(--size-step-3);
  font-weight: 600;
}

.newsletter-header .main-logo img,
.newsletter-header .mobile-logo-wrap img {
  max-height: 60px;
  width: auto;
}

/* ---------- Header social icons ---------- */

.newsletter-header .main-header .social-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.newsletter-header .main-header .social-icons .follow-us-label {
  font-family: var(--body-font-family);
  font-size: 1rem;
  color: rgb(var(--heading-font-color));
  margin-right: 0.75rem;
  font-weight: 500;
}

.newsletter-header .main-header .social-icons ul {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.newsletter-header .main-header .social-icons ul li {
  list-style: none;
  display: inline-block;
  text-align: right;
  font-size: 1.25rem;
}

.newsletter-header .main-header .social-icons ul li a {
  color: rgb(var(--heading-font-color));
  padding: 0.25rem 0.35rem;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.newsletter-header .main-header .social-icons ul li a:hover {
  opacity: 0.8;
}

/* ---------- Sub-header ---------- */

.newsletter-header .sub-header {
  background: rgb(var(--subheading-background));
  padding: .925rem 2rem;
  color: rgb(var(--subheading-font-color));
  font-family: var(--heading-font-family);
}

.newsletter-header .sub-header ul {
  margin: 0;
  padding: 0;
}

.newsletter-header .sub-header ul li {
  list-style: none;
}

.newsletter-header .sub-header .left-block ul {
  padding: 0 1rem;
  margin: 0;
  justify-content: flex-start;
}

.newsletter-header .sub-header .right-block {
  text-align: right;
}

.newsletter-header .sub-header .right-block ul li {
  font-family: var(--body-font-family);
  font-size: .875rem;
  font-weight: normal;
}

.newsletter-header .sub-header .left-block ul li:first-child span {
  color: rgb(var(--subheading-font-color));
  font-family: var(--body-font-family);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: var(--heading-font-weight);
}

.newsletter-header .sub-header .left-block ul li:not(:first-child) span:last-child {
  color: rgba(var(--subheading-font-color), 0.75);
  font-family: var(--body-font-family);
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: inline-flex;
  padding-left: .75rem;
  border-left: 1px solid rgba(var(--subheading-font-color), 0.5);
  margin-left: .5rem;
}

.newsletter-header .sub-header .left-block .newsletter-title {
  color: rgb(var(--subheading-font-color));
  font-weight: var(--heading-font-weight);
}

.newsletter-header .sub-header .right-block ul li + li {
  margin-left: .5rem;
}

.newsletter-header .sub-header .right-block ul li a i {
  padding: 0 .25rem;
}

/* The sub-header holds two controls — the "Website" link and the Google Translate
   language selector — sitting side by side. They are matched deliberately: these metrics
   mirror .goog-te-combo below, so the pair reads as one set. TemplateSettings.navigation_style
   is not consulted here; it governs the newsletter action bar (Expand/Print/Top), not the
   sub-header. */
.newsletter-header .sub-header .right-block .btn-outline {
  border: 1px solid rgb(var(--subheading-font-color));
  color: rgb(var(--subheading-font-color));
  font-family: var(--body-font-family);
  font-size: 0.875rem;
  padding: .675rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.newsletter-header .sub-header .right-block .btn-outline:hover {
  color: rgb(var(--subheading-background));
  background: rgb(var(--subheading-font-color));
  border: 1px solid rgb(var(--subheading-font-color));
}

/* ---------- Google Translate widget ---------- */

.newsletter-header .sub-header .right-block ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 576px) {
  .newsletter-header .sub-header .right-block ul {
    justify-content: center;
  }
}

.newsletter-header .sub-header #google_translate_element {
  max-width: 100%;
  overflow: hidden;
}

.newsletter-header .sub-header #google_translate_element .goog-te-gadget {
  font-size: 0;
  max-width: 100%;
}

.newsletter-header .sub-header #google_translate_element .goog-te-gadget span {
  display: none;
}

.newsletter-header .sub-header #google_translate_element .goog-te-gadget .goog-te-combo {
  font-family: var(--body-font-family);
  margin: 0;
  font-size: 0.875rem;
  border-radius: .5rem;
  padding: .675rem 1rem;
  background: rgb(var(--subheading-background));
  color: rgb(var(--subheading-font-color));
  appearance: none;
  border: 1px solid rgb(var(--subheading-font-color));
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.newsletter-header .sub-header #google_translate_element .goog-te-gadget .goog-te-combo:focus-visible {
  outline: none;
}

.newsletter-header .sub-header .select-box {
  position: relative;
  height: 3rem;
  max-width: 100%;
  overflow: hidden;
}

.newsletter-header .sub-header .right-block ul li {
  min-width: 0;
  max-width: 100%;
}

.newsletter-header .sub-header .select-box:after {
  font-family: "Font Awesome 6 Free";
  content: "\f107";
  color: rgb(var(--subheading-font-color));
  float: right;
  position: absolute;
  font-weight: 600;
  right: 15px;
  top: 13px;
}

/* ---------- News Centre variant ---------- */
/* Same markup, different setting family: News Centre pages colour the header from the
   newscentre_* settings rather than the heading and subheading ones. Declared last so it wins on
   source order at equal specificity. */

.newsletter-header--newscentre,
.newsletter-header--newscentre .main-header {
  background: rgb(var(--newscentre-header-bg));
}

.newsletter-header--newscentre .main-header .social-icons ul li a {
  color: rgb(var(--newscentre-header-icon));
}

/* Reason: the title takes the News Centre header's own font colour. --newscentre-header-font
   falls back to the newsletter heading font colour when the school has not set one, so this
   rule renders identically to before for anyone who leaves it blank. */
.newsletter-header--newscentre .main-header,
.newsletter-header--newscentre .main-header h1 {
  color: rgb(var(--newscentre-header-font));
}

.newsletter-header--newscentre .sub-header {
  background: rgb(var(--newscentre-subheader-bg));
  color: rgb(var(--newscentre-back-link));
}

.newsletter-header--newscentre .sub-header a,
.newsletter-header--newscentre .sub-header .newsletter-title,
.newsletter-header--newscentre .sub-header .newsletter-title a,
.newsletter-header--newscentre .sub-header .right-block a {
  color: rgb(var(--newscentre-back-link));
}

/* Reason: selectors mirror the base rules above exactly, swapping .newsletter-header for
   the variant class, so each pair carries equal specificity and the variant wins purely
   on source order. Keep them in step — a deeper base selector would silently take back
   over, which is the failure the !important rules in the templates were papering over. */
.newsletter-header--newscentre .sub-header .left-block .newsletter-title {
  font-family: var(--heading-font-family);
  font-size: 1.125rem;
  font-weight: normal;
  color: rgb(var(--newscentre-back-link));
}

.newsletter-header--newscentre .sub-header .right-block ul li + li {
  margin-left: 1rem;
}

.newsletter-header--newscentre .sub-header .right-block a {
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  font-weight: normal;
}

.newsletter-header--newscentre .sub-header .right-block a:hover {
  text-decoration: underline;
}

.newsletter-header--newscentre .sub-header .right-block .btn-outline {
  border: 1px solid rgb(var(--newscentre-back-link));
  color: rgb(var(--newscentre-back-link));
}

.newsletter-header--newscentre .sub-header .right-block .btn-outline:hover {
  color: rgb(var(--newscentre-subheader-bg));
  background: rgb(var(--newscentre-back-link));
  border: 1px solid rgb(var(--newscentre-back-link));
}

.newsletter-header--newscentre .sub-header #campus-selector,
.newsletter-header--newscentre .sub-header #campus-selector-mobile {
  color: rgb(var(--newscentre-back-link));
  border-color: rgb(var(--newscentre-back-link));
}

.newsletter-header--newscentre .sub-header #google_translate_element .goog-te-gadget .goog-te-combo {
  background: transparent;
  color: rgb(var(--newscentre-back-link));
  border: 1px solid rgb(var(--newscentre-back-link));
}

.newsletter-header--newscentre .sub-header .select-box:after {
  color: rgb(var(--newscentre-back-link));
}