/* 
Theme Name: Grimm Holding Group
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: BlueCollarWebTech
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   DESIGN SYSTEM — TOKENS (Light + Dark)
   Load this first on every page.
   ========================================================================== */

:root {
  /* ---------- Color primitives (rarely change) ---------- */
  --ds-black: #0B0B0B;
  --ds-white: #FFFFFF;

  /* ---------- Semantic surfaces (defaults = GHG dark) ---------- */
  --ds-bg-main: #0B0B0B;
  --ds-bg-surface: #141414;
  --ds-bg-card: #1C1C1C;
  --ds-bg-elevated: #222222;
  --ds-bg-muted: #111111;

  /* ---------- Text ---------- */
  --ds-text-primary: #FFFFFF;
  --ds-text-secondary: #E2E8F0;
  --ds-text-muted: #94A3B8;
  --ds-text-disabled: #666666;
  --ds-text-inverse: #0B0B0B;

  /* ---------- Brand accent (overridden per theme) ---------- */
  --ds-accent: #8B0000;
  --ds-accent-hover: #A30000;
  --ds-accent-glow: rgba(139, 0, 0, 0.35);
  --ds-accent-subtle: rgba(139, 0, 0, 0.12);
  --ds-accent-contrast: #FFFFFF; /* text on accent */

  /* ---------- Status ---------- */
  --ds-success: #00E676;
  --ds-warning: #F59E0B;
  --ds-danger: #FF1E27;
  --ds-info: #06B6D4;

  /* ---------- Borders ---------- */
  --ds-border: #2D2D2D;
  --ds-border-bright: #444444;
  --ds-border-subtle: rgba(255, 255, 255, 0.08);
  --ds-border-accent: var(--ds-accent);

  /* ---------- Typography ---------- */
  --ds-font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --ds-font-body: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
  --ds-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Fluid type scale */
  --ds-text-hero: clamp(2.4rem, 4vw + 1rem, 4.2rem);
  --ds-text-h1: clamp(2rem, 3.5vw, 3rem);
  --ds-text-h2: clamp(1.6rem, 2.5vw, 2.2rem);
  --ds-text-h3: clamp(1.25rem, 1.5vw, 1.5rem);
  --ds-text-body: clamp(1rem, 0.35vw + 0.9rem, 1.125rem);
  --ds-text-sm: 0.875rem;
  --ds-text-xs: 0.75rem;

  /* ---------- Spacing & layout ---------- */
  --ds-space-section: clamp(60px, 8vw, 120px) clamp(20px, 5%, 80px);
  --ds-space-section-y: clamp(60px, 8vw, 120px);
  --ds-space-section-x: clamp(20px, 5%, 80px);
  --ds-radius: 0px;           /* sharp corporate default */
  --ds-radius-soft: 4px;
  --ds-radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-duration: 0.4s;
  --ds-duration-fast: 0.2s;

  /* ---------- Shadows ---------- */
  --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --ds-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.4);
  --ds-shadow-glow: 0 0 25px var(--ds-accent-glow);
  --ds-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   LIGHT THEME BASE (applied when data-theme="light" or .theme-light)
   ========================================================================== */
[data-theme="light"],
.theme-light {
  --ds-bg-main: #F8FAFC;
  --ds-bg-surface: #FFFFFF;
  --ds-bg-card: #FFFFFF;
  --ds-bg-elevated: #F1F5F9;
  --ds-bg-muted: #E2E8F0;

  --ds-text-primary: #0F172A;
  --ds-text-secondary: #1E293B;
  --ds-text-muted: #475569;
  --ds-text-disabled: #94A3B8;
  --ds-text-inverse: #FFFFFF;

  --ds-border: #E2E8F0;
  --ds-border-bright: #CBD5E1;
  --ds-border-subtle: rgba(15, 23, 42, 0.08);

  --ds-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --ds-shadow-card: 0 12px 32px rgba(15, 23, 42, 0.08);
  --ds-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   DARK THEME BASE (explicit — already the :root default, but useful for toggle)
   ========================================================================== */
[data-theme="dark"],
.theme-dark {
  --ds-bg-main: #0B0B0B;
  --ds-bg-surface: #141414;
  --ds-bg-card: #1C1C1C;
  --ds-bg-elevated: #222222;
  --ds-bg-muted: #111111;

  --ds-text-primary: #FFFFFF;
  --ds-text-secondary: #E2E8F0;
  --ds-text-muted: #94A3B8;
  --ds-text-disabled: #666666;
  --ds-text-inverse: #0B0B0B;

  --ds-border: #2D2D2D;
  --ds-border-bright: #444444;
  --ds-border-subtle: rgba(255, 255, 255, 0.08);

  --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --ds-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.4);
  --ds-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Optional: respect OS preference when no explicit data-theme is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not(.theme-dark) {
    --ds-bg-main: #F8FAFC;
    --ds-bg-surface: #FFFFFF;
    --ds-bg-card: #FFFFFF;
    --ds-bg-elevated: #F1F5F9;
    --ds-bg-muted: #E2E8F0;

    --ds-text-primary: #0F172A;
    --ds-text-secondary: #1E293B;
    --ds-text-muted: #475569;
    --ds-text-disabled: #94A3B8;
    --ds-text-inverse: #FFFFFF;

    --ds-border: #E2E8F0;
    --ds-border-bright: #CBD5E1;
    --ds-border-subtle: rgba(15, 23, 42, 0.08);

    --ds-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --ds-shadow-card: 0 12px 32px rgba(15, 23, 42, 0.08);
    --ds-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
}

/* ==========================================================================
   GLOBAL BASE APPLY
   ========================================================================== */
.ds-page,
.ghg-parent-portal-page,
[class*="brand-"],
[class*="ghg-subsidiary-"] {
  background-color: var(--ds-bg-main);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.ds-section {
  padding: var(--ds-space-section);
  box-sizing: border-box;
  width: 100%;
}

/* ==========================================================================
   DESIGN SYSTEM — SHARED COMPONENTS
   Load after 00-tokens.css
   ========================================================================== */

/* ---------- Buttons ---------- */
.ds-btn,
.ghg-btn .elementor-button,
[class*="ghg-btn-"] {
  font-family: var(--ds-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 18px 40px;
  border: 1px solid var(--ds-accent);
  background-color: transparent;
  color: var(--ds-text-primary);
  border-radius: var(--ds-radius);
  transition: all var(--ds-duration) var(--ds-ease);
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

.ds-btn:hover,
.ghg-btn .elementor-button:hover,
[class*="ghg-btn-"]:hover {
  background-color: var(--ds-accent);
  color: var(--ds-accent-contrast);
  border-color: var(--ds-accent);
  box-shadow: var(--ds-shadow-glow);
  transform: translateY(-2px);
}

.ds-btn-solid {
  background-color: var(--ds-accent);
  color: var(--ds-accent-contrast);
}
.ds-btn-solid:hover {
  background-color: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
}

.ds-btn-ghost {
  border-color: var(--ds-text-primary);
}
.ds-btn-ghost:hover {
  border-color: var(--ds-accent);
  background-color: var(--ds-accent);
}

/* ---------- Headlines ---------- */
.ds-headline,
.ds-h1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-h1);
  font-weight: 700;
  color: var(--ds-text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  position: relative;
  margin-bottom: 1.75em;
}

.ds-headline::after,
.ds-h1.has-accent::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: var(--ds-accent);
}

.ds-headline-center::after {
  left: 50%;
  transform: translateX(-50%);
}

.ds-h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-h2);
  font-weight: 700;
  color: var(--ds-text-primary);
  line-height: 1.25;
}

.ds-h3 {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-h3);
  font-weight: 600;
  color: var(--ds-text-primary);
}

.ds-hero-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-hero);
  font-weight: 700;
  color: var(--ds-text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ds-subtitle {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  color: var(--ds-text-muted);
  line-height: 1.5;
}

/* ---------- Body text ---------- */
.ds-text,
.ds-body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body);
  color: var(--ds-text-secondary);
  line-height: 1.75;
}

.ds-text strong,
.ds-body strong {
  color: var(--ds-text-primary);
  font-weight: 700;
}

.ds-text-muted {
  color: var(--ds-text-muted);
}

.ds-mono {
  font-family: var(--ds-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--ds-text-xs);
}

/* Accent highlight inside titles */
.ds-accent-text,
h1 strong, h2 strong, h3 strong {
  color: var(--ds-accent);
}

/* ---------- Cards ---------- */
.ds-card {
  background-color: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-soft);
  transition:
    border-color var(--ds-duration) var(--ds-ease),
    box-shadow var(--ds-duration) var(--ds-ease),
    background-color var(--ds-duration) var(--ds-ease);
}

.ds-card:hover {
  border-color: var(--ds-accent);
  box-shadow: var(--ds-shadow-glow);
}

.ds-card-surface {
  background-color: var(--ds-bg-surface);
}

/* Accent-border card (top + left common pattern) */
.ds-card-accent {
  border-top: 2px solid var(--ds-accent);
  border-left: 2px solid var(--ds-accent);
  border-right: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  background-color: var(--ds-bg-surface);
}

/* ---------- Sections ---------- */
.ds-section {
  padding: var(--ds-space-section);
  background-color: var(--ds-bg-main);
  color: var(--ds-text-primary);
}

.ds-section-alt {
  background-color: var(--ds-bg-surface);
}

.ds-section-threat,
.ds-section-divider {
  border-top: 1px dashed var(--ds-border);
  border-bottom: 1px dashed var(--ds-border);
}

/* ---------- Image / media wrappers ---------- */
.ds-image-wrapper {
  background: linear-gradient(135deg, var(--ds-bg-elevated) 0%, var(--ds-bg-main) 100%);
  border: 1px solid var(--ds-border);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ds-image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 49%, var(--ds-border) 50%, transparent 51%);
  background-size: 30px 30px;
  opacity: 0.12;
  pointer-events: none;
}

/* ---------- Badges / status pills ---------- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-accent-subtle);
  color: var(--ds-accent);
  border: 1px solid transparent;
}

.ds-badge-success {
  background-color: rgba(0, 230, 118, 0.12);
  color: var(--ds-success);
}
.ds-badge-warning {
  background-color: rgba(245, 158, 11, 0.12);
  color: var(--ds-warning);
}
.ds-badge-danger {
  background-color: rgba(255, 30, 39, 0.12);
  color: var(--ds-danger);
}

/* ---------- Form polish (Elementor forms) ---------- */
.ds-form input,
.ds-form textarea,
.ds-form select,
.elementor-form input,
.elementor-form textarea {
  background-color: var(--ds-bg-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-primary);
  border-radius: var(--ds-radius);
  transition: border-color var(--ds-duration-fast);
}

.ds-form input:focus,
.ds-form textarea:focus,
.elementor-form input:focus,
.elementor-form textarea:focus {
  border-color: var(--ds-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-accent-subtle);
}

/* ---------- Selection ---------- */
::selection {
  background: var(--ds-accent);
  color: var(--ds-accent-contrast);
}

/* ---------- Utility helpers ---------- */
.ds-border-accent-l { border-left: 2px solid var(--ds-accent); }
.ds-border-accent-t { border-top: 2px solid var(--ds-accent); }
.ds-glow { box-shadow: var(--ds-shadow-glow); }
.ds-text-accent { color: var(--ds-accent); }
.ds-bg-main { background-color: var(--ds-bg-main); }
.ds-bg-surface { background-color: var(--ds-bg-surface); }
.ds-bg-card { background-color: var(--ds-bg-card); }