/* Source #935: YOBB – Header Profile Menu CSS */
/* ==================================================
   YOBB – HEADER PROFILE MENU V2

   Visuaaliset arvot:
   YOBB – Global Component Styles V13+

   Header-kohtainen CSS hoitaa vain:
   - profiilitriggerin mitoituksen
   - dropdownin layoutin
   - positionoinnin
================================================== */


/* ==================================================
   WRAPPER
================================================== */

.yobb-header-profile-widget,
.yobb-header-profile-widget > .elementor-widget-container {
  display: flex !important;
  width: auto !important;
  max-width: none !important;

  align-items: center;
  justify-content: center;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}


.yobb-header-profile-menu {
  position: relative;
  z-index: 1000;

  display: flex;
  width: auto;

  align-items: center;
  justify-content: center;

  line-height: 0;
}

.yobb-employer-mobile-nav {
  display: none;
}


/* ==================================================
   PROFIILIKUVAPAINIKE

   Ei ympyrä:
   käyttää Globalin card-radiusia.
================================================== */

.yobb-header-profile-trigger,
.yobb-header-profile .yobb-header-profile-trigger {
  appearance: none !important;

  display: flex !important;

  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  align-items: center;
  justify-content: center;

  overflow: hidden !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 2px solid var(--yobb-secondary) !important;

  border-radius:
    var(--yobb-card-radius) !important;

  background:
    var(--yobb-secondary) !important;

  /*
   * Primary-vihreä varjostus.
   */
  box-shadow:
    0 5px 16px
    color-mix(
      in srgb,
      var(--yobb-primary) 42%,
      transparent
    ) !important;

  color: var(--yobb-text);

  line-height: 0 !important;

  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}


.yobb-header-profile-trigger:hover,
.yobb-header-profile-trigger:focus-visible {
  transform: translateY(-1px);

  box-shadow:
    0 7px 20px
    color-mix(
      in srgb,
      var(--yobb-primary) 58%,
      transparent
    ) !important;
}


.yobb-header-profile-trigger:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--yobb-primary) 24%,
      transparent
    );

  outline-offset: 3px;
}


/* ==================================================
   PROFIILIKUVA

   Tarkka selector estää mobiiliheaderin vanhaa
   .yobb-header-profile img -sääntöä pakottamasta
   kuvaa takaisin ympyräksi.
================================================== */

.yobb-header-profile-trigger
.yobb-header-profile-image,
.yobb-header-profile
.yobb-header-profile-trigger
.yobb-header-profile-image {
  display: block !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;

  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  border-radius:
    calc(
      var(--yobb-card-radius) - 2px
    ) !important;

  object-fit: cover !important;
  object-position: center !important;
}


/* ==================================================
   VARAKUVA
================================================== */

.yobb-header-profile-placeholder {
  display: flex !important;

  width: 100% !important;
  height: 100% !important;

  align-items: center;
  justify-content: center;

  border-radius:
    calc(
      var(--yobb-card-radius) - 2px
    ) !important;

  background:
    var(--yobb-primary);

  color:
    var(--yobb-secondary);

  font-family:
    var(--yobb-font-heading);

  font-size: 20px;
  font-weight: 600;
}


/* ==================================================
   DROPDOWN
================================================== */

.yobb-header-profile-dropdown {
  position: absolute;

  top:
    calc(
      100% + var(--yobb-space-sm)
    );

  right: 0;

  width: 240px;
  overflow: hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--yobb-text) 12%,
      transparent
    );

  border-radius:
    var(--yobb-card-radius);

  background:
    var(--yobb-secondary);

  box-shadow:
    0 18px 44px
    color-mix(
      in srgb,
      var(--yobb-text) 18%,
      transparent
    );
}


.yobb-header-profile-dropdown[hidden] {
  display: none !important;
}


/* ==================================================
   KÄYTTÄJÄN TIEDOT
================================================== */

.yobb-header-profile-user {
  display: grid;

  gap: 3px;

  padding:
    var(--yobb-space-md);

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--yobb-text) 10%,
      transparent
    );
}


.yobb-header-profile-user strong {
  overflow-wrap: anywhere;

  color:
    var(--yobb-text);

  font-family:
    var(--yobb-font-heading);

  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}


.yobb-header-profile-user span {
  overflow-wrap: anywhere;

  color:
    color-mix(
      in srgb,
      var(--yobb-text) 62%,
      transparent
    );

  font-family:
    var(--yobb-font-body);

  font-size: 12px;
  line-height: 1.35;
}


/* ==================================================
   VALIKKOLINKIT
================================================== */

.yobb-header-profile-links {
  display: grid;

  padding:
    var(--yobb-space-xs);
}


.yobb-header-profile-links a,
.yobb-header-profile-links a:visited {
  display: flex;

  min-height: 44px;

  align-items: center;

  padding:
    var(--yobb-space-sm)
    12px;

  border-radius:
    var(--yobb-button-radius);

  color:
    var(--yobb-text) !important;

  font-family:
    var(--yobb-font-ui);

  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;

  text-decoration: none !important;

  transition:
    background-color 160ms ease,
    color 160ms ease;
}


.yobb-header-profile-links a:hover,
.yobb-header-profile-links a:focus-visible {
  background:
    color-mix(
      in srgb,
      var(--yobb-primary) 10%,
      var(--yobb-secondary)
    );

  color:
    var(--yobb-text) !important;
}


.yobb-header-profile-logout {
  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--yobb-text) 8%,
      transparent
    );
}


/* ==================================================
   MOBIILI

   Nykyinen header-CSS määrittää profiilikuville
   omia 40 px / ympyrä -sääntöjä.
   Nämä ovat tarkoituksella tarkempia.
================================================== */

@media (max-width: 767px) {

  .yobb-mobile-bar {
    position: relative;
    overflow: visible !important;
  }

  .yobb-mobile-bar .yobb-header-profile,
  .yobb-mobile-bar .yobb-header-profile > .elementor-widget-container,
  .yobb-mobile-bar .yobb-header-profile .elementor-shortcode,
  .yobb-mobile-bar .yobb-header-profile-menu {
    position: static;
  }

  .yobb-employer-mobile-nav {
    position: absolute;
    z-index: 1002;
    top: 50%;
    left: 10px;
    display: block;
    line-height: 1;
    transform: translateY(-50%);
  }

  .yobb-mobile-bar .yobb-employer-mobile-nav__trigger {
    appearance: none;
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 2px solid var(--yobb-secondary, #fff) !important;
    border-radius: 12px;
    background: var(--yobb-secondary, #fff) !important;
    box-shadow: 0 5px 14px rgba(5, 61, 29, 0.16) !important;
    color: var(--yobb-text, #053D1D) !important;
    cursor: pointer;
  }

  .yobb-mobile-bar .yobb-employer-mobile-nav__trigger:hover,
  .yobb-mobile-bar .yobb-employer-mobile-nav__trigger:focus-visible,
  .yobb-mobile-bar .yobb-employer-mobile-nav__trigger[aria-expanded='true'] {
    background: color-mix(in srgb, var(--yobb-primary, #43C14D) 8%, #fff) !important;
  }

  .yobb-mobile-bar .yobb-employer-mobile-nav__trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--yobb-text, #053D1D) 24%, transparent);
    outline-offset: 2px;
  }

  .yobb-employer-mobile-nav__icon {
    display: grid;
    width: 20px;
    gap: 4px;
  }

  .yobb-employer-mobile-nav__icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .yobb-employer-mobile-nav__trigger[aria-expanded='true']
  .yobb-employer-mobile-nav__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .yobb-employer-mobile-nav__trigger[aria-expanded='true']
  .yobb-employer-mobile-nav__icon span:nth-child(2) {
    opacity: 0;
  }

  .yobb-employer-mobile-nav__trigger[aria-expanded='true']
  .yobb-employer-mobile-nav__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .yobb-employer-mobile-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(278px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--yobb-text, #053D1D) 12%, transparent);
    border-radius: var(--yobb-card-radius, 14px);
    background: var(--yobb-secondary, #fff);
    box-shadow: 0 18px 44px rgba(5, 61, 29, 0.2);
  }

  .yobb-employer-mobile-nav__dropdown[hidden] {
    display: none !important;
  }

  .yobb-employer-mobile-nav__links {
    display: grid;
    gap: 3px;
    padding: 6px;
  }

  .yobb-employer-mobile-nav__links a,
  .yobb-employer-mobile-nav__links a:visited {
    display: flex;
    min-height: 42px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--yobb-text, #053D1D) !important;
    font-family: var(--yobb-font-ui), sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
  }

  .yobb-employer-mobile-nav__links a:hover,
  .yobb-employer-mobile-nav__links a:focus-visible,
  .yobb-employer-mobile-nav__links a[aria-current='page'] {
    background: color-mix(in srgb, var(--yobb-primary, #43C14D) 12%, #fff);
  }

  .yobb-employer-mobile-nav__links .yobb-employer-mobile-nav__primary,
  .yobb-employer-mobile-nav__links .yobb-employer-mobile-nav__primary:visited {
    justify-content: center;
    margin-top: 3px;
    background: var(--yobb-primary, #43C14D);
    color: var(--yobb-secondary, #fff) !important;
    text-align: center;
  }

  .yobb-header-profile-trigger,
  .yobb-header-profile
  .yobb-header-profile-trigger {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }


  .yobb-header-profile-trigger
  .yobb-header-profile-image,
  .yobb-header-profile
  .yobb-header-profile-trigger
  .yobb-header-profile-image {
    width: 100% !important;
    height: 100% !important;

    border: 0 !important;

    border-radius:
      calc(
        var(--yobb-card-radius) - 2px
      ) !important;
  }


  .yobb-header-profile-dropdown {
    width:
      min(
        240px,
        calc(100vw - 24px)
      );
  }
}