/* Digital Portal 1.0.12 — readable layer on top of the minified main.css.
   Kept as a separate file so the minified bundle is never hand-edited.
   Rules here win by load order (enqueued after main.css) and specificity. */

/* --- 3. Single post: content anchors are underlined and coloured. --- */
.dp-entry a {
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--dp-light-accent, #0b5fff);
}
.dp-entry a:hover,
.dp-entry a:focus-visible {
	color: var(--dp-dark-accent, #0b5fff);
}
.dp-entry a:visited {
	color: var(--dp-light-accent, #0b5fff);
}
/* The "Source:" line stays in the DOM (reading.js appends it on copy)
   but is no longer shown at the end of the article. */
.dp-article-source {
	display: none !important;
}

/* --- 3. Views + share count in the article actions row. --- */
.dp-article-views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	white-space: nowrap;
}
.dp-article-views .dp-icon {
	width: 20px;
	height: 20px;
}
.dp-share-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* --- 4. Pagination arrows (text is replaced in PHP; this keeps the
   arrow and the label aligned and the hit area usable). --- */
.dp-pagination .prev,
.dp-pagination .next {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.dp-pagination .dp-page-arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* --- 2. Section styles: tinted / dark / accent backgrounds. --- */
.dp-home-section.dp-section--tinted {
	background: color-mix(in srgb, var(--dp-light-accent, #0b5fff) 7%, transparent);
	border-radius: 12px;
	padding: 20px;
}
.dp-home-section.dp-section--dark {
	background: #111827;
	color: #f9fafb;
	border-radius: 12px;
	padding: 20px;
}
.dp-home-section.dp-section--dark .dp-card-title a,
.dp-home-section.dp-section--dark .dp-section-title {
	color: #f9fafb;
}
.dp-home-section.dp-section--accent {
	background: var(--dp-light-accent, #0b5fff);
	color: #fff;
	border-radius: 12px;
	padding: 20px;
}
.dp-home-section.dp-section--accent .dp-card-title a,
.dp-home-section.dp-section--accent .dp-section-title,
.dp-home-section.dp-section--accent .dp-card-excerpt {
	color: #fff;
}
/* Slider sections reuse the existing dp-carousel markup; cards keep
   a fixed width so the track scrolls instead of wrapping. */
.dp-home-section.dp-section--slider .dp-carousel-track > .dp-card {
	flex: 0 0 min(320px, 85vw);
	scroll-snap-align: start;
}
.dp-home-section.dp-section--slider .dp-carousel-track {
	scroll-snap-type: x mandatory;
}

/* --- Smooth scroll on single posts: anchor jumps (table of contents)
   already use scroll-behavior: smooth from the theme; this keeps the
   jumped-to heading visible below the sticky header + share bar instead
   of sliding underneath it. --- */
html {
	scroll-padding-top: calc(var(--dp-share-sticky-offset, 140px) + 64px);
}

/* --- 7. Sticky share bar: container-width glass banner, aligned with the
   navbar/menu. Reading time, views and share count stay in the banner on
   the left; the share buttons sit at its right corner. --- */
.dp-article-actions.dp-share-sticky {
	transition: box-shadow .2s ease, background-color .2s ease;
}
/* Text stays grouped on the left, buttons pushed to the right corner — in
   the in-flow bar below the featured image as well as in the sticky bar. */
.dp-article-actions .dp-share-icons {
	margin-inline-start: auto;
}
.dp-article-actions.dp-share-sticky.is-scrolled {
	position: fixed;
	/* Same width as the menu/navbar container (.dp-container is
	   min(var(--dp-container), 100% - 32px), centred) — never full width. */
	inset-inline: 0;
	top: var(--dp-share-sticky-offset, 0px);
	/* z-index 15, deliberately below the sticky header (20): the menu
	   dropdown and its preview panel live inside the header's stacking
	   context, so a banner above the header would paint over an open
	   menu. At 15 the banner still sits above article content (which
	   has no z-index) — the same level as its in-flow sticky state. */
	z-index: 15;
	width: min(var(--dp-container, 1200px), 100% - 32px);
	margin-inline: auto;
	/* Glass: page background at 72% + blur, so the banner adapts to light
	   and dark mode instead of forcing a white bar. */
	background: rgba(255, 255, 255, .78);
	background: color-mix(in srgb, var(--dp-bg) 72%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.5);
	backdrop-filter: blur(14px) saturate(1.5);
	color: var(--dp-text);
	border: 1px solid var(--dp-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
	border-radius: 12px;
	padding: 8px 12px;
	justify-content: flex-start;
	gap: 12px;
	/* Let clicks pass through the banner's empty areas to the content
	   scrolling underneath; only the share buttons stay clickable. */
	pointer-events: none;
}
.dp-article-actions.dp-share-sticky.is-scrolled .dp-share-icons {
	pointer-events: auto;
}

/* --- Pagination arrows: the theme's box rule also styles the inner arrow
   span, drawing a second box inside the button. Reset it so the arrow
   button is one box, exactly like the number buttons. --- */
.dp-pagination .dp-page-arrow {
	border: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	min-inline-size: 0;
	display: inline;
}

/* --- 8. Desktop sub-menu: preview on top-level hover, equal-height boxes. --- */
.dp-primary .dp-menu > li:hover > .dp-submenu-stories,
.dp-primary .dp-menu > li:focus-within > .dp-submenu-stories {
	display: grid;
}
/* On desktop the top-level <li> is position:static (the sub-menu is a
   mega dropdown anchored to the nav), so the panel — a child of the <li> —
   also anchors to the nav. The base rule's inset-inline-start:100% then
   puts the panel a full nav-width to the right, i.e. off-screen: it was
   in the DOM and toggled on hover, but never visible (live-test finding,
   2026-11-12). Anchor it beside the sub-menu, below the nav, like the
   sub-menu itself. The desktop sub-menu is 240px wide (main.css,
   @media (width >= 901px) .dp-primary .dp-menu .sub-menu) — 280px is the
   mobile width, and using it left a 40px gap between the two (live-test
   finding, 2026-11-12). At 240px the panel's left edge touches the
   sub-menu's right edge exactly, and the two form one flush mega-panel:
   the sub-menu already drops its right border on desktop and the panel
   drops its left border, with matching square corners on the shared edge. */
@media (width >= 901px) {
	.dp-primary .dp-menu > li > .dp-submenu-stories {
		inset-block-start: 100%;
		inset-inline-start: 240px;
	}
}
.dp-primary .dp-menu > li:hover > .sub-menu,
.dp-primary .dp-menu > li:focus-within > .sub-menu {
	min-height: var(--dp-submenu-h, 240px);
}
.dp-primary .dp-menu > li > .dp-submenu-stories {
	min-height: var(--dp-submenu-h, 240px);
	align-content: center;
}

/* --- 5. Parallax ads: the reveal window already exists; on desktop the
   creative moves slower than the page. background-attachment: fixed
   forces a repaint of the whole background on every scroll frame and is
   the classic cause of stuttering scroll on touch/mobile, so it is only
   enabled where a mouse-driven desktop can actually do it smoothly;
   everywhere else the creative scrolls normally with the page. --- */
.dp-ad-parallax .dp-ad-creative {
	background-attachment: scroll;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.dp-ad-parallax .dp-ad-creative {
		background-attachment: fixed;
	}
}

/* --- 5. Skyscraper rails stay visible while scrolling (fixed, not
   absolute) and never overlap the back-to-top button. --- */
.dp-ad-sticky-left,
.dp-ad-sticky-right {
	z-index: 40;
}

/* --- 6. Consent: third-party ad code is held until consent; the
   placeholder keeps the layout from jumping. --- */
.dp-ad-consent-pending {
	min-height: 90px;
}