/* /assets/header/header.css */
/* Minimal, reusable header. */

:root{
  --ap-header-h-desktop: 78px;
  --ap-header-h-mobile: 58px;

  --ap-header-pad-x-desktop: 34px;
  --ap-header-pad-x-mobile: 18px;

  --ap-header-bg-1: rgba(61, 88, 255, .62);
  --ap-header-bg-2: rgba(114, 155, 255, .36);

  --ap-header-shadow: 0 14px 34px rgba(0,0,0,.22);
  --ap-header-border: rgba(255,255,255,.10);

  --ap-brand-color: rgba(255,255,255,.98);
  --ap-brand-gap: 10px;
}

/* Wrapper */
.ap-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  width:100%;
  height:var(--ap-header-h-desktop);
  display:flex;
  align-items:center;
  background: linear-gradient(180deg, var(--ap-header-bg-1), var(--ap-header-bg-2));
  border-bottom: 1px solid var(--ap-header-border);
  box-shadow: var(--ap-header-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Inner layout */
.ap-header-inner{
  width:100%;
  max-width: 1400px;
  margin:0 auto;
  padding: 0 var(--ap-header-pad-x-desktop);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Brand */
.ap-brand{
  display:inline-flex;
  align-items:center;
  gap: var(--ap-brand-gap);
  color: var(--ap-brand-color);
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.ap-brand:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 4px;
  border-radius: 14px;
}

.ap-brand-icon{
  display:block;
  width:36px;
  height:36px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.ap-brand-text{
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  font-size: clamp(20px, 1.55vw, 28px);
}

/* Actions area */
.ap-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-height: 40px;
}

/* Mobile tuning */
@media (max-width: 768px){
  .ap-header{ height:var(--ap-header-h-mobile); }
  .ap-header-inner{
    padding: 0 var(--ap-header-pad-x-mobile);
    max-width: 100%;
  }
  .ap-brand-icon{ width:30px; height:30px; }
  .ap-brand-text{ font-size: 20px; }
}

@media (max-width: 420px){
  .ap-brand-text{ font-size: 19px; }
}

/* Floating mount spacer (because header is fixed) */
#ap-header{ height:var(--ap-header-h-desktop); }
@media (max-width: 768px){ #ap-header{ height:48px; } }

/* Large-screen alignment */
@media (min-width: 1441px){
  .ap-header-inner{ max-width: 1600px; }
}

/* 1441–1719px: safe padding */
@media (min-width: 1441px) and (max-width: 1719px){
  .ap-header-inner{
    padding-left: 34px;
    padding-right: 34px;
  }
  .ap-brand{ transform: none; }
}

/* >=1720px: match hero offset */
@media (min-width: 1720px){
  .ap-header-inner{
    padding-left: 0;
    padding-right: 0;
  }
  .ap-brand{ transform: translateX(-60px); }
}

/* Header-aware hero spacing */
@media (min-width: 1441px){
  .onebox{ padding: 120px 0px 120px !important; }
}
@media (max-width: 1440px){
  .onebox{ padding: 56px 0px 120px !important; }
}
@media (max-width: 480px){
  .onebox{ padding: 42px 0px 110px !important; }
}

/* ===== Header CTAs + User Menu ===== */

/* Buttons base */
.ap-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration:none;
  user-select:none;
  white-space:nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.ap-btn:active{ transform: translateY(1px); }
.ap-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 4px;
}

/* Primary = blue filled */
.ap-btn-primary{
  color: #fff;
  background: rgba(64, 102, 255, .92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.ap-btn-primary:hover{ filter: brightness(1.05); }

/* Secondary = white filled, blue text */
.ap-btn-secondary{
  color: rgba(64, 102, 255, 1);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.ap-btn-secondary:hover{ filter: brightness(1.02); }

/* Grouping */
.ap-auth-actions{ display:flex; gap:10px; align-items:center; }
.ap-user-actions{ position:relative; display:flex; align-items:center; }

/* Dropdown */
.ap-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(18, 26, 62, .86);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:none;
  z-index: 10001;
}
.ap-menu.is-open{ display:block; }

.ap-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,.95);
  text-decoration:none;
  font-weight: 600;
}
.ap-menu-item:hover{ background: rgba(255,255,255,.10); }
.ap-menu-danger{ color: rgba(255,160,160,.98); }

/* === Size scaling rule you asked for ===
   Mobile: 10–20% smaller
   Desktop: 10–20% bigger
*/

/* Mobile (smaller ~15%) */
@media (max-width: 768px){
  .ap-btn{
    height: 36px;        /* was 40 */
    padding: 0 12px;     /* was 14 */
    border-radius: 12px; /* slightly tighter */
    font-size: 14px;
  }
  .ap-auth-actions{ gap:8px; }
}

@media (max-width: 420px){
  .ap-btn{
    padding: 0 11px;
    font-size: 13.5px;
  }
}

/* Desktop (bigger ~15%) */
@media (min-width: 1024px){
  .ap-btn{
    height: 52px;        /* was 44 */
    padding: 0 20px;     /* was 16 */
    border-radius: 16px;
    font-size: 16px;
  }
  .ap-header-actions{ gap:14px; }
  .ap-auth-actions{ gap:12px; }
}

/* Hard rule: hidden must ALWAYS hide */
[hidden] { display: none !important; }
#apUserActions[hidden] { display: none !important; }
#apAuthActions[hidden] { display: none !important; }