/*
Theme Name: easy competence (Astra Child)
Theme URI: https://www.easycompetence.at
Description: Child-Theme für Astra mit dem Design von easy competence GmbH – Dokumentenmanagement- und Archivsysteme. Optimiert für den Spectra (UAGB) Builder.
Author: easy competence GmbH
Version: 1.0.0
Template: astra
Text Domain: easy-competence
*/

/* ==========================================================================
   Design-Tokens
   ========================================================================== */
:root {
  --ec-deep: #0e4257;          /* Petrol/Navy */
  --ec-deep-2: #0a2f42;        /* dunkler Verlaufston */
  --ec-accent: #f5a623;        /* Orange */
  --ec-accent-dark: #d98c0c;
  --ec-text: #16303d;
  --ec-muted: #5c7482;
  --ec-border: #e2e9ed;
  --ec-surface: #f6f9fb;
  --ec-radius: 12px;
  --ec-shadow: 0 1px 2px rgba(14, 66, 87, .06), 0 12px 32px rgba(14, 66, 87, .09);
  --ec-gradient: linear-gradient(135deg, var(--ec-deep) 0%, var(--ec-deep-2) 100%);
}

body { color: var(--ec-text); font-family: "DM Sans", system-ui, sans-serif; }
h1, h2, h3, h4, .ec-display { font-family: "Outfit", system-ui, sans-serif; letter-spacing: -.02em; }

/* ==========================================================================
   Wiederverwendbare Klassen (in Spectra unter "Erweitert → Zusätzliche CSS-Klasse")
   ========================================================================== */
.ec-hero { background-image: var(--ec-gradient); color: #fff; }
.ec-hero h1, .ec-hero h2, .ec-hero p, .ec-hero li { color: #fff; }

.ec-eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ec-accent);
}

.ec-card {
  background: #fff; border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius); box-shadow: var(--ec-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ec-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 66, 87, .14); }

.ec-card-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--ec-radius); }
.ec-card-dark, .ec-card-dark * { color: #fff; }

.ec-surface { background: var(--ec-surface); }
.ec-deep { background: var(--ec-deep); }
.ec-deep, .ec-deep * { color: #fff; }

.ec-tag {
  display: inline-block; padding: .25rem .7rem; margin: 0 .35rem .35rem 0;
  border: 1px solid var(--ec-border); border-radius: 999px;
  font-size: .8rem; color: var(--ec-muted); background: #fff;
}

.ec-stat .uagb-heading-text,
.ec-stat h3 { color: var(--ec-accent); font-size: clamp(2rem, 4vw, 2.75rem); }

/* Buttons */
.ec-btn-accent .wp-block-button__link,
.ec-btn-accent .uagb-buttons-repeater,
.ast-button.ec-btn-accent {
  background: var(--ec-accent) !important; color: #10303f !important;
  border-radius: 8px !important; font-weight: 600;
}
.ec-btn-accent .wp-block-button__link:hover,
.ec-btn-accent .uagb-buttons-repeater:hover { background: var(--ec-accent-dark) !important; }

.ec-btn-ghost .wp-block-button__link,
.ec-btn-ghost .uagb-buttons-repeater {
  background: transparent !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.45) !important; border-radius: 8px !important;
}

/* Astra Header/Footer Feinschliff */
.ast-primary-header-bar, .site-header { border-bottom: 1px solid var(--ec-border); }
.main-header-menu .menu-link { font-weight: 500; }
.main-header-menu > .menu-item > .menu-link:hover { color: var(--ec-deep) !important; }
.site-footer, .site-footer * { color: #d7e4ea; }
.site-footer { background: var(--ec-deep-2); }
.site-footer a:hover { color: var(--ec-accent); }

/* Spectra Info-Box Angleichung */
.uagb-infobox .uagb-ifb-title { font-family: "Outfit", system-ui, sans-serif; }
.uagb-infobox .uagb-ifb-icon svg { fill: var(--ec-accent); }

@media (max-width: 782px) {
  .ec-hero { text-align: left; }
}

/* Tags, Formulare (aus den Spectra-Vorlagen) */
.ec-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.ec-newsletter, .ec-form { display: flex; flex-wrap: wrap; gap: .75rem; width: 100%; }
.ec-form { flex-direction: column; }
.ec-newsletter input, .ec-form input, .ec-form textarea {
  flex: 1 1 240px; padding: .8rem 1rem; border: 1px solid var(--ec-border);
  border-radius: 8px; background: #fff; font: inherit; color: var(--ec-text);
}
.ec-newsletter button, .ec-form button {
  padding: .8rem 1.6rem; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--ec-accent); color: #10303f; font-weight: 600;
}
.ec-newsletter button:hover, .ec-form button:hover { background: var(--ec-accent-dark); }