/**
 * Viora base theme styles.
 *
 * Only what WordPress renders outside Elementor: document defaults, the blog
 * templates and the builder location wrappers.
 */

/*
 * Padding must never add to a width. Elementor resets this inside its own
 * markup, so without it the theme's own templates — fallback header/footer,
 * blog, 404 — push a horizontal scrollbar on every screen narrower than the
 * container.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body.viora {
	margin: 0;
	background: var(--viora-color-surface);
	color: var(--viora-color-text);
	font-family: var(--viora-font-body);
	font-size: var(--viora-size-base);
	line-height: var(--viora-leading-normal);
	-webkit-font-smoothing: antialiased;
}

/*
 * Document defaults, not overrides: :where() keeps these at zero specificity
 * so any widget class wins. Without it `.viora h2` (0-1-1) silently outranks
 * a widget's own `.viora-x__heading` (0-1-0) and repaints its type.
 */
:where(.viora) :where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--viora-space-2xs);
	color: var(--viora-color-heading);
	font-family: var(--viora-font-heading);
	font-weight: var(--viora-weight-bold);
	line-height: var(--viora-leading-snug);
}

/*
 * Prose links only. Anything with a class carries its own colour from the
 * design system — without :not([class]) this rule outranks the button
 * primitives (0-1-1 beats 0-1-0) and repaints their labels.
 */
.viora a:not([class]) {
	color: var(--viora-color-primary);
	transition: color var(--viora-motion-fast) var(--viora-motion-easing);
}

.viora a:not([class]):hover {
	color: var(--viora-color-primary-hover);
}

:where(.viora) img {
	max-width: 100%;
	height: auto;
}

/* Builder locations ------------------------------------------------ */

.viora-builder-location {
	width: 100%;
}

.viora-header {
	position: relative;
	z-index: var(--viora-z-header);
}

/*
 * A header widget in overlay mode lifts its location wrapper out of the flow
 * so the first section (the hero) runs underneath it.
 */
.viora-header--overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
}


/* Plain pages (no builder) ----------------------------------------- */

.viora-page__inner {
	width: min(1082px, 100% - 2 * var(--viora-layout-container-pad));
	margin-inline: auto;
}

.viora-page__header {
	padding-block: clamp(3rem, 6.9vw, 6.2rem);
}

.viora-page__header .viora-head__title {
	--viora-head-size: clamp(2.5rem, 5.55vw, 5rem);
	max-width: 18ch;
}

.viora-page__body {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
}

/* Fallback header/footer (shown only until a template is built) ----- */

.viora-fallback {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--viora-space-sm);
	padding-block: var(--viora-space-sm);
	border-bottom: 1px solid var(--viora-color-border);
}

.viora-fallback--footer {
	border-top: 1px solid var(--viora-color-border);
	border-bottom: 0;
	color: var(--viora-color-text-muted);
	font-size: var(--viora-size-sm);
}

.viora-fallback__brand {
	font-family: var(--viora-font-heading);
	font-size: var(--viora-size-lg);
	font-weight: var(--viora-weight-bold);
	color: var(--viora-color-heading);
	text-decoration: none;
}

.viora-fallback__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--viora-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.viora-fallback__menu a {
	color: var(--viora-color-text);
	text-decoration: none;
	font-weight: var(--viora-weight-medium);
}

.viora-fallback__menu a:hover {
	color: var(--viora-color-primary);
}

.viora-fallback__notice {
	width: 100%;
	color: var(--viora-color-text-muted);
	font-size: var(--viora-size-xs);
}

/* Blog templates --------------------------------------------------- */

.viora-main {
	display: block;
}

.viora-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--viora-space-md);
}

.viora-entry__thumb img {
	display: block;
	width: 100%;
	border-radius: var(--viora-radius-md);
}

.viora-entry__title {
	margin: var(--viora-space-xs) 0 var(--viora-space-3xs);
	font-size: var(--viora-size-xl);
}

.viora-entry__title a {
	color: inherit;
	text-decoration: none;
}

.viora-entry__meta {
	color: var(--viora-color-text-muted);
	font-size: var(--viora-size-sm);
}

.viora-entry__content {
	margin-top: var(--viora-space-xs);
}

.viora-single__header {
	margin-bottom: var(--viora-space-md);
}

.viora-single__title {
	font-size: var(--viora-size-3xl);
}

.viora-pagination {
	display: flex;
	gap: var(--viora-space-2xs);
	margin-top: var(--viora-space-xl);
}

.viora-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--viora-space-3xs);
	border: 1px solid var(--viora-color-border);
	border-radius: var(--viora-radius-sm);
	color: var(--viora-color-heading);
	text-decoration: none;
}

.viora-pagination .page-numbers.current,
.viora-pagination .page-numbers:hover {
	background: var(--viora-color-primary);
	border-color: var(--viora-color-primary);
	color: var(--viora-color-on-primary);
}

.viora-widget {
	margin-bottom: var(--viora-space-md);
}

.viora-widget__title {
	font-size: var(--viora-size-lg);
}

.viora-no-results {
	padding-block: var(--viora-space-2xl);
	text-align: center;
}