/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Keeps non-Elementor pages - the virtual voting page above all - wide on big
   screens. Capped with min() so it can never exceed the space available:
   a bare 1440px forced the whole document to 1440px on phones. */
body:not([class*=elementor-page-]) .site-main {
	min-width: min(1440px, 100%);
}

/* ---------------------------------------------------------
   Site logo
   Capped at 340px. min() keeps it from ever exceeding its
   container, so it scales down instead of overflowing on
   narrow screens; height:auto preserves the aspect ratio.
   --------------------------------------------------------- */
:root {
	--hl-logo-max-width: 340px;
}

/* Phones: a 340px logo crowds out the burger menu, so step it down. */
@media (max-width: 767px) {
	:root {
		--hl-logo-max-width: min(220px, 60vw);
	}
}

.elementor-widget-theme-site-logo img,
.site-header .site-branding .site-logo img,
.site-footer .site-branding .site-logo img,
.custom-logo {
	max-width: min(var(--hl-logo-max-width), 100%);
	width: auto;
	height: auto;
}

/* ---------------------------------------------------------
   Mobile navigation - drawer
   Elementor Pro renders the burger and toggles .elementor-active
   on it; these rules turn its dropdown into an off-canvas panel
   and keep that toggle as the only holder of the open state.
   Everything is scoped to the header template so the two nav
   menus in the footer keep Elementor's default behaviour.
   The 1024px breakpoint matches the widget's "dropdown: tablet".
   --------------------------------------------------------- */

.hl-nav-backdrop {
	display: none;
}

@media (max-width: 1024px) {

	/* Keep the logo and the burger on one row. Elementor gives both the logo
	   container and the menu widget width:100%, which overflows the row and
	   wraps the burger onto a line of its own, well below the logo. Sizing
	   them to their content lets the row's align-items:center line them up. */
	[data-elementor-type="header"] .e-con-inner > .e-con {
		/* Sized explicitly rather than left to shrink-to-fit: the logo widget
		   inside is itself width:100%, which makes an auto-width parent
		   circular, and the logo is lazy-loaded without width/height
		   attributes, so a content-sized parent starts out 0px wide and the
		   burger jumps once the image lands. */
		width: min(var(--hl-logo-max-width), 60%);
		flex: 0 0 auto;
	}

	[data-elementor-type="header"] .elementor-widget-nav-menu {
		width: auto;
		flex: 1 1 auto;
	}

	/* Burger sits at the far edge, level with the logo, instead of floating
	   in the middle of the space beside it - Elementor's Toggle Align
	   default is "center", which resolves to margin: 0 auto. */
	[data-elementor-type="header"] .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle {
		margin: 0 0 0 auto;
		position: relative;
		z-index: 10002;
		min-width: 44px;
		min-height: 44px;
		padding: 0.35em;
		font-size: 26px;
		color: #444444;
		background-color: transparent;
	}

	/* While the drawer is open the burger becomes its close button, so it has
	   to leave the flow - the header itself may be scrolled out of sight. */
	[data-elementor-type="header"] .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active {
		position: fixed;
		top: var(--hl-drawer-top, 14px);
		right: 14px;
	}

	/* The panel itself */
	[data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(360px, 86vw);
		height: 100%;
		margin: 0;
		padding: calc(var(--hl-drawer-top, 14px) + 54px) 0 32px;
		background-color: #ffffff;
		box-shadow: -14px 0 40px rgba(0, 0, 0, 0.18);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform-origin: center;
		transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
		z-index: 10001;
	}

	[data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown.elementor-nav-menu__container::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, #9E8C38, #E3D08A);
	}

	/* Closed and open states. These mirror Elementor's own selectors so they
	   outweigh them - it animates the panel with max-height and scaleY(). */
	[data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		max-height: none;
		transform: translateX(100%);
		visibility: hidden;
	}

	[data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		max-height: none;
		transform: translateX(0);
		visibility: visible;
		animation: none;
	}

	/* Items. Nested items keep Elementor's transparent left border, which
	   already indents them one step further than the padding. */
	[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu a {
		padding: 16px 26px;
		font-size: 0.95rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #444444;
		border-bottom: 1px solid #F2F2F2;
		transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
	}

	[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item:hover,
	[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item:focus,
	[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item.elementor-item-active,
	[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item.highlighted {
		background-color: #FAF7EE;
		color: #9E8C38;
		box-shadow: inset 3px 0 0 #9E8C38;
	}

	[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container ul a {
		font-size: 0.875rem;
		font-weight: 500;
		text-transform: none;
		color: #6B6B6B;
	}

	.hl-nav-backdrop {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(17, 17, 17, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.32s ease, visibility 0.32s;
		z-index: 10000;
	}

	body.hl-nav-open .hl-nav-backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* Hold the page still behind the panel. */
	body.hl-nav-open {
		overflow: hidden;
	}
}

/* Keep the close button clear of the admin bar, which sits above everything
   on z-index 99999 and would otherwise cover it. */
@media (max-width: 782px) {
	body.admin-bar {
		--hl-drawer-top: 60px;
	}
}

@media (min-width: 783px) and (max-width: 1024px) {
	body.admin-bar {
		--hl-drawer-top: 46px;
	}
}