/* The theme only styles what WordPress builds: header, footer, posts, comments.
	Landing pages are handled by Containers and plugin widgets — the theme stays out. */

/* Only what the theme itself mints. Everything else it uses is declared once, in the plugin's
	token sheet, which this file names as a dependency; the standalone copy lives in
	alovesinh-token-fallback.css and loads only when that sheet is absent. */
:root,
body {
	--alv-grid-one-col: minmax( 0, 1fr );
	--alv-grid-sidebar: var( --alv-grid-one-col ) 300px;
	--alv-grid-posts: repeat( 3, minmax( 0, 1fr ) );
	--alv-grid-two-col: repeat( 2, minmax( 0, 1fr ) );
	--alv-dot-size: 4px;
	--alv-logo-height: 38px;
	--alv-h1-size: clamp( 36px, 5vw, 60px );
	--alv-card-title-size: 20px;
}

/* Font family stays OUTSIDE var(): once Elementor declares the variable, the fallback inside var() stops running. */
/* The type baseline must live here, because a page built by WordPress alone loads no Elementor CSS;
	the Elementor kit loads AFTER this file, so pages with widgets still follow Site Settings. */
body {
	font-family: var( --e-global-typography-text-font-family, var( --alv-font-brand, sans-serif ) ), var( --alv-font-fallback, sans-serif );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-ink );
	background: var( --alv-c-white );
	-webkit-font-smoothing: antialiased;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

/* The browser swaps two pages in one frame at the end of a navigation; this makes them cross-fade instead. */
@view-transition {
	navigation: auto;
}

/* Marks a page still on its way; the 0.4s delay keeps it off a page that arrives fast. */
html.alv-navigating::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 3px;
	transform: scaleX( 0.6 );
	transform-origin: left;
	background: var( --alv-c-brand );
	animation: alv-navigating 1.6s ease-out 0.4s both;
	pointer-events: none;
}

@keyframes alv-navigating {

	from {
		transform: scaleX( 0 );
	}

	to {
		transform: scaleX( 0.9 );
	}
}

@keyframes alv-navigating-still {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* The heading scale lives here, not in the Elementor kit: a kit typography slot holds one fixed
	size per breakpoint and cannot express the clamp() the source design scales with. */
h1,
h2,
h3,
h4 {
	margin: 0;
	line-height: var( --alv-lh-heading );
	letter-spacing: var( --alv-tr-tight-1 );
	color: var( --alv-c-ink );
}

h1 {
	font-size: var( --alv-h1-size );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: -0.025em;
}

h2 {
	font-size: clamp( 28px, 3.4vw, 44px );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-2 );
}

h3 {
	font-size: clamp( 20px, 2vw, 24px );
	font-weight: var( --alv-fw-bold );
}

h4 {
	font-size: 18px;
	font-weight: var( --alv-fw-bold );
}

p {
	margin: 0;
	color: var( --alv-c-text-2 );
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	border: 0;
	font: inherit;
	background: none;
	cursor: pointer;
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.alv-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var( --alv-sp-2 ) var( --alv-sp-3 );
	background: var( --alv-c-white );
}

/* Add the admin bar height: without it the focused skip link hides behind the bar. */
.alv-skip-link:focus {
	top: calc( var( --wp-admin--admin-bar--height, 0px ) + var( --alv-sp-2 ) );
	left: var( --alv-sp-2 );
}

/* WordPress core's own rule: a page that loads no block styles otherwise shows these screen reader headings,
	as the search page did with its pagination heading. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal !important;
}

.screen-reader-text:focus {
	background-color: #ddd;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.alv-container {
	max-width: var( --alv-w-page );
	margin-inline: auto;
	padding-inline: var( --alv-w-gutter );
}

.alv-btn {
	--alv-btn-pad-y: 14px;
	--alv-btn-pad-x: 22px;
	--alv-btn-radius: var( --alv-r-2 );
	--alv-btn-font-size: var( --alv-fs-3 );
	--alv-btn-dur: var( --alv-dur-1 );
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-2 );
	padding: var( --alv-btn-pad-y ) var( --alv-btn-pad-x );
	border: 0;
	border-radius: var( --alv-btn-radius );
	font-family: inherit;
	font-size: var( --alv-btn-font-size );
	font-weight: var( --alv-fw-bold );
	cursor: pointer;
	transition:
		transform var( --alv-btn-dur ) ease,
		background var( --alv-btn-dur ) ease,
		box-shadow var( --alv-btn-dur ) ease;
}

.alv-btn:hover {
	transform: translateY( -1px );
}

.alv-btn-primary {
	--alv-btn-bg: var( --alv-c-accent );
	color: var( --alv-c-white );
	background: var( --alv-btn-bg );
	box-shadow: 0 10px 24px color-mix( in srgb, var( --alv-btn-bg ) 35%, transparent );
}

.alv-btn-primary:hover {
	background: var( --alv-c-accent-hover );
	box-shadow: 0 14px 28px color-mix( in srgb, var( --alv-btn-bg ) 45%, transparent );
}

.alv-site-header {
	border-bottom: var( --alv-bd-hairline ) solid var( --alv-c-border );
	background: var( --alv-c-white );
}

.alv-site-header .alv-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --alv-sp-3 );
	padding-block: 14px;
}

.alv-site-header .custom-logo {
	width: auto;
	height: var( --alv-logo-height );
}

.alv-site-title {
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-extrabold );
}

.alv-nav-menu,
.alv-nav-menu .sub-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var( --alv-sp-2 );
}

.alv-nav-menu a,
.alv-site-title a,
.alv-site-footer-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var( --alv-touch );
}

.alv-nav-menu a {
	padding: 0 14px;
	border-radius: var( --alv-r-1 );
	font-size: var( --alv-fs-3 );
	color: var( --alv-c-text-2 );
}

.alv-nav-menu a:hover {
	color: var( --alv-c-brand-deep );
	background: var( --alv-c-brand-tint );
}

.alv-page-grid {
	display: grid;
	grid-template-columns: var( --alv-grid-one-col );
	gap: var( --alv-sp-5 );
	padding-block: var( --alv-sp-6 );
}

.alv-page-grid-sidebar {
	grid-template-columns: var( --alv-grid-sidebar );
}

.alv-sidebar {
	min-width: 0;
}

.alv-archive-header,
.alv-widget {
	margin-bottom: var( --alv-sp-5 );
}

.alv-post-card-title {
	margin: 0;
	font-size: var( --alv-card-title-size );
	font-weight: var( --alv-fw-bold );
	line-height: var( --alv-lh-snug );
	letter-spacing: var( --alv-tr-tight-1 );
}

.alv-post-content > * {
	margin-block: var( --alv-sp-3 );
}

/* Zero class weight on purpose: a block or widget that resets its own list still wins here, and lists
	inside an Elementor document are left to the widget that printed them. */
:where( .alv-post-content ) :is( ul, ol ):not( :where( [data-elementor-type] * ) ) {
	padding-inline-start: var( --alv-sp-4 );
	list-style: revert;
}

.alv-archive-title {
	margin: 0 0 var( --alv-sp-2 );
}

.alv-search-result {
	margin-bottom: var( --alv-sp-4 );
}

.alv-search-result-title {
	margin: 0 0 var( --alv-sp-1 );
}

.alv-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --alv-sp-2 );
	max-width: var( --alv-w-reading );
}

.alv-search-label {
	flex-basis: 100%;
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

.alv-search-field,
.alv-comments .comment-form input[type="text"],
.alv-comments .comment-form input[type="email"],
.alv-comments .comment-form input[type="url"],
.alv-comments .comment-form textarea {
	width: 100%;
	min-height: var( --alv-touch );
	max-width: var( --alv-w-reading );
	padding: var( --alv-sp-2 ) var( --alv-sp-3 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-text-muted );
	border-radius: var( --alv-r-2 );
	font-family: inherit;
	font-size: var( --alv-fs-3 );
}

.alv-search-field {
	flex: 1;
	min-width: 0;
}

.alv-comments {
	margin-top: var( --alv-sp-6 );
	padding-top: var( --alv-sp-5 );
	border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

.alv-comments-title {
	margin: 0 0 var( --alv-sp-3 );
}

.alv-comments-list {
	margin: 0 0 var( --alv-sp-4 );
}

.alv-comments-list .children {
	padding-left: var( --alv-sp-4 );
}

.alv-comments-list .comment-body {
	padding-block: var( --alv-sp-3 );
	border-bottom: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

.alv-comments-closed {
	color: var( --alv-c-text-muted );
}

.alv-comments .comment-form-comment label,
.alv-comments .comment-form-author label,
.alv-comments .comment-form-email label,
.alv-comments .comment-form-url label {
	display: block;
	margin-bottom: var( --alv-sp-1 );
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

.alv-widget-title {
	margin: 0 0 var( --alv-sp-2 );
	font-size: var( --alv-fs-4 );
}

.alv-site-footer {
	padding-block: var( --alv-sp-6 ) var( --alv-sp-3 );
	color: var( --alv-c-on-dark );
	background: var( --alv-c-ink );
}

.alv-site-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var( --alv-sp-3 );
	margin: 0 0 var( --alv-sp-3 );
}

.alv-site-footer-copyright {
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-on-dark-muted );
}

.alv-404 {
	padding-block: var( --alv-sp-7 );
	text-align: center;
}

.alv-404-code {
	font-size: 96px;
	line-height: 1;
	color: var( --alv-c-brand-deep );
}

.alv-404 .alv-search-form {
	margin: var( --alv-sp-4 ) auto;
}

.alv-blog {
	padding-block: var( --alv-sp-6 );
}

.alv-blog-header {
	margin-bottom: var( --alv-sp-4 );
}

.alv-blog-title {
	margin: 0 0 var( --alv-sp-2 );
}

.alv-blog-description {
	margin-bottom: var( --alv-sp-3 );
	color: var( --alv-c-text-muted );
}

.alv-filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --alv-sp-2 );
	margin: 0 0 var( --alv-sp-4 );
}

.alv-filter-list a {
	display: inline-flex;
	align-items: center;
	min-height: var( --alv-touch );
	padding: 0 var( --alv-sp-3 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-text-2 );
}

.alv-filter-list a:hover,
.alv-filter-list .current-cat a {
	border-color: var( --alv-c-brand );
	color: var( --alv-c-brand-deep );
}

.alv-post-grid {
	display: grid;
	grid-template-columns: var( --alv-grid-posts );
	gap: var( --alv-sp-4 );
}

.alv-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-2 );
	background: var( --alv-c-white );
	transition: transform var( --alv-dur-1 ) ease, border-color var( --alv-dur-1 ) ease;
}

.alv-post-card:hover {
	border-color: var( --alv-c-brand-veil );
	transform: translateY( -4px );
}

.alv-post-card:hover .alv-post-card-title {
	color: var( --alv-c-brand-deep );
}

.alv-post-card-thumb {
	display: block;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 100%;
	aspect-ratio: var( --alv-ratio-card );
}

.alv-post-card-thumb img,
.alv-post-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alv-post-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --alv-sp-2 );
	padding: var( --alv-sp-3 );
}

.alv-category-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: var( --alv-sp-1 ) var( --alv-sp-2 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-brand-deep );
	background: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
}

.alv-post-meta {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-2 );
	margin-top: auto;
	padding-top: var( --alv-sp-2 );
	border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

.alv-post-meta-avatar {
	border-radius: var( --alv-r-circle );
}

.alv-post-meta-dot {
	width: var( --alv-dot-size );
	height: var( --alv-dot-size );
	border-radius: var( --alv-r-circle );
	background: var( --alv-c-on-dark );
}

.alv-post-excerpt {
	margin: var( --alv-sp-2 ) 0 0;
	font-size: var( --alv-fs-4 );
	color: var( --alv-c-text-muted );
}

.alv-post-cover {
	overflow: hidden;
	max-width: 100%;
	margin: var( --alv-sp-4 ) 0;
	border-radius: var( --alv-r-2 );
	aspect-ratio: var( --alv-ratio-cover );
}

.alv-post-caption {
	margin-top: var( --alv-sp-2 );
	font-size: var( --alv-fs-2 );
	text-align: center;
	color: var( --alv-c-text-muted );
}

.alv-post-content table {
	width: 100%;
	border-collapse: collapse;
}

.alv-post-content .wp-block-table {
	overflow-x: auto;
}

.alv-related {
	margin-top: var( --alv-sp-6 );
	padding-top: var( --alv-sp-5 );
	border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

.alv-related-title {
	margin: 0 0 var( --alv-sp-4 );
}

.alv-pagination {
	margin-top: var( --alv-sp-5 );
}

.alv-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --alv-touch );
	min-height: var( --alv-touch );
	padding: 0 var( --alv-sp-2 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-2 );
	color: var( --alv-c-text-2 );
}

.alv-pagination .page-numbers.current {
	border-color: var( --alv-c-brand-deep );
	color: var( --alv-c-white );
	background: var( --alv-c-brand-deep );
}

@media ( prefers-reduced-motion: reduce ) {

	@view-transition {
		navigation: none;
	}

	html.alv-navigating::before {
		animation-name: alv-navigating-still;
	}

	.alv-btn,
	.alv-post-card {
		transition: none;
	}

	.alv-btn:hover,
	.alv-post-card:hover {
		transform: none;
	}
}

@media ( max-width: 980px ) {

	:root,
	body {
		--alv-grid-sidebar: var( --alv-grid-one-col );
		--alv-grid-posts: var( --alv-grid-two-col );
	}
}

/* Below the clamp() floor the h1 still overflows a 320px screen, so it drops two more steps, not wrapping mid-word. */
@media ( max-width: 560px ) {

	:root,
	body {
		--alv-grid-posts: var( --alv-grid-one-col );
		--alv-h1-size: 34px;
	}
}