/* fejlec.css -- one header for every page on the shop, and one place to change it.
 *
 * WHY THIS FILE (Peti, 2026-08-14): "atumo logo legyen minden oldalon" and "hamburger menu
 * minden oldalon". Before this, the two selling pages had a text brand link, the legal
 * pages had a header saying "Fotógyár" (a name we retired as internal), and the menu on
 * a phone did not collapse -- it simply VANISHED, because the old rule was
 * `nav a:not(.nyelv){display:none}`. Hidden is not responsive; it is a lost visitor.
 *
 * Kept as its own file rather than copied into s.css AND style.css: the pages use two
 * different stylesheets, and a header maintained twice is a header that drifts. The legal
 * pages load this alongside their own sheet.
 *
 * The logo is the CANONICAL FILE, never re-typed text (the standing rule: the wordmark is
 * an asset, and a re-set version is a different logo), and it always links to the HOUSE
 * page. On the shop it used to point at the shop root, which is one of the two branches:
 * from the product page the logo took you to staging, which is not "home", it is "the
 * other product".
 */
.fejlec {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 249, 247, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.fejlec-sor {
  max-width: 68rem; margin: 0 auto; padding: 0 1.15rem;
  display: flex; align-items: center; gap: 1rem; height: 3.75rem;
}
.fejlec-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none }
.fejlec-logo img { height: 1.5rem; width: auto; display: block }
/* The branch name sits next to the logo, not instead of it: the visitor has to know which
   of the two lines they are looking at, and the logo has to say whose it is. */
.fejlec-ag {
  font-family: Georgia, 'Times New Roman', serif; font-size: .95rem; color: #57514a;
  padding-left: .6rem; border-left: 1px solid rgba(0, 0, 0, .14); white-space: nowrap;
}
.fejlec-menu { margin-left: auto; display: flex; align-items: center; gap: 1.35rem }
.fejlec-menu a { color: #57514a; text-decoration: none; font-size: .95rem; transition: color .15s }
.fejlec-menu a:hover { color: #1a1815 }
.fejlec-menu a.nyelv {
  border: 1px solid rgba(0, 0, 0, .16); border-radius: 100px; padding: .25rem .7rem; font-size: .85rem;
}
.hamburger {
  display: none; margin-left: auto; width: 2.5rem; height: 2.5rem; flex: none;
  align-items: center; justify-content: center; gap: 0;
  background: none; border: 1px solid rgba(0, 0, 0, .14); border-radius: .6rem; cursor: pointer; padding: 0;
}
.hamburger span { display: block; width: 1.05rem; height: 2px; background: #1a1815; border-radius: 2px; position: relative }
.hamburger span::before, .hamburger span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: inherit; border-radius: 2px;
}
.hamburger span::before { top: -6px } .hamburger span::after { top: 6px }

@media (max-width: 46rem) {
  .fejlec-ag { display: none }
  .hamburger { display: flex }
  /* The panel drops under the bar instead of hiding the links. Same links, reachable. */
  .fejlec-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #faf9f7; border-bottom: 1px solid rgba(0, 0, 0, .09);
    padding: .35rem .5rem .8rem; margin: 0; display: none;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .07);
  }
  .fejlec-menu.nyitva { display: flex }
  .fejlec-menu a { padding: .8rem .65rem; border-radius: .5rem; font-size: 1rem }
  .fejlec-menu a:active { background: rgba(0, 0, 0, .05) }
  .fejlec-menu a.nyelv { align-self: flex-start; margin: .35rem .65rem 0 }
  .fejlec-sor { position: relative }
}