/* =========================================================
   companynews page styles.
   Loaded after styles/global.css on companynews.html only.
   ========================================================= */

.org-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  justify-content: center;
}

/* Phones and tablets (keeps the mobile rule from global.css winning over the rule above) */
@media (max-width: 991px) {
  .org-tabs {
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
  }
}
@media (max-width: 991px) {
  .org-tabs {
    display: flex;
    gap: 30px;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
}

/* SNAP CONTAINER */
#news-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 20px 0;
}

/* OPTIONAL: hide scrollbar */
#news-container::-webkit-scrollbar {
  display: none;
}

#news-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mobile-hidden {
  display: none;
}

/* CATEGORY BUTTON SCROLLER */
#category-buttons {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

/* NEWS SCROLLBAR TRACK */
#news-container::-webkit-scrollbar {
  height: 6px;
}

/* TRACK (background line) */
#news-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* THUMB (the draggable bit) */
#news-container::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 10px;
  transition: background 0.3s ease;
}

/* HOVER EFFECT */
#news-container::-webkit-scrollbar-thumb:hover {
  background: #0b5ed7;
}

#news-container {
  scrollbar-width: thin;
  scrollbar-color: var(--orange) rgba(0, 0, 0, 0.1);
}

#news-container {
  overflow-x: auto;
}

#news-container {
  padding-bottom: 12px;
}

h1:where(.page-headline) {
  font-size: calc(1.325rem + .9vw);
  line-height: 1.2;
}

/* Phones and tablets (keeps the mobile rule from global.css winning over the rule above) */
@media (max-width: 991px) {
  h1:where(.page-headline) {
    font-size: 1.4rem;
  }
}

@media (min-width: 1200px) {
  h1:where(.page-headline) {
    font-size: 2rem;
  }
}


/* Phones and tablets: the fixed header is taller here (the certification bar wraps),
   so push the hero wordmark (not the footer one) down to clear it, in line with the other pages */
@media (max-width: 991px) {
  .transparent-logo:not(.tran-logo-footer) {
    padding-top: 116px !important;
  }
}


/* Desktop: the hero starts under the fixed header, so push its content down to clear it */
@media (min-width: 992px) {
  .header-grad > .content-wrapper {
    padding-top: 110px;
  }
}