/*
 * VZ public polish layer (LFB-103D POLISH 001).
 *
 * Isolated public-scope CSS loaded AFTER the ported Liviza stylesheets.
 * It only repairs contrast, card equalisation and removes the need for
 * inline presentation styles. It never overrides Liviza geometry,
 * typography scale or spacing rhythm, and it never touches /admin/*.
 */

/* --- 1. Quick cards: keep Liviza white title/icon/link on coloured cards - */
.pbminfotech-ihbox-style-3 h2.pbminfotech-custom-heading a,
.pbminfotech-ihbox-style-3 .pbminfotech-custom-heading a {
  color: #fff;
}
.pbminfotech-ihbox-style-3 h2.pbminfotech-custom-heading a:hover,
.pbminfotech-ihbox-style-3 h2.pbminfotech-custom-heading a:focus {
  color: #fff;
  text-decoration: underline;
}
.pbminfotech-ihbox-style-3.pbmit-col-bgcolor-white h2.pbminfotech-custom-heading a {
  color: var(--pbmit-blackish-color);
}
.pbminfotech-ihbox-style-3.pbmit-col-bgcolor-white h2.pbminfotech-custom-heading a:hover,
.pbminfotech-ihbox-style-3.pbmit-col-bgcolor-white h2.pbminfotech-custom-heading a:focus {
  color: var(--pbmit-global-color);
}

/* --- 2. Equal-height slides for the service and stakeholder carousels ---- */
.vz-equal-slides .swiper-wrapper {
  align-items: stretch;
}
.vz-equal-slides .swiper-slide {
  height: auto;
  display: flex;
}
.vz-equal-slides .swiper-slide > article {
  width: 100%;
  display: flex;
}
.vz-equal-slides .swiper-slide > article > .pbminfotech-post-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.vz-equal-slides .swiper-slide .pbminfotech-box-content {
  flex: 1 1 auto;
}
.vz-equal-slides .swiper-slide .pbminfotech-box-content-inner {
  height: 100%;
}

/* --- 3. Chrome text that previously used inline styles ------------------- */
.vz-brand-link {
  display: block;
  line-height: 1.2;
  text-decoration: none;
}
.vz-brand-name {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.vz-brand-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  opacity: 0.85;
}
.vz-hero-lead {
  color: #fff;
}
.vz-footer-name {
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.vz-footer-sub {
  margin-bottom: 18px;
}

/* --- 4. Governed meta text and action rows ------------------------------- */
.vz-meta {
  font-size: 13px;
  line-height: 22px;
}
.vz-actions {
  margin-top: 24px;
}
.vz-note {
  font-size: 13px;
  line-height: 22px;
  margin-top: 24px;
}

/* --- 4b. Title bar overlay containment ----------------------------------
 * The ported Liviza `.pbmit-title-bar-wrapper:before` overlay is absolutely
 * positioned but the wrapper itself is not a containing block, so the
 * overlay stretched over the whole page and intercepted every pointer event
 * below the title bar. Restoring the containing block (and making the purely
 * decorative overlay click-through) repairs interaction without changing any
 * visual geometry. */
.pbmit-title-bar-wrapper {
  position: relative;
}
.pbmit-title-bar-wrapper:before {
  pointer-events: none;
}

/* --- 5. Document category tabs (Bootstrap 5 nav-tabs) -------------------- */
.vz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
  border-bottom: 1px solid #eaebec;
}
.vz-tabs .nav-item {
  margin: 0;
}
.vz-tabs .nav-link.vz-tab {
  appearance: none;
  border: 1px solid #eaebec;
  border-bottom: none;
  background: #f7f9fc;
  color: var(--pbmit-blackish-color);
  border-radius: 6px 6px 0 0;
  padding: 10px 18px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
}
.vz-tabs .nav-link.vz-tab:hover {
  color: var(--pbmit-global-color);
  border-color: #eaebec;
}
.vz-tabs .nav-link.vz-tab.active,
.vz-tabs .nav-link.vz-tab[aria-selected="true"] {
  background: var(--pbmit-global-color);
  border-color: var(--pbmit-global-color);
  color: #fff;
}
.vz-tab:focus-visible,
.tab-pane:focus-visible {
  outline: 2px solid var(--pbmit-blackish-color);
  outline-offset: 2px;
}

/* --- 6. Article + sidebar pages ------------------------------------------ */
.vz-sidebar .widget {
  margin-bottom: 35px;
}
.vz-sidebar .widget ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
.vz-sidebar .widget ul li {
  padding: 8px 0;
  border-bottom: 1px solid #eaebec;
}
.vz-sidebar .widget ul li:last-child {
  border-bottom: none;
}

/* =====================================================================
   LFB-104 — VZ imagery and page-top system
   Geometry, heights and spacing of the Liviza source are unchanged; only
   the image sources are replaced by VZ-owned neutral illustration.
   ===================================================================== */

/* Shared inner-page top (LFB-104 REMEDIATION 001).
 * Visual source: the homepage "Diensten van Vreemdelingenzaken" band
 * (`.service-one-bg.pbmit-bg-color-blackish`): a calm blackish field with two
 * restrained angular Liviza corner patterns. No illustration, photograph or
 * light wedge behind the navigation. */
.pbmit-title-bar-wrapper {
	background-color: var(--pbmit-blackish-color);
	background-image:
		url("/vz-public/liviza/assets/images/homepage-1/bg/bg-pattarn.png"),
		url("/vz-public/liviza/assets/images/homepage-1/bg/bg-pattarn-left.png");
	background-position: right 100px bottom 0, left 0 top 0;
	background-size: 474px 448px, 309px 448px;
	background-repeat: no-repeat, no-repeat;
}

/* Flat, very light darkening only; the zone is dark by base colour. */
.pbmit-title-bar-wrapper:before {
	background: rgba(8, 20, 40, 0.25);
	opacity: 1;
}

/* Mobile/tablet: the corner art is fixed 448px-tall desktop decoration. */
@media (max-width: 991px) {
	.pbmit-title-bar-wrapper {
		background-image: none;
	}
}

.pbmit-title-bar-wrapper .pbmit-tbar-title,
.pbmit-title-bar-wrapper .pbmit-breadcrumb,
.pbmit-title-bar-wrapper .pbmit-breadcrumb a,
.pbmit-title-bar-wrapper .pbmit-breadcrumb span {
	color: #ffffff;
}

/* Long titles must not clip inside the fixed-height title zone. */
.pbmit-title-bar-wrapper .pbmit-tbar-title {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Homepage hero slides — original 1920x900 slot, responsive sources. */
.pbmit-slider-bg.vz-hero-slide-1 {
	background-image: url("/vz-public/images/hero/vz-hero-01.webp");
}
.pbmit-slider-bg.vz-hero-slide-2 {
	background-image: url("/vz-public/images/hero/vz-hero-02.webp");
}
.pbmit-slider-bg.vz-hero-slide-3 {
	background-image: url("/vz-public/images/hero/vz-hero-03.webp");
}

@media (max-width: 1280px) {
	.pbmit-slider-bg.vz-hero-slide-1 {
		background-image: url("/vz-public/images/hero/vz-hero-01-1280.webp");
	}
	.pbmit-slider-bg.vz-hero-slide-2 {
		background-image: url("/vz-public/images/hero/vz-hero-02-1280.webp");
	}
	.pbmit-slider-bg.vz-hero-slide-3 {
		background-image: url("/vz-public/images/hero/vz-hero-03-1280.webp");
	}
}

@media (max-width: 767px) {
	.pbmit-slider-bg.vz-hero-slide-1 {
		background-image: url("/vz-public/images/hero/vz-hero-01-768.webp");
	}
	.pbmit-slider-bg.vz-hero-slide-2 {
		background-image: url("/vz-public/images/hero/vz-hero-02-768.webp");
	}
	.pbmit-slider-bg.vz-hero-slide-3 {
		background-image: url("/vz-public/images/hero/vz-hero-03-768.webp");
	}
}

/* Hero controls stay visible and keyboard reachable. */
.pbmit-slider-one .swiper-button-next:focus-visible,
.pbmit-slider-one .swiper-button-prev:focus-visible,
.pbmit-slider-one .swiper-pagination-bullet:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Service-detail document / preparation panel image (500x280 slot). */
.assessment-one-img {
	background-image: url("/vz-public/images/pattern/vz-cta-texture.webp");
	background-position: center center;
	background-size: cover;
}

/* Decorative Liviza slots, replaced with neutral VZ patterns. */
.pbmit-bg-pattern-right,
.pbmit-service-bg-pattern {
	background-image: url("/vz-public/images/pattern/vz-pattern-right.svg");
}
.pbmit-bg-pattern-left {
	background-image: url("/vz-public/images/pattern/vz-pattern-left.svg");
}
/* LFB-104 REMEDIATION 001 — the extra footer background introduced in LFB-104
 * stacked on top of the original Liviza `.site-footer:before` pattern and was
 * removed. The source footer composition is used unchanged. */

/* Aanvraaghulp — preparation-only wizard (LFB-104). */
.vz-wizard-live {
	margin-bottom: 10px;
	font-weight: 600;
	color: #6f7174;
}
.vz-wizard-choice .pbminfotech-box-content-inner {
	height: 100%;
}
.vz-wizard-btn {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.vz-wizard-facts {
	list-style: none;
	padding-left: 0;
	margin-bottom: 25px;
}
.vz-wizard-facts li {
	margin-bottom: 6px;
}
.vz-wizard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 25px;
}
.vz-wizard-actions .pbmit-btn {
	cursor: pointer;
}
.vz-wizard h2:focus-visible {
	outline: 3px solid #0b1e3b;
	outline-offset: 4px;
}

/* Long Dutch hero words must wrap inside the slider column. */
.pbmit-slider-one .pbmit-slider-content .pbmit-title {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}
@media (max-width: 1440px) {
	.pbmit-slider-one .pbmit-slider-content .pbmit-title {
		font-size: 62px;
		line-height: 70px;
	}
}
@media (max-width: 1199px) {
	.pbmit-slider-one .pbmit-slider-content .pbmit-title {
		font-size: 48px;
		line-height: 56px;
	}
}
@media (max-width: 767px) {
	.pbmit-slider-one .pbmit-slider-content .pbmit-title {
		font-size: 34px;
		line-height: 42px;
	}
}

/* Wizard choice cards have no thumbnail, so the overlapping Liviza icon
   needs room inside the card instead of hanging above it. */
.vz-wizard-choice .pbminfotech-box-content {
	padding-top: 45px;
}
.vz-wizard-choice .pbmit-ihbox-icon {
	position: static;
	margin: 0 auto 20px;
}
/* Step announcements are for assistive technology; the visible step label is
   already in the heading block. */
.vz-wizard-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
   LFB-104 REMEDIATION 001 — header CTA and hero controls
   ===================================================================== */

/* Structural show/hide only, no visual token. `Contact` occupies the original
   Liviza top-right CTA slot on desktop; below 1200px Liviza hides that slot
   itself, so the same entry is carried by an ordinary menu item. Exactly one
   contact entry is reachable per viewport (Track A: no login entry). */
.header-style-1 .pbmit-pre-header-content .top-contact li.vz-header-cta {
	padding-right: 0;
	vertical-align: middle;
}
.header-style-1 .pre-header .vz-header-cta .pbmit-btn {
	margin-left: 20px;
	height: 46px;
	line-height: 46px;
	padding: 0 28px;
	border-radius: 0;
	vertical-align: middle;
}
@media (min-width: 1200px) {
	.main-menu li.vz-nav-contact {
		display: none;
	}
}
@media (max-width: 1199px) {
	.vz-header-cta {
		display: none !important;
	}
}

/* Hero: arrows and the rejected cross-like navigation stay removed. The only
   visible navigation is the template's own restrained pagination dots
   (LFB-105 D-006, Option 2). Autoplay stays off. */
.pbmit-slider-one .swiper-button-next,
.pbmit-slider-one .swiper-button-prev,
.pbmit-slider-one .swiper-buttons {
	display: none !important;
}
.vz-hero-carousel {
	position: relative;
}

/* Hero pagination (LFB-105 D-006): the template's own slider-one dot pattern
   is kept exactly where Liviza puts it (right edge, rotated column). Only the
   pointer/touch target is enlarged to ~44px with a transparent hit area, and
   the dots are also shown on narrow widths where Liviza hides them, because
   they are the only visible slide control. Geometry is otherwise untouched. */
/* Spacing so the enlarged 44px hit areas cannot overlap each other. */
.pbmit-slider-one .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.pbmit-slider-one .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 15px;
}
.pbmit-slider-one .swiper-pagination-bullet:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	background: transparent;
}
.pbmit-slider-one .swiper-pagination-bullet:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 6px;
}

/* All three dots must stay legible over light photography; the template's
   inactive dot (30% white) disappears on bright slides. Contrast only. */
.pbmit-slider-one .swiper-pagination-bullet:after {
	background-color: rgba(255, 255, 255, 0.75);
	box-shadow: 0 0 6px rgba(8, 20, 40, 0.55);
}
.pbmit-slider-one .swiper-pagination-bullet-active:after {
	background-color: #ffffff;
}
.pbmit-slider-one .swiper-pagination-bullet-active {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 8px rgba(8, 20, 40, 0.55);
}
@media (max-width: 767px) {
	.pbmit-slider-area .swiper-horizontal > .swiper-pagination-bullets {
		display: table;
	}
	/* Narrow widths have no free right margin next to the hero text, so the
	   dot strip returns to the horizontal bottom-centre position the template
	   uses for its other sliders. */
	.pbmit-slider-one .swiper-horizontal > .swiper-pagination-bullets {
		top: auto;
		right: 0;
		bottom: 20px;
		left: 0;
		width: 100%;
		text-align: center;
		transform: none;
	}
}


/* Hero controls (D-107-001, MAIN-RELEASE-BASELINE-TRACK-A-001). Visible
   navigation stays the template's pagination dots (LFB-105 D-006 Option 2).
   "Vorige dia" / "Volgende dia" are real buttons for keyboard and assistive
   technology. They are visually hidden WITHOUT clip/clip-path (clipping also
   removes an element from hit-testing, which is why the deployed controls
   accepted no activation), each in its own box at the left edge, halfway down
   the hero (inside the first viewport, clear of the absolutely positioned
   header bar, z-index 10). On keyboard focus they become a visible labelled
   button. */
.vz-hero-controls {
	position: absolute;
	left: 0;
	top: 50%;
	width: 320px;
	height: 1px;
	z-index: 20;
	pointer-events: none;
}
.vz-sr-button {
	position: absolute;
	top: 0;
	pointer-events: auto;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	background: transparent;
	color: transparent;
	opacity: 0.01;
	cursor: pointer;
}
.vz-sr-button[data-vz-hero="prev"] {
	left: 0;
}
.vz-sr-button[data-vz-hero="next"] {
	left: 2px;
}
.vz-sr-button[aria-disabled="true"] {
	cursor: default;
}
.vz-sr-button:focus-visible {
	top: 0;
	left: 20px;
	width: max-content;
	height: auto;
	padding: 10px 18px;
	overflow: visible;
	opacity: 1;
	background: #ffffff;
	color: var(--pbmit-blackish-color);
	font-weight: 600;
	outline: 3px solid var(--pbmit-global-color);
	outline-offset: 2px;
}
.vz-sr-button[data-vz-hero="next"]:focus-visible {
	left: 170px;
}
.vz-sr-status {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* =====================================================================
   LFB-105 STRUCTURAL REMEDIATION 001
   D-001 hero wrap · D-002 narrow-width panel · D-003 detail flow ·
   D-005 equal-height card grids. Public layer only; no admin impact.
   ===================================================================== */

/* D-001 / D-002 — long Dutch compounds must wrap at safe boundaries.
   No `overflow-x: hidden` is used anywhere: the content itself is repaired. */
.pbmit-slider-area .pbmit-slider-content .pbmit-title,
.pbmit-slider-area .pbmit-slider-content .pbmit-title em,
.pbmit-slider-area .pbmit-slider-content .pbmit-title span,
.pbmit-title-bar-wrapper .pbmit-tbar-title,
.pbmit-title-bar-wrapper h1,
.pbmit-entry-content h3,
.pbminfotech-des h3,
.vz-meta {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

/* D-002 — the source panel image relies on 127px/150px padding for its height,
   which forces a 300px minimum box inside a 277px column at 320px. Below the
   two-column breakpoint the panel stacks and the image gets an intrinsic
   aspect-ratio box instead of padding. */
@media (max-width: 991px) {
	.assessment-one-img {
		padding: 0;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	.assessment-one-content {
		padding: 30px 20px;
	}
	.assessment-one-content .pbmit-btn {
		display: block;
		width: 100%;
		text-align: center;
	}
	.assessment-one-content .pbmit-btn + .pbmit-btn {
		margin-top: 12px;
	}
}

/* D-003 — `.assessment-one { margin-top: -150px }` is a homepage-only overlap
   device. On service details the panel follows a normal grid, so the negative
   margin pulls it up into the related-service cards. Detail panels use the
   same visual card in normal document flow. */
.vz-detail-panel {
	margin-top: 0;
	position: relative;
	z-index: auto;
	clear: both;
}
.pbmit-entry-content + .vz-detail-panel,
.vz-related-grid + .vz-detail-panel {
	margin-top: 40px;
}

/* The related grid is a closed wrapper: the panel after it starts below the
   grid's computed bottom edge at every width. */
.vz-related-grid {
	display: flow-root;
	margin-top: 40px;
}
.vz-related-grid .row {
	margin-bottom: 0;
}

/* D-005 — Liviza-compatible equal-height rows. Cards stretch to the tallest
   card in the row; text keeps its intrinsic flow and is never clipped, and the
   3 / 2 / 1 column progression of the source grid is untouched. */
.vz-equal-cards {
	align-items: stretch;
}
.vz-equal-cards > [class*="col-"] {
	display: flex;
	margin-bottom: 30px;
}
.vz-equal-cards > [class*="col-"] > .pbminfotech-servicebox-style-2 {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.vz-equal-cards .pbminfotech-post-item,
.vz-equal-cards .pbminfotech-box-content,
.vz-equal-cards .pbminfotech-box-content-inner,
.vz-equal-cards .pbminfotech-des {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: auto;
	overflow: visible;
}
.vz-equal-cards .pbminfotech-service-content {
	flex: 1 1 auto;
}
/* CTA sits on the card baseline without a fixed card height. */
.vz-equal-cards .pbminfotech-box-link {
	margin-top: auto;
}

/* D-001 continued — sitewide heading wrap safety and a slightly smaller
   heading step below 480px so long Dutch compounds ("Vreemdelingenzaken")
   fit the line box instead of breaking inside the word. */
.pbmit-title,
.pbmit-title em,
.pbmit-title span,
.pbmit-subtitle {
	overflow-wrap: break-word;
	word-break: normal;
}
@media (max-width: 479px) {
	.pbmit-title {
		font-size: 26px;
		line-height: 34px;
	}
}

/* Sitewide 30px document overflow: the source footer decoration is declared
   as `left: 30px; width: 100%`, so it extends 30px past the viewport. The
   pattern is a left-anchored, non-repeating image, so constraining the box to
   the remaining width keeps the original composition and removes the overflow. */
.site-footer:before {
	width: calc(100% - 30px);
}

/* LFB-105 D-001 (residual): the Liviza services band paints a fixed 309px
   decorative pattern via `.service-one-bg:after`. On content boxes narrower
   than 309px (a 320px viewport with a classic 15px scrollbar) that decoration
   alone pushes the document past the viewport. Liviza itself clips it at
   <=280px; the same template mechanism is extended to all narrow widths.
   No geometry, content or desktop appearance changes. */
@media (max-width: 400px) {
	.service-one-bg {
		overflow: hidden;
	}
}

/* LFB-105 D-002 (residual): breadcrumb trail and related-service card text on
   the longest service title still exceeded content boxes narrower than 320px.
   Word-safe wrapping only; no truncation, no horizontal clipping. */
.pbmit-title-bar-wrapper .pbmit-breadcrumb,
.pbmit-title-bar-wrapper .pbmit-breadcrumb li,
.pbmit-title-bar-wrapper .pbmit-breadcrumb a,
.pbmit-title-bar-wrapper .pbmit-breadcrumb span,
.vz-related-grid h3,
.vz-related-grid p,
.vz-related-grid a {
	min-width: 0;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

/* LFB-105 D-002 (residual): the Liviza title bar nests a second `.container`
   (`.pbmit-tbar-inner`) inside the page container. Below 400px the inner
   container keeps a wider computed width than its parent's content box and
   pushes the heading and breadcrumb past the viewport. Constrain the nested
   container to its parent; desktop and tablet geometry is untouched. */
@media (max-width: 400px) {
	/* `.pbmit-title-bar-content` is `display: table; width: 100%`, so its used
	   width can never fall below the longest unbreakable word ("toelatings-
	   beschikking"). Switching the title zone out of table layout at very
	   narrow widths lets the existing word-safe wrapping take effect.
	   FE-001 V-001: block flow lost the table-cell vertical centring, so the
	   title and breadcrumb rendered at the top of the zone, underneath the
	   absolutely positioned header. A flex column restores the centring. */
	.pbmit-title-bar-wrapper .pbmit-title-bar-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		min-width: 0;
	}
	.pbmit-title-bar-wrapper .pbmit-title-bar-content-inner {
		display: block;
		min-width: 0;
	}
	.pbmit-title-bar-wrapper .pbmit-tbar-inner.container {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

/* =====================================================================
   LFB-105 FINAL FRONTEND CORRECTION 001
   D-007 hero title word-safe wrapping · D-008 hero pagination 768-991px.
   Public layer only; no admin impact; no other carousel is touched.
   ===================================================================== */

/* D-007 — the hero title may only break between words or at the authored
   soft hyphen inside the compound. Never at an arbitrary character. */
.pbmit-slider-area .pbmit-slider-content .pbmit-title,
.pbmit-slider-area .pbmit-slider-content .pbmit-title em,
.pbmit-slider-area .pbmit-slider-content .pbmit-title span,
.pbmit-slider-one .pbmit-slider-content .pbmit-title {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* D-008 — Liviza hides the slider-one dots up to 991px, so the tablet band
   had no visible slide control. The already-approved bottom-centre strip is
   extended to that band. Desktop (>991px) keeps the template's right-edge
   rotated column untouched. Arrows stay removed; autoplay and loop stay off. */
@media (max-width: 991px) {
	.pbmit-slider-area .swiper-horizontal > .swiper-pagination-bullets,
	.pbmit-slider-one .swiper-pagination-bullets {
		display: table;
	}
	.pbmit-slider-one .swiper-horizontal > .swiper-pagination-bullets {
		top: auto;
		right: 0;
		bottom: 20px;
		left: 0;
		width: 100%;
		text-align: center;
		transform: none;
	}
}

/* D-008 (tablet band only): between 768px and 991px the following section's
   heading overlaps the bottom of the hero, so the dot strip is raised clear
   of it. Position only; geometry, count and behaviour are unchanged. */
@media (min-width: 768px) and (max-width: 991px) {
	.pbmit-slider-one .swiper-horizontal > .swiper-pagination-bullets {
		top: 508px;
		bottom: auto;
	}
}

/* =====================================================================
   FE-001 — FRONTEND CORRECTION BATCH (AUDIT-001 defects)
   V-001 title bar below the header at ≤400px · V-002 home services heading
   above its decoration · V-003 detail panels stack on tablet · V-009 phone
   title-bar height · V-010 skip link + main landmark · V-012/D-107-001
   visible hero controls · D-107-002/V-011 menu open state · V-013 footer
   tap targets · focus visibility. Public layer only; no admin impact.
   ===================================================================== */

/* V-010 — skip link: hidden until focused, then a solid pill at the top. */
.vz-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10000;
	padding: 10px 18px;
	background: #ffffff;
	color: var(--pbmit-blackish-color);
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
}
.vz-skip-link:focus,
.vz-skip-link:focus-visible {
	top: 16px;
	outline: 3px solid var(--pbmit-global-color);
	outline-offset: 2px;
}
main#vz-main {
	display: block;
	outline: none;
}

/* V-005 — visually hidden page heading (home). */
.vz-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* V-009 — phones: the Liviza 650px title zone leaves a full screen of empty
   dark space above the content. Tablet keeps the template's 350px value;
   phones get the same. Desktop (>991px) is untouched. */
@media (max-width: 991px) {
	.pbmit-title-bar-wrapper .pbmit-title-bar-content {
		height: auto;
		min-height: 350px;
		padding-top: 105px; /* header height at ≤1199px */
		padding-bottom: 40px;
	}
}

/* V-002 — the section decoration (`.service-one-bg:after`) paints above the
   heading at desktop widths. Lift the heading and intro into the same
   stacking context as the cards. */
.service-one-bg .pbmit-heading-subheading,
.service-one-bg .row.align-items-center > [class*="col-"] {
	position: relative;
	z-index: 2;
}

/* V-003 — the two-column detail panel already stacks at ≤767px in Liviza;
   between 768 and 991px the image column still ran under the text. Stack the
   panel across the whole tablet band. */
@media (max-width: 991px) {
	.vz-detail-panel .col-md-5,
	.vz-detail-panel .col-md-7 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Hero controls and slide status: see the D-107-001 block above. */

/* D-107-002 / V-011 — the panel is no longer a Bootstrap `collapse`; its
   geometry follows `header.active` exactly as the template intends, and the
   collapse box itself now takes the height of the open panel so the menu
   region is measurable and clickable. */
@media (max-width: 1199px) {
	.main-menu .navbar-collapse.vz-menu-panel {
		display: block;
		min-height: 0;
	}
	/* While open, the panel takes part in the collapse box's layout so the
	   region has a real, measurable height (the template kept it at 0px). */
	.site-header.vz-menu-open .main-menu .navbar-collapse.vz-menu-panel .pbmit-menu-wrap {
		position: relative;
		top: auto;
	}
	.navbar-toggler:focus-visible {
		outline: 3px solid #ffffff;
		outline-offset: 2px;
	}
}

/* V-008 — wizard: selected choice state. */
.vz-wizard-choice-selected .pbminfotech-post-item {
	box-shadow: 0 0 0 3px var(--pbmit-global-color);
}
.vz-wizard-btn[aria-pressed="true"] span::after {
	content: " ✓";
}

/* V-013 — footer and legal links: 24px minimum tap height. */
.site-footer .textwidget ul li a,
.site-footer .menu-visa ul li a,
.footer-nav-menu li a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* Focus visibility on the header CTA and primary buttons. */
.pbmit-btn:focus-visible,
.vz-nav-contact a:focus-visible,
.pbmit-header-button a:focus-visible,
.pbminfotech-vc_general:focus-visible {
	outline: 3px solid var(--pbmit-global-color);
	outline-offset: 3px;
}

/* V-016 — the footer e-mail is now a mailto link; keep the widget's text colour. */
.site-footer .pbmit_contact_widget_wrapper a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
}
.site-footer .pbmit_contact_widget_wrapper a:hover,
.site-footer .pbmit_contact_widget_wrapper a:focus-visible {
	color: #ffffff;
}

/* FE-002 — portal shell layout necessity (no visual token). Liviza positions
   `.header-style-1 .site-header-menu` absolutely over the page title bar; the
   citizen portal renders no title bar, so the bar would overlap the content.
   Restoring normal flow prevents the overlap. Colours, geometry, typography
   and spacing all come from the template classes on the element. */
.vz-portal .site-header-menu {
	position: relative;
}