/*
Theme Name:        PressLore
Theme URI:         https://presslore.com
Description:       Block theme for presslore.com, the one-page site that sells the PressLore plugin. Design tokens live in theme.json; component styles are here, written mobile first.
Author:            PressLore
Version:           1.3.0
Requires at least: 6.4
Tested up to:      7.1
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       presslore-theme
*/

/* ==========================================================================
   Inner pages: legal, industry, blog, search, 404 and the shop pages.
   The home page uses assets/css/landing.css; header and footer are in
   assets/css/chrome.css. Mobile first. Breakpoints: 40em, 56em.
   ========================================================================== */
:root {
	--pl-ink: #15162d;
	--pl-ink-2: #1c1e45;
	--pl-paper: #f5f6fb;
	--pl-blue: #2b50ff;
	--pl-blue-deep: #1c37c9;
	--pl-marker: #ffe45c;
	--pl-slate: #555b78;
	--pl-mist: #e4e7f2;
	--pl-radius: 0.6rem;
	--pl-radius-panel: 1rem;
	--pl-grotesque: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--pl-serif: Newsreader, Georgia, "Times New Roman", serif;
	--pl-gutter: clamp(16px, 4vw, 32px);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection {
	background: var(--pl-marker);
	color: var(--pl-ink);
}

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

/* Focus rings only for keyboard users (:focus-visible); a mouse click never draws one. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--pl-blue);
	outline-offset: 3px;
}

/* WordPress puts a block gap between the header, main and footer. This design is edge to edge, so there is none. */
.wp-site-blocks > * + *,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ==========================================================================
   Buttons (block editor)
   ========================================================================== */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	border-radius: 999px;
	font-size: 0.95rem;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--pl-ink);
	border: 1.5px solid var(--pl-ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--pl-ink);
	color: #fff;
}

.wp-block-button.is-style-marker .wp-block-button__link {
	background: var(--pl-marker);
	color: var(--pl-ink);
}

.wp-block-button.is-style-marker .wp-block-button__link:hover {
	background: #ffeb85;
}

/* ==========================================================================
   Pages and posts: a readable column, a modest title, no wasted space
   ========================================================================== */
.pl-page-title {
	margin: 0 0 1.25rem;
}

.wp-block-post-content > * + * {
	margin-block-start: 1.1rem;
}

.wp-block-post-content h2 {
	margin-block-start: 2rem;
	font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
}

.wp-block-post-content h3 {
	margin-block-start: 1.5rem;
	font-size: 1.15rem;
}

/* Wide template (cart, checkout, account). */
.pl-wide {
	max-width: 72rem;
	margin: 0 auto;
	padding-inline: var(--pl-gutter);
}

.pl-wide .pl-page-title {
	margin: 0 0 1rem;
}

.pl-wide .wp-block-post-content > * {
	margin-block: 0 1rem;
}

/* ==========================================================================
   Legal pages: contents list, then numbered sections
   ========================================================================== */
.pl-legal {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 0 2.5rem;
}

.pl-legal__updated {
	margin: 0 0 1rem;
	color: var(--pl-slate);
	font-size: 0.9rem;
}

.pl-legal__intro {
	font-size: 1.05rem;
}

.pl-legal__toc {
	margin: 1.5rem 0 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--pl-mist);
	border-radius: var(--pl-radius-panel);
	background: #fff;
}

.pl-legal__toc h2 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.pl-legal__toc ol {
	margin: 0;
	padding-left: 1.4rem;
	columns: 1;
	font-size: 0.95rem;
}

.pl-legal__toc a {
	color: var(--pl-blue-deep);
}

.pl-legal__section,
.pl-legal__section h2 {
	scroll-margin-top: 5rem;
}

.pl-legal__section h2 {
	margin: 2rem 0 0.5rem;
	font-size: 1.25rem;
}

.pl-legal__section p,
.pl-legal__section li {
	max-width: 42rem;
}

.pl-legal__table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.pl-legal__table th,
.pl-legal__table td {
	padding: 0.5rem 0.75rem;
	border: 1px solid rgb(128 128 128 / 0.35);
	text-align: left;
	vertical-align: top;
}

@media (min-width: 40em) {
	.pl-legal__table {
		display: table;
	}

	.pl-legal__toc ol {
		columns: 2;
		column-gap: 2rem;
	}
}

/* ==========================================================================
   Industry pages
   ========================================================================== */
.pl-industry {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 var(--pl-gutter);
}

.pl-industry__lead {
	font: 400 1.1rem/1.6 var(--pl-serif);
	color: var(--pl-slate);
}

.pl-industry h2 {
	margin-top: 2rem;
	font-family: var(--pl-grotesque);
	font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
}

.pl-industry ul {
	padding-left: 1.2rem;
	line-height: 1.6;
}

.pl-industry__q {
	margin: 0;
	padding: 1rem 1.2rem;
	border-left: 4px solid var(--pl-marker);
	background: #fff;
	border-radius: 0 var(--pl-radius) var(--pl-radius) 0;
}

.pl-industry__q p {
	margin: 0.3rem 0;
}