/*
Theme Name: Paperwork Website
Theme URI: https://paperwork.u2code.com
Author: u2code
Author URI: https://u2code.com
Description: Product site for Paperwork – Invoices, E-Invoicing & Documents for WooCommerce. Classic theme, compiled Tailwind, no runtime dependencies.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: paperwork-website
*/

/* Only what Tailwind cannot say. Everything else is a utility class in the markup. */

:root {
	--pw-brand: #1d6a55;
}

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

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

/* Reveal on scroll, written CSS-first: the content is in the document and visible if the
   IntersectionObserver never runs. A section parked at opacity 0 waiting on JS is a section that
   disappears for anyone whose script was blocked. */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
}

.reveal.is-visible,
.no-js .reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* The FAQ chevron, rotated by the native details state. */
details[open] .faq-chevron {
	transform: rotate(180deg);
}

.faq-chevron {
	transition: transform .2s ease;
}

/* A document mock: the paper edge that appears throughout the page. */
.paper {
	background: #fff;
	box-shadow: 0 1px 2px rgba(30, 42, 38, .06), 0 12px 32px -14px rgba(30, 42, 38, .28);
}

/* The admin bar must not sit on top of a fixed header. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* ─── Staggered reveals ────────────────────────────────────────────── */

/* A grid that reveals as one block reads as a slab dropping in; a small delay per child makes it
   read as a list arriving, which is what it is. */
@media (prefers-reduced-motion: no-preference) {
	.reveal[style*="--d"] {
		transition-delay: var(--d);
	}
}

/* ─── The counter ──────────────────────────────────────────────────── */

.pw-count {
	font-variant-numeric: tabular-nums;
}

/* ── The screens viewer ──────────────────────────────────────────────────────
   A fixed-height stage with the capture contained inside it. The height is what
   keeps the page from jumping between a landscape admin screen and a portrait
   document, so it is set here rather than left to the image. */
.screen-stage {
	/* A dark ground, which is what a document viewer puts behind a page and the only
	   reason the portrait invoice is visible at all: white paper on the site's near-white
	   surface read as an empty box. The admin captures fill the frame, so for those it is
	   a thin bezel and nothing more. */
	background: #39464f;

	/* The shape of the admin captures, so those fill the box and nothing is framed in
	   dead ground. The one portrait image in the set is contained inside the same box
	   rather than given a taller one, which is the whole point: the height never moves. */
	/* Width first, then the height follows it. A min-height here would invert that:
	   once the minimum beats the derived height, aspect-ratio starts deriving the WIDTH
	   from the height instead, and on a phone the stage came out wider than the card it
	   sits in and clipped the capture. */
	width: 100%;
	aspect-ratio: 1546 / 784;
}

/* Safari before 15 and Firefox before 89 have no aspect-ratio. They get the old fixed
   heights, which are close enough to the same shape at each breakpoint. */
@supports not (aspect-ratio: 2 / 1) {
	.screen-stage { height: 300px; }

	@media (min-width: 640px) {
		.screen-stage { height: 380px; }
	}

	@media (min-width: 1024px) {
		.screen-stage { height: 400px; }
	}
}

/* Panels stack, so the outgoing one can fade while the incoming one arrives. The
   hidden attribute is a UA rule and any author display rule beats it, which is why
   the [hidden] case is spelled out. */
.screen-panel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	opacity: 0;
	transition: opacity .28s ease;
}

.screen-panel.is-current {
	opacity: 1;
}

.screen-panel[hidden] {
	display: none;
}

.screen-shot {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(30, 42, 38, .1), 0 10px 30px -14px rgba(30, 42, 38, .3);
}

/* The selected tab. A left rail on the vertical strip, a bottom rail on the
   horizontal one, because on small screens the strip sits above the viewer. */
.screen-tab[aria-selected="true"] {
	border-color: var(--pw-brand);
	background: #f3f8f6;
}

.screen-tab[aria-selected="true"] .screen-tab__icon {
	color: var(--pw-brand);
}

.screen-tab:focus-visible {
	outline: 2px solid var(--pw-brand);
	outline-offset: 2px;
}

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

/* The per-panel sentence is the viewer's caption source. It is drawn only when the
   script never ran, where the panels stack and each one needs its own words. */
.screen-panel__text {
	display: none;
}

/* No script: the strip cannot switch anything, so every capture is simply shown,
   in order, with its sentence under it. */
.no-js .screen-stage {
	height: auto;
}

.no-js .screen-panel {
	position: static;
	display: block;
	opacity: 1;
	padding: 14px 14px 0;
}

.no-js .screen-panel[hidden] {
	display: block;
}

.no-js .screen-panel__text {
	display: block;
	margin: .75rem 0 1rem;
	font-size: .875rem;
	line-height: 1.6;
	color: #5b6b65;
}

.no-js .screen-shot {
	margin: 0 auto;
}

.no-js [data-screens-caption] {
	display: none;
}