/*
Theme Name:   GSC Child
Theme URI:    https://gs-qhse.de
Description:  Child Theme für GS - Consulting. QHSE Solutions, basiert auf GeneratePress. Enthält Corporate Identity (Farben, Typografie, Layout-Anpassungen) und QHSE-spezifische Styles.
Author:       GS - Consulting. QHSE Solutions
Author URI:   https://gs-qhse.de
Template:     generatepress
Version:      0.2.0
Text Domain:  gsc-child
*/

/* =========================================================
   CORPORATE IDENTITY — CSS Custom Properties
   Quelle: brandkit/farben.md
   HEX-Werte sind ARBEITSSTAND (Pipette aus Brandkit-Screenshot
   2026-06-08) und werden ersetzt, sobald exakte Codes vorliegen.
   ========================================================= */
:root {
    /* Markenfarben */
    --gsc-primary:        #0F1E33;   /* Marineblau — Vertrauen, Seriosität (Hauptton) */
    --gsc-primary-dark:   #07111F;
    --gsc-primary-light:  #1F3552;
    --gsc-accent:         #C8161D;   /* Rot — Sicherheit/Feuer (NUR sparsam: CTA, Highlights) */
    --gsc-accent-dark:    #9B1015;

    /* Neutrale Skala */
    --gsc-dark:    #1a1a1a;
    --gsc-text:    #2c2c2c;
    --gsc-neutral: #4A4A4A;   /* Mittelgrau aus Brandkit */
    --gsc-muted:   #6b6b6b;
    --gsc-line:    #e2e2e2;
    --gsc-bg-soft: #f5f6f8;
    --gsc-white:   #ffffff;

    /* Statusfarben (für FAQ-Boxen, Hinweise) */
    --gsc-success: #2a7a3a;
    --gsc-warning: #c47a1a;
    --gsc-info:    #1a5a8a;

    /* Typografie — Montserrat aus Brandkit (Headings), Inter für Fließtext */
    --gsc-font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    --gsc-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Spacing-Skala */
    --gsc-space-xs: 0.5rem;
    --gsc-space-sm: 1rem;
    --gsc-space-md: 2rem;
    --gsc-space-lg: 4rem;
    --gsc-space-xl: 6rem;

    /* Radius & Schatten */
    --gsc-radius-sm: 4px;
    --gsc-radius-md: 8px;
    --gsc-shadow-sm: 0 2px 6px rgba(15, 30, 51, 0.08);
    --gsc-shadow-md: 0 6px 18px rgba(15, 30, 51, 0.12);
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */
body {
    font-family: var(--gsc-font-body);
    color: var(--gsc-text);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-family: var(--gsc-font-heading);
    color: var(--gsc-dark);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1, .entry-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); line-height: 1.3; }

a {
    color: var(--gsc-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover,
a:focus {
    color: var(--gsc-accent);
    text-decoration: underline;
}

/* =========================================================
   BUTTONS / CTA
   ========================================================= */
.button,
.wp-block-button__link,
input[type="submit"] {
    background-color: var(--gsc-primary);
    color: var(--gsc-white);
    padding: 0.85rem 1.75rem;
    border-radius: var(--gsc-radius-sm);
    font-weight: 600;
    border: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
}
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
    background-color: var(--gsc-primary-dark);
    color: var(--gsc-white);
    text-decoration: none;
}

/* Akzent-Button für primären CTA (z. B. „Erstgespräch buchen") — sparsam einsetzen */
.button--cta {
    background-color: var(--gsc-accent);
}
.button--cta:hover {
    background-color: var(--gsc-accent-dark);
}

.button--secondary {
    background-color: transparent;
    color: var(--gsc-primary);
    border: 2px solid var(--gsc-primary);
    padding: calc(0.85rem - 2px) calc(1.75rem - 2px);
}
.button--secondary:hover {
    background-color: var(--gsc-primary);
    color: var(--gsc-white);
}

/* =========================================================
   HEADER / SITE-NAVIGATION
   ========================================================= */
.site-header {
    border-bottom: 1px solid var(--gsc-line);
    background-color: var(--gsc-white);
}

.main-navigation .main-nav ul li a {
    font-weight: 500;
    color: var(--gsc-dark);
}
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--gsc-primary);
}

/* =========================================================
   HERO-SEKTION (Startseite)
   ========================================================= */
.gsc-hero {
    background: linear-gradient(135deg, var(--gsc-primary) 0%, var(--gsc-primary-dark) 100%);
    color: var(--gsc-white);
    padding: var(--gsc-space-xl) var(--gsc-space-md);
    text-align: center;
}
.gsc-hero h1 {
    color: var(--gsc-white);
    margin-bottom: var(--gsc-space-sm);
}
.gsc-hero .gsc-hero__claim {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 720px;
    margin: 0 auto var(--gsc-space-md);
}

/* =========================================================
   LEISTUNGS-KARTEN (drei QHSE-Bereiche)
   ========================================================= */
.gsc-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gsc-space-md);
    margin: var(--gsc-space-lg) 0;
}
.gsc-service-card {
    background-color: var(--gsc-white);
    border: 1px solid var(--gsc-line);
    border-radius: var(--gsc-radius-md);
    padding: var(--gsc-space-md);
    box-shadow: var(--gsc-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gsc-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gsc-shadow-md);
}
.gsc-service-card__icon {
    width: 56px;
    height: 56px;
    color: var(--gsc-primary);
    margin-bottom: var(--gsc-space-sm);
}
.gsc-service-card h3 {
    color: var(--gsc-primary);
    margin-bottom: var(--gsc-space-xs);
}

/* =========================================================
   QHSE-BADGE (Q/H/S/E als visueller Anker)
   ========================================================= */
.gsc-qhse-badge {
    display: inline-grid;
    grid-template-columns: repeat(4, auto);
    gap: 4px;
    background-color: var(--gsc-bg-soft);
    padding: 0.5rem;
    border-radius: var(--gsc-radius-sm);
    font-family: var(--gsc-font-heading);
    font-weight: 700;
}
.gsc-qhse-badge span {
    background-color: var(--gsc-primary);
    color: var(--gsc-white);
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    background-color: var(--gsc-dark);
    color: var(--gsc-white);
}
.site-footer a {
    color: var(--gsc-bg-soft);
}
.site-footer a:hover {
    color: var(--gsc-accent);
}

/* =========================================================
   ACCESSIBILITY: Focus-Sichtbarkeit (WCAG 2.1 AA)
   ========================================================= */
*:focus-visible {
    outline: 3px solid var(--gsc-accent);
    outline-offset: 2px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .gsc-hero { padding: var(--gsc-space-lg) var(--gsc-space-sm); }
    .gsc-services { gap: var(--gsc-space-sm); }
}


/* =========================================================
   STARTSEITE — Sidebar aus, Page-Titel aus, Cover voll-breit
   ========================================================= */
body.home .widget-area { display: none; }
body.home .content-area {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}
body.home .inside-article {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
body.home .entry-header,
body.home .page .entry-title { display: none; }
body.home .entry-content > .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.wp-block-cover h1,
.wp-block-cover h2 { color: inherit; }
@media (max-width: 768px) {
  body.home .wp-block-cover h1 { font-size: 2rem !important; }
  body.home .wp-block-cover p { font-size: 1rem !important; }
}