/*
Theme Name: Locale
Author: Michael Etokakpan
Author URI: https://profiles.wordpress.org/micahele/
Description: A block-native (Full Site Editing) directory & listings theme built for Directorist. Ready-to-import sample directory content is included for local testing. Add booking via the Directorist booking extension.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: locale
Tags: full-site-editing, one-column, custom-colors, custom-menu, featured-images, full-width-template, rtl-language-support, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Copyright (C) 2026 Michael Etokakpan
This program is free software; you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 2 of the License, or (at your option) any later
version. See https://www.gnu.org/licenses/gpl-2.0.html for the full license text.
*/

/*
 * Core's navigation block only checks whether its own links overflow, not
 * whether the site logo and header buttons sharing the row leave it enough
 * room. Between roughly 600-780px that leaves the header wrapping into a
 * broken two-line layout instead of collapsing to the built-in hamburger.
 * This forces the hamburger open below that width so the row never wraps.
 */
@media (max-width: 780px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/*
 * The nav block's overlayBackgroundColor/overlayTextColor attributes (set in
 * header.html and footer.html) handle the overlay's colors. This just adds
 * the layout and typography refinements those attributes don't cover.
 */
.wp-block-navigation__responsive-dialog {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container-close {
	width: 2.5rem;
	height: 2.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	margin-top: var(--wp--preset--spacing--40);
	gap: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* ------------------------------------------------------------------
 * Design layer (v1.1): things theme.json can't express: overlays,
 * hover states, aspect ratios, the hero mosaic.
 * ------------------------------------------------------------------ */

:root {
	--locale-radius: 20px;
	--locale-shadow: 0 1px 2px rgba(20, 23, 31, 0.04), 0 8px 24px rgba(20, 23, 31, 0.06);
	--locale-shadow-hover: 0 2px 4px rgba(20, 23, 31, 0.06), 0 18px 40px rgba(20, 23, 31, 0.12);
}

/* Sticky, translucent header. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0); }

/* Small labels. */
.locale-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--10);
}
.locale-cta .locale-eyebrow { color: var(--wp--preset--color--accent); }

.locale-pill {
	display: inline-block;
	padding: 0.375rem 0.875rem 0.375rem 0.625rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	font-size: 0.875rem;
	font-weight: 600;
}
.locale-pill::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 4px rgba(15, 157, 143, 0.18);
	vertical-align: 0.05em;
}

.locale-mark-text {
	background: linear-gradient(transparent 62%, rgba(255, 183, 3, 0.55) 62%);
	color: inherit;
	padding: 0 0.05em;
}

.locale-arrow-link a {
	font-weight: 600;
	text-decoration: none;
}
.locale-arrow-link a::after { content: " →"; }
.locale-arrow-link a:hover { text-decoration: underline; }

/* Hero search (core search block fallback; Directorist styles its own). */
.locale-hero__search .wp-block-search__inside-wrapper {
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--locale-shadow);
}
.locale-hero__search .wp-block-search__input {
	border: 0;
	padding: 0.75rem 1.25rem;
	font-size: 1rem;
	background: transparent;
}
.locale-hero__search .wp-block-search__button {
	margin-left: 0.5rem;
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
}

.locale-popular a {
	display: inline-block;
	margin: 0.25rem 0 0 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.locale-popular a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.locale-stats p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
.locale-stats strong {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	line-height: 1.1;
}

/* Hero photo mosaic: one tall image beside two stacked squares. */
.locale-mosaic {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1rem;
	aspect-ratio: 1 / 1;
}
.locale-mosaic > .wp-block-image { margin: 0; overflow: hidden; border-radius: var(--locale-radius); }
.locale-mosaic > .locale-mosaic__tall { grid-row: 1 / 3; }
.locale-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locale-mosaic__badge {
	position: absolute;
	left: -1rem;
	bottom: 2rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--locale-shadow-hover);
	font-size: 0.875rem;
}
.locale-mosaic__badge strong { color: var(--wp--preset--color--primary); margin-right: 0.25rem; }

/* Photo tiles (categories, cities): gradient scrim + whole-tile link. */
.wp-block-cover.locale-tile {
	border-radius: var(--locale-radius);
	overflow: hidden;
	padding: 1.25rem;
	color: #fff;
}
.wp-block-cover.locale-tile .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(180deg, rgba(20, 23, 31, 0) 40%, rgba(20, 23, 31, 0.78) 100%);
}
.locale-tile .wp-block-cover__image-background { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.locale-tile:hover .wp-block-cover__image-background { transform: scale(1.06); }
.locale-tile h3, .locale-tile p { margin: 0; color: #fff; }
.locale-tile p { opacity: 0.85; }
.locale-tile h3 a { color: inherit; text-decoration: none; }
.locale-tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.locale-tile h3 a:focus-visible { outline: none; }
.locale-tile:focus-within { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* Cards (listings, testimonials). */
.wp-block-group.locale-card { padding: 0; }
.locale-card {
	position: relative;
	border-radius: var(--locale-radius);
	overflow: hidden;
	box-shadow: var(--locale-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.locale-card:hover { transform: translateY(-4px); box-shadow: var(--locale-shadow-hover); }
.locale-card__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.locale-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.locale-card:hover .locale-card__media img { transform: scale(1.05); }
.locale-card__body { padding: 1.25rem 1.375rem 1.375rem; }
.locale-card__body > * { margin: 0 0 0.375rem; }
.locale-card h3 a { color: inherit; text-decoration: none; }
.locale-card h3 a::after { content: ""; position: absolute; inset: 0; }
.locale-card h3 a:hover { color: var(--wp--preset--color--primary); }

.locale-chip {
	display: inline-block;
	padding: 0.2rem 0.625rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.locale-open { margin-left: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: #0b7a6f; }
.locale-open::before { content: "● "; }
.locale-card__foot {
	display: flex;
	justify-content: space-between;
	padding-top: 0.875rem;
	margin-top: 0.875rem !important;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}
.locale-card__foot strong { color: var(--wp--preset--color--contrast); }
.locale-card__foot span:last-child { font-weight: 700; color: var(--wp--preset--color--contrast); }

.wp-block-group.locale-quote { padding: var(--wp--preset--spacing--30); }
.locale-quote:hover { transform: none; }
.locale-quote .wp-block-image { margin: 0; flex-shrink: 0; }
.locale-quote .wp-block-image img { object-fit: cover; }
.locale-quote p { margin: 0; }
.locale-stars { color: #e89b00; letter-spacing: 0.15em; margin-bottom: 0.75rem !important; }

/* How it works. */
.locale-step-num {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	font-size: 1.125rem !important;
}

/* Split CTA. */
.wp-block-columns.locale-cta { border-radius: 28px; overflow: hidden; padding: 0; }
.locale-cta__media { position: relative; min-height: 320px; }
.locale-cta__media .wp-block-image { position: absolute; inset: 0; margin: 0; }
.locale-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.locale-checks { list-style: none; padding-left: 0; color: #d7dae1; }
.locale-checks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.locale-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Footer. */
.locale-footer .wp-block-column + .wp-block-column { margin-top: var(--wp--preset--spacing--30); }
.locale-footer__title {
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a4a9b6;
	margin-bottom: var(--wp--preset--spacing--20);
}
.locale-footer .wp-block-navigation a { color: #fff; text-decoration: none; }
.locale-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }

@media (max-width: 781px) {
	.locale-footer .wp-block-column + .wp-block-column { margin-top: var(--wp--preset--spacing--40); }
	.wp-block-group:has(> .wp-block-cover.locale-tile) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.wp-block-cover.locale-tile { min-height: 220px !important; padding: 0.875rem; }
	.wp-block-cover.locale-tile h3 { font-size: 1rem !important; }
	.locale-mosaic { margin-top: var(--wp--preset--spacing--40); }
	.locale-mosaic__badge { left: 1rem; }
	.locale-cta__media { min-height: 260px; }
}

@media (max-width: 600px) {
	header.wp-block-template-part .is-style-outline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.locale-card, .locale-card img, .locale-tile .wp-block-cover__image-background { transition: none; }
}