/*
Theme Name: Luu But
Theme URI: https://luubut.iqx.vn/
Author: Codex
Description: Minimal WordPress theme with a fluid content container only.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: luu-but
*/

:root {
	--luubut-bg: #f6f1e8;
	--luubut-surface: rgba(255, 255, 255, 0.78);
	--luubut-text: #231815;
	--luubut-muted: #6e625a;
	--luubut-border: rgba(35, 24, 21, 0.1);
	--luubut-shadow: 0 24px 60px rgba(35, 24, 21, 0.08);
	--luubut-gutter: clamp(16px, 3vw, 40px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background:
		radial-gradient(circle at top left, rgba(209, 181, 145, 0.28), transparent 32%),
		radial-gradient(circle at bottom right, rgba(151, 106, 83, 0.16), transparent 28%),
		var(--luubut-bg);
	color: var(--luubut-text);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.7;
}

a {
	color: inherit;
}

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

.luubut-shell {
	width: 100%;
	padding: clamp(18px, 4vw, 48px);
}

.luubut-shell.is-singular {
	min-height: 100svh;
	display: grid;
	align-items: center;
}

.luubut-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 56px);
	background: var(--luubut-surface);
	backdrop-filter: blur(10px);
	border: 1px solid var(--luubut-border);
	box-shadow: var(--luubut-shadow);
}

.luubut-container.is-singular {
	min-height: calc(100svh - (2 * clamp(18px, 4vw, 48px)));
	display: flex;
	align-items: center;
	justify-content: center;
}

.luubut-entry,
.luubut-empty,
.luubut-list {
	width: 100%;
}

.luubut-entry {
	min-height: 100%;
}

.luubut-content {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.luubut-content > :first-child,
.luubut-list > :first-child {
	margin-top: 0;
}

.luubut-content > :last-child,
.luubut-list > :last-child {
	margin-bottom: 0;
}

.luubut-list {
	display: grid;
	gap: 18px;
}

.luubut-card {
	padding: 24px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--luubut-border);
}

.luubut-card h2,
.luubut-empty h1 {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.15;
}

.luubut-card p,
.luubut-empty p {
	margin: 0;
	color: var(--luubut-muted);
}

.luubut-content .alignwide,
.luubut-content .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: 100%;
}

.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-media-text {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.luubut-audio {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 30;
}

.luubut-audio-media {
	display: none;
}

.luubut-audio-toggle {
	appearance: none;
	border: 1px solid rgba(35, 24, 21, 0.24);
	background: rgba(255, 255, 255, 0.92);
	color: var(--luubut-text);
	width: 52px;
	height: 52px;
	padding: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 12px 30px rgba(35, 24, 21, 0.12);
}

.luubut-audio-toggle svg {
	display: block;
	width: 22px;
	height: 22px;
}

.luubut-audio-icon {
	display: none;
	line-height: 0;
}

.luubut-audio-toggle[aria-pressed="false"] .luubut-audio-icon-play,
.luubut-audio-toggle[aria-pressed="true"] .luubut-audio-icon-stop {
	display: block;
}

@media (max-width: 782px) {
	body {
		font-size: 17px;
	}

	.luubut-shell {
		padding: var(--luubut-gutter);
	}

	.luubut-container {
		padding: 20px;
	}

	.luubut-container.is-singular {
		min-height: calc(100svh - (2 * var(--luubut-gutter)));
	}
}