/* ============================================
   General Reset / Container
============================================ */

.mod-gruej5menu { position:relative; z-index:999; width:100%; font-family:"Roboto Condensed",sans-serif; float:left; }

/* ============================================
   Desktop Inline Menu
============================================ */

/* Hide Home on desktop */
.gruej5-inline-menu li.nav-item:has(a[href="/"]) { display:none; }

/* Estimate button */
.gruej5-inline-menu li.nav-item:has(a[href="/estimate"]) { background-color:#32F309; border-radius:3px; font-weight:700; font-size:14px; letter-spacing:0.4px; transition:background-color 0.25s ease; margin-left:15px; margin-right:15px; color:#000; }
.gruej5-inline-menu li.nav-item:has(a[href="/estimate"]) a { color:#000 !important; padding:10px 18px; display:inline-block; text-decoration:none; }
.gruej5-inline-menu li.nav-item:has(a[href="/estimate"]):hover { background-color:#58F437; }

/* Phone link */
.gruej5-inline-menu a[href^="tel:"] { color:#151515; font-weight:700; font-size:1.75em; letter-spacing:0.1px; opacity:0.95; font-family:"Barlow Condensed",sans-serif; text-shadow:0 0 8px rgba(0,0,0,0.12); }

/* Main navigation */
.gruej5-inline-menu .nav { display:flex; align-items:center; gap:0; padding:0; margin:0; justify-content:flex-start !important; float:right; }
.gruej5-inline-menu .nav-link { color:#1F2933; font-size:16px; font-weight:300; padding:10px 15px; text-transform:uppercase; transition:color 0.2s ease,background-color 0.2s ease; letter-spacing:0.1px; font-family:"Roboto Condensed",sans-serif; }
.gruej5-inline-menu .nav-link:hover, .gruej5-inline-menu .nav-link:focus, .gruej5-inline-menu .nav-link.active { color:#222; background-color:transparent; border-radius:0; text-decoration:none; }

/* Dropdown menus */
.gruej5-inline-menu .dropdown-menu { background-color:#171717; padding:0; min-width:270px; border-radius:0; margin-top:-2px; border:1px solid #242424; border-top:3px solid #32F309; box-shadow:0 12px 28px rgba(0,0,0,0.18); }
.gruej5-inline-menu .dropdown-item { color:#e3e3e3; padding:12px 22px; font-size:15px; line-height:1.25; letter-spacing:0.4px; font-weight:700; font-family:"Roboto Condensed",sans-serif; text-transform:uppercase; border-bottom:1px solid #2c2c2c; transition:background-color 0.18s ease,color 0.18s ease,padding-left 0.18s ease; }
.gruej5-inline-menu .dropdown-menu > li:last-child > .dropdown-item, .gruej5-inline-menu .dropdown-menu > .dropdown-item:last-child { border-bottom:0; }
.gruej5-inline-menu .nav-link.dropdown-toggle::after { display:none !important; content:none !important; }
.gruej5-inline-menu .dropdown-item:hover, .gruej5-inline-menu .dropdown-item:focus { background-color:#333; color:#fff; padding-left:27px; }
.gruej5-inline-menu .dropdown-item.active, .gruej5-inline-menu .dropdown-item:active { background-color:#333; color:#fff; }
.gruej5-inline-menu .dropdown:hover > .dropdown-menu, .gruej5-inline-menu .dropdown:focus-within > .dropdown-menu { display:block; margin-top:0; }

/* ============================================
   Mobile Offcanvas Menu — Pro-Crete
============================================ */

.offcanvas { background-color:#171717 !important; color:#fff !important; width:90% !important; max-width:380px; z-index:99999 !important; border-left:1px solid #303030; }
.offcanvas-header { padding:18px 22px; min-height:66px; border-bottom:1px solid #303030; border-top:3px solid #32F309; }
.offcanvas-title { color:#fff; font-family:"Barlow Condensed",sans-serif; font-size:24px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }

/* Close button */
.offcanvas .btn-close { filter:invert(1); opacity:0.85; padding:12px; }
.offcanvas .btn-close:hover { opacity:1; }
.offcanvas .btn-close:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* Menu layout */
.offcanvas-body { padding:14px 22px 28px; overflow-y:auto; }
.offcanvas-body .nav { display:flex; flex-direction:column; align-items:stretch !important; justify-content:flex-start !important; gap:0; width:100%; margin:0; padding:0; list-style:none; text-align:left !important; }
.offcanvas-body .nav-item { width:100%; margin:0; padding:0; }
.offcanvas-body .nav-link { box-sizing:border-box; width:100%; margin:0; text-align:left !important; text-decoration:none; border-radius:0; transition:color 0.18s ease,background-color 0.18s ease; }

/* Parent links */
.offcanvas-body > .nav > .nav-item { border-bottom:1px solid #303030; }
.offcanvas-body > .nav > .nav-item > .nav-link { position:relative; display:block; padding:14px 8px 14px 24px; color:#fff; font-family:"Barlow Condensed",sans-serif; font-size:25px; font-weight:700; line-height:1.15; letter-spacing:0.5px; text-transform:uppercase; }
.offcanvas-body > .nav > .nav-item > .nav-link::before { content:""; position:absolute; left:3px; top:50%; width:7px; height:7px; border-top:2px solid #32F309; border-right:2px solid #32F309; transform:translateY(-50%) rotate(45deg); }
.offcanvas-body > .nav > .nav-item > .nav-link:hover { color:#32F309; background-color:#202020; }
.offcanvas-body > .nav > .nav-item > .nav-link.active { color:#32F309; }

/* Submenu groups */
.offcanvas-body .nav .nav { width:auto; margin:0 0 15px 6px; padding:0 0 0 17px; border-left:1px solid #414141; }
.offcanvas-body .nav .nav .nav-item { border:0; }
.offcanvas-body .nav .nav .nav-link { display:block; padding:10px 8px; color:#c8c8c8; font-family:"Roboto Condensed",sans-serif; font-size:16px; font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none; }
.offcanvas-body .nav .nav .nav-link::before { content:none; }
.offcanvas-body .nav .nav .nav-link:hover { color:#fff; background-color:#242424; }
.offcanvas-body .nav .nav .nav-link.active { color:#32F309; background-color:#242424; }

/* Additional submenu level */
.offcanvas-body .nav .nav .nav { margin:4px 0 8px 8px; padding-left:12px; }
.offcanvas-body .nav .nav .nav .nav-link { font-size:15px; }

/* Mobile Estimate button */
.offcanvas-body > .nav > .nav-item:has(> a[href$="/estimate"]) { margin-top:18px; border-bottom:0; }
.offcanvas-body > .nav > .nav-item > a.nav-link[href$="/estimate"] { padding:15px 20px; background-color:#32F309; color:#000 !important; border-radius:3px; text-align:center !important; font-size:24px; }
.offcanvas-body > .nav > .nav-item > a.nav-link[href$="/estimate"]::before { content:none; }
.offcanvas-body > .nav > .nav-item > a.nav-link[href$="/estimate"]:hover { background-color:#58F437; }

/* Mobile phone link */
.offcanvas-body > .nav > .nav-item:has(> a[href^="tel:"]) { margin-top:10px; border-bottom:0; }
.offcanvas-body > .nav > .nav-item > a.nav-link[href^="tel:"] { padding:14px 0; color:#fff; font-size:29px; text-align:center !important; }
.offcanvas-body > .nav > .nav-item > a.nav-link[href^="tel:"]::before { content:none; }

/* Keyboard focus */
.offcanvas-body .nav-link:focus-visible { outline:2px solid #32F309; outline-offset:-2px; }

/* ============================================
   CTA Links
============================================ */

.nav-link.menu-cta { background-color:#32F309; color:#000 !important; padding:12px 23px; font-weight:700; display:inline-block; border-radius:3px; }
.nav-link.menu-cta:hover { background-color:#58F437; color:#000 !important; }

/* ============================================
   Branded Hamburger Toggle
============================================ */

.gruej5menu .gruej5-toggle { background-color:#32F309 !important; border:none; border-radius:6px; padding:6px 10px; align-items:center; justify-content:center; margin-top:9px; transition:background-color 0.2s ease,box-shadow 0.2s ease,transform 0.1s ease; }
.gruej5menu .gruej5-toggle svg { fill:#171717; }
.gruej5menu .gruej5-toggle:hover, .gruej5menu .gruej5-toggle:focus { background-color:#58F437 !important; box-shadow:0 4px 12px rgba(50,243,9,0.2); }
.gruej5menu .gruej5-toggle:focus-visible { outline:2px solid #171717; outline-offset:3px; }
.gruej5menu .gruej5-toggle:active { transform:scale(0.96); }

/* ============================================
   Responsive Behavior
============================================ */

/* Desktop: 1280px and above */
@media (min-width:1280px) {
.gruej5-inline-menu { display:block !important; }
.gruej5-toggle, .gruej5menu .gruej5-toggle { display:none !important; }
.gruej5-inline-menu .nav-item > button.dropdown-toggle { display:none !important; }
.gruej5-inline-menu .nav-link.dropdown-toggle::after { display:none !important; content:none !important; }
}

/* Mobile / tablet: below 1280px */
@media (max-width:1279.98px) {
.gruej5-inline-menu { display:none !important; }
.gruej5-toggle, .gruej5menu .gruej5-toggle { display:inline-flex !important; }
}

/* Small screens */
@media (max-width:480px) {
.gruej5menu .gruej5-toggle { padding:8px 12px; }
}