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

/* Add your custom styles here */


/* ==========================================================================
   BNM 2026 - article body
   Styles the post content inside the single-post template. The content sits in
   a V3 widget, so V4 classes cannot reach it. Scope: .article-body only.
   Documented in Benady-New-Media_Elementor-Classes_v1.md
   ========================================================================== */
.article-body {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-body, 1.0625rem);
	line-height: 1.6;
	color: var(--color-foreground, #22222a);
}

.article-body p {
	margin: 0 0 1.1em;
}

.article-body h2,
.article-body h3,
.article-body h4 {
	margin: 36px 0 14px;
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-foreground, #22222a);
}

.article-body h2,
.article-body h3 {
	font-size: var(--text-h3, 1.625rem);
}

.article-body h4 {
	font-size: var(--text-h4, 1.5rem);
}

.article-body a {
	color: var(--color-link, #064f8d);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body a:hover {
	color: var(--color-primary-strong, #b81d62);
}

.article-body ul,
.article-body ol {
	margin: 0 0 1.1em;
	padding: 0;
}

.article-body ul {
	list-style: none;
}

.article-body ul li {
	position: relative;
	margin-block-end: 8px;
	padding-inline-start: 18px;
}

.article-body ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-primary, #da2576);
}

.article-body ol {
	padding-inline-start: 1.4em;
}

.article-body ol li {
	margin-block-end: 8px;
}

.article-body blockquote {
	margin: 36px 0;
	padding: 32px 0;
	border: 0;
	border-block: 1px solid var(--color-border, #e3e3e8);
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: var(--text-h3-lg, 1.75rem);
	line-height: 1.1;
	color: var(--color-foreground, #22222a);
}

.article-body blockquote p {
	margin: 0;
}

.article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md, 20px);
}

.article-body figure {
	margin: 36px 0;
}

.article-body figcaption {
	margin-block-start: 10px;
	font-size: var(--text-body-xs, 0.9375rem);
	color: var(--color-muted-foreground, #55555e);
}

.article-body iframe,
.article-body video {
	max-width: 100%;
	border-radius: var(--radius-md, 20px);
}

/* ==========================================================================
   BNM 2026 - article table of contents
   Elementor Pro Table of Contents (V3 widget) in the single-post sidebar.
   Scope: .article-toc only.
   ========================================================================== */
.article-toc {
	--box-border-width: 0px;
	--box-padding: 0px;
	--header-color: var(--color-muted-foreground, #55555e);
	--item-text-color: var(--color-link, #064f8d);
	--item-text-hover-color: var(--color-primary-strong, #b81d62);
	--item-text-active-color: var(--color-primary-strong, #b81d62);
	--marker-size: 0px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--color-border, #e3e3e8);
}

.article-toc .elementor-toc__header {
	padding: 0;
	border: 0;
}

.article-toc .elementor-toc__header-title {
	font-family: var(--font-label, inherit);
	font-weight: 500;
	font-size: var(--text-label, 0.9375rem);
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--color-muted-foreground, #55555e);
}

.article-toc .elementor-toc__body {
	padding: 12px 0 0;
}

.article-toc .elementor-toc__list-wrapper,
.article-toc .elementor-toc__list-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-toc .elementor-toc__list-item + .elementor-toc__list-item {
	margin-block-start: 12px;
}

.article-toc .elementor-toc__list-item-text-wrapper svg,
.article-toc .elementor-toc__list-item-text-wrapper i {
	display: none;
}

.article-toc .elementor-toc__list-item-text {
	font-family: var(--font-body, inherit);
	font-size: var(--text-body-sm, 1rem);
	line-height: 1.6;
	color: var(--color-link, #064f8d);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-toc .elementor-toc__list-item-text:hover,
.article-toc .elementor-toc__list-item-text.elementor-item-active {
	color: var(--color-primary-strong, #b81d62);
}

/* 6. Motion system (Menny approved 12.10 - UX doc summarised in Benady-New-Media_Elementor-Classes_v1.md).
   One curve, tokens motion-fast/base/slow, one rise distance. Only opacity, transform and clip-path.
   Every hidden start state lives inside "no-preference" + @supports, so content can never stay invisible. */
:root { --bnm-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --bnm-rise: 16px; }
@media (max-width: 767px) { :root { --bnm-rise: 12px; } }
@keyframes bnm-reveal { from { opacity: 0; transform: translateY(var(--bnm-rise)); } to { opacity: 1; transform: none; } }
@keyframes bnm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bnm-rise { from { transform: translateY(var(--bnm-rise)) scale(0.97); } to { transform: none; } }
@keyframes bnm-draw { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes bnm-msg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* 6a. Load sequence (hero, thank-you). Delay per element with --bnm-d. Main headings never get these. */
  .enter-load { animation: bnm-reveal var(--motion-slow, 500ms) var(--bnm-ease) var(--bnm-d, 0ms) both; }
  .enter-load-rise { animation: bnm-rise var(--motion-slow, 500ms) var(--bnm-ease) var(--bnm-d, 0ms) both; }
  .draw-line-load { animation: bnm-draw 600ms var(--bnm-ease) var(--bnm-d, 500ms) both; }
  /* 6b. Scroll entrances - linked to the element's own position in the viewport. */
  @supports (animation-timeline: view()) {
    .reveal, .reveal-stagger > * {
      animation: bnm-reveal linear both;
      animation-timing-function: var(--bnm-ease);
      animation-timeline: view(block);
      animation-range: entry calc(var(--bnm-i, 0) * 6%) entry calc(30% + var(--bnm-i, 0) * 6%);
    }
    /* Links and buttons fade only, so their own :active scale keeps working */
    .reveal:is(a, button), .reveal-stagger > :is(a, button) { animation-name: bnm-fade; }
    .reveal-stagger > :nth-child(2) { --bnm-i: 1; }
    .reveal-stagger > :nth-child(3) { --bnm-i: 2; }
    .reveal-stagger > :nth-child(4) { --bnm-i: 3; }
    .reveal-stagger > :nth-child(5) { --bnm-i: 4; }
    .reveal-stagger > :nth-child(n+6) { --bnm-i: 5; }
    .draw-line {
      animation: bnm-draw linear both;
      animation-timing-function: var(--bnm-ease);
      animation-timeline: view(block);
      animation-range: cover 18% cover 38%;
    }
  }
  /* 6c. Form status messages slide in instead of popping */
  .e-form-base.form-state-error .e-form-error-message,
  .e-form-base.form-state-success .e-form-success-message { animation: bnm-msg var(--motion-base, 250ms) var(--bnm-ease) both; }
  /* 6d. Arrow links nudge forward (left in RTL) on hover */
  @media (hover: hover) {
    .link-arrow { transition: transform var(--motion-fast, 150ms) var(--bnm-ease); }
    .link-arrow:hover { transform: translateX(-3px); }
  }
}
@media (max-width: 767px) { .reveal-stagger > * { --bnm-i: 0 !important; } }
/* 6e. Submit button while the form is sending */
.e-form-submit-button-base:disabled { opacity: 0.6; cursor: progress; }

/* BNM 2026 - header nav: services submenu */
.elementor-element-139758d .elementor-nav-menu--main .elementor-nav-menu .sub-menu {
  padding: 8px;
  min-width: 300px !important;
  margin-top: 12px !important;
  background-color: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -12px rgba(13,13,38,0.08);
}
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item:hover,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item:focus,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item.highlighted,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item.elementor-item-active {
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-card-title);
  line-height: 1.2;
  color: var(--color-foreground);
  background-color: transparent;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item:hover,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-primary-strong);
}
.elementor-element-139758d .elementor-nav-menu--main .elementor-item.has-submenu.highlighted {
  color: var(--color-primary-strong);
}
.elementor-element-139758d .elementor-nav-menu--main .elementor-item.has-submenu .sub-arrow {
  margin-inline-start: 6px;
  transition: transform var(--motion-fast);
}
.elementor-element-139758d .elementor-nav-menu--main .elementor-item.has-submenu.highlighted .sub-arrow {
  transform: rotate(180deg);
}

/* mobile dropdown: services sub-items */
.elementor-element-139758d .elementor-nav-menu--dropdown .sub-menu {
  padding-block-end: 12px;
  border-bottom: 1px solid var(--color-border);
}
.elementor-element-139758d .elementor-nav-menu--dropdown .elementor-item.has-submenu.highlighted {
  border-bottom-color: transparent;
}
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item:hover,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item:focus,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item.highlighted,
.elementor-element-139758d .elementor-nav-menu--main .elementor-sub-item.elementor-item-active {
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-nav);
  line-height: 1.4;
  color: var(--color-foreground);
  background-color: transparent;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.elementor-element-139758d .elementor-nav-menu--dropdown .elementor-sub-item:hover {
  color: var(--color-primary-strong);
}