/*
Theme Name:   Megan Gawlinski – Divi Child
Theme URI:    https://megangawlinski.de
Description:  Child Theme für Megan Gawlinski | Digital & Print
              Basiert auf Divi 5 von Elegant Themes.
Author:       Megan Gawlinski
Author URI:   https://megangawlinski.de
Template:     Divi
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:  mg-divi-child
Tags:         accessibility, performance, barrierefreiheit
*/

/* ==========================================================================
   SELF-HOSTED FONTS – Garet
   ========================================================================== */

@font-face {
  font-family: 'Garet-Book';
  src: url('https://megan-gawlinski.de/wp-content/uploads/2026/04/Garet-Book.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garet-Heavy';
  src: url('https://megan-gawlinski.de/wp-content/uploads/2026/04/Garet-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   DESIGN TOKENS – CSS Custom Properties
   Zentrale Farbpalette und Abstufungen für das gesamte Theme.
   Alle Divi-Elemente können diese Variablen verwenden.
   ========================================================================== */
:root {
  /* === Primärfarbe & Abstufungen === */
  --mg-primary:       #0f4947;
  --mg-primary-mid:   #0e8b86;
  --mg-primary-light: #76e7e2;
  --mg-primary-pale:  #cbf8f7;

  /* === Sekundärfarben === */
  --mg-dark:          #2b2b2b;
  --mg-white:         #ffffff;

  /* === Typografie === */
  --mg-font-heading:     'DM Serif Display', Georgia, 'Times New Roman', serif;
  --mg-font-subheading:  'Garet-Book', sans-serif;
  --mg-font-body:        'DM Sans', system-ui, -apple-system, sans-serif;

  /* === Fluid Font Sizes – Aliase auf Divi 5 Global Design Tokens === */
  /* Änderungen in Divi (text-xs usw.) wirken automatisch hier */
  --mg-text-xs:  var(--text-xs);
  --mg-text-s:   var(--text-s);
  --mg-text-m:   var(--text-m);
  --mg-text-l:   var(--text-l);
  --mg-text-xl:  var(--text-xl);
  --mg-text-2xl: var(--text-2xl);
  --mg-text-3xl: var(--text-3xl);
  --mg-text-4xl: var(--text-4xl);
  --mg-text-5xl: var(--text-5xl);

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

  /* === Layout === */
  --mg-container:    1200px;

  /* === Border Radius ===
     Divi 5 definiert --mg-radius-* direkt als Design Tokens.
     Kein Override nötig — child theme verwendet Divis Werte automatisch. */
  --mg-radius-full: 9999px;

  /* === Schatten === */
  --mg-shadow-sm:  0 1px 3px rgba(15,73,71,.08), 0 1px 2px rgba(15,73,71,.06);
  --mg-shadow-md:  0 4px 12px rgba(15,73,71,.12), 0 2px 6px rgba(15,73,71,.08);
  --mg-shadow-lg:  0 10px 30px rgba(15,73,71,.15), 0 4px 12px rgba(15,73,71,.10);

  /* === Animationen === */
  --mg-transition-fast: 150ms ease;
  --mg-transition-base: 250ms ease;
  --mg-transition-slow: 400ms ease;
}

/* ==========================================================================
   ACCESSIBILITY – Barrierefreiheit
   ========================================================================== */

/* Skip-Navigation-Link */
.mg-skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--mg-primary);
  color: var(--mg-white);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--mg-radius-m, 8px);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--mg-transition-base);
}

.mg-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--mg-primary-light);
  outline-offset: 2px;
}

/* Screen-Reader-only Klasse */
.mg-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;
}

/* Globale Fokus-Stile – hoher Kontrast, deutlich sichtbar */
:focus-visible {
  outline: 3px solid var(--mg-primary-mid) !important;
  outline-offset: 3px !important;
  border-radius: var(--mg-radius-xs, 3px) !important;
}

/* Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Spalten in der Header-Zeile vertikal zentrieren */
.mg-header-row.et_pb_row {
  display: flex;
  align-items: center;
}

/* --- Footer Navigation --- */
.mg-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mg-footer-links li {
  margin-bottom: 0.6rem;
}

.mg-footer-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-s);
  transition: color var(--mg-transition-fast);
}

.mg-footer-links a:hover {
  color: var(--mg-white);
}

/* ==========================================================================
   KACHELN / CARDS
   ========================================================================== */

.mg-card h2,
.mg-card h3,
.mg-card .et_pb_module_header {
  text-align: center;
}

.mg-card {
  padding: 2rem;
  border-radius: var(--mg-radius-l, 1rem);
  transition: transform var(--mg-transition-base), box-shadow var(--mg-transition-base);
  height: 100%;
}

/* Icon-Größe in Kacheln */
.mg-card .et_pb_icon,
.mg-card .et-pb-icon,
.mg-card svg {
  font-size: 2rem !important;
  width: 2rem !important;
  height: 2rem !important;
}

.mg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-md);
}

/* Variante: Dunkel */
.mg-card-dark {
  background-color: var(--mg-primary);
}

.mg-card-dark .et_pb_text_inner,
.mg-card-dark p,
.mg-card-dark h2,
.mg-card-dark h3 {
  color: var(--mg-white);
}

.mg-card-dark .et_pb_icon,
.mg-card-dark .et-pb-icon,
.mg-card-dark svg {
  color: var(--mg-white) !important;
  fill: var(--mg-white) !important;
}

/* Variante: Hell */
.mg-card-light {
  background-color: var(--mg-white);
  border: 2px solid var(--mg-primary);
}

.mg-card-light .et_pb_text_inner,
.mg-card-light p,
.mg-card-light h2,
.mg-card-light h3 {
  color: var(--mg-primary);
}

.mg-card-light .et_pb_icon {
  color: var(--mg-primary) !important;
}

/* Variante: Blass */
.mg-card-pale {
  background-color: var(--mg-primary-pale);
}

.mg-card-pale .et_pb_text_inner,
.mg-card-pale p,
.mg-card-pale h2,
.mg-card-pale h3 {
  color: var(--mg-primary);
}

.mg-card-pale .et_pb_icon {
  color: var(--mg-primary) !important;
}

/* ==========================================================================
   DIVI OVERRIDES – Anpassungen am Divi 5 Theme-Stil
   ========================================================================== */

/* Basisschrift */
body,
.et_pb_text,
.et_pb_blurb,
.et_pb_cta {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-m);
  color: var(--mg-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Main Headlines (H1) */
h1,
.et_pb_slide_title {
  font-family: var(--mg-font-heading);
  color: var(--mg-primary);
  line-height: 1.1;
}

/* Subheadlines (H2, H3) und Divi Modul-Überschriften */
h2, h3,
.et_pb_module_header,
.et_pb_cta_title {
  font-family: var(--mg-font-subheading);
  color: var(--mg-primary);
  line-height: 1.2;
}

/* Kleinere Überschriften */
h4, h5, h6 {
  font-family: var(--mg-font-subheading);
  color: var(--mg-primary);
  line-height: 1.3;
}

/* Divi Container-Breite anpassen */
.et_pb_section .et_pb_row {
  max-width: var(--mg-container);
}

/* Divi Farbanpassungen via Akkzentfarbe */
.et_pb_button {
  border-radius: var(--mg-radius-full) !important;
  font-family: var(--mg-font-body);
  font-weight: 600;
  transition:
    background-color var(--mg-transition-fast),
    transform var(--mg-transition-fast),
    box-shadow var(--mg-transition-fast) !important;
}

.et_pb_button:hover {
  transform: translateY(-2px);
  box-shadow: var(--mg-shadow-md);
}

/* ==========================================================================
   CUSTOM COMPONENTS – Wiederverwendbare Klassen für Divi-Module
   ========================================================================== */

/* --- Section Labels --- */
.mg-section-label {
  display: inline-block;
  font-size: var(--mg-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-primary-mid);
  margin-bottom: 0.75rem;
}

/* --- Cards (für Divi Blurb-Module) --- */
.mg-card .et_pb_blurb_content {
  padding: 2rem;
  border-radius: var(--mg-radius-l);
  border: 1px solid var(--mg-primary-pale);
  background-color: var(--mg-white);
  transition: transform var(--mg-transition-base), box-shadow var(--mg-transition-base);
  position: relative;
  overflow: hidden;
}

.mg-card .et_pb_blurb_content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mg-primary), var(--mg-primary-mid));
  opacity: 0;
  transition: opacity var(--mg-transition-base);
}

.mg-card .et_pb_blurb_content:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-lg);
}

.mg-card .et_pb_blurb_content:hover::before {
  opacity: 1;
}

/* Featured Card (dunkler Hintergrund) */
.mg-card-featured .et_pb_blurb_content {
  background-color: var(--mg-primary);
  border-color: var(--mg-primary);
  color: var(--mg-white);
}

.mg-card-featured .et_pb_module_header,
.mg-card-featured h3 {
  color: var(--mg-white);
}

.mg-card-featured .et_pb_blurb_content::before {
  background: var(--mg-primary-light);
  opacity: 1;
}

/* --- Hero Section via Divi --- */
.mg-hero-section {
  background-color: var(--mg-primary);
  position: relative;
  overflow: hidden;
}

.mg-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 50%, rgba(14,139,134,.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(118,231,226,.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.mg-hero-section .et_pb_row {
  position: relative;
  z-index: 1;
}

.mg-hero-section h1,
.mg-hero-section .et_pb_module_header {
  color: var(--mg-white) !important;
  font-size: var(--mg-text-5xl);
  line-height: 1.05;
}

.mg-hero-section .et_pb_text_inner,
.mg-hero-section p {
  color: rgba(255,255,255,.85) !important;
  font-size: var(--mg-text-l);
  line-height: 1.7;
}

.mg-hero-section em {
  color: var(--mg-primary-light);
  font-style: italic;
}

/* --- Portfolio Grid --- */
.mg-portfolio-item {
  position: relative;
  border-radius: var(--mg-radius-l);
  overflow: hidden;
  background-color: var(--mg-white);
  box-shadow: var(--mg-shadow-sm);
  transition: transform var(--mg-transition-base), box-shadow var(--mg-transition-base);
}

.mg-portfolio-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-lg);
}

/* --- CTA-Banner Section --- */
.mg-cta-section {
  background-color: var(--mg-primary-mid) !important;
}

.mg-cta-section h2,
.mg-cta-section .et_pb_module_header {
  color: var(--mg-white) !important;
}

.mg-cta-section p,
.mg-cta-section .et_pb_text_inner {
  color: rgba(255,255,255,.85) !important;
}

/* --- Process Steps --- */
.mg-process-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--mg-primary);
  color: var(--mg-white);
  font-family: var(--mg-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

/* --- Contact Form --- */
.mg-contact-form input,
.mg-contact-form textarea,
.mg-contact-form select,
.et_pb_contact_field input,
.et_pb_contact_field textarea {
  border: 2px solid var(--mg-primary-pale) !important;
  border-radius: var(--mg-radius-m, 8px) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--mg-font-body) !important;
  font-size: var(--mg-text-m) !important;
  transition: border-color var(--mg-transition-fast), box-shadow var(--mg-transition-fast) !important;
}

.mg-contact-form input:focus,
.mg-contact-form textarea:focus,
.et_pb_contact_field input:focus,
.et_pb_contact_field textarea:focus {
  outline: none !important;
  border-color: var(--mg-primary-mid) !important;
  box-shadow: 0 0 0 3px rgba(14,139,134,.15) !important;
}

.et_pb_contact_submit,
.et_pb_button_module_wrapper .et_pb_button {
  background-color: var(--mg-primary) !important;
  color: var(--mg-white) !important;
  border-color: var(--mg-primary) !important;
  border-radius: var(--mg-radius-full) !important;
  font-family: var(--mg-font-body) !important;
  font-weight: 600 !important;
  padding: 0.875rem 2rem !important;
}

.et_pb_contact_submit:hover,
.et_pb_button_module_wrapper .et_pb_button:hover {
  background-color: var(--mg-primary-mid) !important;
  border-color: var(--mg-primary-mid) !important;
  transform: translateY(-2px);
}

/* --- Footer --- */
#main-footer,
.et_pb_section.et_pb_footer_section {
  background-color: var(--mg-primary) !important;
  color: rgba(255,255,255,.7) !important;
}

#footer-widgets .footer-widget h4,
#footer-widgets .footer-widget h3 {
  color: var(--mg-primary-light) !important;
  font-size: var(--mg-text-xs) !important;
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#footer-widgets .footer-widget a {
  color: rgba(255,255,255,.7) !important;
  transition: color var(--mg-transition-fast) !important;
}

#footer-widgets .footer-widget a:hover {
  color: var(--mg-white) !important;
}

#et-footer-nav,
.bottom-footer-wrap {
  background-color: var(--mg-primary) !important;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ==========================================================================
   RESPONSIVE – Mobile-first Anpassungen
   ========================================================================== */

@media (max-width: 980px) {
  .mg-hero-section h1,
  .mg-hero-section .et_pb_module_header {
    font-size: var(--mg-text-4xl);
  }
}

@media (max-width: 767px) {
  .mg-hero-section h1,
  .mg-hero-section .et_pb_module_header {
    font-size: var(--mg-text-3xl);
  }

  .et_pb_button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  #main-header,
  #et-secondary-nav,
  .et_pb_button_module_wrapper { display: none !important; }

  body { font-size: 12pt; color: #000; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}