/*
Theme Name:        IDCG Child Theme
Theme URI:         https://idcg-intl.com
Description:       Child theme for IDCG – Incremental Design Consortium Group. Built on Hello Elementor with full brand identity: burnt orange (#FA6E00), medium gray (#A0A0A0), Playfair Display headings, and Outfit body text.
Author:            Incremental Design Consortium Group
Author URI:        https://idcg-intl.com
Template:          hello-elementor
Version:           1.0.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       idcg-child
*/

/* ============================================================
   IDCG BRAND DESIGN SYSTEM
   ============================================================
   Primary Orange  : #FA6E00
   Brand Gray      : #A0A0A0
   Dark Charcoal   : #1a1816
   Off-White       : #faf9f7
   Warm Light Gray : #f5f2ee
   Border Gray     : #e8e4df
   Body Text       : #2c2a27
   Muted Text      : #6b6b6b

   Heading Font    : Playfair Display (Google Fonts)
   Body Font       : Outfit (Google Fonts)

   Max Content Width : 1400px
   Section Padding   : 96px top/bottom (desktop), 64px (tablet), 48px (mobile)
   Container Padding : 32px (desktop), 24px (tablet), 16px (mobile)
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --idcg-orange:       #FA6E00;
  --idcg-orange-dark:  #d45c00;
  --idcg-orange-light: #fff3e8;
  --idcg-gray:         #A0A0A0;
  --idcg-dark:         #1a1816;
  --idcg-charcoal:     #2c2a27;
  --idcg-off-white:    #faf9f7;
  --idcg-warm-gray:    #f5f2ee;
  --idcg-border:       #e8e4df;
  --idcg-muted:        #6b6b6b;

  --idcg-font-heading: 'Playfair Display', Georgia, serif;
  --idcg-font-body:    'Outfit', system-ui, sans-serif;

  --idcg-max-width:    1400px;
  --idcg-section-pad:  96px;
  --idcg-container-pad: 32px;
}

/* ── Base Typography ────────────────────────────────────────── */
body {
  font-family: var(--idcg-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--idcg-charcoal);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--idcg-font-heading);
  color: var(--idcg-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── Type Scale ─────────────────────────────────────────────── */
/* H1: 72px desktop / 48px tablet / 36px mobile */
h1, .idcg-h1 {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* H2: 48px desktop / 36px tablet / 28px mobile */
h2, .idcg-h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* H3: 32px desktop / 24px tablet / 22px mobile */
h3, .idcg-h3 {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* H4: 24px */
h4, .idcg-h4 {
  font-size: 24px;
  font-weight: 600;
}

/* H5: 20px */
h5, .idcg-h5 {
  font-size: 20px;
  font-weight: 600;
}

/* H6: 16px */
h6, .idcg-h6 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Body: 16px / line-height 1.7 */
p, .idcg-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--idcg-charcoal);
}

/* Small body: 14px */
.idcg-small {
  font-size: 14px;
  line-height: 1.6;
}

/* Caption: 12px */
.idcg-caption,
figcaption {
  font-size: 12px;
  line-height: 1.5;
  color: var(--idcg-muted);
  letter-spacing: 0.04em;
}

/* Blockquote / Pull Quote: 24px italic */
blockquote,
.idcg-quote {
  font-family: var(--idcg-font-heading);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--idcg-dark);
  border-left: 3px solid var(--idcg-orange);
  padding-left: 24px;
  margin: 32px 0;
}

/* Section label / eyebrow: 11px uppercase */
.idcg-label,
.idcg-eyebrow {
  font-family: var(--idcg-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--idcg-orange);
}

/* ── Links ──────────────────────────────────────────────────── */
a {
  color: var(--idcg-orange);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--idcg-orange-dark);
}

/* ── Buttons ────────────────────────────────────────────────── */
/* Primary button: 14px / 48px height / 24px h-padding */
.elementor-button,
.wp-block-button__link,
button,
input[type="submit"],
.idcg-btn {
  font-family: var(--idcg-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 2px;
  transition: all 0.25s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Primary button */
.elementor-button.elementor-button-primary,
.idcg-btn-primary {
  background-color: var(--idcg-orange);
  color: #ffffff;
  border: 1.5px solid var(--idcg-orange);
}

.elementor-button.elementor-button-primary:hover,
.idcg-btn-primary:hover {
  background-color: var(--idcg-orange-dark);
  border-color: var(--idcg-orange-dark);
  color: #ffffff;
}

/* Outline button */
.elementor-button.elementor-button-ghost,
.idcg-btn-outline {
  background-color: transparent;
  color: var(--idcg-dark);
  border: 1.5px solid var(--idcg-dark);
}

.elementor-button.elementor-button-ghost:hover,
.idcg-btn-outline:hover {
  background-color: var(--idcg-dark);
  color: #ffffff;
}

/* ── Navigation ─────────────────────────────────────────────── */
/* Navbar height: 80px desktop / 64px mobile */
.site-header,
#site-header,
.elementor-location-header {
  height: 80px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--idcg-border);
}

.site-header a,
.elementor-nav-menu a {
  font-family: var(--idcg-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--idcg-charcoal);
  transition: color 0.2s ease;
}

.site-header a:hover,
.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a {
  color: var(--idcg-orange);
}

/* ── Sections & Layout ──────────────────────────────────────── */
.elementor-section,
.e-con {
  max-width: var(--idcg-max-width);
}

/* Standard section padding */
.idcg-section {
  padding: var(--idcg-section-pad) var(--idcg-container-pad);
}

/* Warm light gray background sections */
.idcg-section-alt {
  background-color: var(--idcg-warm-gray);
}

/* ── Dividers & Accents ─────────────────────────────────────── */
.idcg-divider {
  width: 48px;
  height: 2px;
  background-color: var(--idcg-orange);
  margin: 16px 0 24px;
}

hr,
.elementor-divider-separator {
  border-color: var(--idcg-border);
}

/* ── Cards ──────────────────────────────────────────────────── */
.idcg-card {
  background-color: #ffffff;
  border: 1px solid var(--idcg-border);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.idcg-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* ── Forms ──────────────────────────────────────────────────── */
/* Input height: 48px / font-size: 15px */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  font-family: var(--idcg-font-body);
  font-size: 15px;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--idcg-border);
  border-radius: 2px;
  background-color: #ffffff;
  color: var(--idcg-charcoal);
  transition: border-color 0.2s ease;
  width: 100%;
}

textarea,
.elementor-field-group textarea {
  height: auto;
  min-height: 140px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--idcg-orange);
  box-shadow: 0 0 0 3px rgba(250, 110, 0, 0.1);
}

/* Form label: 12px uppercase */
label,
.elementor-field-label {
  font-family: var(--idcg-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--idcg-charcoal);
  margin-bottom: 6px;
  display: block;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer,
#site-footer,
.elementor-location-footer {
  background-color: var(--idcg-warm-gray);
  border-top: 1px solid var(--idcg-border);
  padding: 64px var(--idcg-container-pad) 32px;
}

.site-footer a {
  color: var(--idcg-muted);
  font-size: 14px;
}

.site-footer a:hover {
  color: var(--idcg-orange);
}

/* ── Utility Classes ─────────────────────────────────────────── */
.text-orange  { color: var(--idcg-orange) !important; }
.text-dark    { color: var(--idcg-dark) !important; }
.text-muted   { color: var(--idcg-muted) !important; }
.bg-orange    { background-color: var(--idcg-orange) !important; }
.bg-off-white { background-color: var(--idcg-off-white) !important; }
.bg-warm-gray { background-color: var(--idcg-warm-gray) !important; }
.font-heading { font-family: var(--idcg-font-heading) !important; }
.font-body    { font-family: var(--idcg-font-body) !important; }

/* ── Responsive Overrides ───────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --idcg-section-pad: 64px;
    --idcg-container-pad: 24px;
  }

  .site-header,
  #site-header {
    height: 64px;
  }
}

@media (max-width: 767px) {
  :root {
    --idcg-section-pad: 48px;
    --idcg-container-pad: 16px;
  }

  blockquote,
  .idcg-quote {
    font-size: 20px;
  }
}