/* 
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.1
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
*/

/* ---------------------------------------------------------------
   Design tokens

   Do NOT redeclare --nm-* in this file. Elementor already emits them
   on :root from the v4 Global Variables (kit CSS, post-14.css), and
   this stylesheet loads after it - so a copy here would silently win
   and any edit made in Elementor would stop taking effect.

   Available: --nm-accent  --nm-ink  --nm-bg  --nm-surface
              --nm-font-heading  --nm-font-body

   Source of truth for the values is the novamira-design DESIGN.md.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Sticky site header

   Elementor renders the header template inside its own wrapper
   (.elementor-location-header), so position:sticky has to sit on
   that wrapper. On any element inside it the sticky context is only
   as tall as the header itself, and nothing sticks.
   --------------------------------------------------------------- */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Visible focus ring on every interactive element (DESIGN.md).
   Ink rather than accent so it stays visible on an accent fill. */

.elementor-location-header a:focus-visible,
.elementor-location-header [role="button"]:focus-visible {
	outline: 2px solid var(--nm-ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Utilities

   Reusable single-purpose classes for CSS properties the Elementor v4
   style schema has no prop for. Add the class name to an element's
   Classes field in the editor.
   --------------------------------------------------------------- */

/* Even line lengths instead of a long first line and a short orphan
   second one. Use on any multi-line heading. */

.u-balance {
	text-wrap: balance;
}

/* ---------------------------------------------------------------
   Home, Section 3: product category cards

   The cards come from one Loop Item template (Product Category Card)
   rendered by a Loop Carousel. All six cards are styled alike; only the
   focus rings live here, because atomic hover styles map onto
   :focus-visible as a fill change with no outline.
   --------------------------------------------------------------- */

.s-cat-card-title a:focus-visible,
.s-cat-card-product-row:focus-visible,
.s-cat-card-footer:focus-visible {
	outline: 2px solid var(--nm-ink);
	outline-offset: 2px;
}

/* Loop Carousel ships `.swiper-slide a.e-con { display: var(--display) }`,
   a leftover from legacy containers. Atomic flexboxes rendered as links
   (product rows, card footer) never set --display, so the rule resolves
   to inline and their flex layout collapses. Declaring the variable puts
   them back to flex. */

.elementor-widget-loop-carousel .swiper-slide a.e-con.e-flexbox-base {
	--display: flex;
}

/* ---------------------------------------------------------------
   Home, About section

   Focus ring for the section CTA; the atomic hover variant only
   gives :focus-visible a fill change, no outline.
   --------------------------------------------------------------- */

.s-about-cta:focus-visible {
	outline: 2px solid var(--nm-ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Utility: alternating loop rows

   A Loop Grid carrying .u-alt-rows flips every even item so the text
   and the photo swap sides. The item root carries .u-alt-row and its
   text side .u-alt-row-panel, which then hugs the photo on the left.
   --------------------------------------------------------------- */

.u-alt-rows .e-loop-item:nth-child(even) .u-alt-row {
	flex-direction: row-reverse;
}

.u-alt-rows .e-loop-item:nth-child(even) .u-alt-row-panel {
	align-items: flex-start;
}

/* Add your custom styles here */


/* FAQ accordion \u2014 home (u-faq) */
.u-faq .elementor-accordion .elementor-accordion-item{border:0;border-block-end:1px solid rgb(255 255 255 / 0.12)}
.u-faq .elementor-tab-title{display:flex;align-items:center;gap:24px}
.u-faq .elementor-tab-title .elementor-accordion-title{flex:1 1 auto;order:1}
.u-faq .elementor-tab-title .elementor-accordion-icon{float:none;width:36px;height:36px;order:2;margin:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgb(255 255 255 / 0.08);font-size:13px;transition:background .3s}
.u-faq .elementor-tab-title.elementor-active .elementor-accordion-icon{background:var(--nm-accent)}
.u-faq .elementor-tab-content a{color:var(--nm-accent)}

/* Alternating loop rows stack below 1024 \u2014 keep image under text on flipped rows */
@media (max-width:1024px){
	.u-alt-rows .e-loop-item:nth-child(even) .u-alt-row{flex-direction:column}
	.u-alt-rows .e-loop-item:nth-child(even) .u-alt-row-panel{align-items:flex-start}
}

/* Mobile nav dropdown (u-nav) \u2014 card-style panel aligned to the header bar */
@media (max-width:1024px){
	.u-nav .elementor-menu-toggle{background:transparent;padding:6px;border-radius:8px}
	.u-nav{position:static}
	.s-header-inner{position:relative}
	.u-nav .elementor-nav-menu--dropdown{
		position:absolute !important;
		top:calc(100% + 10px) !important;
		left:0 !important;right:0 !important;
		width:auto;
		z-index:20;
		border-radius:12px;
		overflow:hidden;
		box-shadow:0 12px 40px rgb(10 17 25 / 0.14);
	}
	.u-nav .elementor-nav-menu--dropdown .elementor-item{font-size:16px}
	.u-nav .elementor-nav-menu--dropdown li:last-child > .elementor-item{border-block-end:0}
}

/* One-page anchors \u2014 clear the fixed header when jumping to a section */
html{scroll-behavior:smooth}
#top,#about,#products,#why,#projects,#contact{scroll-margin-block-start:120px}
@media (max-width:767px){#top,#about,#products,#why,#projects,#contact{scroll-margin-block-start:96px}}