/*
Theme Name:        DevDynamics
Description:       Theme for DevDynamics, a home for deploying web tools and software. Home page with email-link sign-in; tools list for signed-in people. Pair with the DevDynamics Access plugin.
Version:           1.1.0
Author:            DevDynamics
Requires at least: 6.3
Tested up to:      6.8
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       devdynamics
Tags:              one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	--dd-ink: #18212D;
	--dd-steel: #435A74;
	--dd-steel-deep: #384C63;
	--dd-aqua: #5EE6C8;
	--dd-paper: #F3F5F8;
	--dd-white: #FFFFFF;
	--dd-slate: #4C5A6B;
	--dd-rule: #D7DDE5;
	--dd-field: #B6C0CC;
	--dd-on-steel: #DDE4EC;
	--dd-on-steel-soft: #C9D3DF;
	--dd-error: #B42318;
	--dd-ok: #0E7A5F;

	--dd-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--dd-wide: 125%;
	--dd-semi: 112%;

	--dd-wrap: 75rem;
	--dd-gutter: clamp(1rem, 4vw, 2.5rem);
	--dd-radius: 4px;
	--dd-radius-panel: 6px;

	--dd-step--1: 0.875rem;
	--dd-step-0: 1.0625rem;
	--dd-step-1: 1.25rem;
	--dd-step-2: 1.5rem;
	--dd-step-3: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
	--dd-step-4: clamp(2rem, 1.3rem + 3vw, 3.25rem);
	--dd-hero: clamp(2rem, 0.95rem + 5.3vw, 4.5rem);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }

body {
	margin: 0;
	background: var(--dd-paper);
	color: var(--dd-ink);
	font-family: var(--dd-font);
	font-size: var(--dd-step-0);
	line-height: 1.6;
	font-stretch: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* Keep the footer at the bottom on short pages. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body > main { flex: 1 0 auto; }

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--dd-steel); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--dd-ink); }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }

:focus-visible { outline: 3px solid var(--dd-steel); outline-offset: 2px; }
.dd-header :focus-visible,
.dd-hero__copy :focus-visible,
.dd-pagehead :focus-visible,
.dd-footer :focus-visible { outline-color: var(--dd-aqua); }

::selection { background: var(--dd-aqua); color: var(--dd-ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dd-skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	padding: 0.75rem 1rem; border-radius: var(--dd-radius);
	background: var(--dd-aqua); color: var(--dd-ink); font-weight: 700; text-decoration: none;
}
.dd-skip:focus { top: 1rem; }

.dd-wrap {
	width: 100%;
	max-width: calc(var(--dd-wrap) + 2 * var(--dd-gutter));
	margin-inline: auto;
	padding-inline: var(--dd-gutter);
}

/* ==========================================================================
   Header
   ========================================================================== */

.dd-header { background: var(--dd-steel); color: var(--dd-white); }

.dd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.5rem;
}

.dd-brand { display: inline-flex; color: inherit; line-height: 0; }
.dd-logo { display: block; height: 1.75rem; width: auto; }

.dd-nav { display: flex; align-items: center; gap: 0.25rem 1.5rem; flex-wrap: wrap; justify-content: flex-end; }
.dd-nav__menu { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.dd-nav__menu a,
.dd-nav__link {
	color: var(--dd-white);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}
.dd-nav__menu a:hover,
.dd-nav__link:hover { color: var(--dd-white); text-decoration: underline; }
.dd-nav__link--signin {
	padding: 0.5rem 0.875rem;
	border-radius: var(--dd-radius);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
.dd-nav__link--signin:hover { background: var(--dd-white); color: var(--dd-steel); text-decoration: none; }

@media (max-width: 480px) {
	.dd-header__inner { gap: 1rem; min-height: 4rem; }
	.dd-header .dd-logo { height: 1.4rem; }
	.dd-nav { flex-wrap: nowrap; gap: 1rem; }
	.dd-nav__menu { gap: 1rem; }
	.dd-nav__link--signin { padding: 0.4rem 0.7rem; }
}

@media (max-width: 359px) {
	.dd-header .dd-logo { height: 1.2rem; }
	.dd-nav, .dd-nav__menu { gap: 0.75rem; }
}

/* ==========================================================================
   Hero: headline + sign-in
   ========================================================================== */

.dd-hero { background: var(--dd-steel); color: var(--dd-white); }

.dd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 3rem 4rem;
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6.5rem);
}

.dd-hero__copy { container-type: inline-size; }

.dd-hero__title {
	font-size: var(--dd-hero);
	/* Size to the column so each of the three lines fits without wrapping. */
	font-size: clamp(1.75rem, 11.6cqi, 4.5rem);
	font-stretch: var(--dd-wide);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.dd-hero__line { display: block; width: fit-content; }

/* The middle line sits displaced, like the middle slice of the mark. */
.dd-hero__line--shift { transform: translateX(0.72em); }

.dd-hero__intro {
	max-width: 34em;
	margin: 1.75rem 0 0;
	color: var(--dd-on-steel);
	font-size: var(--dd-step-1);
	line-height: 1.5;
}

.dd-hero__signin { justify-self: end; width: 100%; max-width: 27rem; }

@media (prefers-reduced-motion: no-preference) {
	.dd-hero__line--shift { animation: dd-shift 760ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms both; }
	@keyframes dd-shift {
		from { transform: translateX(0); }
		to   { transform: translateX(0.72em); }
	}
}

@media (max-width: 960px) {
	.dd-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.dd-hero__signin { justify-self: start; max-width: 32rem; }
}

/* ==========================================================================
   Sign-in card (markup from the DevDynamics Access plugin)
   ========================================================================== */

.ddx-login {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--dd-white);
	color: var(--dd-ink);
	border-radius: var(--dd-radius-panel);
}

.ddx-login__title {
	margin: 0 0 0.5rem;
	font-size: var(--dd-step-2);
	font-stretch: var(--dd-wide);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ddx-login__intro,
.ddx-login__sent p { margin: 0 0 1.25rem; color: var(--dd-slate); font-size: 1rem; line-height: 1.55; }
.ddx-login__sent strong,
.ddx-login__intro strong { color: var(--dd-ink); font-weight: 600; overflow-wrap: anywhere; }

.ddx-login__fine { margin: 1rem 0 0; color: var(--dd-slate); font-size: var(--dd-step--1); line-height: 1.5; }
.ddx-login__fine a { color: var(--dd-steel); white-space: nowrap; }

.ddx-login__who { margin: 0 0 1.5rem; line-height: 1.4; }
.ddx-login__who strong { display: block; font-size: var(--dd-step-1); font-weight: 700; }
.ddx-login__who span { color: var(--dd-slate); overflow-wrap: anywhere; }

.ddx-login__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

.ddx-label { display: block; margin-bottom: 0.375rem; font-size: 0.9375rem; font-weight: 600; }

.ddx-input {
	display: block;
	width: 100%;
	height: 3.125rem;
	margin: 0 0 1rem;
	padding: 0 0.875rem;
	border: 1.5px solid var(--dd-field);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	color: var(--dd-ink);
	font: inherit;
	font-size: 1.0625rem;
}
.ddx-input::placeholder { color: #8794A3; }
.ddx-input:hover { border-color: var(--dd-slate); }
.ddx-input:focus { outline: 3px solid var(--dd-steel); outline-offset: 1px; border-color: var(--dd-steel); }
.ddx-input[aria-invalid="true"] { border-color: var(--dd-error); }

.ddx-notice {
	margin: 0 0 1.25rem;
	padding: 0.75rem 0.875rem;
	border-left: 4px solid currentColor;
	border-radius: 0 var(--dd-radius) var(--dd-radius) 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.ddx-notice--error { color: var(--dd-error); background: #FDF1F0; }
.ddx-notice--ok { color: var(--dd-ok); background: #EDF8F4; }
.ddx-notice--info { color: var(--dd-steel); background: #EEF2F6; }

.ddx-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.ddx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--dd-radius);
	background: var(--dd-steel);
	color: var(--dd-white);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.ddx-button:hover { background: var(--dd-ink); color: var(--dd-white); }
.ddx-button--block { width: 100%; }

.ddx-button--outline { min-height: 2.5rem; padding: 0 1rem; background: transparent; color: var(--dd-steel); box-shadow: inset 0 0 0 1.5px var(--dd-steel); }
.ddx-button--outline:hover { background: var(--dd-steel); color: var(--dd-white); }

.ddx-button--ghost { min-height: 2.5rem; padding: 0 1rem; background: transparent; color: var(--dd-slate); box-shadow: inset 0 0 0 1.5px var(--dd-field); font-weight: 600; }
.ddx-button--ghost:hover { background: transparent; color: var(--dd-ink); box-shadow: inset 0 0 0 1.5px var(--dd-ink); }

/* On the steel header (single tool page) */
.ddx-button--onblue.ddx-button--outline { min-height: 3rem; padding: 0 1.5rem; background: var(--dd-aqua); color: var(--dd-ink); box-shadow: none; }
.ddx-button--onblue.ddx-button--outline:hover { background: var(--dd-white); }
.ddx-button--onblue.ddx-button--ghost { min-height: 3rem; padding: 0 1.5rem; color: var(--dd-white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.ddx-button--onblue.ddx-button--ghost:hover { background: var(--dd-white); color: var(--dd-steel); }

.ddx-textlink { color: var(--dd-steel); font-weight: 600; }

/* Confirm-sign-in screen */
.ddx-confirm-page {
	display: grid;
	place-items: center;
	min-height: 62vh;
	padding: clamp(2.5rem, 6vw, 5rem) var(--dd-gutter) clamp(3.5rem, 8vw, 6.5rem);
	background: var(--dd-steel);
}
.ddx-confirm-page .ddx-login { width: 100%; max-width: 27rem; }

/* ==========================================================================
   Sections
   ========================================================================== */

.dd-section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.dd-section--flush { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

.dd-section__head { margin-bottom: 2rem; }

.dd-section__title {
	font-size: var(--dd-step-3);
	font-stretch: var(--dd-wide);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.dd-section__lede { max-width: 40em; margin: 0.75rem 0 0; color: var(--dd-slate); }

/* ==========================================================================
   Tools list
   ========================================================================== */

.dd-tools {
	--dd-cols: minmax(0, 1fr) 7.5rem 8rem 10rem;
	border-top: 2px solid var(--dd-ink);
}

.dd-tools__head,
.dd-tool {
	display: grid;
	grid-template-columns: var(--dd-cols);
	gap: 1.5rem;
	align-items: center;
}

.dd-tools__head {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--dd-rule);
	color: var(--dd-slate);
	font-size: var(--dd-step--1);
	font-weight: 600;
}

.dd-tool { padding: 1.375rem 0; border-bottom: 1px solid var(--dd-rule); }

.dd-tool__name {
	font-size: var(--dd-step-1);
	font-stretch: var(--dd-semi);
	font-weight: 700;
	letter-spacing: -0.005em;
}
.dd-tool__name a { color: var(--dd-ink); text-decoration: none; }
.dd-tool__name a:hover { color: var(--dd-steel); text-decoration: underline; }

.dd-tool__desc { max-width: 60ch; margin: 0.3rem 0 0; color: var(--dd-slate); font-size: 0.9875rem; line-height: 1.5; }

.dd-tool__version,
.dd-tool__updated { font-variant-numeric: tabular-nums; font-size: 0.9375rem; }

.dd-tool__action { justify-self: end; }

.dd-tool__k { display: none; }

@media (max-width: 860px) {
	.dd-tools__head { display: none; }
	.dd-tool {
		grid-template-columns: repeat(2, auto) 1fr;
		gap: 0.5rem 1.5rem;
		align-items: baseline;
		padding: 1.25rem 0;
	}
	.dd-tool__main { grid-column: 1 / -1; }
	.dd-tool__version,
	.dd-tool__updated { font-size: var(--dd-step--1); }
	.dd-tool__k { display: block; color: var(--dd-slate); font-size: 0.8125rem; font-weight: 400; }
	.dd-tool__action { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }
}

.dd-empty {
	padding: 2rem;
	border: 1.5px dashed var(--dd-field);
	border-radius: var(--dd-radius-panel);
	color: var(--dd-slate);
}
.dd-empty p { margin: 0 0 1rem; }
.dd-empty p:last-child { margin: 0; }

/* ==========================================================================
   How sign-in works
   ========================================================================== */

.dd-steps-section { background: var(--dd-white); border-top: 1px solid var(--dd-rule); }

.dd-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem clamp(2rem, 4vw, 3.5rem);
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: dd-step;
}

.dd-step { counter-increment: dd-step; }
.dd-step::before {
	content: counter(dd-step);
	display: block;
	margin-bottom: 0.75rem;
	color: var(--dd-steel);
	font-size: 2.75rem;
	font-stretch: var(--dd-wide);
	font-weight: 800;
	line-height: 1;
}
.dd-step__title { font-size: var(--dd-step-1); font-stretch: var(--dd-semi); }
.dd-step p { max-width: 30em; margin: 0.5rem 0 0; color: var(--dd-slate); }

@media (max-width: 760px) {
	.dd-steps { grid-template-columns: minmax(0, 1fr); }
	.dd-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.5rem; }
	.dd-step::before { grid-row: span 2; margin: 0; font-size: 2.25rem; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

.dd-pagehead { background: var(--dd-steel); color: var(--dd-white); padding-block: clamp(2rem, 4vw, 3rem) clamp(2.75rem, 5vw, 4rem); }

.dd-pagehead__title {
	max-width: 22em;
	font-size: var(--dd-step-4);
	font-stretch: var(--dd-wide);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.dd-pagehead__lede { max-width: 40em; margin: 1rem 0 0; color: var(--dd-on-steel); font-size: var(--dd-step-1); line-height: 1.5; }

.dd-crumb { margin: 0 0 1rem; color: var(--dd-on-steel); font-size: 0.9375rem; }
.dd-crumb a { color: var(--dd-on-steel); }
.dd-crumb a:hover { color: var(--dd-white); }

.dd-facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 2rem 0 0; }
.dd-facts dt { color: var(--dd-on-steel-soft); font-size: var(--dd-step--1); }
.dd-facts dd { margin: 0.125rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.dd-pagehead__action { margin-top: 2rem; }

.dd-prose { max-width: calc(44rem + 2 * var(--dd-gutter)); margin-inline: 0; }
.dd-home-content .dd-prose { margin-inline: auto; max-width: calc(var(--dd-wrap) + 2 * var(--dd-gutter)); }
.dd-home-content .dd-prose > * { max-width: 44rem; }
.dd-prose > * + * { margin-top: 1.1em; }
.dd-prose h2 { margin-top: 2em; font-size: var(--dd-step-2); font-stretch: var(--dd-semi); }
.dd-prose h3 { margin-top: 1.75em; font-size: var(--dd-step-1); }
.dd-prose p, .dd-prose ul, .dd-prose ol { line-height: 1.7; }
.dd-prose ul, .dd-prose ol { padding-left: 1.25em; }
.dd-prose code { padding: 0.1em 0.35em; border-radius: 3px; background: #E4E8EE; font-size: 0.92em; }
.dd-prose pre { overflow-x: auto; padding: 1rem 1.25rem; border-radius: var(--dd-radius-panel); background: var(--dd-ink); color: var(--dd-paper); font-size: 0.9rem; line-height: 1.6; }
.dd-prose pre code { padding: 0; background: none; }
.dd-prose blockquote { margin-left: 0; padding-left: 1.25rem; border-left: 3px solid var(--dd-steel); color: var(--dd-slate); }
.dd-prose img { border-radius: var(--dd-radius-panel); }
.dd-feature { display: block; margin-bottom: 2rem; }

.dd-postlist { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--dd-ink); }
.dd-postlist__item { padding: 1.5rem 0; border-bottom: 1px solid var(--dd-rule); }
.dd-postlist__title { font-size: var(--dd-step-1); font-stretch: var(--dd-semi); }
.dd-postlist__title a { color: var(--dd-ink); text-decoration: none; }
.dd-postlist__title a:hover { color: var(--dd-steel); text-decoration: underline; }
.dd-postlist__meta { margin: 0.25rem 0 0; color: var(--dd-slate); font-size: var(--dd-step--1); }
.dd-postlist__excerpt { max-width: 60ch; margin: 0.5rem 0 0; color: var(--dd-slate); }

.nav-links { display: flex; gap: 1rem; margin-top: 2rem; }

/* Block editor alignment basics */
.alignwide { max-width: 60rem; }
.alignfull { max-width: none; }
.aligncenter { margin-inline: auto; }
.wp-block-image figcaption, .wp-caption-text { color: var(--dd-slate); font-size: var(--dd-step--1); }

/* ==========================================================================
   Footer
   ========================================================================== */

.dd-footer { background: var(--dd-ink); color: var(--dd-white); }

.dd-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	padding-block: 3rem;
}

.dd-footer .dd-logo { height: 1.5rem; }
.dd-footer__tagline { margin: 0.875rem 0 0; color: #B6BFCB; font-size: var(--dd-step--1); }
.dd-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.dd-footer__nav a { color: var(--dd-white); font-size: var(--dd-step--1); }
.dd-footer__legal { margin: 0; color: #B6BFCB; font-size: var(--dd-step--1); }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.dd-header, .dd-footer, .dd-hero__signin, .dd-tool__action { display: none; }
	.dd-hero, .dd-pagehead { background: none; color: var(--dd-ink); }
}