/*
Theme Name: Owner's Desk
Theme URI: https://getownersdesk.com
Description: Child theme of Twenty Twenty-Four for the Owner's Desk marketing site, a Smart Growth Services product. Color, type, spacing and layout are configured in theme.json so they stay editable from Appearance > Editor > Styles. This stylesheet holds only the few rules that theme.json cannot express.
Author: Smart Growth Services
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: owners-desk
*/

/*
 * Everything below is deliberately small. If you find yourself wanting to add a
 * rule here, check first whether Appearance > Editor > Styles can already do it —
 * changes made there survive theme updates and are editable without code.
 */

/* Skip link. Core renders one; it is invisible until focused, and the default
   offset puts it behind the sticky header on some screens. */
.skip-link:focus {
	top: 8px !important;
	left: 8px !important;
	z-index: 100000;
}

/* WCAG 2.2 (2.4.11 Focus Not Obscured): the header is sticky, so an element
   focused by keyboard near the top of a section can scroll under it. A scroll
   margin equal to the header height keeps focused targets visible. */
:root {
	--od-header-height: 6rem;
}
:where(h1, h2, h3, a, button, input, textarea, select, summary, .wp-block-button__link) {
	scroll-margin-top: var(--od-header-height);
}

/* Visible focus everywhere, in one place, rather than per-block. The amber is
   too light against the canvas on its own, so focus uses the ink outline with an
   amber inner ring: legible on the canvas, on paper, and on the dark band. */
:where(a, button, input, textarea, select, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--amber);
	border-radius: 2px;
}
.od-band-dark :where(a, button, summary, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* The workflow board's offset shadow. A flat color offset, not a blur: it reads
   as a sheet of paper on a desk rather than a UI card, and it costs no paint. */
.od-board {
	box-shadow: 8px 8px 0 var(--wp--preset--color--rule);
}
@media (max-width: 781px) {
	.od-board {
		box-shadow: 5px 5px 0 var(--wp--preset--color--rule);
	}
}

/* Core's Details block gives the marker no room and no affordance. */
.wp-block-details summary {
	cursor: pointer;
	padding-block: var(--wp--preset--spacing--30);
	min-height: 44px; /* WCAG 2.2 target size */
}
.wp-block-details[open] summary {
	padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Touch targets. The design's buttons are already tall; text links inside body
   copy are not, and a 44px min-height on an inline link would break line flow.
   This applies only to links that stand alone as actions. */
/* The class sits on the Paragraph block, because that is what the editor lets
   you add a class to — but the tap target is the ANCHOR inside it. Sizing the
   paragraph left every one of these links at 26px. */
.od-action-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	text-underline-offset: 5px;
}

/* Honor a reduced-motion preference. The site has no animation of its own; this
   covers the button hover transition theme.json applies and anything added later. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* The checklist page is a worksheet people are meant to print. */
@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-button,
	.od-no-print {
		display: none !important;
	}
	body {
		background: #fff;
		color: #000;
	}
	.wp-block-details {
		display: block;
	}
	.wp-block-details > summary {
		list-style: none;
	}
	/* Open every collapsed section so a printed sheet is complete. */
	.wp-block-details:not([open]) > :not(summary) {
		display: block !important;
	}
}

/* The embedded Job Desk sign-up form.
 *
 * A cross-origin iframe cannot report its own content height and Job Desk posts
 * none, so the height is set here. These are MEASURED, not guessed — the live
 * form was rendered at a range of widths on 2026-09-22:
 *
 *   frame >= 560px : 712px      frame 400px : 825px      frame 300px : 904px
 *   frame    520px : 763px      frame 342px : 865px      frame 272px : 997px
 *
 * The page gives the frame the viewport minus ~48px of padding, capped at the
 * 760px content width, so the breakpoints below are viewport widths with about
 * 50px of headroom for a validation error adding a line.
 *
 * Too short shows an inner scrollbar; too tall shows white space. Neither
 * breaks the form. Re-measure if Job Desk changes the form.
 *
 * The frame renders on white -- that is Job Desk's page, not ours -- so it sits
 * on a bordered panel to read as a deliberate inset rather than a hole.
 */
.od-embed {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}
.od-embed__frame {
	display: block;
	width: 100%;
	height: 760px;
	border: 0;
}
@media (max-width: 610px) {
	.od-embed__frame { height: 900px; }
}
@media (max-width: 400px) {
	.od-embed__frame { height: 1040px; }
}