/* The shared top bar (inc/site_header.php). Loaded after styles.css, i18n.css and search/css/search.css.
 * Desktop: logo, search field, gap, settings, picture or Sign in, Get the App.
 * Phone (600px and under, and the search icon from 720px): logo icon, search icon, settings, picture or Sign in. Get the App stays hidden, as before. */

.site-hd .hd{display:flex; align-items:center; justify-content:flex-start; gap:12px; height:80px;}
.site-hd .hd > *{flex:none;}
.site-hd .hd > .hd-sp{flex:1 1 auto; min-width:0;}
.site-hd .logo{text-decoration:none;}

/* round outlined icon buttons (settings, phone search) */
.hd-ic{display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; cursor:pointer;
  border:1.5px solid color-mix(in srgb, var(--navy) 30%, transparent); background:transparent; color:var(--navy);
  transition:background .15s, border-color .15s, transform .15s;}
.hd-ic:hover,.hd-ic[aria-expanded="true"]{background:color-mix(in srgb, var(--navy) 10%, transparent); border-color:color-mix(in srgb, var(--navy) 55%, transparent);}
.hd-ic:focus-visible,.hd-av:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.hd-ic svg{width:19px; height:19px;}
.hd-sbtn{display:none;}

/* search field: the shared search bar (search.js) restyled to sit in the bar */
.site-hd .hd-search{position:relative; z-index:40; width:min(280px,30vw); min-width:150px; transition:width .2s ease;}
.site-hd .hd-search:focus-within,.site-hd .hd-search.is-open{width:min(380px,36vw);}
.site-hd .hd-search .sr-field,.site-hd .hd-search .sr-form{height:42px; padding:0 14px; gap:10px; border:1.5px solid color-mix(in srgb, var(--navy) 24%, transparent);
  border-radius:999px; background:color-mix(in srgb, var(--navy) 5%, transparent); box-shadow:none;}
.site-hd .hd-search .sr-field > svg,.site-hd .hd-search .sr-form > svg{width:17px; height:17px; color:var(--navy-soft);}
.site-hd .hd-search .sr-field input,.site-hd .hd-search .sr-form input{font-size:14px;}
.site-hd .hd-search:focus-within .sr-field,.site-hd .hd-search.is-open .sr-field,.site-hd .hd-search .sr-form:focus-within{border-color:var(--blue); background:var(--white);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);}
.site-hd .hd-search:focus-within .sr-field > svg,.site-hd .hd-search.is-open .sr-field > svg,.site-hd .hd-search .sr-form:focus-within > svg{color:var(--blue);}
/* results are wider than the field itself */
.site-hd .hd-search .sr-drop{inset-inline:auto; inset-inline-start:0; width:min(520px, calc(100vw - 32px)); max-height:min(480px, 70vh);}

/* settings popover */
.hd-box{position:relative;}
.hd-pop{position:absolute; inset-inline-end:0; top:calc(100% + 12px); z-index:90; width:300px; padding:12px; display:grid; gap:12px; text-align:start;
  background:var(--white); border:1px solid var(--border-soft); border-radius:18px; box-shadow:0 16px 40px rgb(0 0 0 / .3);}
.hd-pop[hidden]{display:none;}
.hd-view[hidden]{display:none;}
.hd-view{display:grid; gap:12px;}
/* main view: one row per setting */
.hd-rows{display:grid; border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; background:var(--paper);}
.hd-row{display:flex; align-items:center; gap:12px; width:100%; height:52px; padding:0 14px; border:0; background:transparent; color:var(--navy); cursor:pointer; text-align:start; font:600 14px 'Inter',sans-serif;}
.hd-row + .hd-row{border-top:1px solid var(--border-soft);}
.hd-row:hover{background:color-mix(in srgb, var(--navy) 6%, transparent);}
.hd-row:focus-visible,.hd-back:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}
.hd-row b{flex:1; font-weight:600;}
.hd-ico{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--white); border:1px solid var(--border-soft); color:var(--navy-soft);}
.hd-ico svg{width:16px; height:16px;}
.hd-val{display:inline-flex; align-items:center; gap:6px; color:var(--navy-soft); font-weight:500;}
.hd-val svg{width:15px; height:15px;}
html[lang="ar"] .hd-row,html[lang="ja"] .hd-row,html[lang="ar"] .hd-back,html[lang="ja"] .hd-back{font-family:inherit;}
html[dir="rtl"] .hd-val svg,html[dir="rtl"] .hd-back svg{transform:scaleX(-1);}
/* second level: back + the choices */
.hd-back{display:flex; align-items:center; gap:8px; width:100%; height:36px; padding:0 4px; border:0; border-radius:8px; background:transparent; color:var(--navy); cursor:pointer; text-align:start; font:700 14px 'Inter',sans-serif;}
.hd-back svg{width:18px; height:18px; flex:none;}
.hd-langs{display:grid; gap:2px;}
.hd-lang{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:42px; padding:0 12px; border:0; border-radius:10px; background:transparent; cursor:pointer; text-align:start;
  font:600 14px 'Inter',sans-serif; color:var(--navy); text-decoration:none; white-space:nowrap;}
html[lang="ar"] .hd-lang,html[lang="ja"] .hd-lang{font-family:inherit;}
.hd-lang span{overflow:hidden; text-overflow:ellipsis;}
.hd-lang svg{width:16px; height:16px; flex:none; color:var(--teal);}
.hd-lang:hover{background:var(--paper);}
.hd-lang[aria-current="true"],.hd-lang[aria-pressed="true"]{background:color-mix(in srgb, var(--teal) 14%, transparent);}
.hd-lang[aria-pressed="false"] svg{display:none;}
.hd-lang:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}

/* notifications bell */
.hd-bell{position:relative; text-decoration:none;}
.hd-bell.is-here{background:color-mix(in srgb, var(--navy) 10%, transparent); border-color:color-mix(in srgb, var(--navy) 55%, transparent);}
.hd-badge{position:absolute; top:-5px; inset-inline-end:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center;
  background:#e5484d; color:#fff; font:700 10.5px/1 'Inter',sans-serif; border:2px solid var(--white); box-sizing:content-box; font-variant-numeric:tabular-nums;}

/* the member's round picture (sign-in / account pages only: elsewhere the Menu tab carries it) */
.hd-av{position:relative; display:block; width:40px; height:40px; border-radius:50%; overflow:hidden; text-decoration:none; color:var(--navy);
  border:2px solid color-mix(in srgb, var(--navy) 30%, transparent); transition:border-color .15s;}
.hd-av:hover{border-color:var(--blue);}
.hd-av .mn-av{position:absolute; inset:0; width:100%; height:100%; box-shadow:none; font-size:15px;}
.hd-av > svg{position:absolute; inset:0; margin:auto; width:20px; height:20px; color:var(--navy-soft);}

/* Sign in */
.site-hd .hd .btn.hd-signin{height:42px; padding:0 18px; line-height:1; justify-content:center; white-space:nowrap; background:transparent;}

.site-hd .hd .btn.hd-signup{height:42px; padding:0 18px; line-height:1; justify-content:center; white-space:nowrap;}

/* Get the App: the same gradient split button as before (its inner rules stay in styles.css) */
.site-hd .hd > .app-split{position:relative; flex:none; display:inline-flex; align-items:stretch; height:42px; border-radius:999px; background:linear-gradient(135deg, var(--blue), var(--teal)); box-shadow:0 6px 16px -6px color-mix(in srgb, var(--blue) 70%, transparent);}

/* narrower screens: the field becomes an icon that opens the search pop-up, Get the App goes (as it always did on phones) */
@media (max-width:720px){
  .site-hd .hd-search{display:none;}
  .hd-sbtn{display:inline-grid;}
  .site-hd .hd > .app-split{display:none;}
}
@media (max-width:600px){
  .site-hd .hd{height:60px; gap:8px;}
  .hd-ic,.hd-av{width:38px; height:38px;}
  .site-hd .hd .btn.hd-signin,.site-hd .hd .btn.hd-signup{height:38px; padding:0 14px; font-size:13px;}
  /* on a phone the popover spans the bar's width so it can never run off the screen */
  .hd-box{position:static;}
  .hd-pop{inset-inline:12px; width:auto; top:calc(100% + 8px);}
}
/* very narrow: on the sign-in / sign-up pages only Sign up stays (the page itself links to the other one) */
@media (max-width:360px){ .site-hd .hd .btn.hd-signin:has(+ .hd-signup){display:none;} }
@media (max-width:335px){ .site-hd .logo{gap:0;} }

/* theme: a one-tap moon / sun switch on its own row; All settings link under the list */
.hd-row-theme{cursor:default;}
.hd-row-theme:hover{background:transparent;}
.hd-mini{display:flex; gap:3px; padding:3px; border-radius:999px; background:var(--white); border:1px solid var(--border-soft);}
.hd-mini button{display:grid; place-items:center; width:34px; height:28px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--navy-soft); cursor:pointer; transition:background .15s, color .15s;}
.hd-mini button svg{width:15px; height:15px;}
.hd-mini button:hover{color:var(--navy);}
.hd-mini button[aria-pressed="true"]{background:var(--navy); color:var(--white);}
.hd-mini button:focus-visible{outline:2px solid var(--blue); outline-offset:1px;}
.hd-foot{margin:0 -12px -12px; padding:4px 8px 8px; border-top:1px solid var(--border-soft);}
.hd-all{display:flex; align-items:center; gap:12px; height:48px; padding:0 8px; border-radius:10px; color:var(--navy); text-decoration:none; font:600 14px 'Inter',sans-serif;}
html[lang="ar"] .hd-all,html[lang="ja"] .hd-all{font-family:inherit;}
.hd-all b{flex:1; font-weight:600;}
.hd-all > svg{width:15px; height:15px; color:var(--navy-soft);}
html[dir="rtl"] .hd-all > svg{transform:scaleX(-1);}
.hd-all:hover{background:var(--paper);}
.hd-all:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}