/**
 * Communicate — design-token utility classes.
 * Replaces repeated inline styles across PHP templates.
 * Loaded after fonts.css, before main.css.
 */

/* Light-first: tells mobile UAs not to auto-darken the UI (fixes SVG/logo glitches in system dark mode). */
html {
  color-scheme: light;
}

/* Brand mark: explicit rendering; avoids forced-colors / inheritance quirks on SVG-as-img. */
.site-brand-logo {
  forced-color-adjust: none;
}

.site-header .custom-logo-link {
  min-width: 0;
}

/* Simple Page / Salary Survey — sticky footer when content is short */
body.page-template-page-simple #page,
body.page-template-page-salary-survey #page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page-template-page-simple .site-main,
body.page-template-page-salary-survey .site-main {
  flex: 1 0 auto;
}

.communicate-pre-footer-logo .custom-logo {
  width: auto !important;
  max-width: min(100%, 380px);
  max-height: 45px;
}

@media (min-width: 768px) {
  .communicate-pre-footer-logo .custom-logo {
    max-height: 65px;
  }
}

@media (min-width: 1024px) {
  .communicate-pre-footer-logo .custom-logo {
    max-height: 87px;
  }
}

.communicate-pre-footer-logo .custom-logo-link {
  transition: opacity 0.2s ease;
}

.communicate-pre-footer-logo .custom-logo-link:hover {
  opacity: 0.9;
}

/* ── Typography: font stacks ── */
.font-body  { font-family: Poppins, sans-serif; }
.font-display { font-family: 'League Gothic', Impact, Arial, sans-serif; }

/* ── Text colors ── */
.text-dark  { color: #090909; }
.text-muted { color: #6B6B6B; }
.text-light { color: #FFF; }

/* ── Background colors ── */
.bg-light   { background-color: #D9D9D9; }
.bg-dark    { background-color: #090909; }

/* ── Border radius (site standard = 18.75px) ── */
.rounded-site    { border-radius: 18.75px !important; }
.rounded-site-tl { border-radius: 0 18.75px !important; }

/* ── Composite: page title (League Gothic 48px, uppercase) ── */
.page-title {
  color: #090909;
  font-family: 'League Gothic', Impact, Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ── Composite: hero / single heading (League Gothic 60–65px) ── */
.hero-title {
  color: #090909;
  font-family: 'League Gothic', Impact, Arial, sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 65px;
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 34px;
    line-height: 40px;
  }
}

.communicate-salary-survey-title-accent {
  color: #85a6b1 !important;
  font-style: normal !important;
}

.communicate-salary-survey {
  background-color: #F5F5F5 !important;
  border-radius: 18.75px;
  box-shadow: 0 0 18.75px 0 rgba(0, 0, 0, 0.25);
  padding: 28px 20px !important;
}

@media (min-width: 768px) {
  .communicate-salary-survey {
    padding: 40px 40px !important;
  }
}

@media (min-width: 1024px) {
  .communicate-salary-survey {
    padding: 57.5px 76.5px !important;
  }
}

/* ── Composite: fullwidth overlay heading (white, 65px) ── */
.overlay-title {
  color: #FFF;
  font-family: 'League Gothic', Impact, Arial, sans-serif;
  font-size: 65px;
  font-weight: 400;
  line-height: 65px;
  text-align: left;
}

/* ── Composite: article card title ── */
.card-title {
  color: #090909;
  font-family: 'League Gothic', Impact, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 32px;
}

/* ── Composite: section label (18.75px bold uppercase) ── */
.label-section {
  font-family: Poppins, sans-serif;
  font-size: 18.75px;
  font-weight: 700;
  letter-spacing: 1.875px;
  text-transform: uppercase;
}

/* ── Composite: meta text (11.25px) ── */
.text-meta {
  font-family: Poppins, sans-serif;
  font-size: 11.25px;
  font-weight: 400;
  line-height: normal;
}

.text-meta-bold {
  font-family: Poppins, sans-serif;
  font-size: 11.25px;
  font-weight: 700;
  line-height: normal;
}

/* ── Composite: dark CTA button ── */
.btn-dark {
  height: 45px;
  padding: 0 40px;
  border-radius: 18.75px !important;
  background-color: #090909;
  color: #FFF;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
}

/* ── Composite: overlay description (white 12px bold) ── */
.overlay-desc {
  color: #FFF;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* ── Composite: branded card title (white, League Gothic 35px) ── */
.branded-title {
  font-size: 35px;
  font-family: 'League Gothic', Impact, Arial, sans-serif;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: 0;
  text-shadow: 0 3px 3px rgba(0,0,0,0.25);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Composite: branded card byline ── */
.branded-byline {
  font-size: 11.25px;
  font-family: Poppins, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: #FFF;
}

/* ── Composite: category pill (article card) ── */
.pill-category {
  border: 0.75px solid #6B6B6B;
  border-radius: 18.75px !important;
  height: 19px;
  padding: 0 8px;
  color: #090909;
  font-family: Poppins, sans-serif;
  font-size: 11.25px;
  font-weight: 700;
}

/* ── Composite: nav link (desktop) ── */
.nav-link {
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Composite: dropdown child link ── */
.dropdown-link {
  color: #FFF;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.875px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 10px 28px;
}

/* ── Composite: dropdown panel ── */
.dropdown-panel {
  background: #090909;
  border-radius: 18.75px !important;
  padding: 20px 0;
  min-width: 240px;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
}

/* ── Composite: leaderboard ad wrapper ── */
.ad-leaderboard {
  background-color: #D9D9D9;
  border-radius: 18.75px !important;
  overflow: hidden !important;
}

/* Header leaderboard (ad-banner): height follows GPT content; overflow clips to radius */
.communicate-ad-banner-box {
  box-sizing: border-box;
}

/* GPT: responsive device containers — synced with sizeMapping breakpoint (1024px) */
@media (min-width: 1024px) {
  .communicate-ad-mobile { display: none !important; }
}
@media (max-width: 1023px) {
  .communicate-ad-desktop { display: none !important; }
}

/* GPT: keep slot on layout flow so parent grey can grow; cap iframe width */
.communicate-gpt-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.communicate-gpt-slot,
.communicate-gpt-slot-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.communicate-gpt-slot iframe,
.communicate-gpt-slot embed,
.communicate-gpt-slot object {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

/* GPT often wraps the iframe in a div — keep that centered too */
.communicate-gpt-slot > div {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* ── Composite: contact form input ── */
.form-input {
  border-radius: 18.75px !important;
  border: 0.75px solid #6B6B6B;
  background: #FFF;
  padding: 15px 20px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  outline: none;
}

/* ── Composite: contact form label ── */
.form-label {
  color: #090909;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 18.75px;
  font-weight: 700;
  letter-spacing: 1.875px;
  text-transform: uppercase;
}

/* ── Layout tokens ── */
.gap-section  { gap: 37px; }
.mt-section   { margin-top: 37px; }

/* ── Skin / wallpaper ad (Preview page only) ── */
#wallpaperDivID {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  background-color: transparent !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}

#topMarginDiv {
  margin-bottom: 0;
  height: 0;
}

body.page-template-page-preview {
  background: transparent !important;
}

body.page-template-page-preview #page {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

body.page-template-page-preview #page header,
body.page-template-page-preview #page .site-main,
body.page-template-page-preview #page .site-footer,
body.page-template-page-preview #page .communicate-mobile-menu,
body.page-template-page-preview #page .communicate-gpt-wrap:not(.communicate-skin-slot) {
  pointer-events: auto;
  background-color: #fff;
}

body.page-template-page-preview #page .site-main {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
}

.communicate-skin-slot {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (max-width: 1440px) {
  #wallpaperDivID {
    display: none !important;
  }
  body.page-template-page-preview {
    background: #fff !important;
  }
  body.page-template-page-preview #page {
    pointer-events: auto;
  }
}

/* ── Article body: space above subheadings (Gutenberg + classic) ── */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 1.5rem!important;
  margin-bottom: 0.65rem!important;
}

.entry-content > :first-child:is(h2, h3, h4, h5, h6) {
  margin-top: 0;
}

.entry-content h2 + h3,
.entry-content h3 + h4,
.entry-content h4 + h5,
.entry-content h5 + h6 {
  margin-top: 1.35rem;
}

/* ── Post content: WP captions & classic alignleft / alignright (text wrap) ── */
.entry-content .alignright {
  float: right;
  margin: 0.5em 0 0.5em 1em !important;
}

.entry-content .alignleft {
  float: left;
  margin: 0.5em 1em 0.5em 0 !important;
}

.entry-content .aligncenter {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.entry-content .wp-caption img {
  max-width: 100%;
  height: auto;
}

.entry-content .wp-caption-text {
  margin: 0.5em 0 0;
  font-size: 0.875em;
  line-height: 1.35;
}

.entry-content::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Hide reCAPTCHA badge (attribution kept near newsletter form) ── */
.grecaptcha-badge { visibility: hidden !important; }

/* ── Newsletter interest modal ── */
.communicate-nl-modal {
  display: none;
}

.communicate-nl-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.communicate-nl-modal__panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  overflow: auto;
}

.communicate-nl-modal__form {
  display: flex;
  flex-direction: column;
  padding: 32px 32px 28px;
}

.communicate-nl-modal__title {
  font-family: 'League Gothic', Impact, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 36px 20px 0;
}

.communicate-nl-modal__field {
  margin: 0 0 22px;
}

.communicate-nl-modal__field input {
  display: block;
  width: 100%;
  height: 42px;
  border: 0;
  outline: none;
  border-radius: 18.75px;
  background: #fff;
  color: #090909;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  padding: 0 16px;
}

.communicate-nl-modal__field input::placeholder {
  color: #6B6B6B;
  letter-spacing: 0;
}

.communicate-nl-modal__label {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

.communicate-nl-interests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 12px;
}

@media (max-width: 479px) {
  .communicate-nl-modal__form {
    padding: 28px 20px 22px;
  }
  .communicate-nl-interests {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
}

.communicate-nl-interest {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: #fff;
  cursor: pointer;
}

.communicate-nl-interest input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  accent-color: #fff;
}

.communicate-nl-modal__submit {
  margin-top: 24px;
  height: 44px;
  border: 0;
  border-radius: 18.75px;
  background: #fff;
  color: #090909;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.communicate-nl-modal__submit:hover {
  opacity: 0.85;
}

.communicate-nl-modal .newsletter-msg {
  display: none;
  margin: 14px 0 0;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
}