:root {
	/* ================= Brand colors =================
	   Primary and secondary are two points on one blue ramp. The extra steps
	   are computed by linear RGB interpolation/extrapolation between the two
	   given colors (not pulled from an external palette) — primary-dark at
	   t=-0.35, secondary-dark (the midpoint) at t=0.5, secondary-light at
	   t=1.3, where t=0 is primary and t=1 is secondary. */
	--naic-color-primary: #014f86;
	--naic-color-primary-dark: #002065;    /* hover/active/pressed on primary */
	--naic-color-secondary: #a9d6e5;
	--naic-color-secondary-dark: #5593b6;  /* text/icons needing contrast on secondary bg */
	--naic-color-secondary-light: #dbffff; /* subtle backgrounds, badges, highlights */

	/* ================= Semantic / status colors =================
	   Independent of brand color on purpose: before this, error/invalid
	   styling piggybacked on --color-primary, which happened to be red
	   (#c6133d). Now that primary is blue, that borrowing would have
	   silently turned form errors blue — see the dedicated --naic-color-danger
	   uses below instead of --e-global-color-primary. */
	--naic-color-success: #2e7d32;
	--naic-color-warning: #de9b0d;
	--naic-color-danger: #c1130b;
	--naic-color-info: var(--naic-color-secondary);

	/* ================= Neutrals =================
	   Standardized on --naic-color-black/white (82 live usages vs. 33 for
	   the old --color-black/white, which this file used to also define). */
	--naic-color-black: #000;
	--naic-color-white: #fff;
	--naic-color-light: #f7f7f7;
	--naic-color-gray-300: #e0e0e0; /* matches the literal value already used below */
	--naic-color-gray-500: #9e9e9e;
	--naic-color-gray-700: #4a4a4a;
	--naic-color-focus: #A855F7;

	/* ================= Elementor-naming compatibility aliases =================
	   Not real Elementor output — Elementor isn't installed on this site.
	   These are hand-written aliases using Elementor's global-color naming,
	   because CSS ported from the old Elementor reference build (57+ rules)
	   references these exact names. */
	--e-global-color-primary: var(--naic-color-primary);
	--e-global-color-accent: var(--naic-color-primary);
	--e-global-color-text: var(--naic-color-black);

	/* Spacing scale — 4px step grid, matches the values already in real use */
	--naic-space-1: 0.25rem; /* 4px */
	--naic-space-2: 0.5rem;  /* 8px */
	--naic-space-3: 0.75rem; /* 12px */
	--naic-space-4: 1rem;    /* 16px */
	--naic-space-6: 1.5rem;  /* 24px */
	--naic-space-8: 2rem;    /* 32px */

	/* Border-radius — ONE value for every component, not a scale. Was a
	   4-step scale (xs/sm/base/pill); collapsed to this single token per
	   request so every component rounds (or doesn't) together. Currently
	   0 = sharp corners everywhere, including the pill-shaped buttons,
	   which lose their rounded-pill look at this value — intentional.
	   Deliberately NOT applied to border-radius: 50% elements (carousel
	   prev/next controls, the search button) — those are circular icon
	   buttons by design, a different thing from corner-rounding, and stay
	   circular regardless of this token. */
	--naic-radius: 0;
}

.naic-divi-module {
	margin-bottom: var(--naic-space-4);
}

.naic-accessible-logo,
.naic-accessible-logo img {
	display: block;
	max-width: 100%;
}

.naic-accessible-logo {
	text-decoration: none;
}

.naic-accessible-logo:focus-visible,
.naic-button:focus-visible,
.naic-card-title-link:focus-visible,
.filters-link:focus-visible,
.naic-toc-link:focus-visible,
.naic-tab:focus-visible {
	outline: 2px solid var(--naic-color-focus);
	outline-offset: 3px;
}

.skip-link.screen-reader-text {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	background: var(--naic-color-black);
	color: var(--naic-color-white);
}

.skip-link.screen-reader-text:focus {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.75rem 1rem;
	margin-bottom: var(--naic-space-4);
	text-decoration: underline;
}

.naic-button {
	display: inline-flex;
	gap: var(--naic-space-2);
	align-items: center;
	justify-content: center;
	padding: 0.5rem 21px;
	color: var(--naic-color-black);
	font-size: 1rem;
	font-family: var(--e-global-typography-text-font-family);
	font-size: var(--e-global-typography-text-font-size);
	line-height: var(--e-global-typography-text-line-height);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--naic-radius);
	background-color: transparent;
}

.naic-button.small {
	padding: 8px 12px;
	font-size: 14px;
}

/* Width option ("Largura do botao"): .naic-button is inline-flex, so it
   only ever took its text's width — Divi's own sizing settings act on the
   module wrapper, not on the button. full = always 100%; full-mobile =
   100% below Divi's phone breakpoint. The NAIC Button module wrapper is
   stretched too, otherwise it shrinks to its content in row-direction
   flex columns. Card buttons also drop their align-self: flex-start. */
.naic-button.naic-button--full {
	display: flex;
	width: 100%;
}

.naic-divi-button:has(.naic-button--full) {
	width: 100%;
	align-self: stretch;
}

.naic-card-button.naic-button--full {
	align-self: stretch;
}

@media (max-width: 767px) {
	.naic-button.naic-button--full-mobile {
		display: flex;
		width: 100%;
	}

	.naic-divi-button:has(.naic-button--full-mobile) {
		width: 100%;
		align-self: stretch;
	}

	.naic-card-button.naic-button--full-mobile {
		align-self: stretch;
	}
}

.naic-button.large {
	padding: 8px 24px;
	font-size: 18px;
}

/* Keep Divi icon-picker glyphs the same size as button text */
.naic-button .elementor-icon,
.naic-button i,
.naic-button .et-pb-icon {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
	line-height: 1;
	font-weight: inherit;
	color: inherit;
}

.naic-button .elementor-icon svg {
	width: 1em;
	height: 1em;
}

/** Botão Primário **/
.naic-button.primary {
	color: var(--naic-color-white);
	background-color: var(--naic-color-black);
	border-color: var(--naic-color-black);
}

.naic-button.primary .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.primary i {
	color: var(--naic-color-white);
}

.naic-button.primary:hover {
	color: var(--naic-color-white);
	background-color: var(--e-global-color-accent);
	border-color: var(--e-global-color-accent);
	box-shadow: 0 1px 7px 0 #00000015;
}

.naic-button.primary:focus {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.primary:focus-visible {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.primary:hover .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.primary:hover i {
	color: var(--naic-color-white);
}

/** Botão Secundário **/
.naic-button.secondary {
	background-color: transparent;
	color: var(--naic-color-black);
	border-color: var(--naic-color-black);
}

.naic-button.secondary .elementor-icon svg {
	fill: var(--naic-color-black);
}

.naic-button.secondary i {
	color: var(--naic-color-black);
}

.naic-button.secondary:hover {
	background-color: var(--naic-color-black);
	color: var(--naic-color-white);
	border-color: var(--naic-color-black);
}

.naic-button.secondary:focus {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.secondary:focus-visible {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.secondary:hover .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.secondary:hover i {
	color: var(--naic-color-white);
}

/** Botão Terciário **/
.naic-button.tertiary {
	position: relative;
	background-color: transparent;
	color: var(--naic-color-black);
	border-color: transparent;
	padding: 10px 0;
	border-radius: var(--naic-radius);
}

.naic-button.tertiary::after {
	content: "";
	background-color: var(--naic-color-black);
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.small.naic-button::after {
	width: 100%;
	left: 0;
}

.large.naic-button::after {
	width: 100%;
	left: 0;
}

.naic-button.tertiary .elementor-icon svg {
	fill: var(--naic-color-black);
}

.naic-button.tertiary .elementor-icon svg path {
	fill: var(--naic-color-black);
}

.naic-button.tertiary i {
	color: var(--naic-color-black);
}

.naic-button.tertiary:hover {
	color: var(--e-global-color-accent);
	outline: none;
}

.naic-button.tertiary:hover::after {
	background-color: var(--e-global-color-accent);
	outline: none;
}

.naic-button.tertiary:focus {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.tertiary:focus-visible {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.tertiary:hover .elementor-icon svg {
	fill: var(--e-global-color-accent);
}

.naic-button.tertiary:hover .elementor-icon svg path {
	fill: var(--e-global-color-accent);
}

.naic-button.tertiary:hover i {
	color: var(--e-global-color-accent);
}

/** Botão Quaternário **/
.naic-button.quaternary {
	position: relative;
	background-color: var(--e-global-color-accent);
	color: var(--naic-color-white);
	border-color: var(--e-global-color-accent);
}

.naic-button.quaternary .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.quaternary i {
	color: var(--naic-color-white);
}

.naic-button.quaternary:hover {
	background-color: var(--naic-color-black);
	color: var(--naic-color-white);
	border-color: var(--naic-color-white);
}

.naic-button.quaternary:focus {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.quaternary:focus-visible {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.quaternary:hover .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.quaternary:hover i {
	color: var(--naic-color-white);
}

/** Botão Highlight Primary **/
.naic-button.highlight.primary {
	background-color: var(--naic-color-white);
	color: var(--naic-color-black);
	border-color: var(--naic-color-white);
}

.naic-button.highlight.primary .elementor-icon svg {
	fill: var(--naic-color-black);
}

.naic-button.highlight.primary i {
	color: var(--naic-color-black);
}

.naic-button.highlight.primary:hover {
	background-color: var(--naic-color-black);
	color: var(--naic-color-white);
	border-color: var(--naic-color-white);
}

.naic-button.highlight.primary:focus {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
}

.naic-button.highlight.primary:hover .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.highlight.primary:hover i {
	color: var(--naic-color-white);
}

/** Botão Highlight Secondary **/
.naic-button.highlight.secondary {
	background-color: transparent;
	color: var(--naic-color-white);
	border-color: var(--naic-color-white);
}

.naic-button.highlight.secondary .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.highlight.secondary i {
	color: var(--naic-color-white);
}

.naic-button.highlight.secondary:hover {
	background-color: var(--naic-color-white);
	color: var(--naic-color-black);
	border-color: var(--naic-color-white);
}

.naic-button.highlight.secondary:focus {
	/* was var(--e-global-color-primary) — inconsistent with every other variant's
	   focus ring; corrected to the DS focus token. */
	box-shadow: 0 0 0 2px var(--naic-color-focus);
}

.naic-button.highlight.secondary:hover .elementor-icon svg {
	fill: var(--naic-color-black);
}

.naic-button.highlight.secondary:hover i {
	color: var(--naic-color-black);
}

/** Botão Highlight Tertiary **/
.naic-button.highlight.tertiary {
	position: relative;
	background-color: transparent;
	color: var(--naic-color-white);
	padding: 10px 0;
	border-radius: var(--naic-radius);
}

.naic-button.highlight.tertiary::after {
	content: "";
	background-color: var(--naic-color-white);
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	top: 100%;
}

.small.naic-button.highlight.tertiary::after {
	width: 100%;
	left: 0;
}

.large.naic-button.highlight.tertiary::after {
	width: 100%;
	left: 0;
}

.naic-button.highlight.tertiary .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.highlight.tertiary .elementor-icon svg path {
	fill: var(--naic-color-white);
}

.naic-button.highlight.tertiary i {
	color: var(--naic-color-white);
}

.naic-button.highlight.tertiary:hover {
	color: var(--naic-color-white);
	outline: none;
}

.naic-button.highlight.tertiary:hover::after {
	background-color: var(--naic-color-white);
	bottom: 0;
	height: 4px;
	outline: none;
}

.naic-button.highlight.tertiary:focus {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.highlight.tertiary:focus-visible {
	box-shadow: 0 0 0 2px var(--naic-color-focus);
	outline: none;
}

.naic-button.highlight.tertiary:hover .elementor-icon svg {
	fill: var(--naic-color-white);
}

.naic-button.highlight.tertiary:hover .elementor-icon svg path {
	fill: var(--naic-color-white);
}

.naic-button.highlight.tertiary:hover i {
	color: var(--naic-color-white);
}

/* Equal-height cards in a row. Divi columns are vertical flex containers and
   the module only grows to its content, so the card's height:100% resolved
   against a short module and cards with less text ended up shorter than the
   column. Stretch every layer instead: module (flex item of the column) ->
   .et_pb_module_inner -> .naic-card; the footer/reference then sits at the
   bottom via margin-top:auto. height:100% alone can't do it — a percentage
   needs a parent with an explicit height, which a Divi column never has. */
.et_flex_column > .naic_divi_card,
.et_flex_column > .naic_divi_card2 {
	flex-grow: 1;
}

.naic_divi_card,
.naic_divi_card2,
.naic_divi_card > .et_pb_module_inner,
.naic_divi_card2 > .et_pb_module_inner {
	display: flex;
	flex-direction: column;
}

.naic_divi_card > .et_pb_module_inner,
.naic_divi_card2 > .et_pb_module_inner {
	flex: 1 1 auto;
}

.naic_divi_card .naic-card,
.naic_divi_card2 .naic-card,
.elementor-element .naic-card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 100%;
	border: 1px solid transparent;
	border-radius: var(--naic-radius);
	background: var(--naic-color-white);
	overflow: hidden;
}

.naic_divi_card .naic-card:hover,
.naic_divi_card .naic-card:focus-within,
.naic_divi_card2 .naic-card:hover,
.naic_divi_card2 .naic-card:focus-within,
.elementor-element .naic-card:hover,
.elementor-element .naic-card:focus-within {
	border-color: var(--naic-color-focus);
	box-shadow: 0 0 0 2px var(--naic-color-focus);
}

.naic-card-title {
	margin-top: 0;
	margin-bottom: var(--naic-space-3);
}

.naic-card-title-link {
	position: static;
	color: inherit;
	text-decoration: none;
}

.naic-card-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.naic-card-title-link:focus,
.naic-card-title-link:focus-visible {
	outline: none;
}

.naic-card-description {
	/* Guaranteed minimum gap before the footer, regardless of whether
	   .naic-card-footer's margin-top:auto gets extra space to push into
	   (only happens when the card is stretched taller than its content,
	   e.g. equal-height cards in a grid). */
	margin-bottom: var(--naic-space-6);
}

.naic-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--naic-space-6) 0;
}

.naic-card-footer {
	margin-top: auto;
}

.naic-card-button {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	pointer-events: none;
}

/* Media (image) is full-bleed — no padding, flush with the card's edges.
   The card's own overflow:hidden + border-radius clip it to match, so the
   image needs neither of its own. */
.naic-card-media--image {
	width: 100%;
	overflow: hidden;
}

.naic-card-media--image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Aspect-ratio choice — "original" (no class added) leaves height:auto
   above as-is, so the image keeps its natural ratio uncropped. */
.naic-card-media--ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.naic-card-media--ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.naic-card-media--ratio-4-3 img,
.naic-card-media--ratio-16-9 img {
	height: 100%;
}

.naic-card-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: var(--naic-space-4);
	background: var(--naic-color-light);
	color: var(--naic-color-black);
	font-size: 0.875rem;
	text-align: center;
}

.naic-card-icon {
	display: flex;
	justify-content: center;
	font-size: 2rem;
	line-height: 1;
}

/** NAIC CARD 2 **/

/* Card 1 base (stretched title link, equal height) with only a thick accent
   border on top — no side/bottom border, no horizontal padding — plus
   separators and a reference line. No image, no footer.
   Modelled on the "4 pilares" block on Sobre nós.
   Accent colour: set inline as --naic-card-2-accent-color from the module's
   Divi colour picker; this fallback applies when none is picked. */
.naic-card-2 {
	--naic-card-2-accent-color: var(--naic-color-secondary);
	--naic-card-2-accent-size: 8px;
}

.naic-card-2--accent-lg {
	--naic-card-2-accent-size: 16px;
}

.naic-card-2--accent-sm {
	--naic-card-2-accent-size: 4px;
}

/* Top accent border only. Also overrides the shared Card 1 hover/focus
   rule (purple border + ring around the whole card), which on a card with
   no side borders would read as a border appearing on hover. */
.naic_divi_card2 .naic-card.naic-card-2,
.naic_divi_card2 .naic-card.naic-card-2:hover,
.naic_divi_card2 .naic-card.naic-card-2:focus-within {
	border: 0;
	border-top: var(--naic-card-2-accent-size) solid var(--naic-card-2-accent-color);
	box-shadow: none;
}

/* Keyboard focus stays visible: the title link has no outline of its own
   (it's stretched over the card), so the card shows the ring instead —
   only for keyboard focus, not for mouse hover. */
.naic_divi_card2 .naic-card.naic-card-2:has(.naic-card-title-link:focus-visible) {
	outline: 2px solid var(--naic-color-focus);
	outline-offset: 2px;
}

/* Vertical rhythm via gap instead of per-element margins, so it stays even
   whether separators/reference are shown or not. */
.naic-card-2 .naic-card-body {
	gap: var(--naic-space-4);
	/* No side padding: text lines up with the edges of the top border.
	   Divi's own spacing setting for the text area still overrides this. */
	padding-right: 0;
	padding-left: 0;
}

.naic-card-2 .naic-card-body > * {
	margin: 0;
}

.naic-card-2 .naic-card-2-divider {
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid var(--naic-color-gray-300);
	background: none;
}

/* Push the reference block (its separator, or the reference itself when
   separators are off) to the bottom so references line up across a row. */
.naic-card-2 .naic-card-description + .naic-card-2-divider,
.naic-card-2 .naic-card-description + .naic-card-2-reference {
	margin-top: auto;
}

.naic-card-2 .naic-card-2-reference {
	color: var(--naic-color-gray-700);
	font-size: 0.875rem;
}

.naic-card-2--align-center .naic-card-body {
	text-align: center;
}

.naic-card-2--align-right .naic-card-body {
	text-align: right;
}

.naic-accordion-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.naic-accordion-group .accordion {
	border: 2px solid var(--naic-color-black);
	border-radius: var(--naic-radius);
	overflow: hidden;
}

.naic-accordion-group .accordion-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--naic-space-4);
	padding: var(--naic-space-3) var(--naic-space-4);
	font-family: var(--naic-font-family);
	font-weight: var(--naic-font-weight-heading, 600);
	background-color: var(--naic-color-white);
	color: var(--naic-color-black);
	cursor: pointer;
}

.naic-accordion-group .accordion[open] .accordion-title,
.naic-accordion-group .accordion:hover .accordion-title {
	background-color: var(--naic-color-primary);
	color: var(--naic-color-white);
}

/* Icon rotates on open and follows the title's current text color via
   currentColor, so it needs no separate color override for the
   open/hover state — dual-targets .elementor-icon (Elementor reference
   markup) and .et-pb-icon (Divi's own icon output), same pattern as
   .naic-button's icon color-sync. */
.naic-accordion-group .accordion-title .elementor-icon,
.naic-accordion-group .accordion-title .et-pb-icon {
	margin-left: auto;
	flex-grow: 0;
	flex-shrink: 0;
	height: fit-content;
	color: currentColor;
	transition: rotate 0.2s ease;
}

.naic-accordion-group .accordion-title .elementor-icon i,
.naic-accordion-group .accordion-title .et-pb-icon i,
.naic-accordion-group .accordion-title .elementor-icon .material-symbols-outlined,
.naic-accordion-group .accordion-title .et-pb-icon .material-symbols-outlined {
	font-size: 1.25rem;
	color: currentColor;
}

.naic-accordion-group .accordion-title .elementor-icon svg,
.naic-accordion-group .accordion-title .et-pb-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.naic-accordion-group .accordion[open] .accordion-title .elementor-icon,
.naic-accordion-group .accordion[open] .accordion-title .et-pb-icon {
	rotate: 180deg;
}

.naic-accordion-group .accordion-content {
	padding: var(--naic-space-4);
}

.naic-tabs {
	width: 100%;
}

.naic-tabs-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--naic-space-2);
	margin: 0 0 1rem;
	padding: 0;
	border-bottom: 1px solid var(--naic-color-black);
}

.naic-tab {
	/* Visual styling (color, padding, border) comes from the .naic-button atom;
	   this class is now only a JS/functional hook. */
	margin: 0;
	cursor: pointer;
}

.naic-tabs-panels {
	width: 100%;
}

.naic-tab-panel {
	padding: 1rem 0;
}

.naic-tab-panel[hidden] {
	display: none;
}

/** NAIC MODAL — native <dialog>, any Divi module as content **/

.naic-modal {
	width: 100%;
}

.naic-modal-dialog {
	--naic-modal-width: 640px;
	width: min(var(--naic-modal-width), calc(100vw - 2rem));
	max-width: 100%;
	max-height: calc(100dvh - 2rem);
	padding: 0; /* children cover the box, so a click on the dialog itself = backdrop */
	border: 0;
	border-radius: var(--naic-radius);
	background: var(--naic-color-white);
	color: var(--naic-color-black);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.naic-modal-dialog[open] {
	display: flex;
	flex-direction: column;
}

.naic-modal-dialog--sm {
	--naic-modal-width: 480px;
}

.naic-modal-dialog--lg {
	--naic-modal-width: 960px;
}

.naic-modal-dialog--full {
	--naic-modal-width: 100vw;
	width: 100vw;
	max-height: 100dvh;
	height: 100dvh;
	margin: 0;
	border-radius: 0;
}

.naic-modal-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

/* Page behind an open modal doesn't scroll. */
html:has(.naic-modal-dialog[open]) {
	overflow: hidden;
}

.naic-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--naic-space-4);
	padding: var(--naic-space-6) var(--naic-space-6) 0;
}

.naic-modal-title {
	margin: 0;
	padding: 0;
}

.naic-modal-close-form {
	margin: 0 0 0 auto;
}

/* 44x44 touch target; the icon is decorative, the name is its aria-label. */
.naic-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: calc(var(--naic-space-2) * -1) calc(var(--naic-space-2) * -1) 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--naic-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.naic-modal-close:hover {
	background: var(--naic-color-light);
}

.naic-modal-body {
	padding: var(--naic-space-6);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.naic-modal-body > :last-child,
.naic-modal-body .et_pb_module:last-child {
	margin-bottom: 0;
}

.naic-modal-trigger:focus-visible,
.naic-modal-close:focus-visible {
	outline: 2px solid var(--naic-color-focus);
	outline-offset: 3px;
}

/* Visual Builder only: the panel is shown inline (never a closed <dialog>)
   so the child modules stay visible and editable on canvas. */
.naic-modal-dialog--preview {
	display: flex;
	flex-direction: column;
	max-height: none;
	margin: var(--naic-space-4) auto 0;
	outline: 1px dashed var(--naic-color-gray-500);
	outline-offset: 4px;
}

.naic-modal-dialog--preview.naic-modal-dialog--full {
	width: 100%;
	height: auto;
}

.naic-carousel .featured-img,
.naic-carousel .featured-img img {
	width: 100%;
	height: 100%;
}

.naic-carousel .featured-img img {
	object-fit: cover;
}

.naic-carousel .slider-controls {
	display: flex;
	gap: var(--naic-space-2);
	justify-content: flex-end;
	margin-top: var(--naic-space-4);
}

.naic-carousel .carousel-control-prev,
.naic-carousel .carousel-control-next {
	position: static;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--naic-color-black);
	opacity: 1;
}

.naic-table-of-contents {
	padding: var(--naic-space-4);
	border-left: 4px solid var(--naic-color-black);
	background: var(--naic-color-light);
}

.naic-toc-title {
	margin-top: 0;
}

.naic-toc-list,
.naic-toc-sublist {
	padding-left: 0;
	list-style: none;
}

.naic-toc-sublist {
	padding-top: var(--naic-space-2);
	padding-left: var(--naic-space-4);
}

.naic-toc-item {
	margin-bottom: var(--naic-space-2);
}

.naic-toc-link {
	color: var(--naic-color-black);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.naic-toc-link.active {
	font-weight: var(--naic-font-weight-semibold, 600);
}

.naic-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--naic-space-8);
	padding-left: 0;
	list-style: none;
}

.naic-grid.grid-columns-1 {
	grid-template-columns: 1fr;
}

.naic-grid.grid-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.naic-grid.grid-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.naic-grid.grid-columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.naic-grid.grid-columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.naic-filters-sidebar {
	background-color: var(--naic-color-light);
}

.taxonomy-filter {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--naic-color-black);
}

.taxonomy-filter button.filters-expand {
	width: 100%;
	padding: 0 1.75rem 0 0;
	border: 0;
	background: transparent;
	color: var(--naic-color-black);
	font-weight: var(--naic-font-weight-heading, 600);
	text-align: left;
	cursor: pointer;
}

.taxonomy-filter .filters-list {
	padding-left: 0;
	list-style: none;
}

.filter-checkbox {
	display: flex;
	gap: var(--naic-space-2);
	align-items: flex-start;
	margin-bottom: var(--naic-space-2);
}

.naic-search-field {
	display: flex;
	gap: var(--naic-space-2);
	align-items: stretch;
}

.naic-search-field .form-control {
	min-height: 44px;
}

.naic-button-search {
	width: 44px;
	min-width: 44px;
	border: 2px solid var(--naic-color-black);
	border-radius: 50%;
	background: var(--naic-color-black);
	color: var(--naic-color-white);
}

.naic-button-search::before {
	content: "Search";
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.active-filter-list,
.naic-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--naic-space-2);
	padding-left: 0;
	list-style: none;
}

.loading-spinner {
	display: none;
	gap: var(--naic-space-3);
	align-items: center;
	margin: 1rem 0;
}

.loading-spinner.show {
	display: flex;
}

.post-item {
	display: flex;
	flex-direction: column;
	gap: var(--naic-space-3);
	height: 100%;
	padding: var(--naic-space-4);
	border-radius: var(--naic-radius);
	background: var(--naic-color-white);
}

.post-item .filters-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--naic-radius);
}

.post-item .filters-title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
}

.post-item .filters-link {
	color: var(--naic-color-black);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.naic-pagination .page-numbers {
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--naic-color-black);
	background: var(--naic-color-white);
	color: var(--naic-color-black);
}

.naic-pagination .page-numbers.current {
	background: var(--naic-color-black);
	color: var(--naic-color-white);
}

@media (max-width: 980px) {
	.naic-grid,
	.naic-grid.grid-columns-4,
	.naic-grid.grid-columns-5,
	.naic-grid.grid-columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.naic-grid,
	.naic-grid.grid-columns-2,
	.naic-grid.grid-columns-4,
	.naic-grid.grid-columns-5,
	.naic-grid.grid-columns-6 {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Merged from assets/css/componentes.css (2026-10-08) — there is
 * no longer a reason for two component stylesheets. componentes.css
 * was the pre-Divi-port legacy file (enqueue handle was literally
 * 'naic-components-legacy'); this file is the intended canonical
 * one. Content below is unchanged from componentes.css, including
 * its TODO/CORRECTION comments — those flagged conflicts (accordion,
 * cards) are NOT resolved by this merge, just relocated.
 * ============================================================ */

/* TODO: Elementor-only nav submenu toggle — no Divi equivalent decided yet. */
.elementor-nav-menu .elementor-item.has-submenu > .elementor-sub-menu {
  display: none !important;
}

.elementor-nav-menu .elementor-item.has-submenu.submenu-open > .elementor-sub-menu {
  display: block !important;
}

/** Breadcrumbs **/
.yoast-breadcrumb {
  display: flex;
  flex-direction: row;
  gap: var(--naic-space-2);
  padding-left: 0;
  align-items: center;
  justify-content: flex-start;
  flex-wrap:wrap;
  list-style: none;
}

.yoast-breadcrumb a,
.yoast-breadcrumb span,
.yoast-breadcrumb {
  font-family: var(--e-global-typography-text-font-family);
  font-size: 16px;
  line-height: var(--e-global-typography-text-line-height);
  color:var(--e-global-color-text);
}

.yoast-breadcrumb .breadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--naic-space-2);
}

.yoast-breadcrumb .breadcrumb [class*="icon-"] {
  font-size: 12px;
  font-weight: 800;
  color: inherit;
}

.yoast-breadcrumb .breadcrumb:last-child [class*="icon-"] {
  display: none;
}

/* Restores the icon font, overridden by the .yoast-breadcrumb span rule above */
.yoast-breadcrumb .breadcrumb .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 16px;
}

.yoast-breadcrumb a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.breadcrumb-light .yoast-breadcrumb span,
.breadcrumb-light .yoast-breadcrumb a,
.breadcrumb-light .yoast-breadcrumb {
  color: var(--naic-color-white);
}

/** Links **/
/* TODO: mixes dead Elementor-widget-specific selectors (.elementor-widget-text-editor,
   .elementor-icon-list-*) with .naic-toc-link (redundant — already live, unscoped, in
   this file) and .accordion-content a / table a (which could just be unprefixed).
   Needs a decision on what backs the icon-list/text-editor link styling on Divi
   before touching this block. */
.elementor .elementor-widget-text-editor a,
.elementor .indice-conteudos .elementor-icon-list-items .elementor-icon-list-item a .elementor-icon-list-text,
.elementor .naic-toc-link,
.elementor .accordion-content a,
.elementor table a {
  color: var(--e-global-color-text);
  text-decoration: underline;
  text-decoration-color: var(--e-global-color-text);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  display: inline;
  text-align: left;
}

.elementor .elementor-widget-text-editor a,
.elementor .accordion-content a {
  display: inline;
}

.elementor .elementor-widget-text-editor a:hover,
.elementor .indice-conteudos .elementor-icon-list-items .elementor-icon-list-item a:hover .elementor-icon-list-text,
.elementor .naic-toc-link:hover,
.elementor table a:hover {
  text-decoration-thickness: 4px;
}

.elementor .naic-toc-list.naic-toc-no-numbering,
.elementor .naic-toc-list {
  list-style: none;
  padding-left: 0;
}

.elementor .naic-toc-list .naic-toc-sublist {
  list-style: none;
  padding-left: var(--naic-space-2);
  padding-top: var(--naic-space-4);
}

.elementor .naic-toc-list .naic-toc-item,
.elementor .indice-conteudos .elementor-icon-list-items .elementor-icon-list-item {
  margin-bottom: var(--naic-space-4);
}

/** Listas de conteúdo **/
/* TODO: dead on Divi (.elementor ancestor never matches). Intentionally not widened to
   a global `ol li, ul li` without checking — several Divi-ready components (naic-grid,
   naic-pagination, breadcrumbs, filters lists) manage their own list spacing already. */
.elementor ol li,
.elementor ul li {
  margin-bottom: 10px;
}

/* TODO: Elementor menu-anchor widget scroll-offset fix — no Divi equivalent decided
   yet (depends on whether/how Divi pages use anchor links under a fixed header). */
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
	content: "";
	display:block;
	height: 150px;
	/* fixed header height*/
	margin: -150px 0 0;
	/* negative fixed header height */
	visibility: hidden;
	pointer-events: none;
}

/* RESOLVED: the accordion container/title conflict flagged earlier is settled —
   consolidated into the single .naic-accordion-group recipe near the top of this
   file (border + radius + bg-flip on open/hover using --naic-color-primary, icon
   rotate via currentColor). The legacy border-bottom-only stub and the
   duplicate bg-flip block (which used 4 undefined CSS variables for its font)
   are both gone. */

/** OTHER CARDS **/
.naic-card {
  position: relative;
}

.naic-card .link {
  position:static;
}

.naic-card .link:hover {
  cursor: pointer;
}

.naic-card .link a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* RESOLVED: the cards conflict flagged earlier is settled — kept the
   .naic_divi_card .naic-card recipe (near the top of this file) as the one
   true card, added default padding + a :hover trigger on its focus ring so
   mouse users get the same feedback keyboard focus already had. Dropped the
   legacy ACCESSIBLE CARDS block, including its hover-reveal title overlay,
   which was dead — opacity:0 with no :hover{opacity:1} anywhere to trigger it. */

/** FORM INPUTS (Formidable Forms ) **/
.frm_forms .frm_primary_label {
  color: var(--e-global-color-text);
  font-size: var(--e-global-typography-text-font-size);
  font-weight: 700;
  line-height: var(--e-global-typography-text-line-height);
}
.frm_forms p {
  font-family: var(--e-global-typography-text-font-family);
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-text);
}

.frm_forms a {
  color: var(--e-global-color-text) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--e-global-color-text) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
  font-family: var(--e-global-typography-text-font-family);
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-text);
}

.frm_forms a:hover {
  text-underline-offset: 4px !important;
}

.frm_forms input[type="text"],
.frm_forms input[type="password"],
.frm_forms input[type="email"],
.frm_forms input[type="number"],
.frm_forms input[type="url"],
.frm_forms input[type="tel"],
.frm_forms input[type="phone"],
.frm_forms input[type="search"],
.frm_forms select,
.frm_forms textarea,
.frm_forms label,
.frm_forms .frm_radio label,
.frm_forms .frm_checkbox label {
  min-height: 44px;
  color: var(--e-global-color-text);
  font-size: var(--e-global-typography-text-font-size);
  padding: 8px 14px !important;
  border-radius: var(--naic-radius);
  border-width: 2px;
  border-color: var(--e-global-color-text);
}

.frm_forms input[type="text"]:focus,
.frm_forms input[type="password"]:focus,
.frm_forms input[type="email"]:focus,
.frm_forms input[type="number"]:focus,
.frm_forms input[type="url"]:focus,
.frm_forms input[type="tel"]:focus,
.frm_forms input[type="phone"]:focus,
.frm_forms input[type="search"]:focus,
.frm_forms select:focus,
.frm_forms textarea:focus {
  box-shadow: 0 0 0 2px var(--naic-color-focus) !important;
  border-color: var(--e-global-color-text) !important;
  color: var(--e-global-color-text) !important;
}

.frm_forms input[type="text"]::placeholder,
.frm_forms input[type="email"]::placeholder,
.frm_forms input[type="number"]::placeholder,
.frm_forms input[type="url"]::placeholder,
.frm_forms input[type="tel"]::placeholder,
.frm_forms input[type="phone"]::placeholder,
.frm_forms input[type="search"]::placeholder,
.frm_forms select::placeholder,
.frm_forms textarea::placeholder {
  color: var(--e-global-color-text) !important;
  font-size: var(--e-global-typography-text-font-size) !important;
  line-height: var(--e-global-typography-text-line-height) !important;
}

.frm_forms .frm_description {
  font-size: 0.875rem !important;
  color: var(--e-global-color-text) !important;
}

.frm_forms .frm_checkbox label {
  display: flex !important;
  align-items: flex-start;
  gap: var(--naic-space-1);
  min-height: 44px;
  font-size: var(--e-global-typography-text-font-size) !important;
  color: var(--e-global-color-text) !important;
}

/* CHECKBOX BUTTONS */
.frm_forms .frm_checkbox input[type="checkbox"]:not([disabled]):checked {
  background-color: var(--e-global-color-text) !important;
}

.frm_forms .frm_checkbox input[type="checkbox"]:not([disabled]):checked {
  border-color: var(--e-global-color-text) !important;
  box-shadow: none !important;
}

.frm_forms .frm_checkbox input[type="checkbox"]::before {
  display: none !important;
}

.frm_forms .frm_checkbox input[type="checkbox"] {
  appearance: auto;
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--e-global-color-primary);
  margin-top: var(--naic-space-1);
}

.frm_forms .frm_checkbox input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px var(--naic-color-focus) !important;
}

/* RADIO BUTTONS */
.frm_forms .frm_radio label {
  display: flex !important;
  align-items: flex-start;
  gap: var(--naic-space-1);
  min-height: 44px;
  font-size: var(--e-global-typography-text-font-size) !important;
  color: var(--e-global-color-text) !important;
}

.frm_forms .frm_radio input[type="radio"] {
  appearance: auto;
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--e-global-color-primary);
  margin-top: var(--naic-space-1);
}

.frm_forms .frm_radio input[type="radio"]:focus {
  box-shadow: 0 0 0 2px var(--naic-color-focus) !important;
}

.frm_forms .frm_radio input[type="radio"]:not([disabled]):checked {
  accent-color: var(--e-global-color-primary);
}


.frm_style_formidable-style.with_frm_style .frm_submit .frm_button_submit {
  display: inline-flex;
  gap: var(--naic-space-2);
  align-items: center;
  justify-content: center;
  padding: 0.5rem 21px;
  color: var(--naic-color-white);
  background: var(--naic-color-black);
  background-color: var(--naic-color-black);
  border: 2px solid var(--naic-color-black);
  border-radius: var(--naic-radius);
  font-size: 1rem;
  font-family: var(--e-global-typography-text-font-family);
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  font-weight: 600;
  text-decoration: none;
}

.frm_style_formidable-style.with_frm_style .frm_submit .frm_button_submit:hover {
  color: var(--naic-color-black) !important;
  background: var(--naic-color-white) !important;
  background-color: var(--naic-color-white) !important;
  border-color: var(--naic-color-black) !important;
}

.frm_forms .frm_submit .frm_button_submit:focus {
  box-shadow: 0 0 0 2px var(--e-global-color-accent) !important;
}

.frm_form_field :invalid {
  border-color: var(--naic-color-danger) !important;
  border-width: 2px !important;
}

.frm_required {
  color: var(--naic-color-danger) !important;
}

.frm_forms .frm_blank_field input[type="text"],
.frm_forms .frm_blank_field input[type="password"],
.frm_forms .frm_blank_field input[type="email"],
.frm_forms .frm_blank_field input[type="number"],
.frm_forms .frm_blank_field input[type="url"],
.frm_forms .frm_blank_field input[type="tel"],
.frm_forms .frm_blank_field input[type="phone"],
.frm_forms .frm_blank_field input[type="search"],
.frm_forms .frm_blank_field select,
.frm_forms .frm_blank_field textarea,
.frm_forms .frm_blank_field .frm_checkbox input[type="checkbox"] {
  border-width: 1px !important;
  border-color: var(--naic-color-danger) !important;
}

/* Dropdown option text — some browsers render <option> invisible against
   a dark field background otherwise. */
.frm_forms select option {
  color: var(--e-global-color-text);
}

/* Error/success message boxes, adapted from selo.usabilidade.gov.pt's
   forms.css (left-border accent + padded background instead of relying on
   color alone, per WCAG 1.4.1). */
.frm_forms .frm-show-form .frm_error_style {
  background-color: var(--naic-color-light);
  color: inherit;
  border: unset;
  border-left: 4px solid var(--naic-color-danger);
  border-radius: var(--naic-radius);
  padding: var(--naic-space-6);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.frm_forms .frm-show-form .frm_message {
  background-color: var(--naic-color-light);
  color: inherit;
  border: unset;
  border-left: 4px solid var(--naic-color-success);
  border-radius: var(--naic-radius);
  padding: var(--naic-space-6);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.frm_form_field .frm_error {
  line-height: 1.5;
  margin: var(--naic-space-2) 0;
  color: var(--naic-color-danger);
}

/** TABLES **/
.elementor table {
  width: 100%;
}

.elementor table caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: var(--naic-space-2);
  color: #000;
}

.elementor table th,
.elementor table td {
  border-left: unset;
  border-right: unset;
  padding: 16px !important;
  text-align: left;
  vertical-align: top;
}

.elementor table th {
  font-weight: bold;
  background-color: var(--e-global-color-primary);
  color: var(--naic-color-white);
}

.elementor table td,
.elementor table th {
  border-bottom: 1px #000 solid;
  padding: 24px 0;
  border-left: unset;
  border-right: unset;
}

/** PG TABLE — [pg_list] shortcode **/

/* Scroll container: on narrow screens the table scrolls sideways instead of
   overflowing the page. It's focusable (tabindex="0") so keyboard users can
   scroll it, hence the focus ring. */
.naic-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--naic-space-6);
}

.naic-table-wrapper:focus-visible {
  outline: 2px solid var(--naic-color-focus);
  outline-offset: 2px;
}

/* The selectors repeat .naic-table so they beat Divi's own
   `.entry-content table` / `.et_pb_module table` border and padding rules. */
.naic-table.naic-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  text-align: left;
}

/* Caption is for screen readers only — it names the table without showing
   a visible heading (the page already has one). */
.naic-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.naic-table.naic-table th,
.naic-table.naic-table td {
  padding: var(--naic-space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--naic-color-gray-300);
  vertical-align: top;
}

.naic-table.naic-table thead th {
  border-bottom: 2px solid var(--naic-color-black);
  color: var(---naic-color-black);
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.naic-table.naic-table tbody th {
  font-weight: 600;
}

.naic-table tbody tr:hover {
  background-color: var(--naic-color-light);
}

.naic-table a {
  color: var(--naic-color-primary);
  text-decoration: underline;
}

.naic-table a:hover {
  color: var(--naic-color-primary-dark);
}

.naic-table a:focus-visible {
  outline: 2px solid var(--naic-color-focus);
  outline-offset: 2px;
}

/** NAIC CHURCH MAP — Leaflet map + accessible table **/

.naic-church-map {
	--naic-church-map-height: 630px;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	grid-template-areas: "map table";
	gap: var(--naic-space-6);
	align-items: start;
}

.naic-church-map--table-left {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	grid-template-areas: "table map";
}

.naic-church-map--table-below {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "map" "table";
}

.naic-church-map--height-sm {
	--naic-church-map-height: 510px;
}

.naic-church-map--height-lg {
	--naic-church-map-height: 750px;
}

@media (max-width: 980px) {
	.naic-church-map,
	.naic-church-map--table-left {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "map" "table";
	}
}

.naic-church-map__map {
	grid-area: map;
	position: relative;
	z-index: 0; /* keep Leaflet's panes under the site header/menus */
	height: var(--naic-church-map-height);
	border-radius: var(--naic-radius);
	background: var(--naic-color-light);
}

@media (max-width: 640px) {
	.naic-church-map__map {
		height: min(var(--naic-church-map-height), 70vh);
	}
}

/* No JS / no points: the table alone carries the information. */
.naic-church-map:not(.naic-church-map--ready) .naic-church-map__map {
	display: none;
}

.naic-church-map__map:focus-visible,
.naic-church-map .leaflet-container:focus-visible {
	outline: 2px solid var(--naic-color-focus);
	outline-offset: 2px;
}

.naic-church-map__table-wrapper {
	grid-area: table;
	max-height: var(--naic-church-map-height);
	margin-bottom: 0;
	overflow-y: auto;
}

.naic-church-map--table-below .naic-church-map__table-wrapper {
	max-height: none;
}

.naic-church-map__action {
	width: 1%;
	white-space: nowrap;
}

/* "Ver no mapa" is the design-system secondary button (.naic-button
   .secondary); .naic-button sets display:inline-flex, which would override
   the [hidden] attribute the server sets until the map script runs. */
.naic-church-map .naic-church-map__show[hidden] {
	display: none;
}

.naic-church-map .naic-church-map__show {
	cursor: pointer;
}

/* Marker: the round NAIC logo with its own blue background, centred on
   the point (iconAnchor = centre). The path is relative to this file. */
.naic-church-map .naic-church-map__marker {
	background: none;
	border: 0;
	border-radius: 50%;
}

.naic-church-map__pin {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: url("../img/NAIC-logo-with-bg.svg") center / contain no-repeat;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}

/* The colour is part of the image, so hover/focus scales it instead. */
.naic-church-map__marker:hover .naic-church-map__pin,
.naic-church-map__marker:focus .naic-church-map__pin {
	transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.naic-church-map__pin {
		transition: none;
	}
}

.naic-church-map__marker:focus-visible {
	outline: 2px solid var(--naic-color-focus);
	outline-offset: 4px;
	border-radius: 50%;
}

.naic-church-map .leaflet-popup-content-wrapper {
	border-radius: var(--naic-radius);
}

.naic-church-map__popup-title {
	margin: 0 0 var(--naic-space-1);
	padding: 0;
	font-weight: 600;
	font-size: 1rem;
}

.naic-church-map__popup-title a {
	color: var(--naic-color-primary);
}

.naic-church-map__popup-address {
	margin: 0;
	font-style: normal;
}

.naic-church-map__empty,
.naic-church-map__warning,
.naic-church-map-item__warning {
	color: var(--naic-color-danger);
	font-size: 0.875rem;
}

.naic-church-map-item__address {
	white-space: pre-line;
}

.naic-church-map .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/** ACCESSIBLE SLIDER **/

.naic-carousel .carousel-control-next,
.naic-carousel .carousel-control-prev,
.naic-carousel .carousel-control-pause {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--naic-space-4);
    color: var(--naic-color-black);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    border: 2px solid var(--naic-color-black);
    background-color: var(--naic-color-white);
    background-image: unset;
    border-radius: 50%;
    height: 48px;
    width: 48px;
    opacity: 1;
}

.naic-carousel .carousel-control-prev-icon,
.naic-carousel .carousel-control-next-icon {
  filter: invert(1);
  background-size: 18px;
}

.naic-carousel .container-fluid {
  background: #fff;
}

.naic-carousel .first-column {
  padding-bottom:90px !important;
}

.naic-carousel .featured-img {
  border-bottom: 0.5rem solid var(--e-global-color-primary);
}

.naic-carousel .featured-img img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .naic-carousel .first-column {
    padding-top: 0;
    margin-left: auto;
    width: calc(var(--content-width) / 2);
    padding-right:40px;
  }

  .naic-carousel .featured-img {
    border-bottom: none;
  }

  .naic-carousel .featured-img img {
    aspect-ratio: 16/9;
  }
}

.naic-carousel .carousel-indicators button.active {
  background-color: var(--e-global-color-primary);
}

.naic-carousel .carousel-indicators {
  position: absolute;
  bottom: 5px;
  right: inherit;
  left: inherit;
  margin-left: inherit;
}

.naic-carousel .slider-controls {
  padding: var(--naic-space-4);
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  width: calc(44px + 44px + 24px);
  height: 48px;
  margin-top: -88px;
  margin-left: calc((100% - (var(--content-width))) / 2 + 12px);
}

@media (max-width: 1200px) {
  .naic-carousel .slider-controls {
    margin-top: -64px;
  }
}

@media (min-width: 1400px) {
  .naic-carousel .carousel-indicators {
    position: absolute;
    bottom: 25px;
  }
}

/** NAIC Accordion Nested **/
.naic-accordion-nested {
  width: 100%;
}

.naic-accordion-nested-item {
  display: block;
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: var(--naic-radius);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.naic-accordion-nested-item:hover {
  border-color: #b0b0b0;
}

.naic-accordion-nested-item[open] {
  border-color: #0073aa;
}

.naic-accordion-nested-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--naic-space-4);
  margin: 0;
  cursor: pointer;
  list-style: none;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
  user-select: none;
}

.naic-accordion-nested-item-title::-webkit-details-marker {
  display: none;
}

.naic-accordion-nested-item-title::marker {
  display: none;
}

.naic-accordion-nested-item-title:hover {
  background-color: #f0f0f0;
}

.naic-accordion-nested-item[open] .naic-accordion-nested-item-title {
  background-color: #e8f4f8;
}

.naic-accordion-nested-item-title-text {
  margin: 0;
  font-weight: 600;
  flex: 1;
}

.naic-accordion-nested-item-content {
  padding: var(--naic-space-4);
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
}

.naic-accordion-nested-item[open] .naic-accordion-nested-item-content {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}