/* Brand color overrides (no build needed) */
:root {
  --color-primary: #2C3639;   /* Inkwell */
  --color-secondary: #A27B5B; /* Creme Brulee */
  --color-heading: #2C3639;
  --color-body: #3F4E4F;      /* Lunar Eclipse */
  --color-darkest: #2C3639;
  --color-dark: #3F4E4F;
  --color-light: #DCD7C9;     /* Au Lait */
  --color-lighter: #EFEEE9;
  --color-gray-light: #F5F4F1;
  --primary-opacity: rgba(44, 54, 57, 0.13);
  --secondary-opacity: rgba(162, 123, 91, 0.13);
  --heading-opacity: rgba(44, 54, 57, 0.31);
  --gradient-7: linear-gradient(218.15deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  --gradient-8: linear-gradient(270deg, #a9886e 0%, #2C3639 100%);
  --gradient-10: linear-gradient(180deg, rgba(60,73,76,0.85) 0%, rgba(44,54,57,0.09) 100%);
}

/* Disable gradient utility tokens (keep variables but neutralize usage) */
.no-gradients *,
body {
  --gradient-7: none !important;
  --gradient-8: none !important;
  --gradient-10: none !important;
}

/* Default body fallback */
body { color: var(--color-body); background-color: #fff; }

/* Theme: Dark background (Lunar Eclipse) */
body.hh-theme-dark {
  /* Background */
  background-color: #3F4E4F; /* Lunar Eclipse */
  color: #DCD7C9;            /* Au Lait for text */

  /* Re-map semantic tokens for high contrast on dark bg */
  --color-primary: #A27B5B;   /* Creme Brulee as main CTA */
  --color-secondary: #DCD7C9; /* Au Lait as secondary accent */
  --color-heading: #DCD7C9;   /* Headings light */
  --color-body: #DCD7C9;      /* Body text light */
  --color-darkest: #2C3639;   /* Inkwell for deep accents */
  --color-dark: #3F4E4F;      /* Base dark */

  --primary-opacity: rgba(162, 123, 91, 0.18);
  --secondary-opacity: rgba(220, 215, 201, 0.18);
  --heading-opacity: rgba(220, 215, 201, 0.45);

  --gradient-7: none;
  --gradient-8: none;
  --gradient-10: none;
}

/* Avoid bright sections on dark theme */
.hh-theme-dark .bg-color-white,
.hh-theme-dark .bg-color-extra2,
.hh-theme-dark .rbt-header-wrapper.bg-color-white {
  background-color: #3F4E4F !important;
}

.hh-theme-dark .rbt-separator { border-color: rgba(220,215,201,0.25); }
.hh-theme-dark .ft-title, 
.hh-theme-dark .section-title .title { color: var(--color-heading); }

/* Theme: Warm light background (Au Lait) */
body.hh-theme-au-lait {
  background-color: #DCD7C9; /* Au Lait */
  color: #3F4E4F;           /* Lunar Eclipse as body text */
  /* Tokens keep defaults from :root / brand, just ensure contrasts */
  --color-body: #3F4E4F;
  --color-heading: #2C3639;  /* Inkwell for headings */
}

/* Harmonize section backgrounds on Au Lait theme */
.hh-theme-au-lait .bg-color-white,
.hh-theme-au-lait .bg-color-extra2,
.hh-theme-au-lait .rbt-header-wrapper.bg-color-white {
  background-color: #DCD7C9 !important;
}

.hh-theme-au-lait .rbt-separator { border-color: rgba(44,54,57,0.15); }

/* (Removed previous circular/small image overrides for .rbt-card to restore default template visuals) */

/*----------------------------------
  Header alignment overrides (ensure vertical centering)
  Keep .logo container untouched to not override .d-none.
-----------------------------------*/
.mainbar-row { align-items: center; }
.rbt-header .rbt-header-wrapper .header-left { display: flex; align-items: center; }
.rbt-header .logo a { display: flex; align-items: center; }

/*----------------------------------
  Header logo visibility (safety override)
  Ensure the logo image is always visible in all header states
-----------------------------------*/
.rbt-header .logo-dark { display: block !important; }
.rbt-header .logo-light { display: none !important; }
.rbt-header .logo a img {
  height: 100px !important; /* base +33% (75px * 1.33) */
  width: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive logo sizing */
@media (max-width: 992px) { /* tablets */
  .rbt-header .logo a img { height: 80px !important; } /* 60px * 1.33 */
}
@media (max-width: 576px) { /* phones */
  .rbt-header .logo a img { height: 64px !important; } /* 48px * 1.33 */
}

/* Align logo to the very left with a small margin */
.rbt-header .container { padding-left: 0 !important; }
.rbt-header .header-left { margin-left: 12px; }

/*----------------------------------
  Remove gradients site-wide (buttons, titles, utilities)
-----------------------------------*/
/* Buttons */
.btn-gradient,
.rbt-btn.btn-gradient,
.rbt-btn.btn-border-gradient,
.btn-border-gradient,
.rbt-switch-btn,
.rbt-btn {
  background-image: none !important;
  background: var(--color-primary) !important;
  border-image: none !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Button hover/focus: keep solid colors */
.rbt-btn:hover,
.rbt-btn:focus {
  background: var(--color-darkest) !important;
  border-color: var(--color-darkest) !important;
  color: #fff !important;
}

/* Titles with gradient text */
.section-title .title,
.title,
.gradient-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--color-heading) !important;
}

/* Any gradient background helpers */
[class*="gradient"],
.bg-gradient,
.bg-gradient-1,
.bg-gradient-2,
.bg-gradient-3,
.theme-gradient,
.rainbow-gradient,
.border-gradient,
.border-gradient-2 {
  background-image: none !important;
  border-image: none !important;
}

/* Specific: remove purple/blue gradient on counterup underline */
.rbt-counterup.border-bottom-gradient::before,
.border-bottom-gradient::before {
  background: var(--color-darkest) !important;
}

/*----------------------------------
  Ribbon overrides: horizontal label
  Catch ribbons inside cards and generic usage.
-----------------------------------*/
.rbt-card .rbt-card-img .ribbon,
.rbt-card .ribbon,
.image-wrapper .ribbon,
.ribbon {
  left: 12px !important;
  top: 12px !important;
  transform: none !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  border-radius: 4px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/*----------------------------------
  Werte Claim (global styles)
  Replaces previous inline styles in index.html
-----------------------------------*/
.werte-claim {
  font-size: 2.8rem;
  color: var(--color-primary);
  font-style: italic;
  font-weight: 400;
  max-width: 1000px;
  margin: 0 auto 60px;
  line-height: 1.3;
}

@media (max-width: 992px) {
  .werte-claim { font-size: 3rem; margin-bottom: 40px; }
}
@media (max-width: 576px) {
  .werte-claim { font-size: 2.2rem; }
}

/*----------------------------------
  Ribbon badge over project images
  Works for both .rbt-card-img and generic .image-wrapper containers
-----------------------------------*/
.rbt-card .rbt-card-img,
.image-wrapper {
  position: relative;
}

.ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-block;
  padding: 6px 12px;
  line-height: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--color-primary);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  pointer-events: none;
}

.ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0,0,0,0.12);
  filter: blur(0.2px);
}

/*----------------------------------
  Banner spacing fix for all screen sizes
  Prevent title overlap with logo by adjusting wrapper padding
-----------------------------------*/
.rbt-banner-24 .wrapper {
  padding-top: 200px !important; /* Increase default padding for screens >= 1600px */
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .rbt-banner-24 .wrapper {
    padding-top: 280px !important; /* Increase from 200px to 280px */
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .rbt-banner-24 .wrapper {
    padding-top: 180px !important; /* Increase from 100px to 180px */
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rbt-banner-24 .wrapper {
    padding-top: 160px !important; /* Increase from 80px to 160px */
  }
}

@media only screen and (max-width: 767px) {
  .rbt-banner-24 .wrapper {
    padding-top: 160px !important; /* Increase from 80px to 160px */
  }
}

@media only screen and (max-width: 575px) {
  .rbt-banner-24 .wrapper {
    padding-top: 140px !important; /* Increase from 60px to 140px */
  }
}

/*----------------------------------
  Mobile: Prevent card text clipping
  Ensures bios/descriptions are fully readable on small screens
-----------------------------------*/
@media (max-width: 767.98px) {
  .rbt-card .rbt-card-body .rbt-card-text {
    display: block !important;              /* override -webkit-box */
    line-clamp: initial !important;         /* standard property */
    -webkit-line-clamp: initial !important; /* remove clamp */
    -webkit-box-orient: initial !important;
    white-space: normal !important;         /* allow wrapping */
    overflow: visible !important;           /* no clipping */
    text-overflow: unset !important;        /* no ellipsis */
    max-height: none !important;            /* remove height cap */
  }
}