/*
Theme Name:   CMB Civil Consulting Child
Theme URI:    https://cmbcivilconsulting.co.uk
Description:  Child theme for CMB Civil Consulting. Parent: Hello Elementor. Provides brand tokens, global typography, and utility styles. All layout is handled by Elementor Pro Theme Builder.
Author:       Christina Brown
Author URI:   https://cmbcivilconsulting.co.uk
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:  cmb-civil-child
Tags:         elementor, child-theme, civil-engineering
*/

/* ═══════════════════════════════════════════════════════════
   CMB CIVIL CONSULTING — GLOBAL BRAND TOKENS & BASE STYLES
   All layout is built in Elementor. This file sets:
   - CSS custom properties (brand colours, fonts, spacing)
   - Base typography defaults
   - Global resets that complement Hello Elementor
   - Utility classes usable in Elementor Custom CSS boxes
═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300..700&display=swap');

/* ── Brand Design Tokens ──────────────────────────────────── */
:root {
  /* Primary brand colours */
  --cmb-purple:        #2D1B69;
  --cmb-purple-mid:    #4A3490;
  --cmb-purple-light:  #8B7FB8;
  --cmb-lavender:      #C4BEDD;
  --cmb-blue:          #7BAFD4;
  --cmb-blue-light:    #B8D4E8;

  /* Surfaces & backgrounds */
  --cmb-white:         #FFFFFF;
  --cmb-off-white:     #F7F6FB;
  --cmb-surface:       #F0EEF8;
  --cmb-border:        #D8D4EA;

  /* Text */
  --cmb-text:          #1A1228;
  --cmb-text-muted:    #5C5478;
  --cmb-text-faint:    #9B96B0;

  /* Typography */
  --font-display:      'DM Serif Display', Georgia, serif;
  --font-body:         'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(45, 27, 105, 0.08);
  --shadow-md: 0 4px 16px rgba(45, 27, 105, 0.12);
  --shadow-lg: 0 12px 40px rgba(45, 27, 105, 0.18);

  /* Transitions */
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base Reset (complements Hello Elementor) ─────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--cmb-text);
  background-color: var(--cmb-white);
  line-height: 1.65;
}

/* ── Global Typography ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--cmb-purple);
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

a {
  color: var(--cmb-purple-mid);
  transition: color var(--transition);
}
a:hover {
  color: var(--cmb-purple);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
}

/* ── Focus styles ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--cmb-purple-mid);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Selection ────────────────────────────────────────────── */
::selection {
  background: rgba(139, 127, 184, 0.25);
  color: var(--cmb-text);
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ELEMENTOR OVERRIDES
   These ensure Elementor widgets inherit CMB brand styles
═══════════════════════════════════════════════════════════ */

/* Force body font into Elementor text widgets */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--font-body);
  color: var(--cmb-text-muted);
  line-height: 1.75;
}

/* Heading widgets */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  line-height: 1.15;
}

/* Ensure Elementor buttons inherit border-radius properly */
.elementor-button {
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition) !important;
}
.elementor-button:hover {
  transform: translateY(-1px);
}
.elementor-button:active {
  transform: translateY(0);
}

/* Nav menu — active state */
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item:focus {
  color: var(--cmb-purple) !important;
}

/* Remove Hello Elementor's default page title on blank/full-width pages */
.elementor-page .entry-title,
.elementor-page .page-header {
  display: none;
}

/* Remove default WordPress margins Elementor doesn't strip */
.elementor-section-wrap,
.e-container,
.e-con {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   Use these in Elementor's CSS Classes field or Custom CSS
═══════════════════════════════════════════════════════════ */

/* Eyebrow label */
.cmb-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cmb-blue);
}

/* Section backgrounds */
.cmb-bg-white     { background-color: var(--cmb-white); }
.cmb-bg-offwhite  { background-color: var(--cmb-off-white); }
.cmb-bg-surface   { background-color: var(--cmb-surface); }
.cmb-bg-purple    { background-color: var(--cmb-purple); }

/* Text colours */
.cmb-text-purple  { color: var(--cmb-purple); }
.cmb-text-muted   { color: var(--cmb-text-muted); }
.cmb-text-white   { color: var(--cmb-white); }
.cmb-text-lavender{ color: var(--cmb-lavender); }
.cmb-text-blue    { color: var(--cmb-blue); }

/* Card style — apply to Elementor inner sections or containers */
.cmb-card {
  background: var(--cmb-white);
  border: 1px solid var(--cmb-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.cmb-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Divider line */
.cmb-divider {
  border: none;
  border-top: 1px solid var(--cmb-border);
  margin: 0;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   ELEMENTOR FORM STYLES
   Overrides for the Elementor Pro form widget
═══════════════════════════════════════════════════════════ */

.elementor-field-group label.elementor-field-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cmb-text);
  margin-bottom: 6px;
}

.elementor-field-textual,
.elementor-field-textual:focus,
.elementor-select-wrapper select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cmb-text);
  border: 1.5px solid var(--cmb-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--cmb-white) !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.elementor-field-textual:focus {
  border-color: var(--cmb-purple-mid) !important;
  box-shadow: 0 0 0 3px rgba(74, 52, 144, 0.12) !important;
  outline: none !important;
}

.elementor-field-textual::placeholder {
  color: var(--cmb-text-faint);
}