/*
Theme Name: Hello Elementor Ogbuta
Theme URI: https://ogbuta.com/
Description: Hello Elementor child theme for Ogbuta. Carries the Ogbuta design language (site.css) across from the ogbuta-manufacturing block theme so Elementor-built pages keep the brand styling.
Author: Ogbuta
Template: hello-elementor
Version: 0.1.0
Text Domain: hello-elementor-ogbuta
*/

/*
 * site.css references two theme.json presets that a classic theme does not emit.
 * Mirrors ogbuta-manufacturing/theme.json so the display face and hero size survive.
 */
:root {
	--wp--preset--font-family--display: Impact, "Arial Narrow", "Liberation Sans Narrow", sans-serif;
	--wp--preset--font-size--hero: clamp(2.75rem, 6.3vw, 6rem);
}

/* ---------------------------------------------------------------------------
 * Elementor container widths
 *
 * The block theme's theme.json applied `clamp(1.25rem, 4vw, 2rem)` of root
 * padding and a 1280px alignwide box. Elementor's kit now supplies the 1280px;
 * the gutter has to be reinstated here. Full-bleed bands stay flush so their
 * ogbuta-* backgrounds still span the viewport.
 * ------------------------------------------------------------------------- */
.e-con {
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
}

.e-con-boxed {
	--padding-inline-start: clamp(1.25rem, 4vw, 2rem);
	--padding-inline-end: clamp(1.25rem, 4vw, 2rem);
}

/* ---------------------------------------------------------------------------
 * Hello Elementor's header/footer mapped onto the Ogbuta design language.
 * site.css targets the block theme's .ogbuta-site-header/.ogbuta-site-footer
 * markup, which no longer exists; these rules restate it for Hello's markup.
 * ------------------------------------------------------------------------- */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--ogbuta-border);
	box-shadow: 0 1px 0 rgba(7, 63, 159, .12);
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .site-header {
	top: 32px;
}

.site-header .header-inner {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	margin-inline: auto;
	max-width: 1280px;
	min-height: 58px;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
	width: 100%;
}

/* Kit CSS stacks branding vertically; Ogbuta's header is a single row. */
.site-header .site-branding {
	align-items: center !important;
	flex: 0 0 auto;
	flex-direction: row !important;
}

.site-header .site-logo img {
	height: auto;
	max-height: 48px;
	width: auto;
}

.site-header .site-navigation {
	font-size: .9rem;
	font-weight: 700;
}

.site-footer {
	background: var(--ogbuta-blue);
	color: #fff;
	padding-block: 3rem;
}

.site-footer a,
.site-footer .copyright,
.site-footer .copyright p {
	color: #fff;
}

.site-footer .footer-inner {
	margin-inline: auto;
	max-width: 1280px;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
	width: 100%;
}

.site-footer .site-logo img {
	filter: brightness(0) invert(1);
	height: auto;
	max-height: 56px;
	width: auto;
}

/* ---------------------------------------------------------------------------
 * Heading colour
 *
 * theme.json set elements.heading.color.text to charcoal. Elementor's heading
 * widget binds to the global "primary" colour instead, which is the brand blue
 * and is wanted for links and buttons. Restate the charcoal here; a per-widget
 * colour set in the editor is more specific and still wins.
 * ------------------------------------------------------------------------- */
body .elementor-widget-heading .elementor-heading-title {
	color: var(--ogbuta-charcoal);
}

/*
 * The conversion band and the footer sit on brand blue. site.css already says
 * their headings are white, but it targets bare h2/h3, which the rule above
 * out-specifies — so restate it here for Elementor's widget wrappers. The
 * text, list and shortcode widgets need it too: Elementor paints those with
 * the global text colour, which is the charcoal used on white backgrounds.
 */
body .ogbuta-conversion-band .elementor-widget-heading .elementor-heading-title,
body .ogbuta-conversion-band .elementor-widget-text-editor,
body .ogbuta-site-footer .elementor-widget-heading .elementor-heading-title,
body .ogbuta-site-footer .elementor-widget-text-editor,
body .ogbuta-site-footer .elementor-widget-icon-list,
body .ogbuta-site-footer .elementor-widget-shortcode,
body .site-footer .elementor-widget-heading .elementor-heading-title {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Block-theme alignment classes
 *
 * theme.json's layout (contentSize 760 / wideSize 1280) generated .alignwide
 * and .alignfull. ogbuta-product-videos still emits .alignwide on its showcase,
 * which overflows without them. Inside an Elementor container the width is
 * already constrained, so cap at the container rather than a fixed 1280.
 * ------------------------------------------------------------------------- */
.alignwide {
	margin-inline: auto;
	max-width: 100%;
	width: 100%;
}

.alignfull {
	margin-inline: 0;
	max-width: 100%;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Mobile header
 *
 * Hello Elementor prints the site description next to the logo. The block
 * theme's header was logo + navigation only, and the extra text overflows the
 * viewport at 375px, which drags the fixed mobile action bar wider than the
 * screen with it.
 * ------------------------------------------------------------------------- */
.site-header .site-description {
	display: none;
}

.site-header .header-inner {
	flex-wrap: wrap;
}

.site-header .site-branding {
	max-width: 100%;
	min-width: 0;
}

/* The ogbuta-core action bar is fixed; pin it to the viewport, not the document. */
.ogbuta-mobile-actions {
	left: 0;
	right: 0;
	max-width: 100vw;
}

/* ---------------------------------------------------------------------------
 * Link colour
 *
 * theme.json emitted this through :where(), which has zero specificity, so it
 * tinted ordinary links without ever beating a component's own colour. Restate
 * it the same way — site.css loads after this file, so .ogbuta-button and
 * .ogbuta-whatsapp keep their own colours instead of going blue-on-blue.
 * ------------------------------------------------------------------------- */
:root :where(a:where(:not(.wp-element-button):not(.elementor-button))) {
	color: var(--ogbuta-blue);
}

:root :where(a:where(:not(.wp-element-button):not(.elementor-button)):hover) {
	color: var(--ogbuta-orange);
}

/* ---------------------------------------------------------------------------
 * Header & footer built with Elementor Header & Footer Builder
 *
 * site.css styles the block theme's .wp-block-site-logo / .wp-block-navigation
 * markup. HFE emits .hfe-* instead, so map the same treatment across. The
 * .site-header / .site-footer rules above still apply if HFE is deactivated
 * and Hello Elementor's own header and footer come back.
 * ------------------------------------------------------------------------- */
.ogbuta-site-header .hfe-site-logo-img {
	max-height: 48px;
	width: auto;
}

.ogbuta-site-header .hfe-nav-menu {
	font-size: .9rem;
	font-weight: 700;
}

/* Footer logo sits on a white chip, as .ogbuta-site-footer .wp-block-site-logo did. */
.ogbuta-site-footer .hfe-site-logo-container {
	background: #fff;
	border-radius: var(--ogbuta-radius);
	display: inline-flex;
	padding: .55rem;
}

.ogbuta-site-footer .hfe-site-logo-img {
	filter: none;
	max-height: 58px;
	width: auto;
}

/* Icon List renders the footer link lists; strip its flex/icon defaults so the
   existing .ogbuta-site-footer li rules (including the orange arrow) apply. */
.ogbuta-site-footer .elementor-icon-list-items {
	list-style: none;
	padding: 0;
}

.ogbuta-site-footer .elementor-icon-list-item > a {
	display: inline;
	padding: 0;
}

.ogbuta-site-footer .elementor-icon-list-icon {
	display: none;
}

/* Core block alignment utilities the block theme used to provide. */
.has-text-align-center { text-align: center; }
.has-text-align-left   { text-align: left; }
.has-text-align-right  { text-align: right; }

/* ---------------------------------------------------------------------------
 * Mobile menu toggle
 *
 * .hfe-nav-menu is a column flex container, so the burger stretches the full
 * nav width; HFE's `margin: 0 auto` was the only thing shrinking it, which
 * also centred it ~114px short of the header's right edge. Align the
 * container's cross axis instead, so the button hugs the right gutter and
 * sizes to its content. min-* brings the tap target to the 44px minimum.
 * ------------------------------------------------------------------------- */
body .ogbuta-site-header .hfe-nav-menu {
	align-items: flex-end;
}

/* Elementor's generated selector stacks two classes on one element
   (.elementor-element.elementor-element-N), so it out-specifies anything
   reasonable here; !important is the honest way to drop the auto margins. */
body .ogbuta-site-header .elementor-widget-navigation-menu .hfe-nav-menu__toggle {
	margin-inline: 0 !important;
}

body .ogbuta-site-header .hfe-nav-menu__toggle {
	min-height: 44px;
	min-width: 44px;
	text-align: center;
}

/*
 * site.css hides .ogbuta-site-header .ogbuta-whatsapp below 782px (the mobile
 * action bar carries it instead), but that only hides the anchor — Elementor's
 * widget wrapper stays a zero-width flex item, and the container's 20px gap
 * still sits before it, pushing the burger 20px off the right gutter. Hide the
 * whole widget at the same breakpoint.
 */
@media (max-width: 781px) {
	body .ogbuta-site-header .elementor-widget-shortcode {
		display: none;
	}

	/*
	 * HFE positions the dropdown absolutely against the nav widget, which is
	 * only as wide as the burger — so the panel rendered ~77px off the right
	 * of a 375px screen. Making the widget static hands the containing block
	 * to the sticky header, so the panel can span its full width.
	 */
	body .ogbuta-site-header .elementor-widget-navigation-menu {
		position: static;
	}

	body .ogbuta-site-header nav.hfe-dropdown {
		left: 0 !important;
		right: 0 !important;
		top: 100% !important;
		width: auto !important;
	}

	body .ogbuta-site-header nav.hfe-dropdown .hfe-nav-menu,
	body .ogbuta-site-header nav.hfe-dropdown .hfe-nav-menu li {
		width: 100%;
	}

	body .ogbuta-site-header nav.hfe-dropdown .hfe-nav-menu {
		background: #fff;
		border-bottom: 1px solid var(--ogbuta-border);
		box-shadow: 0 8px 16px rgba(23, 25, 29, .12);
	}
}

/* ---------------------------------------------------------------------------
 * Touch targets
 *
 * site.css gives .ogbuta-button, .ogbuta-whatsapp, .ogbuta-enquiry-form button
 * and .wp-element-button a 48px minimum height. Elementor's button widget is
 * not in that list, so its CTAs rendered 39px tall — under the 44px minimum.
 * The header logo link wrapped a 26px image for the same reason.
 * ------------------------------------------------------------------------- */
body .elementor-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 48px;
}

body .ogbuta-site-header .hfe-site-logo a {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

/* ---------------------------------------------------------------------------
 * iOS zoom on form focus
 *
 * site.css gives the enquiry fields `font: inherit`, which picks up the
 * label's .9rem (14.4px). iOS Safari auto-zooms any focused field under 16px,
 * so tapping into the distributor or bulk form jumps the page and the user has
 * to pinch back out. 16px on small screens is the standard remedy; the label
 * keeps its own size, so the desktop design is unchanged.
 *
 * NB: this originates in site.css and so affects the block theme on production
 * too — worth porting there rather than leaving it only in this child theme.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	body .ogbuta-enquiry-form input,
	body .ogbuta-enquiry-form select,
	body .ogbuta-enquiry-form textarea {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Product card title links
 *
 * The catalogue renders the title as h2 > a and the featured rail as h3 > a,
 * which came out 23px and 43px tall; the product-videos showcase does the
 * same at 42px — under the 44px touch minimum. Laying the
 * anchor out as a flex block grows the target without overlapping the
 * "Ask on WhatsApp" button beneath it (inline padding would have expanded the
 * hit area over that button and stolen taps from it).
 *
 * Mobile only: pointer targets on desktop do not need the same floor, and this
 * keeps the desktop card proportions exactly as designed.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	body .ogbuta-product-card h2 a,
	body .ogbuta-product-card h3 a,
	body .ogbuta-video-grid h3 a {
		align-items: center;
		display: flex;
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------------------
 * Standalone prose links
 *
 * Two inline links sat under the 44px touch minimum. They can't take the card
 * -title treatment: laying an inline link out as a block breaks the sentence
 * it lives in, and inline padding would have grown the hit area over whatever
 * sits above and below, stealing taps from it.
 *
 * "Become a Distributor →" is the sole content of its paragraph, so it is a
 * button in all but name and can safely carry its own height. The breadcrumb
 * link has siblings ("Home › About Ogbuta"), so the row itself is laid out and
 * the link is given full height within it — the line stays intact. The
 * :only-child test is what keeps these two cases apart.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	body .elementor-widget-text-editor p > a:only-child {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}

	body .ogbuta-breadcrumb {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: .4rem;
		min-height: 44px;
	}

	body .ogbuta-breadcrumb a {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}
}