/*
Theme Name:   The Digital Foundry
Theme URI:    https://www.thedigitalfoundry.co.uk
Description:  Divi 5 child theme for The Digital Foundry. Brand tokens, type system and the few global styles Divi modules cannot express.
Author:       The Digital Foundry
Template:     Divi
Version:      1.0.0
Text Domain:  tdf
*/

/* ------------------------------------------------------------------
   1. Brand tokens
   The gcid-* custom properties mirror the Divi global colours created by
   the installer, so markup that references $variable(gcid-tdf-*) renders
   even before Divi emits its own :root block.
------------------------------------------------------------------- */
:root {
  --tdf-black: #0a0a0a;
  --tdf-ink: #141414;
  --tdf-lime: #c6ff00;
  --tdf-lime-hover: #d9ff4d;
  --tdf-white: #ffffff;
  --tdf-paper: #f3f3ef;
  --tdf-mist: #8f8f8f;
  --tdf-slate: #5a5a5a;
  --tdf-line-dark: rgba(255, 255, 255, 0.12);
  --tdf-line-light: rgba(10, 10, 10, 0.12);

  --gcid-tdf-black: var(--tdf-black);
  --gcid-tdf-ink: var(--tdf-ink);
  --gcid-tdf-lime: var(--tdf-lime);
  --gcid-tdf-white: var(--tdf-white);
  --gcid-tdf-paper: var(--tdf-paper);
  --gcid-tdf-mist: var(--tdf-mist);
  --gcid-tdf-slate: var(--tdf-slate);

  --tdf-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tdf-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --tdf-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

/* ------------------------------------------------------------------
   2. Base
------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body,
#et-boc .et-l p,
#et-boc .et-l li {
  font-family: var(--tdf-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { background: var(--tdf-black); }
#et-boc .et-l h1, #et-boc .et-l h2, #et-boc .et-l h3, #et-boc .et-l h4 {
  font-family: var(--tdf-font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
::selection { background: var(--tdf-lime); color: var(--tdf-black); }

/* Divi's default link colour is overridden per module; keep inline body
   links on-brand where modules leave them alone. */
#et-boc .et-l a { color: inherit; }
#et-boc .et-l .tdf-prose a { text-decoration: underline; text-decoration-color: var(--tdf-lime); text-underline-offset: 3px; }

/* ------------------------------------------------------------------
   3. Header
------------------------------------------------------------------- */
.tdf-header { position: sticky; top: 0; z-index: 999; }
/* Divi constrains the menu module and its inner row; we want logo hard-left, nav hard-right. */
#et-boc .et-l .tdf-header .et_pb_fullwidth_menu { width: 100%; max-width: 100%; margin: 0; }
#et-boc .et-l .tdf-header .et_pb_fullwidth_menu .et_pb_row { width: 100%; max-width: 100%; margin: 0; justify-content: space-between; }
/* Dropdown (Products) */
#et-boc .et-l .tdf-header .et-menu li li a { font-family: var(--tdf-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; width: 200px; padding: 10px 20px !important; color: var(--tdf-white) !important; opacity: 1; }
#et-boc .et-l .tdf-header .et-menu li li a:hover { color: var(--tdf-lime) !important; background: transparent; }
#et-boc .et-l .tdf-header .et-menu .sub-menu { padding: 12px 0; border-radius: 12px; border: 1px solid var(--tdf-line-dark); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
#et-boc .et-l .tdf-header .et-menu li.menu-item-has-children > a:first-child:after { color: var(--tdf-lime); }
.tdf-header .et-menu li.menu-item-has-children > a[href="#"] { cursor: default; }
#et-boc .et-l .tdf-header .et_pb_menu__wrap { justify-content: flex-end; flex-wrap: nowrap; }
#et-boc .et-l .tdf-header ul.et-menu { flex-wrap: nowrap; }
#et-boc .et-l .tdf-header .et_pb_menu__logo-wrap { flex: 0 0 auto; }
.tdf-header .et_pb_menu__logo img { height: 28px; width: auto; }
.tdf-header .et-menu a {
  font-family: var(--tdf-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#et-boc .et-l .tdf-header .et-menu li.tdf-nav-cta { align-self: center; }
#et-boc .et-l .tdf-header .et-menu li.tdf-nav-cta > a,
#et-boc .et-l .tdf-header .et-menu li.tdf-nav-cta.current-menu-item > a,
#et-boc .et-l .tdf-header .et-menu li.tdf-nav-cta > a:hover {
  background: var(--tdf-lime);
  color: var(--tdf-black) !important;
  border-radius: 999px;
  padding: 11px 18px !important;
  height: auto;
  align-self: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
#et-boc .et-l .tdf-header .et-menu li.tdf-nav-cta > a:hover { background: var(--tdf-lime-hover); opacity: 1 !important; transform: translateY(-1px); }
/* Mobile: logo left, hamburger right, on one row */
#et-boc .et-l .tdf-header .et_pb_menu__logo-wrap { justify-content: flex-start; }
#et-boc .et-l .tdf-header .mobile_menu_bar:before { color: var(--tdf-lime); font-size: 28px; }
@media (max-width: 980px) {
  #et-boc .et-l .tdf-header .et_mobile_nav_menu { display: flex; align-items: center; }
  .tdf-header .et_pb_menu__logo img { height: 22px; }
  #et-boc .et-l .tdf-header .et_pb_fullwidth_menu .et_pb_row { justify-content: space-between; align-items: center; }
}
.tdf-header .et_mobile_menu { border-top: 1px solid var(--tdf-line-dark); }
.tdf-header .et_mobile_menu li a { font-family: var(--tdf-font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; border-color: var(--tdf-line-dark); }
.tdf-header .et_mobile_menu li.tdf-nav-cta a { color: var(--tdf-lime); }

/* ------------------------------------------------------------------
   4. Marquee ticker (the lime strip on the home page)
------------------------------------------------------------------- */
.tdf-marquee { overflow: hidden; white-space: nowrap; }
.tdf-marquee p {
  display: inline-block;
  padding-left: 100%;
  margin: 0 !important;
  animation: tdf-marquee 28s linear infinite;
  font-family: var(--tdf-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tdf-marquee p span { padding: 0 1.2em; }
@keyframes tdf-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tdf-marquee p { animation: none; padding-left: 0; } }

/* ------------------------------------------------------------------
   5. Hover polish for cards and buttons
------------------------------------------------------------------- */
.tdf-card { transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; }
.tdf-card:hover { border-color: var(--tdf-lime) !important; transform: translateY(-3px); }
.tdf-card-light:hover { border-color: var(--tdf-black) !important; }
#et-boc .et-l .et_pb_button { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
#et-boc .et-l .et_pb_button:hover { transform: translateY(-1px); }
#et-boc .et-l .et_pb_button:after { display: none; }

/* Lime underline accent used under section eyebrows */
.tdf-eyebrow { position: relative; display: inline-block; }

/* Hero: soft lime glow behind the headline */
.tdf-hero { position: relative; overflow: hidden; }
.tdf-hero::before {
  content: "";
  position: absolute;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  right: -20vw; top: -20vw;
  background: radial-gradient(closest-side, rgba(198, 255, 0, 0.16), rgba(198, 255, 0, 0) 70%);
  pointer-events: none;
}
.tdf-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--tdf-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--tdf-line-dark) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0.5), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0.5), transparent 70%);
  pointer-events: none;
}
.tdf-hero > * { position: relative; z-index: 1; }

/* Huge display numerals in "how it works" */
.tdf-numeral h3 { line-height: 0.85; }

/* Forms */
#et-boc .et-l .tdf-form input,
#et-boc .et-l .tdf-form textarea,
#et-boc .et-l .tdf-form select {
  font-family: var(--tdf-font-body);
}
#et-boc .et-l .tdf-form .et_pb_contact_submit { font-family: var(--tdf-font-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* Accordion */
#et-boc .et-l .tdf-faq .et_pb_toggle { border: 0; border-top: 1px solid var(--tdf-line-dark); background: transparent; padding: 24px 0; }
#et-boc .et-l .tdf-faq .et_pb_toggle:last-child { border-bottom: 1px solid var(--tdf-line-dark); }
#et-boc .et-l .tdf-faq .et_pb_toggle_title { font-family: var(--tdf-font-display); font-weight: 700; }
#et-boc .et-l .tdf-faq .et_pb_toggle_title:before { color: var(--tdf-lime); }

/* Footer */
.tdf-footer a:hover { color: var(--tdf-lime) !important; }

/* ------------------------------------------------------------------
   6. TD Cookie plugin banner, on brand
------------------------------------------------------------------- */
/* The plugin sets most of its colours as inline !important styles, so only the
   properties it leaves alone are themed here: fonts, blur, button chrome, and
   a hue shift that turns its green toggles lime. */
.tdgdprconsent-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tdgdprconsent-card { font-family: var(--tdf-font-body); }
.tdgdprconsent-card h2, .tdgdprconsent-card h3 { font-family: var(--tdf-font-display); letter-spacing: -0.02em; }
.tdgdprconsent-category-name { font-family: var(--tdf-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.tdgdpr-toggle-slider { filter: hue-rotate(-70deg) saturate(1.8) brightness(1.1); box-shadow: 0 0 0 1px var(--tdf-black); }

/* ------------------------------------------------------------------
   7. Lime on light backgrounds: black text on a lime highlight block
------------------------------------------------------------------- */
.tdf-highlight { display: inline-block; }
#tdgdprconsent-accept-all, #tdgdprconsent-reject-all, #tdgdprconsent-save-prefs, #tdgdprconsent-prefs-btn {
  font-family: var(--tdf-font-mono) !important; font-size: 13px !important; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px !important; padding: 14px 22px !important; border: 1px solid transparent !important; cursor: pointer;
}
#tdgdprconsent-accept-all, #tdgdprconsent-save-prefs { background: var(--tdf-lime) !important; color: var(--tdf-black) !important; }
#tdgdprconsent-accept-all:hover, #tdgdprconsent-save-prefs:hover { background: var(--tdf-lime-hover) !important; }
#tdgdprconsent-reject-all, #tdgdprconsent-prefs-btn { background: transparent !important; color: var(--tdf-white) !important; border-color: rgba(255,255,255,0.35) !important; }
#tdgdprconsent-reject-all:hover, #tdgdprconsent-prefs-btn:hover { border-color: var(--tdf-white) !important; }