/*
 * SEOtomatic content layer (v0.1.27, v0.4 4D).
 *
 * Only on our own articles and pages, only while the customer keeps the
 * layer on (option seotomatic_layout). Nothing here is branded: fonts and
 * colours are inherited from the theme, borders and tints are transparent
 * black so they sit on any background, and every rule is scoped to our own
 * class names, so a theme can restyle any of it. Text is never smaller than
 * the theme's body size and never lightened with opacity: contrast stays
 * whatever the theme chose for its text.
 */

/* ---- the article body: reading width and rhythm ---- */
.seotomatic-content{max-width:72ch;margin-inline:auto;line-height:1.65}
.seotomatic-content>p,.seotomatic-content>ul,.seotomatic-content>ol,.seotomatic-content>table,.seotomatic-content>figure{margin:0 0 1.15em}
.seotomatic-content>h2{margin:1.9em 0 .6em;line-height:1.25}
.seotomatic-content>h3{margin:1.4em 0 .4em;line-height:1.3}
.seotomatic-content ul,.seotomatic-content ol{padding-left:1.4em}
.seotomatic-content li{margin:.3em 0}
.seotomatic-content li>p{margin:0}
.seotomatic-content img{max-width:100%;height:auto}
.seotomatic-content table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;font-size:.97em}
.seotomatic-content th,.seotomatic-content td{padding:.55em .8em;border:1px solid rgba(0,0,0,.14);text-align:left;vertical-align:top}
.seotomatic-content th{background:rgba(0,0,0,.045);font-weight:700}
.seotomatic-content tr:nth-child(even) td{background:rgba(0,0,0,.02)}
.seotomatic-content a:focus-visible{outline:3px solid currentColor;outline-offset:2px;border-radius:4px}

/* ---- the answer block on top (the panel the plugin drew since v0.1.19) ---- */
.seotomatic-answer{margin:0 0 2em;padding:1.1em 1.3em;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:rgba(0,0,0,.025)}
.seotomatic-answer section+section{margin-top:1em}
.seotomatic-answer h2{font-size:1.05em;margin:0 0 .4em}
.seotomatic-answer h3{font-size:1em;margin:.6em 0 .3em}
.seotomatic-answer p,.seotomatic-answer ul,.seotomatic-answer ol{margin:0}
.seotomatic-answer ul,.seotomatic-answer ol{padding-left:1.2em}
.seotomatic-answer-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5em 1.5em}

/* ---- the FAQ: one fold per question ---- */
.seotomatic-faq{margin:2em 0}
.seotomatic-faq>h2{margin:0 0 .7em}
.seotomatic-faq details{border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:0 1.1em;margin:0 0 .6em;background:rgba(0,0,0,.015)}
.seotomatic-faq details[open]{background:rgba(0,0,0,.03)}
.seotomatic-faq summary{cursor:pointer;padding:.8em 2.2em .8em 0;font-weight:600;line-height:1.35;list-style:none;position:relative}
.seotomatic-faq summary::-webkit-details-marker{display:none}
.seotomatic-faq summary::after{content:"+";position:absolute;right:.1em;top:50%;transform:translateY(-50%);font-size:1.35em;line-height:1;font-weight:400}
.seotomatic-faq details[open]>summary::after{content:"\2212"}
.seotomatic-faq summary:focus-visible{outline:3px solid currentColor;outline-offset:2px;border-radius:8px}
.seotomatic-faq details>div{padding:0 0 1em}
.seotomatic-faq details>div>p{margin:0 0 .6em}
.seotomatic-faq details>div>p:last-child{margin-bottom:0}

/* ---- "Lees ook": calm cards instead of a bare list ---- */
.seotomatic-related-block{margin:2.2em 0 0}
.seotomatic-related-block>h2{margin:0 0 .7em}
.seotomatic-related{list-style:none;padding:0;margin:0;display:grid;gap:.7em;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.seotomatic-related li{margin:0}
.seotomatic-related a{display:block;height:100%;padding:.9em 1.1em;border:1px solid rgba(0,0,0,.14);border-radius:12px;text-decoration:none;color:inherit;font-weight:600;line-height:1.35;background:rgba(0,0,0,.015)}
.seotomatic-related a:hover,.seotomatic-related a:focus-visible{border-color:currentColor;background:rgba(0,0,0,.035)}

/* ---- the author card (the inline styles stay for themes that strip classes) ---- */
.seotomatic-author{font-size:.97em}

/* ---- the featured image above our articles, where the theme shows it ---- */
.seotomatic-article .wp-post-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px}

/* ---- the knowledge hub: a card per article ---- */
.seotomatic-hub h2{margin:1.8em 0 .7em}
.seotomatic-cards{list-style:none;margin:0 0 1.6em;padding:0;display:grid;gap:1.1em;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.seotomatic-card{margin:0}
.seotomatic-card-link{display:flex;flex-direction:column;height:100%;border:1px solid rgba(0,0,0,.14);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:rgba(0,0,0,.015);transition:border-color .15s,box-shadow .15s}
.seotomatic-card-link:hover{border-color:currentColor;box-shadow:0 10px 24px -18px rgba(0,0,0,.45)}
.seotomatic-card-link:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.seotomatic-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.seotomatic-card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:.45em;padding:1em 1.1em 1.1em}
.seotomatic-card-title{font-weight:700;font-size:1.08em;line-height:1.3}
.seotomatic-card-summary{line-height:1.5}
.seotomatic-card-date{font-size:.92em;margin-top:auto}

@media (max-width:600px){
  .seotomatic-content{line-height:1.6}
  .seotomatic-cards,.seotomatic-related{grid-template-columns:1fr}
  .seotomatic-answer{padding:1em}
}
@media (prefers-reduced-motion:reduce){
  .seotomatic-card-link{transition:none}
}