/* ============================================================
   VICTORIE ZEILMAKERIJ · gedeelde huisstijl (contact & offerte)
   Zelfde ontwerptaal als de buiskappen-pagina: doek, diep water,
   marine, steenrood garen, messing voor de ene actie die telt.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmUiAo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/media/uploads/fusion-gfonts/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWAosBO5Xw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --doek: #f2eee6;
  --diep: #0b2233;
  --marine: #003c75;
  --logo-blauw: #0050a0;
  --steen: #b23328;
  --messing: #d68e01;
  --inkt: #16222c;
  --inkt-60: rgba(22, 34, 44, .62);
  --lijn: rgba(22, 34, 44, .16);
  --lijn-licht: rgba(242, 238, 230, .22);
  --doek-op-diep: rgba(242, 238, 230, .92);
  --kader: min(92vw, 1240px);
  --ease-uit: cubic-bezier(.22, 1, .36, 1);
  --f-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-tekst: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Roboto Condensed", "Arial Narrow", sans-serif;
}

/* De pagina's draaien in de Avada-schil (echte header/footer van de site).
   Alle eigen stijlen zijn daarom gescoped op .vz-scope, zodat Avada en dit
   ontwerp elkaar niet raken. */
.vz-scope, .vz-scope * { margin: 0; padding: 0; box-sizing: border-box; }

.vz-scope {
  background: var(--doek);
  color: var(--inkt);
  font-family: var(--f-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: clamp(4rem, 9vh, 6rem);
  background-image:
    repeating-linear-gradient(0deg,  rgba(22,34,44,.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(22,34,44,.016) 0 1px, transparent 1px 3px);
}

/* Avada zet kleuren rechtstreeks op koppen/tekst; binnen de scope hoort
   alles de kleur van zijn omgeving te erven. */
.vz-scope h1, .vz-scope h2, .vz-scope h3, .vz-scope h4,
.vz-scope p, .vz-scope li, .vz-scope address, .vz-scope small,
.vz-scope legend, .vz-scope figcaption { color: inherit; }

.vz-scope ::selection { background: var(--marine); color: var(--doek); }
.vz-scope img { max-width: 100%; display: block; }
.vz-scope a { color: inherit; }
.vz-scope :focus-visible { outline: 2px solid var(--steen); outline-offset: 3px; }

/* Avada-schil-correcties: het ecru content-venster hoort tegen de header en
   de schermranden aan te liggen. Avada geeft #main standaard witruimte
   (padding) en de headerrij een ondermarge; die halen we hier weg.
   (site.css laadt alleen op deze twee pagina's, dus dit raakt de rest niet.) */
body.fusion-body { background-color: var(--doek); }
#main { padding: 0 !important; }
.fusion-tb-header .fusion-fullwidth { margin-bottom: 0 !important; }

.tag {
  font-family: var(--f-label); font-weight: 500;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}

.kader { width: var(--kader); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }

/* (De kopbalk komt nu 1-op-1 uit de Avada-header van de site zelf;
   eigen header-stijlen zijn daarom verwijderd.) */

/* ---------------- paginakop ---------------- */
.pagina-kop { padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(2rem, 5vh, 3.4rem); }
.pagina-kop .tag { color: var(--inkt-60); display: block; margin-bottom: 1rem; }
.pagina-kop h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: .98; letter-spacing: -.02em; text-wrap: balance;
  max-width: 18ch;
}
.pagina-kop h1 em { font-style: normal; color: var(--steen); }
.pagina-kop .intro { margin-top: 1.3rem; max-width: 54ch; color: var(--inkt-60); font-size: 1.1rem; }

/* ---------------- panelen (patroondelen) ---------------- */
.paneel {
  position: relative; background: #fbf9f4;
  border: 1px solid var(--lijn);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
}

/* ---------------- formulieren ---------------- */
.veldgroep { border: 0; margin: 0 0 2.2rem; }
.veldgroep:last-of-type { margin-bottom: 0; }
.veldgroep > legend {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.25rem; letter-spacing: -.01em;
  margin-bottom: 1.2rem; width: 100%;
}
.veldgroep > legend .nr {
  font-family: var(--f-label); font-weight: 500; font-size: .72rem;
  letter-spacing: .14em; color: var(--steen);
}
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.veldrij .breed { grid-column: 1 / -1; }
@media (max-width: 640px) { .veldrij { grid-template-columns: 1fr; } }

.veld { display: block; }
.veld > span {
  display: block; margin-bottom: .4rem;
  font-family: var(--f-label); font-weight: 500;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--inkt-60);
}
.veld > span b { color: var(--steen); font-weight: 500; }
.veld input, .veld select, .veld textarea {
  width: 100%; font: inherit; color: var(--inkt);
  background: var(--doek);
  border: 1px solid var(--lijn); border-radius: 0;
  padding: .78rem .9rem;
  transition: border-color .25s linear, background .25s linear;
  appearance: none; -webkit-appearance: none;
}
.veld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316222c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
  padding-right: 2.4rem;
}
.veld textarea { min-height: 8.5rem; resize: vertical; }
.vz-scope .veld input::placeholder,
.vz-scope .veld textarea::placeholder { color: rgba(22, 34, 44, .36); opacity: 1; }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--marine); background: #fff;
}
/* na adres-autofill: postcode/woonplaats staan vast tot "aanpassen" */
.veld.vergrendeld input {
  background: rgba(22, 34, 44, .055);
  border-style: dashed; color: var(--inkt-60); cursor: default;
}
.veld.vergrendeld input:focus { border-color: var(--lijn); background: rgba(22, 34, 44, .055); }
.veld-unlock {
  border: 0; background: none; padding: 0; margin-left: .55rem;
  font-family: var(--f-label); font-weight: 500; font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--steen); cursor: pointer;
  border-bottom: 1px solid rgba(178, 51, 40, .45);
}
.veld.fout input, .veld.fout select, .veld.fout textarea { border-color: var(--steen); }
.veldfout {
  display: none; margin-top: .35rem; color: var(--steen);
  font-size: .85rem;
}
.veld.fout .veldfout { display: block; }

/* keuze ja/nee als werkplaatslabels */
.keuze { display: flex; gap: .6rem; flex-wrap: wrap; }
.keuze label { position: relative; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze span {
  display: inline-block; padding: .55rem 1.1rem;
  border: 1px solid var(--lijn); background: var(--doek);
  font-family: var(--f-label); font-weight: 500;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  transition: all .2s linear;
}
.keuze input:checked + span { background: var(--marine); border-color: var(--marine); color: var(--doek); }
.keuze input:focus-visible + span { outline: 2px solid var(--steen); outline-offset: 2px; }

/* adres-autocomplete */
.adres-veld { position: relative; }
.adres-suggesties {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  margin: 0; padding: 0; list-style: none;
  background: #fbf9f4; border: 1px solid var(--lijn);
  box-shadow: 0 16px 34px rgba(11, 34, 51, .16);
  max-height: 290px; overflow-y: auto;
}
.adres-suggesties li {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .6rem .9rem; cursor: pointer;
  border-top: 1px solid var(--lijn);
}
.adres-suggesties li:first-child { border-top: 0; }
.adres-suggesties li strong { font-family: var(--f-display); font-weight: 600; font-size: .97rem; }
.adres-suggesties li small { color: var(--inkt-60); font-size: .82rem; }
.adres-suggesties li.actief { background: var(--marine); }
.adres-suggesties li.actief strong, .adres-suggesties li.actief small { color: var(--doek); }

/* fotodropzone */
.dropzone {
  border: 1.5px dashed rgba(22,34,44,.35);
  background: var(--doek);
  padding: 1.8rem 1.2rem; text-align: center; cursor: pointer;
  transition: border-color .2s linear, background .2s linear;
}
.dropzone:hover, .dropzone.sleep { border-color: var(--marine); background: #fff; }
.dropzone strong { font-family: var(--f-display); font-weight: 600; display: block; }
.dropzone small { color: var(--inkt-60); }
.upload-lijst { list-style: none; margin-top: 1rem; display: grid; gap: .5rem; }
.upload-lijst li {
  display: flex; align-items: center; gap: .8rem;
  border: 1px solid var(--lijn); background: #fff;
  padding: .5rem .8rem; font-size: .92rem;
}
.upload-lijst li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.upload-lijst .u-status { margin-left: auto; font-family: var(--f-label); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-60); }
.upload-lijst .u-ok { color: #1d7a4f; }
.upload-lijst .u-fout { color: var(--steen); }
.upload-lijst button {
  border: 0; background: none; cursor: pointer; color: var(--steen);
  font-size: 1.1rem; line-height: 1; padding: .2rem .4rem;
}

.knoop {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--messing); color: var(--diep); border: 0;
  font-family: var(--f-label); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; font-size: .84rem;
  padding: 1.02rem 1.8rem;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: filter .25s linear, transform .35s var(--ease-uit);
}
.knoop:hover { filter: brightness(1.07); transform: translateY(-2px); }
.knoop[disabled] { opacity: .55; cursor: wait; transform: none; }
.stille-link {
  font-family: var(--f-label); font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; font-size: .78rem;
  color: var(--inkt-60); text-decoration: none;
  background: linear-gradient(var(--steen), var(--steen)) left bottom / 100% 1.5px no-repeat;
  padding-bottom: 4px;
}

/* vakantieblok (gevuld door vakantie.js): een patroondeel in de huisstijl,
   met de gestikte messing naad als accent */
.vz-vakantie-blok {
  position: relative;
  background: #fbf9f4;
  border: 1px solid var(--lijn);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: 1.1rem 2.4rem 1.2rem 1.5rem;
  margin: 0 0 clamp(1.4rem, 3vh, 2.2rem);
}
.vz-vakantie-blok::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: repeating-linear-gradient(180deg, var(--messing) 0 7px, transparent 7px 13px);
}
.vz-vakantie-blok .tag { display: block; color: var(--steen); margin-bottom: .3rem; }
.vz-vakantie-blok p { margin: 0; color: var(--inkt); max-width: 72ch; }
.vz-vakantie-blok strong { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; }

/* meldingen */
.melding {
  display: none; margin-bottom: 1.4rem; padding: 1rem 1.2rem;
  border-left: 3px solid var(--steen); background: rgba(178,51,40,.07);
}
.melding.zichtbaar { display: block; }
.succes-paneel { text-align: left; }
.succes-paneel h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.015em;
  margin-bottom: .8rem;
}
.succes-paneel .stiksel-lijn {
  width: 84px; height: 2px; margin-bottom: 1.2rem;
  background: repeating-linear-gradient(90deg, var(--steen) 0 7px, transparent 7px 13px);
}

/* ---------------- infokolom ---------------- */
.info-blok { border-top: 1px solid var(--lijn); padding: 1.1rem 0; }
.info-blok:first-child { border-top: 0; padding-top: 0; }
.info-blok .tag { color: var(--steen); display: block; margin-bottom: .35rem; }
.info-blok a { text-decoration: none; }
.info-blok a:hover { text-decoration: underline; text-decoration-color: var(--steen); text-underline-offset: 4px; }
.info-blok .groot { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; }
.stappen { list-style: none; counter-reset: stap; }
.stappen li {
  counter-increment: stap; position: relative;
  padding: .55rem 0 .55rem 2.6rem; color: var(--inkt-60);
}
.stappen li::before {
  content: "0" counter(stap);
  position: absolute; left: 0; top: .62rem;
  font-family: var(--f-label); font-weight: 500; font-size: .72rem;
  letter-spacing: .1em; color: var(--steen);
}
.tijden div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--lijn);
  font-size: .93rem; color: var(--inkt-60);
}
.tijden div:last-child { border-bottom: 0; }

/* (De voet komt nu 1-op-1 uit de Avada-footer van de site zelf.) */

@media (prefers-reduced-motion: reduce) {
  .vz-scope * { transition: none !important; }
}