/* =============================================================================
 * BASELINE — account-menu.css
 * =============================================================================
 *
 * File: /css/account-menu.css
 * Module: KMA ACCOUNT MENU + ACCOUNT POPUP UI
 * Version: 1.0
 * Last Updated: 2026-03-22
 *
 * PURPOSE
 * -------
 * Styles the KMA account popup UI and the Elementor account icon dropdown menu.
 *
 * NOTES
 * -----
 * - Baselined verbatim from user-supplied working source.
 * - No logic changes made.
 * - Original comments, duplication, order, and rule structure preserved.
 *
 * =============================================================================
 */

/* Hide login/register links inside Manage Account popup */
/*.km-manage-account-popup .tml-action-links,
.km-manage-account-popup .tml-links,
.km-manage-account-popup .tml-login,
.km-manage-account-popup .tml-register {
  display: none !important;
}*/

/* =========================================
   KM Account Popup Layout
========================================= */

.km-account-popup {
	max-width: 720px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.km-account-popup {
		padding-top: 30px;
	}
}

.km-account-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.km-account-avatar {
	border-radius: 50%;
	width: 96px;
	height: 96px;
}

/* ---------------------------------------------------------
   Account header identity block
--------------------------------------------------------- */

.km-account-identity {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.km-account-name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.km-account-role {
	font-size: 14px;
	line-height: 1.3;
}

/* ---------------------------------------------------------
   Role badges
--------------------------------------------------------- */

.km-role-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 8px 2px 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f3f4f6;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	vertical-align: middle;
	white-space: nowrap;
}

.km-role-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.km-role-label {
	display: inline-block;
}

.km-role-badge.role-administrator {
	background: #efe7ff;
}

.km-role-badge.role-editor,
.km-role-badge.role-author {
	background: #e8f2ff;
}

.km-role-badge.role-resident {
	background: #eaf7ea;
}

.km-role-badge.role-committee {
	background: #fff3e6;
}

/* ---------------------------------------------------------
   Pending email / popup messages
--------------------------------------------------------- */

.km-msg {
	margin-bottom: 16px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.35;
}

.km-msg-warn {
	background: #fff7d6;
	border: 1px solid rgba(160, 120, 0, 0.18);
	color: #5f4a00;
}

.km-msg-success {
	background: #ebf8ee;
	border: 1px solid rgba(28, 120, 60, 0.18);
	color: #1f5d31;
}

.km-msg-error {
	background: #fdeeee;
	border: 1px solid rgba(170, 40, 40, 0.18);
	color: #7a1f1f;
}

/* ---------------------------------------------------------
   Avatar edit overlay
--------------------------------------------------------- */

.km-account-photo {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 96px;
	cursor: pointer;
}

.km-account-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* bottom gradient overlay */
.km-account-photo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40%;
	background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
	pointer-events: none;
}

/* edit text */
.km-account-avatar-edit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	text-align: center;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-transform: lowercase;
	cursor: pointer;
	user-select: none;
}

/* ---------------------------------------------------------
   Avatar edit overlay visibility
--------------------------------------------------------- */

/* default state */
.km-account-avatar-edit {
	opacity: 0.85;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-shadow:
		0 0 4px rgba(0,0,0,0.9),
		0 0 8px rgba(0,0,0,0.6);
	transition: all .15s ease;
}

/* hover state */
.km-account-photo:hover .km-account-avatar-edit {
	opacity: 1;
	font-size: 15px;
	text-shadow:
		0 0 6px rgba(0,0,0,1),
		0 0 12px rgba(0,0,0,0.9),
		0 0 18px rgba(0,0,0,0.7);
	transform: scale(1.05);
}

.km-account-two-col {
	display: flex;
	gap: 30px;
	align-items: stretch;
}

.km-account-left {
	flex: 1;
}

.km-account-left {
	display: flex;
	flex-direction: column;
}

.km-account-right {
	flex: 1.3;
}

.km-account-right {
	display: flex;
	flex-direction: column;
}

.km-account-row-bio textarea {
	flex: 1;
	resize: vertical;
}

.km-account-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.km-account-row label {
	font-weight: 600;
	margin-bottom: 4px;
}

.km-account-row input,
.km-account-row textarea {
	padding: 6px 8px;
	font-size: 14px;
	height: auto;
}

.km-account-actions {
	margin-top: 20px;
	text-align: right;
}

.km-account-save {
	padding: 8px 18px;
	font-size: 14px;
}

/* ---------------------------------------------------------
   Role panels
--------------------------------------------------------- */

.km-role-panels {
	margin-top: 18px;
	display: grid;
	gap: 14px;
}

.km-role-panel {
	padding: 14px 16px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	background: #fafafa;
}

.km-role-panel h4 {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.25;
}

.km-role-panel ul {
	margin: 0;
	padding-left: 18px;
}

.km-role-panel li {
	margin: 0 0 4px;
}

.km-role-panel-resident {
	background: #f3fbf3;
}

.km-role-panel-committee {
	background: #fff8ef;
}

/* ---------------------------------------------------------
   Use Gravatar link
--------------------------------------------------------- */

.km-account-use-gravatar {
	display: inline-block;
	margin-top: 4px;
	font-size: 14px;
}

/* ---------------------------------------------------------
   Mobile popup layout
--------------------------------------------------------- */

@media (max-width: 767px) {
	.km-account-header {
		align-items: flex-start;
		gap: 14px;
	}

	.km-account-name {
		font-size: 20px;
	}

	.km-account-two-col {
		flex-direction: column;
		gap: 16px;
	}
}

/* =============================================================================
   04A) ACCOUNT ICON MENU — DROPDOWN POSITION + FIT-TO-CONTENT + MATCH THEME
   File: 04a-account-menu.css
   Version: v5 (Baseline Stable)
   Last Updated: 2026-02-16

   CHANGE LOG
   ----------
   v5:
   - Confirmed working baseline.
   - Missing menu item issue traced to external CSS (display:none).
   - Tablet/phone clipping resolved.
   - Duplicate section numbering corrected (04A-9 split into 04A-9A / 04A-9B).
   - No behavioral changes from prior working state.

   PURPOSE
   -------
   Styles ONLY the Elementor Nav Menu widget used as the Account icon menu.

   Goals:
   1) Dropdown is right-justified under the icon.
   2) Dropdown width shrinks to fit its text (no 768px injected width).
   3) Dropdown is pinned just below the header edge.
   4) Dropdown items match other theme dropdown menus.
   5) Tablet/Phone: dropdown is NOT clipped and shows all items.

   IMPORTANT
   ---------
   - Nav Menu widget must have CSS class: .km-account-icon-menu
   - We intentionally override Elementor inline styles with !important.
============================================================================= */


/* =============================================================================
   04A-1) Establish positioning context + prevent clipping
============================================================================= */
.km-account-icon-menu{
  position: relative;
  overflow: visible !important;
}


/* =============================================================================
   04A-2) Dropdown panel: fit-to-content + right alignment
============================================================================= */
.km-account-icon-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown{
  width: max-content !important;
  min-width: 0 !important;
  left: auto !important;
  right: 0 !important;
  transform: none !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  z-index: 99999 !important;

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


/* =============================================================================
   04A-3) UL panel surface + shrink wrap
============================================================================= */
.km-account-icon-menu
.elementor-nav-menu__container.elementor-nav-menu--dropdown
> ul{
  width: max-content !important;
  display: inline-block !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}


/* =============================================================================
   04A-4) Pin dropdown below header / icon
============================================================================= */
.km-account-icon-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container{
  top: calc(100% + 12px) !important;
  left: auto !important;
  right: 0 !important;
}


/* =============================================================================
   04A-5) Defensive override of Elementor inline styles
============================================================================= */
.km-account-icon-menu
.elementor-nav-menu--dropdown.elementor-nav-menu__container[style]{
  width: max-content !important;
  left: auto !important;
  right: 0 !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* =============================================================================
   04A-6) Menu items: padding + dividers + hover background
============================================================================= */
.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item{
  margin: 0 !important;
  padding: 0 !important;
}

.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item > a{
  display: block !important;
  padding: 13px 20px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item:not(:last-child) > a{
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
}

.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item > a:hover,
.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item > a:focus{
  background-color: #6EC1E4 !important;
}

.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item:first-child > a{
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
}

.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item:last-child > a{
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border-bottom: none !important;
}


/* =============================================================================
   04A-7) Hover text styling
============================================================================= */
.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item > a:hover,
.km-account-icon-menu
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > li.menu-item > a:focus{
  color: #0000FF !important;
  text-decoration: underline !important;
}


/* =============================================================================
   04A-8) Account silhouette icon color control
============================================================================= */
.km-account-icon-menu .elementor-menu-toggle svg{
  fill: #000000 !important;
}

.km-account-icon-menu:hover .elementor-menu-toggle svg{
  fill: #A411F1 !important;
}

.km-account-icon-menu .elementor-menu-toggle.elementor-active svg{
  fill: #A411F1 !important;
}


/* =============================================================================
   04A-9A) Tablet/Phone viewport safety
============================================================================= */
@media (max-width: 1024px){

  .km-account-icon-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown{
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
  }

  .km-account-icon-menu
  .elementor-nav-menu__container.elementor-nav-menu--dropdown
  > ul{
    max-width: calc(100vw - 24px) !important;
  }
}


/* =============================================================================
   04A-9B) Failsafe: prevent Elementor full-width dropdown bar
============================================================================= */
.km-account-icon-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container{
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
}


/* =============================================================================
   04A-10) HARD RULE: obey aria-hidden (prevents "always open")
============================================================================= */
.km-account-icon-menu
.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="true"]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.km-account-icon-menu
.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]{
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =============================================================================
   Account icon menu — name below icon box, hide the X icon
   Last updated: 2026-02-19
============================================================================= */

/* 1) Hide the Elementor "close" icon (the X) for this widget only */
.km-account-icon-menu .elementor-menu-toggle__icon--close{
  display: none !important;
}

/* 2) Make the toggle a fixed “icon box” (border stays around icon only) */
.km-account-icon-menu .elementor-menu-toggle{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  /* icon box */
  width: 27px !important;
  height: 27px !important;
  padding: 0 !important;
  border: 2px solid rgb(51, 55, 61) !important;
  border-radius: 20px !important;

  /* keep this box from stretching */
  box-sizing: border-box !important;
}

/* 3) Ensure the OPEN (silhouette) icon is what we see */
.km-account-icon-menu .elementor-menu-toggle__icon--open{
  display: block !important;
}

/* 4) Put the name UNDER the icon box (not inside the border) */
body.logged-in .km-account-icon-menu .elementor-menu-toggle::after{
  content: var(--km-firstname, "") !important;

  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* 5) Needed because ::after is absolutely positioned */
.km-account-icon-menu .elementor-menu-toggle{
  position: relative !important;
}

/* Move silhouette + username up 5px */
.km-account-icon-menu .elementor-menu-toggle {
  position: relative;
  top: -5px;
}

/* 6) When NOT logged in, show "Sign In" under the icon */
body:not(.logged-in) .km-account-icon-menu .elementor-menu-toggle::after{
  content: "Sign In" !important;

  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* =========================================================
   Account icon label — WebKit (Safari/iOS) visibility fix
   Goal: prevent ::after from being clipped/hidden
========================================================= */
.km-account-icon-menu{
  position: relative !important;
}

/* 1) Ensure nothing clips the pseudo-element */
.km-account-icon-menu,
.km-account-icon-menu .elementor-widget-container,
.km-account-icon-menu .elementor-menu-toggle{
  overflow: visible !important;
}

/* 2) Ensure the label can paint above nearby header elements */
.km-account-icon-menu .elementor-menu-toggle{
  z-index: 50 !important;
}

.km-account-icon-menu .elementor-menu-toggle::after{
  z-index: 51 !important;
}