/*
Theme Name: Pro OOOOO
Theme URI: https://ooooo.id/pro
Author: OOOOO
Author URI: https://ooooo.id
Description: A clean, bold block theme for property listings and agencies. Two columns with a sidebar on the left, square photos everywhere, WhatsApp buttons, 3 colour styles (Sea & Tosca, Caramel, Grey & Blood Red) and 10 self-hosted fonts. Pair it with the free OOOOO Listings plugin for listings, search, maps and enquiry forms.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pro-ooooo
Tags: blog, portfolio, two-columns, left-sidebar, block-patterns, block-styles, custom-colors, editor-style, full-site-editing, style-variations, translation-ready, wide-blocks
*/

/* Square photos everywhere (pick the "Original ratio" image style to opt out). */
.wp-block-image:not(.is-style-original) img,
.wp-block-gallery .wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-media-text__media img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-post-featured-image a,
.wp-block-media-text__media img,
.wp-block-gallery .wp-block-image img {
	border-radius: var(--wp--custom--radius);
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

/* Two-column layout: sidebar left, content right. */
.pro-layout.wp-block-columns {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}
.pro-layout > .pro-side {
	flex: 0 0 var(--wp--custom--sidebar) !important;
	max-width: 100%;
}
.pro-layout > .pro-main {
	min-width: 0;
}
@media (min-width: 782px) {
	.pro-side > .ool-agentbox:only-child {
		position: sticky;
		top: 1.5rem;
	}
}
@media (max-width: 781px) {
	.pro-layout.is-side-last-mobile > .pro-side {
		order: 2;
	}
	.pro-layout > .pro-side {
		flex-basis: 100% !important;
	}
}

/* Header and top bar. */
.pro-header {
	background: var(--wp--custom--fill--banner);
}
.pro-topbar {
	background: var(--wp--preset--color--secondary);
}
.pro-topbar a,
.pro-header a {
	color: inherit;
}
.pro-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* Cards and boxes. */
.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow);
	padding: var(--wp--preset--spacing--30);
}
.is-style-card-soft {
	background: var(--wp--preset--color--soft);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--30);
}
.is-style-box {
	background: var(--wp--custom--fill--box);
	color: var(--wp--preset--color--on-secondary);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--30);
}
.is-style-banner {
	background: var(--wp--custom--fill--banner);
	color: var(--wp--preset--color--on-primary);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.is-style-box :where(h1, h2, h3, h4, a:not(.wp-element-button)),
.is-style-banner :where(h1, h2, h3, h4, a:not(.wp-element-button)),
.pro-header :where(h1, h2, h3, h4),
.pro-dark :where(h1, h2, h3, h4) {
	color: inherit;
}
.is-style-banner .is-style-eyebrow {
	color: var(--wp--custom--label-on-dark);
}
:root :where(.is-style-banner, .is-style-box) .wp-block-button:not(.is-style-whatsapp):not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
:root :where(.is-style-banner, .is-style-box) .wp-block-button.is-style-outline .wp-block-button__link {
	color: inherit;
	border-color: currentColor;
}
.is-style-banner .has-muted-color,
.is-style-box .has-muted-color {
	color: inherit !important;
	opacity: 0.85;
}

/* Small label above headings. */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* WhatsApp button style + floating button. */
.wp-block-button.is-style-whatsapp .wp-block-button__link {
	background: var(--wp--custom--whatsapp--background);
	color: var(--wp--custom--whatsapp--text);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.wp-block-button.is-style-whatsapp .wp-block-button__link::before,
.pro-wa-float a::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex: none;
	background: currentColor;
	-webkit-mask: url("assets/images/whatsapp.svg") center / contain no-repeat;
	mask: url("assets/images/whatsapp.svg") center / contain no-repeat;
}
.wp-block-button.is-style-whatsapp .wp-block-button__link:hover {
	filter: brightness(0.95);
}
.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--wp--custom--fill--accent);
	color: var(--wp--preset--color--on-accent);
}
.pro-wa-float {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 50;
	margin: 0;
}
.pro-wa-float a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--wp--custom--whatsapp--background);
	color: var(--wp--custom--whatsapp--text);
	padding: 0.85rem 1.3rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
@media (max-width: 600px) {
	.pro-wa-float a {
		font-size: 0;
		padding: 0.95rem;
	}
	.pro-wa-float a::before {
		width: 26px;
		height: 26px;
	}
}

/* Checklist and numbered steps. */
.is-style-check {
	list-style: none;
	padding-left: 0;
}
.is-style-check li {
	position: relative;
	padding-left: 1.8em;
	margin-bottom: 0.4em;
}
.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.pro-num {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--custom--fill--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 800;
}
.pro-stat {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0.25rem;
}

/* Post list rows. */
.pro-post-row {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: var(--wp--preset--spacing--30);
}
.pro-post-row .wp-block-post-featured-image {
	margin-bottom: 0;
}

/* Sidebar widgets. */
.pro-side .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	padding: 0.65rem 0.9rem;
}
.pro-side .wp-block-search__button {
	border-radius: var(--wp--custom--radius-small);
}
.pro-side .wp-block-categories,
.pro-side .wp-block-latest-posts {
	padding-left: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}
.pro-side .wp-block-categories li,
.pro-side .wp-block-latest-posts li {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Map embed (core/html with an iframe). */
.pro-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wp--custom--radius);
}

/* Form inputs from plugins and comments. */
:where(.wp-site-blocks) input[type="text"],
:where(.wp-site-blocks) input[type="email"],
:where(.wp-site-blocks) input[type="tel"],
:where(.wp-site-blocks) input[type="number"],
:where(.wp-site-blocks) input[type="search"],
:where(.wp-site-blocks) input[type="url"],
:where(.wp-site-blocks) input[type="password"],
:where(.wp-site-blocks) select,
:where(.wp-site-blocks) textarea {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	padding: 0.7rem 0.9rem;
	width: 100%;
	box-sizing: border-box;
}
:where(.wp-site-blocks) :is(input, select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 1px;
}

/* Details / FAQ. */
.wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
}

/* Footer. */
.pro-footer a {
	color: inherit;
	text-decoration: none;
}
.pro-footer a:hover {
	text-decoration: underline;
}