/*
Theme Name: NJ Gold Star Construction
Theme URI: https://www.njgoldstarconstruction.com/
Author: Vibe Local Marketing
Description: Custom theme for the NJ Gold Star Construction site, built for free Elementor. Page frame, header and footer printed from editable Elementor templates (Appearance > Header / Footer), a three-level dropdown menu widget, blog templates, and a CSS layer that reads the Elementor Kit. Change a Global Color or Font and the whole site follows.
Version: 1.0.53
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: njgoldstar
*/

/*
 * TOKENS. Every value reads the Elementor Kit global first, then a literal
 * fallback that only shows if Elementor is off. Declared on body as well as
 * :root: Elementor prints the Kit variables on body.elementor-kit-N, and a
 * var() resolves where it is declared. On :root alone every fallback wins.
 */
:root, body {
  --ngt-ink: var(--e-global-color-primary, #17191c);
  --ngt-gold: var(--e-global-color-secondary, #f2b01e);
  --ngt-accent: var(--e-global-color-accent, #b4820a);
  --ngt-text: var(--e-global-color-text, #17191c);
  --ngt-warm: var(--e-global-color-ngs_warm, #f6f3ee);
  --ngt-line: var(--e-global-color-ngs_line, #e5e0d8);
  --ngt-white: var(--e-global-color-ngs_white, #ffffff);
  --ngt-head-font: var(--e-global-typography-primary-font-family, "Archivo"), system-ui, sans-serif;
  --ngt-body-font: var(--e-global-typography-text-font-family, "Source Sans 3"), system-ui, sans-serif;
  --ngt-wrap: 1180px;
  --ngt-radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--ngt-white); color: var(--ngt-text); font-family: var(--ngt-body-font); line-height: 1.6; }
img { max-width: 100%; height: auto; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ngt-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--ngt-gold); color: var(--ngt-ink); }

/* Elementor owns the width of everything inside <main>. */
.ngt-main { display: block; }
.ngt-entry { max-width: 760px; margin: 0 auto; padding: 48px 18px; }

/* ---------------------------------------------------------------- header
   The topbar scrolls away; the white bar stays. */
.ngt-header { position: sticky; top: -38px; z-index: 60; background: var(--ngt-white); box-shadow: 0 1px 12px rgba(23, 25, 28, .06); }
.admin-bar .ngt-header { top: -6px; }
@media (max-width: 782px) { .admin-bar .ngt-header { top: 8px; } }
@media (max-width: 767px) {
  .ngt-header { top: 0; }
  .admin-bar .ngt-header { top: 46px; }
}
/* Below 601px WordPress's admin bar is not fixed (it scrolls away), so a logged-in visitor's header must stick to the very top, not 46px down. */
@media (max-width: 600px) { .admin-bar .ngt-header { top: 0; } }
/* Logo size is the logo widget's Width setting (Edit Header > logo > Style), not a cap here. */
.ngs-header-logo img { height: auto; }
.ngs-header-actions .elementor-button { white-space: nowrap; }
@media (max-width: 480px) {
  .ngs-header-actions .elementor-widget-button .elementor-button { padding: 10px 11px; font-size: 13px; letter-spacing: 0; }
}

/* ---------------------------------------------------------------- menu
   Fallback header and the "NJ Gold Star Menu" widget share these rules. */
.ngt-navw { display: flex; align-items: center; justify-content: var(--ngt-nav-align, flex-end); }
.ngt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.ngt-nav a { display: block; padding: 10px 12px; color: var(--ngt-ink); text-decoration: none; border-radius: var(--ngt-radius); white-space: nowrap; }
.ngt-nav > ul > li > a { font-family: var(--ngt-head-font); }
.ngt-nav a:hover, .ngt-nav a:focus-visible { color: var(--ngt-accent); }
.ngt-nav .current-menu-item > a, .ngt-nav .current-menu-ancestor > a { color: var(--ngt-accent); }
.ngt-nav li { position: relative; }
.ngt-nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); opacity: .7;
}

/* Dropdowns: Services > trade > service page; Areas > county. */
.ngt-nav .sub-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 70;
  min-width: 240px; padding: 6px 0; margin: 0;
  background: var(--ngt-white); border-top: 3px solid var(--ngt-gold);
  box-shadow: 0 12px 28px rgba(23, 25, 28, .14);
  flex-direction: column; align-items: stretch; gap: 0;
}
.ngt-nav .sub-menu a { white-space: normal; line-height: 1.3; padding: 10px 16px; border-radius: 0; color: var(--ngt-ink); }
.ngt-nav .sub-menu a:hover, .ngt-nav .sub-menu a:focus-visible { background: var(--ngt-warm); color: var(--ngt-ink); }
.ngt-nav .sub-menu .menu-item-has-children > a::after { position: absolute; right: 14px; top: 50%; margin: -4px 0 0; transform: rotate(-45deg); }
.ngt-nav .sub-menu .sub-menu { top: -9px; left: 100%; }
.ngt-nav li:hover > .sub-menu, .ngt-nav li:focus-within > .sub-menu { display: flex; }
/* The last top-level dropdown opens leftwards so it never leaves the screen. */
.ngt-nav > ul > li:last-child > .sub-menu { left: auto; right: 0; }
.ngt-nav > ul > li:last-child > .sub-menu .sub-menu { left: auto; right: 100%; }
/* Areas We Serve: a full-width panel under the header. Counties are columns; a county with many towns
   (Bergen) spans the whole row and lists its towns in columns. The header rows are made static so the
   panel anchors to the sticky header, not to the menu item. */
.ngt-header .e-con, .ngt-header .e-con-inner, .ngt-header .elementor-widget, .ngt-header .elementor-widget-container { position: static; }
.ngt-nav li.ngt-mega { position: static; }
/* Hover bridge: the panel starts at the bottom of the header, a few pixels below the link. A strip hangs under
   the link itself (only as wide as the link) so the pointer can travel down into the panel. It must not span the
   header: a full-width strip kept this panel open over the neighbouring menu items. */
.ngt-nav li.ngt-mega > a { position: relative; }
.ngt-nav li.ngt-mega > a::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100px; } /* reaches the panel even with the taller logo header */
/* Sideways bridge: a strip along the bottom edge of the header (below the menu row, so it never covers another link),
   live only while this item is hovered. With the link-wide bridge above, the pointer can travel from "Services"
   to any column of the panel, straight or diagonally, without the panel closing. */
.ngt-nav li.ngt-mega::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; z-index: 69; }
.ngt-nav li.ngt-mega:hover::after, .ngt-nav li.ngt-mega:focus-within::after { pointer-events: auto; }
.ngt-nav .ngt-mega > .sub-menu {
  left: 0; right: 0; top: 100%; width: auto; min-width: 0; margin: 0; border-top: 3px solid var(--ngt-gold);
  padding: 22px max(20px, calc((100vw - 1180px) / 2)) 26px;
  max-height: calc(100vh - 180px); overflow-y: auto;
}
.ngt-nav li.ngt-mega:hover > .sub-menu, .ngt-nav li.ngt-mega:focus-within > .sub-menu {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 24px; align-items: start;
}
.ngt-nav .ngt-mega > .sub-menu > li { min-width: 0; }
.ngt-nav .ngt-mega > .sub-menu > li > a {
  padding: 6px 0; margin-bottom: 4px; border-bottom: 2px solid var(--ngt-gold); border-radius: 0;
  font-family: var(--ngt-head-font); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.ngt-nav .ngt-mega > .sub-menu > li > a:hover { background: transparent; }
.ngt-nav .ngt-mega .menu-item-has-children > a::after { display: none; }
.ngt-nav .ngt-mega .sub-menu .sub-menu {
  display: block; position: static; box-shadow: none; border: 0; min-width: 0; width: auto; padding: 0; background: transparent;
}
.ngt-nav .ngt-mega .sub-menu .sub-menu a { padding: 4px 0; font-size: 15px; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--ngt-body-font, inherit); } /* !important: the menu widget's own typography (id-scoped) would otherwise make towns look like county headings */
.ngt-nav .ngt-mega .sub-menu .sub-menu a:hover { background: transparent; text-decoration: underline; text-decoration-color: var(--ngt-gold); text-underline-offset: 3px; }
.ngt-nav .ngt-mega > .sub-menu > li.ngt-wide { grid-column: 1 / -1; }
.ngt-nav .ngt-mega > .sub-menu > li.ngt-wide > .sub-menu { columns: 6; column-gap: 24px; }
.ngt-nav .ngt-mega .ngt-wide .sub-menu li { break-inside: avoid; }
@media (max-width: 1240px) {
  .ngt-nav li.ngt-mega:hover > .sub-menu, .ngt-nav li.ngt-mega:focus-within > .sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ngt-nav .ngt-mega > .sub-menu > li.ngt-wide > .sub-menu { columns: 4; }
}
.ngt-navw-empty { margin: 0; font-size: 13px; }

/* Phone menu */
.ngt-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px; cursor: pointer;
  background: transparent; border: 1px solid currentColor; border-radius: var(--ngt-radius); color: var(--ngt-ink);
}
.ngt-burger span { display: block; height: 2px; background: currentColor; }
.ngt-mobnav { max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 18px 28px; background: var(--ngt-white); border-top: 1px solid var(--ngt-line); box-shadow: 0 12px 24px rgba(23, 25, 28, .12); }
.ngt-mobnav[hidden] { display: none; }
/* Open phone menu: it owns the screen. The page behind does not scroll and the fixed call bar steps aside, so the last items are never hidden. */
body.ngt-menu-open { overflow: hidden; }
body.ngt-menu-open .ngs-callbar { display: none; }
.ngt-mobnav ul { list-style: none; margin: 0; padding: 0; }
.ngt-mobnav li { position: relative; border-bottom: 1px solid var(--ngt-line); }
.ngt-mobnav li li { border-bottom: 0; }
.ngt-mobnav a { display: block; min-height: 48px; padding: 14px 52px 14px 6px; color: var(--ngt-ink); text-decoration: none; font-family: var(--ngt-head-font); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; }
.ngt-mobnav .sub-menu { display: none; padding-left: 14px; }
.ngt-mobnav li.is-open > .sub-menu { display: block; }
.ngt-mobnav .sub-menu a { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 15px; }
.ngt-mobnav .sub-menu .sub-menu a { font-weight: 400; }
.ngt-mobnav .current-menu-item > a { color: var(--ngt-accent); }
.ngt-subtoggle { position: absolute; right: 0; top: 0; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ngt-ink); }
.ngt-subtoggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
li.is-open > .ngt-subtoggle::before { transform: rotate(-135deg); margin-top: -2px; }

@media (max-width: 1240px) {
  .ngt-header .elementor-widget-ngs-nav-menu { position: static; }
}

/* The mobile panel hangs under the whole header bar. */
.ngt-header .ngs-header-row, .ngt-header .e-con-inner { position: static; }

/* ---------------------------------------------------------------- fallback header/footer (only when a template is missing) */
.ngt-headbar { max-width: var(--ngt-wrap); margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ngt-brand { color: var(--ngt-ink); text-decoration: none; font-family: var(--ngt-head-font); font-size: 20px; font-weight: 800; }
.ngt-brand img { height: 80px; width: auto; display: block; }
@media (max-width: 1024px) {
  .ngt-headbar > .ngt-nav { display: none; }
  .ngt-headbar > .ngt-burger { display: flex; }
}
.ngt-footer { background: var(--ngt-ink); color: #fff; padding: 32px 18px; text-align: center; }
.ngt-footer ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ngt-footer a { color: #fff; }

/* Footer menu list ("NJ Gold Star Menu" widget, List layout). */
.ngt-navw.ngt-navw--list { display: block; }
.ngt-fnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ngt-fnav a { display: block; color: inherit; text-decoration: none; }
.ngt-fnav a:hover, .ngt-fnav a:focus-visible { color: var(--ngt-gold); }
.ngt-site-footer .elementor-widget-text-editor p { margin: 0; }

/*
 * Elementor-vs-utility fixes. Elementor's frontend CSS loads AFTER the theme
 * and has the same weight as a one-class utility, so extra weight is needed.
 */
.elementor .elementor-widget-image.ngt-img-auto img { width: auto; max-width: 100%; }
.elementor-widget-text-editor:has(table) { max-width: 100%; overflow-x: auto; }
.elementor-widget-text-editor p:first-child { margin-top: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* 1.0.24 phone header: slides away when scrolling down, returns at the top (assets/nav.js) */
@media (max-width: 767px) {
  .ngt-header { transition: transform .25s ease; will-change: transform; }
  .ngt-header.ngt-header--away { transform: translateY(-110%); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .ngt-header { transition: none; } }

/* 1.0.25 tables on phones: each row becomes a card and every cell names its column, so nothing hides off the right edge */
@media (max-width: 767px) {
  body .ngs-table, body .ngs-post-content .wp-block-table { overflow: visible; border: 0; background: transparent; }
  body .ngs-table table, body .ngs-post-content .wp-block-table table { min-width: 0; width: 100%; display: block; }
  body .ngs-table thead, body .ngs-post-content .wp-block-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body .ngs-table tbody, body .ngs-post-content .wp-block-table tbody { display: block; }
  body .ngs-table tr, body .ngs-post-content .wp-block-table tr { display: block; margin: 0 0 12px; background: #fff; border: 1px solid var(--ngs-line); border-radius: 4px; overflow: hidden; }
  body .ngs-table td, body .ngs-post-content .wp-block-table td { display: block; padding: 10px 16px; border: 0; border-top: 1px solid var(--ngs-line); }
  body .ngs-table td:first-child, body .ngs-post-content .wp-block-table td:first-child { border-top: 0; background: var(--ngs-charcoal); color: #fff; font-family: var(--ngs-head); font-weight: 700; }
  body .ngs-table td[data-label]:not(:first-child):not([data-label=""])::before, body .ngs-post-content .wp-block-table td[data-label]:not(:first-child):not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--ngs-head); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ngs-fine); }
  body .ngs-table tbody tr td:first-child { background: var(--ngs-charcoal); color: #fff; } /* beats the older odd-row transparent rule */
  body .ngs-table--compare td:nth-child(2) { color: inherit; }
}