/*
Theme Name: Work InProgress
Theme URI: https://w-inprogress.com
Author: Work InProgress
Author URI: https://w-inprogress.com
Description: Marketing website theme for Work InProgress, the job management system for roofing and exterior contractors. A block theme with ready-made home, features, pricing, about and contact pages, a workflow "progress rail", pricing tables, FAQs and sign-up calls to action. Edit everything in the Site Editor.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: work-inprogress
Tags: block-patterns, block-styles, full-site-editing, wide-blocks, one-column, custom-colors, custom-logo, editor-style, style-variations, translation-ready, business
*/

/* ------------------------------------------------------------------
   Most styling lives in theme.json. This file holds the few details
   theme.json cannot express: the progress rail, card hover states,
   pricing emphasis, focus rings and small-screen fixes.
   ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

/* Header, main and footer sit flush against each other */
.wp-site-blocks > * { margin-block-start: 0; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--blueprint);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

/* Header -------------------------------------------------------------- */
.wip-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .wip-header { top: var(--wp-admin--admin-bar--height, 0px); }
.wip-header.has-base-background-color { box-shadow: 0 1px 0 var(--wp--preset--color--line); }
.wip-header .wp-block-navigation a:hover { color: var(--wp--preset--color--blueprint); }

/* The progress rail: fourteen workflow stages as separate segments ---- */
.wip-rail {
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	gap: 4px;
	height: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wip-rail li { border-radius: 2px; background: var(--seg); }
.wip-rail li.is-pending { background: color-mix(in srgb, var(--seg) 32%, transparent); }
.wip-rail--thin { height: 6px; gap: 3px; }

/* Workflow pattern: four phase columns, each with its stages */
.wip-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wip-phase {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 4px solid var(--pc);
	border-radius: 10px;
	padding: 14px 14px 6px;
}
.wip-phase__name { margin: 0 0 10px; font-size: 1.1rem; font-weight: 800; font-stretch: 112%; }
.wip-stages { list-style: none; margin: 0; padding: 0; }
.wip-stages li {
	padding: 10px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--wp--preset--color--slate);
}
.wip-stages li::before {
	content: "";
	display: block;
	width: 28px; height: 6px;
	border-radius: 3px;
	background: var(--seg);
	margin-bottom: 7px;
}
.wip-stages li strong { display: block; font-weight: 650; color: var(--wp--preset--color--ink); }
@media (max-width: 960px) { .wip-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wip-phases { grid-template-columns: minmax(0, 1fr); } }

/* Cards ---------------------------------------------------------------- */
.is-style-wip-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	transition: border-color .15s ease, transform .15s ease;
}
.is-style-wip-card:hover { border-color: var(--wp--preset--color--slate); }

.is-style-wip-label {
	font-family: var(--wp--preset--font-family--mono) !important;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .78rem !important;
	font-weight: 500;
}

/* Pricing --------------------------------------------------------------- */
.wip-plan { display: flex; flex-direction: column; }
.wip-plan > .wp-block-buttons { margin-top: auto; }
.wip-plan.is-featured { border: 2px solid var(--wp--preset--color--ink); box-shadow: 0 10px 30px rgb(20 24 31 / .10); }
.wip-price { font-variant-numeric: tabular-nums; }
.wip-checks { list-style: none; padding-left: 0; }
.wip-checks li { position: relative; padding-left: 1.6em; margin-bottom: .45em; }
.wip-checks li::before {
	content: "";
	position: absolute; left: 0; top: .45em;
	width: .8em; height: .45em;
	border-left: 2px solid var(--wp--preset--color--go);
	border-bottom: 2px solid var(--wp--preset--color--go);
	transform: rotate(-45deg);
}

/* FAQ (details block) ---------------------------------------------------- */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 1rem 0; }
.wp-block-details summary { font-weight: 650; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--slate); }
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details > :not(summary) { margin-top: .6rem; color: var(--wp--preset--color--slate); }

/* App mock image in the hero */
.wip-shot img { border-radius: 10px; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }

/* Tables (comparison) */
.wp-block-table.is-style-wip-compare table { border-collapse: collapse; width: 100%; }
.wp-block-table.is-style-wip-compare th, .wp-block-table.is-style-wip-compare td { border: 0; border-bottom: 1px solid var(--wp--preset--color--line); padding: .7em .6em; text-align: left; }
.wp-block-table.is-style-wip-compare thead th { font-family: var(--wp--preset--font-family--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--wp--preset--color--slate); }

/* Small screens */
@media (max-width: 781px) {
	.wip-rail { gap: 2px; }
	.wip-hide-mobile { display: none !important; }
}

/* Display type: Archivo stretched wide, like site signage */
h1, h2, .wp-block-site-title, .wip-display { font-stretch: 116%; }
.wip-wordmark { font-stretch: 116%; font-weight: 800; letter-spacing: -0.01em; }

/* Links on dark bands */
:where(.has-asphalt-background-color, .has-ink-background-color) a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--base); }
:where(.has-asphalt-background-color, .has-ink-background-color) a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--amber); }
.wip-footer-links { list-style: none; }
.wip-footer-links li { margin-bottom: .4em; }
.wip-footer-links a { text-decoration: none; }

/* Short pages: keep the footer at the bottom of the window */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
.wip-rail--thin { margin-top: var(--wp--preset--spacing--40); }
:where(.has-asphalt-background-color, .has-ink-background-color) :where(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--wp--preset--color--amber); }