@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ============================================================
   PONCA NAV STRIP BLOCK
   Pixel-perfect of the archives sub-navigation.
   All values flow through CSS variables that are set
   per-block on the section element by render.php — this lets
   hover & active states fully respect the inspector picks
   without needing inline styles on every item.
   ============================================================ */

.ponca-nav-strip {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--ponca-ns-strip-bg, #FFF8F6);
	min-height: var(--ponca-ns-strip-min-height, 61px);

	/* Defaults - render.php overrides via inline CSS variables */
	--ponca-ns-bg: #FFF8F6;
	--ponca-ns-color: #540E02;
	--ponca-ns-bg-hover: #F5E5E1;
	--ponca-ns-color-hover: #691103;
	--ponca-ns-active-bg: #691103;
	--ponca-ns-active-color: #EEDCD9;
	--ponca-ns-active-bg-hover: #540E02;
	--ponca-ns-active-color-hover: #FFF8F6;
	--ponca-ns-padding: 10px 20px;
	--ponca-ns-height: 61px;
	--ponca-ns-gap-inner: 10px;
	--ponca-ns-font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
	--ponca-ns-font-size: 15px;
	--ponca-ns-line-height: 25px;
	--ponca-ns-font-weight: 400;
	--ponca-ns-font-style: normal;
	--ponca-ns-letter-spacing: 0.01em;
	--ponca-ns-text-transform: uppercase;
}

.ponca-nav-strip *,
.ponca-nav-strip *::before,
.ponca-nav-strip *::after {
	box-sizing: border-box;
}

.ponca-nav-strip__container {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	max-width: var(--ponca-ns-container-max-width, 1770px);
	height: var(--ponca-ns-height);
	margin: 0 auto;
	gap: var(--ponca-ns-container-gap, 0);
	justify-content: var(--ponca-ns-container-justify, space-between);
	overflow-x: var(--ponca-ns-container-overflow-x, visible);
	flex-wrap: var(--ponca-ns-container-flex-wrap, nowrap);
}
.document_nev .ponca-nav-strip__container{
	display: flex;
	justify-content: space-between!important;
	overflow-x: hidden!important;
}
/* ---------- Items ---------- */
.ponca-nav-strip__item {
	flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
	gap: var(--ponca-ns-gap-inner);
	height: var(--ponca-ns-height);
	background-color: var(--ponca-ns-bg);
	color: var(--ponca-ns-color);
	font-family: var(--ponca-ns-font-family);
	font-size: var(--ponca-ns-font-size);
	line-height: var(--ponca-ns-line-height);
	font-weight: var(--ponca-ns-font-weight);
	font-style: var(--ponca-ns-font-style);
	letter-spacing: var(--ponca-ns-letter-spacing);
	text-transform: var(--ponca-ns-text-transform);
}

.ponca-nav-strip__item-wrap:has(.ponca-nav-strip__sub-item.is-active) > .ponca-nav-strip__item,
.ponca-nav-strip__item-wrap:has(.ponca-nav-strip__sub.is-active) > .ponca-nav-strip__item {
    color: var(--ponca-ns-active-color, #EEDCD9);
	background-color: var(--ponca-ns-active-bg, #691103);
}
.ponca-nav-strip__item:hover,
.ponca-nav-strip__item:focus-visible {
	background-color: var(--ponca-ns-bg-hover);
	color: var(--ponca-ns-color-hover);
	text-decoration: none;
}

.ponca-nav-strip__item:focus-visible {
	outline: 2px solid var(--ponca-ns-active-bg);
	outline-offset: -2px;
}

/* ---------- Active state ---------- */
.ponca-nav-strip__item.is-active {
	background-color: var(--ponca-ns-active-bg);
	color: var(--ponca-ns-active-color);
}

.ponca-nav-strip__item.is-active:hover,
.ponca-nav-strip__item.is-active:focus-visible {
	background-color: var(--ponca-ns-active-bg-hover);
	color: var(--ponca-ns-active-color-hover);
}

.ponca-nav-strip__item.is-active:focus-visible {
	outline-color: var(--ponca-ns-active-color);
}

.ponca-nav-strip__label {
	display: inline-block;
}

/* ---------- Alignment variants ---------- */
.ponca-nav-strip.alignwide  .ponca-nav-strip__container,
.ponca-nav-strip.alignfull  .ponca-nav-strip__container {
	max-width: 1770px;
}

/* ---------- Scroll hint on small screens ---------- */
@media (max-width: 1280px) {
	.ponca-nav-strip__container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 768px) {
	.ponca-nav-strip__container {
		justify-content: flex-start;
		/* Hide scrollbar visually but keep it scrollable */
		scrollbar-width: thin;
	}
	.ponca-nav-strip__container::-webkit-scrollbar {
		height: 4px;
	}
	.ponca-nav-strip__container::-webkit-scrollbar-thumb {
		background: rgba(105, 17, 3, 0.3);
		border-radius: 2px;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.ponca-nav-strip__item {
		transition: none;
	}
}