/*
Theme Name: Lauritzen Systems
Theme URI: https://lauritzensystems.com/
Author: Lauritzen Systems
Author URI: https://lauritzensystems.com/
Description: A calm, accessible block theme for Lauritzen Systems, built on the Lauritzen design system: a studio homepage, a shared App page template, and a Journal for updates, essays, and episodes of The Workshop. Follows the visitor's light or dark setting.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lauritzen-systems
Tags: block-patterns, full-site-editing, blog, accessibility-ready, custom-colors, editor-style
*/

/* ---------- Dark theme: the same tokens, redefined (Lauritzen design system "Dark") ---------- */
@media (prefers-color-scheme: dark) {
	html:root {
		--wp--preset--color--surface-page: #13191a;
		--wp--preset--color--surface-raised: #1b2324;
		--wp--preset--color--surface-sunken: #0d1112;
		--wp--preset--color--ink: #e8edeb;
		--wp--preset--color--ink-muted: #adb9b5;
		--wp--preset--color--border-subtle: #2a3536;
		--wp--preset--color--border-control: #7e8d89;
		--wp--preset--color--brand: #5cc3ba;
		--wp--preset--color--brand-hover: #7dd4cc;
		--wp--preset--color--on-brand: #07201e;
		--wp--preset--color--brand-text: #74d0c8;
		--wp--preset--color--brand-subtle: #1c3433;
		--wp--preset--color--accent: #f0bd57;
		--wp--preset--color--highlight: #4a3f12;
		--wp--preset--color--warning: #f2c25c;
		--wp--preset--color--warning-subtle: #3a2f0d;
		--wp--preset--color--info-subtle: #202b35;
		--wp--preset--color--focus-ring: #8fb4ff;
		--wp--preset--shadow--raised: 0 1px 2px rgba(0, 0, 0, .35);
		/* The site's existing Additional CSS uses --lz-* tokens; give them dark values too. */
		--lz-page: #13191a;
		--lz-raised: #1b2324;
		--lz-sunken: #0d1112;
		--lz-ink: #e8edeb;
		--lz-ink-muted: #adb9b5;
		--lz-border-subtle: #2a3536;
		--lz-border-control: #7e8d89;
		--lz-border-strong: #c3ceca;
		--lz-brand: #5cc3ba;
		--lz-brand-hover: #7dd4cc;
		--lz-brand-text: #74d0c8;
		--lz-brand-subtle: #1c3433;
		--lz-accent: #f0bd57;
		--lz-focus: #8fb4ff;
		--lz-visited: #c9a8e6;
		--lz-shadow-raised: 0 1px 2px rgba(0, 0, 0, .35);
		color-scheme: dark;
	}
}

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--ink); }
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
	border-radius: 4px;
}
img { max-width: 100%; height: auto; }
.screen-reader-text:focus { clip: auto !important; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
html { scroll-padding-top: 88px; }

/* ---------- Header ---------- */
.ls-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--surface-page) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.admin-bar .ls-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .ls-header { top: 0; } }
.ls-header .wp-block-navigation-item__content { padding: 0.5rem 0.75rem; border-radius: 8px; }
.ls-header .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--surface-sunken); }
.ls-header .current-menu-item > .wp-block-navigation-item__content,
.ls-header .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--brand-subtle);
	color: var(--wp--preset--color--brand-text);
}
.ls-header .wp-block-site-logo img { border-radius: 8px; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--surface-page) !important; color: var(--wp--preset--color--ink) !important; }

/* ---------- Block styles (registered in functions.php) ---------- */
/* Eyebrow paragraph */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-text);
	margin-bottom: 0;
}
/* Tagline paragraph, in the reading face */
.is-style-tagline { font-family: var(--wp--preset--font-family--reading); }

/* Card group */
.is-style-card {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--raised);
	transition: border-color .2s, transform .2s;
}
.is-style-card:hover { border-color: var(--wp--preset--color--border-control); }
/* Dashed group, for things still in development */
.is-style-dashed {
	border: 1.5px dashed var(--wp--preset--color--border-control);
	border-radius: 12px;
}
/* Panel band (sunken background with rounded corners) */
.is-style-panel {
	background: var(--wp--preset--color--surface-sunken);
	border-radius: 18px;
}

/* App Store button */
.wp-block-button.is-style-app-store .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface-page);
	border-radius: 10px;
}
.wp-block-button.is-style-app-store .wp-block-button__link:hover { opacity: .88; }
/* Outline button tuned to the system */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--border-control);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--surface-sunken); }

/* Checklist */
ul.is-style-checks { list-style: none; padding-left: 0; display: grid; gap: 0.9rem 2rem; }
@media (min-width: 700px) { ul.is-style-checks { grid-template-columns: 1fr 1fr; } }
ul.is-style-checks li { position: relative; padding-left: 2rem; }
ul.is-style-checks li::before {
	content: "";
	position: absolute; left: 0; top: 0.3em;
	width: 1.1rem; height: 1.1rem; border-radius: 50%;
	background: var(--wp--preset--color--brand);
	box-shadow: inset 0 0 0 0.3rem var(--wp--preset--color--brand-subtle);
}

/* Pills list (platforms, topics) */
ul.is-style-pills { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
ul.is-style-pills li {
	font-size: var(--wp--preset--font-size--caption);
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border-control);
}

/* Category pills for the Journal */
.wp-block-categories-list.is-style-pills,
.is-style-pills .wp-block-categories-list { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wp-block-categories-list.is-style-pills li a {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	border: 1.5px solid var(--wp--preset--color--border-control);
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}
.wp-block-categories-list.is-style-pills li a:hover { background: var(--wp--preset--color--surface-sunken); }
.wp-block-categories-list.is-style-pills li.current-cat a {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface-page);
	border-color: var(--wp--preset--color--ink);
}

/* Status pill (Coming soon, In beta) */
.ls-pill {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--warning-subtle);
	color: var(--wp--preset--color--warning);
	vertical-align: middle;
	white-space: nowrap;
}
.ls-pill.is-brand { background: var(--wp--preset--color--brand-subtle); color: var(--wp--preset--color--brand-text); }

/* ---------- Homepage ---------- */
.ls-shelf { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.ls-shelf .wp-block-image { margin: 0; }
.ls-shelf .wp-block-image img { border-radius: 22%; aspect-ratio: 1; object-fit: cover; width: 100%; box-shadow: var(--wp--preset--shadow--raised); }
.ls-facts { border-top: 1px solid var(--wp--preset--color--border-subtle); }
.ls-facts strong { display: block; color: var(--wp--preset--color--ink); }

.ls-app-card { height: 100%; display: flex; flex-direction: column; }
.ls-app-card .wp-block-image img { border-radius: 13px; width: 56px; height: 56px; object-fit: cover; }
.ls-app-card > .ls-meta { margin-top: auto !important; border-top: 1px solid var(--wp--preset--color--border-subtle); padding-top: 0.9rem; }
.ls-app-card a { text-decoration: none; font-weight: 600; }
.ls-app-card a:hover { text-decoration: underline; }

/* Post cards (latest posts, related posts) */
.ls-post-grid .wp-block-post-featured-image img { border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; }
.ls-post-grid .wp-block-post-featured-image:not(:has(img)) { display: none; }
.ls-post-grid .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- App pages ---------- */
.ls-app-icon img { border-radius: 20px; width: 88px; height: 88px; object-fit: cover; }
.ls-screenshot img { border-radius: 18px; border: 1px solid var(--wp--preset--color--border-subtle); box-shadow: var(--wp--preset--shadow--raised); }
.wp-block-media-text.ls-feature .wp-block-media-text__media img { border-radius: 12px; border: 1px solid var(--wp--preset--color--border-subtle); }
.ls-crumbs a { color: var(--wp--preset--color--ink-muted); }

/* ---------- Journal ---------- */
.ls-row { border-bottom: 1px solid var(--wp--preset--color--border-subtle); }
.ls-row .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ls-featured .wp-block-post-featured-image img { border-radius: 18px; aspect-ratio: 16 / 10; object-fit: cover; }

/* Long-form reading in single posts */
.single .ls-reading.wp-block-post-content > p,
.single .ls-reading.wp-block-post-content > ul,
.single .ls-reading.wp-block-post-content > ol {
	font-family: var(--wp--preset--font-family--reading);
	font-size: 1.2rem;
	line-height: 1.8;
}
.ls-reading .wp-block-embed iframe { border-radius: 12px; }
.ls-author { border-top: 1px solid var(--wp--preset--color--border-subtle); }

/* ---------- Footer ---------- */
.ls-footer { border-top: 1px solid var(--wp--preset--color--border-subtle); }
.ls-footer ul { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 0.5rem; }
.ls-footer a { color: var(--wp--preset--color--ink-muted); text-decoration: none; }
.ls-footer a:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.ls-legal { border-top: 1px solid var(--wp--preset--color--border-subtle); }

/* ---------- Compatibility with the site's existing Additional CSS ----------
   That CSS styles every button and visited link directly. These rules keep
   the theme's own buttons and link colors in both light and dark mode. */
:root .wp-block-button:not(.is-style-outline):not(.is-style-app-store) .wp-block-button__link {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	border-color: var(--wp--preset--color--brand);
}
:root .wp-block-button:not(.is-style-outline):not(.is-style-app-store) .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--on-brand);
}
:root .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--border-control);
}
:root .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--surface-sunken); }
:root .wp-block-button.is-style-app-store .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface-page);
	border-color: var(--wp--preset--color--ink);
}
:root :is(.wp-block-navigation, .wp-block-post-title, .wp-block-site-title, .ls-app-card, .wp-block-categories-list, .wp-block-post-terms, .wp-block-heading) a:visited { color: inherit; }
:root .wp-block-categories-list.is-style-pills li.current-cat a:visited { color: var(--wp--preset--color--surface-page); }
:root :is(.ls-footer, .ls-crumbs) a:visited { color: var(--wp--preset--color--ink-muted); }
:root .wp-element-button:visited { color: inherit; }