/* ==========================================================================
   Jeugdzorg Nederland - Brand Update 2026
   Override stylesheet loaded after styles.css
   ========================================================================== */

/* ==========================================================================
   1. TYPOGRAPHY - Replace fedrasans with Google Fonts
   ========================================================================== */

body,
html {
  font-family: 'Open Sans', sans-serif;
}

/* Ubuntu Medium for main headings (koppen) */
h1, h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
}

/* Open Sans for subheadings and smaller headings */
h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

/* Override any bold/900 on headings from styles.css */
.news__heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

.media__heading {
  font-family: 'Open Sans', sans-serif;
}

/* ==========================================================================
   2. HEADER / NAVIGATION - Orange background (#f39325)
   ========================================================================== */

.top {
  background-color: #f39325;
}

/* Mobile logo hidden on desktop, desktop logo hidden on mobile */
.logo--mobile {
  display: none;
}

@media (max-width: 970px) {
  .top .logo--desktop {
    width: 200px;
    height: auto;
  }
}

@media (max-width: 768px) {
  .logo--desktop {
    display: none;
  }
  .top .logo--mobile {
    display: block;
    height: 70px;
    width: auto;
    padding: 15px 0;
  }
  .logo__wrapper {
    overflow: visible;
    display: block;
    width: auto;
  }
}

/* Search bar styling on orange background */
.search .searchbar {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   3. SUBMENU - Green background, no uppercase
   ========================================================================== */

/* Navigation background matches header */
.navigation {
  background-color: #f39325;
}

.navigation .navigation__list .navigation__item .navigation__link:after {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* Dropdown submenu items - green */
.navigation__sub-menu li a {
  background-color: #006a6d;
  text-transform: none;
}

.navigation__sub-menu li a:hover,
.navigation__sub-menu li a:focus {
  background-color: #005658;
}

/* Mobile: full dropdown navigation gets green background */
@media (max-width: 768px) {
  .top .navigation {
    background-color: #006a6d;
  }
  .navigation__sub-menu li a {
    background-color: #005658;
  }
}

/* Mobile menu button */
.menu-button {
  background-color: #006a6d;
}

/* ==========================================================================
   4. HOMEPAGE HERO - Teal background with static image
   ========================================================================== */

/* Account for fixed header (.top is position: fixed) */
.hero--new {
  background-color: #006a6d;
  background-image: none !important;
  height: auto;
  min-height: auto;
  padding-top: 136px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
}

@media (max-width: 768px) {
  .hero--new,
  .home .hero {
    padding-top: 70px;
  }
}

.hero--new .hero__image {
  display: block;
  width: 100%;
  max-width: 1900px;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   5. HOMEPAGE CARDS - New colors
   ========================================================================== */

.card--red {
  background-color: #f39325;
}
.card--red:hover,
.card--red:focus {
  background-color: #e08515;
}

.card--purple {
  background-color: #9d6fad;
}
.card--purple:hover,
.card--purple:focus {
  background-color: #8a5f9a;
}

.card--blue {
  background-color: #006a6d;
}
.card--blue:hover,
.card--blue:focus {
  background-color: #005658;
}

.card--brown {
  background-color: #e84e0e;
}
.card--brown:hover,
.card--brown:focus {
  background-color: #d0450c;
}

/* ==========================================================================
   6. FOOTER - Green background (#006a6d)
   ========================================================================== */

.foundation {
  background-color: #006a6d;
}

/* Remove dot/stip */
.brand {
  display: none !important;
}

/* ==========================================================================
   7. CONTENT HEADINGS
   ========================================================================== */

/* "Hier zetten wij ons voor in" pages - GREEN headings */
.content--green h1,
.content--green h2,
.content--green h3,
.content--green h4,
.content--green h5 {
  color: #006a6d;
}

.content--green .side-nav {
  background-color: #006a6d;
}

.content--green .side-nav__item--active {
  background-color: #005658;
}

/* "Over ons" and related pages - PURPLE headings */
.content--purple h1,
.content--purple h2,
.content--purple h3,
.content--purple h4,
.content--purple h5 {
  color: #9d6fad;
}

.content--purple .side-nav {
  background-color: #006a6d;
}

.content--purple .side-nav__item--active {
  background-color: #005658;
}

/* ==========================================================================
   8. SIDEBAR - Documents green, Links purple
   ========================================================================== */

/* Gerelateerde documenten - GREEN */
.card-news--documents .card-news__title {
  color: #006a6d;
}

.card-news--documents .card-news__icon {
  background-color: #006a6d;
}

/* Handige links - PURPLE */
.card-news--links .card-news__title {
  color: #9d6fad;
}

.card-news--links .card-news__icon {
  background-color: #9d6fad;
}

/* Actueel sidebar */
.card-news--actueel .card-news__title {
  color: #e84e0e;
}

.card-news--actueel .card-news__icon {
  background-color: #e84e0e;
}

/* Information sidebar */
.card-news--information .card-news__title {
  color: #006a6d;
}

.card-news--information .card-news__icon {
  background-color: #006a6d;
}

/* ==========================================================================
   9. LINKS - Purple (#9d6fad)
   ========================================================================== */

a {
  color: #9d6fad;
}

a:hover,
a:focus {
  color: #8a5f9a;
}

p a {
  color: #9d6fad;
}

p a:hover,
p a:active,
p a:focus {
  color: #8a5f9a;
}

.content .page__content a {
  color: #9d6fad;
}

.content .page__content a:hover,
.content .page__content a:active,
.content .page__content a:focus {
  color: #8a5f9a;
}

/* Navigation links stay white */
.navigation a,
.navigation a:hover,
.navigation a:focus,
.navigation__sub-menu a,
.navigation__sub-menu a:hover {
  color: white;
}

/* Footer links stay white */
.foundation a,
.foundation a:hover,
.foundation a:focus {
  color: white;
}

/* Card links stay white */
.card a,
.card a:hover,
.card__arrow {
  color: white;
}

/* Sidebar links stay black */
.card-news__link,
.card-news__link:hover,
.card-news__link:active,
.card-news__link:focus {
  color: black;
}

/* Side-nav links stay white */
.side-nav a,
.side-nav a:hover,
.side-nav a:focus {
  color: white;
}

/* Arrow links */
.arrow-link {
  color: #9d6fad;
}

.arrow-link:hover,
.arrow-link:focus {
  color: #8a5f9a;
}

/* ==========================================================================
   10. BUTTONS - Update old purple (#812C7C) references
   ========================================================================== */

.button--1:hover,
.button--1:focus,
.button--1:active {
  color: #006a6d;
}

.button--2 {
  background-color: #006a6d;
}

.button--2:hover,
.button--2:focus,
.button--2:active {
  background-color: #005658;
}

.button--login:hover,
.button--login:focus,
.button--login:active {
  color: #006a6d !important;
}

/* ==========================================================================
   11. MISCELLANEOUS - Update remaining old color references
   ========================================================================== */

/* Page title on non-home pages */
.hero--tiny h1 {
  color: #006a6d;
}

/* Blog tag */
.blog__tag {
  color: #006a6d;
}

/* Load more button */
.js-load-more {
  background-color: #006a6d;
}

.js-load-more:hover {
  background-color: #005658;
}

/* Pagination */
.page-numbers {
  color: #006a6d;
}

.page-numbers:hover,
.page-numbers:active,
.page-numbers:focus {
  color: #005658;
}

.page-numbers.current {
  background-color: #006a6d;
  color: white;
}

/* Team member name */
.team-member__name {
  color: #006a6d;
}

/* Default side-nav */
.side-nav {
  background-color: #006a6d;
}

/* Side-nav links: remove uppercase */
.side-nav__link {
  text-transform: none;
}

.side-nav__title {
  text-transform: none;
}

/* H2 default color update (was #00BCED) */
h2 {
  color: #006a6d;
}