/* K Core CSS */

/* GLOBAL settings from branding-settings-php */

:root {

    --container-width: 1366px;
    
    /* Output from Branding Settings:
    --heading-font
    --heading-weight
    --body-font
    --body-weight   
    --h1-size
    --h2-size
    --h3-size
    --h4-size
    --body-size */

    /* COLORS

    --button-bg-dunkel
    --button-bg-hell
    --button-text-dunkel
    --button-text-hell
    --heading-light
    --heading-dark
    --body-light
    --body-dark
    --link-color
    --bg-light
    --bg-dark   
    
    Color Palette
    --primary
    --primary-lighter
    --primary-light
    --primary-dark
    --primary-darker

    --secondary
    --secondary-lighter
    --secondary-light
    --secondary-dark
    --secondary-darker

    */

      /* Brand colors - could use hex for ease of use*/
    --clr-primary: var(--button-bg-dunkel);
    --clr-secondary: var(--button-bg-hell);
    --clr-text-dark: var(--button-text-dunkel);
    --clr-text-light: var(--button-text-hell);

    --clr-bg-light: var(--bg-light);
    --clr-bg-dark: var(--bg-dark);

    --clr-h-dark: var(--heading-dark);
    --clr-h-light: var(--heading-light);
    --clr-link: var(--link-color); /* Accent */
    --clr-text-light: var(--body-light);
    --clr-text-dark: var(--body-dark);

    --clr-primary-125: rgba(var(--clr-secondary), 0.125);

    /* Additional Colors */
    --clr-tertiary: hsl(235°, 93%, 55%);
    --clr-accent: hsl(235°, 93%, 55%);
    --clr-alternate: hsl(235°, 93%, 55%);
    --clr-light: hsl(44°, 0%, 100%);
    --clr-dark: #000;

    /* Fonts - Static Overrides */
    --h1-size: clamp(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 0.7648)), 4.5rem);
    --h2-size: clamp(2.6rem, calc(2.6rem + ((1vw - 0.32rem) * 0.5736)), 3.2rem);
    --h3-size: clamp(2.2rem, calc(2.2rem + ((1vw - 0.32rem) * 0.5736)), 2.8rem);
    --h4-size: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0)), 2.4rem);
    --h5-size: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.1912)), 2rem);
    --h6-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.1912)), 1.8rem);

    --body-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0)), 1.6rem);

    --text-line-height: calc(10px + 2ex);
    --h-line-height: calc(7px + 2ex);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* SPACING */
    --space-xs: clamp(1.00rem, calc(1.00rem + 0.0020 * (100vw - 380px)), 1.20rem);
    --space-s: clamp(1.40rem, calc(1.40rem + 0.0020 * (100vw - 380px)), 1.60rem);
    --space-m: clamp(1.80rem, calc(2rem + 0.0061 * (100vw - 380px)), 2rem);
    --space-l: clamp(2.80rem, calc(2.80rem + 0.0041 * (100vw - 380px)), 3.20rem);
    --space-xl: clamp(4.20rem, calc(4.20rem + 0.0061 * (100vw - 380px)), 4.80rem);
    --space-xxl: clamp(5.80rem, calc(5.80rem + 0.0061 * (100vw - 380px)), 6.40rem);

    --space-gap: clamp(1.80rem, calc(2rem + 0.0061 * (100vw - 380px)), 2rem);

    --space-section: clamp(10.00rem, calc(10.00rem + 0.0203 * (100vw - 380px)), 12.00rem);

    --section-space-side: clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 4.7801)), 6rem);
    --section-space-top: clamp(3rem, calc(1rem + ((1vw - 0.32rem) * 4.7801)), 6rem);


    --grid-gap: clamp(1.80rem, calc(2rem + 0.0061 * (100vw - 380px)), 2rem);
    --grid-gap-s: var(--space-l) var(--space-m);
    --card-gap: var(--space-m);
    --content-gap: calc(var(--space-m) * 1.5);
    --container-gap: var(--space-xxl);
    --padding-section: var(--space-section) var(--space-m);
    --offset: 80px;

    /* Border Radius */
    --radius-xs: 0.3rem;    /* 3px */
    --radius-s: 0.5rem;    /* 5px */
    --radius-m: 0.8rem;    /* 8px */
    --radius-l: 1.6rem;    /* 16px */
    --radius-xl: 3.2rem;   /* 32px */
    --radius-full: 50%;     /* For pills/rounded buttons */

      /* Box Shadows */
    --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);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

      /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

   --base-transition: all 0.3s ease;


  }
  

/* COMPONENTS */

body {
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  color: var(--body-dark)
}

/* Dashboard stays Inter */
@font-face {
  font-family: 'InterLocal'; /*a name to be used later*/
  src: url('https://karrieren.us/wp-content/plugins/karrieren-core/assets/fonts/inter/inter-v18-latin-regular.woff2'); /*URL to font*/
}

.dashboard-wrapper *:not(svg, i, .dashicons) {
  font-family: 'InterLocal' !important;
}

p {
  font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.1912)), 1.8rem);
}

h1 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: var(--h1-size);
  line-height: 1.2;
}

h2 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: var(--h2-size);
  color: var(--heading-dark)
}

h3 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: var(--h3-size);
  color: var(--heading-dark)
}

h4 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: var(--h4-size);
}

.h-dark {
  color: var(--heading-dark);
}

.h-light {
  color: var(--heading-light);
}


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

a {
   cursor: pointer;
}

a:hover {
  cursor: pointer;
}

img {
   border-radius: var(--radius-l);
}
  
/* COMPONENT Classes */

.benefits-box {
  transition: all 0.3s ease;
}

.benefits-box:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}


.stellenanzeige-item-row {
  transition: var(--base-transition);
}

.stellenanzeige-item-row:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

.nav-link {
  transition: var(--base-transition);
}

.nav-link:hover {
  transform: translateY(2px);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.6);
  text-underline-offset: 8px;
}


.logo-wrapper img {
   border-radius: 0px;
}

.img-border {
  border-radius: var(--radius-l);
}

.button {
  border-radius: var(--radius-m);
  font-size: var(--text-size-body);
  cursor: pointer;
  padding: 1rem 2rem;
}

.button-dark {
  background-color: var(--button-bg-dunkel);
  color: var(--button-text-hell);
}

.button-light {
  background-color: var(--button-bg-hell);
  color: var(--button-text-dunkel);
}

.cta-button {
  transition: all 0.3s ease;
}

.cta-button:hover {
  filter: brightness(0.95) saturate(1.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transform: scale(0.97);
  cursor: pointer;
}

.hover-scale {
  transition: all 0.3s ease;
}

.hover-scale:hover {
  /* filter: brightness(0.95) saturate(1.05); */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transform: scale(0.97);
  cursor: pointer;
}

/*Button mit Bubble*/
.bubble-button {
  position: relative;  /* Required for absolute positioning of pseudo-element */
  border-radius: var(--radius-l);
  font-size: var(--text-size-m);
  flex: 0 0 auto;
  margin-top: 0.5rem;
}


.bubble-button[data-sa-count]::before {
  content: attr(data-sa-count);  /* Use the data-count attribute value */
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: var(--button-bg-dunkel);  /* Customize color as needed */
  color: var(--button-text-hell);
  border-radius: 50%;
  border: 1px var(--clr-light) solid;
  min-width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: Hide the bubble when count is zero */
.bubble-button[data-sa-count="0"]::before {
  display: none;
}

.secondary-button {
  background-color: #fff;
  border: 1px solid var(--clr-primary);
  color: var(--clr-text-dark);
}

.bewerben-button {
  background-color: var(--button-bg-dunkel);
  color: var(--button-text-hell);
  border-radius: var(--radius-m);
  cursor: pointer;
}

/* Icon on Single SA Page */
.icon-itself > i {
  color: var(--clr-primary);
}

@media (max-width: 480px) {
  .bewerben-button {
    padding: 0.6rem 8rem;
  }
}

.header-nav-link {
  font-size: var(--text-size-m);
}

.header-nav-link:hover {
  font-size: var(--text-size-m);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.5);
  text-underline-offset: 6px;
}

.subheadline {
  font-size: var(--text-size-l);

}

  /* UTILITY classes */

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

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


  
  .text-hell {
    color: var(--button-text-hell);
  }

  .text-size-xs {
    font-size: var(--text-size-xs);
  }

  .text-size-s {
    font-size: var(--text-size-s);
  }

  .text-size-body {
    font-size: var(--text-size-body); /*what user sets into --body-size*/
  }

  .text-size-m {
    font-size: clamp(1.80rem, calc(1.80rem + 0.0041 * (100vw - 380px)), 1.80rem);
    /* font-size: var(---text-size-m); 18px*/
  }

  .text-size-l {
    font-size: var(--text-size-l); /*24px - 2.4rem*/
  }

  .text-size-xs {
    font-size: var(--text-size-xs);
  }

  .text-align-center {
    text-align: center;
  }

  .text-semi-bold {
    font-weight: 600;
  }

  .text-bold {
    font-weight: 700;
  }

  .h-line-height {
    line-height: var(--heading-line-height);
  }

  .text-line-height {
    line-height: var(--text-line-height);
  }

  .margin-0 {
    margin: 0;
  }