/*
 * Print.az — global header & navigation v2 (shared, namespaced .pz-*).
 * Self-contained (hex values) so it works on every page regardless of local
 * token definitions. Injected/controlled by assets/js/header.js.
 */

/* Prevent the sticky header from covering in-page anchor targets. */
[id] { scroll-margin-top: 80px; }
body.pz-no-scroll { overflow: hidden; }

.pz-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pz-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e6e8ec;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow 0.2s ease;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pz-header.is-scrolled { box-shadow: 0 8px 24px rgba(17, 24, 39, 0.07); }

.pz-header-inner {
  width: min(1280px, calc(100% - 32px)); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; transition: min-height 0.2s ease;
}
.pz-header.is-scrolled .pz-header-inner { min-height: 48px; }

.pz-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pz-logo img { display: block; width: auto; height: 34px; transition: height 0.2s ease; }
.pz-header.is-scrolled .pz-logo img { height: 28px; }

.pz-nav { display: none; }
.pz-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Text links / buttons */
.pz-nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.pz-nav-item > a,
.pz-nav-item > button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px; border: 0; background: transparent;
  color: #17191d; font: inherit; font-weight: 700; font-size: 0.9rem;
  border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.pz-nav-item > a:hover,
.pz-nav-item > button:hover,
.pz-nav-item > button[aria-expanded="true"] { background: #f6f7f9; color: #d71920; }
.pz-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; }
.pz-nav-item > button[aria-expanded="true"] .pz-caret { transform: rotate(225deg) translateY(-1px); }

.pz-menu { position: relative; }

/* Dropdown panels (Reklam İşləri, Haqqımızda) */
.pz-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1001;
  min-width: 280px; padding: 10px; background: #fff;
  border: 1px solid #e6e8ec; border-radius: 16px;
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.12);
}
.pz-dropdown[hidden] { display: none; }
.pz-dropdown a {
  display: block; padding: 10px 12px; border-radius: 10px;
  color: #17191d; font-weight: 600; font-size: 0.95rem;
}
.pz-dropdown a:hover, .pz-dropdown a:focus-visible { background: #f6f7f9; color: #d71920; }
.pz-dropdown .pz-dropdown-cta {
  margin-top: 6px; border-top: 1px solid #e6e8ec; padding-top: 8px;
  font-weight: 800; color: #d71920;
}
.pz-dropdown button.pz-dropdown-logout,
.pz-dropdown button {
  display: block; width: 100%; border: 0; background: transparent; text-align: left;
  padding: 10px 12px; border-radius: 10px; font: inherit;
  color: #17191d; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.pz-dropdown button:hover, .pz-dropdown button:focus-visible { background: #f6f7f9; color: #d71920; }

/* Trust bar (below header, all pages). Also inserted as a sibling of
   .pz-header (document.body.insertBefore(trustBar, header.nextSibling) in
   header.js), not a descendant, so -- same root cause as .pz-drawer /
   .pz-search above -- it doesn't inherit .pz-header's font-family and
   needs its own declaration to avoid falling back to each page's body font
   (or the browser default on pages with no body font-family at all, e.g.
   /hesab/). */
.pz-trust-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; background: #17191d; color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pz-trust-bar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; background: #d71920; color: #fff;
  font-size: 0.82rem; font-weight: 800; letter-spacing: normal; text-transform: none;
  animation: pz-trust-pulse 2.6s ease-in-out infinite;
}
.pz-trust-bar-text { color: #f6f7f9; }
@keyframes pz-trust-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .pz-trust-bar-badge { animation: none; }
}

/* Mega menu (category-first) */
.pz-mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1001;
  background: #fff; border-bottom: 1px solid #e6e8ec;
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.12);
}
.pz-mega[hidden] { display: none; }
.pz-mega-columns {
  width: min(1280px, calc(100% - 32px)); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 24px;
  padding: 24px 0 28px;
  max-height: 72vh; overflow-y: auto;
}
.pz-mega-col-title {
  display: block; margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid #e6e8ec;
  color: #17191d; font-size: 0.98rem; font-weight: 800;
}
.pz-mega-col-title:hover, .pz-mega-col-title:focus-visible { color: #d71920; }
.pz-mega-links { list-style: none; margin: 0; padding: 0; }
.pz-mega-links a { display: block; padding: 6px 4px; border-radius: 8px; color: #4f5865; font-weight: 600; font-size: 0.9rem; }
.pz-mega-links a:hover, .pz-mega-links a:focus-visible { background: #f6f7f9; color: #d71920; }
.pz-mega-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #d71920; padding: 6px 4px; font-size: 0.9rem; }
.pz-mega-cta::after { content: "→"; }

/* Search button + language + CTAs */
.pz-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid #e6e8ec; border-radius: 999px;
  background: #fff; color: #17191d; cursor: pointer;
}
.pz-icon-btn:hover { border-color: #d71920; color: #d71920; }
.pz-icon-btn svg { width: 16px; height: 16px; }

/* Language switcher. The switcher renders real links (works without JS,
   exposes crawlable hreflang); the ACTIVE locale renders as a <span>, since
   there is nowhere to navigate to. All three element types must be styled --
   styling only a/button leaves the active span unstyled, which is what made
   the active locale look muted while the inactive links looked emphasised.
   `gap` on the flex container gives even spacing either side of the "|". */
.pz-lang { display: none; align-items: center; gap: 6px; padding: 0 2px; }
.pz-lang a,
.pz-lang button,
.pz-lang span:not(.pz-lang-sep) {
  border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 0.78rem;
  color: #9aa3af; padding: 4px 2px; border-radius: 6px; cursor: pointer;
  text-decoration: none; transition: color 0.15s ease;
}
.pz-lang a:hover,
.pz-lang a:focus-visible { color: #17191d; }
/* Must name the element as well as the class: the base rule above uses
   `span:not(.pz-lang-sep)`, whose :not() argument counts toward specificity
   (0,2,1) and would otherwise outrank a bare `.pz-lang .is-active` (0,2,0),
   leaving the active locale grey. */
.pz-lang a.is-active,
.pz-lang span.is-active,
.pz-lang button.is-active {
  color: #d71920; font-weight: 600; text-decoration: none; cursor: default;
}
.pz-lang button[disabled] { color: #c2c7cf; cursor: not-allowed; }
.pz-lang .pz-lang-sep {
  color: #d7dbe0; font-weight: 400; font-size: 0.72rem; padding: 0; cursor: default;
}

.pz-order-link {
  display: none;
  color: #4f5865;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.pz-order-link:hover,
.pz-order-link:focus-visible {
  color: #d71920;
  background: #f6f7f9;
}

.pz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  font: inherit; font-weight: 800; font-size: 0.84rem; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pz-btn-sm {
  min-height: 34px; padding: 0 12px; font-size: 0.8rem;
  box-shadow: 0 8px 18px rgba(215, 25, 32, 0.18) !important;
}
.pz-btn:hover { transform: translateY(-1px); }
.pz-btn-secondary { color: #17191d; background: #fff; border-color: #d0d5dd; }
.pz-btn-secondary:hover { border-color: #17191d; }
.pz-btn-primary { color: #fff; background: #d71920; box-shadow: 0 10px 22px rgba(215, 25, 32, 0.22); }

.pz-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid #e6e8ec; border-radius: 10px;
  background: #fff; color: #17191d; font-size: 1.15rem; cursor: pointer;
}

/* Desktop layout */
@media (min-width: 1024px) {
  .pz-nav { display: block; }
  .pz-lang { display: flex; }
  .pz-burger { display: none; }
  .pz-actions .pz-btn-mobile-only { display: none; }
  .pz-order-link.pz-btn-desktop-only,
  .pz-btn-desktop-only.pz-order-link { display: inline-flex; }
  .pz-btn-desktop-only:not(.pz-order-link) { display: inline-flex; }
  /* The account link/button toggle visibility via the hidden attribute
     (#pz-account-link / #pz-account-btn) -- without this, the unconditional
     display: inline-flex above would win over [hidden]'s default display:
     none, same reasoning as .pz-dropdown[hidden] / .pz-mega[hidden]. */
  .pz-order-link[hidden] { display: none; }
}
@media (min-width: 1024px) and (max-width: 1220px) {
  .pz-header-inner { gap: 8px; }
  .pz-nav-item > a, .pz-nav-item > button { padding: 6px 7px; font-size: 0.84rem; }
  .pz-btn { padding: 0 10px; font-size: 0.78rem; }
  .pz-actions { gap: 6px; }
  .pz-order-link { font-size: 0.76rem; padding: 4px 6px; }
}
@media (max-width: 1023.98px) {
  .pz-actions .pz-btn-desktop-only,
  .pz-order-link { display: none; }
  .pz-lang { display: none; }
}
@media (max-width: 560px) {
  .pz-header-inner { gap: 6px; }
  .pz-btn { min-height: 34px; padding: 0 10px; font-size: 0.78rem; }
  .pz-icon-btn { width: 32px; height: 32px; }
  .pz-burger { width: 34px; height: 34px; }
  .pz-logo img { height: 28px; }
  .pz-header.is-scrolled .pz-logo img { height: 26px; }
}
@media (max-width: 400px) {
  .pz-header-inner { gap: 4px; }
  .pz-btn { padding: 0 8px; font-size: 0.74rem; }
  .pz-icon-btn { width: 30px; height: 30px; }
  .pz-burger { width: 32px; height: 32px; }
  .pz-logo img { height: 26px; }
}

/* --- Search overlay --- */
/* .pz-search / .pz-drawer are appended to <body> directly (siblings of
   .pz-header, not descendants -- see header.js), so they don't inherit
   .pz-header's font-family rule below. Without their own declaration they
   fall back to each page's own body font, which /hesab/ pages don't set --
   same root cause as .acct-page in customer-account.css. Declared here so
   the drawer/search (and the account entries inside them) always match. */
.pz-search, .pz-drawer {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pz-search { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(10, 12, 16, 0.5); }
.pz-search[hidden] { display: none; }
.pz-search-panel { width: min(680px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(17, 24, 39, 0.28); overflow: hidden; }
.pz-search-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e6e8ec; }
.pz-search-top svg { width: 20px; height: 20px; color: #9aa3af; flex: 0 0 auto; }
.pz-search-input { flex: 1; min-height: 40px; border: 0; outline: none; font: inherit; font-size: 1.05rem; font-weight: 600; color: #17191d; background: transparent; }
.pz-search-close { border: 0; background: #f6f7f9; border-radius: 999px; width: 34px; height: 34px; font-size: 1.1rem; cursor: pointer; color: #4f5865; }
.pz-search-results { max-height: min(60vh, 520px); overflow: auto; padding: 8px; }
.pz-search-group-title { padding: 10px 12px 4px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa3af; }
.pz-search-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #17191d; font-weight: 600; cursor: pointer; }
.pz-search-item small { color: #9aa3af; font-weight: 600; }
.pz-search-item:hover, .pz-search-item.is-active { background: #f6f7f9; color: #d71920; }
.pz-search-empty { padding: 24px 16px; text-align: center; color: #4f5865; font-weight: 600; }
.pz-search-hint { padding: 12px 16px; border-top: 1px solid #e6e8ec; color: #9aa3af; font-size: 0.82rem; }

/* --- Mobile drawer --- */
.pz-drawer { position: fixed; inset: 0; z-index: 1500; background: rgba(10, 12, 16, 0.5); display: flex; justify-content: flex-end; }
.pz-drawer[hidden] { display: none; }
.pz-drawer-panel { width: min(400px, 100%); height: 100%; background: #fff; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.pz-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pz-drawer-head img { height: 34px; }
.pz-drawer-close { border: 1px solid #e6e8ec; background: #fff; border-radius: 12px; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; }
.pz-acc { border-bottom: 1px solid #eef0f3; }
.pz-acc > summary { list-style: none; cursor: pointer; padding: 14px 6px; font-weight: 800; font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; }
.pz-acc > summary::-webkit-details-marker { display: none; }
.pz-acc > summary::after { content: "+"; color: #d71920; font-weight: 800; }
.pz-acc[open] > summary::after { content: "−"; }
.pz-acc .pz-acc-body { padding: 0 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.pz-acc .pz-acc-body a { padding: 9px 8px; border-radius: 8px; color: #17191d; font-weight: 600; }
.pz-acc .pz-acc-body a:hover { background: #f6f7f9; color: #d71920; }
.pz-subacc > summary { list-style: none; cursor: pointer; padding: 10px 8px; font-weight: 700; color: #4f5865; display: flex; justify-content: space-between; }
.pz-subacc > summary::-webkit-details-marker { display: none; }
.pz-subacc > summary::after { content: "+"; color: #9aa3af; }
.pz-subacc[open] > summary::after { content: "−"; }
.pz-subacc .pz-acc-body { padding-left: 12px; }
.pz-drawer-link { padding: 14px 6px; font-weight: 800; font-size: 1.02rem; border-bottom: 1px solid #eef0f3; display: block; color: #17191d; }
button.pz-drawer-link { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
#pz-drawer-account-loggedin[hidden] { display: none; }
.pz-drawer-lang { display: flex; align-items: center; gap: 8px; padding: 14px 6px; }
.pz-drawer-lang a,
.pz-drawer-lang button,
.pz-drawer-lang span {
  border: 1px solid #e6e8ec; background: #fff; border-radius: 999px; padding: 8px 14px;
  font: inherit; font-weight: 600; cursor: pointer; color: #4f5865;
  text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease;
}
.pz-drawer-lang a:hover,
.pz-drawer-lang a:focus-visible { color: #17191d; border-color: #cfd4db; }
.pz-drawer-lang .is-active {
  border-color: #d71920; color: #d71920; font-weight: 600; cursor: default;
}
.pz-drawer-lang button[disabled] { color: #c2c7cf; cursor: not-allowed; }
.pz-drawer-ctas { display: grid; gap: 10px; margin-top: 12px; }
.pz-drawer-ctas .pz-btn { width: 100%; }

/* --- Social icons (URLs from PrintazNav.config.social) --- */
.pz-social {
  display: none;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.pz-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #6b7280;
  transition: color 0.15s ease, background 0.15s ease;
}
.pz-social-icon svg { width: 16px; height: 16px; display: block; }
.pz-social-icon:hover,
.pz-social-icon:focus-visible {
  color: #d71920;
  background: #fdecec;
}
.pz-social-icon:focus-visible {
  outline: 2px solid rgba(215, 25, 32, 0.45);
  outline-offset: 1px;
}
.pz-social-icon.is-pending {
  color: #c2c7cf;
  cursor: default;
  opacity: 0.7;
}
.pz-social--drawer {
  display: flex;
  gap: 8px;
  padding: 12px 6px;
  border-bottom: 1px solid #eef0f3;
}
.pz-social--drawer .pz-social-icon {
  width: 36px;
  height: 36px;
}
.pz-social--drawer .pz-social-icon svg { width: 18px; height: 18px; }
@media (min-width: 1100px) {
  .pz-social--desktop { display: inline-flex; margin-right: 2px; }
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .pz-social--desktop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pz-header, .pz-header-inner, .pz-logo img, .pz-caret, .pz-btn, .pz-social-icon { transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------
   Request reference line.

   Shown in every submission confirmation. Lives here because header.css is
   the only stylesheet on every page type, and the four forms that show it
   (contact, header quote, custom project, category request) do not share any
   other one.

   Why it exists: e-mail is optional on these forms, so for a customer who
   leaves it blank this line is the ONLY reference they will ever see. It has
   to survive being read off a screen and repeated over the phone.

   `display: block` on the base class kills the default [hidden] behaviour, so
   the [hidden] rule below is load-bearing, not tidiness -- without it the line
   renders empty on every form that has no number yet.
   --------------------------------------------------------------------------- */
.pz-ref {
  display: block;
  margin: 14px auto 4px;
  padding: 10px 14px;
  max-width: 22em;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  text-align: center;
  line-height: 1.5;
}
.pz-ref[hidden] { display: none; }
.pz-ref__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pz-ref__number {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  /* One click selects the whole reference -- it is meant to be copied. */
  -webkit-user-select: all;
  user-select: all;
}