/* =========================================================================
   Vitsch Electronics (ve) theme — responsive reconstruction of the original
   Concrete5 5.4 vitschvpn.nl design.
   Palette: primary blue #009ee0, dark blue #003a62, body #1f1d20, slogan grey
   #cccccc. Fonts: HelveticaMedium / HelveticaNeue55Roman / Arial / Verdana.
   ========================================================================= */

:root {
    --ve-blue: #009ee0;
    --ve-darkblue: #003a62;
    --ve-text: #1f1d20;
    --ve-grey: #808080;
    --ve-line: #dcdcdc;
    --ve-max: 1024px;
    --ve-left: 300px;
    --ve-mid: 700px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #e9edf1;
}

body {
    font: normal 13px/16px Arial, sans-serif;
    color: var(--ve-text);
}

img { border: 0; max-width: 100%; height: auto; }
a { color: #003A61; text-decoration: none; cursor: pointer; }
a:hover { color: var(--ve-blue); }

/* ---- Page shell ---------------------------------------------------------- */
.ve-page-cont {
    width: 100%;
    /* subtle textured backdrop behind the page, as on the original site */
    background: url(../img/pag_rand_links_single.png) repeat;
}
.ve-page {
    max-width: calc(var(--ve-max) + 74px);  /* room for the 37px textured edges */
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    padding: 0 37px;
    /* repeating textured strips down the left and right edges of the page */
    background:
        url(../img/pag_rand_links.png) repeat-y left top,
        url(../img/pag_rand_rechts.png) repeat-y right top,
        #ffffff;
}

/* ---- Left bar: logo + main nav ------------------------------------------ */
.ve-bar-l {
    width: var(--ve-left);
    flex: 0 0 var(--ve-left);
    padding: 14px 0 24px 0;
    display: flex;
    flex-direction: column;
}
.ve-logo { display: block; margin-bottom: 0; }
.ve-logo img { display: block; max-width: none; }   /* natural 284px so the line aligns with the 'h' */

/* menu area: starts BELOW the logo — carries the vertical line and the MENU label */
.ve-menu-area {
    position: relative;
    flex: 1 1 auto;
    /* thin blue vertical line (≈x116) that lines up with the right of the logo 'h' */
    background: url(../img/single_line_onder_menu.png) repeat-y left top;
    padding-top: 2px;
}
/* empty rounded block that sits in the gap BELOW the menu, straddling the line */
.ve-menu-cap {
    position: absolute;
    left: 70px;          /* its centre blue line (img x45) sits on the vertical line x115 */
    top: 175px;
    z-index: 0;
    display: block;
}
.ve-menu-label {
    position: absolute;
    left: 88px;          /* its blue line (img x27-28) lands on the vertical line x115 */
    top: 16px;
    z-index: 1;
    display: block;
}
.ve-mainnav { position: relative; z-index: 1; }
/* "Meer informatie" block — lower and indented to just left of the line */
.ve-vraag { margin: 162px 0 0 85px; z-index: 1; position: relative; }

.ve-nav-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 22px;
    color: var(--ve-blue);
    cursor: pointer;
    padding: 6px 0;
    align-items: center;
    gap: 8px;
}

.ve-mainnav {
    list-style: none;
    margin: 0 0 0 118px;   /* sit just right of the vertical line */
    padding: 0;
}
.ve-menu-item {
    font: 100 12px/16px 'HelveticaNeue55Roman', Arial, sans-serif;
    text-transform: uppercase;
    padding: 1px 0 1px 13px;   /* tight vertical rhythm, like the original */
    position: relative;
}
/* blue arrow before every item (original driehoek images) */
.ve-menu-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background: url(../img/driehoek_inactive_menu.png) no-repeat left center;
}
.ve-menu-item.active::before,
.ve-menu-item:hover::before {
    background-image: url(../img/driehoek_active_menu.png);
}
.ve-menu-item a { color: var(--ve-darkblue); }
.ve-menu-item.active a,
.ve-menu-item a:hover { color: var(--ve-blue); }

/* ---- Middle column ------------------------------------------------------- */
.ve-bar-mid {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--ve-mid);
    padding: 14px 18px 0;
}

/* slogan / date bar */
.ve-txt-boven { min-height: 90px; margin-bottom: 6px; }
.ve-date {
    text-align: right;
    font: normal 11px Verdana, sans-serif;
    color: var(--ve-blue);
}
.ve-slogan p {
    font: normal 22px/26px 'HelveticaMedium', Arial, sans-serif;
    color: #cccccc;
    margin: 6px 0 2px;
}
.ve-slogan-small p {
    font: bold 11px Helvetica, Arial, sans-serif;
    color: var(--ve-grey);
    margin: 0;
}

/* ---- Horizontal sub-nav bar --------------------------------------------- */
.ve-menu-hor {
    display: flex;
    align-items: center;
    /* dark navy bar, as on the original (sampled #003C63 with a lighter top edge) */
    background: linear-gradient(to bottom, #024d74 0%, #003a61 55%, #003a61 100%);
    height: 30px;              /* matches navbalk_ve_logo.png (55x30) so the bar lines up */
    padding: 0;
    margin-bottom: 16px;
    gap: 0;
}
.ve-hor-logo { display: flex; align-items: center; padding: 0; height: 30px; flex: 0 0 auto; }
.ve-hor-logo img { height: 30px; width: auto; display: block; }

.ve-subnav { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; height: 30px; }
.ve-subnav-item a {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 9px;
    color: #ffffff;
    font: 600 13px 'HelveticaMedium', Arial, sans-serif;
    white-space: nowrap;
}
.ve-subnav-item a:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* search — magnifier sits INSIDE the field so the field keeps both rounded corners */
.ve-zoek {
    margin-left: auto;
    margin-right: 8px;         /* keep the field inside the blue bar's right edge */
    position: relative;
    display: flex;
    align-items: center;
}
.ve-zoek-input {
    border: 0; border-radius: 11px;
    height: 21px; width: 130px;
    padding: 0 26px 0 12px;    /* room on the right for the glass */
    font: normal 11px Verdana, sans-serif;
    color: #333;
    background: #fff;
}
.ve-zoek-btn {
    position: absolute; right: 7px; top: 0; bottom: 0; margin: auto 0;
    width: 15px; height: 21px; border: 0; padding: 0; cursor: pointer;
    background: transparent url(../img/zoek_vergrootglas.png) no-repeat center;
}

/* ---- Content ------------------------------------------------------------- */
.ve-central { padding-bottom: 24px; }
.ve-body-boven { margin-bottom: 18px; }
.ve-body { }

.ve-kader {
    border: 1px solid var(--ve-line);
    border-radius: 2px;
    padding: 16px 18px;
    background: #fff;
}

.ve-body h1, .ve-kader h1 {
    font: bold 22px/26px 'HelveticaMedium', Arial, sans-serif;
    color: var(--ve-blue);
    padding: 4px 0;
    margin: 0 0 6px;
}
.ve-body h2, .ve-kader h2 {
    font: 600 12px/14px Arial, sans-serif;
    color: #999999;
    padding: 4px 0;
    margin: 10px 0 4px;
}
.ve-body h3, .ve-kader h3 {
    font: normal 13px/15px Arial, sans-serif;
    color: var(--ve-blue);
    padding: 4px 0;
    margin: 10px 0 4px;
}
.ve-body p, .ve-kader p { margin: 0 0 12px; }
.ve-body ul, .ve-kader ul { margin: 0 0 12px; padding-left: 22px; }
.ve-body li, .ve-kader li { color: var(--ve-text); margin-bottom: 4px; }
.ve-body img { height: auto; }

/* breadcrumbs */
.ve-breadcrumbs {
    font: 600 12px/14px Arial, sans-serif;
    color: #999999;
    margin-bottom: 10px;
}
.ve-breadcrumbs a { color: #999999; }
.ve-breadcrumbs a:hover { color: var(--ve-blue); }
.ve-breadcrumbs .delim { color: #bbb; }

/* ---- Footer -------------------------------------------------------------- */
.ve-footer {
    max-width: calc(var(--ve-max) + 74px);
    margin: 0 auto;
    background: #ffffff;
    border-top: 1px solid #eee;
    padding: 0 37px;
}
.ve-footer-inner {
    padding: 10px 18px 16px;
    text-align: right;
    font: normal 9px Verdana, sans-serif;
    color: var(--ve-grey);
}
.ve-footer-inner a { color: var(--ve-grey); text-decoration: underline; }

/* =========================================================================
   Block: ve_content_around_image
   ========================================================================= */

/* type 2 — big teaser (image + caption box) */
.img_w_teaser {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    max-width: 700px;
}
.img_w_teaser .ve_img { flex: 0 0 auto; max-width: 350px; }
.img_w_teaser .ve_img img { display: block; width: 100%; height: auto; }
.img_w_teaser .ve_cap {
    flex: 1 1 0;
    background: #d0dae6;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.img_w_teaser .ve_cap h1 {
    font: bold 20px/24px 'HelveticaMedium', Arial, sans-serif;
    color: var(--ve-blue);
    margin: 0 0 6px;
}
.img_w_teaser .ve_cap p { margin: 0; color: #1f1d20; }

/* type 1 — product card in a responsive row */
.img_w_caption {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    width: 31%;
    min-width: 180px;
    margin: 0 1% 14px 0;
    border-left: 1px solid var(--ve-line);
    border-right: 1px solid var(--ve-line);
    border-bottom: 2px solid var(--ve-line);
}
.img_w_caption .ve_b img { display: block; width: 100%; height: auto; }
.img_w_caption .ve_m { padding: 8px 10px; flex: 1 1 auto; }
.img_w_caption .ve_m h1 {
    font: 600 16px 'HelveticaMedium', Arial, sans-serif;
    color: var(--ve-blue);
    text-align: center;
    margin: 4px 0 6px;
}
.img_w_caption .ve_m p { font: normal 11px/15px Verdana, sans-serif; color: #1f1d20; margin: 0; }
.img_w_caption .ve_lnk { padding: 6px 10px 10px; }
.img_w_caption .ve_lnk a {
    font: bold 11px Verdana, sans-serif;
    text-decoration: underline;
    color: var(--ve-blue);
}

/* =========================================================================
   Block: ve_blikvanger (eye-catcher / rotator)
   ========================================================================= */
.ve_blikvanger {
    display: flex;
    align-items: stretch;
    margin-bottom: 16px;
    max-width: 700px;
    border-collapse: collapse;
}
.ve_blikvanger .ve_img_l { flex: 0 0 350px; width: 350px; position: relative; }
.ve_blikvanger .ve_img_l img { display: none; width: 100%; height: auto; }
.ve_blikvanger .ve_img_l img.ve_actief { display: block; }
.ve_blikvanger .ve_txt_m {
    flex: 1 1 0;
    background: #a2b6cb;
    color: #fff;
    padding: 16px;
    position: relative;
}
.ve_blikvanger .ve_txt_m > div { display: none; }
.ve_blikvanger .ve_txt_m > div.ve_actief { display: block; }
.ve_blikvanger .ve_txt_m p {
    font: normal 20px/25px 'HelveticaMedium', Arial, sans-serif;
    color: #fff; margin: 0;
}
.ve_blikvanger .ve_lnks { flex: 0 0 150px; width: 150px; display: flex; flex-direction: column; }
.ve_blikvanger .ve_lnk_r {
    flex: 1 1 0;
    background: #7f99b5;
    color: #fff;
    border-bottom: 1px solid #a2b6cb;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font: 600 12px/16px 'HelveticaMedium', Arial, sans-serif;
    text-transform: uppercase;
}
.ve_blikvanger .ve_lnk_r.ve_actief, .ve_blikvanger .ve_lnk_r:hover { background: var(--ve-blue); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
    .ve-page { flex-direction: column; min-height: 0; padding: 0; background: #fff; }
    .ve-footer { padding: 0; }
    .ve-menu-area { background: none; flex: 0 0 auto; padding-top: 0; width: 100%; order: 3; }
    .ve-menu-label { display: none; }
    .ve-bar-l {
        width: 100%;
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid #eee;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: none;                 /* no vertical line on mobile */
    }
    .ve-logo { margin: 0; }
    .ve-logo img { max-width: 100%; max-height: 54px; width: auto; }
    .ve-vraag { display: none; }
    .ve-nav-toggle { display: inline-flex; margin-left: auto; }
    .ve-nav-toggle img { display: none; }
    .ve-mainnav { display: none; width: 100%; order: 3; margin-left: 0; }
    .ve-mainnav.open { display: block; }
    .ve-menu-item { border-bottom: 1px solid #eee; padding: 8px 0 8px 16px; }
    .ve-bar-mid { max-width: none; width: 100%; }
    .img_w_caption { width: 100%; margin-right: 0; min-width: 0; }
}

@media (max-width: 640px) {
    .img_w_teaser { flex-direction: column; }
    .img_w_teaser .ve_img { max-width: none; }
    .ve_blikvanger { flex-direction: column; }
    .ve_blikvanger .ve_img_l { flex: 0 0 auto; width: 100%; max-width: none; }
    .ve_blikvanger .ve_lnks { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .ve_blikvanger .ve_lnk_r { flex: 1 1 45%; }
    .ve-menu-hor { height: auto; min-height: 30px; flex-wrap: wrap; padding: 3px; gap: 4px; }
    .ve-zoek { margin-left: 0; width: 100%; padding: 0; }
    .ve-zoek-input { width: 100%; }
}