/*
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.2
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; }
}
.ngs-header-logo img { height: auto; max-height: 52px; width: 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; }
  .ngs-header-logo img { max-height: 40px; }
}

/* ---------------------------------------------------------------- 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: 26px; }
.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 - 150px); 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 - 120px); overflow-y: auto; padding: 8px 18px 22px; 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; }
.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: 1024px) {
  .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: 48px; 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; }