html,
body {
  overflow-x: hidden;
  max-width: 100%;
  /* prevent children from inflating page layout width beyond viewport */
}

body.blog .boot-row {
  max-width: 100dvw;
  margin: 0;
}


* {
  box-sizing: border-box;
}

/* =====================================================
   PRIMARY NAV — full-height mobile panel (logged out, < 768px)
   ===================================================== */
@media (max-width: 767px) {

  /* Full-screen overlay; JS adds .ifp-nav-open to show it */
  #bs-navbar-primary {
    display: none;
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    background-color: #fff;
    z-index: 9999;
    flex-direction: column;
    overflow-y: auto;
  }

  #bs-navbar-primary.ifp-nav-open {
    display: flex;
  }

  body.blog .boot-row .main-content-container {
    padding-top: 50px;
  }

  /* ---- Mobile menu header (close button top-right) ---- */
  .ifp-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 16px 0;
    flex-shrink: 0;
    right: 0;
    position: absolute;
    top: 0;
  }

  .ifp-mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0;
  }

  .ifp-mobile-menu-close:hover {
    background-color: rgba(214, 42, 67, 0.08);
  }

  .ifp-mobile-menu-close .material-symbols-outlined {
    font-size: 22px;
    color: #0a0a0a;
  }

  /* ---- Nav items ---- */
  #bs-navbar-primary .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
    padding: 8px 12px;
    flex: 1;
  }

  #bs-navbar-primary .navbar-nav>li {
    width: 100%;
  }

  #bs-navbar-primary .navbar-nav>li>a {
    display: block;
    padding: 14px 12px;
    border-radius: 8px;
    color: #0a0a0a;
    font-weight: 500;
    font-size: 1rem;
  }

  #bs-navbar-primary .navbar-nav>li>a:hover,
  #bs-navbar-primary .navbar-nav>li.current-menu-item>a {
    background-color: rgba(214, 42, 67, 0.08);
    color: #d62a43;
    text-decoration: none;
  }

  /* ---- Auth buttons pinned to bottom ---- */
  .ifp-mobile-auth-buttons {
    padding: 16px 20px 24px;
    border-top: 1px solid #e5e5e5;
    margin-top: auto;
    flex-shrink: 0;
  }

  .ifp-mobile-auth-buttons .um-header-nonuser-button {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
  }

  .ifp-mobile-auth-buttons .um-header-nonuser-button>a {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Hide the header auth buttons on mobile — they live inside the panel now */
  .header__user-account .um-header-nonuser-button {
    display: none !important;
  }

  /* ---- Center the header logo on mobile ---- */
  .header__wrapper .boot-row {
    position: relative;
    justify-content: space-around !important;
  }

  .header__user-account {
    padding: 0 .6em 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Push notification bell + logout to far right, avatar stays left */
  .header__user-account .header-profile-section {
    flex: 1;
  }

  .header__user-account .label-container,
  .header__user-account .label-container>span {
    display: flex;
    width: 100%;
    align-items: center;
  }

  .header__user-account .label-container .ifp-notification-inline {
    margin-left: auto;
  }

  .logged-out .header__wrapper .boot-row .header__branding.site-branding {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
  }

  .logged-out .header__wrapper .boot-row .header__branding.site-branding a {
    pointer-events: auto;
  }

  /* ---- Logged-in top bar: hide hook-rendered bell, use inline one (between avatar & logout) ---- */
  .header__user-account>.header-notification-box {
    display: none !important;
  }

  /* ---- Sidebar logo: small ---- */
  #ifp-mobile-sidebar .custom-logo-link img.site-img-logo {
    max-height: 70px !important;
    width: auto !important;
  }

  .container-card-content main.flex-1,
  .ifp-job-single .ifp-job-container,
  .container-card-content {
    padding-top: 30px;
  }
}


/* ---- Sticky header on tablet and mobile (< 1024px) ---- */
@media (max-width: 1023px) {
  #masthead {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
  }

  .page-template-page-profile .container-card-content {
    padding-top: 60px !important;
  }
}

/* Ensure the nav is always visible and properly laid out on tablet and desktop (>= 768px) */
@media (min-width: 768px) {

  /* Hide inline notification bell — the hook-rendered one is used on desktop */
  .ifp-notification-inline {
    display: none !important;
  }

  #bs-navbar-primary {
    display: flex !important;
    flex: 1;
    justify-content: center;
    position: static !important;
  }

  /* Nav items in a horizontal row on tablet+ */
  #bs-navbar-primary .navbar-nav {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: auto !important;
    padding: 0 !important;

  }

  #bs-navbar-primary .navbar-nav>li {
    width: auto !important;
  }

  /* Hide mobile-only panel elements on tablet+ */
  .ifp-mobile-menu-header,
  .ifp-mobile-auth-buttons {
    display: none !important;
  }

  /* When sidebar is shown, lay the sidebar toggle and the nav on one line */
  /* .header__navigation {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
  } */
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header__navigation {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
  }

  /* Push main content down so it doesn't hide under the fixed header */
  .container-card-content main.flex-1 {
    padding-top: 10dvh;
  }
}

@media (max-width: 768px) {

  /* ---- ALGEMEEN ---- */
  h1 {
    font-size: 2rem !important;
    word-break: break-word;
  }

  section,
  .container {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* ---- HEADER ---- */
  header img {
    max-height: 40px !important;
    width: auto !important;
  }

  /* Allow the primary-nav dropdown to overflow below the header */
  header,
  #masthead,
  .site-header {
    max-width: 100vw;
  }

  /* ---- FORMULIEREN ---- */
  .um.um-29 {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .um-col-121,
  .um-col-122,
  .um-col-131,
  .um-col-132,
  .um-col-133,
  .um-col-alt,
  .um-half {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
  }

  .um form,
  .um .um-form,
  .um.um-register {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

}