/*
Theme Name:   AWS Services (Temporary)
Theme URI:    https://awsservices.com.au
Description:  Temporary child theme for Hello Elementor. Keeps the live site exactly as it is, with these changes: the header and footer use the dark blue from the new site, and phones and tablets get a call and quote bar fixed to the bottom of the screen on every page.
Author:       BuildGrowth
Author URI:   https://buildgrowth.au
Template:     hello-elementor
Version:      1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  aws-services-temp
*/

/* ==========================================================================
   1. COLOURS (from the new site)
   ========================================================================== */
:root {
	--aws-navy-950:  #0d1721;
	--aws-navy-900:  #1a2a39; /* header */
	--aws-navy-800:  #24364a;
	--aws-amber:     #f1a900;
	--aws-grey:      #ecf0f3;
	--aws-dock-height: 66px;
}

/* ==========================================================================
   2. HEADER - dark blue instead of orange
   Targets the Elementor header template. The !important flags are needed
   because Elementor prints its own colours inline in the page head.
   ========================================================================== */

/* Header bars (desktop bar and mobile bar) */
html body .elementor-location-header > .e-con.e-parent,
html body .elementor-location-header > .elementor-section,
html body .elementor-location-header > .e-con.e-parent > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: var(--aws-navy-900) !important;
	background-image: none !important;
}

/* Desktop menu links */
html body .elementor-location-header .elementor-nav-menu--main .elementor-item {
	color: #ffffff !important;
}
html body .elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
html body .elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
html body .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
html body .elementor-location-header .elementor-nav-menu--main .elementor-item.highlighted {
	color: var(--aws-amber) !important;
}
/* Underline / pointer effects, if one is set on the menu */
html body .elementor-location-header .elementor-nav-menu--main .elementor-item::before,
html body .elementor-location-header .elementor-nav-menu--main .elementor-item::after {
	background-color: var(--aws-amber) !important;
	border-color: var(--aws-amber) !important;
}
/* Dropdown arrow next to Services */
html body .elementor-location-header .elementor-nav-menu--main .sub-arrow svg { fill: currentColor; }

/* Desktop dropdowns (Services and every level below it): white panels, navy text, grey hover */
html body .elementor-location-header .elementor-nav-menu--main .sub-menu,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu .sub-menu {
	background-color: #ffffff !important;
	border-top: 3px solid var(--aws-amber);
	box-shadow: 0 10px 30px rgba(13, 23, 33, 0.15);
}
html body .elementor-location-header .elementor-nav-menu--main .sub-menu a,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu .sub-menu a {
	color: var(--aws-navy-950) !important;
	background-color: #ffffff !important;
}
html body .elementor-location-header .elementor-nav-menu--main .sub-menu a:hover,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu a:focus,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu a.highlighted,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-item-active,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu .sub-menu a:hover,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu .sub-menu a:focus,
html body .elementor-location-header .elementor-nav-menu--main .sub-menu .sub-menu a.elementor-item-active {
	color: var(--aws-navy-950) !important;
	background-color: var(--aws-grey) !important;
}
html body .elementor-location-header .elementor-nav-menu--main .sub-menu .sub-arrow svg {
	fill: var(--aws-navy-950) !important;
}

/* Phone button in the header: amber with navy text, like the new site */
html body .elementor-location-header .elementor-widget-button .elementor-button {
	background-color: var(--aws-amber) !important;
	color: var(--aws-navy-950) !important;
}
html body .elementor-location-header .elementor-widget-button .elementor-button svg,
html body .elementor-location-header .elementor-widget-button .elementor-button .elementor-button-icon svg {
	fill: var(--aws-navy-950) !important;
}
html body .elementor-location-header .elementor-widget-button .elementor-button:hover {
	background-color: #ffffff !important;
	color: var(--aws-navy-950) !important;
}

/* Mobile menu (hamburger) button */
html body .elementor-location-header .elementor-menu-toggle {
	background-color: var(--aws-amber) !important;
	color: var(--aws-navy-950) !important;
}
html body .elementor-location-header .elementor-menu-toggle svg { fill: var(--aws-navy-950) !important; }

/* Mobile menu (opened from the hamburger). Scoped to the mobile <nav> only,
   because Elementor gives desktop sub-menus the same dropdown class. */
html body .elementor-location-header nav.elementor-nav-menu--dropdown {
	background-color: var(--aws-navy-950) !important;
}
html body .elementor-location-header nav.elementor-nav-menu--dropdown a {
	background-color: var(--aws-navy-950) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}
html body .elementor-location-header nav.elementor-nav-menu--dropdown a:hover,
html body .elementor-location-header nav.elementor-nav-menu--dropdown a:focus,
html body .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item-active,
html body .elementor-location-header nav.elementor-nav-menu--dropdown a.highlighted {
	background-color: var(--aws-navy-800) !important;
	color: var(--aws-amber) !important;
}
html body .elementor-location-header nav.elementor-nav-menu--dropdown .sub-menu a {
	background-color: var(--aws-navy-900) !important;
}
html body .elementor-location-header nav.elementor-nav-menu--dropdown .sub-arrow svg {
	fill: #ffffff !important;
}

/* Fallback if the Elementor header is ever switched off and Hello's own header shows */
html body .site-header {
	background-color: var(--aws-navy-900);
}
html body .site-header .site-navigation a,
html body .site-header .site-title a { color: #ffffff; }

/* ==========================================================================
   3. FOOTER - dark blue instead of orange and brown
   ========================================================================== */

/* All footer sections: navy (the photo on the call-to-action band stays) */
html body .elementor-location-footer > .e-con.e-parent,
html body .elementor-location-footer > .elementor-section {
	background-color: var(--aws-navy-950) !important;
}
/* Footer sections without a photo: drop any colour gradient too */
html body .elementor-location-footer > .e-con.e-parent:not(:first-child),
html body .elementor-location-footer > .elementor-section:not(:first-child) {
	background-image: none !important;
}

/* Call-to-action band: navy tint over the photo instead of black */
html body .elementor-location-footer > .e-con.e-parent:first-child::before,
html body .elementor-location-footer > .elementor-section:first-child > .elementor-background-overlay {
	background-color: var(--aws-navy-950) !important;
	background-image: none !important;
	opacity: 0.85 !important;
}

/* Copyright bar: a touch darker, with a fine divider line */
html body .elementor-location-footer > .e-con.e-parent:last-child,
html body .elementor-location-footer > .elementor-section:last-child {
	background-color: #08111a !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer buttons: amber with navy text, like the new site */
html body .elementor-location-footer .elementor-widget-button .elementor-button {
	background-color: var(--aws-amber) !important;
	color: var(--aws-navy-950) !important;
	border-color: var(--aws-amber) !important;
}
/* "Call us" button: white with navy text, so the two buttons read as a pair */
html body .elementor-location-footer .elementor-widget-button a.elementor-button[href^="tel:"] {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--aws-navy-950) !important;
}
html body .elementor-location-footer .elementor-widget-button .elementor-button svg {
	fill: var(--aws-navy-950) !important;
}
html body .elementor-location-footer .elementor-widget-button .elementor-button:hover {
	background-color: var(--aws-navy-800) !important;
	border-color: var(--aws-navy-800) !important;
	color: #ffffff !important;
}
html body .elementor-location-footer .elementor-widget-button .elementor-button:hover svg {
	fill: #ffffff !important;
}

/* Footer links and icons: white, amber on hover */
html body .elementor-location-footer a:not(.elementor-button):hover,
html body .elementor-location-footer a:not(.elementor-button):hover .elementor-icon-list-text {
	color: var(--aws-amber) !important;
}
html body .elementor-location-footer .elementor-icon-list-icon svg {
	fill: var(--aws-amber) !important;
}

/* ==========================================================================
   4. MOBILE CALL AND QUOTE BAR
   Fixed to the bottom of the screen on phones and tablets, on every page.
   Settings: Appearance > Customize > Mobile Call & Quote Bar
   ========================================================================== */
.aws-dock { display: none; }

@media (max-width: 1024px) {
	.aws-dock {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99990;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--aws-navy-950);
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
	}

	html body .aws-dock .aws-dock__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 46px;
		margin: 0;
		padding: 0 10px;
		border-radius: 6px;
		font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease;
	}
	html body .aws-dock .aws-dock__btn:active { transform: scale(0.97); }
	html body .aws-dock .aws-dock__btn svg { width: 17px; height: 17px; flex-shrink: 0; fill: currentColor; }

	html body .aws-dock .aws-dock__btn--call,
	html body .aws-dock .aws-dock__btn--call:hover,
	html body .aws-dock .aws-dock__btn--call:focus {
		background: var(--aws-navy-800);
		color: #ffffff;
		border: 1px solid rgba(255, 255, 255, 0.14);
	}
	html body .aws-dock .aws-dock__btn--quote,
	html body .aws-dock .aws-dock__btn--quote:hover,
	html body .aws-dock .aws-dock__btn--quote:focus {
		background: var(--aws-amber);
		color: var(--aws-navy-950);
		border: 1px solid var(--aws-amber);
	}
	html body .aws-dock .aws-dock__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

	/* Stop the bar covering the bottom of the footer */
	body.aws-has-dock { padding-bottom: calc(var(--aws-dock-height) + env(safe-area-inset-bottom, 0px)); }
}

/* Hide the bar while the Elementor editor is open */
.elementor-editor-active .aws-dock,
.elementor-editor-preview .aws-dock { display: none !important; }