/* ======================= HEADER (logo + search + buttons + hamburger) ======================= */

/* Offset page content so the fixed header doesn't overlap it */
body{ padding-top: var(--topbar-h); }

/* Defaults for top bar */
.topbar, .topbar--brand { 
  background: var(--brand-dark);
  color: #fff;
  border-bottom: none;
  /* was: position: sticky; top: 0; z-index: 100; */
  min-height: var(--topbar-h);
}

/* Home header layout (center the middle column, white header on homepage) */
.topbar.topbar--brand{
  position: fixed;            /* make header stay at the top on scroll */
  top: 0; left: 0; right: 0;  /* pin to viewport edges */
  z-index: 1000;

  display:grid;
  grid-template-columns: 1fr auto 1fr;   /* middle column auto-width, centered */
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:#ffffff; color:#1f1f1f;
  border-bottom:0px solid #e6e6e6;
  box-sizing:border-box; width:100%; overflow:visible;
}

/* left + right header cells */
.topbar .brand{
  display:flex; align-items:center; gap:8px;
  padding-left:16px;
  justify-self:start;
  position: relative; top: var(--header-optical-nudge); /* tiny raise */
}
.hamburger{
  justify-self:end; margin-right:16px;
  position: relative; top: var(--header-optical-nudge);
}

/* Logo sizes */
.brand-logo{ height:72px; width:auto; display:block; border-radius:0; }

/* Search row goes in the center column */
.mast-search{
  grid-column: 2;                         /* use the middle column */
  justify-self: center;
  display:flex; align-items:center; gap:10px; margin:0;
  width:clamp(420px, 42vw, 600px);
  position: relative; top: var(--header-optical-nudge);
}

/* INPUT — fixed border thickness/color */
.mast-input{
  flex:1;
  height:24px;
  padding:8px 18px;
  font-size: var(--search-font-size);
  border: 1px solid #2b1a0e;     /* <-- fixed thickness/color (no variables) */
  border-radius:12px;
  background:#fff;
  color:#1f1f1f;
  box-shadow:none;
}

/* Base button */
.btn{ display:inline-flex; align-items:center; gap:8px; border:none; padding:6px 14px; cursor:pointer; font-weight:600; line-height:1; box-sizing:border-box; }
.btn .icon{ display:block; }

/* FILTER button */
.btn-filter{
  background:#2b1a0e; color:#fff;
  height:42px; width:115px;
  border-radius:12px; padding:8px 16px;
  font-size: var(--filter-font-size);
}
.btn-filter .icon{ width:35px; height:35px; filter:none; }

/* SEARCH (magnify) button */
.btn-searchicon{
  width:36px; height:36px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#2b1a0e; color:#fff;
  padding:0;
}
.btn-searchicon .icon{ width:28px; height:28px; filter:none; }

/* Make the magnify button larger in this header */
.topbar.topbar--brand .mast-search .btn-searchicon{ width:44px; height:44px; }
.topbar.topbar--brand .mast-search .btn-searchicon .icon{ width:32px; height:32px; }

/* ===== Hamburger icon (3 visible bars in #3d1c00) ===== */
.hamburger{
  width: 34px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 8px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 40;
}
.hamburger::before,
.hamburger::after { content: none !important; }
.hamburger span{
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 2px;
  background: #3d1c00 !important;
  display: block !important;
  opacity: 1 !important;
}
.hamburger span:nth-of-type(1){ top: 0px; }   /* top */
.hamburger span:nth-of-type(2){ top: 8px; }  /* middle */
.hamburger span:nth-of-type(3){ top: 16px; }  /* bottom */
.hamburger:focus-visible{ outline: 2px solid #3d1c00; outline-offset: 3px; }
.hamburger[aria-expanded="true"] span:nth-of-type(1){ top:50%; transform: translateY(-50%) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-of-type(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-of-type(3){ top:50%; transform: translateY(-50%) rotate(-45deg); }
@media (max-width: 720px){
  .hamburger{ width: 38px; height: 28px; }
  .hamburger span:nth-of-type(1){ top: 6px; }
  .hamburger span:nth-of-type(2){ top: 14px; }
  .hamburger span:nth-of-type(3){ top: 22px; }
}

/* ===== Header font sizing hooks ===== */
.topbar.topbar--brand .mast-input{ font-size: var(--search-font-size); }
.topbar.topbar--brand .btn{ font-size: var(--fs-btn); }
.topbar.topbar--brand .btn-filter{ font-size: var(--filter-font-size); }

/* ===== Mobile header layout (phones) ===== */
@media (max-width: 720px){
  /* reset header nudge + mobile defaults for the knobs */
  :root{
    --header-optical-nudge: 0px;
    --filter-font-size: 16px;
    --search-font-size: 17px;
  }

  /* 2-row header: row 1 = logo left + avatar right, row 2 = search centered */
  .topbar.topbar--brand{
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
    padding: 10px 16px 12px;
  }

  .topbar.topbar--brand .brand{ grid-column: 1; justify-self: start; top: 0; }
  .topbar.topbar--brand .hamburger{ grid-column: 3; grid-row: 1; justify-self: end; top: 0; }
  .topbar.topbar--brand .avatar-btn{ grid-column: 3; grid-row: 1; justify-self: end; top: 0; }

  /* Put the search group on its own row; make full width */
  .topbar.topbar--brand .mast-search{
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 720px;              /* keep layout balanced like before */
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "input input"
      "filter search";
    gap: 8px;
    margin: 0 auto;               /* center block within header */
    padding: 0 16px;              /* symmetric left/right inset */
    box-sizing: border-box;
    transform: translateX(-15px);  /* subtle left nudge for visual centering */
  }

  .topbar.topbar--brand .mast-input{
    grid-area: input;
    height: 25px;
    padding: 10px 14px;
    font-size: var(--search-font-size);
    border: 2px solid #2b1a0e;   /* <-- fixed thickness/color on mobile too */
    border-radius: 12px;
  }
  .topbar.topbar--brand .btn-filter{
    grid-area: filter;
    height: 48px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    font-size: var(--filter-font-size);
    padding: 8px 14px;
  }
  .topbar.topbar--brand .btn-searchicon{
    grid-area: search;
    height: 48px !important;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 12px !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
  }
  .topbar.topbar--brand .btn-searchicon .icon{ width: 24px; height: 24px; }
}