/* ============================================================
   OberBuilt Analysis Engine — Email Verification Banner
   Enqueued globally on all plugin pages alongside verify-banner.js.
   State machine driven by data-oae-state attribute on .oae-verify-banner.
   ============================================================ */

.oae-verify-banner {
  display: flex;
  align-items: center;
  gap: var(--oae-spacing-sm);
  /* Full-width strip directly below the sticky header — rendered in
     page-fullscreen.php between top-bar and <main> so no width hacks needed.
     Sticks to the viewport just below the header (header is z-index:50, sits
     at top:0 with min-height var(--oae-topbar-height)) so the verification
     prompt stays visible while the user scrolls. */
  position: sticky;
  top: var(--oae-topbar-height);
  z-index: 49;
  width: 100%;
  padding: var(--oae-spacing-sm) var(--oae-spacing-lg);
  background: var(--oae-color-warn);
  color: var(--oae-fg-on-warn);
  font-family: var(--oae-font-body);
  font-size: var(--oae-text-body);
  font-weight: 400;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  min-height: 0;
}
/* When WP admin bar is present, the sticky topbar sits at top:32px (or 46px
   on mobile), so the banner must add that offset too — otherwise it sticks
   at 56px and slides behind the topbar (whose bottom edge is at 88px). */
body.admin-bar .oae-verify-banner {
  top: calc(var(--oae-topbar-height) + var(--oae-wp-adminbar-height));
}
@media (max-width: 782px) {
  body.admin-bar .oae-verify-banner {
    top: calc(var(--oae-topbar-height) + var(--oae-wp-adminbar-height-mobile));
  }
}

/* Neutralize stray wpautop / theme wrappers that can inflate the band:
   - <br> elements injected between flex children → take no space
   - <p> wrappers around children → become layout-transparent
   - Direct child margins → zero so nothing pushes the band taller. */
.oae-verify-banner br { display: none; }
.oae-verify-banner > p { display: contents; margin: 0; }
.oae-verify-banner > * { margin: 0; }

.oae-verify-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--oae-fg-on-warn);
}
.oae-verify-banner__icon svg {
  width: 18px;
  height: 18px;
}

.oae-verify-banner__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.oae-verify-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--oae-spacing-sm);
  flex-shrink: 0;
}

.oae-verify-banner .oae-verify-banner__resend {
  font: inherit;
  font-weight: 700;
  color: var(--oae-fg-on-warn);
  background: transparent;
  border: 0;
  padding: var(--oae-spacing-xs) var(--oae-spacing-sm);
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--oae-color-primary);
  border-radius: var(--oae-radius);
  /* Banner is a passive notification, not a primary CTA — relax min-height
     below the 44px touch-target token to keep the strip thin. Horizontal
     padding still gives a generous click area. */
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.oae-verify-banner .oae-verify-banner__resend:hover {
  text-decoration-color: var(--oae-fg-on-warn);
  background: rgba(0, 0, 0, 0.06);
}
.oae-verify-banner .oae-verify-banner__resend:focus-visible {
  outline: 2px solid var(--oae-color-primary);
  outline-offset: 2px;
}
.oae-verify-banner .oae-verify-banner__resend[aria-disabled="true"],
.oae-verify-banner .oae-verify-banner__resend:disabled {
  cursor: not-allowed;
  text-decoration: none;
  color: var(--oae-fg-3);
}

.oae-verify-banner__cooldown {
  font-family: var(--oae-font-mono);
  font-size: var(--oae-text-label);
  color: var(--oae-fg-on-warn);
  opacity: 0.72;
  padding: var(--oae-spacing-xs) var(--oae-spacing-sm);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.oae-verify-banner__sent {
  display: inline-flex;
  align-items: center;
  gap: var(--oae-spacing-xs);
  font-size: var(--oae-text-label);
  font-weight: 700;
  color: var(--oae-fg-on-warn);
  padding: var(--oae-spacing-xs) var(--oae-spacing-sm);
}

/* State machine — show only the variant that matches data-oae-state */
.oae-verify-banner [data-oae-state-show]                                      { display: none !important; }
.oae-verify-banner[data-oae-state="default"]  [data-oae-state-show="default"]  { display: inline-flex !important; }
.oae-verify-banner[data-oae-state="cooldown"] [data-oae-state-show="cooldown"] { display: inline-flex !important; }
.oae-verify-banner[data-oae-state="sent"]     [data-oae-state-show="sent"]     { display: inline-flex !important; }

@media (max-width: 640px) {
  .oae-verify-banner {
    flex-wrap: wrap;
    /* On mobile the viewport is always < 960px so the centering calc collapses;
       use a tighter gutter for narrow screens. */
    padding: var(--oae-spacing-sm) var(--oae-spacing-md);
    gap: var(--oae-spacing-sm);
  }
  .oae-verify-banner__copy {
    flex: 1 1 100%;
  }
  .oae-verify-banner__actions {
    margin-left: calc(var(--oae-spacing-md) + 20px);
  }
}