/* ATT Kennisbank — matches the ATTComputer dark navy design */

/* ---------- KB home hero: full-width datacenter band (V3, 2026-10-29) ----------
   The old split text/image layout is gone; the photo is the section background. */

/* ---------- hero search (prominent) ---------- */
.att-kb-search.att-kb-search-hero { max-width: 560px; margin: 6px 0 0; }
.att-kb-search.att-kb-search-hero input[type="search"] { padding: 17px 128px 17px 48px; font-size: 17px; border-radius: 999px; }
.att-kb-search.att-kb-search-hero button { right: 8px; padding: 11px 24px; font-size: 15px; border-radius: 999px; }

/* ---------- article title ---------- */
.att-kb-artikel-titel { font-family: Ethnocentric, Manrope, sans-serif; font-weight: 400; color: #0099DD; font-size: 40px; line-height: 1.2; margin: 0 0 14px; }
@media (max-width: 767px) { .att-kb-artikel-titel { font-size: 32px; } }

/* ---------- estimated time chip ---------- */
.att-kb-tijd { display: inline-flex; align-items: center; gap: 7px; background: rgba(0,153,221,0.14); border: 1px solid rgba(0,153,221,0.35);
	color: #0099DD; border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 600; vertical-align: middle; }

/* ---------- numbered steps ---------- */
.att-kb-stap { background: #131C2B; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 22px 24px 18px; margin: 0 0 18px; }
.att-kb-stap-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.att-kb-stap-num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #0099DD; color: #FFFFFF;
	font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.att-kb-stap-title { margin: 0; color: #FFFFFF; font-size: 18px; font-weight: 700; }
.att-kb-stap-body { color: #E5E7EB; font-size: 15.5px; line-height: 1.7; }
.att-kb-stap-body p { margin: 0 0 10px; }
.att-kb-stap-body p:last-child { margin-bottom: 0; }
.att-kb-stap-body strong { color: #FFFFFF; }
.att-kb-marker { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; background: rgba(0,153,221,0.14);
	border: 1px dashed rgba(0,153,221,0.5); color: #7FD4F5; border-radius: 999px; padding: 5px 14px; font-size: 13.5px; font-weight: 600; }
.att-kb-marker i { color: #0099DD; }

/* step screenshots */
.att-kb-stap-fig { margin: 14px 0 0; }
.att-kb-stap-fig img { width: auto; max-width: 720px; height: auto; border-radius: 12px; border: 1px solid rgba(0,153,221,0.30); display: block; cursor: zoom-in; }
.att-kb-stap-fig a { display: block; max-width: 720px; }
.att-kb-stap-fig figcaption { color: #8FA3B8; font-size: 13px; padding-top: 7px; }
.att-kb-stap-placeholder { border: 2px dashed rgba(0,153,221,0.35); border-radius: 12px; background: rgba(0,153,221,0.05); }
.att-kb-stap-ph-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 18px; text-align: center; }
.att-kb-stap-ph-inner i { font-size: 26px; color: rgba(0,153,221,0.6); }
.att-kb-stap-ph-inner span { color: #CBD5E1; font-weight: 700; font-size: 15px; }
.att-kb-stap-ph-inner small { color: #64748B; font-size: 12.5px; max-width: 420px; line-height: 1.5; }

/* step-to-step navigation */
.att-kb-stepnav { display: flex; gap: 18px; margin-top: 14px; }
.att-kb-stepnav a { color: #0099DD; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.att-kb-stepnav a:hover { color: #7FD4F5; }

/* ---------- info / warning blocks ---------- */
.att-kb-note { border-radius: 12px; padding: 14px 18px; margin: 14px 0; font-size: 15px; line-height: 1.6; }
.att-kb-note p { margin: 6px 0 0; color: #E5E7EB; }
.att-kb-note-title { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.att-kb-note-info { background: rgba(0,153,221,0.10); border: 1px solid rgba(0,153,221,0.35); border-left: 4px solid #0099DD; }
.att-kb-note-info .att-kb-note-title { color: #7FD4F5; }
.att-kb-note-warn { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.35); border-left: 4px solid #F59E0B; }
.att-kb-note-warn .att-kb-note-title { color: #FBBF24; }

/* ---------- table of contents ---------- */
.att-kb-toc { background: #131C2B; border: 1px solid rgba(0,153,221,0.30); border-radius: 14px; padding: 18px 22px; margin: 0 0 24px; }
.att-kb-toc strong { color: #FFFFFF; font-size: 15px; display: block; margin-bottom: 8px; }
.att-kb-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.att-kb-toc li { margin: 0 0 6px; }
.att-kb-toc a { color: #CBD5E1; text-decoration: none; font-size: 14.5px; display: flex; gap: 8px; align-items: baseline; }
.att-kb-toc a:hover { color: #0099DD; }
.att-kb-toc-n { color: #0099DD; font-weight: 700; flex: 0 0 18px; }
/* grouped TOC (articles with route="…" steps): one block per route */
.att-kb-toc .att-kb-toc-routes { columns: 1; }
.att-kb-toc .att-kb-toc-route { margin: 0 0 14px; break-inside: avoid; }
.att-kb-toc .att-kb-toc-route:last-child { margin-bottom: 0; }
.att-kb-toc .att-kb-toc-route-title { display: block; color: #7FD4FF; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 6px; }
.att-kb-toc .att-kb-toc-route ol { columns: 1; margin: 0; padding: 0; list-style: none; }
.att-kb-toc .att-kb-toc-route li { margin: 0 0 5px; }

/* ---------- related + feedback ---------- */
.att-kb-gerelateerd { margin: 34px 0 0; }
.att-kb-feedback { background: #1E293B; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 20px 24px; margin: 30px 0 0; }
.att-kb-feedback strong { color: #FFFFFF; font-size: 16px; }
.att-kb-fb-btns { display: flex; gap: 12px; margin-top: 12px; }
.att-kb-fb-btns button { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(0,153,221,0.45);
	color: #E5E7EB; font-family: Manrope, sans-serif; font-weight: 700; font-size: 14px; border-radius: 12px; padding: 9px 18px; cursor: pointer; transition: background .2s, border-color .2s; }
.att-kb-fb-btns button:hover { background: rgba(0,153,221,0.12); border-color: #0099DD; }
.att-kb-fb-msg { color: #7FD4F5; font-size: 15px; margin: 10px 0 0; }

/* ---------- lightbox ---------- */
.att-kb-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(2,8,20,0.92); display: flex; flex-direction: column;
	align-items: center; justify-content: center; padding: 30px; }
.att-kb-lightbox[hidden] { display: none; }
.att-kb-lightbox img { max-width: min(1100px, 94vw); max-height: 82vh; width: auto; height: auto; border-radius: 10px; border: 1px solid rgba(0,153,221,0.4); }
.att-kb-lb-cap { color: #CBD5E1; font-size: 14px; margin-top: 12px; }
.att-kb-lb-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08); color: #FFFFFF; font-size: 22px; cursor: pointer; line-height: 1; }
.att-kb-lb-close:hover { background: rgba(0,153,221,0.3); border-color: #0099DD; }

/* keyboard focus visibility */
.att-kb-page a:focus-visible, .att-kb-page button:focus-visible, .att-kb-page input:focus-visible,
.att-kb-lightbox button:focus-visible { outline: 2px solid #0099DD; outline-offset: 2px; }

@media (max-width: 767px) {
	.att-kb-toc ol { columns: 1; }
	.att-kb-stap { padding: 18px 16px 14px; }
	.att-kb-stap-fig a, .att-kb-stap-fig img { max-width: 100%; }
}


.att-kb-page { background: #0B1522; min-height: 60vh; padding: 60px 15px 80px; font-family: Manrope, sans-serif; }
.att-kb-page * { box-sizing: border-box; }
.att-kb-box { max-width: 1140px; margin: 0 auto; }
.att-kb-inner { max-width: 1140px; margin: 0 auto; }
.att-kb-article { max-width: 860px; }

/* ---------- breadcrumbs ---------- */
.att-kb-crumbs { font-size: 14px; margin: 0 0 22px; color: #8FA3B8; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.att-kb-crumbs a { color: #8FA3B8; text-decoration: none; }
.att-kb-crumbs a:hover { color: #0099DD; }
.att-kb-crumb-current { color: #0099DD; font-weight: 600; }
.att-kb-crumb-sep { color: #334155; }

/* ---------- titles / meta ---------- */
.att-kb-title { font-family: Ethnocentric, Manrope, sans-serif; font-weight: 400; color: #0099DD; font-size: 40px; line-height: 1.2; margin: 0 0 14px; }
.att-kb-h2 { font-family: Ethnocentric, Manrope, sans-serif; font-weight: 400; color: #FFFFFF; font-size: 28px; margin: 34px 0 16px; }
.att-kb-meta { display: flex; gap: 14px; align-items: center; margin: 0 0 22px; font-size: 14px; color: #8FA3B8; flex-wrap: wrap; }
.att-kb-meta-cat { background: rgba(0,153,221,0.14); border: 1px solid rgba(0,153,221,0.35); color: #0099DD; border-radius: 999px; padding: 3px 12px; font-weight: 600; }
.att-kb-intro, .att-kb-intro p { font-size: 18px; line-height: 1.65; color: #F1F5F9; margin: 0 0 26px; }
.att-kb-intro p { margin: 0 0 10px; }
.att-kb-intro p:last-child { margin-bottom: 0; }

/* ---------- content ---------- */
.att-kb-content { color: #E5E7EB; font-size: 16px; line-height: 1.7; }
.att-kb-content h2 { color: #FFFFFF; font-size: 24px; font-weight: 700; margin: 30px 0 12px; }
.att-kb-content h3 { color: #FFFFFF; font-size: 19px; font-weight: 700; margin: 24px 0 10px; }
.att-kb-content p { margin: 0 0 14px; }
.att-kb-content a { color: #0099DD; }
.att-kb-content ol { counter-reset: attkb; list-style: none; margin: 6px 0 18px; padding: 0; }
.att-kb-content ol > li { counter-increment: attkb; position: relative; padding: 0 0 12px 46px; }
.att-kb-content ol > li::before { content: counter(attkb); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 8px;
	background: rgba(0,153,221,0.14); border: 1px solid rgba(0,153,221,0.35); color: #0099DD; font-weight: 700; font-size: 14px;
	display: flex; align-items: center; justify-content: center; }
.att-kb-content ul { list-style: none; margin: 6px 0 18px; padding: 0; }
.att-kb-content ul > li { position: relative; padding: 0 0 10px 26px; }
.att-kb-content ul > li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #0099DD; }
.att-kb-content img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(0,153,221,0.30); }
.att-kb-content figure { margin: 0 0 18px; }
.att-kb-content figcaption { color: #8FA3B8; font-size: 14px; padding-top: 8px; }
.att-kb-content iframe, .att-kb-content .wp-block-embed { max-width: 100%; }
.att-kb-content strong { color: #FFFFFF; }

/* ---------- support box ---------- */
.att-kb-support { background: #1E293B; border: 1px solid rgba(0,153,221,0.30); border-radius: 14px; padding: 26px 26px 24px; margin: 40px 0 0; }
.att-kb-support h2 { color: #FFFFFF; font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.att-kb-support p { color: #E5E7EB; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.att-kb-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.att-kb-btn, .att-kb-search button { display: inline-block; background: #0085FF; color: #FFFFFF; font-family: Manrope, sans-serif; font-weight: 700;
	font-size: 15px; border-radius: 15px; padding: 13px 26px; text-decoration: none; border: none; cursor: pointer; transition: background .2s; }
.att-kb-btn:hover, .att-kb-search button:hover { background: #007BB5; color: #FFFFFF; }
.att-kb-btn-ghost { background: transparent; border: 1px solid rgba(0,153,221,0.45); color: #E5E7EB; }
.att-kb-btn-ghost:hover { background: rgba(0,153,221,0.12); border-color: #0099DD; }

/* ---------- search form ---------- */
.att-kb-search { position: relative; display: flex; align-items: center; max-width: 760px; margin: 0 0 8px; }
.att-kb-search-icon { position: absolute; left: 18px; color: #0099DD; font-size: 17px; pointer-events: none; }
.att-kb-search input[type="search"] { width: 100%; background: #111827; border: 1px solid rgba(0,153,221,0.35); border-radius: 14px;
	color: #E5E7EB; font-family: Manrope, sans-serif; font-size: 16px; padding: 15px 118px 15px 46px; outline: none; }
.att-kb-search input[type="search"]::placeholder { color: #64748B; }
.att-kb-search input[type="search"]:focus { border-color: #0099DD; box-shadow: 0 0 0 3px rgba(0,153,221,0.15); }
.att-kb-search button { position: absolute; right: 7px; padding: 10px 20px; font-size: 14px; }

/* ---------- category cards ---------- */
.att-kb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0 0; }
.att-kb-cat { display: flex; gap: 16px; align-items: flex-start; background: #1E293B; border: 1px solid rgba(0,153,221,0.30);
	border-radius: 14px; padding: 22px 20px; text-decoration: none; transition: border-color .2s, transform .2s; }
.att-kb-cat:hover { border-color: #0099DD; transform: translateY(-2px); }
.att-kb-chip { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; background: rgba(0,153,221,0.14);
	border: 1px solid rgba(0,153,221,0.35); display: flex; align-items: center; justify-content: center; }
.att-kb-chip i { color: #0099DD; font-size: 24px; }
.att-kb-chip .att-kb-ico { width: 24px; height: 24px; color: #0099DD; }
.att-kb-cat-main { display: flex; flex-direction: column; gap: 4px; }
.att-kb-cat-name { color: #FFFFFF; font-weight: 700; font-size: 18px; line-height: 1.3; }
.att-kb-cat-desc { color: #C9D3DC; font-size: 14px; line-height: 1.5; }
.att-kb-cat-link { color: #0099DD; font-size: 14px; font-weight: 700; margin-top: 4px; }

/* ---------- article entries ---------- */
.att-kb-recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 26px 0 0; }
.att-kb-list { margin-top: 10px; }
.att-kb-entry { display: flex; align-items: center; gap: 14px; background: #1E293B; border: 1px solid rgba(0,153,221,0.30);
	border-radius: 12px; padding: 16px 18px; text-decoration: none; transition: border-color .2s, transform .2s; }
.att-kb-entry:hover { border-color: #0099DD; transform: translateY(-2px); }
.att-kb-entry-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: rgba(0,153,221,0.14);
	border: 1px solid rgba(0,153,221,0.35); display: flex; align-items: center; justify-content: center; }
.att-kb-entry-icon i { color: #0099DD; font-size: 17px; }
.att-kb-entry-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.att-kb-entry-title { color: #FFFFFF; font-weight: 700; font-size: 16px; line-height: 1.35; }
.att-kb-entry-cat { color: #8FA3B8; font-size: 13px; }
.att-kb-entry-arrow { color: #0099DD; font-size: 15px; }

.att-kb-empty { color: #E5E7EB; font-size: 16px; margin: 20px 0 0; }
.att-kb-empty a { color: #0099DD; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.att-kb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 767px) {
	.att-kb-page { padding: 40px 16px 60px; }
	.att-kb-title { font-size: 32px; }
	.att-kb-cats, .att-kb-recent { grid-template-columns: 1fr; gap: 14px; }
	.att-kb-search input[type="search"] { padding-right: 96px; }
	.att-kb-btn, .att-kb-search button { width: 100%; text-align: center; }
	.att-kb-search { flex-direction: column; gap: 10px; }
	.att-kb-search-icon { top: 17px; }
	.att-kb-search button { position: static; }
}


/* ============================================================
   ATT-KB-HERO-V3 — full-width datacenter hero (2026-10-29)
   Photo = section background (racks right, dark left), dark navy
   gradients for readability + fade into the #111827 band below.
   Scoped to page 177 only.
   ============================================================ */
.elementor-177 .elementor-element.elementor-element-bca615e{
	background-color:#0B1522 !important;
	background-image:
		linear-gradient(180deg, rgba(8,14,24,.82) 0px, rgba(8,14,24,.58) 78px, rgba(8,14,24,0) 200px),
		linear-gradient(180deg, rgba(17,24,39,0) calc(100% - 130px), rgba(17,24,39,.90) calc(100% - 34px), #111827 calc(100% - 12px)),
		linear-gradient(90deg, #0B1522 0%, #0B1522 32%, rgba(11,21,34,.96) 44%, rgba(11,21,34,.72) 57%, rgba(11,21,34,.28) 73%, rgba(11,21,34,.08) 88%, rgba(11,21,34,0) 100%),
		url("https://seo.attcloudhub.com/wp-content/uploads/2026/10/hero-kennisbank-moderne-werkplek.webp") !important;
	background-size:auto, auto, auto, cover !important;
	background-position:center top, center bottom, center center, right center !important;
	background-repeat:no-repeat !important;
}

/* content column: full-width band, text on the 1140 grid.
   NOTE: padding lives in Elementor (row 947624a) and is applied to .e-con-inner —
   do not also set padding here or it doubles. */
.elementor-177 .att-kb-hero-row{
	width:100% !important;
	max-width:1140px !important;
	margin:0 auto !important;
}
.elementor-177 .att-kb-hero-row > .e-con-inner{
	flex-direction:column !important;
	align-items:flex-start !important;
	gap:0 !important;
}
.elementor-177 .att-kb-hero-row > .e-con-inner > .e-con{
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
}

/* text column: kill the 16px widget gap so the margins below control the rhythm */
.elementor-177 .elementor-element.elementor-element-6d3288a{
	gap:0 !important;
}

/* KENNISBANK heading — ATTComputer display typography */
.elementor-177 .elementor-element.elementor-element-05b216f .elementor-heading-title{
	font-family:Ethnocentric, Manrope, sans-serif !important;
	font-size:64px !important;
	font-weight:400 !important;
	line-height:1.05 !important;
	letter-spacing:.01em !important;
	text-transform:uppercase !important;
	color:#FFFFFF !important;
	margin:0 0 16px !important;
	text-shadow:0 4px 30px rgba(0,0,0,.50) !important;
}

/* subtitle */
.elementor-177 .elementor-element.elementor-element-9a333f7 p{
	font-family:Manrope, sans-serif !important;
	font-size:18px !important;
	line-height:1.65 !important;
	color:rgba(255,255,255,.84) !important;
	margin:0 0 20px !important;
	max-width:560px;
}

/* hero search */
.elementor-177 .att-kb-search.att-kb-search-hero{max-width:560px !important;margin:0 !important}
.elementor-177 .att-kb-search.att-kb-search-hero input[type="search"]{
	background:rgba(17,24,39,.88) !important;
	border-color:rgba(0,153,221,.45) !important;
	box-shadow:0 8px 28px rgba(0,0,0,.35) !important;
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
}

@media(max-width:1024px){
	.elementor-177 .elementor-element.elementor-element-bca615e{
		background-image:
			linear-gradient(180deg, rgba(8,14,24,.90) 0px, rgba(8,14,24,.78) 62px, rgba(8,14,24,.45) 150px, rgba(8,14,24,0) 220px),
			linear-gradient(180deg, rgba(17,24,39,0) calc(100% - 110px), rgba(17,24,39,.92) calc(100% - 30px), #111827 calc(100% - 10px)),
			linear-gradient(90deg, rgba(11,21,34,.93) 0%, rgba(11,21,34,.84) 50%, rgba(11,21,34,.58) 100%),
			url("https://seo.attcloudhub.com/wp-content/uploads/2026/10/hero-kennisbank-moderne-werkplek.webp") !important;
		background-position:center top, center bottom, center center, 72% center !important;
	}
	.elementor-177 .elementor-element.elementor-element-05b216f .elementor-heading-title{font-size:48px !important}
	.elementor-177 .elementor-element.elementor-element-9a333f7 p{font-size:16px !important;margin:0 0 16px !important}
}

@media(max-width:767px){
	.elementor-177 .elementor-element.elementor-element-05b216f .elementor-heading-title{
		font-size:40px !important;
		line-height:1.10 !important;
		margin:0 0 12px !important;
	}
	.elementor-177 .elementor-element.elementor-element-9a333f7 p{margin:0 0 16px !important}
	.elementor-177 .att-kb-search.att-kb-search-hero{max-width:100% !important}
}

/* anchor offset: html already has scroll-padding-top (122px) for the sticky header — do not add scroll-margin here or it doubles */

/* ---------- inline SVG icons (no icon-font dependency) ---------- */
.att-kb-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: 0 0 auto; }
.att-kb-entry-icon .att-kb-ico { width: 20px; height: 20px; color: #0099DD; }
.att-kb-entry-arrow .att-kb-ico { width: 18px; height: 18px; }
.att-kb-search-icon.att-kb-ico { width: 17px; height: 17px; }
.att-kb-note-title .att-kb-ico, .att-kb-marker .att-kb-ico, .att-kb-tijd .att-kb-ico { width: 15px; height: 15px; }
.att-kb-fb-btns .att-kb-ico { width: 14px; height: 14px; }
.att-kb-stap-ph-inner .att-kb-ico { width: 34px; height: 34px; }