/* ==========================================
   WTMD Station Header
   Brightcove Gallery Custom CSS
   ========================================== */

/* Main header container */

#wtmd-station-header {
  width: 100%;
  background-color: #003638;
  color: #ffffff;
  box-sizing: border-box;
}

/* Consistent box sizing */

#wtmd-station-header *,
#wtmd-station-header *::before,
#wtmd-station-header *::after {
  box-sizing: border-box;
}

/* ==========================================
   Header Layout
   ========================================== */

#wtmd-station-header .wtmd-header-inner {
  width: 100%;
  max-width: none;
  min-height: 85px;

  margin: 0;
  padding: 12px 68px;

  display: flex;
  align-items: center;
  gap: 28px;
}

/* ==========================================
   WTMD Logo
   ========================================== */

#wtmd-station-header .wtmd-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  text-decoration: none;
}

#wtmd-station-header .wtmd-brand img {
  display: block;

  width: 192px;
  max-width: 100%;
  height: auto;
}

/* ==========================================
   Navigation Links
   ========================================== */

#wtmd-station-header .wtmd-header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

#wtmd-station-header .wtmd-header-nav a {
  color: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;

  text-decoration: none;
  white-space: nowrap;

  transition: color 0.2s ease;
}

#wtmd-station-header .wtmd-header-nav a:hover {
  color: #51c3ca;
}

/* ==========================================
   Social Media Icons
   ========================================== */

#wtmd-station-header .wtmd-header-social {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

#wtmd-station-header .wtmd-header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  color: #13969e;
  text-decoration: none;

  transition: color 0.2s ease;
}

#wtmd-station-header .wtmd-header-social a:hover {
  color: #ffffff;
}

#wtmd-station-header .wtmd-header-social svg {
  display: block;

  width: 100%;
  height: 100%;

  fill: currentColor;
}

/* ==========================================
   Tablet
   ========================================== */

@media (max-width: 900px) {

  #wtmd-station-header .wtmd-header-inner {
    min-height: 80px;
    padding: 12px 32px;
    gap: 24px;
  }

  #wtmd-station-header .wtmd-brand img {
    width: 180px;
  }

  #wtmd-station-header .wtmd-header-nav {
    gap: 20px;
  }

  #wtmd-station-header .wtmd-header-social {
    gap: 12px;
  }

}

/* ==========================================
   Mobile
   ========================================== */

@media (max-width: 640px) {

  #wtmd-station-header .wtmd-header-inner {
    min-height: auto;

    padding: 16px 20px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 16px;
  }

  /* Logo */

  #wtmd-station-header .wtmd-brand img {
    width: 170px;
  }

  /* Navigation moves to second row */

  #wtmd-station-header .wtmd-header-nav {
    order: 3;

    width: 100%;

    display: flex;
    align-items: center;
    gap: 24px;
  }

  #wtmd-station-header .wtmd-header-nav a {
    font-size: 12px;
  }

  /* Social icons remain beside logo */

  #wtmd-station-header .wtmd-header-social {
    margin-left: auto;
    gap: 14px;
  }

  #wtmd-station-header .wtmd-header-social a {
    width: 18px;
    height: 18px;
  }

}

/* ==========================================
   Small Mobile Screens
   ========================================== */

@media (max-width: 380px) {

  #wtmd-station-header .wtmd-header-inner {
    padding: 14px 16px;
    gap: 12px;
  }

  #wtmd-station-header .wtmd-brand img {
    width: 150px;
  }

  #wtmd-station-header .wtmd-header-nav {
    gap: 16px;
  }

  #wtmd-station-header .wtmd-header-nav a {
    font-size: 11px;
  }

  #wtmd-station-header .wtmd-header-social {
    gap: 10px;
  }

}