/* =======================================================================
   QUALIFIED DEALS — BRAND OVERRIDES & UTILITIES
   File: assets/css/qd-brand.css
   Loaded by: functions.php (front-end + editor)
   Source of truth: Master Business Document v2.1
   =======================================================================
   This file covers what theme.json cannot express:
   - Image hover effects (greyscale logo strip)
   - Smooth scrolling
   - Focus rings for accessibility
   - Button hover lift / transitions
   - Pricing card popular-badge positioning
   - Small typography refinements
   ======================================================================= */


/* -------------------------------------------------------------------
   1. ROOT — CSS custom properties mirror for legacy references
   ------------------------------------------------------------------- */
:root {
	--qd-midnight:        #1A1A1A;
	--qd-navy:            #051C2C;
	--qd-signal-blue:     #0065BD;
	--qd-signal-blue-dk:  #004F94;
	--qd-cream:           #F7F3EE;
	--qd-stone:           #D6D3CF;
	--qd-mist:            #8C8C8C;

	--qd-shadow-card:     0 1px 3px rgba(5, 28, 44, .06), 0 4px 12px rgba(5, 28, 44, .04);
	--qd-shadow-hover:    0 4px 12px rgba(5, 28, 44, .08), 0 12px 32px rgba(5, 28, 44, .06);
	--qd-transition:      all .25s cubic-bezier(.4, 0, .2, 1);
}


/* -------------------------------------------------------------------
   2. GLOBAL SMOOTHING
   ------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Selection */
::selection {
	background: var(--qd-signal-blue);
	color: var(--qd-cream);
}


/* -------------------------------------------------------------------
   3. ACCESSIBILITY — Focus rings
   theme.json can't reliably set :focus-visible on every element
   ------------------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--qd-signal-blue);
	outline-offset: 3px;
	border-radius: 4px;
}


/* -------------------------------------------------------------------
   4. BUTTONS — Hover lift + smooth transition
   ------------------------------------------------------------------- */
.wp-block-button__link {
	transition: var(--qd-transition);
	will-change: transform, box-shadow, background-color;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 101, 189, .25);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Outline button variant — defined in theme.json but reinforced here for cream backgrounds */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
}


/* -------------------------------------------------------------------
   5. HEADINGS — Eyebrow / label utility class
   For small uppercase tracking labels used above section titles.
   Apply via custom class on a Paragraph block.
   ------------------------------------------------------------------- */
.qd-eyebrow,
.is-style-qd-eyebrow {
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--qd-signal-blue) !important;
	line-height: 1.4 !important;
	margin: 0 0 8px !important;
}


/* -------------------------------------------------------------------
   6. STAT / DATA DISPLAY — Big numbers for hero & case study
   ------------------------------------------------------------------- */
.qd-stat {
	font-size: clamp(32px, 4vw, 48px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	font-feature-settings: "tnum" 1, "lnum" 1;
}


/* -------------------------------------------------------------------
   7. LOGO STRIP — Greyscale by default, full colour on hover
   Used in the social-proof bar (Section 2 of homepage).
   ------------------------------------------------------------------- */
.qd-logo-strip img {
	filter: grayscale(100%) opacity(.65);
	transition: filter .3s ease;
}

.qd-logo-strip img:hover,
.qd-logo-strip img:focus {
	filter: grayscale(0%) opacity(1);
}


/* -------------------------------------------------------------------
   8. PRICING CARDS — Featured tier badge ("Most Popular")
   ------------------------------------------------------------------- */
.qd-pricing-featured {
	position: relative;
}

.qd-pricing-featured::before {
	content: "Most Popular";
	position: absolute;
	top: -12px;
	right: 24px;
	background: var(--qd-signal-blue);
	color: var(--qd-cream);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	padding: 6px 12px;
	border-radius: 4px;
	text-transform: uppercase;
}

/* Subtle card hover */
.qd-pricing-card {
	transition: var(--qd-transition);
}

.qd-pricing-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--qd-shadow-hover);
}


/* -------------------------------------------------------------------
   9. NAVY SECTION TEXT — Default heading & paragraph colours
   When a Group block uses QD Navy or QD Midnight background, headings
   should automatically become cream. theme.json can't cascade this
   reliably across all child blocks.
   ------------------------------------------------------------------- */
.has-qd-navy-background-color :where(h1, h2, h3, h4, h5, h6),
.has-qd-midnight-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--qd-cream);
}

.has-qd-navy-background-color :where(p, li),
.has-qd-midnight-background-color :where(p, li) {
	color: var(--qd-stone);
}

/* Links on dark backgrounds */
.has-qd-navy-background-color a:not(.wp-block-button__link),
.has-qd-midnight-background-color a:not(.wp-block-button__link) {
	color: var(--qd-cream);
	text-decoration: underline;
	text-decoration-color: var(--qd-signal-blue);
	text-underline-offset: 3px;
}


/* -------------------------------------------------------------------
   10. LISTS — Clean bullet-less feature lists used in pricing & "why" sections
   Apply via class "qd-feature-list" on a List block (Advanced → Additional CSS class)
   ------------------------------------------------------------------- */
.qd-feature-list,
.is-style-qd-feature-list {
	list-style: none !important;
	padding-left: 0 !important;
}

.qd-feature-list li,
.is-style-qd-feature-list li {
	position: relative;
	padding-left: 28px;
	line-height: 1.7;
}

.qd-feature-list li::before,
.is-style-qd-feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 16px;
	height: 2px;
	background: var(--qd-signal-blue);
}


/* -------------------------------------------------------------------
   11. SECTION DIVIDERS & BORDERS
   ------------------------------------------------------------------- */
.qd-divider-top {
	border-top: 1px solid var(--qd-stone);
	padding-top: var(--wp--preset--spacing--40);
}

.qd-divider-top-navy {
	border-top: 1px solid var(--qd-signal-blue);
	padding-top: var(--wp--preset--spacing--40);
}


/* -------------------------------------------------------------------
   12. TYPOGRAPHY MICRO-FIXES
   Letter-spacing on display text — Twenty Twenty-Five UI sometimes
   doesn't accept negative em values; force them here.
   ------------------------------------------------------------------- */
.has-display-font-size {
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
}

.has-h-1-font-size,
.has-h1-font-size {
	letter-spacing: -0.02em !important;
}

.has-h-2-font-size,
.has-h2-font-size {
	letter-spacing: -0.01em !important;
}

.has-stat-font-size {
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	font-feature-settings: "tnum" 1, "lnum" 1;
}


/* -------------------------------------------------------------------
   13. IMAGES — Rounded team photos (used in About + Team sections)
   ------------------------------------------------------------------- */
.wp-block-image.is-style-rounded img {
	border-radius: 50%;
	border: 3px solid var(--qd-cream);
	box-shadow: var(--qd-shadow-card);
}


/* -------------------------------------------------------------------
   14. FORMS — Project Brief / contact form styling
   Targets generic WPForms / Gravity Forms / native input fields.
   ------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	padding: 12px 16px;
	border: 1px solid var(--qd-stone);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--qd-midnight);
	transition: border-color .2s ease, box-shadow .2s ease;
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--qd-signal-blue);
	box-shadow: 0 0 0 3px rgba(0, 101, 189, .12);
}


/* -------------------------------------------------------------------
   15. RESPONSIVE — Mobile padding adjustments
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
	.wp-block-group.alignfull {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	.qd-pricing-featured::before {
		right: 50%;
		transform: translateX(50%);
	}
}


/* -------------------------------------------------------------------
   16. PRINT — Light invoice / proposal printing
   ------------------------------------------------------------------- */
@media print {
	.wp-block-buttons,
	.wp-block-social-links,
	nav,
	footer {
		display: none !important;
	}

	body {
		background: #FFFFFF !important;
		color: #000000 !important;
	}
}