/* layout.css — top-header app shell (Stage 1 of the sidebar->top-header restructure).
   The full-height left sidebar is gone. A single top header (logo left, actions right)
   sits above a full-width content column. Search still lives in the .controls bar below
   the header (Stage 2 will move/rework it). Mobile keeps the same top header. */

.applayout{display:block;min-height:100vh}

/* The top header is shown on every width now (it replaces the old desktop sidebar).
   It is NOT sticky (matches the earlier scroll fix: header scrolls away, the .controls
   search bar below is what pins to the top). */
.head-top{display:flex;align-items:center;gap:16px}
.head-top .brand{flex:none}

/* Right-side header actions: Ievietot button + hamburger, pushed to the far right. */
.head-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}

/* "Ievietot sludinājumu" button (desktop). Hidden on narrow screens (it lives in the
   hamburger menu there). */
.head-post{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;
  background:var(--pine);color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;white-space:nowrap;
  transition:background .15s;
}
.head-post:hover{background:var(--pine-ink)}
.head-post-ic{width:18px;height:18px;flex:none}

/* Hamburger menu (reuses the .acct-menu popover styling from header.css). */
.hmenu{position:relative;flex:none}
/* Hamburger: white rounded-square icon button with a light border and bold
   round-capped lines. Same 40px size. No avatar. */
.hmenu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;color:var(--pine-ink);
  transition:border-color .15s,box-shadow .15s;
}
.hmenu-btn:hover{border-color:var(--line);box-shadow:var(--shadow-sm)}
.hmenu-ic{width:20px;height:20px;flex:none;stroke-width:2.4;stroke-linecap:round}
.hmenu-btn .acct-av{display:none}
.hmenu-menu{right:0;left:auto;min-width:240px}
.hmenu-post{color:var(--pine);font-weight:700}

/* Full-width content column below the header (no sidebar margin). */
.appmain{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface)}

/* ---- Mobile: the same top header; the "Meklēt" button + overlay take over search.
        The Ievietot button collapses into the hamburger menu on narrow screens. ---- */
@media (max-width:980px){
  .applayout{min-height:0}
  /* .head-post (Ielikt) now shows on mobile too (full pill in the header). */
}

/* On desktop the header shows the Ievietot button; the standalone "Meklēt" find button
   is hidden there (search is the .controls bar / overlay). It returns on mobile. */
@media (min-width:981px){
  .head-find{display:none}
}

/* "Use my location" button at the top of the location picker (unchanged). */
.sov-usegeo{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;margin:0 0 14px;padding:13px 16px;background:var(--pine);color:#fff;border:none;border-radius:12px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.sov-usegeo svg{width:18px;height:18px}
.sov-usegeo:hover{background:var(--pine-ink)}
.sov-usegeo.loading{opacity:.6;pointer-events:none}

/* ---- Stage 2b: search bar in the header. DESKTOP ONLY: one inline row
        (logo | search | actions). MOBILE keeps the old layout: a compact header
        row on top, and the search bar as a separate full-width sticky bar below. ---- */

@media (min-width:981px){
  /* Desktop: header is a sticky flex row with the search bar inline. */
  .head-hassearch{
    position:sticky;top:0;z-index:60;
    align-self:flex-start;width:100%;   /* flex-column parent: stretch can break sticky;
                                            flex-start + full width lets it pin the whole scroll */
    height:auto;min-height:var(--head-h);
    padding-top:8px;padding-bottom:8px;
  }
  .head-hassearch .controls{position:static;z-index:auto;background:none;flex:1 1 auto;min-width:0}
  .head-hassearch .controls>.wrap{max-width:none;margin:0;padding:0;width:100%}
  .head-hassearch .searchtop{padding:0;flex-wrap:nowrap}
  /* Order: logo, search, find(hidden on desktop), actions. Search gets a gap + max-width
     so it isn't glued to the logo and doesn't stretch the full width. */
  .head-hassearch .brand{flex:none;order:0}
  .head-hassearch .controls{order:1;max-width:640px;margin-left:24px}
  .head-hassearch .head-actions{order:3;flex:none;margin-left:auto}
}

@media (max-width:980px){
  /* Mobile: restore the original layout. The header is a normal compact row
     (logo + actions); the search bar drops BELOW it, full-width, and sticks to the
     top on scroll -- exactly as it was before search moved into the header.
     The header itself is NOT sticky on mobile (only the search bar is). */
  /* Header is a normal compact row (logo + actions); it scrolls away. */
  .head-hassearch{display:flex;flex-wrap:wrap;align-items:center;height:auto;padding-top:10px}
  .head-hassearch .brand{order:0}
  .head-hassearch .head-actions{order:2;margin-left:auto}
  /* The search bar is moved (by mode.js) out of the header to just before .applayout, so
     it shares the page scroll and pins to the top over the feed. Target .controls
     directly (it's no longer inside the header on mobile). */
  .controls{
    width:100%;
    margin-top:10px;              /* gap from the header row (only at rest; sticky pins flush) */
    position:sticky;top:0;z-index:40;
    background:var(--surface);
  }
  .controls>.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter);width:100%}
}

/* ---- Mobile tweaks: full-width search bar + bare hamburger (icon only) ---- */
@media (max-width:980px){
  /* Search/filter bar spans edge to edge (no gutter). */
  .head-hassearch .controls>.wrap{max-width:none;margin:0;padding:0;width:100%}
  /* Hamburger styling is unified in the base .hmenu-btn rule (icon-only everywhere). */
}


/* ---- Mobile: Ielikt button becomes an icon-only "+" (header is tight) ---- */
@media (max-width:980px){
  .head-post{padding:0;width:40px;height:40px;border-radius:12px;justify-content:center;gap:0}
  .head-post span{display:none}          /* hide the text; just the + shows */
  .head-post .head-pos-ic{width:20px;height:20px}
}

/* ---- Mobile: the search/filter button is a green rounded-square magnifier in the
        header actions (opens the full-screen Filtri overlay). Desktop hide is above. ---- */
.head-find{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;flex:none;
  background:var(--pine);color:#fff;border:none;border-radius:12px;cursor:pointer;
  transition:background .15s;
}
.head-find:hover{background:var(--pine-ink)}
.head-find svg{width:20px;height:20px}