/* ==========================================================================
   2G Energy Rental — the page header

   One header, identical on every page. Values are lifted from the Power Block
   Designer header, which is the agreed reference:

     logo  ·  bold charcoal title with a light-green highlight  ·  small
     letter-spaced gray meta line

   The highlight is a background gradient that turns green at 58% of the line
   box, so it sits behind the lower part of the text like a marker stroke
   rather than under it like a rule.

   The logo is also the home button. Always Noto Sans, on every page,
   including the kanban — the kanban's Barlow Condensed applies to its board,
   not to this bar.
   ========================================================================== */

.pgh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);            /* 24px, per the reference */
  padding: var(--space-lg) 28px;
  background: var(--gray-10);
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif !important;
}

/* ---- Logo / home button --------------------------------------------------- */

.pgh__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                /* thumb target */
  line-height: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: opacity 0.15s ease;
  flex: none;
}

.pgh__home:hover {
  opacity: 0.65;
}

.pgh__logo {
  height: 34px;
  width: auto;
  display: block;
}

/* ---- Title ----------------------------------------------------------------
   `display: inline` so the highlight hugs the text instead of stretching to
   the container. box-decoration-break keeps the highlight intact if the
   title wraps to a second line on a phone.
------------------------------------------------------------------------- */

.pgh__title {
  margin: 0;
  font-family: inherit !important;
  font-size: var(--text-h2) !important;   /* 32px */
  font-weight: var(--font-weight-bold) !important;
  line-height: 1.15;
  color: #333 !important;                 /* reference charcoal, not brand green */
  letter-spacing: normal;
  text-transform: none !important;        /* never shout, never re-cased */
}

.pgh__title > span {
  display: inline;
  padding: 0 5px 3px;
  background-image: linear-gradient(transparent 58%, var(--light-green) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Meta line ------------------------------------------------------------- */

.pgh__meta {
  margin: 0;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: var(--font-weight-regular) !important;
  letter-spacing: 0.55px;
  color: var(--gray-60) !important;
  text-transform: none !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Nav ------------------------------------------------------------------
   Merged into the header: one bar of chrome instead of two, and every tool
   is one click from every page. Pushed to the right edge; the meta line
   takes the slack between it and the title.
------------------------------------------------------------------------- */

/* Keep the bar to a single line on desktop. Left to wrap, the meta line
   pushed the header between 92px and 152px depending on width — which broke
   both the fixed header height and the one-screen dashboard. The meta is
   secondary, so it truncates; the full text is on the title attribute. */
@media (min-width: 901px) {
  .pgh {
    flex-wrap: nowrap;
  }

  /* The title must never wrap. At 1440 it was being squeezed to 316px,
     breaking onto two lines and pushing the header from 92px to 122px. It
     keeps its intrinsic width; the meta line gives up space instead. */
  .pgh__title {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pgh__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.pgh__nav {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}

.pgh__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.pgh__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--gray-80);
  text-decoration: none;
  white-space: nowrap;
}

.pgh__nav a:hover {
  background: var(--light-green);
  color: var(--2g-green);
}

.pgh__nav a[aria-current='page'] {
  background: var(--2g-green);
  color: var(--white);
}

.pgh__nav a[aria-disabled='true'] {
  color: var(--gray-40);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- The page's own header, once ours has replaced it ---------------------- */

[data-pgh-hidden] {
  display: none !important;
}

/* ---- Phone ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .pgh {
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md);
  }

  .pgh__title {
    font-size: var(--text-h3) !important;  /* 24px */
  }

  .pgh__meta {
    flex: 1 1 100%;
    order: 3;
  }

  /* Nav drops to its own full-width line and scrolls sideways rather than
     forcing the page wide. 44px targets return — this is thumb territory. */
  .pgh__nav {
    flex: 1 1 100%;
    order: 4;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pgh__nav::-webkit-scrollbar {
    display: none;
  }

  .pgh__nav ul {
    flex-wrap: nowrap;
  }

  .pgh__nav a {
    min-height: 44px;
  }

  .pgh__logo {
    height: 26px;
  }
}