/* 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;
}


/* ==================================================
   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-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)
      );
  }
}