/* =========================================================
   Hang Gang Local SEO Engine — front-end styles (.hgls- prefix)
   Industrial-professional design system: steel, amber, precision.
   Mobile-first, no framework, no external fonts.

   DEFENSIVE OVERRIDE STRATEGY
   -----------------------------------------------------------
   Themes with heavy global typography (script/serif display
   fonts, uppercase, low-contrast colors meant for a dark hero
   image) will otherwise leak into this plugin's content, since
   WordPress renders it inside the theme's normal content area.
   Every typography-critical rule below is intentionally written
   at higher specificity (chained with html body) and backed by
   !important on the properties that themes most commonly hijack:
   font-family, font-style, font-weight, text-transform, color,
   letter-spacing. This keeps Hang Gang pages legible and on-brand
   regardless of which theme is active, without touching theme files.
   ========================================================= */

html body .hgls-page{
  --hgls-ink:#14171B;
  --hgls-steel:#4B5563;
  --hgls-steel-light:#8A93A0;
  --hgls-paper:#F6F6F4;
  --hgls-panel:#FFFFFF;
  --hgls-line:#E2E4E8;
  --hgls-amber:#C1741A;
  --hgls-amber-dark:#9C5D14;
  --hgls-dark-panel:#1D2024;
  --hgls-whatsapp:#1F8A45;
  --hgls-radius:6px;
  --hgls-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hgls-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  max-width:1040px;margin:0 auto;padding:28px 20px 64px;
  font-family:var(--hgls-font) !important;
  color:var(--hgls-ink) !important;
  line-height:1.7 !important;
  background:var(--hgls-paper);
  text-align:left !important;
}

/* Blanket reset — neutralise theme defaults for every element inside
   the plugin's content before the specific rules below re-apply the
   intended styling. This is what stops a script h1 font or uppercase
   h2 transform from a theme like Enfold leaking through. */
html body .hgls-page,
html body .hgls-page *{
  font-style:normal !important;
  text-transform:none !important;
  text-shadow:none !important;
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Typography ---------- */
html body .hgls-page h1{
  font-family:var(--hgls-font) !important;
  font-size:clamp(1.8rem,3.2vw,2.5rem) !important;
  line-height:1.12 !important;
  margin:0 0 16px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em !important;
  color:var(--hgls-ink) !important;
  text-align:left !important;
}
html body .hgls-page h2{
  font-family:var(--hgls-font) !important;
  font-size:1.4rem !important;
  margin:44px 0 16px !important;
  font-weight:800 !important;
  letter-spacing:-0.005em !important;
  color:var(--hgls-ink) !important;
  padding-bottom:10px;
  border-bottom:2px solid var(--hgls-line);
  text-align:left !important;
}
html body .hgls-page h3{
  font-family:var(--hgls-font) !important;
  font-size:1.05rem !important;
  margin:20px 0 8px !important;
  font-weight:700 !important;
  color:var(--hgls-ink) !important;
  text-align:left !important;
}
html body .hgls-page p{
  font-family:var(--hgls-font) !important;
  margin:0 0 15px !important;
  font-size:1.01rem !important;
  color:#26292E !important;
  line-height:1.7 !important;
}
html body .hgls-page ul,
html body .hgls-page ol{margin:0 0 18px;padding-left:22px}
html body .hgls-page li{margin-bottom:8px;color:#26292E !important;font-size:1rem !important}
html body .hgls-page a{color:var(--hgls-amber-dark) !important;text-decoration:underline}
html body .hgls-page a:hover{color:var(--hgls-ink) !important}
html body .hgls-page strong{color:var(--hgls-ink) !important;font-weight:700 !important}

/* Eyebrow label — encodes real page category, sits above H1.
   This is the ONE place inside .hgls-page that intentionally uses
   uppercase, so it re-applies text-transform after the blanket reset. */
html body .hgls-page .hgls-eyebrow{
  display:inline-block;
  font-size:.72rem !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--hgls-amber-dark) !important;
  margin:0 0 12px;
}

/* ---------- Breadcrumbs ---------- */
html body .hgls-breadcrumbs{
  font-size:.8rem !important;
  color:var(--hgls-steel-light) !important;
  margin-bottom:22px;
  letter-spacing:.01em;
}
html body .hgls-breadcrumbs a{color:var(--hgls-steel) !important;text-decoration:none !important;font-weight:600 !important}
html body .hgls-breadcrumbs a:hover{color:var(--hgls-amber-dark) !important}
html body .hgls-breadcrumbs .sep{margin:0 8px;color:var(--hgls-line) !important}

/* ---------- Lede ---------- */
html body .hgls-page .hgls-lede{
  font-family:var(--hgls-font) !important;
  font-size:1.12rem !important;
  color:var(--hgls-steel) !important;
  line-height:1.65 !important;
  padding:0 0 24px;
  margin:0 0 8px !important;
  border-bottom:1px solid var(--hgls-line);
  font-weight:400 !important;
}

/* ---------- Signature element: shutter-slat divider ---------- */
.hgls-slat-divider{
  height:8px;
  margin:40px 0;
  border-radius:2px;
  background:repeating-linear-gradient(
    -45deg,
    var(--hgls-line) 0px, var(--hgls-line) 3px,
    transparent 3px, transparent 9px
  );
  opacity:.9;
}

/* ---------- CTA band ---------- */
html body .hgls-cta-band{
  position:relative;
  overflow:hidden;
  background:var(--hgls-dark-panel) !important;
  color:#fff !important;
  border-radius:var(--hgls-radius);
  padding:32px 28px;
  margin:36px 0;
  text-align:center !important;
}
.hgls-cta-band::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 2px,
    transparent 2px, transparent 14px
  );
  pointer-events:none;
}
html body .hgls-cta-band p{
  position:relative;
  color:#F1F1EF !important;
  margin:0 0 18px !important;
  font-size:1.15rem !important;
  font-weight:700 !important;
  letter-spacing:-0.005em !important;
}
html body .hgls-cta-btn{
  position:relative;
  display:inline-block;
  background:var(--hgls-amber) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-decoration:none !important;
  padding:13px 28px;
  border-radius:4px;
  font-size:.98rem !important;
  margin:4px 6px;
  letter-spacing:.01em;
  transition:background .15s ease, transform .15s ease;
}
html body .hgls-cta-btn:hover{background:var(--hgls-amber-dark) !important;transform:translateY(-1px)}
html body .hgls-cta-btn.hgls-wa{background:var(--hgls-whatsapp) !important;color:#fff !important}
html body .hgls-cta-btn.hgls-wa:hover{background:#186f38 !important}
html body .hgls-cta-phone{
  position:relative;
  display:block;margin-top:14px;
  color:#B8BCC2 !important;text-decoration:none !important;font-size:.88rem !important;
}
html body .hgls-cta-phone:hover{color:#fff !important;text-decoration:underline !important}

/* ---------- NAP "spec sheet" card ---------- */
html body .hgls-nap{
  background:var(--hgls-panel) !important;
  border:1px solid var(--hgls-line);
  border-top:3px solid var(--hgls-amber);
  border-radius:var(--hgls-radius);
  padding:20px 22px;
  margin:28px 0;
}
html body .hgls-nap h3{
  margin:0 0 14px !important;
  font-size:.75rem !important;
  font-weight:800 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--hgls-steel-light) !important;
}
html body .hgls-nap address{font-style:normal !important}
.hgls-nap-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px dashed var(--hgls-line);
  gap:16px;flex-wrap:wrap;
}
.hgls-nap-row:last-child{border-bottom:none;padding-bottom:0}
html body .hgls-nap-label{font-size:.78rem !important;color:var(--hgls-steel-light) !important;font-weight:600 !important;letter-spacing:.02em}
html body .hgls-nap-value{font-family:var(--hgls-mono) !important;font-size:.92rem !important;color:var(--hgls-ink) !important;text-align:right !important}
html body .hgls-nap-value a{color:var(--hgls-ink) !important;text-decoration:none !important;font-weight:600 !important}
html body .hgls-nap-value a:hover{color:var(--hgls-amber-dark) !important}

/* ---------- Service / area card grids ---------- */
.hgls-service-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:20px 0 28px}
@media(min-width:560px){.hgls-service-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.hgls-service-grid{grid-template-columns:repeat(3,1fr)}}
html body .hgls-service-card{
  position:relative;
  border:1px solid var(--hgls-line);
  border-top:3px solid var(--hgls-steel-light);
  border-radius:var(--hgls-radius);
  padding:16px 18px;
  background:var(--hgls-panel) !important;
  transition:box-shadow .15s ease, border-color .15s ease;
}
html body .hgls-service-card:hover{
  box-shadow:0 6px 18px rgba(20,23,27,.08);
  border-top-color:var(--hgls-amber);
}
html body .hgls-service-card a{color:var(--hgls-ink) !important;text-decoration:none !important;font-weight:700 !important;font-size:.95rem !important;line-height:1.4 !important}
html body .hgls-service-card a:hover{color:var(--hgls-amber-dark) !important}

.hgls-area-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 30px}
@media(min-width:560px){.hgls-area-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.hgls-area-grid{grid-template-columns:repeat(4,1fr)}}
html body .hgls-area-card{
  border:1px solid var(--hgls-line);
  border-radius:var(--hgls-radius);
  padding:14px 10px;
  background:var(--hgls-panel) !important;
  text-align:center !important;
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
html body .hgls-area-card:hover{
  box-shadow:0 6px 18px rgba(20,23,27,.08);
  border-color:var(--hgls-amber);
  transform:translateY(-1px);
}
html body .hgls-area-card a{color:var(--hgls-ink) !important;text-decoration:none !important;font-weight:700 !important;font-size:.9rem !important}
html body .hgls-area-card a:hover{color:var(--hgls-amber-dark) !important}

/* ---------- FAQ ---------- */
.hgls-faq{margin:18px 0 8px}
html body .hgls-faq-item{
  border-left:3px solid var(--hgls-line);
  padding:6px 0 20px 18px;
  margin-bottom:4px;
  transition:border-color .15s ease;
}
html body .hgls-faq-item:hover{border-left-color:var(--hgls-amber)}
html body .hgls-faq-item h3{margin:0 0 8px !important;font-size:1.02rem !important;color:var(--hgls-ink) !important}
html body .hgls-faq-item p{margin:0 !important;color:var(--hgls-steel) !important;font-size:.97rem !important}

/* ---------- Internal links panel ---------- */
html body .hgls-internal-links{
  background:var(--hgls-panel) !important;
  border:1px solid var(--hgls-line);
  border-radius:var(--hgls-radius);
  padding:20px 22px;
  margin:32px 0;
}
html body .hgls-internal-links h3{
  margin:0 0 14px !important;
  font-size:.75rem !important;font-weight:800 !important;letter-spacing:.1em !important;text-transform:uppercase !important;
  color:var(--hgls-steel-light) !important;
}
html body .hgls-internal-links ul{columns:2;padding-left:16px;margin:0}
@media(max-width:600px){html body .hgls-internal-links ul{columns:1}}
html body .hgls-internal-links li{margin-bottom:8px !important;font-size:.93rem !important}
html body .hgls-internal-links a{color:var(--hgls-ink) !important;text-decoration:none !important;font-weight:600 !important}
html body .hgls-internal-links a:hover{color:var(--hgls-amber-dark) !important;text-decoration:underline !important}

/* ---------- Numbered process list (real sequence — numbering justified) ---------- */
html body .hgls-page ol{counter-reset:hgls-step;padding-left:0;list-style:none !important}
html body .hgls-page ol > li{
  counter-increment:hgls-step;
  position:relative;
  padding-left:44px;
  margin-bottom:14px !important;
  min-height:28px;
  list-style:none !important;
}
html body .hgls-page ol > li::before{
  content:counter(hgls-step,decimal-leading-zero);
  position:absolute;left:0;top:-1px;
  font-family:var(--hgls-mono) !important;
  font-size:.78rem !important;font-weight:700 !important;
  color:#fff !important;background:var(--hgls-ink);
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Sticky mobile CTA bar ---------- */
html body .hgls-sticky-bar{position:fixed;left:0;right:0;bottom:0;display:none;z-index:9999;
  background:var(--hgls-dark-panel,#1D2024);box-shadow:0 -4px 16px rgba(0,0,0,.28)}
.hgls-sticky-bar .hgls-sticky-inner{display:flex}
html body .hgls-sticky-bar a{flex:1;text-align:center;padding:13px 4px;color:#fff !important;font-weight:700 !important;
  font-size:.8rem !important;letter-spacing:.01em;text-decoration:none !important;border-right:1px solid rgba(255,255,255,.12)}
.hgls-sticky-bar a:last-child{border-right:none}
.hgls-sticky-bar a.hgls-sticky-call{background:#C1741A}
.hgls-sticky-bar a.hgls-sticky-wa{background:#1F8A45}
.hgls-sticky-bar a.hgls-sticky-quote{background:#2B2E33}
@media(max-width:782px){
  .hgls-sticky-bar{display:block}
  body.hgls-has-sticky{padding-bottom:54px}
}

/* ---------- Accessibility ---------- */
html body .hgls-page a:focus-visible,
html body .hgls-cta-btn:focus-visible,
html body .hgls-service-card a:focus-visible,
html body .hgls-area-card a:focus-visible{
  outline:2px solid var(--hgls-amber);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .hgls-cta-btn,.hgls-service-card,.hgls-area-card{transition:none}
}

/* =========================================================
   Admin review dashboard (wp-admin) — light professional polish
   ========================================================= */
.hgls-admin-wrap h1{font-weight:800;letter-spacing:-0.01em}
.hgls-admin-wrap table.widefat{border-radius:6px;overflow:hidden;border-color:#E2E4E8}
.hgls-admin-wrap table.widefat td,.hgls-admin-wrap table.widefat th{vertical-align:middle;padding:10px 12px}
.hgls-admin-wrap table.widefat th{background:#1D2024;color:#fff;font-weight:700}
.hgls-status-draft{color:#9C5D14;font-weight:700}
.hgls-status-published{color:#1F7A44;font-weight:700}
.hgls-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;font-weight:700;background:#EEE;color:#555}