/*
Theme Name: DMD Signal
Theme URI: https://davidmartindesign.com/
Author: David Martin Design
Author URI: https://davidmartindesign.com/
Description: Full-site-editing block theme for David Martin Design. Implements the Local Signal brand identity system: Archivo / IBM Plex Sans / IBM Plex Mono, a fixed warm-earth palette, square corners, hairline rules, the arc device, and WCAG 2.1 AA colour pairings built into the defaults. No page builder, no ACF dependency, no build step.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dmd-signal
Tags: full-site-editing, block-patterns, block-styles, one-column, custom-colors, editor-style, featured-images, accessibility-ready, portfolio, blog
*/

/*
 * Most styling lives in theme.json. This file carries only what theme.json
 * cannot express: the focus ring, skip link, reduced-motion guard, the arc
 * device, annotation label, and a few structural helpers used by the patterns.
 * All colours below are the identity palette hexes, kept in sync with theme.json.
 */

:root {
	--dmd-clay: #B4472B;
	--dmd-ink: #14201F;
	--dmd-teal: #2F6F72;
	--dmd-ember: #E0793F;
	--dmd-paper: #F6F2EA;
	--dmd-offwhite: #FFFDF8;
	--dmd-altpaper: #EAE5DA;
	--dmd-border: #D9D3C7;
	--dmd-text-2: #3E4A47;
	--dmd-field: #6A7370;
}

/* --- Accessibility: focus is always visible, never removed --------------- */
:where(a, button, input, select, textarea, summary, [tabindex], .wp-block-navigation-item__content):focus {
	outline: 2px solid var(--dmd-clay);
	outline-offset: 2px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: 2px solid var(--dmd-clay);
	outline-offset: 2px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--dmd-clay);
	outline-offset: 2px;
}
/* On dark surfaces the ring switches to Ember for contrast. */
.has-deep-ink-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus,
.has-deep-ink-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.dmd-section--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus,
.dmd-section--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--dmd-ember);
}

/* --- Skip link --------------------------------------------------------- */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--dmd-ink);
	color: var(--dmd-offwhite);
	padding: 12px 22px;
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	text-decoration: none;
}
.skip-link.screen-reader-text:focus {
	left: 8px;
	top: 8px;
	outline: 2px solid var(--dmd-ember);
	outline-offset: 2px;
}

/* --- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* --- Square corners, everywhere ----------------------------------------- */
.wp-block-button__link,
.wp-block-search__button,
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select,
.wp-block-image img,
.wp-block-post-featured-image img,
figure.wp-block-image {
	border-radius: 0 !important;
}

/* Buttons are never underlined. */
.wp-block-button__link,
.wp-element-button {
	text-decoration: none !important;
}

/* --- Links carry an underline everywhere they are read as links, so colour
   is never the sole signal. Exceptions: buttons, the nav, and the logo. --- */
a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.dmd-lockup)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.dmd-lockup,
.wp-block-navigation a {
	text-decoration: none;
}

/* --- Hairline rule between content bands ------------------------------- */
.dmd-rule,
.dmd-band + .dmd-band {
	border-top: 1px solid var(--dmd-border);
}

/* --- Dark sections carry a literal Deep Ink background --------------
   (belt-and-braces alongside the .has-deep-ink-background-color preset class:
   keeps the surface correct if the preset CSS loads late, and lets contrast
   checkers that don't resolve --wp--preset-* custom properties see the real
   background.) */
.wp-block-group.dmd-section--dark {
	background-color: #14201f !important; /* literal: beats core's var()-based preset !important, and stays resolvable for contrast checkers */
}
.dmd-section--dark {
	color: var(--dmd-paper);
}

/* --- Dark sections: reverse headings, body and links to Off White ---
   Default link colour is Limestone Teal, which is only 2.9:1 on Deep Ink
   (identity: "never for text"). On dark surfaces links go Off White with an
   Ember hover/focus (5.6:1). */
.dmd-section--dark :is(h1, h2, h3, h4, h5, h6),
.has-deep-ink-background-color:not(.wp-block-button__link) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--dmd-offwhite);
}
.dmd-section--dark a:where(:not(.wp-element-button)),
.has-deep-ink-background-color a:where(:not(.wp-element-button)) {
	color: var(--dmd-offwhite);
}
.dmd-section--dark a:where(:not(.wp-element-button)):hover,
.dmd-section--dark a:where(:not(.wp-element-button)):focus,
.has-deep-ink-background-color a:where(:not(.wp-element-button)):hover,
.has-deep-ink-background-color a:where(:not(.wp-element-button)):focus {
	color: var(--dmd-ember);
}

/* --- Annotation / eyebrow label -------------------------------------- */
.dmd-eyebrow,
.is-style-dmd-eyebrow {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dmd-clay);
	margin: 0 0 0.75rem;
}
.has-deep-ink-background-color .dmd-eyebrow,
.has-deep-ink-background-color .is-style-dmd-eyebrow,
.dmd-section--dark .dmd-eyebrow,
.dmd-section--dark .is-style-dmd-eyebrow {
	color: var(--dmd-ember);
}

/* --- Clay-rule callout ------------------------------------------------- */
.is-style-dmd-clay-rule {
	border-left: 3px solid var(--dmd-clay);
	padding-left: var(--wp--preset--spacing--50, 1.5rem);
}

/* --- The arc device: one per dark section, cropped off an edge -------- */
.dmd-arc-crop {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.dmd-arc-crop > .dmd-arc-crop__art {
	position: absolute;
	right: -8%;
	bottom: -32%;
	width: min(46rem, 78%);
	color: var(--dmd-ember);
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}
.dmd-arc-crop > :not(.dmd-arc-crop__art) {
	position: relative;
	z-index: 1;
}
@media (max-width: 600px) {
	.dmd-arc-crop > .dmd-arc-crop__art {
		width: 120%;
		right: -20%;
		bottom: -18%;
	}
}

/* --- Header / footer lockup --------------------------------------------- */
.dmd-lockup {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}
.dmd-lockup__svg {
	display: block;
	width: auto;
	height: 2.5rem;
}
@media (max-width: 600px) {
	.dmd-lockup__svg {
		height: 2.125rem;
	}
}

/* --- Footer social icons (Facebook, LinkedIn only) -----------------
   Monochrome Warm Paper by default, Ember on hover/focus. Square
   hairline target box, consistent with the theme's corner + rule
   language. Focus ring is handled by the global dark-section rule. */
.dmd-social {
	display: flex;
	gap: 0.75rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}
.dmd-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--dmd-paper);
	border: 1px solid var(--dmd-text-2);
	text-decoration: none;
	transition: color 120ms ease, border-color 120ms ease;
}
.dmd-social__link:hover,
.dmd-social__link:focus-visible {
	color: var(--dmd-ember);
	border-color: var(--dmd-ember);
}
.dmd-social__icon {
	display: block;
	width: 20px;
	height: 20px;
}
@media (prefers-reduced-motion: reduce) {
	.dmd-social__link {
		transition: none;
	}
}

/* --- Header: current page + hover underline in Signal Clay ---------- */
.wp-block-navigation.dmd-nav > ul > li > .wp-block-navigation-item__content,
.wp-block-navigation.dmd-nav > ul > li > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.wp-block-navigation.dmd-nav > ul > li > .wp-block-navigation-item__content:hover,
.wp-block-navigation.dmd-nav > ul > li > .wp-block-navigation-item__content:focus,
.wp-block-navigation.dmd-nav > ul > li.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.dmd-nav > ul > li.current_page_item > .wp-block-navigation-item__content,
.wp-block-navigation.dmd-nav > ul > li > .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover,
.wp-block-navigation.dmd-nav > ul > li > .wp-block-navigation-submenu > .wp-block-navigation-item__content:focus {
	border-bottom-color: var(--dmd-clay);
}

/* --- Services dropdown: grouped, compact, on-brand ------------------
   Nested submenu (Services > category > service). Deep Ink panel to
   match the footer / dark sections, Off White text, Ember hover,
   smaller type than the top nav, square with a hairline. */
.dmd-nav .wp-block-navigation__submenu-container {
	min-width: 16rem;
	padding: 0.35rem 0;
	font-size: 0.8125rem;
	line-height: 1.3;
	border: 1px solid var(--dmd-ember);
	border-radius: 0;
	box-shadow: none;
}
.dmd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1.1rem;
	border-bottom: 0;
	color: var(--dmd-offwhite);
}
.dmd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dmd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--dmd-ember);
	background-color: rgba(255, 255, 255, 0.05);
	border-bottom: 0;
}
/* second-level category rows read as headings */
.dmd-nav .wp-block-navigation__submenu-container > ul > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
}
/* the third-level flyout sits beside its category */
.dmd-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-top: -0.4rem;
}

/* --- Hover grace period so submenus don't vanish while you aim for them --- */
.dmd-nav .has-child > .wp-block-navigation__submenu-container {
	transition: opacity 0.12s linear, visibility 0.12s linear;
	transition-delay: 0.4s; /* linger ~400ms after the pointer leaves */
}
.dmd-nav .has-child:hover > .wp-block-navigation__submenu-container,
.dmd-nav .has-child:focus-within > .wp-block-navigation__submenu-container {
	transition-delay: 0s; /* but open immediately */
}
/* invisible bridges over the gaps between an item and its flyout, so a
   diagonal mouse path never crosses "dead" space */
.dmd-nav .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset: -14px 0 auto 0;
	height: 14px;
}
.dmd-nav .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container::before {
	inset: 0 auto 0 -16px;
	width: 16px;
	height: 100%;
}
@media (hover: none) {
	/* touch devices use the toggle button; no hover delay needed */
	.dmd-nav .has-child > .wp-block-navigation__submenu-container {
		transition-delay: 0s;
	}
}
/* mobile overlay: bigger type, no nested box, indent each level */
.wp-block-navigation__responsive-container.is-menu-open .dmd-nav .wp-block-navigation__submenu-container {
	font-size: 1rem;
	border: 0;
	padding: 0.25rem 0 0.25rem 1rem;
}

/* Sticky header sizing */
.dmd-header-bar {
	min-height: 76px;
}

/* --- Mobile overlay menu: full-screen Deep Ink -------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--dmd-ink) !important;
	color: var(--dmd-offwhite) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--dmd-offwhite) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	border-bottom-color: var(--dmd-ember) !important;
}

/* --- Service / icon grid ---------------------------------------------- */
.dmd-icon {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--dmd-ink);
}
.dmd-section--dark .dmd-icon {
	color: var(--dmd-paper);
}

/* --- Hero photo: square-cornered, 4:5 documentary crop --------------- */
.dmd-hero-figure {
	margin: 0;
}
.dmd-hero-figure a {
	display: block;
}
.dmd-hero-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
	/* warm documentary grade, per identity photography treatment */
	filter: saturate(0.92) brightness(1.02);
}
@media (max-width: 781px) {
	.dmd-hero-photo {
		aspect-ratio: 16 / 10;
	}
}

/* --- Photography placeholder (never a stock-looking gradient) -------- */
.dmd-photo-placeholder {
	display: flex;
	align-items: flex-end;
	min-height: 22rem;
	background-color: var(--dmd-altpaper);
	border: 1px solid var(--dmd-border);
	padding: var(--wp--preset--spacing--40, 1rem);
}
.dmd-photo-placeholder p {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* text-secondary (#3E4A47), not field-grey: field-grey fails AA on alt-paper */
	color: var(--dmd-text-2);
}

/* --- Measure guard for prose ---------------------------------------- */
.dmd-measure {
	max-width: 42rem;
}

/* --- Tables in reports read as data -------------------------------- */
.wp-block-table th {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
}

/* --- Contact Form 7 ------------------------------------------------
   Square inputs, warm palette, IBM Plex Sans, Signal Clay focus ring,
   Archivo submit button matching the theme's button style. */
.wpcf7 {
	font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
}
.wpcf7 .form-intro {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--dmd-text-2);
	border-left: 3px solid var(--dmd-border);
	padding-left: 0.9rem;
	margin: 0 0 1.5rem;
}
.wpcf7 .required-note {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dmd-field);
	margin: 0 0 1.5rem;
}
.wpcf7 form > p {
	margin: 0 0 1.35rem;
}
.wpcf7 label {
	display: block;
	font-weight: 500;
	font-size: 0.9375rem;
	margin-bottom: 0.4rem;
	color: var(--dmd-ink);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--dmd-ink);
	background-color: var(--dmd-paper);
	border: 1px solid var(--dmd-border);
	border-radius: 0;
	padding: 0.7rem 0.85rem;
	transition: border-color 120ms ease;
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7 textarea {
	min-height: 9.5rem;
	resize: vertical;
}
.wpcf7 select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2314201F' stroke-width='1.75' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.4rem;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--dmd-field);
}
.wpcf7 :is(input, textarea, select):focus,
.wpcf7 :is(input, textarea, select):focus-visible {
	outline: 2px solid var(--dmd-clay);
	outline-offset: 2px;
	border-color: var(--dmd-clay);
}
.wpcf7 .wpcf7-submit {
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: normal;
	color: var(--dmd-offwhite);
	background-color: var(--dmd-clay);
	border: 0;
	border-radius: 0;
	padding: 12px 24px;
	cursor: pointer;
	width: auto;
	transition: background-color 120ms ease;
}
.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus-visible {
	background-color: var(--dmd-ink);
}
.wpcf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--dmd-clay);
	outline-offset: 2px;
}
/* validation */
.wpcf7 .wpcf7-not-valid {
	border-color: var(--dmd-clay) !important;
}
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--dmd-clay);
}
.wpcf7-response-output {
	margin: 1.5rem 0 0 !important;
	padding: 0.85rem 1.1rem !important;
	border: 1px solid var(--dmd-border) !important;
	border-radius: 0 !important;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--dmd-ink);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--dmd-clay) !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--dmd-teal) !important;
}
.wpcf7-spinner {
	background-color: var(--dmd-clay);
}
@media (prefers-reduced-motion: reduce) {
	.wpcf7 :is(input, textarea, select, .wpcf7-submit) {
		transition: none;
	}
}

/* --- Screen-reader helper (in case core CSS is late) --------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}