/* C:\xampp\htdocs\ahaondeag\public\assets\stylesheets\layout\header.css */

/* ==========================================================================
   header.css
   Global site header (brand + actions + menu trigger)
   --------------------------------------------------------------------------
   Goals:
   - Brand left, actions right (stable across pages)
   - Consistent icon sizing (SVGs can't blow up)
   - Accessible focus states
   - Minimal assumptions about markup beyond your current structure
   ========================================================================== */


/* --- Header shell -------------------------------------------------------- */



/* TEMP - REMOVE IN PRODUCTION */
.who-is-logged-in{
  font-size: .85rem;
  text-align: center;
  padding: .25rem 0 .4rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
/* END of TEMP - REMOVE IN PRODUCTION */





.site-header{
  position: sticky;
  top: 0;
  z-index: 50;

  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header-inner{
  width: min(100%, var(--max-xl));
  margin-inline: auto;
  margin: 0 auto;
  padding: var(--space-1) var(--space-1);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1a);
}

.site-header-inner > * {
  min-width: 0;
}


/* --- Brand --------------------------------------------------------------- */

.brand{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);

  text-decoration: none;
  color: var(--text);
    flex: 1 1 auto;
  min-width: 0;
}

.brand img{
  width: 3.25rem;   /* your markup sets 60x60; this keeps it consistent */
  height: 3.25rem;
  display: block;
}

.brand .brandword{
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
  /* font-family likely defined elsewhere */
}

.brand:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--aha-link) 35%, transparent);
  outline-offset: 4px;
  border-radius: var(--radius-sml);
}


/* --- Right actions cluster ---------------------------------------------- */

.site-header-actions{
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Ensure menu-trigger participates nicely even though it sits outside <nav> */
.menu-trigger{
  display: flex;
  align-items: center;
}

.site-header-actions,
.menu-trigger {
  flex: 0 0 auto;
}


/* --- Icon hit areas (bell/logout/menu) ---------------------------------- */

.site-header .header-icon{
  width: 2.75rem;
  height: 2.75rem;

  display: inline-grid;
  place-items: center;

  border-radius: var(--radius-sml);
  text-decoration: none;
  color: inherit;
}

.site-header .header-icon:hover{
  background: color-mix(in srgb, var(--surface) 90%, black);
}

.site-header .header-icon:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--aha-link) 35%, transparent);
  outline-offset: 3px;
}

/* Normalize all icon images inside header so SVGs never render huge */
.site-header .header-icon img{
  width: 1.55rem;
  height: 1.55rem;
  display: block;
  object-fit: contain;
}


/* --- Notifications bell structure --------------------------------------- */

/* Your markup: <span class="nav-icon"><img ...></span> */
.site-header .nav-icon{
  width: 1.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
}

.site-header .nav-icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* --- Logout button reset ------------------------------------------------- */

.site-header .logout-form{
  margin: 0;
}

.site-header .logout-link{
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;

  border: 0;
  background: transparent;
  border-radius: var(--radius-sml);

  display: grid;
  place-items: center;

  cursor: pointer;
}

.site-header .logout-link:hover{
  background: color-mix(in srgb, var(--surface) 90%, black);
}

.site-header .logout-link:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--aha-link) 35%, transparent);
  outline-offset: 3px;
}

.site-header .logout-link img{
  width: 1.55rem;
  height: 1.55rem;
  display: block;
  object-fit: contain;
}


/* --- Badge dot (bell attention) ----------------------------------------- */

.site-header .nav-item--notifications{
  position: relative;
}

.site-header .badge-dot{
  position: absolute;
  top: .55rem;
  right: .55rem;

  width: .55rem;
  height: .55rem;
  border-radius: 999px;

  background: var(--irish-orange);
  border: 2px solid var(--surface); /* creates a crisp “cut-out” ring */
}


/* --- Dots menu button ---------------------------------------------------- */

.dots-menu-btn{
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;

  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sml);

  display: grid;
  place-items: center;
  gap: 4px;

  cursor: pointer;
}

.dots-menu-btn:hover{
  background: color-mix(in srgb, var(--surface) 90%, black);
}

.dots-menu-btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--aha-link) 35%, transparent);
  outline-offset: 3px;
}

.dots-menu-btn span{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--irish-green);
  display: block;
}


/* --- Responsive tweaks --------------------------------------------------- */
/* 
@media (max-width: 420px){
  .brand .brandword {
    display: none;
  }
} */

@media (min-width: 720px){
  .site-header-actions{
    gap: var(--space-3);
  }

  .brand .brandword{
    font-size: 1.35rem;
  }
}


/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  .site-header .header-icon,
  .dots-menu-btn{
    transition: none;
  }
}