/*
Theme Name: Vancouver Page Digital
Theme URI: https://vancouverpagedigital.com
Author: Vancouver Page Digital Inc.
Author URI: https://vancouverpagedigital.com
Description: A dark, channel-driven block theme for Vancouver Page Digital — a full-service digital marketing agency covering SEO, SEM, AEO, social, PR, advertising, and local marketing, with a portfolio section for the agency's own properties.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vancouver-page-digital
Tags: business, portfolio, one-column, two-columns, block-patterns, custom-colors, custom-menu, editor-style, full-site-editing, wide-blocks, dark
*/

/* ---------------------------------------------------------
   Signature elements: the channel-tag rail and reference
   codes. The agency works across many channels — the tags
   are literal service abbreviations, not decoration.
--------------------------------------------------------- */

.vpd-tag-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.vpd-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	padding: 0.35em 0.75em;
}

.vpd-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.vpd-status-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--signal);
	animation: vpd-pulse 2.2s ease-in-out infinite;
}

@keyframes vpd-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
	.vpd-status-dot { animation: none; }
}

/* Reference codes: SVC.01 for services, PROP.01 for owned properties */
.vpd-ref {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.02em;
}

/* Hairline separators between stacked rows */
.vpd-row-divider > * {
	border-top: 1px solid var(--wp--preset--color--line);
}
.vpd-row-divider > *:first-child {
	border-top: none;
}

/* Service / project card used in grids */
.vpd-card {
	border: 1px solid var(--wp--preset--color--line);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
}
.vpd-card:hover {
	border-color: var(--wp--preset--color--accent);
}

/* Screenshot placeholder frame used on project cards/pages until a
   real featured image is set */
.vpd-shot-frame {
	background: var(--wp--preset--color--charcoal);
	border: 1px solid var(--wp--preset--color--line);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vpd-shot-frame span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--mist);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Outline button style */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--void);
	border-color: var(--wp--preset--color--paper);
}