/* Import CSS partials here.
 * Example: @import 'partials/footer.css';
 */

/* --------------------------------------------------------------------------
 * Header: Logo vertical alignment
 * The logo sits in a flex row (vertically centered) but needs a 9px nudge
 * downward to visually align with the nav text baseline.
 * -------------------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color > .wp-block-image {
	position: relative;
	top: 9px;
}

/* --------------------------------------------------------------------------
 * Header: Show caret but disable rotation animation on hover/open
 * -------------------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color .wp-block-navigation__submenu-icon {
	transform: none;
	transition: none;
}

.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon,
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-icon,
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child[aria-expanded="true"] > .wp-block-navigation__submenu-icon {
	transform: none;
}

/* --------------------------------------------------------------------------
 * Header: Ensure sticky header sits above page content and dropdowns are visible
 * -------------------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color[style*="position:sticky"],
.wp-block-group.has-theme-02-background-color[style*="position: sticky"] {
	z-index: 100;
	overflow: visible;
}

/* Ensure nav wrapper groups don't clip dropdown menus */
.wp-block-group.has-theme-02-background-color > .wp-block-group {
	overflow: visible;
}

/* Dropdown submenu: position, colors, and z-index.
 * Uses repeated class for specificity to override WP core inline transforms. */
.wp-block-group.has-theme-02-background-color .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--theme-02);
	color: #ffffff;
	border: none;
	min-width: 200px;
	z-index: 101;
	padding: 8px 0;
	left: 0;
	top: 100%;
	transform: none;
}

/* Show dropdown on hover — override WP core visibility/opacity/overflow */
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
	pointer-events: auto;
}

/* Dropdown link text color */
.wp-block-group.has-theme-02-background-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #ffffff;
	padding: 8px 20px;
	white-space: nowrap;
}

.wp-block-group.has-theme-02-background-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--theme-04);
}

/* --------------------------------------------------------------------------
 * Green card gradient background
 * Used in "Rooted in Legacy" and "White-Glove Service" sections.
 * Pattern texture fades from visible (left) to solid green (right).
 * -------------------------------------------------------------------------- */
.sahliyeh-green-card {
	position: relative;
	background-color: #103421;
	overflow: hidden;
}

/* Pattern texture at 7% opacity with gradient fade */
.sahliyeh-green-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(/wp-content/uploads/2026/03/green-card-texture.jpg);
	background-position: -210.955px -42.167px;
	background-size: 79.383% 119.148%;
	background-repeat: no-repeat;
	opacity: 0.07;
	z-index: 0;
}

/* Gradient fade from transparent (left) to solid green (right) */
.sahliyeh-green-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(16, 52, 33, 0) 0%, #103421 51.45%);
	z-index: 1;
}

/* Ensure content sits above pseudo-elements */
.sahliyeh-green-card > * {
	position: relative;
	z-index: 2;
}

/* Brand Mark card: vertical gradient (pattern at bottom, solid green at top) */
.sahliyeh-green-card--brand-mark {
	width: 1200px;
	max-width: 100%;
	margin-inline: auto;
}

.sahliyeh-green-card--brand-mark::before {
	background-position: 0.5px 289.621px;
	background-size: 100% 104.896%;
}

.sahliyeh-green-card--brand-mark::after {
	background: linear-gradient(0deg, rgba(16, 52, 33, 0) -6.02%, #103421 24.44%);
}

/* --------------------------------------------------------------------------
 * Partner photo: LinkedIn icon positioned at bottom-left of photo
 * The photo container uses position:relative so the LinkedIn icon
 * (last child image) can be absolutely positioned over the photo.
 * -------------------------------------------------------------------------- */
.sahliyeh-partner-photo {
	position: relative;
}

.sahliyeh-partner-photo > .wp-block-image:last-child {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/* Brand Mark: center logo vertically and horizontally between text columns */
.sahliyeh-brand-mark-logo {
	align-self: center;
	justify-content: center;
	align-items: center;
	min-height: 100%;
}

/* Rooted in Legacy: 1196x449, padding 60px */
.sahliyeh-green-card--rooted {
	width: 1196px;
	max-width: 100%;
	height: 449px;
	padding: 60px;
	margin-inline: auto;
}

/* White-Glove Service: 1197x472, padding 30px 50px */
.sahliyeh-green-card--whiteglove {
	width: 1197px;
	max-width: 100%;
	height: 472px;
	padding: 30px 50px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * Footer: half-circle arch housing the logo mark
 * A semicircular black shape protrudes above the footer top edge,
 * containing the decorative gold logo mark.
 * -------------------------------------------------------------------------- */
/* Footer container must allow arch to protrude above */
.sahliyeh-site-footer {
	overflow: visible;
	position: relative;
}

.sahliyeh-footer-logo {
	position: relative;
	padding-top: 25px;
	z-index: 1;
}

/* Half-circle arch protruding above the footer */
.sahliyeh-footer-logo::before {
	content: "";
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	width: 185px;
	height: 110px;
	background: #000;
	border-radius: 185px 185px 0 0;
	z-index: 0;
}

.sahliyeh-footer-logo > * {
	position: relative;
	z-index: 1;
}

/* Position the gold logo mark inside the arch */
.sahliyeh-footer-logo > .wp-block-image:first-child {
	margin-top: -45px;
}

/* Footer nav: no underlines on navigation links */
.sahliyeh-footer-nav a {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Footer CTA card: pattern texture with radial gold gradient
 * Background layers: radial gold glow at bottom-right, dark overlay,
 * then the Sahliyeh logo pattern tile.
 * -------------------------------------------------------------------------- */
.sahliyeh-cta-card {
	max-width: 900px;
	height: 370px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	position: relative;
	overflow: hidden;
	background: #000;
}

/* Texture pattern at 31% opacity */
.sahliyeh-cta-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(/wp-content/uploads/2026/03/cta-card-texture-figma.png) -2.51% -29.95% / 105.01% 144.49% no-repeat;
	opacity: 0.31;
	z-index: 0;
}

/* Gradient fade: black at top fading to transparent near the button area */
.sahliyeh-cta-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 31.03%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
}

/* Ensure content sits above pseudo-elements */
.sahliyeh-cta-card > * {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
 * Button: Outline-inverse hover — gold bg, black text
 * Inline styles on the <a> prevent theme.json hover from winning,
 * so we enforce it here with higher specificity.
 * -------------------------------------------------------------------------- */
/* Outline-inverse default: transparent bg. WP has no "transparent" color preset,
 * so has-transparent-background-color doesn't generate a value — the default
 * fill background (gold) bleeds through. Force transparent. */
.wp-block-button.is-style-button-outline-inverse .wp-block-button__link.has-transparent-background-color {
	background-color: transparent !important;
}

/* Outline-inverse hover: gold bg, black text */
.wp-block-button.is-style-button-outline-inverse .wp-block-button__link:hover,
.wp-block-button.is-style-button-outline-inverse .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-color: var(--wp--preset--color--theme-04) !important;
}

/* --------------------------------------------------------------------------
 * Button: Fill (gold CTA) hover — dark green bg, cream text
 * -------------------------------------------------------------------------- */
.wp-block-button:not([class*="is-style-button-"]) .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-button-"]) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--theme-03);
	color: var(--wp--preset--color--theme-01);
	border-color: var(--wp--preset--color--theme-03);
}

/* --------------------------------------------------------------------------
 * Patterns: Remove gaps between reusable block patterns and sections
 * -------------------------------------------------------------------------- */
.entry-content > .wp-block-block,
.wp-block-post-content > .wp-block-block {
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-kindling-section + .wp-block-kindling-section,
.wp-block-kindling-section + .wp-block-block,
.wp-block-block + .wp-block-kindling-section,
.wp-block-block + .wp-block-block {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
 * Partner logos: full-width row, 20% default opacity, full on hover
 * Targets the flex row containing horizontal logos in the Partners section.
 * -------------------------------------------------------------------------- */
.is-style-section-2 .is-content-justification-space-between .wp-block-image img[src*="horiz-logo"] {
	opacity: 0.2;
	transition: opacity 0.3s ease;
}

.is-style-section-2 .is-content-justification-space-between .wp-block-image:hover img[src*="horiz-logo"] {
	opacity: 1;
}

/* Break the logo row out of the constrained parent to span full width.
 * The parent constrained layout sets max-width on children, so we
 * override it here to allow the full-viewport breakout.
 * Uses 100% of the viewport without causing horizontal scroll. */
.is-style-section-2 .is-content-justification-space-between:has(img[src*="horiz-logo"]) {
	width: calc(100vw - var(--wp--style--root--padding-right, 0px) - var(--wp--style--root--padding-left, 0px));
	max-width: none;
	margin-left: calc(50% - 50vw);
	padding-inline: var(--wp--preset--spacing--70);
}

/* --------------------------------------------------------------------------
 * Grid: vertically center grid items in split content sections
 * Sections with side-by-side heading + text should align items to center
 * so shorter columns sit middle-aligned with taller ones.
 * -------------------------------------------------------------------------- */
.wp-block-cover__inner-container .is-style-kindling-grid-system.is-layout-grid {
	align-items: center;
}