/*
Theme Name: ProPluginsLab Promo
Theme URI: https://propluginslab.com/
Author: ProPluginsLab
Author URI: https://propluginslab.com/
Description: A simple standalone theme with a single home page that promotes your other plugins and products. Any shortcode you place on the front page (such as your reCAPTCHA) renders normally above the product grid. Products come from the data the Back In Stock Notifier plugin already stores — no extra HTTP calls.
Version: 1.0.0
Requires at least: 6.0
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: ppl-simple
*/

:root {
	--v: #5b4be6;
	--v-deep: #3a2db0;
	--amber: #ffb020;
	--ink: #161427;
	--muted: #6b6880;
	--line: #e7e6f1;
	--bg: #f6f6fb;
	--surface: #fff;
	--shell: min(1080px, 92vw);
}

* { box-sizing: border-box; }

body.ppl {
	margin: 0;
	background: var(--bg);
	color: #26233a;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--v); }

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 0.4em; }

.shell { width: var(--shell); margin-inline: auto; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 99; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 6px; }

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.brand__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); display: grid; place-items: center; }
.brand__mark span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.brand em { font-style: normal; color: var(--v); }
.site-header__inner nav a { color: #26233a; text-decoration: none; font-weight: 600; font-size: 0.95rem; margin-left: 1.2rem; }
.site-header__inner nav a:hover { color: var(--v); }

/* Page content (front-page shortcode area, e.g. reCAPTCHA) */
.front-content { padding: 2.4rem 0 0.5rem; }
.front-content .entry-title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); text-align: center; }
.front-content .entry-body { max-width: 70ch; margin: 1rem auto 0; }

/* Promo section */
.promo { padding: 2.4rem 0 3rem; }
.promo__head { text-align: center; max-width: 52ch; margin: 0 auto 1.8rem; }
.promo__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.promo__head p { color: var(--muted); margin: 0.3rem 0 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 13px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(22,20,39,0.04);
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(58,45,176,0.5); border-color: var(--v); }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.card__icon { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; background: #f0eefb; border: 1px solid var(--line); flex: none; }
.card__icon--fb { display: grid; place-items: center; font-weight: 700; color: var(--v); font-size: 1.05em; }
.card__badge { font-size: 0.62em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--amber); color: var(--ink); padding: 4px 7px; border-radius: 7px; white-space: nowrap; }

.card h3 { font-size: 1.05em; margin: 0.1em 0 0.4em; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--v); }
.card__desc { color: var(--muted); font-size: 0.88em; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.price { font-weight: 800; color: var(--ink); font-size: 1.05em; }
.price--free { color: #1c9e6a; }
.price__was { color: var(--muted); text-decoration: line-through; font-size: 0.82em; font-weight: 600; }
.card__btn { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.82em; text-decoration: none; color: #fff; background: var(--v); padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: background 0.15s ease; }
.card__btn:hover { background: var(--v-deep); }

.promo__empty { text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 22px; }

/* Footer */
.site-footer { background: var(--ink); color: #a9a6c4; padding: 1.6rem 0; }
.site-footer .shell { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; align-items: center; }
.site-footer a { color: #cfcce6; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer small { color: #847fa8; }

@media (prefers-reduced-motion: reduce) { .card { transition: none; } }