/* Future Job | Responsive refinements 2026-11-01
   Visueel gecontroleerde mobiele layout en echte submenu's.
   Bewust geladen na de bestaande stylesheets. */

/* Navigatie op desktop: hoofdlink + hovermenu, op mobiel aparte uitklapknop */
.fj-menu-toggle,.fj-nav-accordion,.fj-nav-bottom{display:none}
.nav nav > ul > li.nav-services > a.fj-nav-parent{display:inline-flex;align-items:center}
.nav .nav-services > a.fj-nav-parent::after{content:"⌄";display:inline-block;margin-left:8px;color:#577192;font-size:16px}
.nav .nav-services .subnav{list-style:none}
.nav .nav-services .subnav li a{font-size:14px}
.nav .nav-services .subnav a[aria-current="page"]{background:#eff4e7;color:#183d24}

/* Portfolio: elke dienst is één aanklikbare, leesbare rij */
.fj-project-index{list-style:none;padding:0;margin:24px 0 0;border-top:2px solid #223a69}
.fj-project-index > li{display:block;margin:0;padding:0;border-bottom:1px solid #cbd5e3}
.fj-project-index-link{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:22px;padding:24px 8px;text-decoration:none!important;color:#142857;transition:background .2s ease}
.fj-project-index-link:hover,.fj-project-index-link:focus-visible{background:#e9eef5}
.fj-project-nr{display:block;color:#567439;font-size:13px;font-weight:800;letter-spacing:.03em;align-self:start;padding-top:4px}
.fj-project-info{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:6px}
.fj-project-info strong{display:block;color:#142857;font-family:Sora,system-ui,sans-serif;font-size:19px;line-height:1.35;overflow-wrap:anywhere}
.fj-project-summary{display:block;color:#5a6478;line-height:1.55;font-size:15px;overflow-wrap:break-word}
.fj-project-cta{color:#1d4075;font-weight:700;font-size:13px;white-space:nowrap;display:inline-flex;gap:8px;align-items:center}

/* Zakelijke foto: geen staande uitsnede die het gezicht uitvergroot */
.page-over-mij .portretfoto.fj-about-photo{width:100%;max-width:490px;aspect-ratio:1504/1006;height:auto;object-fit:contain;object-position:center;display:block;margin:0 auto;border-radius:3px;box-shadow:none}

@media(max-width:1024px){
  header.site{z-index:200}
  .nav{position:relative;display:flex;flex-wrap:nowrap;min-height:72px;padding:8px 20px}
  .nav > a[aria-label="Future Job home"]{flex:0 1 auto;max-width:calc(100% - 65px);min-width:0}
  .nav img{max-width:min(230px,100%);width:auto;height:auto;max-height:48px;object-fit:contain}
  .fj-menu-toggle{margin-left:auto;display:flex;flex:0 0 48px;width:48px;height:48px;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:10px;background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;position:relative;z-index:2}
  .fj-menu-toggle span{display:block;width:26px;height:2.5px;background:#13285b;border-radius:2px;transition:transform .2s ease,opacity .18s ease}
  .fj-menu-open .fj-menu-toggle span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
  .fj-menu-open .fj-menu-toggle span:nth-child(2){opacity:0}
  .fj-menu-open .fj-menu-toggle span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
  body.fj-menu-is-open{overflow:hidden}
  header.site .nav nav#fj-primary-navigation{display:none!important;position:absolute;left:0;right:0;top:100%;width:100%;max-width:none;max-height:calc(100dvh - 75px);height:auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fff;border-top:1px solid #dee6ef;border-bottom:1px solid #d4ddec;box-shadow:0 20px 45px rgba(13,30,67,.16);padding:14px max(20px,env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom));border-radius:0}
  header.site.fj-menu-open .nav nav#fj-primary-navigation{display:block!important}
  #fj-primary-navigation .fj-main-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;list-style:none}
  #fj-primary-navigation .fj-main-nav > li{display:block!important;width:100%;min-width:0;border-bottom:1px solid #e2e8ef;padding:0;margin:0}
  #fj-primary-navigation .fj-main-nav>li.nav-services{position:static}
  #fj-primary-navigation .fj-main-nav > li > a:not(.fj-nav-parent){display:flex;align-items:center;width:100%;min-height:56px;padding:15px 4px;color:#132b59;font-size:16px;font-weight:650;line-height:1.4;background:transparent;border:0;border-radius:0;text-align:left}
  #fj-primary-navigation .fj-main-nav > li > a[aria-current="page"]{border-left:0;box-shadow:inset 3px 0 #97b957;padding-left:13px}
  #fj-primary-navigation .fj-main-nav > li > a.cta{display:block;text-align:center;margin:16px 0 6px;background:#142657!important;color:#fff!important;padding:15px;font-size:15px;min-height:0;border-radius:4px}
  #fj-primary-navigation .fj-main-nav>li.fj-nav-contact{border:0}
  #fj-primary-navigation .fj-nav-parent{display:none!important}
  #fj-primary-navigation .fj-nav-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:62px;gap:12px;padding:15px 4px;background:transparent;border:0;border-radius:0;color:#132b59;font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:750;line-height:1.3;text-align:left;cursor:pointer}
  #fj-primary-navigation .fj-chevron{display:inline-block;flex:0 0 10px;width:10px;height:10px;border-right:2px solid #17376c;border-bottom:2px solid #17376c;transform:rotate(45deg);transition:transform .18s ease;margin-right:8px;margin-top:-5px}
  #fj-primary-navigation .fj-expanded .fj-chevron{transform:rotate(225deg);margin-top:5px}
  #fj-primary-navigation .nav-services .subnav{display:none!important;position:static!important;min-width:0!important;max-width:100%!important;width:100%!important;padding:0 0 16px 14px!important;margin:0!important;box-shadow:none!important;border:0!important;border-left:2px solid #a0be66!important;background:transparent!important;flex-direction:column;align-items:stretch;gap:0}
  #fj-primary-navigation .nav-services.fj-expanded .subnav{display:flex!important}
  #fj-primary-navigation .nav-services .subnav li{display:block!important;width:100%;border:0;margin:0}
  #fj-primary-navigation .nav-services .subnav a{display:block;width:100%;padding:12px 10px;font-size:15px;font-weight:500;color:#52617a;white-space:normal;line-height:1.45;background:transparent!important;border:0!important;text-decoration:none}
  #fj-primary-navigation .nav-services .subnav a:hover,#fj-primary-navigation .nav-services .subnav a:focus-visible{color:#142b60;text-decoration:underline}
  #fj-primary-navigation .fj-nav-bottom{display:block;padding:20px 4px 0;color:#687689;font-size:13px}
  #fj-primary-navigation .fj-nav-bottom a{display:block;color:#193a71;font-weight:700;margin-top:3px;font-size:15px;padding:0}
}
@media(max-width:700px){
  /* 01 · kop · beschrijving · actie: aparte regels in plaats van concatenatie */
  .fj-project-portfolio{padding:30px 20px!important;background:#f3f6f9}
  .fj-portfolio-head{display:block;margin-bottom:20px}
  .fj-portfolio-head h2{font-size:clamp(24px,6vw,31px);line-height:1.2}
  .fj-portfolio-head p{font-size:15px;line-height:1.6;margin-top:15px}
  .fj-project-index-link{grid-template-columns:31px minmax(0,1fr);column-gap:14px;row-gap:11px;align-items:start;padding:22px 0}
  .fj-project-nr{font-size:13px;padding-top:4px}
  .fj-project-info{gap:7px}
  .fj-project-info strong{font-size:17px;line-height:1.34;letter-spacing:-.01em}
  .fj-project-summary{font-size:14px;line-height:1.55}
  .fj-project-cta{grid-column:2;justify-self:start;font-size:13px;margin-top:3px}
  .page-over-mij .portretfoto.fj-about-photo{max-width:100%;height:auto;aspect-ratio:1504/1006;object-fit:contain;margin:8px 0 10px}
  .page-over-mij .grid2{row-gap:22px}
  .page-over-mij .sec{padding-top:28px;padding-bottom:30px}
  .fjfab{bottom:calc(12px + env(safe-area-inset-bottom));right:12px}
  .fjfab-toggle{padding:10px 13px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.fj-menu-toggle span,.fj-chevron,.fj-project-index-link{transition:none}}
@media(max-width:1024px){
 header.site .nav nav#fj-primary-navigation{height:calc(100dvh - 80px);min-height:calc(100dvh - 80px);max-height:calc(100dvh - 80px)}
 body.fj-menu-is-open .fjfab{display:none!important}
}