/*
Theme Name: Intralogix
Theme URI: https://intralogix.nl
Author: Intralogix
Author URI: https://intralogix.nl
Description: Blokthema voor Intralogix. Tekeningblad-esthetiek: haarlijnen, maatlijnen, bladnummers in de marge en een titelblok. Huisstijl navy #232047 en oranje #E06C34.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: intralogix
Tags: full-site-editing, block-patterns, business, one-column
*/

/* ============================================================
   Alle kleuren en lettertypen komen uit theme.json.
   Deze CSS regelt alleen structuur en de tekeningblad-details.
   ============================================================ */

:root{
  --pad: clamp(18px, 4vw, 44px);
  --marge: clamp(44px, 7vw, 92px);
}

*{ border-radius: 0 }
html{ scroll-behavior: smooth }
img{ max-width: 100%; display: block }

/* het "blad" — de hele site staat op één tekeningblad */
.wp-site-blocks{
  max-width: 1240px;
  margin: 0 auto;
  background: var(--wp--preset--color--base);
  border-left: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
}

.wp-block-group{ margin-block: 0 }

h1,h2,h3,h4{
  font-family: var(--wp--preset--font-family--display);
  text-transform: uppercase;
  line-height: 1.02;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin: 0;
}
h1{ font-size: clamp(40px, 7.2vw, 86px) }
h2{ font-size: clamp(28px, 4.4vw, 54px) }
h3{ font-size: clamp(18px, 2.1vw, 23px) }
p{ margin: 0 0 14px }
p:last-child{ margin-bottom: 0 }

/* ---------- herbruikbare onderdelen ---------- */
.code{
  font-family: var(--wp--preset--font-family--label);
  font-size: 12.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--wp--preset--color--muted);
  margin-bottom: 8px;
}
.code--accent{ color: var(--wp--preset--color--accent) }

.dim{ display: flex; align-items: center; gap: 10px; margin: 22px 0 24px }
.dim__line{
  flex: 1; height: 1px; max-width: 220px; position: relative;
  background: var(--wp--preset--color--accent);
}
.dim__line::before,.dim__line::after{
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px;
  background: var(--wp--preset--color--accent);
}
.dim__line::before{ left: 0 } .dim__line::after{ right: 0 }
.dim span{
  font-family: var(--wp--preset--font-family--label);
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--wp--preset--color--accent);
}

.wp-block-button__link{
  font-family: var(--wp--preset--font-family--label);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: 13.5px; font-weight: 600; padding: 15px 26px;
}
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link{
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--primary); background: transparent;
}
.is-style-outline .wp-block-button__link:hover{
  background: var(--wp--preset--color--primary); color: #fff;
  border-color: var(--wp--preset--color--primary);
}
.wp-block-button__link:hover{ background: var(--wp--preset--color--accent-dark) }

/* ---------- header ---------- */
.top{ border-bottom: 1px solid var(--wp--preset--color--line); background: #fff }
.top__in{
  display: flex; align-items: center; gap: 18px; height: 34px;
  padding: 0 var(--pad);
  font-family: var(--wp--preset--font-family--label);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.top__in a{ text-decoration: none; color: inherit }
.top__r{ margin-left: auto; display: flex; gap: 12px }
.top__r a.on{ color: var(--wp--preset--color--accent) }
@media(max-width:680px){ .top__hide{ display: none } }

.hdr{
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--wp--preset--color--primary);
}
.hdr__in{ display: flex; align-items: center; gap: 26px; height: 72px; padding: 0 var(--pad) }
.logo{ display: flex; align-items: center; gap: 11px; text-decoration: none }
.logo__m{ width: 30px; height: 30px; position: relative; flex: none }
.logo__m::before{
  content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 30px;
  background: var(--wp--preset--color--primary);
}
.logo__m::after{
  content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 8px;
  background: var(--wp--preset--color--accent);
}
.logo__w{
  font-family: var(--wp--preset--font-family--display); font-weight: 700;
  font-size: 26px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.hdr .wp-block-navigation{ margin-left: auto }
.hdr .wp-block-navigation .wp-block-navigation-item__content{
  font-family: var(--wp--preset--font-family--label);
  text-transform: uppercase; letter-spacing: .13em; font-size: 13px; font-weight: 600;
  color: var(--wp--preset--color--primary); text-decoration: none;
}
.hdr .wp-block-navigation .wp-block-navigation-item{
  padding: 0 18px; border-left: 1px solid var(--wp--preset--color--line-soft); line-height: 1;
}
.hdr .wp-block-navigation .wp-block-navigation-item__content:hover{ color: var(--wp--preset--color--accent) }

/* ---------- sectie met bladnummer in de marge ---------- */
.sec{
  display: grid; grid-template-columns: var(--marge) 1fr;
  border-top: 1px solid var(--wp--preset--color--line);
}
.sec__marge{ border-right: 1px solid var(--wp--preset--color--line-soft); position: relative }
.sec__marge span{
  position: absolute; top: 34px; left: 50%;
  transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--wp--preset--font-family--label);
  font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); white-space: nowrap;
}
.sec__body{ padding: clamp(34px,5vw,72px) var(--pad) }
@media(max-width:640px){
  .sec{ grid-template-columns: 1fr }
  .sec__marge{ border-right: 0; border-bottom: 1px solid var(--wp--preset--color--line-soft); height: 34px }
  .sec__marge span{ writing-mode: horizontal-tb; transform: none; top: 9px; left: var(--pad) }
}

/* ---------- hero ---------- */
.hero{ display: grid; grid-template-columns: 1.15fr .85fr }
.hero__l{ padding: clamp(40px,6vw,86px) var(--pad) clamp(34px,4vw,58px) }
.hero__r{ border-left: 1px solid var(--wp--preset--color--line); position: relative; min-height: 340px }
.hero__r .wp-block-image,
.hero__r figure{ margin: 0; height: 100% }
.hero__r img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hero__fig{
  position: absolute; left: 0; bottom: 0; background: #fff;
  border-top: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  padding: 8px 14px; font-family: var(--wp--preset--font-family--label);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); z-index: 2;
}
.hero .lead{ font-size: clamp(17px,1.6vw,19.5px); color: var(--wp--preset--color--muted); max-width: 48ch }
.hero .lead strong{ color: var(--wp--preset--color--primary); font-weight: 600 }
@media(max-width:880px){
  .hero{ grid-template-columns: 1fr }
  .hero__r{ border-left: 0; border-top: 1px solid var(--wp--preset--color--line); min-height: 280px }
}

/* ---------- specbalk ---------- */
.spec{ display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--wp--preset--color--line) }
.spec > div{ padding: 18px var(--pad); border-left: 1px solid var(--wp--preset--color--line-soft) }
.spec > div:first-child{ border-left: 0 }
.spec b{
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: 26px; font-weight: 700; color: var(--wp--preset--color--primary); line-height: 1;
}
.spec small{
  font-family: var(--wp--preset--font-family--label); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
@media(max-width:760px){
  .spec{ grid-template-columns: 1fr 1fr }
  .spec > div:nth-child(3){ border-left: 0 }
  .spec > div:nth-child(3), .spec > div:nth-child(4){ border-top: 1px solid var(--wp--preset--color--line-soft) }
}

/* ---------- stuklijst: wat vervalt / wat komt erin ---------- */
.bom{ border-top: 1px solid var(--wp--preset--color--line); margin-top: clamp(28px,3.6vw,44px) }
.bom__head,.bom__row{
  display: grid; grid-template-columns: 58px 1.05fr 1.4fr 1.4fr;
  gap: clamp(12px,2.2vw,28px);
}
.bom__head{
  padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--label); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
.bom__row{
  padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--line-soft);
  align-items: start; transition: background .15s, padding-left .15s;
}
.bom__row:hover{ background: var(--wp--preset--color--surface); padding-left: 10px }
.bom__nr{
  font-family: var(--wp--preset--font-family--label); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; color: var(--wp--preset--color--accent); padding-top: 4px;
}
.bom__row .why{ color: var(--wp--preset--color--muted); font-size: 14.5px; line-height: 1.5; margin-top: 6px }
.bom__out,.bom__in{ font-size: 15.5px; position: relative; padding-left: 16px; margin: 0 }
.bom__out{ color: var(--wp--preset--color--muted) }
.bom__out::before{
  content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px;
  background: var(--wp--preset--color--muted);
}
.bom__in{ color: var(--wp--preset--color--ink) }
.bom__in::before{
  content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px;
  background: var(--wp--preset--color--accent);
}
@media(max-width:820px){
  .bom__head{ display: none }
  .bom__row{ grid-template-columns: 46px 1fr; row-gap: 10px }
  .bom__row > *:not(.bom__nr){ grid-column: 2/3 }
}
.keep{
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(16px,3vw,40px);
  margin-top: clamp(28px,4vw,48px); border: 1px solid var(--wp--preset--color--line);
  padding: 22px clamp(18px,2.4vw,28px);
}
.keep p{ color: var(--wp--preset--color--muted); font-size: 15.5px }
@media(max-width:700px){ .keep{ grid-template-columns: 1fr } }

/* ---------- diensten als lijst ---------- */
.rows{ border-top: 1px solid var(--wp--preset--color--line) }
.rows a.row{
  display: grid; grid-template-columns: 64px 1.1fr 1.6fr auto;
  gap: clamp(12px,2.4vw,30px); align-items: baseline; padding: 26px 0;
  border-bottom: 1px solid var(--wp--preset--color--line-soft);
  text-decoration: none; color: inherit; transition: background .16s, padding-left .16s;
}
.rows a.row:hover{ background: var(--wp--preset--color--surface); padding-left: 12px }
.rows i{
  font-style: normal; font-family: var(--wp--preset--font-family--label);
  font-size: 12.5px; letter-spacing: .16em; color: var(--wp--preset--color--accent); font-weight: 600;
}
.rows p{ color: var(--wp--preset--color--muted); font-size: 15.5px; margin: 0 }
.rows em{
  font-style: normal; font-family: var(--wp--preset--font-family--label);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
@media(max-width:760px){
  .rows a.row{ grid-template-columns: 44px 1fr; row-gap: 6px }
  .rows em{ display: none }
  .rows p{ grid-column: 2/3 }
}

/* ---------- merken ---------- */
.brands{ display: flex; flex-wrap: wrap; margin-top: 26px }
.brands b, .brands a{
  font-family: var(--wp--preset--font-family--display); text-transform: uppercase;
  font-weight: 700; font-size: clamp(19px,2.4vw,28px); color: var(--wp--preset--color--primary);
  padding: 14px 20px; border: 1px solid var(--wp--preset--color--line-soft);
  margin: -1px 0 0 -1px; flex: 1 0 auto; text-align: center; text-decoration: none;
}
.brands a:hover{ background: var(--wp--preset--color--surface); color: var(--wp--preset--color--accent) }

/* ---------- werk / referenties ---------- */
.refs{ display: grid; grid-template-columns: repeat(3,1fr) }
.refs article{ border-left: 1px solid var(--wp--preset--color--line-soft); padding: 0 0 24px }
.refs article:first-child{ border-left: 0 }
.refs img{ aspect-ratio: 4/3; object-fit: cover; width: 100% }
.refs .txt{ padding: 20px clamp(16px,2vw,24px) 0 }
.refs h3{ font-size: 19px; margin-bottom: 8px }
.refs p{ color: var(--wp--preset--color--muted); font-size: 15px }
.refs .out{
  margin-top: 12px; font-family: var(--wp--preset--font-family--label);
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--accent); font-weight: 600;
}
@media(max-width:820px){
  .refs{ grid-template-columns: 1fr }
  .refs article{ border-left: 0; border-top: 1px solid var(--wp--preset--color--line-soft) }
  .refs article:first-child{ border-top: 0 }
}

/* ---------- contact + titelblok ---------- */
.contact{ display: grid; grid-template-columns: 1.2fr .8fr; border-top: 1px solid var(--wp--preset--color--line) }
.contact__l{ padding: clamp(38px,5vw,72px) var(--pad) }
.titelblok{
  border-left: 1px solid var(--wp--preset--color--line);
  display: grid; grid-template-columns: 1fr 1fr; align-content: start;
}
.titelblok > div{
  padding: 14px 16px; border-bottom: 1px solid var(--wp--preset--color--line-soft);
  border-left: 1px solid var(--wp--preset--color--line-soft);
}
.titelblok > div:nth-child(odd){ border-left: 0 }
.titelblok small{
  display: block; font-family: var(--wp--preset--font-family--label);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-bottom: 3px;
}
.titelblok b{
  font-family: var(--wp--preset--font-family--display); text-transform: uppercase;
  font-size: 19px; font-weight: 600; color: var(--wp--preset--color--primary);
}
.titelblok .full{ grid-column: 1/3; border-left: 0 }
@media(max-width:820px){
  .contact{ grid-template-columns: 1fr }
  .titelblok{ border-left: 0; border-top: 1px solid var(--wp--preset--color--line) }
}

/* ---------- footer ---------- */
.foot{
  border-top: 1px solid var(--wp--preset--color--line);
  padding: 18px var(--pad) 26px; display: flex; flex-wrap: wrap; gap: 16px;
  font-family: var(--wp--preset--font-family--label); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
.foot a{ text-decoration: none; color: inherit }
.foot .blad{ margin-left: auto }

/* ---------- mobiele bel-balk ---------- */
.callbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  background: #fff; border-top: 1px solid var(--wp--preset--color--primary);
}
.callbar a{
  flex: 1; text-align: center; padding: 15px 0; text-decoration: none;
  font-family: var(--wp--preset--font-family--label); text-transform: uppercase;
  letter-spacing: .14em; font-size: 13px; font-weight: 600;
}
.callbar .is-accent{ background: var(--wp--preset--color--accent); color: #fff }
.callbar .is-line{ color: var(--wp--preset--color--primary) }
@media(max-width:700px){ .callbar{ display: flex } body{ padding-bottom: 60px } }

/* ---------- artikel / losse pagina ---------- */
.entry{ padding: clamp(34px,5vw,72px) var(--pad); max-width: 78ch }
.entry p{ margin-bottom: 18px }
.entry h2{ margin-top: 40px; margin-bottom: 12px }
.entry h3{ margin-top: 28px; margin-bottom: 8px }

@media(prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important }
  html{ scroll-behavior: auto }
}
:focus-visible{ outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px }