/*
Theme Name: Ledgerly
Theme URI: https://tanchev.net/themes/ledgerly-theme/
Author: tanchev.net
Author URI: https://tanchev.net/
Description: Block theme for accounting firms, bookkeepers, tax advisers, auditors, financial planners, law offices, insurance brokers and business consultants. Corporate patterns and style variations.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ledgerly
Tags: blog, one-column, grid-layout, block-patterns, block-styles, style-variations, full-site-editing, template-editing, wide-blocks, custom-logo, featured-images, threaded-comments, sticky-post, editor-style, translation-ready
*/

/* -------------------------------------------------------------------------
 * Ledgerly supplemental styles.
 * The design system lives in theme.json — this file only covers what
 * theme.json cannot express: focus behaviour, skip link, WordPress
 * required classes, reduced motion, and the registered block styles.
 * ---------------------------------------------------------------------- */

/* --- Skip link ---------------------------------------------------------- */

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base, #fff);
	border-radius: 0.5rem;
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent, #0f766e);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--ink, #0f172a);
	display: block;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: 0.9375rem;
	font-weight: 600;
	height: auto;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	line-height: normal;
	padding: 0.9rem 1.5rem;
	text-decoration: none;
	width: auto;
	z-index: 100000;
}

/* --- Focus visibility --------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #0f766e);
	outline-offset: 2px;
}

/* Interactive elements sitting on the dark navy surfaces need a light ring. */
.has-primary-background-color :where(a, button, summary):focus-visible,
.has-primary-dark-background-color :where(a, button, summary):focus-visible,
.has-primary-depth-gradient-background :where(a, button, summary):focus-visible,
.has-primary-accent-gradient-background :where(a, button, summary):focus-visible,
.ledgerly-inverse :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--base, #fff);
}

/* --- WordPress required classes ---------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.alignleft {
	float: left;
	margin-inline-end: 1.5rem;
	margin-block-end: 1rem;
}

.alignright {
	float: right;
	margin-inline-start: 1.5rem;
	margin-block-end: 1rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	margin-block-end: 1.5rem;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-inline: auto;
}

.wp-caption-text,
.gallery-caption {
	color: var(--wp--preset--color--ink-muted, #475569);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	margin-block-start: 0.5rem;
	text-align: center;
}

/* Sticky posts get a visible marker inside query loops. */
.wp-block-post.sticky,
.post.sticky {
	border-inline-start: 3px solid var(--wp--preset--color--accent, #0f766e);
	padding-inline-start: 1.25rem;
}

.wp-block-post.sticky .wp-block-post-title::after,
.post.sticky > .wp-block-post-title::after {
	color: var(--wp--preset--color--accent, #0f766e);
	content: " ★";
	font-size: 0.7em;
	vertical-align: middle;
}

.bypostauthor > .wp-block-comment-author-name::after {
	color: var(--wp--preset--color--accent, #0f766e);
	content: " •";
}

/* --- Navigation: open submenus on keyboard focus ------------------------ */

.wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
}

/* --- Registered block styles ------------------------------------------- */

/* Group / Column: "Card" */
.is-style-ledgerly-card {
	background-color: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--surface-alt, #e2e8f0);
	border-radius: 1rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 20px rgba(15, 23, 42, 0.05);
	height: 100%;
	padding: 1.5rem;
}

/* Group / Column: "Rule Top" — a hairline above the content */
.is-style-ledgerly-rule-top {
	border-block-start: 2px solid var(--wp--preset--color--accent, #0f766e);
	padding-block-start: var(--wp--preset--spacing--30, 1.5rem);
}

/* List: "Checklist" — a circled tick, matching the source design's
 * CircleCheck icon. The mark is a mask so it inherits its colour.
 */
:root {
	--ledgerly-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--ledgerly-check-color: var(--wp--preset--color--accent, #0f766e);
}

.ledgerly-inverse {
	--ledgerly-check-color: var(--wp--preset--color--accent-light, #14b8a8);
}

.is-style-ledgerly-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-ledgerly-checklist li {
	padding-inline-start: 1.75rem;
	position: relative;
}

.is-style-ledgerly-checklist li + li {
	margin-block-start: 0.7rem;
}

.is-style-ledgerly-checklist li::before {
	background-color: var(--ledgerly-check-color);
	content: "";
	height: 1.05em;
	inset-block-start: 0.28em;
	inset-inline-start: 0;
	-webkit-mask: var(--ledgerly-check) center / contain no-repeat;
	mask: var(--ledgerly-check) center / contain no-repeat;
	position: absolute;
	width: 1.05em;
}

/* --- Icons --------------------------------------------------------------
 * Inline Lucide SVGs. They inherit currentColor, so colour comes from the
 * surrounding block.
 */

.ledgerly-icon {
	display: block;
	flex: 0 0 auto;
}

/* A navy square tile with a teal icon inside — the recurring mark used on
 * service cards, contact rows and highlight boxes in the source design. */
.ledgerly-icon-tile {
	align-items: center;
	background-color: var(--wp--preset--color--primary, #1e3a5f);
	border-radius: 0.75rem;
	color: var(--wp--preset--color--accent-light, #14b8a8);
	display: inline-flex;
	flex: 0 0 auto;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.ledgerly-icon-tile.is-small {
	border-radius: 0.5rem;
	height: 2.25rem;
	width: 2.25rem;
}

.ledgerly-icon-tile.is-medium {
	border-radius: 0.75rem;
	height: 2.75rem;
	width: 2.75rem;
}

/* A plain teal mark with no tile, used in footer contact rows. */
.ledgerly-icon-accent {
	color: var(--wp--preset--color--accent-light, #14b8a8);
	display: inline-flex;
	flex: 0 0 auto;
}

/* Buttons that carry an icon before the label. */
.wp-block-button__link:has(.ledgerly-icon),
.ledgerly-btn-icon .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

/* Lists rendered without markers (footer columns, feature lists). */
.ledgerly-plain-list {
	list-style: none;
	padding-inline-start: 0;
}

.ledgerly-plain-list li + li {
	margin-block-start: 0.6rem;
}

.ledgerly-footer-label {
	color: var(--wp--preset--color--ink-inverse, #cbd5e1);
	opacity: 0.6;
}

.ledgerly-social .wp-block-social-link {
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 0.5rem;
}

/* --- Section wave dividers ----------------------------------------------
 * The source separates bands with a shallow wave rather than a straight
 * edge. The SVG is inline and purely decorative.
 */

.ledgerly-wave {
	display: block;
	line-height: 0;
	width: 100%;
}

.ledgerly-wave svg {
	display: block;
	height: clamp(2.5rem, 4vw, 3.75rem);
	width: 100%;
}

/* --- Header over the hero ------------------------------------------------
 * The source design fixes the navy bar over the top of the hero image. Block
 * themes stack template parts vertically instead, and the root block gap then
 * shows a strip of page background between the header and whatever follows
 * it — the white seam of L016.
 *
 * Two rules. The first closes that gap on every template. The second applies
 * only where the page actually opens with the hero: there the header leaves
 * the flow and sits on the hero, which already reserves
 * clamp(4.5rem, 9vw, 7rem) of top padding for exactly that. Templates without
 * a hero keep the header in normal flow, so it can never cover page content.
 */

.wp-site-blocks > .wp-block-template-part:first-child + * {
	margin-block-start: 0;
}

.wp-site-blocks:has(> main > .ledgerly-hero:first-child) {
	position: relative;
}

.wp-site-blocks:has(> main > .ledgerly-hero:first-child) > .wp-block-template-part:first-child {
	inset-block-start: 0;
	inset-inline: 0;
	position: absolute;
	z-index: 20;
}

/* --- Hero ---------------------------------------------------------------- */

/* The eyebrow badge: a rounded pill with a tinted fill and a teal border. */
.ledgerly-pill {
	align-items: center;
	background-color: var(--wp--custom--accent--tint, rgba(15, 118, 110, 0.22));
	border: 1px solid var(--wp--custom--accent--edge, rgba(15, 118, 110, 0.45));
	border-radius: 999px;
	color: var(--wp--preset--color--accent-light, #14b8a8);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 600;
	gap: 0.55rem;
	letter-spacing: 0.14em;
	margin: 0;
	padding: 0.45rem 1rem;
	text-transform: uppercase;
	width: auto;
}

.ledgerly-dot {
	background-color: currentColor;
	border-radius: 999px;
	display: block;
	height: 0.375rem;
	width: 0.375rem;
}

/* Hero and section lead paragraphs cap at the source's max-w-lg. */
.ledgerly-lead {
	max-width: 34rem;
}

/* Translucent card used for the hero panel and testimonial cards. */
.ledgerly-glass {
	background-color: var(--wp--custom--panel--fill, rgba(0, 0, 0, 0.16));
	border: 1px solid var(--wp--custom--panel--border, rgba(255, 255, 255, 0.18));
	border-radius: 1rem;
}

/* --- About section media column ------------------------------------------
 * The source design places a bordered square behind the media panel and a
 * small accent card overlapping its lower edge. Reproduced without any
 * photography.
 */

.ledgerly-about-media {
	position: relative;
}

.ledgerly-about-media::before {
	border: 4px solid var(--wp--preset--color--primary, #1e3a5f);
	border-radius: 1rem;
	content: "";
	height: 6rem;
	inset-block-start: -1.25rem;
	inset-inline-start: -1.25rem;
	position: absolute;
	width: 6rem;
	z-index: 0;
}

.ledgerly-about-panel {
	position: relative;
	z-index: 1;
}

.ledgerly-about-badge {
	margin-block-start: -2.25rem;
	margin-inline-start: auto;
	margin-inline-end: 1.5rem;
	position: relative;
	width: fit-content;
	z-index: 2;
}

/* Quote mark and rating row on testimonial cards. */
/* Gallery: the first frame is a tall feature tile, as in the source. */
@media (min-width: 782px) {
	.ledgerly-gallery > figure:first-child {
		grid-row: span 2;
	}

	.ledgerly-gallery > figure:first-child img {
		aspect-ratio: auto;
		height: 100%;
		object-fit: cover;
	}
}

.ledgerly-avatar {
	flex: 0 0 auto;
	margin: 0;
}

.ledgerly-avatar img {
	display: block;
}

.ledgerly-quotemark {
	color: var(--wp--preset--color--accent-light, #14b8a8);
	display: block;
}

.ledgerly-stars {
	color: var(--wp--preset--color--accent-light, #14b8a8);
	display: inline-flex;
	gap: 0.1rem;
}

.ledgerly-stars svg {
	fill: currentColor;
}

/* Teal mark on a light background (the accent-light tone is for dark bands). */
.ledgerly-icon-ink {
	color: var(--wp--preset--color--accent, #0f766e);
}

/* Map placeholder panel keeps the proportions of a real embed. */
.ledgerly-map {
	justify-content: center;
	min-height: 22rem;
}

.ledgerly-wave-strip {
	line-height: 0;
}

/* The hero's wave is pinned to its bottom edge so the hero gradient shows
 * through behind it and no seam appears between two backgrounds. */
.ledgerly-hero {
	position: relative;
}

/* A soft scrim over the side the copy sits on. Photographs vary, so this
 * guarantees the headline, chip and check list keep their contrast whatever
 * image a user drops in.
 *
 * It hangs off the cover's own background span, NOT off the cover element.
 * When a cover has a media background, core gives .wp-block-cover__background
 * and .wp-block-cover__inner-container the same z-index (1) with a selector far
 * too specific for a theme to outrank; a scrim pseudo-element on the cover then
 * lands at that same level and — being later in tree order — paints over the
 * copy, greying the headline. Nesting it inside the background span keeps it
 * above the gradient and below the text, whatever core does with z-index.
 */
.ledgerly-hero > .wp-block-cover__background::after {
	background: linear-gradient(90deg, rgba(2, 10, 22, 0.5) 0%, rgba(2, 10, 22, 0.28) 45%, rgba(2, 10, 22, 0) 75%);
	content: "";
	inset: 0;
	/* Fade out before the wave so the scrim neither tints it nor leaves a seam. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - clamp(5rem, 8vw, 7rem)), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - clamp(5rem, 8vw, 7rem)), transparent 100%);
	pointer-events: none;
	position: absolute;
}

/* Stretch the cover's inner container so its bottom edge is the cover's own
 * bottom edge; the wave then pins flush to it with no seam. */
.ledgerly-hero > .wp-block-cover__inner-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.ledgerly-hero .ledgerly-hero-wave {
	inset-block-end: 0;
	/* Break out of the cover's root padding so the wave spans edge to edge. */
	inset-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right));
	margin: 0;
	max-width: none;
	position: absolute;
	width: auto;
}

/* Scroll affordance, as in the source: a faint arrow above the wave. */
.ledgerly-scrollcue {
	color: var(--wp--preset--color--base, #fff);
	inset-block-end: calc(clamp(2.5rem, 4vw, 3.75rem) + 1.25rem);
	inset-inline: 0;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	text-align: center;
}

.ledgerly-scrollcue svg {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	.ledgerly-scrollcue svg {
		animation: ledgerly-bounce 2.4s ease-in-out infinite;
	}

	@keyframes ledgerly-bounce {
		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(0.35rem);
		}
	}
}

/* --- Team cards ---------------------------------------------------------- */

.ledgerly-monogram {
	align-items: center;
	aspect-ratio: 1;
	border-radius: 0.75rem;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.04em;
	width: 3.25rem;
}

/* Numbered step badge used by the process pattern. */
.ledgerly-step {
	align-items: center;
	aspect-ratio: 1;
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	justify-content: center;
	width: 2.75rem;
}

/* Image: "Framed" */
.is-style-ledgerly-framed img {
	border-radius: 0.75rem;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
}

/* Separator: "Short Rule" */
.wp-block-separator.is-style-ledgerly-short-rule {
	background: none;
	border: 0;
	border-block-start: 2px solid currentColor;
	margin-inline: 0;
	opacity: 1;
	width: 3rem;
}

.wp-block-separator.is-style-ledgerly-short-rule.has-text-align-center {
	margin-inline: auto;
}

/* --- Details / FAQ ------------------------------------------------------ */

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 600;
}

/* --- Motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------------------
 * Remove core's root-level block gap entirely.
 *
 * Core applies `:where(.wp-site-blocks) > * { margin-block-start: 1.25rem }`.
 * Every band in this theme carries its own padding, so that gap only ever shows
 * as a strip of page background — under the header, and above the footer where
 * it cuts a white line beneath the closing call to action.
 * -------------------------------------------------------------------------- */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
 * Section stack: full-bleed bands butt directly against each other.
 *
 * Core spaces layout children with `.wp-container-…-is-layout-flow > *`, a class
 * selector — so a bare `main > *` loses on specificity. Match the section element
 * types instead (0,1,1) and win on source order.
 *
 * Deliberately NOT done with blockGap on <main>: that sets an inherited custom
 * property, which also collapsed the spacing INSIDE each section (headings ended
 * up flush against their paragraphs). Sections touch; their contents keep rhythm.
 * -------------------------------------------------------------------------- */
main > .wp-block-group,
main > .wp-block-cover,
main > .wp-block-query,
main > .wp-block-columns,
main > .wp-block-post-content,
main > .wp-block-group > .wp-block-post-content,
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-cover,
.wp-block-post-content > .wp-block-query,
.wp-block-post-content > .wp-block-columns {
	margin-block-start: 0;
	margin-block-end: 0;
}