/*
Theme Name: ArcHub Child
Theme URI: https://archub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: archub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: archub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/

/* ==========================================================================
   NineDesignArchitects
   ========================================================================== */

/* Project galleries: even square grid, full image in the lightbox */
.ninedesign-gallery .gallery { margin: 0; }
.ninedesign-gallery .gallery-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity .3s ease;
}
.ninedesign-gallery .gallery-item a:hover img { opacity: .85; }

/* Plans: show the whole drawing, never crop */
.ninedesign-plans .gallery-item img {
	aspect-ratio: auto;
	object-fit: contain;
	background: #fff;
}

/* Project hero slider: consistent landscape frame */
.ninedesign-hero img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Gallery captions */
.ninedesign-gallery .gallery-caption {
	font-size: 12px;
	letter-spacing: .02em;
	opacity: .7;
	padding-top: 6px;
}

@media (max-width: 767px) {
	/* two images per row on phones */
	.ninedesign-gallery .gallery .gallery-item {
		max-width: 50% !important;
		width: 50% !important;
	}
	.ninedesign-plans .gallery .gallery-item {
		max-width: 100% !important;
		width: 100% !important;
	}
	/* mobile header logo */
	.lqd-mobile-sec .navbar-brand-inner img {
		max-height: 54px;
		width: auto;
	}
}

/* Links inside headings take the heading colour */
.ld-fancy-heading a { color: inherit; }
.ld-fancy-heading a:hover { color: var(--nd-bronze-text); }

/* Home: keep the philosophy heading clear of the stacked images on phones */
@media (max-width: 767px) {
	.elementor-8149 .elementor-element-bc14d96 { margin-top: 70px; }
}

/* ==========================================================================
   Brand system — derived from the logo
   Navy #324054 · Bronze #B48E6E (decorative) · Bronze text #8D6849 (AA)
   Text #4A5263 · Warm white #F7F5F2 · Bronze tint #EFE8E1
   Headings: Roboto Condensed · Body/UI: Montserrat — APPROXIMATIONS of the
   logo lettering (no brand font supplied); the logo itself is always the image.
   ========================================================================== */
:root {
	--nd-navy: #324054;
	--nd-bronze: #B48E6E;
	--nd-text: #4A5263;
	--nd-bronze-text: #8D6849; /* 4.99:1 on white */
	--nd-soft: #F7F5F2;
	--nd-tint: #EFE8E1;
	--nd-focus: #324054;
	--nd-space-1: 8px;
	--nd-space-2: 16px;
	--nd-space-3: 24px;
	--nd-space-4: 40px;
	--nd-space-5: 64px;
	--nd-space-6: 104px;
	--nd-ease: cubic-bezier(.22,.61,.36,1);
	--nd-dur: .35s;
	--nd-heading-font: "Roboto Condensed", sans-serif;
	--nd-body-font: "Montserrat", sans-serif;
}
::selection { background: var(--nd-navy); color: #fff; }

/* numbers read like the wordmark */
.lqd-counter-element,
.lqd-counter .lqd-counter-element { font-family: var(--nd-heading-font); font-weight: 600; color: var(--nd-navy); }

/* blog / insights cards */
.lqd-lp-title, .lqd-lp-title a,
.lqd-pf-single-related-title a { color: var(--nd-navy); font-family: var(--nd-heading-font); }
.lqd-lp-title a:hover { color: var(--nd-bronze-text); }
.lqd-lp-meta, .lqd-lp-meta a { color: var(--nd-bronze-text); }

/* body copy links */
.entry-content a:not(.btn):hover { color: var(--nd-bronze-text); }
.elementor .lqd-lp .lqd-lp-title a,
.elementor .lqd-lp .lqd-lp-title a * { color: var(--nd-navy); }
.elementor .lqd-lp .lqd-lp-title a:hover,
.elementor .lqd-lp .lqd-lp-title a:hover * { color: var(--nd-bronze-text); }


/* ==========================================================================
   Phase 2 — global components and accessibility
   ========================================================================== */

/* ---- Keyboard focus: always visible, never on mouse click ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--nd-focus) !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #fff;
	border-radius: 2px;
}
/* on dark / overlay areas (transparent header over a hero, dark sections) */
.main-header-overlay:not(.is-stuck) a:focus-visible,
.main-header-overlay:not(.is-stuck) button:focus-visible,
.lqd-section-dark a:focus-visible,
[data-section-luminosity="dark"] a:focus-visible {
	outline-color: #fff !important;
	box-shadow: 0 0 0 5px var(--nd-navy);
}

/* ---- Skip links: hidden until focused ---- */
.liquid-skip-link a.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--nd-navy);
	color: #fff;
	font: 500 14px/1.2 var(--nd-body-font);
	text-decoration: none;
}

/* ---- Navigation ---- */
.main-nav > li > a {
	font-family: var(--nd-body-font);
	letter-spacing: .02em;
}
/* Active item: small navy underline (no background block). Hover / keyboard focus: the underline turns gold. */
.main-header .main-nav > li > a { position: relative; background-color: transparent !important; box-shadow: none !important; }
.main-header .main-nav > li > a::after {
	content: "";
	position: absolute;
	left: var(--lqd-menu-items-left-padding, 15px);
	right: var(--lqd-menu-items-right-padding, 15px);
	top: calc(50% + 14px); /* text is vertically centred in the full-height link */
	height: 2px;
	background-color: var(--nd-navy);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease, background-color .2s ease;
	pointer-events: none;
}
.main-header .main-nav > li.current-menu-item > a::after,
.main-header .main-nav > li.current_page_item > a::after,
.main-header .main-nav > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.main-header .main-nav > li:hover > a::after,
.main-header .main-nav > li.is-hovered > a::after,
.main-header .main-nav > li > a:focus-visible::after { transform: scaleX(1); background-color: var(--nd-bronze); }
.main-header .main-nav > li.current-menu-item > a,
.main-header .main-nav > li.current_page_item > a,
.main-header .main-nav > li.current-menu-ancestor > a { opacity: 1 !important; }
/* live site does not dim the other items while one is hovered (ArcHub "fade inactive" off) */
.main-header .main-nav.main-nav-hover-fade-inactive > li > a { opacity: 1 !important; }
/* the theme's own underline/indicator on the active item is replaced by ours */
.main-header .main-nav > li.current-menu-item > a .link-sep,
.main-header .main-nav > li.current_page_item > a .link-sep { display: none; }
/* mobile menu: current page in bronze text */
.lqd-mobile-sec .main-nav > li.current-menu-item > a,
.lqd-mobile-sec .main-nav > li.current_page_item > a { color: var(--nd-bronze-text) !important; font-weight: 600; }

/* ---- Header CTA (Discuss a Project) ---- */
.main-header .btn,
.lqd-mobile-sec .btn {
	transition: background-color var(--nd-dur) var(--nd-ease), color var(--nd-dur) var(--nd-ease), border-color var(--nd-dur) var(--nd-ease);
}

/* ---- Buttons: brand-consistent, readable ---- */
.btn-solid { background-color: var(--nd-navy); border-color: var(--nd-navy); color: #fff; }
.btn-solid:hover { background-color: var(--nd-bronze-text); border-color: var(--nd-bronze-text); color: #fff; }

/* ---- Images: calm, consistent treatment ---- */
.elementor img,
.lqd-lp-img img,
.ninedesign-gallery img { border-radius: 0; }
.lqd-lp-img img,
.ld-fancy-img img { transition: transform .8s var(--nd-ease), opacity var(--nd-dur) var(--nd-ease); }
.lqd-lp:hover .lqd-lp-img img { transform: scale(1.025); } /* subtle, not zoomy */

/* ---- Logo: supplied artwork, proportions preserved ---- */
.navbar-brand img,
.module-logo img,
.lqd-mobile-sec .navbar-brand img {
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* ---- Footer ---- */
.main-footer a { text-underline-offset: 3px; }
.main-footer a:hover { color: var(--nd-bronze-text); }
.main-footer .elementor-social-icon { transition: background-color var(--nd-dur) var(--nd-ease); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	/* anything the theme may already have hidden for an entrance effect */
	.nd-reduced-motion .ca-initvalues-applied,
	.nd-reduced-motion .split-inner,
	.nd-reduced-motion .lqd-chars,
	.nd-reduced-motion .lqd-words,
	.nd-reduced-motion .lqd-lines,
	.nd-reduced-motion .lqd-parallax-container,
	.nd-reduced-motion [data-parallax] {
		opacity: 1 !important;
		transform: none !important;
	}
	.lqd-lp:hover .lqd-lp-img img { transform: none; }
}

/* ---- Side drawer: closed drawer is out of the keyboard / screen-reader order ---- */
.ld-module-dropdown.collapse:not(.in):not(.is-active):not(.collapsing) {
	visibility: hidden;
	transition: visibility 0s linear .6s; /* let the closing animation finish */
}
.ld-module-dropdown.in,
.ld-module-dropdown.is-active { visibility: visible; transition-delay: 0s; }

/* ---- Footer detail text: readable size ---- */
.elementor-17 .elementor-element-0ce464c .ld-fancy-heading,
.elementor-17 .elementor-element-0ce464c p {
	font-size: 14px !important;
	line-height: 1.8 !important;
}
.elementor-17 .elementor-element-0ce464c a { color: #fff; }

/* ---- Side drawer menu: readable size and colour ---- */
.elementor-7969 .elementor-element-73f51f2f a {
	font-size: 15px !important;
	line-height: 2.1 !important;
	letter-spacing: .04em;
	color: var(--nd-navy) !important;
}
.elementor-7969 .elementor-element-73f51f2f a:hover,
.elementor-7969 .elementor-element-73f51f2f .current-menu-item > a { color: var(--nd-bronze-text) !important; }

/* ==========================================================================
   Card stack gallery (recreates the live site's stacked cards slider)
   Elementor: Basic Gallery widget + CSS class "nd-card-stack"  (js/nd-card-stack.js)
   ========================================================================== */
.nd-deck { position: relative; padding: 60px 0 0 60px; max-width: 550px; }
.nd-deck-stage { position: relative; aspect-ratio: 1300 / 1280; touch-action: pan-y; cursor: grab; }
.nd-deck-card {
	position: absolute; inset: 0; margin: 0; overflow: hidden; background: #e9e6e2;
	transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
	will-change: transform;
}
.nd-deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.nd-deck-nav { display: flex; gap: 6px; margin-top: 26px; }
.nd-deck-btn {
	background: none; border: 0; padding: 4px; color: var(--nd-navy); cursor: pointer; line-height: 0;
	transition: transform .3s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
.nd-deck-prev:hover { transform: translateX(-4px); }   /* live: arrows move on hover */
.nd-deck-next:hover { transform: translateX(4px); }
.nd-deck-btn:hover { color: var(--nd-bronze-text); }
@media (max-width: 767px) {
	.nd-deck { padding: 40px 0 0 40px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.nd-deck-card, .nd-deck-btn { transition: none !important; }
}

/* Roy page contact card: Education row value right-aligned like the email/phone rows (desktop) */
@media (min-width: 768px) {
	.elementor-element-ndrowedu .elementor-widget-hub_fancy_heading:last-child,
	.elementor-element-ndrowedu .elementor-widget-hub_fancy_heading:last-child .ld-fancy-heading { text-align: right; margin-left: auto; }
}

/* Workplace project carousel: one image height for landscape + portrait shots (no cropping) */
.nd-project-carousel .carousel-item img { height: min(62vh, 560px); width: auto; max-width: none; object-fit: contain; }
@media (max-width: 767px) { .nd-project-carousel .carousel-item img { height: 300px; } }

/* Drop-down menus: current page marked (bronze text, bold) */
.main-header .main-nav .nav-item-children > li.current-menu-item > a,
.main-header .main-nav .nav-item-children > li.current_page_item > a,
.main-header .main-nav .sub-menu > li.current-menu-item > a { color: var(--nd-bronze-text) !important; font-weight: 600; }

/* Service pages (Stage 2): scope clarification note + closing contact line */
.nd-scope-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(50,64,84,.12); }
.nd-scope-note p { font-size: 13px; line-height: 1.7; color: #5b6475; }
.nd-scope-note strong { display: inline-block; margin-bottom: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--nd-bronze-text); }
.nd-service-cta p { font: 400 24px/1.4 var(--nd-body-font); color: var(--nd-navy); max-width: 30em; margin-bottom: 10px; }
@media (max-width: 767px) { .nd-service-cta p { font-size: 19px; } }

/* ==========================================================================
   Drop-down menus (ArcHub "submenu cover"): parent + card = one navy panel.
   The card already starts at the top of the header behind the parent item.
   ========================================================================== */
.main-header .main-nav > li.menu-item-has-children > .nav-item-children::before {
	background-color: var(--nd-navy) !important;
    border-radius: 27px !important;
    top: 0 !important;
    height: 100% !important;
    box-shadow: 0 18px 40px -18px rgba(20, 28, 40, .45);
}
/* parent of an open drop-down: no gold block, white text on the navy panel */
.main-header .main-nav > li.menu-item-has-children:hover > a,
.main-header .main-nav > li.menu-item-has-children.is-hovered > a,
.main-header .main-nav > li.menu-item-has-children > a:focus-visible {
	background-color: transparent !important;
	box-shadow: none !important;
	color: #fff !important;
	position: relative;
	z-index: 2;
}
.main-header .main-nav > li.menu-item-has-children:hover > a *,
.main-header .main-nav > li.menu-item-has-children.is-hovered > a * { color: #fff !important; }
/* sub-links on the navy panel */
.main-header .main-nav .nav-item-children > li > a { color: rgba(255, 255, 255, .78) !important; transition: color .2s ease; }
.main-header .main-nav .nav-item-children > li > a:hover,
.main-header .main-nav .nav-item-children > li > a:focus-visible { color: #fff !important; }
.main-header .main-nav .nav-item-children > li.current-menu-item > a,
.main-header .main-nav .nav-item-children > li.current_page_item > a { color: #fff !important; font-weight: 600; }
/* keep the parent label above its drop-down panel */
.main-header .main-nav > li.menu-item-has-children { isolation: isolate; }
.main-header .main-nav > li.menu-item-has-children > .nav-item-children { z-index: 1; }
.main-header .main-nav > li.menu-item-has-children > a { position: relative; z-index: 3; }

/* ---- About: Founders ---- */
.nd-measure p { max-width: 46em; }
.nd-founder-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.nd-founder-name .elementor-heading-title { margin: 26px 0 4px; font: 600 26px/1.2 var(--nd-heading-font); color: var(--nd-navy); }
.nd-founder-role p { margin-bottom: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nd-bronze-text); }

/* ---- Buttons outside Elementor (e.g. "Watch on Instagram" in reel posts): same look as the header button ---- */
.btn.nd-btn { --icon-font-size: 1em; --icon-mt: -3px; font-size: 14px; font-weight: 600; line-height: 1.1em; color: #fff !important; fill: #fff; border-radius: 3px; background-color: var(--nd-navy); text-decoration: none !important; }
.btn.nd-btn::before { background-color: var(--nd-navy); }
.btn.nd-btn:hover, .btn.nd-btn:focus, .btn.nd-btn::after { background-color: var(--nd-bronze); color: #fff !important; }

/* ---- Posts: author name hidden (user, 2026-10-11); reels end with "By Roy Boustani" ---- */
.entry-meta .byline, .lqd-lp-author { display: none !important; }
.nd-reel-by { margin-top: 1.6em; font-weight: 600; color: var(--nd-navy); }
.nd-reel-watch { margin-top: 1.4em; }

/* ---- Insights: All / Reels / News tabs (links to the listing pages) ---- */
.nd-insights-tabs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 10px; padding: 0; list-style: none; }
.nd-insights-tabs a { position: relative; display: inline-block; padding: 4px 0; font: 600 14px/1.2 var(--nd-body-font); letter-spacing: .02em; color: var(--nd-navy); text-decoration: none; }
.nd-insights-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--nd-navy); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease, background-color .2s ease; }
.nd-insights-tabs a[aria-current="page"]::after { transform: scaleX(1); }
.nd-insights-tabs a:hover::after, .nd-insights-tabs a:focus-visible::after { transform: scaleX(1); background: var(--nd-bronze); }

/* ---- Reels single (Minimal / style 3): cover shown whole, landscape like the demo ---- */
.lqd-blog-post-style-3 .lqd-post-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.lqd-blog-post-style-3 .entry-content > .container > :not(.lqd-post-sticky-stuff) { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- Load-on-scroll grids (Projects): no "Load more" / "All items loaded" label; only the theme's loading dots
   ("Loading") show while the next batch loads. The button itself stays as the (transparent) scroll trigger. ---- */
.ld-ajax-loadmore[data-ajaxify-options*="inview"],
.ld-ajax-loadmore[data-ajaxify-options*="inview"]:hover { background-color: transparent !important; box-shadow: none !important; transform: none !important; pointer-events: none; color: var(--nd-navy) !important; }
.ld-ajax-loadmore[data-ajaxify-options*="inview"] .static { visibility: hidden; }
.ld-ajax-loadmore[data-ajaxify-options*="inview"] .loading { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-navy); }
.ld-ajax-loadmore[data-ajaxify-options*="inview"] .dots > span { width: 7px; height: 7px; background-color: var(--nd-bronze); }
.ld-ajax-loadmore[data-ajaxify-options*="inview"].all-items-loaded { display: none; }

.liquid-filter-items.align-items-center .filter-list {
	margin-bottom: 0;
	margin-left: 52px;
}

/* Mobile menu: undo desktop dropdown colours (white-on-white fix) */
.lqd-mobile-sec .main-nav > li > a,
.lqd-mobile-sec .main-nav > li.menu-item-has-children:hover > a,
.lqd-mobile-sec .main-nav > li.menu-item-has-children.is-hovered > a,
.lqd-mobile-sec .main-nav > li.menu-item-has-children > a:focus-visible,
.lqd-mobile-sec .main-nav > li.menu-item-has-children:hover > a *,
.lqd-mobile-sec .main-nav > li.menu-item-has-children.is-hovered > a * { color: var(--nd-navy) !important; }
.lqd-mobile-sec .main-nav > li > a::after,
.lqd-mobile-sec .main-nav > li.menu-item-has-children > .nav-item-children::before { display: none !important; }
.lqd-mobile-sec .main-nav .nav-item-children { background: transparent !important; box-shadow: none !important; }
.lqd-mobile-sec .main-nav .nav-item-children > li > a { color: rgba(50,64,84,.8) !important; }
.lqd-mobile-sec .main-nav .nav-item-children > li > a:hover,
.lqd-mobile-sec .main-nav .nav-item-children > li > a:focus-visible,
.lqd-mobile-sec .main-nav .nav-item-children > li.current-menu-item > a,
.lqd-mobile-sec .main-nav .nav-item-children > li.current_page_item > a,
.lqd-mobile-sec .main-nav > li.current-menu-item > a,
.lqd-mobile-sec .main-nav > li.current-menu-ancestor > a { color: var(--nd-bronze-text, #8d6849) !important; }