/*
 * HTMLy blog overrides for Prosilver (Dark Edition)
 * --------------------------------------------------------------
 * Additive layer ONLY. Loaded as a separate <link> after
 * stylesheet.css so every file the forum theme ships stays a
 * byte-identical copy in css/ and future re-syncs are a straight
 * copy. Recolouring lives in dark.css (the forum's moving target)
 * and must not be duplicated here.
 * --------------------------------------------------------------
 */

/* ===================================
   Blog-specific markup glue
   =================================== */

/* htmly breadcrumbs are a raw HTML string (links + » separators),
   rendered inside phpBB's nav-breadcrumbs structure as one crumb.
   Keep long post titles from blowing out the navbar. */
.navbar .breadcrumbs .crumb {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* htmly's built-in search() helper output (used on the 404 pages) —
   restyle its fixed markup to look like prosilver's inputbox/button. */
#search-form {
	margin: 10px 0;
}

#search-form .search-input {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 4px;
	color: #CCCCCC;
	padding: 5px 8px;
	font-size: 1em;
}

#search-form .search-button {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 4px;
	color: #CCCCCC;
	padding: 5px 12px;
	font-size: 1em;
	cursor: pointer;
}

#search-form .search-button:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Article titles — prosilver sizes .postbody h3 for the tiny
   "Re: subject" line in threads (1.1em); blog post titles need
   headline weight. */
.postbody h3.first {
	font-size: 1.8em;
	line-height: 130%;
}

.postbody h3.first a {
	text-decoration: none;
}

.postbody h3.first a:hover {
	text-decoration: underline;
}

/* Featured media (image / video / audio / quote posts) */
.featured {
	margin-bottom: 10px;
}

.featured img {
	max-width: 100%;
	height: auto;
}

.embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
}

.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}

.embed-responsive .embed-responsive-item {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ===================================
   Accessibility enhancements
   =================================== */

/* Visible focus for keyboard users */
.inputbox:focus-visible,
.button:focus-visible,
a.button1:focus-visible,
a.button2:focus-visible,
input.button1:focus-visible,
input.button2:focus-visible,
input.button3:focus-visible {
	outline: 2px solid #2a8ff7;
	outline-offset: 2px;
}

/* Respect reduced-motion preference (disables UnreadPulse etc.) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===================================
   Dark-mode niceties
   =================================== */

/* Depth for floating elements */
.dropdown .dropdown-contents,
.phpbb_alert {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
	            0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Readable text selection */
::selection {
	background-color: #2a8ff7;
	color: #FFFFFF;
}