/*
Theme Name: Ona Architecture
Theme URI: https://deothemes.com/wordpress-themes/ona-block-wordpress-theme/
Author: DeoThemes
Author URI: https://deothemes.com
Description: Ona Architecture is a sleek and sophisticated WordPress theme designed specifically for architects, interior designers, design studios, construction firms, and creative professionals in the built environment. This meticulously crafted block-based theme offers a clean, minimalist aesthetic that beautifully showcases architectural projects and portfolios. Winner of the prestigious Anyone Can WP design contest, Ona Architecture combines cutting-edge design with exceptional functionality. The theme features a responsive layout that seamlessly adapts to all devices, ensuring your architectural vision looks stunning on desktops, tablets, and smartphones.
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 5.6
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ona-news
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, full-width-template, block-patterns, block-styles, rtl-language-support, sticky-post, threaded-comments, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Template: ona

Ona Architecture WordPress Theme, Copyright (c) 2024 by DeoThemes.
Ona Architecture is distributed under the terms of the GNU GPL.
*/

/* Stats bento grid: stack on tablet/mobile (moved out of post content;
   wp:html <style> is stripped by KSES on save, so it lives here instead). */
@media (max-width: 992px) {
	div.ona-bento-grid {
		display: block;
	}
}

/* Logo: block width is 200px (set per-block, same for both headers).
   On phones that is too large, so cap it responsively. max-width overrides
   the width="200" attribute; height:auto keeps the aspect ratio. */
@media (max-width: 782px) {
	.site-header .wp-block-site-logo img,
	.wp-block-site-logo img {
		max-width: 150px;
		height: auto;
	}
}

@media (max-width: 400px) {
	.site-header .wp-block-site-logo img,
	.wp-block-site-logo img {
		max-width: 110px;
		height: auto;
	}
}

/* /works/ categorized albums: one section per gallery_category. */
.ona-works-cat {
	margin-bottom: 64px;
}
.ona-works-cat__head {
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.ona-works-cat__heading {
	flex: 1 1 auto;
	min-width: 0;
}
.ona-works-cat__title {
	margin: 0;
	font-size: 1.75rem;
}
.ona-works-cat__title a {
	display: none;
	color: inherit;
	text-decoration: none;
}
.ona-works-cat__title a:hover {
	color: var(--wp--preset--color--primary);
}
.ona-works-cat__desc {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-light);
}
.ona-works-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
@media (max-width: 1024px) {
	.ona-works-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ona-work-card {
	display: flex;
	flex-direction: column;
}
.ona-work-card__media {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.ona-work-card__media img,
.ona-work-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.ona-work-card__media:hover img,
.ona-work-card__media:hover .ona-work-card__ph {
	transform: scale(1.05);
}
.ona-work-card__ph {
	background: var(--wp--preset--color--background);
}
.ona-work-card__body {
	padding-top: 16px;
	text-align: center;
}
.ona-work-card__cat {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--text-light);
}
.ona-work-card__title {
	margin: 8px 0;
	font-size: 1.25rem;
}
.ona-work-card__title a {
	display: none;
	color: inherit;
	text-decoration: none;
}
.ona-work-card__title a:hover {
	color: var(--wp--preset--color--primary);
}
.ona-work-card__media {
	position: relative;
}
.ona-work-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.ona-work-card__media:hover .ona-work-card__overlay,
.ona-work-card__media:focus-within .ona-work-card__overlay {
	opacity: 1;
}
.ona-work-card__overlay-desc {
	font-size: 0.95rem;
	line-height: 1.5;
	color: #fff;
}
.ona-work-card__overlay-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	padding-bottom: 4px;
}
.ona-work-card__overlay-link::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url('../ona/assets/img/arrow-right-line.svg') center / contain no-repeat;
	mask: url('../ona/assets/img/arrow-right-line.svg') center / contain no-repeat;
}

@media (max-width: 600px) {
	.ona-works-grid {
		grid-template-columns: 1fr;
	}
}

/* /projects/ hero sub-text under the big heading. */
.ona-works-sub {
	max-width: 640px;
	margin: 12px auto 0;
	color: var(--wp--preset--color--text-light);
}

/* /projects/ only: thin rule directly under the site header. */
.ona-projects-toprule {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Single gallery with no Description entered: hide the entire left info column
   and let the image (right column) take full width and center itself. */
.ona-gallery-no-desc .ona-gallery-layout .wp-block-column:first-child {
	display: none;
}
.ona-gallery-no-desc .ona-gallery-layout {
	justify-content: center;
}
.ona-gallery-no-desc .ona-gallery-layout .wp-block-column:last-child {
	flex-basis: 100%;
}

/* "Discover More" button at the right of each category heading — same simple
   filled primary style as the homepage wp-block-button is-style-ona-button-arrow-icon. */
.ona-works-cat__head .wp-block-button.is-style-ona-button-arrow-icon {
	margin: 0;
}
.ona-works-cat__head .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	background-color: var(--wp--preset--color--black);
	color: #fff;
	padding: var(--wp--custom--button-padding--medium, 0.9em 1.6em);
	border-radius: 0;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease;
}
.ona-works-cat__head .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}
.ona-works-cat__head .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	margin-left: 10px;
	-webkit-mask: url('../ona/assets/img/arrow-right-line.svg');
	mask: url('../ona/assets/img/arrow-right-line.svg');
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: currentColor;
	display: inline-block;
	transition: transform .2s var(--ona-transition);
}
.ona-works-cat__head .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link:hover::after {
	transform: translateX(6px);
}

/* Detail CTA "Get in Touch" button — black by default, brand orange-red
   (primary) on hover. Matches the arrow-icon style used on /projects/. */
.single-gallery .ona-gallery-cta-cover .wp-block-button.is-style-ona-button-arrow-icon {
	margin: 0;
}
.single-gallery .ona-gallery-cta-cover .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	background-color: var(--wp--preset--color--dark);
	color: #fff;
	padding: var(--wp--custom--button-padding--medium, 0.9em 1.6em);
	border-radius: 0;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease;
}
.single-gallery .ona-gallery-cta-cover .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}
.single-gallery .ona-gallery-cta-cover .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	margin-left: 10px;
	-webkit-mask: url('../ona/assets/img/arrow-right-line.svg');
	mask: url('../ona/assets/img/arrow-right-line.svg');
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: currentColor;
	display: inline-block;
	transition: transform .2s ease;
}
.single-gallery .ona-gallery-cta-cover .wp-block-button.is-style-ona-button-arrow-icon .wp-block-button__link:hover::after {
	transform: translateX(6px);
}

/* Single album (gallery) detail page — two-column layout like the ONA demo:
   sticky info on the left, full-width rounded images on the right, cover CTA. */
.single-gallery .ona-gallery-info .wp-block-post-title {
	margin: 0 0 10px;
}
.single-gallery .ona-gallery-info .ona-text-letter-spacing {
	margin: 0 0 4px;
}
.single-gallery .ona-gallery-description {
	margin: 0 0 24px;
	text-align: left;
	max-width: none;
}
.single-gallery .ona-gallery-description p {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--text-regular);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
}
.single-gallery .ona-gallery-description p:last-child {
	margin-bottom: 0;
}
.single-gallery .ona-gallery-info {
	gap: 1.5rem;
	position: sticky;
	top: 100px;
	z-index: 10;
}
.single-gallery .ona-gallery-info hr {
	margin: 0;
}
.single-gallery .ona-gallery-meta {
	margin: 0 0 1.5rem;
	display: flex;
	column-gap: 148px;
}
.single-gallery .ona-gallery-meta .wp-block-group {
	margin: 0;
}
.single-gallery .ona-gallery-meta p {
	margin: 0;
}
.single-gallery .ona-gallery-meta .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}
.single-gallery .ona-gallery-meta p.wp-block-paragraph:not(.has-headings-color) {
	white-space: nowrap;
}
@media (max-width: 781px) {
	.single-gallery .ona-gallery-info {
		position: static;
	}
	.single-gallery .ona-gallery-meta {
		flex-direction: column;
		column-gap: 0;
		row-gap: 12px;
	}
	.single-gallery .ona-gallery-meta .wp-block-column {
		flex: 0 0 auto;
	}
	.single-gallery .ona-gallery-meta p.wp-block-paragraph:not(.has-headings-color) {
		white-space: normal;
	}
}
/* Gallery images: full-width, rounded, like the demo. */
.single-gallery .wp-block-image {
	margin: 0 0 28px;
}
.single-gallery .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}
.single-gallery .wp-block-image figcaption {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-light);
	padding-top: 8px;
}
/* Detail CTA — transparent (no background panel), just a dark heading +
   brand button on the page, matching the luxury/architecture style. */
.single-gallery .ona-gallery-cta-cover {
	margin-top: 40px;
}
.single-gallery .ona-gallery-cta-cover .ona-gallery-cta__title {
	color: var(--wp--preset--color--headings);
	margin: 0 0 20px;
	font-size: 1.75rem;
	letter-spacing: 0.01em;
}
@media (max-width: 900px) {
	.single-gallery .ona-gallery-layout {
		flex-direction: column;
	}
	.single-gallery .ona-gallery-info {
		position: static;
	}
}

/* Mobile header: keep logo + nav on ONE row (logo left, hamburger/CTA right)
   instead of WP's default stacked layout, which pushed the nav onto a second
   line. The header columns are no longer .is-not-stacked-on-mobile, so we
   override the column-stacking rule for the header only. */
@media (max-width: 781px) {
	.site-header .wp-block-columns {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
	}
	.site-header .wp-block-columns > .wp-block-column:first-child {
		flex: 0 0 130px !important;
	}
	.site-header .wp-block-columns > .wp-block-column:last-child {
		flex: 1 1 auto !important;
		min-width: 0;
	}
	.site-header .wp-block-site-logo img {
		max-width: 120px;
		height: auto;
	}
}
/* On the smallest phones the Call button is too wide to share the row with the
   logo; drop it so the header never overflows (it stays inside the menu). */
@media (max-width: 360px) {
	.site-header .wp-block-button {
		display: none;
	}
}

/* Process page step icons - uniform size (their intrinsic widths differ), and
   force the linear line-icons to solid black. */
.wp-block-group img[src*="assets/img/agency/"],
.wp-block-group img[src*="assets/img/arrow-right-line.svg"] {
	filter: brightness(0) !important;
	width: 44px !important;
	height: 44px !important;
	object-fit: contain;
}

/* Footer - unified #ababab text + icons. */
.ona-footer-icon img {
	filter: contrast(0) brightness(1.3359) !important;
	width: 18px !important;
	height: 18px !important;
	object-fit: contain;
}

/* Trusted section image — index.html .trusted-image img (height 620, object-fit cover).
   Applied via .front-page-intro-image class on the wp:image block; the block no
   longer carries inline height to avoid block-validation issues. */
.front-page-intro-image img {
	height: 620px !important;
	width: 100% !important;
	object-fit: cover !important;
	border-radius: 10px;
}
.site-footer,
.site-footer p,
.site-footer a,
.site-footer .has-text-light-color,
.site-footer .has-headings-color,
.site-footer .wp-block-heading,
.site-footer .wp-block-navigation a {
	color: #ababab !important;
}

/* Header phone as a plain text link (no button styling).
   Default text color is primary so it's visible on the light (non-home) header.
   Transparent header overrides it back to white. Hover uses a left-to-right
   underline animation matching the navigation links. */
.wp-block-button.is-style-ona-phone-plain .wp-block-button__link {
	background-color: transparent !important;
	background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
	background-repeat: no-repeat;
	background-size: 0 100%;
	background-position: 0 100%;
	border: none !important;
	padding: 0 0 6px 0 !important;
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
	font-weight: 200;
	display: inline-block;
	transition: background-size .36s var(--ona-transition), color .2s ease;
}
.wp-block-button.is-style-ona-phone-plain .wp-block-button__link:hover {
	color: currentColor !important;
	background-size: 100% 100%;
	background-color: transparent !important;
}
.ona-header-transparent .wp-block-button.is-style-ona-phone-plain .wp-block-button__link {
	color: #fff !important;
}

/* Project card "View Project" links (parent pattern): drop the underline,
   add a small arrow on the right that nudges on hover. Scoped to the pattern's
   card body so we don't touch other primary-color links. */
.wp-block-columns .wp-block-group.has-background-background-color .has-link-color a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.wp-block-columns .wp-block-group.has-background-background-color .has-link-color a::after {
	content: "";
	width: 14px;
	height: 14px;
	margin-left: 6px;
	-webkit-mask: url('../ona/assets/img/arrow-right-line.svg');
	mask: url('../ona/assets/img/arrow-right-line.svg');
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: currentColor;
	display: inline-block;
	transition: transform .2s ease;
}
.wp-block-columns .wp-block-group.has-background-background-color .has-link-color a:hover::after {
	transform: translateX(4px);
}

/* /projects/ "View Album" link: same no-underline + arrow treatment. */
.ona-work-card__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.ona-work-card__link::after {
	content: "";
	width: 14px;
	height: 14px;
	margin-left: 6px;
	-webkit-mask: url('../ona/assets/img/arrow-right-line.svg');
	mask: url('../ona/assets/img/arrow-right-line.svg');
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: currentColor;
	display: inline-block;
	transition: transform .2s ease;
}
.ona-work-card__link:hover::after {
	transform: translateX(4px);
}

/* Outline buttons (e.g. "View All Projects"): keep the border visible on hover
   (global hover was filling the background and hiding the outline) and add a
   right arrow. Phone/tel buttons are excluded so the Call button stays clean. */
.wp-block-button.is-style-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-outline.wp-block-button__link:hover {
	border-color: currentColor !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:not([href^="tel:"])::after {
	content: "";
	width: 16px;
	height: 16px;
	margin-left: 10px;
	-webkit-mask: url('../ona/assets/img/arrow-right-line.svg');
	mask: url('../ona/assets/img/arrow-right-line.svg');
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: currentColor;
	display: inline-block;
	transition: transform .2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:not([href^="tel:"]):hover::after {
	transform: translateX(6px);
}

/* Responsive: the icon-box columns ("Luxury Residential" etc.) have 92px top/bottom
   padding; reduce it to 30px on mobile so they don't take excessive vertical space. */
@media (max-width: 781px) {
	.wp-block-column[style*="#313131"] {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
}

/* Responsive: footer columns should stack vertically on mobile instead of staying
   side-by-side and breaking the layout. */
@media (max-width: 781px) {
	.site-footer .wp-block-columns,
	footer .wp-block-columns {
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--50) !important;
	}
	.site-footer .wp-block-column,
	footer .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Trusted section — Builders / Brands list (index.html .customer-group + .customer-list) */
.trusted-customer-group {
	border-top: 1px solid #ddd;
	padding: 28px 0;
}

.trusted-customer-group:last-child {
	border-bottom: 1px solid #ddd;
}

.trusted-customer-group .wp-block-heading {
	margin-top: 0;
}

.trusted-customer-list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px 30px;
	color: #111;
	margin-bottom: 0 !important;
}

.trusted-customer-list span {
	position: relative;
	color: #111;
}

.trusted-customer-list span:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	background: #999;
	border-radius: 50%;
}

/* Trusted section — left image */
.trusted-image {
	position: relative;
}

/* Contact Form 7 — optional field marker, e.g. "Phone Number (optional)".
   Contrast with the required fields, which use <abbr>*</abbr>. */
.ona-field-optional {
	font-size: 0.85em;
	font-weight: 400;
	color: #777;
	margin-left: 2px;
}

/* Process / About hero covers — fully transparent overlay (dimRatio 50 neutralised).
   `!important` is required to beat core's dim-50 .5 selector (specificity 0,4,0). */
.wp-block-cover .wp-block-cover__background,
.wp-block-cover .wp-block-cover__gradient-background,
.wp-block-cover-image .wp-block-cover__background,
.wp-block-cover-image .wp-block-cover__gradient-background,
.wp-block-cover-image.has-background-dim:not(.has-background-gradient):before,
.wp-block-cover.has-background-dim:not(.has-background-gradient):before {
	opacity: 0 !important;
}

/* Home (front-page) hero cover — keep a light .2 overlay (down from WP core's
   dim-40 .4) so white title text stays readable on bright kitchen photo.
   Must come AFTER the Process/About rule so it wins the cascade (both are
   !important; later wins). `!important` is also needed to beat core's
   `.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__background {opacity:.4}`
   which has specificity 0,4,0 and otherwise wins over this 0,3,0 selector. */
body.home .wp-block-cover .wp-block-cover__background,
body.home .wp-block-cover .wp-block-cover__gradient-background,
body.home .wp-block-cover-image .wp-block-cover__background,
body.home .wp-block-cover-image .wp-block-cover__gradient-background,
body.home .wp-block-cover-image.has-background-dim:not(.has-background-gradient):before,
body.home .wp-block-cover.has-background-dim:not(.has-background-gradient):before {
	opacity: 0.2 !important;
}

/* Single gallery detail: single-column images, equal width, capped at 720px. */
.single-gallery .wp-block-gallery.has-nested-images {
	display: block !important;
}
.single-gallery .wp-block-gallery.has-nested-images figure.wp-block-image {
	margin: 0 auto 28px !important;
	width: 100% !important;
	max-width: 720px;
}
.single-gallery .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: auto;
	display: block;
	border-radius: 10px;
}