/* ==========================================================================
   Darkury Video Vault — front-end styles
   A film-vault aesthetic: near-black stock, brass instrumentation accents,
   monospace metadata (durations/timestamps read like a reel-can label).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* "auto" (default) -- inherits the surrounding theme's background/text
   colors instead of imposing a fixed palette, so the vault blends into
   whatever site it's dropped into with zero configuration. Also used as
   the fallback for the bare .dvv-theme-scope selector (before any
   data-dvv-theme attribute is present). */
.dvv-theme-scope,
.dvv-theme-scope[data-dvv-theme="auto"] {
	--dvv-bg:        transparent;
	--dvv-surface:   rgba(127, 127, 127, 0.06);
	--dvv-surface-2: rgba(127, 127, 127, 0.1);
	--dvv-border:    rgba(127, 127, 127, 0.28);
	--dvv-text:      inherit;
	--dvv-text-dim:  inherit;
	--dvv-brass:     #c89b3c;
	--dvv-brass-dim: #8a6c2c;
	--dvv-radius:    3px;
}

.dvv-theme-scope[data-dvv-theme="auto"] .dvv-card-date,
.dvv-theme-scope[data-dvv-theme="auto"] .dvv-single-meta time,
.dvv-theme-scope[data-dvv-theme="auto"] .dvv-empty {
	opacity: 0.65;
}

/* "Match Site Theme" also inherits typography, not just color -- headings
   and body text should read like the rest of the page they're embedded in.
   The monospace duration/date/category accents are left alone on purpose,
   as a small consistent brand detail regardless of theme. */
.dvv-theme-scope[data-dvv-theme="auto"].dvv-archive-wrap,
.dvv-theme-scope[data-dvv-theme="auto"].dvv-single-wrap,
.dvv-theme-scope[data-dvv-theme="auto"].dvv-shortcode-wrap,
.dvv-theme-scope[data-dvv-theme="auto"].dvv-featured-widget {
	font-family: inherit;
}

.dvv-theme-scope[data-dvv-theme="auto"] .dvv-archive-title,
.dvv-theme-scope[data-dvv-theme="auto"] .dvv-single-title,
.dvv-theme-scope[data-dvv-theme="auto"] .dvv-card-title {
	font-family: inherit;
	font-weight: 700;
}

/* The biggest source of a page not "feeling native" isn't color or font --
   it's a second box inside the theme's own content container. In auto
   mode we don't impose a fixed 1200px branded box, and we don't fight a
   theme's own content width if it has one -- but some themes give plain
   content in <main> zero spacing of their own, so we still keep sane,
   modest breathing room here rather than jamming edge-to-edge. */
.dvv-theme-scope[data-dvv-theme="auto"].dvv-archive-wrap,
.dvv-theme-scope[data-dvv-theme="auto"].dvv-single-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 20px;
}

.dvv-theme-scope[data-dvv-theme="dark"] {
	--dvv-bg:        #0e0e10;
	--dvv-surface:   #18181b;
	--dvv-surface-2: #1f1f23;
	--dvv-border:    #2a2a2f;
	--dvv-text:      #ededed;
	--dvv-text-dim:  #9a9aa2;
	--dvv-brass:     #c89b3c;
	--dvv-brass-dim: #8a6c2c;
}

.dvv-theme-scope[data-dvv-theme="medium"] {
	--dvv-bg:        #232327;
	--dvv-surface:   #2b2b30;
	--dvv-surface-2: #323238;
	--dvv-border:    #3d3d44;
	--dvv-text:      #f2f2f0;
	--dvv-text-dim:  #b7b7bf;
	--dvv-brass:     #d6ac57;
	--dvv-brass-dim: #a3813a;
}

.dvv-theme-scope[data-dvv-theme="light"] {
	--dvv-bg:        #f7f5f0;
	--dvv-surface:   #ffffff;
	--dvv-surface-2: #efece4;
	--dvv-border:    #e0dcd0;
	--dvv-text:      #1c1c1e;
	--dvv-text-dim:  #6b6b70;
	--dvv-brass:     #a5751f;
	--dvv-brass-dim: #8a6c2c;
}

.dvv-archive-wrap,
.dvv-single-wrap {
	background: var(--dvv-bg);
	color: var(--dvv-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px 72px;
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* -- Archive header -- */

.dvv-archive-header {
	border-bottom: 1px solid var(--dvv-border);
	padding-bottom: 24px;
	margin-bottom: 40px;
	position: relative;
}

.dvv-archive-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--dvv-brass);
}

.dvv-archive-title {
	font-weight: 900;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -0.01em;
	margin: 16px 0 8px;
	color: var(--dvv-text);
}

.dvv-archive-tagline {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dvv-brass);
	margin: 0;
}

.dvv-controls-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
}

.dvv-filter-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 0;
}

.dvv-filter-bar label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dvv-text-dim);
}

.dvv-filter-bar select {
	background: var(--dvv-surface);
	color: var(--dvv-text);
	border: 1px solid var(--dvv-border);
	border-radius: var(--dvv-radius);
	padding: 7px 12px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	cursor: pointer;
}

.dvv-filter-bar select:hover,
.dvv-filter-bar select:focus {
	border-color: var(--dvv-brass-dim);
	outline: none;
}

/* -- Grid -- */

.dvv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px;
}

.dvv-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--dvv-surface);
	border: 1px solid var(--dvv-border);
	border-radius: var(--dvv-radius);
	overflow: hidden;
	transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.2s ease;
}

.dvv-card:hover {
	transform: translateY(-3px);
	border-color: var(--dvv-brass-dim);
}

.dvv-card:hover .dvv-card-title {
	color: var(--dvv-brass);
}

.dvv-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--dvv-surface-2);
	overflow: hidden;
}

.dvv-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dvv-card-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dvv-text-dim);
}

.dvv-card-thumb-placeholder .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
	opacity: 0.4;
}

.dvv-duration-badge {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(14, 14, 16, 0.88);
	border: 1px solid var(--dvv-brass-dim);
	color: var(--dvv-brass);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 3px 7px;
	border-radius: 2px;
}

.dvv-card-body {
	padding: 14px 16px 18px;
}

.dvv-card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
	transition: color 0.18s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dvv-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dvv-card-date {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--dvv-text-dim);
	text-transform: uppercase;
}

.dvv-card-category {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dvv-brass);
	border: 1px solid var(--dvv-brass-dim);
	border-radius: 2px;
	padding: 2px 6px;
	white-space: nowrap;
}

.dvv-empty {
	color: var(--dvv-text-dim);
	font-family: 'IBM Plex Mono', monospace;
	padding: 40px 0;
	text-align: center;
}

/* -- Pagination -- */

.dvv-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 16px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
}

.dvv-pagination .page-numbers {
	color: var(--dvv-text-dim);
	text-decoration: none;
	padding: 6px 12px;
	border: 1px solid var(--dvv-border);
	border-radius: var(--dvv-radius);
}

.dvv-pagination .page-numbers.current,
.dvv-pagination .page-numbers:hover {
	color: var(--dvv-brass);
	border-color: var(--dvv-brass-dim);
}

/* -- Single video page -- */

.dvv-single-header {
	border-bottom: 1px solid var(--dvv-border);
	padding-bottom: 20px;
	margin-bottom: 24px;
}

.dvv-single-title {
	font-weight: 900;
	font-size: clamp(24px, 3.5vw, 36px);
	margin: 0 0 14px;
}

.dvv-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dvv-text-dim);
}

.dvv-single-duration {
	color: var(--dvv-brass);
	border: 1px solid var(--dvv-brass-dim);
	padding: 3px 8px;
	border-radius: 2px;
}

.dvv-youtube-link {
	color: var(--dvv-text-dim);
	text-decoration: none;
	border-bottom: 1px dotted var(--dvv-text-dim);
}

.dvv-youtube-link:hover {
	color: var(--dvv-brass);
	border-color: var(--dvv-brass);
}

.dvv-single-embed {
	border: 1px solid var(--dvv-border);
	border-radius: var(--dvv-radius);
	margin-bottom: 32px;
	overflow: hidden;
}

/* Only the player itself should always be black (matches YouTube's own
   player chrome) -- the description text below it should follow the theme. */
.dvv-single-embed iframe,
.dvv-single-embed .wp-embed-aspect-16-9 {
	background: #000;
}

.dvv-single-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
}

.dvv-single-embed p {
	padding: 20px 24px;
	margin: 0;
	color: var(--dvv-text-dim);
	line-height: 1.7;
	font-size: 15px;
}

.dvv-back-link {
	display: inline-block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dvv-brass);
	text-decoration: none;
}

.dvv-back-link:hover {
	text-decoration: underline;
}

/* -- Shortcode embed (dropped into a theme page) -- */

.dvv-shortcode-wrap {
	background: var(--dvv-bg);
	color: var(--dvv-text);
	padding: 28px;
	border-radius: 6px;
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dvv-shortcode-wrap .dvv-filter-bar {
	margin-top: 0;
	margin-bottom: 20px;
}

.dvv-shortcode-archive-link {
	margin: 28px 0 0;
	text-align: center;
}

.dvv-shortcode-archive-link a {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dvv-brass);
	text-decoration: none;
}

.dvv-shortcode-archive-link a:hover {
	text-decoration: underline;
}

/* -- Featured video widget -- */

.dvv-featured-widget {
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
	padding-bottom: 16px;
}

.dvv-featured-widget .dvv-card {
	background: var(--dvv-surface);
	border: 1px solid var(--dvv-border);
}

.dvv-featured-widget .dvv-card-title {
	font-size: 14px;
}

.dvv-featured-widget .dvv-card-date {
	color: var(--dvv-text-dim);
}

.dvv-featured-widget .dvv-card.dvv-card--borderless {
	border-color: transparent;
}

.dvv-widget-archive-link {
	text-align: center;
	margin: 12px 0 0;
}

.dvv-widget-archive-link a {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dvv-brass);
	text-decoration: none;
	border-bottom: 1px dotted var(--dvv-brass-dim);
}

.dvv-widget-archive-link a:hover {
	text-decoration: none;
	border-bottom-style: solid;
}

@media (prefers-reduced-motion: reduce) {
	.dvv-card {
		transition: none;
	}
}