/*
Theme Name: NexGen eHub
Theme URI: https://nexgenehub.co.uk
Author: NexGen eHub Limited
Author URI: https://nexgenehub.co.uk
Description: NexGen eHub — a premium, fully block-editable (Full Site Editing) WordPress theme for UK-managed business support & operations brands. Wide "Ocean Deep" layout, native Gutenberg blocks, no page builder required.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nexgen-ehub
Tags: full-site-editing, block-patterns, business, portfolio, wide-blocks, custom-colors, custom-menu, blog
*/

/* =========================================================
   NexGen eHub — supplemental styles (design system extras).
   All colours/typography come from theme.json presets.
   ========================================================= */

:root {
  --ng-deep: linear-gradient(155deg, #0f2138 0%, #1c4257 55%, #2d7f8f 100%);
  --ng-aqua: linear-gradient(135deg, #2d8a9e 0%, #5cbdb9 100%);
}

/* Slightly wider, more generous rhythm */
body { -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* Sticky, glassy header */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: rgba(246, 249, 251, 0.78);
  border-bottom: 1px solid rgba(219, 227, 236, 0.9);
}

/* Navigation pills */
.wp-block-navigation .wp-block-navigation-item__content {
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
  background: #eaf1f5;
  color: #0f2138;
}

/* Brand logo badge */
.ng-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 0.85rem;
  background: var(--ng-aqua); color: #fff; font-size: 1.15rem;
  box-shadow: 0 10px 24px -12px rgba(45,138,158,.7);
}

/* Decorative grid on dark sections */
.ng-grid { position: relative; }
.ng-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}
.ng-grid > * { position: relative; z-index: 1; }

/* Cards */
.ng-card {
  border: 1px solid #dbe3ec;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 12px 34px -22px rgba(22,35,61,.35);
  transition: transform .22s ease, box-shadow .22s ease;
  height: 100%;
}
.ng-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -30px rgba(22,35,61,.45); }

.ng-card-dark {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 1.25rem;
  height: 100%;
}

/* Icon chips */
.ng-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 0.85rem;
  background: #eaf1f5; color: #2d8a9e; font-size: 1.35rem;
}
.ng-chip-aqua { background: var(--ng-aqua); color: #fff; }

/* Pills */
.ng-pill {
  border: 1px solid #dbe3ec; background: #fff; border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .9rem; font-weight: 500;
  box-shadow: 0 8px 22px -16px rgba(22,35,61,.35);
  display: inline-block;
}
.ng-eyebrow {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: #2d8a9e;
}

/* Marquee (pure CSS, no JS) */
.ng-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ng-marquee__track { display: inline-flex; gap: 2.75rem; white-space: nowrap; animation: ng-scroll 30s linear infinite; padding-right: 2.75rem; }
.ng-marquee:hover .ng-marquee__track { animation-play-state: paused; }
.ng-marquee span { font-size: .95rem; font-weight: 500; opacity: .65; }
@keyframes ng-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Wide, rounded feature buttons */
.wp-block-button__link { font-weight: 600; letter-spacing: .01em; }
.is-style-ng-glow .wp-block-button__link {
  background: var(--ng-aqua); color: #fff; border: none;
  box-shadow: 0 0 0 1px rgba(92,189,185,.3), 0 18px 44px -18px rgba(45,138,158,.7);
}
.is-style-ng-glow .wp-block-button__link:hover { filter: brightness(1.05); }
.is-style-ng-outline .wp-block-button__link {
  background: transparent; color: currentColor; border: 1px solid rgba(255,255,255,.35);
}

/* Section number badge */
.ng-step-no { font-family: inherit; font-weight: 800; color: #2d8a9e; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }

/* Contact form (shortcode output) */
.ng-form { display: grid; gap: 1rem; }
.ng-form .ng-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ng-form .ng-row { grid-template-columns: 1fr 1fr; } }
.ng-form label { font-size: .85rem; font-weight: 600; display: block; margin-bottom: .35rem; }
.ng-form input, .ng-form select, .ng-form textarea {
  width: 100%; border: 1px solid #dbe3ec; border-radius: .7rem;
  padding: .7rem .85rem; font: inherit; background: #fff; color: #16233d;
}
.ng-form input:focus, .ng-form select:focus, .ng-form textarea:focus {
  outline: none; border-color: #2d8a9e; box-shadow: 0 0 0 3px rgba(45,138,158,.15);
}
.ng-form button {
  background: #1b3a5b; color: #fff; border: none; border-radius: 999px;
  padding: .85rem 1.6rem; font-weight: 600; cursor: pointer; width: 100%;
}
.ng-form button:hover { background: #16233d; }
.ng-form-note { font-size: .8rem; color: #5b6b82; }
.ng-form-success {
  border: 1px solid #cdeae4; background: #f0faf8; color: #16233d;
  border-radius: 1rem; padding: 1.25rem 1.5rem;
}

/* Footer link hover */
.wp-block-site-footer a:hover { opacity: .8; }

/* =========================================================
   v4 additions — industries, FAQ, footer lists, trust badges
   ========================================================= */

/* Industries pill cloud */
.ng-tags { gap: .75rem; }
.ng-tags .ng-pill { margin: 0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ng-tags .ng-pill:hover { transform: translateY(-2px); border-color: #5cbdb9; box-shadow: 0 14px 30px -18px rgba(45,138,158,.55); }

/* FAQ accordion (native details block) */
.ng-faq {
  border: 1px solid #dbe3ec; background: #fff; border-radius: 1rem;
  padding: 1.15rem 1.35rem; margin-bottom: .9rem;
  box-shadow: 0 10px 30px -24px rgba(22,35,61,.35);
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.ng-faq summary {
  cursor: pointer; font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 1.05rem; color: #16233d; list-style: none; position: relative;
  padding-right: 2rem;
}
.ng-faq summary::-webkit-details-marker { display: none; }
.ng-faq summary::after {
  content: "+"; position: absolute; right: 0; top: -.1rem;
  font-size: 1.4rem; line-height: 1; color: #2d8a9e; transition: transform .2s ease;
}
.ng-faq[open] summary::after { content: "–"; }
.ng-faq[open] { border-color: #cfe0e6; }
.ng-faq p { margin-top: .85rem; }

/* Footer link lists */
.ng-footer-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.ng-footer-list li { color: #c8d6e5; }
.ng-footer-list a { color: #c8d6e5; }
.ng-footer-list a:hover { color: #ffffff; }

/* Footer trust badges */
.ng-badges .wp-block-column {
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  border-radius: .85rem; padding: .8rem 1rem;
}
.ng-trust { margin: 0; color: #d7e2ee; font-weight: 500; }

/* Contact form error state */
.ng-form-error { border-color: #f0c9c9; background: #fdf3f3; }