/*
Theme Name: DG Systems Kadence V2 Child
Theme URI: https://www.dg-systems.com.au/
Description: Version 2 child theme for DG Systems, designed for Kadence + Gutenberg.
Author: DG Systems
Template: kadence
Version: 2.0.0
Text Domain: dg-systems-kadence-v2
*/

:root {
  --dg-navy: #0F2A4F;
  --dg-steel: #4A6B8C;
  --dg-blue: #0066CC;
  --dg-charcoal: #2A2D34;
  --dg-white: #FFFFFF;
  --dg-offwhite: #F4F7FA;
  --dg-border: #DDE2EB;
  --dg-success: #1F7A4D;
  --dg-error: #B23B3B;
}

body {
  color: var(--dg-charcoal);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dg-navy);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 36px); line-height: 1.2; font-weight: 700; }
h3 { font-size: clamp(22px, 3vw, 24px); line-height: 1.3; font-weight: 600; }

.dg-section {
  padding: 120px 24px;
}

.dg-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.dg-narrow {
  max-width: 720px;
}

.dg-centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.dg-offwhite {
  background: var(--dg-offwhite);
}

.dg-navy-section {
  background: var(--dg-navy);
  color: var(--dg-white);
}

.dg-navy-section h1,
.dg-navy-section h2,
.dg-navy-section h3,
.dg-navy-section h4,
.dg-navy-section p {
  color: var(--dg-white);
}

.dg-eyebrow {
  color: var(--dg-steel);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.dg-card {
  background: var(--dg-white);
  border: 1px solid var(--dg-border);
  border-radius: 8px;
  padding: 32px;
  height: 100%;
}

.dg-card h3 {
  margin-top: 0;
}

.dg-grid-4,
.dg-grid-3,
.dg-grid-2 {
  display: grid;
  gap: 32px;
}

.dg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dg-button-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.wp-block-button__link,
.dg-button {
  background: var(--dg-navy);
  border-radius: 6px;
  border: 1px solid var(--dg-navy);
  color: var(--dg-white) !important;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  text-decoration: none;
}

.wp-block-button__link:hover,
.dg-button:hover {
  background: var(--dg-blue);
  border-color: var(--dg-blue);
}

.dg-button-secondary {
  background: transparent;
  color: var(--dg-navy) !important;
  border-color: var(--dg-navy);
}

.dg-navy-section .dg-button-secondary {
  color: var(--dg-white) !important;
  border-color: var(--dg-white);
}

.dg-step-number {
  color: var(--dg-steel);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.dg-result {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  margin: 32px 0;
}

.dg-logo-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px;
  align-items: center;
  opacity: .85;
}

.dg-logo-placeholder {
  border: 1px dashed var(--dg-border);
  border-radius: 8px;
  color: var(--dg-steel);
  padding: 18px;
  text-align: center;
  font-size: 14px;
  background: #fff;
}

blockquote.dg-quote {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.35;
  color: var(--dg-navy);
  border: none;
  margin: 0 auto;
  max-width: 880px;
  text-align: center;
}

.dg-form-note {
  border: 1px solid var(--dg-border);
  border-radius: 8px;
  padding: 24px;
  background: var(--dg-offwhite);
  font-size: 16px;
}

.site-header {
  border-bottom: 1px solid var(--dg-border);
}

input, textarea, select {
  border: 1px solid var(--dg-border) !important;
  border-radius: 6px !important;
  min-height: 48px;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--dg-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, .12) !important;
}

@media (max-width: 1024px) {
  .dg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .dg-section { padding: 64px 20px; }
  .dg-grid-4, .dg-grid-3, .dg-grid-2 { grid-template-columns: 1fr; gap: 20px; }
  .dg-logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .dg-card { padding: 24px; }
}