/* Layout */
.home_layout { display: flex; width: 100%; height: 100svh; flex-direction: column; }

/* ===== HEADER ===== */
.home_header {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  padding: 0 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  background-color: #fff; z-index: 100;
}
.home_header__brand { display: inline-flex; align-items: center; text-decoration: none; }
.home_header__logo { height: 44px; width: auto; object-fit: contain; }
.home_header__nav_menu { display: none; } /* Mobile-first */

/* Burger */
.home_header__burger_menu {
  width: 28px; height: 22px; display: flex; flex-direction: column; justify-content: space-between;
  background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 101;
}
.bar { width: 100%; height: 3px; background: #333; border-radius: 2px; transition: opacity .2s ease; }
.home_header__burger_menu:hover .bar { opacity: .75; }

/* ===== MOBILE NAV ===== */
.mobile_nav {
  position: fixed; top: 0; right: -100%; width: 80%; max-width: 360px; height: 100svh;
  background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,.12);
  transition: right .3s ease; z-index: 1000; overflow-y: auto;
}
.mobile_nav.active { right: 0; }
.mobile_nav__content { display: flex; flex-direction: column; height: 100%; padding: 20px; }
.mobile_nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* This separates Home and 'X' */
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9e9e9;
  min-height: 44px; /* Ensures header keeps height */
}
.mobile_nav__logo { display: none; } /* Hide redundant logo */
.mobile_nav__close { background: transparent; border: 0; cursor: pointer; padding: 6px; }
.close_icon { font-size: 32px; color: #333; line-height: 1; }
.mobile_nav__links li { margin-bottom: 8px; }
.mobile_nav__links a {
  display: block; padding: 12px 0; color: #333; text-decoration: none; font-size: 18px; font-weight: 500;
}
.mobile_nav__links a:hover { color: #666; }

/* Overlay */
.mobile_nav__overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 999;
}
.mobile_nav__overlay.active { opacity: 1; visibility: visible; }

/* ===== MAIN CONTENT WRAPPER ===== */
.home_content {
  display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
  overflow: hidden; gap: 16px; padding: 16px;
  max-width: 1200px; margin: 0 auto; /* keeps big screens tidy */
}

/* NEW: Override for full-width hero on homepage */
.home_content.home_content--full_hero {
  max-width: none;
  padding: 0;
  gap: 0;
}

/* ===== DESKTOP (≥769px) ===== */
@media (min-width: 769px) {
  .home_header { height: 80px; padding: 0 60px; }
  .home_header__burger_menu { display: none; }
  
  .home_header__nav_menu { 
    width: 100%; 
    padding-left: 40px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
  }
  
  .home_header__nav_links { display: flex; list-style: none; margin: 0; padding: 0; gap: 28px; }
  .home_header__nav_links a { color: #333; text-decoration: none; font-size: 16px; font-weight: 500; }
  .home_header__nav_links a:hover { color: #666; }
  
  .home_header__auth { display: flex; align-items: center; } /* Simplified */
  
  .home_header__auth .auth_button { 
    padding: 10px 22px; 
    font-size: 15px; 
    box-sizing: border-box; 
  }
  .home_header__auth .user_info { 
    margin: 0; 
    padding: 8px 12px; 
    background: #f5f5f5; 
    box-sizing: border-box; 
  }
  .home_header__auth .user_avatar { width: 34px; height: 34px; font-size: 15px; }
  
  .mobile_nav, .mobile_nav__overlay { display: none; }
  .home_content { flex-direction: column; padding: 40px 60px; gap: 40px; }
}

/* ===== LARGE DESKTOP (≥1200px) ===== */
@media (min-width: 1200px) {
  .home_header { padding: 0 100px; }
  .home_content { padding: 56px 100px; }
}

/* =====================================================
  NAV REFINEMENT STYLES
=====================================================
*/

/* --- Desktop Nav --- */
@media (min-width: 769px) {
  
  /* Right-side actions wrapper */
  .home_header__right_actions {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  
  /* Social Icons */
  .home_header__social_icons {
    display: flex;
    gap: 20px;
  }
  .home_header__social_icons a {
    color: #333;
    font-size: 22px;
    transition: color 0.2s ease;
  }
  .home_header__social_icons a:hover {
    color: #888;
  }

  /* Client Portal Button (as a link) */
  .client_portal_button {
    text-decoration: none;
    height: 50px;
    display: flex;
    align-items: center;
  }

  /* Auth Block */
  .home_header__auth {
    flex-shrink: 0;
  }
  .home_header__auth .user_email {
    display: block; /* Restore email */
  }
}

@media (min-width: 1200px) {
    .home_header__right_actions {
        gap: 32px;
    }
    .home_header__social_icons {
        gap: 24px;
        font-size: 24px;
    }
}

/* --- Mobile Nav: Home Link --- */
/* UPDATED: Styles for the new icon link */
.mobile_nav__home_link {
  font-size: 24px; /* Make icon larger */
  color: #333;
  text-decoration: none;
  padding: 6px; /* Add tap target */
  line-height: 1;
}
.mobile_nav__home_link:hover {
  color: #888;
}

/* --- Mobile Nav: Auth Block --- */
/* UPDATED: This is the fix. */
.mobile_nav__auth #authLoggedOut .client_portal_button {
  display: block; /* Makes the <a> tag a block element */
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box; 
}


/* --- Mobile Nav: Social Icons --- */
.mobile_nav__social {
  display: none; /* Hides old text links */
}

.mobile_nav__social_icons {
  list-style: none;
  padding: 0;
  margin-top: auto; /* Pushes to bottom */
  padding-top: 20px; /* Space from content above */
  display: flex;
  justify-content: center;
  gap: 28px;
}

.mobile_nav__social_icons a {
  display: inline-block;
  padding: 8px;
  color: #666;
  text-decoration: none;
  font-size: 24px; /* Bigger for icons */
  transition: color 0.2s ease;
}
.mobile_nav__social_icons a:hover {
  color: #333;
}

/* =====================================================
  AUTH DROPDOWN STYLES
=====================================================
*/

/* This is the new relative container */
.auth_section--logged-in {
  position: relative;
}

/* Make the user info card clickable */
.auth_section--logged-in .user_info {
  cursor: pointer;
  transition: background-color 0.2s ease, border-radius 0.1s ease;
  border-radius: 8px; /* Set base radius */
}

.auth_section--logged-in .user_info:hover {
  background-color: #e9e9e9;
}

/* When dropdown is active, remove bottom radius from toggle */
.auth_section--logged-in .user_info[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* The dropdown menu */
.user_dropdown_menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Position directly below the parent */
  left: 0;
  right: 0;
  
  background: #fff;
  border-top-left-radius: 0; /* Connects to parent */
  border-top-right-radius: 0; /* Connects to parent */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  border: 1px solid #e9e9e9;
  border-top: none; /* Remove top border to merge */
  padding: 8px;
  z-index: 1010;
  width: 100%; /* Make it 100% of the parent */
  box-sizing: border-box; /* Include padding in width */
}

.user_dropdown_menu.active {
  display: block; /* Show when active */
}

/* Links inside the dropdown */
.user_dropdown_links {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}
.user_dropdown_links a {
  display: block;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
}
.user_dropdown_links a:hover {
  background: #f5f5f5;
}

/* Style the logout button inside the dropdown */
.user_dropdown_menu .auth_button--logout {
  width: 100%;
  text-align: left;
  border-radius: 6px;
  padding: 10px 14px;
}

.user_dropdown_menu .auth_button--logout:hover {
  background: #fff5f5;
  border-color: #d32f2f;
  color: #d32f2f;
}

/* --- Mobile Auth (Logged In) --- */
.mobile_nav__account_links {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 16px;
}
.mobile_nav__account_links li {
  margin-bottom: 8px;
}
.mobile_nav__account_links a {
  display: block;
  padding: 12px 0;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600; /* Make them "pop" more */
}
.mobile_nav__account_links a:hover {
  color: #666;
}