/*
Theme Name: Laid by Monty
Theme URI: https://laidbymonty.com/
Author: Laid by Monty
Description: Block theme for laidbymonty.com, built around a watercolour illustration of an elephant-head Burton branch. Large illustrated header with the site logo and menu, an off-white panel that rises over the illustration on inner pages, and a sidebar on the home page and posts.
Version: 1.0.3
Requires at least: 6.6
Tested up to: 7.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laidbymonty
*/

/* ---------------------------------------------------------------
   Header: the illustration sits top-left, its sky carrying on to
   the right. --lbm-imgw is the width of the drawing proper (the
   building); the image file is 1.7618 times wider because of the
   extra sky, and 0.8975 of --lbm-imgw tall.
   --------------------------------------------------------------- */
:root {
	--lbm-imgw: min(68vw, 1000px);
	--lbm-overlap: 0.5;           /* share of the illustration covered by the panel on inner pages */
	--lbm-pad: 40px;
}

.lbm-hdr {
	position: relative;
	min-height: calc(var(--lbm-imgw) * 0.8975);
	background-image: url(assets/images/header-wide.webp);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: calc(var(--lbm-imgw) * 1.7618) auto;
	margin: 0;
}

.lbm-topbar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 24px;
	padding: 26px var(--lbm-pad) 0;
	margin: 0;
}
.lbm-topbar > * { margin-block-start: 0 !important; }

.lbm-logo { grid-column: 2; justify-self: center; margin-top: 6px; }
.lbm-logo img { width: clamp(200px, 22vw, 320px); height: auto; }

.lbm-nav { grid-column: 3; justify-self: end; padding-top: 14px; }
.lbm-nav .wp-block-navigation-item__content { padding: 10px 0; }
.lbm-nav .wp-block-navigation__container { gap: 30px; }
.lbm-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--panel) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	box-shadow: 0 14px 30px -18px rgba(47, 37, 29, 0.45);
	padding: 6px 0;
	text-transform: none;
	letter-spacing: 0.04em;
}
.lbm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 18px; }
.lbm-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--panel) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 24px;
}

/* ---------------------------------------------------------------
   Main areas
   --------------------------------------------------------------- */
.lbm-home-main {
	max-width: 1180px;
	box-sizing: border-box;
	margin: 24px auto 0 !important;
	padding: 0 var(--lbm-pad) 88px;
}

/* Inner pages: off-white panel rising over the illustration */
.lbm-panel {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	box-sizing: border-box;
	margin: calc(var(--lbm-imgw) * -0.8975 * var(--lbm-overlap)) auto 0 !important;
	padding: 48px 56px 72px;
	background: var(--wp--preset--color--panel);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 18px 40px -24px rgba(47, 37, 29, 0.35);
}

/* Content + sidebar */
.lbm-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
}
.lbm-with-sidebar > * { margin-block-start: 0 !important; min-width: 0; }
.lbm-sidebar > * + * { margin-block-start: 32px; }
.lbm-sidebar img { max-width: 100%; height: auto; }

/* Home page: the sidebar becomes its own off-white panel
   (on posts it already sits inside the main panel) */
.lbm-home-main .lbm-with-sidebar { grid-template-columns: minmax(0, 1fr) 360px; }
.lbm-home-main .lbm-sidebar {
	background: var(--wp--preset--color--panel);
	padding: 28px 20px 32px;
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 18px 40px -24px rgba(47, 37, 29, 0.35);
}

/* Page titles with the small gold diamond rule beneath */
.lbm-title { margin-bottom: 0; }
.lbm-title::after {
	content: "";
	display: block;
	width: 140px;
	height: 14px;
	margin-top: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='14' viewBox='0 0 140 14'%3E%3Cpath d='M0 7H58M82 7H140' stroke='%23b88a2e' stroke-width='1.4'/%3E%3Cpath d='M70 1L76 7L70 13L64 7Z' fill='%23b88a2e'/%3E%3C/svg%3E") no-repeat;
}

/* Plain text pages read better at a sensible line length;
   plugin output (inside its own containers) keeps the full width */
.lbm-panel .wp-block-post-content > p,
.lbm-panel .wp-block-post-content > ul,
.lbm-panel .wp-block-post-content > ol,
.lbm-panel .wp-block-post-content > blockquote { max-width: 72ch; }

/* Post lists */
.lbm-post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.lbm-post-list > li { margin: 0; display: grid; grid-template-columns: 181px minmax(0, 1fr); gap: 20px; align-items: start; }
.lbm-post-list .wp-block-post-featured-image { margin: 0; }
.lbm-post-list .wp-block-post-featured-image img { width: 181px; height: 136px; object-fit: cover; }
.lbm-post-list .wp-block-post-title { font-size: 22px; margin: 0 0 4px; }
.lbm-post-list .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.lbm-post-list .wp-block-post-excerpt { margin-top: 6px; }
.lbm-post-list .wp-block-post-excerpt__excerpt { margin: 0; }
.lbm-meta { font-family: var(--wp--preset--font-family--label); }

/* Footer */
.lbm-footer {
	margin-top: 64px !important;
	padding: 44px var(--lbm-pad);
	background: var(--wp--preset--color--granite);
	color: #e9dfca;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	align-items: baseline;
	justify-content: space-between;
}
.lbm-footer > * { margin: 0 !important; }
.lbm-footer a { color: #e9dfca; }
.lbm-footer a:hover { color: var(--wp--preset--color--gold-light); }
.lbm-footer .wp-block-site-title { font-size: 22px; letter-spacing: 0.04em; }
.lbm-footer .wp-block-site-title a { color: var(--wp--preset--color--gold-light); text-decoration: none; }
.lbm-footer .lbm-copy { font-size: 14px; color: #c9bda5; }

/* Search form, buttons and inputs */
input[type="search"], input[type="text"], input[type="email"], textarea, select {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--panel);
	border: 1px solid #8f7d63;
	border-radius: 2px;
	min-height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
}
.wp-block-search__button { min-height: 44px; }

/* Fields sitting on an off-white panel are white, so they still stand
   out from it (on the page background they stay off-white) */
.lbm-panel :is(input[type="search"], input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], textarea, select),
.lbm-home-main .lbm-sidebar :is(input[type="search"], input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], textarea, select) {
	background-color: #ffffff;
}

/* Keyboard focus */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Phones and small tablets
   --------------------------------------------------------------- */
@media (max-width: 760px) {
	:root { --lbm-imgw: 100vw; --lbm-pad: 16px; }
	.lbm-hdr { background-image: url(assets/images/header-wide-1272.webp); }
	.lbm-topbar { padding-top: 12px; gap: 8px; }
	.lbm-logo { margin-top: 2px; }
	.lbm-logo img { width: 170px; }
	.lbm-nav { padding-top: 0; }
	.lbm-home-main { margin-top: 20px !important; padding-bottom: 64px; }
	.lbm-panel {
		margin: calc(var(--lbm-imgw) * -0.8975 * 0.4) 10px 0 !important;
		padding: 24px 16px 48px;
	}
	.lbm-with-sidebar,
	.lbm-home-main .lbm-with-sidebar { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.lbm-home-main .lbm-sidebar { padding: 20px 16px 24px; }
	.lbm-post-list > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.lbm-post-list .wp-block-post-featured-image img { width: 100%; height: auto; aspect-ratio: 181 / 136; }
}