/* ============================================
   SCHULDENBERATUNG BIBERACH — DESIGN SYSTEM
   Foundation: Variables, Resets, Typography, Layout
   ============================================ */

/* === 1. CSS Custom Properties === */
:root {
  /* Brand Colors */
  --sb-primary: #00ABE4;
  --sb-primary-dark: #0090C0;
  --sb-primary-light: #E9F1FA;
  --sb-cta: #FF6B35;
  --sb-cta-dark: #E55A2B;
  --sb-white: #FFFFFF;
  --sb-navy: #1A2B3C;
  --sb-whatsapp: #25D366;
  --sb-danger: #DC3545;
  --sb-success: #28A745;

  /* Text Colors */
  --sb-text: #1A2B3C;
  --sb-text-body: #3A4A5C;
  --sb-text-light: #5A6B7C;
  --sb-text-muted: #8896A6;

  /* Backgrounds */
  --sb-bg: #FFFFFF;
  --sb-bg-alt: #E9F1FA;
  --sb-bg-dark: #1A2B3C;
  --sb-bg-gray: #F7FAFC;

  /* Borders */
  --sb-border: #E2E8F0;
  --sb-border-light: #EDF2F7;

  /* Shadows */
  --sb-shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
  --sb-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --sb-shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --sb-shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --sb-shadow-xl: 0 20px 60px rgba(0,0,0,0.15);

  /* Border Radius */
  --sb-radius-sm: 6px;
  --sb-radius-md: 10px;
  --sb-radius-lg: 14px;
  --sb-radius-xl: 20px;
  --sb-radius-full: 9999px;

  /* Typography */
  --sb-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --sb-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --sb-container: 1200px;
  --sb-gap: 24px;
  --sb-section-py: 80px;

  /* Transitions */
  --sb-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sb-transition: 0.3s var(--sb-ease);
}

/* === 2. GeneratePress Resets === */
/* These are the ONLY rules using !important — overriding GP parent theme */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body .site,
body .site.grid-container,
#page.site.grid-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body .grid-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.grid-100, .grid-parent,
[class*="grid-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#content, .site-content,
#primary, .content-area,
#main, .site-main,
article, .inside-article,
.entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Hide GP default elements */
#right-sidebar, #left-sidebar, .sidebar, #secondary, .widget-area,
.footer-widgets, .footer-widgets-container,
.page .entry-header, .page .page-header, .inside-page-header,
.navigation-search, .search-item,
.site-footer, .site-info, footer.site-footer, .footer-bar,
section.widget, aside.widget {
  display: none !important;
}

/* === 3. Header & Navigation (GP overrides) === */
.site-header {
  background: var(--sb-navy) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  border-bottom: 3px solid var(--sb-primary) !important;
}

.inside-header {
  max-width: var(--sb-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--sb-gap) !important;
  min-height: 68px !important;
}

.site-header .site-title,
.site-header .site-title a,
p.main-title, p.main-title a {
  color: #FFFFFF !important;
  font-family: var(--sb-font-heading) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: -0.3px !important;
}

p.main-title { margin: 0 !important; }

.main-navigation, #site-navigation,
.navigation-bar, .main-navigation .main-nav {
  background: transparent !important;
}

.inside-navigation {
  max-width: var(--sb-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--sb-gap) !important;
  background: transparent !important;
}

.main-navigation a,
.main-navigation .main-nav ul li a,
.menu-item a {
  color: rgba(255,255,255,0.8) !important;
  font-family: var(--sb-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: var(--sb-radius-sm) !important;
  transition: all var(--sb-transition) !important;
  text-decoration: none !important;
}

.main-navigation a:hover,
.main-navigation .main-nav ul li a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: #FFFFFF !important;
  background: rgba(0,171,228,0.15) !important;
}

.menu-toggle, .menu-toggle .mobile-menu {
  color: white !important;
}

@media (max-width: 768px) {
  .main-navigation .main-nav ul {
    background: var(--sb-navy) !important;
  }
  .main-navigation .main-nav ul li a {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 14px 20px !important;
  }
}

/* === 4. Base Typography === */
body {
  font-family: var(--sb-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--sb-text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  color: var(--sb-navy);
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: 42px; font-weight: 800; }
h2 { font-size: 32px; font-weight: 700; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
  margin-bottom: 16px;
  color: var(--sb-text-body);
}

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

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

strong, b { font-weight: 600; }

/* === 5. Layout Utilities === */
.sb-container {
  max-width: var(--sb-container);
  margin: 0 auto;
  padding: 0 var(--sb-gap);
}

/* Grid systems */
.sb-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sb-gap);
}

.sb-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sb-gap);
}

.sb-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sb-gap);
}

.sb-grid-2-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.sb-grid-3-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sb-gap);
}

/* Sections */
.sb-section {
  padding: var(--sb-section-py) 0;
  position: relative;
}

.sb-section--light {
  background: var(--sb-bg-alt);
}

.sb-section--dark {
  background: var(--sb-navy);
  color: rgba(255,255,255,0.9);
}

.sb-section--dark h2,
.sb-section--dark h3 {
  color: #FFFFFF;
}

.sb-section--dark p {
  color: rgba(255,255,255,0.75);
}

.sb-section--cta {
  background: linear-gradient(135deg, var(--sb-primary) 0%, var(--sb-primary-dark) 100%);
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sb-section--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0V12h20V10H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20.5z'/%3E%3C/g%3E%3C/svg%3E");
}

.sb-section--cta h2 { color: #FFFFFF; }
.sb-section--cta p { color: rgba(255,255,255,0.9); }

/* Section title block */
.sb-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.sb-section-header h2 {
  margin-bottom: 12px;
}

.sb-section-header p {
  font-size: 17px;
  color: var(--sb-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Text utilities */
.sb-text-center { text-align: center; }
.sb-text-light { color: var(--sb-text-light); }
.sb-text-white { color: #FFFFFF; }
.sb-mb-0 { margin-bottom: 0; }
.sb-mt-0 { margin-top: 0; }

/* === 6. Responsive Foundations === */
@media (max-width: 1024px) {
  :root {
    --sb-section-py: 64px;
  }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .sb-grid-2-1 { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root {
    --sb-section-py: 48px;
    --sb-gap: 16px;
  }
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  .sb-grid-2 { grid-template-columns: 1fr; }
  .sb-grid-3 { grid-template-columns: 1fr; }
  .sb-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sb-section-header { margin-bottom: 32px; }
}

@media (max-width: 480px) {
  h1 { font-size: 24px; }
  h2 { font-size: 22px; }
  .sb-grid-4 { grid-template-columns: 1fr; }
}