/*!
	Theme Name: Bell Engineering
	Theme URI: https://americommarketing.com
	Description: Bell Engineering custom theme.
	Author: Americom Marketing
	Author URI: https://americommarketing.com
	Template: hello-elementor
	Version: 1.0.0
	Stable tag: 1.0.0
	Requires at least: 4.7
	Tested up to: 5.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor-child
	Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ================================================
   Dropdown menu styling note (April 25, 2026)
   ================================================
   This file previously contained a custom "Services Dropdown" CSS block
   that overrode Elementor's native nav-menu dropdown rendering. The block
   was dormant for years because the child theme stylesheet was never
   enqueued. When the X icon fix enqueued style.css for the first time,
   the dormant rules became active and broke the Services and Government
   dropdowns: white-space:nowrap on dropdown links forced the dropdown to
   stretch as wide as the longest item ("De-bottlenecking and Rapid
   Response Process Engineering" — 47 chars), overflowing into the page
   hero. The custom rules also conflicted with Elementor's own dropdown
   show/hide cascade.

   The block is removed so Elementor's native dropdown styling resumes.
   If we want a custom dropdown look in the future, scope it tightly to
   one specific selector and test against every dropdown menu item on the
   site (Services has 14+ children; Government has children with long
   labels). See memory/reference_elementor_templates.md for context.

   Hover-color rule kept because it's harmless and matches the brand. */

/* Highlight parent item with brand orange when hovering its dropdown */
.elementor-nav-menu--main .menu-item-has-children:hover > a.elementor-item {
    color: #DB6F17;
    fill: #DB6F17;
}

/* ================================================
   Top-level nav item spacing
   ================================================ */

/* Reduce horizontal padding so all items fit on one line.
   :not(.elementor-sub-item) excludes dropdown children.
   Also target via the li wrapper used in some Elementor builds. */
.elementor-nav-menu--main .elementor-item:not(.elementor-sub-item) {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.elementor-nav-menu--main > ul > li > a.elementor-item {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* ================================================
   X (Twitter) icon — inline SVG fallback
   ================================================
   Elementor 2.10.3 ships Font Awesome 5.15.3, which does not
   include the fa-x-twitter glyph (added in FA 6.4). Render the
   X logo via a CSS background-image SVG so the existing
   social-icons widget continues to drive layout/sizing/animation
   while the visible mark is the official X.
   When Elementor (and therefore bundled FA) is upgraded to 6.4+,
   this rule becomes a no-op since the native glyph fills the <i>
   from the font; the ::before content is empty here so nothing
   visually overlaps the font character. */
.elementor-social-icon-x-twitter i.fa-x-twitter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
}
.elementor-social-icon-x-twitter i.fa-x-twitter::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1227' fill='%23ffffff'><path d='M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026Zm-145.029 168.477-47.469-67.894L144.011 79.694h162.604l304.797 435.991 47.468 67.894 396.2 566.721h-162.604L569.134 687.79v-.029Z'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    /* FA glyphs render at ~0.86em cap height inside a 1em line box. The X SVG's
       path fills its 1200x1227 viewBox almost edge-to-edge, so at background-size:contain
       it renders ~14% taller than adjacent FA glyphs. Scale the SVG to 0.86em to match
       the FA glyph optical size, keeping the X visually equal-height with Facebook & LinkedIn. */
    background-size: 0.86em 0.86em;
}

/* ================================================
   BEgreen menu item — anchor the leaf icon ::before
   ================================================
   The inline <style> block from Elementor positions the leaf icon
   via .menu-begreen:before { position: absolute; left:20px; top:3px; }
   plus padding-left:50px on the inner <a>. That depends on the parent
   <li> being a positioned ancestor. The default Elementor nav <li>
   is statically positioned, so the absolute :before escapes upward to
   the next positioned ancestor (the section) and overlaps the text.
   Adding position:relative to the <li> anchors the :before correctly. */
.menu-begreen,
.footer-menu-begreen {
    position: relative;
}

/* The general top-level nav padding rule above (.elementor-item:not(.elementor-sub-item)
   { padding-left: 6px !important }) has specificity 0,2,1 and was overriding the
   inline 50px padding (specificity 0,1,1) that the BEgreen item needs to clear its
   leaf icon. Result: text started at 6px while the 30px-wide icon sat at left:20px,
   so the icon overlapped the "BE" of "BEgreen". The selectors below have specificity
   0,3,1 and 0,3,1 (matching list-item descendant + element + class) — they win against
   both the general nav padding rule and the inline 50px rule, restoring icon clearance. */
.elementor-nav-menu--main li.menu-begreen > a.elementor-item,
.elementor-nav-menu--main li.menu-begreen a {
    padding-left: 50px !important;
}
/* Footer Elementor menu uses the SAME .elementor-nav-menu--main parent class
   as the top nav (rendered by an Elementor footer template). The previously
   tried .site-navigation selector never matched because it's not in the DOM.
   Footer icon sits at left:0 (per the inline kit style); 38px clears the
   30px-wide icon plus a small visible gap before the text. */
.elementor-nav-menu--main li.footer-menu-begreen > a.elementor-item,
.elementor-nav-menu--main li.footer-menu-begreen a {
    padding-left: 38px !important;
}

/* ================================================
   Registered trademark (®) superscript style
   ================================================
   Pairs with bell_wrap_registered_mark() PHP filter and the bell-reg-mark JS in
   functions.php. Every standalone ® in user-visible content is wrapped in
   <sup class="reg-mark">®</sup>. Without this CSS, the wrap is invisible.
   See memory/reference_trademark_marks.md for the full convention. */
sup.reg-mark {
    font-size: 0.5em;
    vertical-align: super;
    line-height: 0;
    font-weight: normal;
    margin-left: 0.05em;
}