/* PERA citizen theme — application additions.
   Kept separate from `pera-citizen.css` so a future theme revision can
   be dropped in wholesale without losing these rules.

   Scope: the account controls in the utility bar. The supplied theme is
   a static marketing page with no notion of a signed-in citizen, but
   the portal's previous header carried "My Complaints", an unread-reply
   bell and logout. Those are restyled here to sit in the dark utility
   bar so the main header row still matches the approved design exactly.

   Note: the theme's mobile rule hides `.pp-utility__links span:nth-child(n+2)`.
   These controls are <a>/<form>, not <span>, so they intentionally
   survive that breakpoint — account access should not vanish on a phone. */

.pera-portal .pp-utility__auth {
  color: #fff;
  text-decoration: none;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.pera-portal .pp-utility__auth:hover {
  color: var(--pera-gold-soft);
}

/* Bell: the badge is absolutely positioned against this anchor. */
.pera-portal .pp-utility__bell {
  position: relative;
}

.pera-portal .pp-utility__bell svg {
  width: 16px;
  height: 16px;
  display: block; /* kills the baseline gap that nudges the icon up
                     relative to the adjacent text links */
}

.pera-portal .pp-utility__badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* inline-flex so the wrapping form contributes no baseline of its own. */
.pera-portal .pp-utility__logout {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.pera-portal .pp-utility__logout button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.pera-portal .pp-utility__logout button svg {
  width: 16px;
  height: 16px;
  display: block;
}

.pera-portal .pp-utility__logout button:hover {
  color: var(--pera-gold-soft);
}

/* Footer skyline graphic, restored to the original theme's treatment.
   `.pp-footer-skyline` had been removed from pera-citizen.css (replaced
   by a `.pp-footer-rule` double line), which left the last footer column
   showing two rules and no artwork. Values are the theme's own. */
.pera-portal .pp-footer-skyline {
  max-width: 235px;
  opacity: .72;
  margin-top: 8px;
}

/* Empty-state copy for the news rail when neither news nor press
   releases have been published yet. */
.pera-portal .pp-news__empty {
  margin: 0;
  padding: 26px 0 4px;
  color: var(--pera-muted);
  font-size: .95rem;
}

/* ── Hero copy treatment ──────────────────────────────────────────────
   Matches the approved hero reference against the v2 photograph:
   a vivid yellow "ENFORCING", a short gold rule under the kicker, and
   the headline set on two lines ("ENFORCING" / "A BETTER PUNJAB")
   instead of the theme's original three.

   The accent is a brighter, more saturated yellow than the theme's
   `--pera-gold-soft` (#e3b959) so it holds up against the sunset in the
   new background. It is scoped to .pp-hero on purpose — the rest of the
   page keeps the approved muted gold. */
.pera-portal .pp-hero {
  --pera-hero-accent: #f5d01e;

  min-height: 500px;
}

.pera-portal .pp-hero__inner {
  min-height: 500px;
}

/* No top/bottom cropping of the hero photograph.
   With a fixed-height band, `background-size: cover` scaled the image to
   the width and cut the overflow off the top and bottom — 67px at a
   1440px window, 256px at 1920px. Letting the band carry the image's own
   ratio (1999 x 787 = 2.54:1) makes the scale factor exactly
   width/1999, so the frame fits with nothing trimmed.

   `aspect-ratio` rather than a 100vw calc on purpose: vw units include
   the scrollbar, so a calc overshoots the element's real width and trims
   the sides instead (15px at 1440). aspect-ratio reads the used width.

   Gated at 1100px because below that the ratio height falls under the
   copy column's ~423px and the text would be clipped by the hero's
   `overflow: hidden`. The 500px min-height above stays as the floor, so
   between 1100-1270px the band is 500px and crops the sides slightly;
   past 1270px it is an exact fit. Narrow screens keep the flat 500px
   band — a 2.54:1 image cannot fill a tall, narrow area without
   letterboxing, so side-cropping there is the intended trade. */
@media (min-width: 1100px) {
  .pera-portal .pp-hero {
    aspect-ratio: 1999 / 787;

    /* `width` MUST stay pinned. aspect-ratio resolves in both directions:
       with width:auto, the 500px min-height above becomes the definite
       axis and the ratio derives the WIDTH from it (500 x 2.54 = 1270px),
       which overflowed the page horizontally between 1100-1270px. An
       explicit width makes the width the definite axis, so the ratio only
       ever drives the height. */
    width: 100%;
    max-width: 100%;
  }
}

/* Softened hero overlay.
   The theme darkens the photograph with a hard left-to-right scrim that
   starts at 98% opacity, which reads as a flat black panel on wide
   screens now that the headline is shorter and no longer fills it. These
   stops are eased so the photograph shows through while the headline
   keeps enough contrast (it also carries its own text-shadow).

   Theme stops were: .98 0% / .9 28% / .54 48% / .12 74% / .04 100%

   NOTE: `background-image` is one property, so the photo URL has to be
   repeated here. If the hero image is ever swapped in pera-citizen.css,
   update this path too or the old picture will keep showing. */
.pera-portal .pp-hero::before {
  background-image:
    linear-gradient(90deg,
      rgba(10, 14, 12, .88) 0%,
      rgba(10, 14, 12, .74) 28%,
      rgba(10, 14, 12, .40) 48%,
      rgba(10, 14, 12, .08) 74%,
      rgba(10, 14, 12, .02) 100%),
    url('../images/hero-background-v3.png');
}

/* The theme stacks a second top-to-bottom wash over the photo as well;
   eased back so the two scrims don't compound into a muddy image. */
.pera-portal .pp-hero::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .10));
}

.pera-portal .pp-hero__accent {
  color: var(--pera-hero-accent);
}

/* Short gold rule between the kicker and the headline. A real element
   rather than a ::after, because .pp-hero__kicker is a wrapping flex
   row and a pseudo-element would be laid out as another flex item. */
.pera-portal .pp-hero__kicker {
  margin-bottom: 10px;
}

.pera-portal .pp-hero__rule {
  width: 58px;
  height: 3px;
  margin: 0 0 20px;
  background: var(--pera-hero-accent);
  border-radius: 2px;
}

/* "A BETTER PUNJAB" is one line in the reference, so the copy column and
   headline both need more room than the theme's 560px/520px. Deliberately
   NO white-space:nowrap — the line should still wrap on narrow screens
   rather than overflow the viewport. */
.pera-portal .pp-hero__copy {
  max-width: 660px;
}

.pera-portal .pp-hero h1 {
  font-size: clamp(2.8rem, 3.9vw, 3.7rem);
  max-width: 620px;
}

/* The reference's primary button reads as the same vivid yellow as the
   headline; muted gold next to a vivid headline looks unfinished. Scoped
   to the hero, so "About PERA" and "View Station Map" are unaffected. */
.pera-portal .pp-hero .pp-btn--gold {
  background: var(--pera-hero-accent);
  color: #1d1a12;
}

.pera-portal .pp-hero .pp-btn--gold:hover {
  background: #e4c015;
}

@media (max-width: 620px) {
  /* On a phone the copy spans nearly the full width, so the scrim has to
     stay considerably stronger than the desktop one or the headline sits
     on open photograph. Still eased off the theme's .98/.88/.26.
     `background-position: 64% center` from the theme still applies. */
  .pera-portal .pp-hero::before {
    background-image:
      linear-gradient(90deg,
        rgba(8, 12, 10, .92) 0%,
        rgba(8, 12, 10, .80) 55%,
        rgba(8, 12, 10, .30) 100%),
      url('../images/hero-background-v3.png');
  }

  /* Keep the theme's smaller mobile headline and let the copy column
     collapse with it; the headline wraps naturally at this size. */
  .pera-portal .pp-hero__copy {
    max-width: 100%;
  }

  .pera-portal .pp-hero h1 {
    font-size: 2.6rem;
    max-width: 100%;
  }

  .pera-portal .pp-hero__rule {
    margin-bottom: 16px;
  }
}