/*
Theme Name:   Hello Elementor — Dataero Child
Theme URI:    https://dataero.eu
Description:  Dataero design system light-theme overlay on Hello Elementor. Slate deck, Roboto typography, lime-on-navy CTAs.
Author:       Dataero Europe
Author URI:   https://dataero.eu
Template:     hello-elementor
Version:      1.0.30
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor-dataero
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  --d-page-bg:      #EBEFF3;
  --d-navy:         rgb(11, 15, 24);
  --d-navy-soft:    rgba(11, 15, 24, 0.62);
  --d-navy-line:    rgba(11, 15, 24, 0.14);
  --d-lime-bright:  rgb(173, 255, 47);
  --d-lime:         rgb(90, 155, 10);
  --d-lime-hover:   rgb(70, 125, 8);

  --e-global-typography-primary-font-family:   'Roboto';
  --e-global-typography-primary-font-weight:   700;
  --e-global-typography-secondary-font-family: 'Roboto';
  --e-global-typography-secondary-font-weight: 600;
  --e-global-typography-text-font-family:      'Roboto';
  --e-global-typography-text-font-weight:      400;
  --e-global-typography-accent-font-family:    'Roboto';
  --e-global-typography-accent-font-weight:    700;

  --e-global-color-text:    rgb(11, 15, 24);
  --e-global-color-primary: rgb(11, 15, 24);
}

body {
  background-color: var(--d-page-bg) !important;
  color: var(--d-navy) !important;
}

body, body p, body span, body li, body td, body th, body input, body textarea, body button,
.elementor-widget-text-editor, .elementor-button,
body .elementor-widget-text-editor h1, body .elementor-widget-heading h1, body h1.entry-title,
body .elementor-widget-text-editor h2, body .elementor-widget-heading h2,
body .elementor-widget-text-editor h3, body .elementor-widget-heading h3,
body .elementor-widget-text-editor h4, body .elementor-widget-heading h4,
body h1, body h2, body h3, body h4, body h5, body h6,
.entry-title, .elementor-heading-title {
  font-family: 'Roboto', system-ui, sans-serif !important;
}

code, pre, kbd, samp, .mono {
  font-family: 'Roboto Mono', 'SF Mono', Consolas, monospace !important;
}

a:not(.elementor-button):not(.wp-block-button__link) {
  color: var(--d-navy) !important;
  text-decoration-color: var(--d-lime);
  text-underline-offset: 3px;
}

a:not(.elementor-button):not(.wp-block-button__link):hover {
  color: var(--d-lime-hover) !important;
}

.elementor-element .elementor-button,
.elementor-element a.elementor-button,
body .elementor-button,
body a.elementor-button,
body .wp-block-button__link {
  background-color: var(--d-lime-bright) !important;
  background-image: none !important;
  color: var(--d-navy) !important;
  fill: var(--d-navy) !important;
  border: 1px solid transparent !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 20px -6px rgba(90, 155, 10, 0.45) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
}

.elementor-element .elementor-button:hover,
body .elementor-button:hover,
body a.elementor-button:hover,
body .wp-block-button__link:hover {
  background-color: rgb(196, 255, 90) !important;
  color: var(--d-navy) !important;
}

.elementor-element .elementor-button:active,
body .elementor-button:active,
body a.elementor-button:active {
  transform: translateY(1px) !important;
}

/* Section h2s on this site are authored inside .elementor-widget-text-editor
   with inline font-size/font-weight. The h2 itself has no class, so target
   the widget container. !important on author CSS beats inline-without-!important. */
body .elementor-widget-text-editor h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin-bottom: 32px !important;
}

/* Hero accent word: italic with lime gradient text fill.
   Use by wrapping the accent word in an Elementor heading like:
     Sky-high <span class="dataero-accent">intelligence.</span>
   On the dark navy hero section the bright→mid lime pair reads best. */
.dataero-accent {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #ADFF2F 0%, #5A9B0A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Legacy brand orange (#FFA500) on inline text styles → bright lime.
   Source: pages authored before the design-system migration set
   color:#FFA500 directly on <p> / <span> / heading text. CSS attribute
   selectors with case-insensitive flag catch hex+rgb variants. */
body [style*="color:#FFA500" i],
body [style*="color: #FFA500" i],
body [style*="color:rgb(255, 165, 0)" i],
body [style*="color: rgb(255, 165, 0)" i] {
  color: rgb(173, 255, 47) !important;
}

/* Card category eyebrows (AIRPORT OPERATORS, AVIATION AUTHORITIES, ADS-B
   CONTRIBUTORS): make these the TITLE of each card — bigger than the h3
   subhead, Roboto Mono, navy bold, wide tracking. Source markup is
   <p style="color:#3b6ed4">. Use the `p` tag in the selector so we don't
   also restyle the link siblings ("Explore for airports →") that share
   the same inline hex. */
body p[style*="#3b6ed4" i] {
  color: var(--d-navy) !important;
  font-family: 'Roboto Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

/* Hero section eyebrow ("Aviation Management Software"), inline #5B9BD5
   on the dark navy hero. Bright lime + Roboto Mono — same vocabulary as
   the SSO page "● IDENTITY SERVICE" eyebrow. */
body p[style*="#5b9bd5" i] {
  color: rgb(173, 255, 47) !important;
  font-family: 'Roboto Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

/* Card category eyebrows: short lime accent bar above each one.
   Block display keeps horizontal text alignment intact with the h3
   subhead below; the bar sits in the eyebrow's normal margin space. */
body p[style*="#3b6ed4" i]::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--d-lime-bright);
  margin-bottom: 14px;
  border-radius: 1px;
}

/* Top-bar header: give it its own dark navy band so nav text reads
   regardless of what section sits behind it. Nav links go white-alpha
   with lime hover, Roboto. Dropdown panels match the dark band. */
header.elementor-location-header {
  background-color: var(--d-navy) !important;
}
header.elementor-location-header a,
header.elementor-location-header .elementor-item,
header.elementor-location-header .elementor-sub-item {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Roboto', system-ui, sans-serif !important;
}
header.elementor-location-header a:hover,
header.elementor-location-header .elementor-item:hover,
header.elementor-location-header .elementor-item-active,
header.elementor-location-header .elementor-item.elementor-item-active {
  color: rgb(173, 255, 47) !important;
}
header.elementor-location-header .elementor-nav-menu--dropdown,
header.elementor-location-header .elementor-nav-menu .sub-menu {
  background-color: var(--d-navy) !important;
}

/* Mobile hamburger icon: force white on the toggle and every child element
   (covers SVG fill + font-icon color paths). Hover gets lime. */
header.elementor-location-header .elementor-menu-toggle,
header.elementor-location-header .elementor-menu-toggle * {
  color: rgba(255, 255, 255, 0.92) !important;
  fill: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}
header.elementor-location-header .elementor-menu-toggle:hover,
header.elementor-location-header .elementor-menu-toggle:hover * {
  color: rgb(173, 255, 47) !important;
  fill: rgb(173, 255, 47) !important;
}

/* Mobile hero headline: keep "Sky-high intelligence." the primary visual.
   Elementor's per-page CSS has its own responsive font-size rule with
   class-chain specificity 0,0,3,1. We match that specificity with the
   exact widget selector AND keep a generic fallback. Child theme CSS
   loads after post-16.css so equal-specificity ties go to us. */
@media (max-width: 1024px) {
  body .elementor-widget-text-editor h1,
  .elementor-16 .elementor-element.elementor-element-d5bb8d4 h1 {
    font-size: 56px !important;
    line-height: 1.05 !important;
    word-wrap: break-word !important;
  }
}
@media (max-width: 767px) {
  body .elementor-widget-text-editor h1,
  .elementor-16 .elementor-element.elementor-element-d5bb8d4 h1 {
    font-size: 60px !important;
    line-height: 1.0 !important;
  }
}
@media (max-width: 480px) {
  body .elementor-widget-text-editor h1,
  .elementor-16 .elementor-element.elementor-element-d5bb8d4 h1 {
    font-size: 56px !important;
    line-height: 1.05 !important;
  }
}

/* Legacy rust-orange (#E05A2B) on light-surface eyebrows (e.g.
   "THE REALITY TODAY"). On light bg, bright lime fails contrast; use
   the darker lime accent (--d-lime) instead. Separate rule from
   #FFA500 which sits on dark sections. */
body [style*="color:#e05a2b" i],
body [style*="color: #e05a2b" i] {
  color: var(--d-lime) !important;
}

/* "How a connection works" card on /administrations — Elementor 3.x stores
   per-element padding in CSS custom properties on the container, and its
   `padding: var(--padding-block-start) ...` rule pulls from those. To beat
   the mobile-zeroed values, override the variables themselves (not just
   the `padding` shorthand). */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-4f37b18 {
    --padding-block-start: 28px !important;
    --padding-block-end: 28px !important;
    --padding-inline-start: 28px !important;
    --padding-inline-end: 28px !important;
    padding: 28px !important;
  }
}
@media (max-width: 480px) {
  .elementor-element.elementor-element-4f37b18 {
    --padding-block-start: 24px !important;
    --padding-block-end: 24px !important;
    --padding-inline-start: 24px !important;
    --padding-inline-end: 24px !important;
    padding: 24px !important;
  }
}

/* ============================================================
   CookieYes banner — themed to the Dataero design system.
   Navy panel, alpha-white text, Roboto, lime primary CTA,
   ghost secondary CTA, underlined tertiary, and the floating
   revisit consent button hidden by default.
   ============================================================ */

/* Hide the floating "revisit consent" pill */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
.cky-btn-revisit {
  display: none !important;
}

/* Main banner + preferences modal: navy panel */
.cky-consent-container .cky-consent-bar,
.cky-modal .cky-modal-content,
.cky-preference-center {
  background-color: var(--d-navy) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Roboto', system-ui, sans-serif !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.5) !important;
}

/* Titles */
.cky-consent-container .cky-title,
.cky-modal h1, .cky-modal h2, .cky-modal h3,
.cky-preference-center .cky-preference-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Roboto', system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* Body / description text */
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des *,
.cky-modal .cky-preference-body-wrapper,
.cky-modal .cky-preference-body-wrapper * {
  color: rgba(255, 255, 255, 0.62) !important;
  font-family: 'Roboto', system-ui, sans-serif !important;
}

/* Links inside the banner — lime */
.cky-consent-container a:not(.cky-btn),
.cky-modal a:not(.cky-btn) {
  color: rgb(173, 255, 47) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Primary CTA: Accept All → lime fill + navy text */
.cky-btn.cky-btn-accept,
.cky-btn-accept {
  background-color: var(--d-lime-bright) !important;
  color: var(--d-navy) !important;
  border: 1px solid transparent !important;
  font-weight: 700 !important;
  font-family: 'Roboto', system-ui, sans-serif !important;
  border-radius: 6px !important;
  letter-spacing: 0.04em !important;
}
.cky-btn.cky-btn-accept:hover,
.cky-btn-accept:hover {
  background-color: rgb(196, 255, 90) !important;
}

/* Secondary CTA: Reject All → ghost / outline */
.cky-btn.cky-btn-reject,
.cky-btn-reject {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-family: 'Roboto', system-ui, sans-serif !important;
}
.cky-btn.cky-btn-reject:hover,
.cky-btn-reject:hover {
  border-color: rgba(255, 255, 255, 0.60) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Tertiary: Customize → underline text only */
.cky-btn.cky-btn-customize,
.cky-btn-customize,
.cky-btn-preferences {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.62) !important;
  border: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
  font-family: 'Roboto', system-ui, sans-serif !important;
}
.cky-btn.cky-btn-customize:hover,
.cky-btn-customize:hover {
  color: rgb(173, 255, 47) !important;
}

/* Preference category toggles — lime when on */
.cky-switch input:checked + .cky-switch-slider,
.cky-switch input:checked ~ .cky-switch-slider {
  background-color: var(--d-lime-bright) !important;
}

/* Modal close button */
.cky-btn-close {
  color: rgba(255, 255, 255, 0.62) !important;
}
.cky-btn-close:hover {
  color: rgb(173, 255, 47) !important;
}

/* "Who Dataero Serves" three-card row (post 16, row id 4cde1d8) — align
   eyebrows, h3 titles, body text, and CTAs at the same horizontal levels
   across the three cards. Each card content lives inside ONE text-editor
   widget. The chain is: row → column (e-con e-child) → widget
   (.elementor-widget-text-editor) → .elementor-widget-container →
   inner unclassed <div> → leaf elements. Every wrapper between the row
   and the leaves needs display: contents so the 12 leaves become direct
   grid items. Desktop only — mobile keeps the natural stacked layout. */
@media (min-width: 1025px) {
  body .elementor-element-4cde1d8 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto 1fr auto !important;
    grid-auto-flow: column !important;
    column-gap: 40px !important;
    row-gap: 16px !important;
  }
  body .elementor-element-4cde1d8 > .e-con.e-child,
  body .elementor-element-4cde1d8 .elementor-widget-text-editor,
  body .elementor-element-4cde1d8 .elementor-widget-container,
  body .elementor-element-4cde1d8 .elementor-widget-container > div {
    display: contents !important;
  }
}

/* Dark-surface link overrides: footer and any element with a dark navy
   inline bg need white-alpha link text so links don't disappear on dark. */
footer a:not(.elementor-button):not(.wp-block-button__link),
footer a:not(.elementor-button):not(.wp-block-button__link):visited,
.elementor-element[style*="background-color: #0B0F18" i] a:not(.elementor-button),
.elementor-element[style*="background-color:#0B0F18" i] a:not(.elementor-button),
.elementor-element[style*="background-color: rgb(11, 15, 24)" i] a:not(.elementor-button),
.elementor-element[style*="background-color: #07112A" i] a:not(.elementor-button),
.elementor-element[style*="background-color:#07112A" i] a:not(.elementor-button) {
  color: rgba(255, 255, 255, 0.92) !important;
}
footer a:not(.elementor-button):not(.wp-block-button__link):hover,
.elementor-element[style*="background-color: #0B0F18" i] a:not(.elementor-button):hover,
.elementor-element[style*="background-color:#0B0F18" i] a:not(.elementor-button):hover,
.elementor-element[style*="background-color: rgb(11, 15, 24)" i] a:not(.elementor-button):hover,
.elementor-element[style*="background-color: #07112A" i] a:not(.elementor-button):hover,
.elementor-element[style*="background-color:#07112A" i] a:not(.elementor-button):hover {
  color: rgb(173, 255, 47) !important;
}

/* Standalone CTAs get the lime button look. A `.dataero-cta` class is
   added in functions.php via JS to any link whose text equals the entire
   text of its parent paragraph — that's the real "standalone CTA"
   signal, which :only-child can't detect (text-node siblings don't
   count for :only-child). Inline links inside body sentences never
   get this class, so they stay as plain navy underlined text. */
body a.dataero-cta {
  display: inline-block !important;
  background-color: var(--d-lime-bright) !important;
  color: var(--d-navy) !important;
  padding: 12px 20px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-top: 12px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 6px 16px -4px rgba(90, 155, 10, 0.40) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
}
body a.dataero-cta:hover {
  background-color: rgb(196, 255, 90) !important;
  color: var(--d-navy) !important;
}
body a.dataero-cta:active {
  transform: translateY(1px) !important;
}

/* Inline #3b6ed4 links not tagged as CTAs — plain navy underlined text. */
body a[style*="#3b6ed4" i]:not(.dataero-cta) {
  color: var(--d-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Dark-section link override (class-based). functions.php tags every
   element whose computed background is dark (luminance under threshold)
   with `.dataero-dark-section`. All links inside such sections get
   white-alpha text + lime hover so they don't disappear on navy bg. */
.dataero-dark-section a:not(.elementor-button):not(.wp-block-button__link):not(.dataero-cta) {
  color: rgba(255, 255, 255, 0.92) !important;
}
.dataero-dark-section a:not(.elementor-button):not(.wp-block-button__link):not(.dataero-cta):hover {
  color: rgb(173, 255, 47) !important;
}
/* Make the body text inside dark sections also white-alpha (not just links) */
.dataero-dark-section p:not([style*="color"]):not([style*="background"]),
.dataero-dark-section h2:not([style*="color"]),
.dataero-dark-section h3:not([style*="color"]),
.dataero-dark-section h4:not([style*="color"]) {
  color: rgba(255, 255, 255, 0.92) !important;
}