/* taxes-refund.co.il - Urgency banner - 12.10.2026
 * Front page only (enqueued from inc/plugin-config.php, priority 21).
 *
 * WHY IT LOOKED LIKE A CHIP IN THE CORNER
 * ---------------------------------------
 * The banner is the first child of <header class="site-header">, which should
 * have made it a full-width row. It did not, and the cause is not in this
 * theme: hello-elementor/header-footer.min.css sets
 *
 *     .site-header { display:flex; flex-wrap:wrap; justify-content:space-between }
 *
 * so the banner was not a block above the nav row - it was a flex ITEM beside
 * it, sized to its own content and pushed to one end by space-between. That is
 * the "small chip overlapping the logo" in the audit, and no amount of width
 * or padding on .trh-urgency would have fixed it.
 *
 * The fix is one declaration: turn that flex row into a column on the front
 * page. The banner then stretches to the full width, the nav row sits under it,
 * and .site-header__inner keeps its own max-width and centring.
 *
 * WHY THE BANNER IS STILL INSIDE THE HEADER
 * -----------------------------------------
 * Brief 2B task 1 recommended pulling it out and making the banner sticky while
 * the header scrolls away. That cannot coexist with task 2, which wants the
 * header to shrink to ~70px ON SCROLL and stay - a header that has scrolled
 * away has nothing left to shrink. Keeping both inside one sticky element gives
 * what the two tasks actually ask for together: a full-width bar above the nav,
 * one sticky context (no duelling sticky siblings), and a stuck block that goes
 * from ~116px to ~70px when the bar collapses. It also keeps --tr-header-h
 * honest: theme.js measures .site-header with a ResizeObserver, so the mobile
 * drawer, scroll-padding-top and the floating CTA all follow the real height,
 * collapsed or not, with no extra code. That was option ב' in the brief.
 */

/* The one declaration that fixes the chip. Scoped to .home so no other page's
   header layout changes, and (0,2,0) beats header-footer.min.css's (0,1,0)
   whatever order the stylesheets load in. */
.home .site-header {
  flex-direction: column;
  flex-wrap: nowrap;
  /* space-between was distributing the two rows; with a column and auto height
     it is a no-op, but stating it keeps the intent obvious. */
  justify-content: flex-start;
  align-items: stretch;
  /* header-footer.min.css adds 1rem top and bottom here. The rows own their
     own padding, and 16px of header chrome above the bar is what made the
     block 60px instead of 40px. */
  padding-block: 0;
}

.trh-urgency {
  width: 100%;
  background: var(--trh-ink, #0c2e4e);
  color: #fff;
  font: var(--trh-w-medium, 500) 14px/1.4 'Rubik', system-ui, sans-serif;
}

.trh-urgency__inner {
  max-width: var(--trh-container, 1200px);
  margin: 0 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 20px;
  /* nowrap on purpose: the text and the link are one line, which is what makes
     it read as a bar rather than as a block. The copy is short enough to hold
     at 360px once the font steps down below. */
  flex-wrap: nowrap;
}

/* .site-header a sets min-height:44px (theme.css:210), which is what forced the
   40px bar to 44px and then to 60px with the header's own padding. Inside this
   bar the link fills the bar's full height instead: 40px of height and the full
   width of its own text is a comfortable target at WCAG 2.2 AA (2.5.8 asks for
   24x24). It is 4px short of the 44px that 2.5.5 Enhanced asks for, and task 6
   of this brief is about reaching 44 elsewhere - flagged for Eden rather than
   decided here, because the 40px bar height is his call. */
.trh-urgency__cta {
  color: #9cc6ec;
  text-decoration: underline;
  font-weight: var(--trh-w-semi, 600);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
  white-space: nowrap;
}
.trh-urgency__cta:hover,
.trh-urgency__cta:focus-visible { color: #fff; }

/* In the 768-1023 band theme.css:859 pins .site-header to a hard height with
   !important. A column with two rows inside a fixed height clips the second
   one, so the height goes back to auto - front page only. */
@media (min-width: 768px) and (max-width: 1023px) {
  .home .site-header { height: auto !important; }
}

/* Mobile: the bar stays one line, the type steps down to keep it there. */
@media (max-width: 760px) {
  .trh-urgency { font-size: 12px; }
  .trh-urgency__inner { padding: 0 12px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .trh-urgency * { transition: none !important; }
}


/* ===== Scrolled state (brief 2B task 2) ================================
 * On load the stuck block is the 40px bar plus the 72px nav row. Past 100px of
 * scroll the bar collapses and the nav row tightens, which is what takes the
 * block down to roughly 70px.
 *
 * The audit measured 165px. The declared heights add up to ~116px
 * (40 + --header-height 72, plus the header's own 1rem padding which this file
 * now zeroes out), so 165px most likely included the WordPress admin bar at
 * 32px plus the mobile CTA row. Either way the direction is the one Eden
 * approved, and the collapsed height is stated here rather than measured.
 *
 * max-height, not display:none: the bar has to animate, and a collapsed
 * max-height keeps it in the layout so theme.js's ResizeObserver reports the
 * new header height and every --tr-header-h consumer follows it down.
 */
.home .site-header {
  transition: padding .2s ease;
}
.home .trh-urgency {
  max-height: 60px;
  overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease;
  opacity: 1;
}
.home .site-header__inner {
  transition: height .2s ease;
}

body.is-scrolled .trh-urgency {
  max-height: 0;
  opacity: 0;
  /* Collapsed, so the link inside must not stay reachable by tab or by tap. */
  pointer-events: none;
  visibility: hidden;
}
body.is-scrolled .site-header__inner {
  height: 64px;
}
body.is-scrolled .site-header__logo img {
  max-height: 40px !important;
  height: 40px !important;
}

/* The logo rule above has to out-specify theme.css:824, which sets
   .site-header__logo img { height:56px !important }. body.is-scrolled adds a
   second simple selector, so this scores higher and the !important matches. */

/* Phones keep the header they have: it is already compact, and collapsing the
   deadline bar on the screen where it has the least competition for attention
   is the opposite of the point. Task 2 says not to shrink on mobile. */
@media (max-width: 760px) {
  body.is-scrolled .trh-urgency {
    max-height: 60px;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  body.is-scrolled .site-header__inner { height: auto; }
  body.is-scrolled .site-header__logo img {
    max-height: 40px !important;
    height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .site-header,
  .home .trh-urgency,
  .home .site-header__inner,
  .home .site-header__logo img { transition: none !important; }
}