/**
 * Aluleth theme styles.
 *
 * Kept small on purpose: Elementor (or the block editor) handles the page
 * design; the theme covers the header, footer, posts and WordPress basics.
 */

/* ---------- Settings ---------- */
:root {
	--aluleth-container: 1140px;
	--aluleth-narrow: 760px;
	--aluleth-gutter: 24px;
	--aluleth-accent: #2f5bea;
	--aluleth-text: #16181d;
	--aluleth-muted: #5d6470;
	--aluleth-border: #e3e6eb;
	--aluleth-surface: #f5f6f8;
	--aluleth-header-bg: #ffffff;
	--aluleth-header-text: #16181d;
	--aluleth-header-over: #ffffff;
	--aluleth-footer-bg: #16181d;
	--aluleth-footer-text: #e6e8ec;
	--aluleth-radius: 8px;
	--aluleth-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
	font-family: var(--aluleth-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--aluleth-text);
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
	/* Long words and addresses wrap instead of pushing the page wider. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Titles made of very long words (or long addresses) break inside their box, also in flex and grid rows. */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.aluleth-archive__title,
.aluleth-summary__title,
.aluleth-site-title,
.aluleth-site-description,
.aluleth-post-nav__title,
.comment-author,
.widget-title {
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
}

a {
	color: var(--aluleth-accent);
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.2;
	margin: 1.6em 0 0.6em;
}

p,
ul,
ol,
figure,
blockquote,
pre,
table {
	margin: 0 0 1.25em;
}

:focus-visible {
	outline: 2px solid var(--aluleth-accent);
	outline-offset: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--aluleth-border);
	margin: 2em 0;
}

blockquote {
	padding-left: 1.25em;
	border-left: 3px solid var(--aluleth-accent);
	color: var(--aluleth-muted);
}

pre {
	overflow: auto;
	padding: 1em;
	background: var(--aluleth-surface);
	border-radius: var(--aluleth-radius);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.6em;
	border: 1px solid var(--aluleth-border);
	text-align: left;
}

input,
textarea,
select,
button {
	font: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.8em;
	color: var(--aluleth-text);
	background: #ffffff;
	border: 1px solid #c9ced6;
	border-radius: var(--aluleth-radius);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--aluleth-accent);
	outline: 2px solid var(--aluleth-accent);
	outline-offset: 0;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	margin: 0;
	clip: auto;
	clip-path: none;
	color: #ffffff;
	background: #16181d;
	border-radius: var(--aluleth-radius);
	text-decoration: none;
}

/* ---------- Layout ---------- */

/* Keep the footer at the bottom on short pages. */
.aluleth-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.admin-bar .aluleth-site {
	min-height: calc(100vh - 32px);
}

.aluleth-main {
	flex: 1 0 auto;
}

.aluleth-container {
	width: 100%;
	max-width: calc(var(--aluleth-container) + 2 * var(--aluleth-gutter));
	margin-inline: auto;
	padding-inline: var(--aluleth-gutter);
}

.aluleth-container--narrow {
	max-width: calc(var(--aluleth-narrow) + 2 * var(--aluleth-gutter));
}

.aluleth-main {
	display: block;
	padding-block: 48px 72px;
}

.aluleth-full-width .aluleth-main,
.aluleth-main--canvas {
	padding-block: 0;
}

/* ---------- Buttons ---------- */
.aluleth-button,
button[type="submit"],
input[type="submit"],
.wp-block-button__link {
	display: inline-block;
	padding: 0.7em 1.3em;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	background: var(--aluleth-accent);
	border: 0;
	border-radius: var(--aluleth-radius);
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.aluleth-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	color: #ffffff;
	filter: brightness(1.1);
}

/* ---------- Header ---------- */
.aluleth-header {
	position: relative;
	z-index: 50;
	color: var(--aluleth-header-text);
	background: var(--aluleth-header-bg);
}

.aluleth-header:not(.aluleth-header--elementor) {
	border-bottom: 1px solid var(--aluleth-border);
}

.aluleth-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
}

.aluleth-header__brand {
	flex: 0 1 auto;
	min-width: 0;
}

.aluleth-header__brand .custom-logo {
	display: block;
	width: auto;
	max-height: 56px;
}

.aluleth-site-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.aluleth-site-title a {
	color: inherit;
	text-decoration: none;
}

.aluleth-branding {
	display: flex;
	align-items: center;
	gap: 14px;
}

.aluleth-branding .custom-logo-link {
	flex: 0 0 auto;
}

.aluleth-branding__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.aluleth-site-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	opacity: 0.75;
}

.aluleth-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.aluleth-nav__list,
.aluleth-nav__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aluleth-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 26px;
}

.aluleth-nav__list li {
	position: relative;
}

.aluleth-nav__list a {
	display: block;
	padding: 8px 0;
	font-weight: 500;
	color: inherit;
	text-decoration: none;
}

.aluleth-nav__list a:hover,
.aluleth-nav__list .current-menu-item > a,
.aluleth-nav__list .current-menu-ancestor > a {
	color: var(--aluleth-accent);
}

.aluleth-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	vertical-align: 3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* Dropdowns (desktop): open on hover and on keyboard focus. */
@media (min-width: 922px) {
	.aluleth-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: -16px;
		min-width: 220px;
		padding: 8px 0;
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		background: #ffffff;
		border: 1px solid var(--aluleth-border);
		border-radius: var(--aluleth-radius);
		box-shadow: 0 12px 32px rgba(22, 24, 29, 0.12);
		/* Hide after the fade-out, but show at once on open (keyboard users). */
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	}

	.aluleth-nav__list .sub-menu .sub-menu {
		top: -9px;
		left: 100%;
	}

	.aluleth-nav__list li:hover > .sub-menu,
	.aluleth-nav__list li:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.aluleth-nav__list .sub-menu a {
		padding: 8px 16px;
		color: var(--aluleth-text);
	}
}

/* Mobile menu toggle. */
.aluleth-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--aluleth-radius);
	cursor: pointer;
}

.aluleth-menu-toggle__icon {
	display: grid;
	gap: 4px;
	width: 18px;
}

.aluleth-menu-toggle__icon span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.aluleth-menu-toggle[aria-expanded="true"] .aluleth-menu-toggle__icon span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.aluleth-menu-toggle[aria-expanded="true"] .aluleth-menu-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.aluleth-menu-toggle[aria-expanded="true"] .aluleth-menu-toggle__icon span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 921px) {
	.aluleth-header__inner {
		flex-wrap: wrap;
		min-height: 68px;
		padding-block: 12px;
	}

	/* A long open menu can scroll inside a sticky or fixed header. */
	.aluleth-header.is-open {
		max-height: 100vh;
		overflow-y: auto;
	}

	.aluleth-menu-toggle {
		display: inline-flex;
	}

	.aluleth-header__nav {
		display: none;
		flex: 1 0 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 8px 0 24px;
	}

	.aluleth-header.is-open .aluleth-header__nav {
		display: flex;
	}

	/* Without JavaScript, the menu stays visible. */
	.no-js .aluleth-header__nav {
		display: flex;
	}

	.aluleth-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.aluleth-nav__list a {
		padding: 12px 0;
		border-bottom: 1px solid var(--aluleth-border);
	}

	.aluleth-nav__list .sub-menu {
		padding-left: 16px;
	}

	.aluleth-nav__list .menu-item-has-children > a::after {
		display: none;
	}

	.aluleth-header__cta {
		align-self: flex-start;
	}
}

/* Sticky header. */
.aluleth-header--sticky {
	position: sticky;
	top: 0;
}

.admin-bar .aluleth-header--sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .aluleth-header--sticky {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .aluleth-header--sticky {
		top: 0;
	}
}

.aluleth-header--sticky.is-scrolled {
	box-shadow: 0 6px 24px rgba(22, 24, 29, 0.08);
}

/* Transparent header: sits over the first section of the page. */
.aluleth-header--transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent !important;
}

.admin-bar .aluleth-header--transparent {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .aluleth-header--transparent {
		top: 46px;
	}
}

.aluleth-header--transparent.aluleth-header--sticky {
	position: fixed;
}

.aluleth-header--transparent:not(.aluleth-header--elementor) {
	color: var(--aluleth-header-over);
}

/* Over an image or a dark section, mark the current page with an underline
   instead of the accent color, which may not contrast enough. */
.aluleth-header--transparent:not(.is-scrolled):not(.is-open) .aluleth-nav__list > .current-menu-item > a,
.aluleth-header--transparent:not(.is-scrolled):not(.is-open) .aluleth-nav__list > li > a:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.aluleth-header--transparent.is-scrolled,
.aluleth-header--transparent.is-open {
	color: var(--aluleth-header-text);
	background: var(--aluleth-header-bg);
}

/* ---------- Posts and pages ---------- */
.aluleth-entry__header {
	margin-bottom: 32px;
}

.entry-title,
.aluleth-archive__title {
	margin: 0;
	font-size: clamp(32px, 4vw, 46px);
	letter-spacing: -0.02em;
}

.aluleth-entry-meta {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--aluleth-muted);
}

.aluleth-entry__thumbnail {
	margin-bottom: 32px;
}

.aluleth-entry__thumbnail img {
	display: block;
	width: 100%;
	border-radius: var(--aluleth-radius);
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.entry-content > .alignwide {
	width: min(var(--aluleth-container), 100vw - 2 * var(--aluleth-gutter));
	max-width: none;
	margin-inline: calc((min(var(--aluleth-container), 100vw - 2 * var(--aluleth-gutter)) - 100%) / -2);
}

/* Full width template with block content: keep text readable, let
   full-width blocks reach the edges. Elementor content is left alone. */
.aluleth-entry--full .entry-content > *:not(.alignfull):not(.alignwide):not(.elementor) {
	max-width: calc(var(--aluleth-container) + 2 * var(--aluleth-gutter));
	margin-inline: auto;
	padding-inline: var(--aluleth-gutter);
}

.aluleth-entry--full .entry-content > .alignfull {
	margin-inline: 0;
	width: 100%;
}

.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.aluleth-entry__footer {
	margin-top: 40px;
}

.aluleth-summary__more {
	margin: 12px 0 0;
	font-weight: 600;
}

.aluleth-post-nav {
	margin: 32px 0;
	padding: 20px 0;
	border-top: 1px solid var(--aluleth-border);
	border-bottom: 1px solid var(--aluleth-border);
}

.aluleth-post-nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
}

.aluleth-post-nav .nav-previous,
.aluleth-post-nav .nav-next {
	flex: 1 1 240px;
	min-width: 0;
}

.aluleth-post-nav .nav-next {
	text-align: end;
}

.aluleth-post-nav a {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
}

.aluleth-post-nav__label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aluleth-muted);
}

.aluleth-post-nav__title {
	font-weight: 600;
}

.aluleth-entry__tags {
	font-size: 15px;
	color: var(--aluleth-muted);
}

.aluleth-page-links {
	margin: 24px 0;
	font-weight: 600;
}

/* Archives. */
.aluleth-archive__header {
	margin-bottom: 40px;
}

.aluleth-archive__description {
	margin-top: 12px;
	color: var(--aluleth-muted);
}

.aluleth-post-list {
	display: grid;
	gap: 40px;
}

.aluleth-summary {
	display: grid;
	gap: 20px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--aluleth-border);
}

.aluleth-summary__thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--aluleth-radius);
}

.aluleth-summary__sticky {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--aluleth-accent);
}

.aluleth-summary__title {
	margin: 0;
	font-size: 26px;
}

.aluleth-summary__title a {
	color: inherit;
	text-decoration: none;
}

.aluleth-summary__title a:hover {
	color: var(--aluleth-accent);
}

.aluleth-summary__excerpt {
	margin-top: 12px;
}

.aluleth-summary__excerpt p:last-child {
	margin-bottom: 0;
}

.navigation.pagination {
	margin-top: 48px;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.navigation.pagination .page-numbers {
	min-width: 44px;
	padding: 10px 14px;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--aluleth-border);
	border-radius: var(--aluleth-radius);
}

.navigation.pagination .page-numbers.current {
	color: #ffffff;
	background: var(--aluleth-accent);
	border-color: var(--aluleth-accent);
}

/* 404 and empty states. */
.aluleth-404 {
	text-align: center;
	padding-block: 40px;
}

.aluleth-404__code {
	margin: 0;
	font-size: 96px;
	font-weight: 800;
	line-height: 1;
	color: var(--aluleth-accent);
}

.aluleth-404 .search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 24px auto;
}

/* Comments. */
.aluleth-comments {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--aluleth-border);
}

.aluleth-comments__list,
.aluleth-comments__list .children {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.aluleth-comments__list .children {
	margin: 24px 0 0 24px;
}

.aluleth-comments__list .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--aluleth-border);
}

.aluleth-comments__list .avatar {
	float: left;
	margin-right: 12px;
	border-radius: 50%;
}

.aluleth-comments__list .comment-metadata {
	font-size: 14px;
}

.aluleth-comments__list .comment-metadata a {
	color: var(--aluleth-muted);
}

.bypostauthor > .comment-body .fn::after {
	content: "\2022";
	margin-left: 6px;
	color: var(--aluleth-accent);
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

/* ---------- Footer ---------- */
.aluleth-footer:not(.aluleth-footer--elementor) {
	padding-block: 40px;
	color: var(--aluleth-footer-text);
	background: var(--aluleth-footer-bg);
}

.aluleth-footer a {
	color: inherit;
}

.aluleth-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.aluleth-footer__list a {
	text-decoration: none;
	overflow-wrap: anywhere;
}

.aluleth-footer__list a:hover {
	text-decoration: underline;
}

.aluleth-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 15px;
	opacity: 0.85;
}

.aluleth-footer__bottom p {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---------- WordPress core classes ---------- */
.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

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

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption,
figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--aluleth-muted);
}

.sticky {
	position: relative;
}

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

.search-form {
	display: flex;
	gap: 8px;
}

.search-form label {
	flex: 1;
}

@media (max-width: 767px) {
	:root {
		--aluleth-gutter: 18px;
	}

	body {
		font-size: 16px;
	}

	.aluleth-main {
		padding-block: 32px 56px;
	}

	.aluleth-footer__bottom {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}