/*
Theme Name:   Divi Child - NNG Modern
Theme URI:    https://nngdigital.com.au/
Description:  Modern dark/immersive design layer for Neural Networks Group. Adds a procedural WebGL hero, glassmorphic surfaces and motion, without altering any Divi content.
Author:       NNG
Template:     Divi
Version:      1.1.0
Text Domain:  divi-child-nng
*/

/* ==========================================================================
   Tokens.
   Every colour here is the site's existing Divi global palette:
   primary #dd0606, secondary #dd901c, heading #0e0c19, body #3c3a47.
   Nothing new is introduced — the dark theme just rebalances them.
   ========================================================================== */
:root {
  --nng-void:      #0e0c19;
  --nng-slate:     #3c3a47;
  --nng-ink:       #ffffff;

  --nng-red:       #dd0606;
  --nng-red-deep:  #a80505;
  --nng-amber:     #dd901c;

  --nng-surface:   rgba(255, 255, 255, .055);
  --nng-surface-2: rgba(255, 255, 255, .02);
  --nng-line:      rgba(255, 255, 255, .10);

  --nng-grad:      linear-gradient(120deg, var(--nng-red), var(--nng-red-deep));
  --nng-glow-red:  rgba(221, 6, 6, .55);
  --nng-glow-amb:  rgba(221, 144, 28, .5);

  --nng-text:      rgba(255, 255, 255, .92);
  --nng-muted:     rgba(255, 255, 255, .62);

  --nng-radius:    18px;
  --nng-ease:      cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
body.nng-modern {
  background: var(--nng-void);
  color: var(--nng-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.nng-modern #page-container,
body.nng-modern #et-main-area,
body.nng-modern .et_pb_section,
body.nng-modern .et_pb_row {
  background-color: transparent;
}

body.nng-modern .et_pb_bg_layout_light,
body.nng-modern .et_pb_bg_layout_light h1,
body.nng-modern .et_pb_bg_layout_light h2,
body.nng-modern .et_pb_bg_layout_light h3,
body.nng-modern .et_pb_bg_layout_light h4,
body.nng-modern .et_pb_bg_layout_light p,
body.nng-modern .et_pb_bg_layout_light li,
body.nng-modern .et_pb_text,
body.nng-modern .et_pb_text_inner {
  color: var(--nng-text);
}

body.nng-modern .et_pb_section {
  position: relative;
  isolation: isolate;
}

/* Ambient wash tying the long dark page together. */
body.nng-modern .et_pb_section_1::before,
body.nng-modern .et_pb_section_3::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(48% 60% at 18% 0%,  rgba(221, 6, 6, .16), transparent 70%),
    radial-gradient(42% 55% at 85% 12%, rgba(221, 144, 28, .12), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

body.nng-modern .et_pb_section + .et_pb_section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nng-line), transparent);
  pointer-events: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */
body.nng-modern h1,
body.nng-modern h2,
body.nng-modern h3 {
  letter-spacing: -.03em;
  line-height: 1.06;
  font-weight: 700;
}

body.nng-modern h1 { font-size: clamp(2.6rem, 6.4vw, 5.1rem); }
body.nng-modern h2 { font-size: clamp(2rem, 4vw, 3.25rem); }

body.nng-modern .et_pb_text p,
body.nng-modern .et_pb_blurb_description {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.72;
  color: var(--nng-muted);
}

body.nng-modern a {
  color: var(--nng-amber);
}

/* Hero headline: white into brand amber keeps contrast high on near-black. */
body.nng-modern .et_pb_section_0 h1 {
  background: linear-gradient(104deg, #fff 8%, #ffd9ad 52%, var(--nng-amber) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Header
   Divi emits `.et_pb_section_0_tb_header{background-color:#FFFFFF!important}`,
   so these overrides need both extra specificity and !important to land.
   ========================================================================== */
body.nng-modern .et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header,
body.nng-modern .et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header.et_pb_sticky,
body.nng-modern .et_pb_section_0_tb_header {
  background-color: rgba(14, 12, 25, .82) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--nng-line);
}

/* Menu links and the search glyph sit on white by default. */
body.nng-modern .et_pb_section_0_tb_header .et-menu a,
body.nng-modern .et_pb_section_0_tb_header .et_pb_menu a,
body.nng-modern .et_pb_menu_0_tb_header .et-menu a,
body.nng-modern .et_pb_section_0_tb_header .et_pb_module_header,
body.nng-modern .et_pb_section_0_tb_header h4 {
  color: var(--nng-text) !important;
  transition: color .25s var(--nng-ease);
}

body.nng-modern .et_pb_section_0_tb_header .et-menu a:hover,
body.nng-modern .et_pb_menu_0_tb_header .et-menu a:hover {
  color: var(--nng-amber) !important;
  opacity: 1;
}

body.nng-modern .et_pb_section_0_tb_header .et_pb_menu__icon,
body.nng-modern .et_pb_section_0_tb_header .et_pb_menu__search-button {
  color: var(--nng-amber) !important;
}

/* Current page marker, previously indicated only by the red link colour. */
body.nng-modern .et_pb_section_0_tb_header .current-menu-item > a {
  color: var(--nng-amber) !important;
  position: relative;
}

body.nng-modern .et_pb_section_0_tb_header .current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--nng-grad);
}

/* The brand-red band and CTA block: keep the colour, lose the flat slab. */
body.nng-modern .et_pb_row_0_tb_header {
  background: var(--nng-grad) !important;
  box-shadow: -30vw 0 0 0 var(--nng-red) !important;
}

/* This column is empty in the current header layout, so Divi's brand-red fill
   rendered as a floating slab with nothing in it. Left transparent; if content
   is added later it simply sits on the header's glass. */
body.nng-modern .et_pb_column_3_tb_header {
  background: none !important;
  box-shadow: none !important;
}

body.nng-modern .et_pb_row_0_tb_header .et_pb_module_header,
body.nng-modern .et_pb_column_3_tb_header,
body.nng-modern .et_pb_column_3_tb_header a {
  color: #fff !important;
}

/* ==========================================================================
   Hero — canvas injected by nng-hero.js
   ========================================================================== */
body.nng-modern .et_pb_section_0 {
  background-image: none !important;
  background-color: var(--nng-void) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.nng-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.nng-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 46%, transparent 0%, rgba(14, 12, 25, .5) 74%, var(--nng-void) 100%),
    linear-gradient(180deg, rgba(14, 12, 25, .3) 0%, transparent 26%, rgba(14, 12, 25, .8) 100%);
}

body.nng-modern .et_pb_section_0 .et_pb_row {
  position: relative;
  z-index: 2;
}

body.nng-no-webgl .et_pb_section_0 {
  background-image:
    radial-gradient(46% 54% at 26% 32%, rgba(221, 6, 6, .3), transparent 70%),
    radial-gradient(44% 52% at 76% 62%, rgba(221, 144, 28, .22), transparent 70%) !important;
}

/* ==========================================================================
   Buttons — white on deep red holds ~5.9:1 contrast.
   ========================================================================== */
body.nng-modern .et_pb_button,
body.nng-modern .et_pb_contact_submit {
  position: relative;
  border: 0 !important;
  border-radius: 999px !important;
  padding: .92em 2.1em !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--nng-grad) !important;
  box-shadow: 0 10px 30px -12px var(--nng-glow-red);
  transition: transform .3s var(--nng-ease), box-shadow .3s var(--nng-ease), filter .3s var(--nng-ease);
}

body.nng-modern .et_pb_button:hover,
body.nng-modern .et_pb_contact_submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 18px 44px -14px var(--nng-glow-amb);
}

body.nng-modern .et_pb_button::after { display: none !important; }

/* ==========================================================================
   Glass surfaces
   ========================================================================== */
body.nng-modern .et_pb_blurb {
  padding: 2.1rem 1.7rem;
  border-radius: var(--nng-radius);
  background: linear-gradient(180deg, var(--nng-surface), var(--nng-surface-2));
  border: 1px solid var(--nng-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 100%;
  transition: transform .45s var(--nng-ease), border-color .45s var(--nng-ease), box-shadow .45s var(--nng-ease);
}

body.nng-modern .et_pb_blurb:hover {
  transform: translateY(-8px);
  border-color: rgba(221, 144, 28, .55);
  box-shadow: 0 26px 60px -28px var(--nng-glow-amb);
}

body.nng-modern .et_pb_main_blurb_image { margin-bottom: 1.15rem; }

body.nng-modern .et_pb_main_blurb_image img,
body.nng-modern .et_pb_image_wrap img { border-radius: 14px; }

body.nng-modern .et_pb_section_2 .et_pb_image_wrap {
  display: block;
  border-radius: var(--nng-radius);
  overflow: hidden;
  border: 1px solid var(--nng-line);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .7s var(--nng-ease);
}

body.nng-modern .et_pb_section_2 .et_pb_image_wrap:hover {
  transform: perspective(1400px) rotateY(0) rotateX(0);
}

/* ==========================================================================
   Contact form
   ========================================================================== */
body.nng-modern .et_pb_contact_field .input,
body.nng-modern .et_pb_contact_field textarea,
body.nng-modern .et_pb_contact_field input[type="text"],
body.nng-modern .et_pb_contact_field input[type="email"] {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid var(--nng-line) !important;
  border-radius: 12px !important;
  color: var(--nng-text) !important;
  padding: 1rem 1.1rem !important;
  transition: border-color .3s var(--nng-ease), box-shadow .3s var(--nng-ease);
}

body.nng-modern .et_pb_contact_field .input:focus,
body.nng-modern .et_pb_contact_field textarea:focus {
  outline: none !important;
  border-color: rgba(221, 144, 28, .85) !important;
  box-shadow: 0 0 0 4px rgba(221, 144, 28, .16) !important;
}

body.nng-modern .et_pb_contact_field ::placeholder { color: rgba(255, 255, 255, .38); }

/* ==========================================================================
   Call to action
   ========================================================================== */
body.nng-modern .et_pb_section_4 .et_pb_row {
  padding: 3.4rem 2rem;
  border-radius: 26px;
  border: 1px solid var(--nng-line);
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(221, 6, 6, .2), transparent 68%),
    linear-gradient(180deg, var(--nng-surface), var(--nng-surface-2));
  box-shadow: 0 40px 100px -60px var(--nng-glow-red);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
body.nng-modern .nng-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--nng-ease), transform .85s var(--nng-ease);
  will-change: opacity, transform;
}

body.nng-modern .nng-reveal.nng-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
body.nng-modern .et_pb_section_0_tb_footer {
  border-top: 1px solid var(--nng-line);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
}

/* ==========================================================================
   Divi module overrides.

   Divi generates per-module CSS with !important — e.g.
   `.et_pb_section_1{background-image:linear-gradient(180deg,red 80%,#fff 80% 100%)!important}`
   which paints the Services and Contact bands solid red with a white strip.
   None of those generated rules use an ID, so prefixing with #page-container
   wins on specificity without needing to chase each individual rule.
   ========================================================================== */

/* Strip the solid colour blocks so the dark theme reads through. */
body.nng-modern #page-container .et_pb_section.et_pb_section_1,
body.nng-modern #page-container .et_pb_section.et_pb_section_2,
body.nng-modern #page-container .et_pb_section.et_pb_section_3,
body.nng-modern #page-container .et_pb_section.et_pb_section_4 {
  background-image: none !important;
  background-color: transparent !important;
}

/* Service columns become glass cards instead of solid white slabs.
   Scoped to the 1/3 columns so the section heading above them is not boxed. */
body.nng-modern #page-container .et_pb_section_1 .et_pb_row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

body.nng-modern #page-container .et_pb_section_1 .et_pb_column_1_3 {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, var(--nng-surface), var(--nng-surface-2)) !important;
  border: 1px solid var(--nng-line);
  border-radius: var(--nng-radius);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .9) !important;
  padding: 2rem 1.6rem !important;
  transition: transform .45s var(--nng-ease), border-color .45s var(--nng-ease), box-shadow .45s var(--nng-ease);

  /* Divi pins these columns to a fixed height with overflow:hidden, which
     sliced the "Learn More" buttons in half. Let them size to content and
     stretch as flex items so the three cards still finish level. */
  height: auto !important;
  overflow: visible !important;
  float: none !important;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Push the button to the card foot so all three line up. */
body.nng-modern #page-container .et_pb_section_1 .et_pb_column_1_3 .et_pb_blurb {
  flex: 1 1 auto;
}

body.nng-modern #page-container .et_pb_section_1 .et_pb_column_1_3 .et_pb_button_module_wrapper {
  margin-top: auto;
  padding-top: 1.4rem;
}

body.nng-modern #page-container .et_pb_section_1 .et_pb_column_1_3:hover {
  transform: translateY(-8px);
  border-color: rgba(221, 144, 28, .55);
  box-shadow: 0 30px 70px -30px var(--nng-glow-amb) !important;
}

/* Links inside the dark bands: brand red only reaches ~3.3:1 on near-black,
   so use the amber for text links and keep red for solid fills. */
body.nng-modern #page-container .et_pb_section_3 a,
body.nng-modern #page-container .et_pb_section_2 a,
body.nng-modern #page-container .et_pb_blurb_description a {
  color: var(--nng-amber) !important;
}


/* The blurb itself is now the card's contents, not the card. */
body.nng-modern #page-container .et_pb_section_1 .et_pb_blurb {
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  box-shadow: none;
}

body.nng-modern #page-container .et_pb_section_1 .et_pb_blurb:hover {
  transform: none;
  box-shadow: none;
}

/* Any remaining white column backgrounds elsewhere on the page. */
body.nng-modern #page-container .et_pb_section_2 .et_pb_column,
body.nng-modern #page-container .et_pb_section_3 .et_pb_column,
body.nng-modern #page-container .et_pb_section_4 .et_pb_column {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Contact: the form sat red-on-red and was effectively unreadable. */
body.nng-modern #page-container .et_pb_section_3 .et_pb_contact_field,
body.nng-modern #page-container .et_pb_section_3 .et_pb_contact_field_options_wrapper {
  background-color: transparent !important;
}

body.nng-modern #page-container .et_pb_contact_field .input,
body.nng-modern #page-container .et_pb_contact_field textarea,
body.nng-modern #page-container .et_pb_contact_field input[type="text"],
body.nng-modern #page-container .et_pb_contact_field input[type="email"] {
  background-color: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--nng-line) !important;
  color: var(--nng-text) !important;
}

body.nng-modern #page-container .et_pb_section_3 h1,
body.nng-modern #page-container .et_pb_section_3 h2,
body.nng-modern #page-container .et_pb_section_3 h4,
body.nng-modern #page-container .et_pb_section_3 p,
body.nng-modern #page-container .et_pb_section_3 .et_pb_text_inner {
  color: var(--nng-text) !important;
}

/* Address / email / phone labels were brand-red on brand-red. */
body.nng-modern #page-container .et_pb_section_3 strong,
body.nng-modern #page-container .et_pb_section_3 b {
  color: var(--nng-amber) !important;
}

/* Call to action: amber slab becomes a dark panel with an amber glow. */
body.nng-modern #page-container .et_pb_section_4 .et_pb_row {
  background-image:
    radial-gradient(70% 130% at 50% 0%, rgba(221, 144, 28, .22), transparent 68%),
    linear-gradient(180deg, var(--nng-surface), var(--nng-surface-2)) !important;
  background-color: transparent !important;
  box-shadow: 0 40px 100px -60px var(--nng-glow-amb);
}

body.nng-modern #page-container .et_pb_section_4 h2,
body.nng-modern #page-container .et_pb_section_4 p,
body.nng-modern #page-container .et_pb_section_4 .et_pb_text_inner {
  color: var(--nng-text) !important;
}

/* Buttons carry Divi's own !important brand fill; restate ours above it.
   The promo button needs the extra class in the selector: Divi colours its
   label brand-red, which was invisible against the brand-red fill. */
body.nng-modern #page-container .et_pb_section .et_pb_button,
body.nng-modern #page-container .et_pb_section .et_pb_contact_submit,
body.nng-modern #page-container .et_pb_section a.et_pb_button,
body.nng-modern #page-container .et_pb_section a.et_pb_button.et_pb_promo_button {
  background-color: transparent !important;
  background-image: var(--nng-grad) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* Module headers inherit the dark heading colour (#0e0c19), which disappears
   on the dark cards. */
body.nng-modern #page-container .et_pb_blurb .et_pb_module_header,
body.nng-modern #page-container .et_pb_blurb .et_pb_module_header a,
body.nng-modern #page-container .et_pb_section_1 .et_pb_module_header,
body.nng-modern #page-container .et_pb_section_2 .et_pb_module_header,
body.nng-modern #page-container .et_pb_section_4 .et_pb_module_header {
  color: var(--nng-text) !important;
}

/* Footer band. */
body.nng-modern #page-container .et_pb_section.et_pb_section_0_tb_footer {
  background-image: none !important;
  background-color: transparent !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  body.nng-modern .et_pb_section_2 .et_pb_image_wrap { transform: none; }
  body.nng-modern .et_pb_section_4 .et_pb_row { padding: 2.4rem 1.3rem; }
  body.nng-modern .et_pb_blurb { padding: 1.7rem 1.35rem; }
  body.nng-modern .et_pb_column_3_tb_header { border-radius: 0; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.nng-modern .nng-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.nng-modern .et_pb_blurb,
  body.nng-modern .et_pb_button,
  body.nng-modern .et_pb_section_2 .et_pb_image_wrap {
    transition: none;
  }
}