/* ==========================================================================
   OCEES - Site header / primary navigation
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .site-header .brand .desktop-nav .header-cta .mobile-nav
              and app/page.tsx  <header className="site-header">

   Elementor: Templates > Theme Builder > Header > "OCEES - Site Header"

   Structure (Elementor Pro prints the <header> landmark itself, so the
   container inside it is a plain div with three children - the same three
   the React DOM has):
     header.elementor-location-header        <- the overlay
       |- div.ocees-site-header.e-con        <- the bar
            |- .ocees-brand        Site Logo widget
            |- .ocees-nav          Nav Menu widget  (Primary Navigation)
            |- .ocees-header-cta   Button widget    ("Start a conversation")

   Container-level rules are written as `.ocees-site-header.e-con` on purpose:
   `.e-con` is always present on an Elementor container, and the extra class
   raises specificity just enough to win over Elementor's own container
   defaults (which set flex-direction: column plus their own padding) without
   resorting to !important.

   Breakpoints match the React build exactly: 980px and 620px. Elementor's
   Tablet and Mobile breakpoints have been set to those same values in
   Site Settings > Layout, so Elementor's own responsive tooling
   (e.g. "Hide on Tablet") lines up with these media queries.
   ========================================================================== */

:root {
	--ocees-header-height: 108px;
	--ocees-header-height-md: 88px;
	--ocees-header-inline-pad: clamp(22px, 4vw, 68px);
	--ocees-header-gap: 32px;
	--ocees-header-hairline: rgba(255, 255, 255, 0.28);
	--ocees-brand-plate: rgba(244, 248, 246, 0.94);
	--ocees-brand-logo-width: 156px;
	--ocees-brand-logo-width-sm: 128px;
	--ocees-nav-gap: 34px;
	--ocees-nav-font-size: 0.86rem;
	--ocees-nav-idle-opacity: 0.78;
}

/* --------------------------------------------------------------------------
   1. Overlay
   The header sits on top of the page content rather than above it, so the
   full-bleed hero runs underneath it. This is the WordPress equivalent of
   `.site-header { position: absolute; inset: 0 0 auto; z-index: 20 }` in the
   React build. `.elementor-location-header` is the wrapper Elementor Pro
   prints around a Theme Builder header template.
   -------------------------------------------------------------------------- */

.elementor-location-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
}

/* --------------------------------------------------------------------------
   2. The bar
   React uses `grid-template-columns: 1fr auto 1fr`, which centres the nav on
   the viewport rather than in the space left between the logo and the CTA.
   The flex equivalent - and the one that leaves Elementor's own flex
   container untouched - is to let the two outer children grow equally while
   the nav stays at its natural width.
   -------------------------------------------------------------------------- */

.ocees-site-header.e-con {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--ocees-header-gap);
	width: 100%;
	max-width: none;
	height: var(--ocees-header-height);
	padding: 0 var(--ocees-header-inline-pad);
	border-bottom: 1px solid var(--ocees-header-hairline);
	background: transparent;
	color: #fff;
}

.ocees-site-header > .ocees-brand,
.ocees-site-header > .ocees-header-cta {
	flex: 1 1 0;
	min-width: 0;
}

.ocees-site-header > .ocees-nav {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   3. Brand
   React: `.brand { width: 178px }` with `padding: 8px 11px` and border-box
   sizing, i.e. a 156px logo inside a 22px-wider light plate. Here the plate
   is the image's own padding box, so the logo keeps its intrinsic aspect
   ratio and no extra wrapper element is needed.
   -------------------------------------------------------------------------- */

/* The Site Logo widget is an Image widget underneath, so it arrives
   `text-align: center` with the logo sitting on a text baseline - which both
   pushes the plate to the middle of its column and leaves descender space
   below it, lifting it ~4px above the bar's centre line. Making the widget a
   flex row removes the line box and pins the plate to the left edge. */
.ocees-site-header > .ocees-brand {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.ocees-site-header .ocees-brand a,
.ocees-site-header .ocees-brand .elementor-widget-container {
	display: inline-flex;
	line-height: 0;
}

.ocees-site-header .ocees-brand img {
	box-sizing: content-box;
	width: var(--ocees-brand-logo-width);
	max-width: none;
	height: auto;
	padding: 8px 11px;
	background-color: var(--ocees-brand-plate);
}

/* --------------------------------------------------------------------------
   4. Desktop navigation
   React: `gap: 34px`, `font-size: .86rem`, links at 78% opacity rising to
   100% on hover. Elementor's Nav Menu ships with its own item padding and
   pointer effects; the widget is configured with Pointer = None and the
   padding is zeroed here so the 34px gap is the only spacing in play.
   -------------------------------------------------------------------------- */

.ocees-nav {
	position: relative;
}

.ocees-nav .elementor-nav-menu--main .elementor-nav-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--ocees-nav-gap);
}

/* Elementor appends a float clearfix to the menu list. In a flex row it
   becomes a fifth, zero-width flex item, and `gap` then adds a phantom 34px
   to the nav's width - which shifts the whole nav off the viewport centre.
   The clearfix is meaningless here, so it is removed. */
.ocees-nav .elementor-nav-menu--main .elementor-nav-menu::after {
	display: none;
}

.ocees-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
	flex-grow: 0;
	padding: 0;
	border: 0;
	white-space: nowrap;
	background: transparent;
	color: #fff;
	font-family: var(--ocees-font-sans);
	font-size: var(--ocees-nav-font-size);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	opacity: var(--ocees-nav-idle-opacity);
	transition: opacity 0.2s;
}

.ocees-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.ocees-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus,
.ocees-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active,
.ocees-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.highlighted {
	background: transparent;
	color: #fff;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Call to action
   React renders a plain anchor with a 16px Lucide ArrowUpRight that shifts
   up-and-right on hover. Elementor's Button widget gives us the same link
   with an editable label and the Lucide arrow-up-right.svg as its icon; its
   default chrome (background, padding, radius) is stripped back here.
   -------------------------------------------------------------------------- */

/* Only laid out on desktop. Setting `display` unconditionally here would
   override Elementor's own `.elementor-hidden-tablet` / `-mobile` rules
   (which are a single class and therefore weaker), and the CTA would never
   actually hide. Scoping it to the desktop range keeps Elementor's
   "Hide on Tablet / Mobile" switches authoritative. */
@media (min-width: 981px) {
	.ocees-site-header > .ocees-header-cta {
		display: flex;
		justify-content: flex-end;
	}
}

.ocees-site-header .ocees-header-cta .elementor-button-wrapper {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.ocees-site-header .ocees-header-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	color: #fff;
	fill: currentColor;
	font-family: var(--ocees-font-sans);
	font-size: var(--ocees-nav-font-size);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.ocees-site-header .ocees-header-cta .elementor-button:hover,
.ocees-site-header .ocees-header-cta .elementor-button:focus,
.ocees-site-header .ocees-header-cta .elementor-button:active {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	color: #fff;
}

.ocees-site-header .ocees-header-cta .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Lucide ArrowUpRight at 16px, matching <ArrowUpRight size={16}/>. The icon
   is set on the Button widget itself (Icon = arrow-up-right.svg, Position =
   End), so only its size and the hover nudge live here. */
.ocees-site-header .ocees-header-cta .elementor-button-icon {
	display: flex;
	flex: 0 0 auto;
	transition: transform 0.2s;
}

.ocees-site-header .ocees-header-cta .elementor-button-icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

.ocees-site-header .ocees-header-cta .elementor-button:hover .elementor-button-icon,
.ocees-site-header .ocees-header-cta .elementor-button:focus .elementor-button-icon {
	transform: translate(3px, -3px);
}

/* --------------------------------------------------------------------------
   6. Mobile toggle and dropdown  (<= 980px)
   Elementor decides *when* to show the burger (Nav Menu > Breakpoint =
   Tablet, i.e. 980px here), so nothing below sets `display` on the toggle or
   on the main menu - that stays Elementor's job. We only restyle them.

   React: a 22px Lucide Menu icon, and a light panel 38px below the icon's
   top edge, right-aligned, min-width 190px.
   -------------------------------------------------------------------------- */

.ocees-nav .elementor-menu-toggle {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	background-color: transparent;
	color: #fff;
}

.ocees-nav .elementor-menu-toggle:hover,
.ocees-nav .elementor-menu-toggle:focus {
	background: transparent;
	background-color: transparent;
	color: #fff;
}

/* The toggle icon is set on the widget itself - menu.svg for both the normal
   and the active state, because the React build keeps the burger showing
   while the panel is open. Only the 22px size lives here. */
.ocees-nav .elementor-menu-toggle svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

/* Elementor only positions this panel absolutely when its "Full Width"
   option is on, which would stretch it across the viewport. We keep that off
   to match the React design (a right-aligned 190px panel), so the panel is
   positioned here instead - against `.ocees-nav`, which is the widget wrapper
   and is set to `position: relative` above. */
.ocees-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	position: absolute;
	z-index: 21;
	top: calc(100% + 16px);
	right: 0;
	left: auto;
	width: auto;
	min-width: 190px;
	margin-top: 0;
	background-color: var(--ocees-background);
	color: var(--ocees-primary);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.ocees-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
	padding: 14px;
}

.ocees-nav .elementor-nav-menu--dropdown a.elementor-item {
	padding: 11px 8px;
	border-bottom: 1px solid #cbd2cf;
	background: transparent;
	color: var(--ocees-primary);
	font-family: var(--ocees-font-sans);
	font-size: var(--ocees-nav-font-size);
	font-weight: 400;
	line-height: 1.2;
	opacity: 1;
	transition: opacity 0.2s;
}

.ocees-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.ocees-nav .elementor-nav-menu--dropdown a.elementor-item:focus,
.ocees-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
	background: transparent;
	color: var(--ocees-primary);
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   7. Keyboard focus
   The React build relies on hover alone; these add a visible focus ring for
   keyboard users without changing the resting design.
   -------------------------------------------------------------------------- */

.ocees-site-header a:focus-visible,
.ocees-nav .elementor-menu-toggle:focus-visible {
	outline: 2px solid var(--ocees-accent);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

/* Tablet and below - matches the React `@media (max-width: 980px)` block.
   The nav collapses to a burger (Elementor) and the CTA is hidden with the
   widget's own "Hide on Tablet / Hide on Mobile" setting, leaving
   logo | toggle, i.e. React's `grid-template-columns: 1fr auto`. */
@media (max-width: 980px) {
	.ocees-site-header.e-con {
		height: var(--ocees-header-height-md);
	}
}

/* Phones - matches the React `@media (max-width: 620px)` block. */
@media (max-width: 620px) {
	.ocees-site-header .ocees-brand img {
		width: var(--ocees-brand-logo-width-sm);
	}
}