/* KommMit Prien - Design System */

/* ============================================
   DESIGN TOKENS (Brand Colors & Typography)
   Edit these to change the entire site styling
   ============================================ */
:root {
  /* Brand Colors - Official KomMit Palette */
  --color-primary: #B8B5FF;        /* Light purple - main brand color */
  --color-accent: #F9E693;         /* Light yellow - calls-to-action */
  --color-accent-cyan: #89CEE1;    /* Light cyan - alternative accent */
  --color-text: #626262;           /* Medium gray - body text */
  --color-background: #ffffff;     /* White - backgrounds */
  --color-background-light: #EEEEEE; /* Very light gray - alternate backgrounds */
  --color-dark: #000000;           /* Black - dark elements */

  /* Additional Brand Colors */
  --color-yellow-alt: #F3DF7F;     /* Alternative yellow */
  --color-blue-purple: #8FA5F3;    /* Blue-purple accent */
  --color-cyan-alt: #65C0D9;       /* Alternative cyan */

  /* Typography */
  --font-body: 'Noto Sans', sans-serif;
  --font-heading: 'Noto Sans Display', sans-serif;

  /* Spacing & Layout */
  --container-max: 1280px;
  --section-padding: 5rem;
  --card-radius: 0.75rem;

  /* Effects */
  --transition: all 0.3s ease-in-out;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* ============================================
   BASE STYLES
   ============================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 900;
}

main {
  position: relative;
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.text-primary {
  color: var(--color-primary);
}

.text-accent {
  color: var(--color-accent);
}

.text-body {
  color: var(--color-text);
}

.text-dark {
  color: var(--color-dark);
}

.text-muted {
  color: #999999;
}

.font-black {
  font-weight: 900;
}

/* Logo specific styles */
.logo-condensed {
  font-stretch: 62.5%;
}

/* Responsive logo sizing - mobile-first approach */
.logo-image {
  height: 40px;           /* Mobile: compact for small screens */
  width: auto;
  display: block;
  transition: var(--transition);
}

@media (min-width: 640px) {
  .logo-image {
    height: 50px;         /* Tablet: slightly larger */
  }
}

@media (min-width: 768px) {
  .logo-image {
    height: 56px;         /* Desktop: prominent brand presence */
  }
}

@media (min-width: 1024px) {
  .logo-image {
    height: 64px;         /* Large desktop: maximum visibility */
  }
}

/* Footer logo - slightly larger for visual hierarchy */
.logo-image-footer {
  height: 56px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .logo-image-footer {
    height: 72px;         /* Larger footer logo on desktop */
  }
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-accent-cyan {
  background-color: var(--color-accent-cyan);
}

.bg-dark {
  background-color: var(--color-dark);
}

.bg-white {
  background-color: var(--color-background);
}

.bg-gray-light {
  background-color: var(--color-background-light);
}

/* ============================================
   BUTTON STYLES
   ============================================ */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-dark);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.btn-primary:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.btn-primary-sm {
  background-color: var(--color-primary);
  color: var(--color-dark);
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  transition: var(--transition);
}

.btn-primary-sm:hover {
  opacity: 0.85;
}

.btn-secondary {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  background-color: transparent;
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

/* Navigation Links */
.nav-link {
  color: var(--color-dark);
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--color-primary);
}

/* ============================================
   CARD STYLES
   ============================================ */
.card {
  background-color: var(--color-background);
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

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

.card-accent-red {
  border-left: 4px solid var(--color-accent);
}

.card-accent-cyan {
  border-left: 4px solid var(--color-accent-cyan);
}

.card-accent-yellow {
  border-left: 4px solid var(--color-accent);
}

/* ============================================
   SECTION STYLES
   ============================================ */
.section {
  padding: var(--section-padding) 0;
}

.section-title {
  color: var(--color-dark);
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3rem;
  }
}

.section-description {
  color: var(--color-text);
  font-size: 1.25rem;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
  max-width: var(--container-max);
}

/* ============================================
   ICON STYLES
   ============================================ */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

.icon-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.icon-circle-cyan {
  background-color: var(--color-accent-cyan);
}

.icon-circle-yellow {
  background-color: var(--color-accent);
}

.icon-circle-primary {
  background-color: var(--color-primary);
}

/* ============================================
   PROSE STYLING (Legal Pages)
   ============================================ */
.prose {
  color: #4B5563;
  line-height: 1.75;
}

.prose strong {
  color: #111827;
  font-weight: 600;
}

.prose a {
  text-decoration: none;
}

.prose a:hover {
  text-decoration: underline;
}

/* ============================================
   COMPONENT SPECIFIC
   ============================================ */
#mobile-menu {
  transition: var(--transition);
}

.pointer-events-none {
  pointer-events: none;
}