/*
Theme Name: Hambo Film
Theme URI: https://hambo.film/
Author: Hambo.Film
Description: A charcoal and lime block theme for film stories, trailers and a local cinema directory.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: hambo-film
Tags: block-patterns, full-site-editing, blog, news, wide-blocks
*/

:root {
	--film-bg: #151515;
	--film-panel: #25271e;
	--film-cream: #f4eee3;
	--film-lime: #dcff65;
	--film-muted: #bdbcb5;
	--film-line: #42443b;
	--film-gutter: clamp(18px, 4vw, 52px);
	--film-wide: 1240px;
}

body { margin: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
img { max-width: 100%; }
.film-header, .film-footer { background: var(--film-panel); }
.film-header { border-bottom: 1px solid var(--film-line); }
.film-footer { border-top: 1px solid var(--film-line); margin-block-start: 0; }
.film-header-row, .film-footer-row { min-height: 72px; gap: 1rem; }
.film-footer-row { padding-block: 1.6rem; }
.film-brand { display: inline-flex; width: clamp(148px, 24vw, 222px); }
.film-brand img { display: block; width: 100%; height: auto; }
.film-header .wp-block-navigation { color: var(--film-cream); font-weight: 650; }
.film-header .wp-block-navigation a:hover,
.film-header .wp-block-navigation .current-menu-item > a { color: var(--film-lime); }
.film-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--film-panel);
	color: var(--film-cream);
	padding: var(--film-gutter);
}

.film-home, .film-page {
	margin-block: 0;
	padding: clamp(34px, 5vw, 64px) var(--film-gutter) clamp(56px, 7vw, 96px);
}
.film-hero {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	min-height: 395px;
	max-width: var(--film-wide);
	margin-inline: auto;
	overflow: hidden;
	background: var(--film-panel);
	border: 1px solid var(--film-line);
	border-radius: 12px;
}
.film-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(25px, 4.8vw, 64px);
}
.film-hero h1 { max-width: 10ch; margin: 0; font-size: clamp(3rem, 6.1vw, 5.85rem); line-height: .98; }
.film-hero p { max-width: 31ch; margin: 1.35rem 0 0; color: var(--film-muted); font-size: 1.08rem; }
.film-hero-button {
	margin-top: 1.75rem;
	padding: .75rem 1.15rem;
	border: 2px solid transparent;
	border-radius: 4px;
	background: var(--film-lime);
	color: #000;
	font-weight: 750;
	text-decoration: none;
}
.film-hero-button:hover { background: var(--film-cream); }
.film-hero-button:focus-visible { outline-color: var(--film-lime); }
.film-hero-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: center;
}
.film-latest { max-width: var(--film-wide); margin: clamp(42px, 7vw, 86px) auto 0; }
.film-latest > .wp-block-heading { max-width: none !important; padding-bottom: .65rem; border-bottom: 1px solid var(--film-line); }
.film-latest .wp-block-query { max-width: none; }
.film-archive .wp-block-post-template,
.film-latest .wp-block-post-template { gap: clamp(16px, 2.5vw, 32px); }
.film-card { padding: 0 0 1rem; border-bottom: 1px solid var(--film-line); }
.film-card .wp-block-post-featured-image img { border-radius: 7px; }
.film-card .wp-block-post-title a { color: var(--film-cream); text-decoration: none; }
.film-card .wp-block-post-title a:hover { color: var(--film-lime); text-decoration: underline; }
.film-card .wp-block-post-title { margin: .5rem 0; overflow-wrap: anywhere; }
.film-card .wp-block-post-date { margin-top: .8rem; color: var(--film-lime); }
.film-card .wp-block-post-excerpt { color: var(--film-muted); }
.film-page-heading h1 { margin: 0; overflow-wrap: anywhere; }
.film-page-heading .wp-block-post-date { margin-top: .7rem; color: var(--film-muted); }
.film-page .wp-block-post-content { margin-block-start: 1.75rem; }
.film-directory .wp-block-post-content,
.film-archive .wp-block-query { max-width: var(--film-wide); margin-inline: auto; }

/* Keep the directory forms and map cards legible on the charcoal canvas. */
.film-directory .geodir-search-container,
.film-directory .geodir-listings .card {
	color: #20231a;
	background: var(--film-cream);
}
.film-directory .geodir-search-container {
	padding: clamp(10px, 2vw, 20px);
	border-radius: 8px;
}
.film-directory .geodir-search-container a,
.film-directory .geodir-listings .card a { color: #263700; }
.geodir-map-wrap .gm-style .gm-style-iw,
.geodir-map-wrap .gm-style .gm-style-iw a { color: #222; }
.film-directory .geodir-search-container .btn-primary {
	color: #000;
	background: var(--film-lime);
	border-color: #455b13;
}

@media (max-width: 720px) {
	.film-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.film-hero-image { height: clamp(200px, 55vw, 370px); }
	.film-hero h1 { max-width: 12ch; }
	.film-archive .wp-block-post-template.is-layout-grid,
	.film-latest .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.film-archive .wp-block-post-template.is-layout-grid,
	.film-latest .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}