/*
 * custom-modern.css  -  SeoSos custom reskin (v1)
 * Laadt NA custom.css en herdefinieert alleen de bovenlaag.
 * Niets in de structuur of het rapport verandert; dit is puur uiterlijk.
 * Tijdelijk uitzetten? Haal de <link> naar dit bestand uit header.php.
 */

:root{
  --ss-primary:#1366d6;
  --ss-primary-dark:#0d4fa6;
  --ss-primary-50:#eaf2fd;
  --ss-primary-100:#d4e6fb;

  --ss-ink:#16202c;
  --ss-muted:#5a6b7b;
  --ss-faint:#8a98a6;

  --ss-line:#e4e8ee;
  --ss-line-soft:#eef1f5;
  --ss-bg:#f5f7fa;
  --ss-card:#ffffff;

  --ss-success:#1f9d6b; --ss-success-bg:#e7f6ef;
  --ss-warning:#c98a00; --ss-warning-bg:#fbf2dd;
  --ss-danger:#df3b41;  --ss-danger-bg:#fdeced;

  --ss-r:12px; --ss-r-sm:8px; --ss-pill:999px;
  --ss-shadow:0 1px 2px rgba(20,28,40,.05),0 2px 10px rgba(20,28,40,.06);
  --ss-shadow-sm:0 1px 2px rgba(20,28,40,.06);
  --ss-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* ---------- Basis & typografie ---------- */
body{
  font-family:var(--ss-font);
  color:var(--ss-ink);
  background:var(--ss-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.005em;
}
h1,h2,h3,h4,h5{ font-family:var(--ss-font); color:var(--ss-ink); font-weight:600; letter-spacing:-.01em; }
h1{ font-size:30px; line-height:1.2; }
h2{ font-size:24px; line-height:1.25; }
h3{ font-size:20px; }
p{ line-height:1.65; }
a{ color:var(--ss-primary); transition:color .12s ease; }
a:hover,a:focus{ color:var(--ss-primary-dark); text-decoration:none; }
hr{ border-top:1px solid var(--ss-line); }

:focus-visible{ outline:2px solid var(--ss-primary); outline-offset:2px; }

/* ---------- Navbar ---------- */
.wrapper-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--ss-line);
  box-shadow:none;
}
.main-header,.container.main-header{ padding-top:10px; padding-bottom:10px; }
.main-nav a,.desktop-nav a{
  color:var(--ss-ink); font-weight:500; border-radius:var(--ss-r-sm);
  transition:background .12s ease,color .12s ease;
}
.main-nav a:hover,.desktop-nav a:hover{ color:var(--ss-primary); background:var(--ss-primary-50); }
.submenu,.wrapper-submenu,.dropdown-menu{
  border:1px solid var(--ss-line); border-radius:var(--ss-r); box-shadow:var(--ss-shadow); overflow:hidden;
}

/* ---------- Knoppen (alle varianten samengetrokken) ---------- */
.btn{
  border-radius:var(--ss-r-sm);
  font-weight:600;
  border:1px solid transparent;
  padding:9px 18px;
  box-shadow:none;
  transition:background .14s ease,border-color .14s ease,transform .04s ease,box-shadow .14s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:6px 13px; font-size:13px; border-radius:var(--ss-r-sm); }
.btn-xs{ padding:3px 9px; font-size:12px; }
.btn-lg{ padding:13px 26px; font-size:16px; }

.btn-primary,.btn-info,.btn-blue,.btn-send,.btn-fill,
.btn-primary:focus,.btn-info:focus,.btn-blue:focus{
  background:var(--ss-primary); border-color:var(--ss-primary); color:#fff;
}
.btn-primary:hover,.btn-info:hover,.btn-blue:hover,.btn-send:hover,.btn-fill:hover,
.btn-primary:active,.btn-info:active,.btn-blue:active,
.open>.dropdown-toggle.btn-primary,.open>.dropdown-toggle.btn-info{
  background:var(--ss-primary-dark); border-color:var(--ss-primary-dark); color:#fff;
}
.btn-primary:focus-visible,.btn-info:focus-visible{ box-shadow:0 0 0 3px var(--ss-primary-100); }

.btn-success,.btn-green,.btn-lgreen,.btn-success:focus{
  background:var(--ss-success); border-color:var(--ss-success); color:#fff;
}
.btn-success:hover,.btn-green:hover,.btn-lgreen:hover,.btn-success:active{ background:#178055; border-color:#178055; }

.btn-danger,.btn-red,.btn-danger:focus{ background:var(--ss-danger); border-color:var(--ss-danger); color:#fff; }
.btn-danger:hover,.btn-red:hover,.btn-danger:active{ background:#c62f34; border-color:#c62f34; }

.btn-violet{ background:#6b46c1; border-color:#6b46c1; color:#fff; }
.btn-violet:hover{ background:#5a39a6; border-color:#5a39a6; }

.btn-default,.btn-light,.btn-default:focus,.btn-light:focus{
  background:#fff; border-color:var(--ss-line); color:var(--ss-ink);
}
.btn-default:hover,.btn-light:hover,.btn-default:active{ background:var(--ss-bg); border-color:#d3d9e2; color:var(--ss-ink); }

/* ---------- Formulieren & inputs ---------- */
.form-control,input[type="text"],input[type="email"],input[type="url"],input[type="search"],input[type="password"],textarea,select{
  border:1px solid var(--ss-line);
  border-radius:var(--ss-r-sm);
  box-shadow:none;
  color:var(--ss-ink);
  transition:border-color .12s ease,box-shadow .12s ease;
}
.form-control:focus,input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,textarea:focus,select:focus{
  border-color:var(--ss-primary);
  box-shadow:0 0 0 3px var(--ss-primary-100);
  outline:none;
}
::placeholder{ color:var(--ss-faint); }

/* ---------- Kaarten / panelen ---------- */
.panel,.well,.box,.card{
  background:var(--ss-card);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-r);
  box-shadow:var(--ss-shadow-sm);
}
.panel-heading{ background:transparent; border-bottom:1px solid var(--ss-line); font-weight:600; }

/* ---------- Homepage hero / feature-rijen ---------- */
#mcontent .h3.main h3,#mcontent .h3 h3.main,h3.main{
  font-weight:600; letter-spacing:-.01em; color:var(--ss-ink);
}
h4.main{ color:var(--ss-muted); font-weight:400; }
.checkmark{ width:22px; height:22px; }
.ul-ok{ list-style:none; padding-left:0; }
.ul-ok li{ position:relative; padding-left:28px; margin-bottom:9px; line-height:1.5; color:var(--ss-ink); }
.ul-ok li:before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:var(--ss-pill);
  background:var(--ss-success-bg);
}
.ul-ok li:after{
  content:""; position:absolute; left:6px; top:7px; width:5px; height:9px;
  border:solid var(--ss-success); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* De zoek/analyse-balk op de homepage */
.searchBox,.urlBox,form .input-group{ box-shadow:none; }
.input-group .form-control{ height:48px; font-size:16px; }
.input-group-btn .btn{ height:48px; }

/* ---------- SEO-rapport: scorebord ---------- */
#scoreBoard{
  background:var(--ss-card);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-r);
  box-shadow:var(--ss-shadow);
  padding:22px;
  margin-top:18px;
}
.reviewerurl .mainLink{ font-size:19px; font-weight:600; color:var(--ss-ink); }
.reviewerurl .mainLink:hover{ color:var(--ss-primary); }
.timeBox time{ color:var(--ss-faint); font-size:13px; }

/* Score-labels als nette chips */
.progressBox{ margin-bottom:14px; }
.scoreProgress-label{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; font-size:13px; padding:3px 11px; border-radius:var(--ss-pill);
  margin-bottom:6px;
}
.scoreProgress-label.passedBox{ background:var(--ss-success-bg); color:var(--ss-success); }
.scoreProgress-label.improveBox{ background:var(--ss-warning-bg); color:var(--ss-warning); }
.scoreProgress-label.errorBox{ background:var(--ss-danger-bg); color:var(--ss-danger); }

/* Slanke, afgeronde voortgangsbalken */
.scoreProgress{ background:var(--ss-line-soft); border-radius:var(--ss-pill); height:8px; overflow:hidden; }
.scoreProgress-xs{ height:8px; }
.scoreProgress-bar{ border-radius:var(--ss-pill); transition:width .6s cubic-bezier(.4,0,.2,1); }
.scoreProgress-success .scoreProgress-bar{ background:var(--ss-success); }
.scoreProgress-warning .scoreProgress-bar{ background:var(--ss-warning); }
.scoreProgress-danger .scoreProgress-bar{ background:var(--ss-danger); }
.scoreProgress-value{ color:#fff; font-size:11px; font-weight:600; }

/* Overall-score ring */
.circleBox .second.circle strong#overallscore{ color:var(--ss-ink); font-weight:700; }
#overallscore .newI{ color:var(--ss-muted); font-weight:500; font-style:normal; font-size:12px; display:block; }

/* Screenshot-box */
.screenBox #screenshot{ border:1px solid var(--ss-line); border-radius:var(--ss-r-sm); overflow:hidden; background:var(--ss-bg); }

/* ---------- SEO-check kaarten ---------- */
.seoBox{
  background:var(--ss-card);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-r);
  box-shadow:var(--ss-shadow-sm);
  padding:18px 20px;
  margin-bottom:16px;
  transition:box-shadow .15s ease,border-color .15s ease;
}
.seoBox:hover{ box-shadow:var(--ss-shadow); border-color:#d6dde6; }
.seoBox-title{
  font-weight:600; font-size:15px; color:var(--ss-ink);
  border-bottom:1px solid var(--ss-line-soft); padding-bottom:10px; margin-bottom:12px;
}

/* Status-blokken binnen een check (passed/improve/error) */
.alert{ border:1px solid transparent; border-radius:var(--ss-r-sm); box-shadow:none; padding:12px 14px; }
.alert-success,.passedBox.alert,.msgGreen{ background:var(--ss-success-bg); border-color:#cdebda; color:#15734e; }
.alert-warning,.improveBox.alert,.msgYellow{ background:var(--ss-warning-bg); border-color:#f0e0b3; color:#946400; }
.alert-error,.alert-danger,.errorBox.alert,.msgRed{ background:var(--ss-danger-bg); border-color:#f6cdcf; color:#b22a2f; }
.alert-icon{ opacity:.9; }

/* ---------- Labels / badges ---------- */
.label,.badge{ font-weight:600; border-radius:var(--ss-r-sm); padding:.25em .6em; }
.label-success,.badge-success{ background:var(--ss-success); }
.label-warning,.badge-warning{ background:var(--ss-warning); }
.label-danger,.badge-danger{ background:var(--ss-danger); }
.label-info,.label-primary,.badge-info{ background:var(--ss-primary); }

/* ---------- Tabellen ---------- */
.table{ border-radius:var(--ss-r); overflow:hidden; }
.table>thead>tr>th{ border-bottom:1px solid var(--ss-line); color:var(--ss-muted); font-weight:600; text-transform:none; }
.table>tbody>tr>td{ border-top:1px solid var(--ss-line-soft); }
.table-striped>tbody>tr:nth-of-type(odd){ background:var(--ss-bg); }

/* ---------- Footer ---------- */
footer,.footer{ background:#0f1b27; color:#aeb9c4; border-top:none; }
.footer-title{ color:#fff; font-weight:600; letter-spacing:.01em; }
.footer-about{ color:#9aa6b2; line-height:1.6; }
.contact-info a,footer a{ color:#cdd6df; }
.contact-info a:hover,footer a:hover{ color:#fff; }
.copyright{ color:#7d8a96; border-top:1px solid rgba(255,255,255,.08); }
.connect{ border-radius:var(--ss-r-sm); }

/* ---------- Kleine polish ---------- */
::selection{ background:var(--ss-primary-100); }
.text-primary{ color:var(--ss-primary) !important; }
.bg-primary{ background:var(--ss-primary) !important; }
img{ max-width:100%; }

/* ---------- Homepage hero (headturbo) ---------- */
.headturbo .texture-overlay{ display:none; }
.headturbo-img{ display:none; }
#headturbo-wrap,.headturbo-wrap{
  background:linear-gradient(135deg,#0b3f86 0%,#1366d6 100%);
  position:relative; overflow:hidden; border:0; box-shadow:none;
}
#headturbo-wrap:after{
  content:""; position:absolute; top:-130px; right:-90px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.headturbo-content{ padding:64px 16px 72px; position:relative; z-index:1; }
.headturbo-content h1,.headturbo-content h1.pulse{
  color:#fff; font-weight:700; font-size:40px; line-height:1.15; letter-spacing:-.02em;
  margin:0 0 14px; animation:none;
}
.headturbo-content h2{
  color:rgba(255,255,255,.82); font-weight:400; font-size:19px; line-height:1.5;
  max-width:620px; margin:0 auto 30px;
}

/* Zoek/analyse-balk: groot, centraal, witte pill met schaduw */
.turboform{ max-width:640px; margin:0 auto; }
.input-group.review{
  box-shadow:0 10px 30px rgba(8,24,52,.18); border-radius:14px; background:#fff;
}
.input-group.review #checkform,.review .form-control{
  height:60px; font-size:17px; padding:0 20px; border:0; background:#fff;
  border-radius:14px 0 0 14px; box-shadow:none; color:var(--ss-ink);
}
.input-group.review #checkform:focus,.review .form-control:focus{ box-shadow:none; }
.input-group.review .input-group-btn .btn,.review #review-btn{
  height:60px; padding:0 28px; font-size:16px; font-weight:600;
  border-radius:0 14px 14px 0; background:var(--ss-success); border-color:var(--ss-success); color:#fff;
}
.review #review-btn:hover,.review #review-btn:focus{ background:#178055; border-color:#178055; }
.review #review-btn .buttext{ letter-spacing:.02em; }

/* ---------- Binnenpagina-koptekst (niet-homepage) ----------
   Strakke blauwe band in dezelfde stijl als de hero. De ruimte boven
   (padding-top) cleart de vaste navbar; de paginatitel staat in wit.
   Dit vervangt het lege witte blok dat hier eerst stond. */
.bg-primary-color.page-block{
  background:linear-gradient(135deg,#0b3f86 0%,#1366d6 100%);
  color:#fff; border:0; box-shadow:none;
  padding:118px 0 34px;
}
.bg-primary-color.page-block .pageTitle{ color:#fff; font-weight:600; letter-spacing:-.01em; margin:0; }

@media (max-width:768px){
  .bg-primary-color.page-block{ padding:96px 0 26px; }
}

/* ---------- Feature-rijen wat meer lucht ---------- */
#mcontent .row{ margin-top:8px; }
#mcontent .col-md-6 p{ color:var(--ss-muted); }
.margin-top-40{ margin-top:32px !important; }

@media (max-width:768px){
  .headturbo-content{ padding:44px 14px 50px; }
  .headturbo-content h1,.headturbo-content h1.pulse{ font-size:30px; }
  .headturbo-content h2{ font-size:16px; }
  .input-group.review #checkform,.review .form-control,
  .input-group.review .input-group-btn .btn,.review #review-btn{ height:54px; }
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}