/*
Theme Name: Digital Canvas
Theme URI: https://digitalcanvas.com
Author: Jeffrey Shaikh
Author URI: https://digitalcanvas.com
Description: Custom block theme for Digital Canvas — warm professionalism with typographic discipline. Built to the v1 design brief.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digitalcanvas
*/

/* ---------------------------------------------------------------
   Signature motifs & components the editor can't express cleanly.
   Everything token-like (colors, type, spacing) lives in theme.json.
   --------------------------------------------------------------- */

/* Brush smear — one per page, behind the H1 key phrase.
   Page accent variants; opacity baked into the SVGs (~0.22). */
.dc-hl {
	position: relative;
	white-space: nowrap;
	z-index: 0;
}
.dc-hl::before {
	content: "";
	position: absolute;
	left: -2%;
	bottom: 0.02em;
	width: 104%;
	height: 0.5em;
	background: url(assets/smear-red.svg) no-repeat center / 100% 100%;
	z-index: -1;
}
.dc-accent-green .dc-hl::before { background-image: url(assets/smear-green.svg); }
.dc-accent-blue .dc-hl::before { background-image: url(assets/smear-blue.svg); }

/* RGB stripe band — max twice per page (photo top edge, footer top edge). */
.dc-stripes {
	display: flex;
	height: 5px;
	width: 100%;
}
.dc-stripes span { flex: 1 1 0; display: block; }
.dc-stripes span:nth-child(1) { background: var(--wp--preset--color--accent-red); }
.dc-stripes span:nth-child(2) { background: var(--wp--preset--color--accent-green); }
.dc-stripes span:nth-child(3) { background: var(--wp--preset--color--accent-blue); }

/* Eyebrow */
.dc-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

/* Cards (sound-familiar etc.) */
.dc-card {
	background: #fffdf9;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 3px;
	padding: 38px 40px;
	height: 100%;
}
.dc-card h3 { margin-top: 0; }

/* Service rows */
.dc-svc-row {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding: 26px 0 !important;
	margin: 0 !important;
}
.dc-svc-row:last-of-type { border-bottom: 1px solid var(--wp--preset--color--hairline); }

/* Pull quote rule */
.dc-pull {
	border-left: 3px solid var(--wp--preset--color--accent-red);
	padding: 6px 0 6px 28px;
	font-size: 24px;
	line-height: 1.45;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* Stat blocks */
.dc-stat {
	border-top: 3px solid var(--wp--preset--color--ink);
	padding-top: 26px;
}
.dc-stat .dc-stat-num {
	font-size: 54px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Icon list — replaces the default bullet with a small checkmark in the
   page's accent color (mask technique, so it follows --dc-btn automatically
   on green/blue pages too). Reusable: add dc-list-icon to any wp:list. */
.dc-list-icon {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.dc-list-icon li {
	position: relative;
	padding-left: 34px;
}
.dc-list-icon li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 20px;
	height: 20px;
	background-color: var(--dc-btn);
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9ImJsYWNrIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05IDEyLjc1IDExLjI1IDE1IDE1IDkuNzVNMjEgMTJhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBaIi8+PC9zdmc+") no-repeat center / contain;
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9ImJsYWNrIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05IDEyLjc1IDExLjI1IDE1IDE1IDkuNzVNMjEgMTJhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBaIi8+PC9zdmc+") no-repeat center / contain;
}
/* Modifier: arrow-right-circle instead of the default check-circle */
.dc-list-icon.dc-icon-arrow li::before {
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9ImJsYWNrIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xMi43NSAxNSAzLTNtMCAwLTMtM20zIDNoLTcuNU0yMSAxMmE5IDkgMCAxIDEtMTggMCA5IDkgMCAwIDEgMTggMFoiLz48L3N2Zz4=") no-repeat center / contain;
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9ImJsYWNrIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xMi43NSAxNSAzLTNtMCAwLTMtM20zIDNoLTcuNU0yMSAxMmE5IDkgMCAxIDEtMTggMCA5IDkgMCAwIDEgMTggMFoiLz48L3N2Zz4=") no-repeat center / contain;
}

/* Step flow — icon-in-circle + connecting line for numbered "how it works"
   style sections. Icon color follows the page accent. Each .dc-step-icon
   sets its own icon via the --icon custom property inline. */
.dc-steps-row {
	position: relative;
}
.dc-steps-row::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 24px;
	right: 24px;
	height: 2px;
	background: var(--wp--preset--color--hairline);
	z-index: 0;
}
@media (max-width: 781px) {
	.dc-steps-row::before { display: none; }
}
.dc-step-icon {
	position: relative;
	z-index: 1;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--dc-btn);
	margin-bottom: 20px;
}
.dc-step-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	background-color: #fff;
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
}

/* Photo frame */
.dc-photo {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}
.dc-photo .dc-stripes { position: absolute; top: 0; left: 0; z-index: 2; }
.dc-photo img { display: block; width: 100%; height: auto; }
.dc-photo .dc-photo-tag {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background: rgba(250, 247, 242, 0.95);
	border-radius: 3px;
	padding: 14px 18px;
	font-size: 16px;
	color: var(--wp--preset--color--body);
	z-index: 2;
}

/* ---------------------------------------------------------------
   Buttons — square-ish, never pill. Universal sliding-reveal hover:
   base = page accent, slide layer = deepened accent, press on click.
   Two negative-z pseudo layers so the text (a bare text node in WP
   buttons) stays on top without needing a wrapping span.
   --------------------------------------------------------------- */
body {
	--dc-btn: #e63946;
	--dc-btn-deep: #b8202d;
}
.dc-accent-green { --dc-btn: #43aa4a; --dc-btn-deep: #2f7d36; }
.dc-accent-blue { --dc-btn: #1976d2; --dc-btn-deep: #10589f; }

.wp-block-button__link,
.dc-btn,
.fluentform .ff-btn-submit {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: transparent !important;
	color: #fff;
	border-radius: 3px !important;
	font-weight: 700;
	transition: transform 0.1s ease;
}
.wp-block-button__link::after,
.dc-btn::after,
.fluentform .ff-btn-submit::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dc-btn);
	z-index: -2;
}
.wp-block-button__link::before,
.dc-btn::before,
.fluentform .ff-btn-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dc-btn-deep);
	transform: translateX(-101%);
	transition: transform 0.28s ease;
	z-index: -1;
}
.wp-block-button__link:hover::before,
.dc-btn:hover::before,
.fluentform .ff-btn-submit:hover::before {
	transform: translateX(0);
}
.wp-block-button__link:active,
.dc-btn:active,
.fluentform .ff-btn-submit:active {
	transform: translateY(1px) scale(0.99);
}

/* Buttons on charcoal: never inherit the quiet gray link color */
.dc-charcoal .wp-block-button__link,
.dc-charcoal .dc-btn,
.dc-charcoal a.wp-element-button {
	color: #fff;
}
.wp-block-button__link:hover,
.dc-btn:hover {
	color: #fff;
	text-decoration: none;
}

/* Reduced motion: instant color change instead of slide, no press shift */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link::before,
	.dc-btn::before,
	.fluentform .ff-btn-submit::before {
		transition: none;
	}
	.wp-block-button__link,
	.dc-btn,
	.fluentform .ff-btn-submit {
		transition: none;
	}
	.wp-block-button__link:active,
	.dc-btn:active,
	.fluentform .ff-btn-submit:active {
		transform: none;
	}
	.dc-social .wp-block-social-link a {
		transition: none;
	}
}

/* Outline style (e.g. Security hero secondary): transparent base,
   accent fill slides in on hover */
.is-style-outline .wp-block-button__link {
	color: var(--dc-btn);
	border: 1.5px solid var(--dc-btn);
}
.is-style-outline .wp-block-button__link::after { background: transparent; }
.is-style-outline .wp-block-button__link::before { background: var(--dc-btn); }
.is-style-outline .wp-block-button__link:hover { color: #fff; }

/* Per-page accent (class on <main>): green = app pages, blue = infra pages.
   Red is the theme.json default. */
.dc-accent-green .wp-block-button__link { background-color: var(--wp--preset--color--accent-green); }
.dc-accent-green p a { color: var(--wp--preset--color--accent-green); }
.dc-accent-green .dc-pull { border-left-color: var(--wp--preset--color--accent-green); }
.dc-accent-blue .wp-block-button__link { background-color: var(--wp--preset--color--accent-blue); }
.dc-accent-blue p a { color: var(--wp--preset--color--accent-blue); }
.dc-accent-blue .dc-pull { border-left-color: var(--wp--preset--color--accent-blue); }

/* Hairline nav border + stacking: header (and its dropdowns) always above
   page content, including the dc-stripes/photo motifs. */
.dc-header {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	position: relative;
	z-index: 500;
}

/* Navigation dropdowns: no label wrapping, sane width, solid background */
.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item__content {
	white-space: nowrap;
}
.wp-block-navigation__submenu-container {
	min-width: 260px !important;
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--hairline) !important;
	border-radius: 3px;
	padding: 6px 0 !important;
	z-index: 600 !important;
	box-shadow: 0 8px 24px rgba(36, 33, 29, 0.1), 0 2px 6px rgba(36, 33, 29, 0.06);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: #faf7f2;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 18px !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Fluent Forms: match the design system */
.fluentform .ff-el-form-control {
	background: #fffdf9;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 3px;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 17px;
	padding: 12px 14px;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--muted);
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--accent-red);
	outline-offset: 0;
}
.fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 16px;
}
.fluentform .ff-btn-submit {
	border: none !important;
	border-radius: 3px !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	padding: 16px 40px !important;
}
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--accent-red); }
.fluentform .error, .fluentform .text-danger { color: var(--wp--preset--color--accent-red); }

/* Charcoal zones: quiet link color */
.dc-charcoal a { color: #9aa3ac; text-decoration: none; }
.dc-charcoal a:hover { color: #f5f5f5; }

/* No accidental gaps between top-level template blocks (header/main/footer).
   Section spacing is owned by each section's own padding. */
.wp-site-blocks > * { margin-block-start: 0 !important; }

/* Footer: hairline divider against a preceding charcoal CTA band;
   invisible when the page above ends light. Stripes live at the very
   bottom edge (see template) — the page signs off with the signature. */
.dc-footer { border-top: 1px solid #242a31; }

/* Footer social icons: quiet gray, brighten on hover */
.dc-social .wp-block-social-link a { color: #9aa3ac; transition: color 0.15s ease; }
.dc-social .wp-block-social-link a:hover { color: #f5f5f5; }