/* =========================================================================
   HERO-LIJNTEKENINGEN
   Dunne witte lijntekening links en rechts in de rode hero, per type pagina.
   Het type komt uit de body-class hm-lines-<type> (zie hm_hero_lines_type()
   in functions.php). De tekeningen staan in img/hero-lines/<type>.svg.
   Geldt voor .hm-dienst-hero (dienst- en plaatspagina's) en .page-title
   (standaardpagina's, blog-overzicht, archief). Niet op home en blogposts.
   ========================================================================= */

.hm-lines-seo         { --hm-lines: url("../img/hero-lines/seo.svg"); }
.hm-lines-sge         { --hm-lines: url("../img/hero-lines/sge.svg"); }
.hm-lines-ads         { --hm-lines: url("../img/hero-lines/ads.svg"); }
.hm-lines-shopping    { --hm-lines: url("../img/hero-lines/shopping.svg"); }
.hm-lines-remarketing { --hm-lines: url("../img/hero-lines/remarketing.svg"); }
.hm-lines-web         { --hm-lines: url("../img/hero-lines/web.svg"); }
.hm-lines-social      { --hm-lines: url("../img/hero-lines/social.svg"); }
.hm-lines-content     { --hm-lines: url("../img/hero-lines/content.svg"); }
.hm-lines-tools       { --hm-lines: url("../img/hero-lines/tools.svg"); }
.hm-lines-growth      { --hm-lines: url("../img/hero-lines/growth.svg"); }
.hm-lines-local       { --hm-lines: url("../img/hero-lines/local.svg"); }
.hm-lines-form        { --hm-lines: url("../img/hero-lines/form.svg"); }
.hm-lines-doc         { --hm-lines: url("../img/hero-lines/doc.svg"); }

.hm-has-lines .hm-dienst-hero::before,
body.hm-has-lines:not(.single) .page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--hm-lines), var(--hm-lines);
    background-repeat: no-repeat, no-repeat;
    /* onderaan uitgelijnd, zodat de tekening onder de transparante header blijft */
    background-position: left 3% bottom 7%, right 3% bottom 7%;
    background-size: auto 72%, auto 72%;
    opacity: .16;
}

/* Kenniscentrum (home.php), categorie/archief (archive.php) en zoeken (search.php)
   zetten in hun eigen inline CSS .page-title::before op display:none !important.
   Deze selector is specifieker en zet hem weer aan. */
body.hm-has-lines:not(.single) section.page-title::before {
    display: block !important;
}

/* tekst altijd boven de tekening */
.hm-has-lines .hm-dienst-hero-inner,
.hm-has-lines .page-title .container {
    position: relative;
    z-index: 1;
}

/* Tablet: tekeningen kleiner en iets lichter, zodat ze de tekst niet raken */
@media (max-width: 1199px) {
    .hm-has-lines .hm-dienst-hero::before,
    body.hm-has-lines:not(.single) .page-title::before {
        background-position: left -2% bottom 7%, right -2% bottom 7%;
        background-size: auto 60%, auto 60%;
        opacity: .12;
    }
}

/* Mobiel: één tekening rechts, half buiten beeld */
@media (max-width: 860px) {
    .hm-has-lines .hm-dienst-hero::before,
    body.hm-has-lines:not(.single) .page-title::before {
        background-image: var(--hm-lines);
        background-repeat: no-repeat;
        background-position: right -90px bottom 24px;
        background-size: auto 62%;
        opacity: .10;
    }
}

@media print {
    .hm-has-lines .hm-dienst-hero::before,
    body.hm-has-lines .page-title::before { display: none; }
}