/*
Theme Name: DGC AI
Template: hello-elementor
Description: Custom child theme for DGC AI — colors and typography enforced globally so Elementor defaults do not override them. Square-edged design system matching the reference.
Version: 1.3.0
Author: DGC AI
Text Domain: dgc-ai
*/

:root {
  --dgc-black: #000000;
  --dgc-card-dark: #181818;
  --dgc-card-dark-alt: #282828;
  --dgc-bg-light: #F8F8F8;
  --dgc-bg-light-alt: #F0F0F0;
  --dgc-white: #FFFFFF;
  --dgc-gray-muted: #A0A0A0;
  --dgc-gray-muted-2: #B8B8B8;
  --dgc-accent: #F84820;
  --dgc-cta: #D80000;
  --dgc-text-dark: #101010;
  --dgc-text-light: #F8F8F8;

  --dgc-font-display: 'Instrument Serif', serif;
  --dgc-font-heading: 'Familjen Grotesk', sans-serif;
  --dgc-font-body: 'Inter', sans-serif;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY — forced so Elementor's kit/widget defaults cannot win
   ========================================================================== */

body,
body p,
body li,
body span,
body div,
body label,
body input,
body textarea,
body select,
body button,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-button .elementor-button,
.elementor-widget-container p {
  font-family: var(--dgc-font-body) !important;
  font-optical-sizing: auto !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-accordion .elementor-tab-title,
.elementor-widget-button .elementor-button-text {
  font-family: var(--dgc-font-heading) !important;
  font-optical-sizing: auto !important;
}

/* Display serif — apply this class manually to hero-style headings only */
.dgc-display-headline,
.dgc-display-headline .elementor-heading-title {
  font-family: var(--dgc-font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   GLOBAL COLORS — forced
   ========================================================================== */

body {
  color: var(--dgc-text-dark) !important;
  background-color: var(--dgc-white) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: var(--dgc-black);
}

/* Dark sections: any container with a black/near-black background gets light text */
.dgc-bg-black,
.dgc-bg-black p,
.dgc-bg-black h1, .dgc-bg-black h2, .dgc-bg-black h3,
.dgc-bg-black h4, .dgc-bg-black h5, .dgc-bg-black h6,
.dgc-bg-black .elementor-heading-title {
  color: var(--dgc-text-light) !important;
}

a { color: var(--dgc-black); }
a:hover { color: var(--dgc-accent); }

::selection {
  background-color: var(--dgc-accent);
  color: var(--dgc-white);
}

/* ==========================================================================
   SQUARE EDGES — the reference design uses no rounded corners anywhere.
   Forced off for Elementor widgets, buttons, images, forms and containers.
   ========================================================================== */

.elementor-button,
.elementor-widget-button .elementor-button,
.elementor-widget-container,
.e-con,
.e-con-inner,
.elementor-widget-image img,
.elementor-widget-accordion .elementor-accordion-item,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
button {
  border-radius: 0 !important;
}

/* Utility classes */
.dgc-bg-black { background-color: var(--dgc-black); color: var(--dgc-text-light); }
.dgc-bg-light { background-color: var(--dgc-bg-light); }
.dgc-text-accent { color: var(--dgc-accent) !important; }
.dgc-text-muted { color: var(--dgc-gray-muted) !important; }
.dgc-btn-cta { background-color: var(--dgc-cta); color: var(--dgc-white); }

/* Round avatars are the one intentional exception (photo circles in the
   reference's testimonial/trust rows). Opt in with this class only. */
.dgc-avatar { border-radius: 50% !important; }