/*
Theme Name: Seo-analyse
Template: hello-elementor
Version: 1.0.0
Text Domain: seo-analyse
*/

:root {
	--brand-navy: #16233F;
	--brand-navy-soft: #1E2C4C;
	--brand-gold: #DFA62E;
	--brand-gold-dark: #C68F1E;
	--brand-gold-soft: #F4E1B9;
	--brand-white: #FFFFFF;
	--brand-bg-alt: #EDF1F5;
	--brand-text: #4A5367;
	--brand-text-muted: #5A6375;
	--brand-invert: #FFFFFF;
	--brand-invert-soft: #CCD4E3;
	--brand-invert-muted: #B6BFD5;
	--brand-line: #D4DAE2;
	--brand-line-invert: rgba(255, 255, 255, .12);

	--space-xs: .5rem;
	--space-sm: .75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;

	--arm: 16px;
	--thick: 3px;
}

body { color: var(--brand-text); background: var(--brand-white); }

h1, h2, h3, h4, h5, h6 { color: var(--brand-navy); line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.15rem); line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
h4 { font-size: clamp(1rem, .95rem + .3vw, 1.12rem); }
p  { line-height: 1.75; }
p:last-child { margin-bottom: 0; }

/* ---------- global vertical rhythm ---------- */
.section > .e-con-inner,
.section { padding-block: clamp(3rem, 1.9rem + 4.4vw, 6rem); }
.section { padding-block: 0; }
.section--sm > .e-con-inner { padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }

/* ---------- gold rule under every section heading ---------- */
.rule-gold { position: relative; padding-bottom: var(--space-md); }
.rule-gold::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 46px; height: 3px; background: var(--brand-gold);
}
.lede p { color: var(--brand-text-muted); max-width: 62ch; }

/* ---------- corner bracket motif ---------- */
.bracket {
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold));
	background-size: var(--arm) var(--thick), var(--thick) var(--arm),
		var(--arm) var(--thick), var(--thick) var(--arm);
	background-position: left bottom, left bottom, right bottom, right bottom;
}
.corner-frame { position: relative; }
.corner-frame::before {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold)),
		linear-gradient(var(--brand-gold), var(--brand-gold));
	background-size:
		var(--arm) var(--thick), var(--thick) var(--arm),
		var(--arm) var(--thick), var(--thick) var(--arm),
		var(--arm) var(--thick), var(--thick) var(--arm),
		var(--arm) var(--thick), var(--thick) var(--arm);
	background-position:
		left top, left top, right top, right top,
		left bottom, left bottom, right bottom, right bottom;
}

/* ---------- cards ---------- */
.card {
	background-color: var(--brand-white);
	border: 1px solid var(--brand-line);
	border-top: 3px solid var(--brand-gold);
}
.card-plain { background-color: var(--brand-white); border: 1px solid var(--brand-line); }

/* the 2 x 2 grid frame with the gold diamond in the middle */
.grid-frame { position: relative; }
.grid-frame::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
	background: var(--brand-gold); transform: rotate(45deg);
}
@media (max-width: 767px) { .grid-frame::after { display: none; } }

/* ---------- hero ---------- */
.hero-dots { position: relative; isolation: isolate; }
.hero-dots > .e-con-inner { position: relative; z-index: 1; }
.hero-dots::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px);
	background-size: 26px 26px; pointer-events: none;
}
.hero-mark { position: relative; padding-left: 80px; }
.hero-mark::before {
	content: ""; position: absolute; left: 0; top: -.02em;
	width: 58px; height: 58px;
	background: url(https://seo-analyse.nl/wp-content/uploads/2026/08/icon-mark.png) no-repeat center / contain;
}
.hero-mark::after { display: none; }
.hero-body p { color: var(--brand-invert-soft); max-width: 66ch; }
.hero-ticks .elementor-icon-list-text { color: var(--brand-invert); font-size: .97rem; }
@media (max-width: 767px) {
	.hero-mark { padding-left: 0; }
	.hero-mark::before { display: none; }
	.hero-ticks .elementor-icon-list-items { gap: 6px 22px; }
}

.btn-ghost .elementor-button { backdrop-filter: none; }

/* ---------- the five SEO elements ---------- */
.el-row { border-top: 1px solid var(--brand-line); }
.el-row:last-of-type { border-bottom: 1px solid var(--brand-line); }
.el-num .elementor-heading-title {
	position: relative; color: var(--brand-gold); font-size: 1.45rem;
	font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 14px;
}
.el-num .elementor-heading-title::before {
	content: ""; position: absolute; left: 0; top: 0;
	width: 22px; height: 2px; background: var(--brand-gold);
}
.close-line p { color: var(--brand-navy); font-size: 1.02rem; max-width: 56ch; }
.el-row p { max-width: 74ch; }
@media (max-width: 767px) {
	.el-num .elementor-heading-title { padding-top: 10px; font-size: 1.2rem; }
}

/* ---------- who is behind this ---------- */
.avatar-oct {
	flex: 0 0 auto; height: 104px; background: var(--brand-navy);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.avatar-oct .elementor-heading-title {
	color: var(--brand-gold); font-size: 1.5rem; letter-spacing: .04em;
}
.who-col .role p { color: var(--brand-text-muted); font-size: .92rem; }
.pullquote .elementor-heading-title { font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem); line-height: 1.45; }

/* ---------- faq ---------- */
.faq-acc .e-n-accordion { display: block; }
.faq-acc .e-n-accordion-item {
	border: 0; border-bottom: 1px solid var(--brand-line);
	border-radius: 0; background: transparent;
}
.faq-acc .e-n-accordion-item:first-of-type { border-top: 1px solid var(--brand-line); }
.faq-acc .e-n-accordion-item-title {
	background-color: transparent;
	justify-content: space-between; align-items: center;
	padding: 20px 2px; border: 0; border-radius: 0;
}
.faq-acc .e-n-accordion-item-title-header { flex: 1 1 auto; }
.faq-acc .e-n-accordion-item-title-icon { order: 2; margin-left: 18px; flex: 0 0 auto; }
.faq-acc .e-n-accordion-item-title-icon svg,
.faq-acc .e-n-accordion-item-title-icon i { width: 14px; height: 14px; font-size: 14px; fill: var(--brand-navy); color: var(--brand-navy); }
.faq-acc .e-n-accordion-item-title-text { font-weight: 700; font-size: 1.02rem; color: var(--brand-navy); margin: 0; }
.faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-text { color: var(--brand-gold-dark); }
.faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg { fill: var(--brand-gold-dark); }
.faq-acc .e-n-accordion-item > .e-con {
	border: 0; background: transparent; padding: 0 2px 4px;
}
.faq-acc p { color: var(--brand-text-muted); }

/* ---------- forms ---------- */
.elementor-field-textual { color: var(--brand-text); }
.elementor-field-textual::placeholder { color: #98A1B2; opacity: 1; }
.elementor-field-group > label,
.elementor-field-subgroup label,
.elementor-field-type-acceptance label { color: var(--brand-text); font-size: .93rem; font-weight: 400; }
.elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 10px; align-items: flex-start; }
.elementor-field-option input[type="checkbox"] { accent-color: var(--brand-gold); width: 15px; height: 15px; margin: 2px 0 0; flex: 0 0 auto; }
.elementor-field-subgroup .elementor-field-option { display: flex; gap: 10px; align-items: flex-start; }
.elementor-field-subgroup .elementor-field-option label { line-height: 1.45; }

.form-underline .elementor-field-textual { padding-inline: 0; background: transparent; }
.form-underline .elementor-field-textual:focus { border-bottom-color: var(--brand-gold); box-shadow: none; }
.form-underline .elementor-field-type-submit { margin-top: 6px; }
.form-underline .e-form__buttons { justify-content: flex-start; }
.form-underline .e-form__buttons .elementor-button { width: auto !important; flex: 0 0 auto; }

.choice-legend {
	display: block; font-weight: 700; font-size: .9rem;
	color: var(--brand-navy); margin-bottom: -6px;
}
.form-catchall .elementor-field-type-checkbox {
	border: 1px solid var(--brand-line); padding: 16px 18px 14px;
}
.form-catchall .elementor-field-subgroup { display: flex; flex-direction: column; gap: 8px; }

/* ---------- header ---------- */
.topbar .elementor-icon-list-item { color: var(--brand-invert-soft); }
.topbar .elementor-icon-list-text { color: var(--brand-invert-soft); font-size: .84rem; }
.topbar-claim p { color: var(--brand-invert-muted); font-size: .84rem; margin: 0; }
.topbar-left { width: auto !important; flex: 0 0 auto; }
.logo-lockup { width: auto !important; flex: 0 0 auto; }
.logo-img { width: auto !important; flex: 0 0 auto; }
.logo-img img { height: 38px; width: auto; display: block; }
.logo-img--footer img { height: 42px; }
.logo-mark .elementor-icon { border-color: var(--brand-gold) !important; border-width: 1px !important; }
.wordmark .elementor-heading-title { font-size: 1.22rem; font-weight: 700; white-space: nowrap; }
.head-right { width: auto !important; flex: 0 0 auto; }
.main-nav { width: auto !important; }
.head-cta .elementor-button { padding: 14px 22px; font-size: .95rem; }
.site-head { position: relative; z-index: 20; }
@media (max-width: 767px) {
	.topbar .e-con-inner { flex-wrap: nowrap; }
	.topbar-claim { display: none; }
	.topbar .elementor-icon-list-text { font-size: .8rem; }
	.logo-lockup { flex-wrap: nowrap; }
	.logo-mark { display: none; }
	.logo-img img { height: 30px; }
	.wordmark .elementor-heading-title { font-size: 1.05rem; }
	.head-right { gap: 12px !important; }
	.head-right > .elementor-widget { width: auto !important; flex: 0 0 auto !important; }
	.main-nav .elementor-menu-toggle { margin-inline: 0; }
	.head-cta--sm .elementor-button { white-space: nowrap; line-height: 1.1; }
	.hero-copy .elementor-widget-button .elementor-button { width: 100%; justify-content: center; }
	.section > .e-con-inner { padding-inline: 0; }
}

/* ---------- footer ---------- */
.site-footer .elementor-heading-title { color: var(--brand-invert); }
.footer-links .elementor-icon-list-text { color: var(--brand-invert-muted); font-size: .95rem; }
.footer-links .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--brand-gold); }
.copyline p { color: #8B95AD; font-size: .86rem; margin: 0; }

/* ---------- misc ---------- */
.mt-md { margin-top: var(--space-sm); }
.hero-copy { max-width: 900px; }
img { max-width: 100%; height: auto; }