/**
 * Surf Shack — header account control.
 *
 * Renders into the header's existing account widget (see account-menu.php). Everything
 * here is scoped to `.ssm-acct`, so it cannot reach the rest of the header.
 *
 * COLOUR, on the header's #16292F ground:
 *
 *     name         #FFFFFF          17.6:1
 *     "Sign in"    #CBE5DC           9.9:1
 *     disc         #3D8D90 fill, #FFFFFF letter   3.9:1 on the bar, 4.2:1 for the letter
 *     panel        #FFFFFF ground, #1F3E4A ink   12.6:1
 *
 * The disc is a filled shape rather than text on the bar, so 3:1 is its bar; the letter
 * inside it is text on the fill and clears 4.5.
 *
 * @package SurfShack\Core
 */

/* The Elementor widget we move into. It was sized for a 38px icon; the control is wider,
   so the widget stops constraining it. */
.ssm-acct-host { width: auto !important; }
.ssm-acct-host .elementor-icon-wrapper { display: none; }

.ssm-acct { position: relative; display: flex; align-items: center; }

/* The control renders into the document hidden and the script unhides it only after it
   has found the header widget to move it into. On a canvas template, /owner/,
   /account/, /staff-fnb/, /book/, /passes/, /order/, there IS no Elementor header, the
   script bails, and the control is supposed to stay invisible.
   `hidden` is only `[hidden] { display: none }` in the UA sheet, so the author
   `display: flex` above outranked it and the control rendered as a stray 44px band
   across the top of every app page. Reported by Nick, 16 Aug, on the owner console.
   The panel already carried this guard; the control itself did not. */
.ssm-acct[hidden],
[data-ssm-acct][hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
 * SIGNED OUT — a link, not a glyph.
 *
 * The old control was a person outline that meant "sign in" to whoever built it and
 * nothing in particular to a first-time visitor. Two words remove the guess.
 * ------------------------------------------------------------------------- */
.ssm-acct-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #CBE5DC;
  text-decoration: none;
  white-space: nowrap;
}
.ssm-acct-signin:hover,
.ssm-acct-signin:focus-visible { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
 * SIGNED IN — disc, name, caret.
 *
 * 44px min-height because this is the control a member reaches for on a phone, and it
 * sits in a row with the menu toggle which already has that floor.
 * ------------------------------------------------------------------------- */
.ssm-acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1;
  text-decoration: none;
}
.ssm-acct-btn:hover .ssm-acct-name { text-decoration: underline; text-underline-offset: 3px; }
.ssm-acct-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3D8D90;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  /* The letter is optically low in a circle at this size without it. */
  line-height: 30px;
  flex: none;
}
.ssm-acct-name { white-space: nowrap; }
.ssm-acct-caret { flex: none; opacity: .75; transition: transform .16s cubic-bezier(.22,.61,.36,1); }
.ssm-acct-btn[aria-expanded="true"] .ssm-acct-caret { transform: rotate(180deg); }

.ssm-acct-btn:focus-visible,
.ssm-acct-signin:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------------------
 * THE PANEL.
 *
 * Right-aligned to the control because the control is the last thing in the header —
 * left-aligning it would push the panel off the screen edge on a narrow window.
 * ------------------------------------------------------------------------- */
.ssm-acct-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 190px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #D8E6E6;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(31, 62, 74, .18);
}
.ssm-acct-panel[hidden] { display: none; }
/* A transparent strip bridging the 8px gap between the name and the panel, so a hover moving down
   into the menu never crosses dead space that would drop it. */
.ssm-acct-panel::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }

.ssm-acct-link {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1F3E4A;
  text-decoration: none;
  white-space: nowrap;
}
.ssm-acct-link:hover,
.ssm-acct-link:focus-visible { background: #F4F9F8; color: #357B7D; }
.ssm-acct-link:focus-visible { outline: 3px solid #3D8D90; outline-offset: -3px; }

/* The divider is drawn as a border on the first item below it rather than as an <hr>,
   so there is one fewer element in the tab order and nothing for a screen reader to
   announce. */
.ssm-acct-link--sep {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #D8E6E6;
  border-radius: 0 0 4px 4px;
}
.ssm-acct-link--out { color: #5A7482; }
.ssm-acct-link--out:hover,
.ssm-acct-link--out:focus-visible { color: #B42318; background: #FDECE9; }

/* ---------------------------------------------------------------------------
 * NARROW. Below the desktop nav breakpoint the header is a stacked column and the
 * account control sits in the top row beside the menu toggle. The name is the first
 * thing to go — the disc still says "signed in", which is the job.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .ssm-acct-name { display: none; }
  .ssm-acct-caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ssm-acct-caret { transition: none; }
}