/*
Theme Name:   SKILLLS Child
Theme URI:    https://www.skillls.at
Description:  Astra Child Theme für Way More SKILLLS
Author:       Way More SKILLLS FlexCo
Author URI:   https://www.skillls.at
Template:     astra
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:  skillls-child
*/

/* ============================================================
   CI-FARB-TOKENS
   ============================================================ */
:root {
  /* Primärfarben */
  --color-blue:        #187A9F;
  --color-purple-dark: #65599E;

  /* Ableitungen */
  --color-blue-light:  #e8f4f8;
  --color-blue-dark:   #0f5570;
  --color-orange-light:#fdf3e0;

  /* Neutrals */
  --color-white:       #ffffff;
  --color-off-white:   #f8f8f8;
  --color-gray-light:  #ebebeb;
  --color-gray:        #888888;
  --color-gray-dark:   #444444;
  --color-black:       #1a1a1a;

  /* Semantisch */
  --color-primary:     var(--color-blue);
  --color-secondary:   var(--color-purple-dark);
  --color-accent:      #E69732;
  --color-text:        var(--color-black);
  --color-text-muted:  var(--color-gray);
  --color-bg:          var(--color-white);
  --color-bg-subtle:   var(--color-off-white);
  --color-border:      var(--color-gray-light);

  /* Produkt-spezifisch */
  --color-barrierefrei:      var(--color-blue);
  --color-faechervernetzung: var(--color-purple-dark);

  /* ============================================================
     TYPOGRAFIE
     ============================================================ */
  --font-sans:   'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-serif:  Georgia, 'Times New Roman', serif;

  --text-xs:    0.75rem;   /*  12px */
  --text-sm:    0.875rem;  /*  14px */
  --text-base:  1rem;      /*  16px */
  --text-md:    1.125rem;  /*  18px */
  --text-lg:    1.25rem;   /*  20px */
  --text-xl:    1.5rem;    /*  24px */
  --text-2xl:   2rem;      /*  32px */
  --text-3xl:   2.5rem;    /*  40px */
  --text-4xl:   3rem;      /*  48px */

  --weight-regular: 400;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ============================================================
     SPACING & LAYOUT
     ============================================================ */
  --space-xs:   0.25rem;  /*  4px */
  --space-sm:   0.5rem;   /*  8px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4rem;     /* 64px */
  --space-4xl:  6rem;     /* 96px */

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full:9999px;

  --max-width:  1100px;
  --max-width-text: 720px;

  /* ============================================================
     SHADOWS & TRANSITIONS
     ============================================================ */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAFIE-BASIS
   Bewusst KEINE Farb-Overrides auf globalen h-Tags —
   Elementor-Widget-Farben sollen erhalten bleiben.
   Farben nur über spezifische Klassen setzen.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-top: 0;
  /* color: absichtlich nicht gesetzt */
}

/* Nur innerhalb unserer eigenen Sektionen Farbe setzen */
.skillls-section h1,
.skillls-section h2,
.skillls-section h3,
.skillls-section h4,
.skillls-section h5,
.skillls-section h6 {
  color: var(--color-black);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-md);
  max-width: var(--max-width-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-blue-dark);
}

/* ============================================================
   LAYOUT-HELFER
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.section {
  padding-block: var(--space-4xl);
}

.section-sm {
  padding-block: var(--space-2xl);
}

/* Zettelkasten-Card */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* Produkt-Karten Akzente */
.card--barrierefrei {
  border-top: 4px solid var(--color-barrierefrei);
}
.card--faechervernetzung {
  border-top: 4px solid var(--color-faechervernetzung);
}
.card--circular {
  border-top: 4px solid var(--color-accent);
}

/* ============================================================
   NAVIGATION (Astra Override)
   ============================================================ */
.ast-primary-header-bar {
  border-bottom: 1px solid var(--color-border);
}

/* Fixierter Header */
.main-header-bar,
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: white !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Mobile Hamburger — schwarz auf weißem Header */
.ast-button-wrap .menu-toggle,
.ast-mobile-menu-trigger-wrap,
button.menu-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--color-black) !important;
}
.menu-toggle .mobile-menu-open,
.menu-toggle span,
.ast-mobile-menu-trigger svg,
.ast-mobile-menu-trigger path {
  color: var(--color-black) !important;
  fill: var(--color-black) !important;
  stroke: var(--color-black) !important;
}

/* Mobile Dropdown — weißer Hintergrund, schwarze Schrift (max. Kontrast) */
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .main-navigation,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer .menu-item,
.ast-mobile-popup-drawer .sub-menu,
.ast-mobile-popup-drawer ul,
.ast-mobile-popup-drawer li,
.main-header-bar-navigation,
.main-header-bar-navigation .main-header-menu,
.main-header-bar-navigation .menu-item {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
.ast-mobile-popup-drawer .menu-item a,
.ast-mobile-popup-drawer .main-navigation a,
.ast-mobile-popup-drawer .menu-link,
.main-header-bar-navigation .menu-item a,
.main-header-bar-navigation a,
.main-header-bar-navigation .menu-link {
  color: #1a1a1a !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
.ast-mobile-popup-drawer .menu-item a:hover,
.ast-mobile-popup-drawer .menu-item a:focus,
.main-header-bar-navigation .menu-item a:hover,
.main-header-bar-navigation .menu-item a:focus {
  color: var(--color-accent) !important;
  background: #fafafa !important;
  background-color: #fafafa !important;
}

/* Abstand zwischen Header und Seiteninhalten */
.site-content,
#content,
.ast-container > main {
  scroll-margin-top: 80px;
}

.skillls-section:first-of-type,
.su-hero,
.sh-hero,
.sb-hero,
.sf-hero,
.sk-hero {
  padding-top: 6rem !important;
}

/* Navigation Links: dunkel und lesbar */
.main-header-bar .main-header-menu .menu-item a,
.main-header-bar .main-navigation a {
  color: var(--color-gray-dark) !important;
}
.main-header-bar .main-header-menu .menu-item a:hover,
.main-header-bar .main-navigation a:hover {
  color: var(--color-primary) !important;
}

/* ============================================================
   FOOTER (Astra Override)
   WCAG: Orange auf Weiß = 2.4:1 — nicht konform. Fix auf Dunkel.
   ============================================================ */
.site-footer,
.site-footer .site-above-footer-wrap,
.site-footer .ast-builder-grid-row-container {
  background-color: var(--color-black) !important;
}

/* Footer Links & Text */
.site-footer .menu-link,
.site-footer .footer-navigation a,
.site-footer #astra-footer-menu a {
  color: #cccccc !important; /* 12.6:1 auf #1a1a1a ✓ WCAG AAA */
}
.site-footer .menu-link:hover,
.site-footer #astra-footer-menu a:hover {
  color: #ffffff !important;
}

/* Footer Copyright Text */
.site-footer .ast-footer-copyright p,
.site-footer .ast-footer-copyright span {
  color: #cccccc !important;
}

/* Footer Logo: PNG durch SVG (Light-Version) ersetzen */
.site-footer .wp-image-3359 {
  content: url('https://www.skillls.at/wp-content/uploads/Logo/skillls-logo-light.svg');
  width: 180px !important;
  height: auto !important;
}

/* LinkedIn Icon: größer + weiß */
.ast-builder-social-element svg {
  width: 28px !important;
  height: 28px !important;
}
.ast-builder-social-element {
  color: #cccccc !important;
}
.ast-footer-social-1-wrap .ast-builder-social-element svg path {
  fill: #cccccc !important;
}

#ast-fixed-header .main-header-bar,
.main-header-bar {
  padding-block: var(--space-md);
}

/* ============================================================
   ASTRA OVERRIDES — Farben
   ============================================================ */
.ast-button-wrap .menu-toggle,
.ast-mobile-menu-trigger,
button.menu-toggle {
  color: var(--color-primary);
}

/* Astra Custom Colors überschreiben */
:root {
  --ast-global-color-0: var(--color-primary);
  --ast-global-color-1: var(--color-secondary);
  --ast-global-color-2: var(--color-accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .container {
    padding-inline: var(--space-md);
  }

  .section {
    padding-block: var(--space-3xl);
  }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

/* ============================================================
   WCAG 2.4.1 — pro Viewport nur EIN Header im A11y-Tree.
   Astra regelt das bereits (Breakpoint 921px); dies ist nur
   eine Absicherung mit den echten IDs. display:none entfernt
   das Element aus dem Accessibility-Tree — aria-hidden wäre
   falsch, weil es die jeweils aktive Nav mit-verstecken würde.
   ============================================================ */
@media (min-width: 922px) {
  #ast-mobile-header { display: none !important; }
}
@media (max-width: 921px) {
  #ast-desktop-header { display: none !important; }
}