/* 1Nijmegen Website R5 — mobile/tablet navigation + generic content flow repair. */
.mobile-nav-toggle{display:none}

@media (max-width:1150px){
  .header .container.nav{
    position:relative;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px!important;
    padding:14px 0!important;
  }
  .header .brand{min-width:0;max-width:100%;overflow:hidden}
  .header .brand img{display:block;max-width:min(240px,100%);height:auto}
  .header .header-actions{display:flex;align-items:center;gap:8px}
  .header .donate-header{display:inline-flex!important;min-width:0!important;padding:0 15px!important;white-space:nowrap}

  .mobile-nav-toggle{
    display:inline-flex!important;
    width:46px;height:46px;min-width:46px;
    align-items:center;justify-content:center;
    border:1px solid #b9d8cc;border-radius:12px;
    background:#fff;color:#07324f;
    cursor:pointer;padding:0;
    box-shadow:0 8px 18px rgba(7,54,85,.08);
  }
  .mobile-nav-toggle__icon,
  .mobile-nav-toggle__icon::before,
  .mobile-nav-toggle__icon::after{
    width:22px;height:2px;background:currentColor;border-radius:99px;display:block;position:relative;content:"";
    transition:transform .18s ease,opacity .18s ease;
  }
  .mobile-nav-toggle__icon::before{position:absolute;left:0;top:-7px}
  .mobile-nav-toggle__icon::after{position:absolute;left:0;top:7px}
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon{background:transparent}
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::before{top:0;transform:rotate(45deg)}
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::after{top:0;transform:rotate(-45deg)}

  .header .menu{
    display:none!important;
    position:absolute!important;
    z-index:1000;
    top:100%;left:0;right:0;
    width:100%!important;
    max-height:calc(100vh - 92px);
    overflow:auto;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    margin:0!important;
    padding:10px!important;
    background:#fff;
    border:1px solid #d7e8e1;
    border-radius:0 0 16px 16px;
    box-shadow:0 20px 44px rgba(7,54,85,.18);
  }
  .header .menu.is-r5-open{display:flex!important}
  .header .menu a{
    display:block!important;
    width:100%;
    padding:13px 14px!important;
    border:0!important;
    border-radius:10px;
    line-height:1.25;
    white-space:normal;
  }
  .header .menu a.active{background:#eef9f5;color:#0b7f5a!important}
  .header .menu a:focus-visible,.mobile-nav-toggle:focus-visible{outline:3px solid rgba(11,127,90,.28);outline-offset:2px}

  /* Programmadetail/generieke pagina's: op mobiel/tablet één normale documentflow. */
  .generic-page,.generic-page .card,.generic-page .rich-output{min-width:0!important;max-width:100%!important}
  .generic-page .card{overflow:visible!important}
  .generic-page .rich-output,
  .generic-page .rich-output p,
  .generic-page .rich-output h1,
  .generic-page .rich-output h2,
  .generic-page .rich-output h3,
  .generic-page .rich-output h4,
  .generic-page .rich-output ul,
  .generic-page .rich-output ol,
  .generic-page .rich-output li,
  .generic-page .rich-output blockquote,
  .generic-page .rich-output div,
  .generic-page .rich-output span{
    position:static!important;
    float:none!important;
    transform:none!important;
    translate:none!important;
    inset:auto!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    line-height:1.55!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .generic-page .rich-output p{margin:0 0 1em!important}
  .generic-page .rich-output h2,.generic-page .rich-output h3,.generic-page .rich-output h4{margin:1.15em 0 .5em!important;line-height:1.2!important}
  .generic-page .rich-output ul,.generic-page .rich-output ol{margin:.7em 0 1.1em!important;padding-left:1.35em!important}
  .generic-page .rich-output li{margin:.35em 0!important}
}

@media (max-width:700px){
  .header .container.nav{width:min(1180px,94vw)!important;grid-template-columns:minmax(0,1fr) 46px auto;gap:8px!important}
  .header .brand img{max-width:min(175px,100%)}
  .header .donate-header{height:46px!important;padding:0 13px!important;font-size:15px!important;border-radius:12px!important}
  .generic-page .card{padding:20px 18px!important}
  .generic-page .rich-output{font-size:16px!important;line-height:1.55!important}
  .page-hero-photo{min-height:0!important}
}

@media (max-width:390px){
  .header .container.nav{grid-template-columns:minmax(0,1fr) 44px auto;gap:6px!important}
  .mobile-nav-toggle{width:44px;height:44px;min-width:44px}
  .header .brand img{max-width:min(150px,100%)}
  .header .donate-header{height:44px!important;padding:0 11px!important;font-size:14px!important}
}

/* R5_HF1_PROGRAM_FLOW_START
   Mobiel/tablet: programma-overzicht altijd normale documentflow.
   R5 repareerde generieke detailpagina's; deze regels richten zich op page=programma kaarten. */
@media (max-width:1150px){
  .program-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
  }
  .program-grid .program-card{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .program-grid .program-card > .icon,
  .program-grid .program-card > h3,
  .program-grid .program-card > p,
  .program-grid .program-card > ul,
  .program-grid .program-card > ol,
  .program-grid .program-card > .readmore{
    position:static!important;
    inset:auto!important;
    float:none!important;
    transform:none!important;
    translate:none!important;
    min-height:0!important;
    max-height:none!important;
  }
  .program-grid .program-card > p{
    display:block!important;
    flex:none!important;
    height:auto!important;
    overflow:visible!important;
    margin:0 0 18px!important;
    line-height:1.55!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .program-grid .program-card > ul,
  .program-grid .program-card > ol{
    display:block!important;
    flex:none!important;
    height:auto!important;
    overflow:visible!important;
    margin:0 0 22px!important;
    padding-left:1.35em!important;
    line-height:1.55!important;
  }
  .program-grid .program-card > ul > li,
  .program-grid .program-card > ol > li{
    position:static!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    margin:.45em 0!important;
    line-height:1.55!important;
    overflow-wrap:anywhere!important;
  }
  .program-grid .program-card > .readmore{
    flex:none!important;
    margin-top:auto!important;
    align-self:flex-start!important;
  }
}
@media (max-width:900px){
  .program-grid{grid-template-columns:1fr!important;}
  .program-grid .program-card{padding:28px 24px!important;}
}
@media (max-width:480px){
  .program-grid .program-card{padding:24px 20px!important;}
  .program-grid .program-card h3{font-size:clamp(24px,8vw,32px)!important;line-height:1.15!important;}
}
/* R5_HF1_PROGRAM_FLOW_END */

/* R5_HF1_NEWS_WRAP_START
   Nieuws V50-popup/detail: lange woorden/URL-achtige tekst mag nooit buiten de viewport lopen. */
.news-v50-dialog,
.news-v50-dialog-inner,
.news-v50-dialog-text,
.news-detail-card,
.news-detail-card .rich-output{min-width:0!important;max-width:100%!important;}
.news-v50-dialog-text,
.news-v50-dialog-text *,
.news-detail-card .rich-output,
.news-detail-card .rich-output *{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-wrap:break-word!important;
  word-break:break-word!important;
  max-width:100%!important;
}
@media (max-width:700px){
  .news-v50-modal{padding:12px!important;}
  .news-v50-dialog{width:min(96vw,920px)!important;max-height:94vh!important;}
  .news-v50-dialog-inner{padding:24px 20px!important;}
  .news-v50-dialog h1{font-size:clamp(30px,10vw,42px)!important;line-height:1.08!important;}
  .news-v50-dialog-text{font-size:17px!important;line-height:1.6!important;}
}
/* R5_HF1_NEWS_WRAP_END */