/**
 * @file overrides/webform-shortcut.shortcut.css
 * Overrides for the webform_shortcut bar. Attached via libraries-extend on the
 * module's shortcut library (see wwf_tw.info.yml), so it loads only where the
 * bar renders.
 *
 * The bar renders as a "flag": a full-height rectangular orange slice cut
 * into the right edge of the navbar, mirroring the panda logo block cut into
 * its left edge. The cart moves to the flag's left, the panel drops welded to
 * the flag's bottom edge, and the corner stays reserved while the bar is
 * hidden so nothing jumps when it fades in.
 *
 * Must stay UNLAYERED: the module's styles are unlayered and unlayered rules
 * win over any @layer (this also lets these rules beat the header's Tailwind
 * utilities, which live in the utilities layer).
 */

/* CTA colours, wired through the module's own custom properties so every piece
   (toggle, chevron) follows the palette accent. The .js- class doubles the
   specificity past the module's colour modifiers (--dark and friends), which tie
   a bare single class and would otherwise win or lose on stylesheet order. */
.webform-shortcut.js-webform-shortcut {
  --wfs-accent: var(--wwf-color-accent);
  --wfs-accent-fg: var(--wwf-color-accent-foreground);
  --wfs-accent-hover: color-mix(in srgb, var(--wwf-color-accent) 92%, #000000);
}

/* The flag.
   Full-height slice flush with the container's outer edge (= the viewport
   edge while the screen is narrower than the container, the content frame on
   wide screens). Absolute within the header's container, NOT fixed: a fixed
   slice stays put while the sticky header rubber-bands on overscroll.
   Overrides the module's inline placement and the theme's previous mobile
   centring at every width. */

/* The bar must anchor to the header's container (full height, predictable
   width), not to its nav host: the module's behavior inline-sets
   position:relative on the host, so force it static (the !important beats
   the inline style) and let the containing block climb to .wwf-container. */
.wwf-header nav:has(> .js-webform-shortcut) {
  position: static !important;
}
.wwf-header .js-webform-shortcut.webform-shortcut--inline,
.wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-start,
.wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-center,
.wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-end {
  position: absolute;
  /* Mobile-first: the flag hangs below the navbar as a narrow right-flush slice
     tab (still absolute in the header container, so it follows the sticky
     header). The desktop (lg) block lifts it back into the bar. */
  inset-block: 100% auto;
  inset-inline-start: auto;
  inset-inline-end: calc(-1 * var(--wwf-container-px, 1.5rem));
  /* A low tab (~40% shorter than the header) so it reads as a pull-tab, not a
     second bar. */
  height: calc(var(--wwf-header-h, 4.5rem) * 0.6);
  width: 10rem;
  max-width: none;
  margin: 0;
  /* Faster fade than the module's 0.7s, paced with the toggle's wipe below. */
  transition:
    opacity var(--wwf-motion-duration-slow, 300ms) ease,
    visibility 0s linear var(--wwf-motion-duration-slow, 300ms);
}
.wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--visible {
  transition: opacity var(--wwf-motion-duration-slow, 300ms) ease;
}

/* Enter as a wipe from the right edge (the slice slides in) instead of a
   bare fade. On the toggle, not the bar: a clip on the bar would also clip
   the panel hanging below it. The motion tokens collapse to 0s under
   prefers-reduced-motion, so no dedicated reduce block is needed. */
.wwf-header .js-webform-shortcut.webform-shortcut--inline .webform-shortcut__toggle {
  clip-path: inset(0 0 0 100%);
}
.wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--visible .webform-shortcut__toggle {
  clip-path: inset(0 0 0 0);
}

/* The toggle fills the slice: hard rectangle, no radius, dark label on the
   orange (7.7:1; white would fail at 2.2:1). */
.webform-shortcut.js-webform-shortcut .webform-shortcut__toggle {
  width: 100%;
  height: 100%;
  /* Mobile: tight padding + smaller label for the narrow tab; tablet up restores
     a roomier inset + larger label below. */
  padding: 0 0.5rem;
  gap: 0.5rem;
  justify-content: center;
  /* WWF display face: condensed + tall, so the label gains cap height inside the
     slice. A little tracking so the condensed face does not read as squashed. */
  font-family: var(--wwf-font-display, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition:
    background-color var(--wwf-motion-duration, 200ms) ease,
    clip-path var(--wwf-motion-duration-slow, 300ms) ease;
}

@media (min-width: 48rem) {
  /* Tablet up: the tab widens to the shared flag slice (still below the bar)
     with the roomier label. */
  .wwf-header .js-webform-shortcut.webform-shortcut--inline,
  .wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-start,
  .wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-center,
  .wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-end {
    width: var(--wwf-header-flag-w);
  }
  .webform-shortcut.js-webform-shortcut .webform-shortcut__toggle {
    padding: 0 1.75rem;
    gap: 0.75rem;
    font-size: 1.625rem;
  }
}

/* Hover / press darken the fill a step (opacity would let the black header
   bleed through and muddy the orange). Hover only on devices that truly
   hover, so a tap never leaves the darkened state stuck. */
@media (hover: hover) {
  .webform-shortcut.js-webform-shortcut .webform-shortcut__toggle:hover {
    background-color: var(--wfs-accent-hover);
  }
}
.webform-shortcut.js-webform-shortcut .webform-shortcut__toggle:active {
  background-color: color-mix(in srgb, var(--wwf-color-accent) 86%, #000000);
}

/* Focus ring drawn inside the slice: an outer outline would be clipped
   against the viewport edge. */
.webform-shortcut.js-webform-shortcut .webform-shortcut__toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--wfs-accent-fg);
}

/* Open: the flag stays a solid pull-tab (no outline inversion: a hole in the
   bar would break the cut); only the chevron flips (module rule). */
.webform-shortcut.js-webform-shortcut.webform-shortcut--open .webform-shortcut__toggle {
  background-color: var(--wfs-accent);
  border: 0;
  color: var(--wfs-accent-fg);
}

/* Desktop (lg): the flag lifts back into the navbar as the full-height slice
   cut into the right edge. The cart pins to the corner (absolute) so its end
   inset can animate: it owns the corner while the flag is hidden, then slides
   left of the slice as the flag wipes in; the menu keeps clear of both. Below
   lg the flag is the tab under the bar, so the cart stays its normal action. */
@media (min-width: 64rem) {
  .wwf-header .js-webform-shortcut.webform-shortcut--inline,
  .wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-start,
  .wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-center,
  .wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--align-end {
    /* The header's 1px bottom rule sits below the container, so the slice
       reaches over it to span the whole header height. */
    inset-block: 0 -1px;
    height: auto;
  }
  .wwf-header:has(.js-webform-shortcut) .wwf-header__actions {
    position: absolute;
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: calc(1.5rem - var(--wwf-container-px, 1.5rem));
    margin: 0;
    transition: inset-inline-end var(--wwf-motion-duration-slow, 300ms) ease;
  }
  .wwf-header:has(.webform-shortcut--visible) .wwf-header__actions {
    inset-inline-end: calc(var(--wwf-header-flag-w) + 1.25rem - var(--wwf-container-px, 1.5rem));
  }
  .wwf-header:has(.webform-shortcut--visible) nav {
    padding-inline-end: max(0px, calc(var(--wwf-header-flag-w) + 4.5rem - var(--wwf-container-px, 1.5rem)));
  }
}

/* Panel.
   Welded drawer: no gap to the flag, flush to its right edge, square top
   corners: flag is the handle, panel is the drawer. No panel padding: the
   relocated content (e.g. the adoption cards) brings its own spacing and runs
   edge to edge. The .js- class outranks the module's open-state padding bump. */
.webform-shortcut.js-webform-shortcut .webform-shortcut__panel,
.webform-shortcut.js-webform-shortcut.webform-shortcut--open .webform-shortcut__panel {
  padding: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* Mobile / tablet (base): the drawer is a full-bleed panel dropping from below
   the flag tab (the tab sits header-h below the header bottom). */
.wwf-header .js-webform-shortcut.webform-shortcut--inline .webform-shortcut__panel {
  position: fixed;
  top: calc(var(--wfs-offset, 0px) + var(--wwf-header-h, 4.5rem) * 0.6);
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: translateY(-0.75rem);
  /* Below the overhanging logo (z-40) but above the page content. */
  z-index: 30;
}
.wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--open .webform-shortcut__panel {
  transform: translateY(0);
}

/* Desktop (lg): the flag is back in the bar, so the panel hangs off the flag
   itself (the bar is its containing block), starting at its bottom edge. */
@media (min-width: 64rem) {
  .wwf-header .js-webform-shortcut.webform-shortcut--inline .webform-shortcut__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    /* The flag is the containing block, so `auto` shrank the drawer to the
       flag's own width: the form then stacked into a tall narrow column. It
       takes the width its content asks for, capped at the content frame. */
    width: max-content;
    max-width: min(
      var(--wwf-container-max, 75rem),
      calc(100vw - 2 * var(--wwf-container-px, 1.5rem))
    );
    transform: none;
  }
}

/* Inline (in-header) panel: free to grow with its content down to the screen
   edge (the behavior publishes the header's bottom edge in --wfs-offset); it
   only scrolls once the content would run past the screen. */
.webform-shortcut.js-webform-shortcut.webform-shortcut--inline .webform-shortcut__panel {
  max-height: calc(100vh - var(--wfs-offset, 0px) - 1rem);
  max-height: calc(100dvh - var(--wfs-offset, 0px) - 1rem);
}

/* The chevron is the wwf_tw:icon glyph (see the theme's webform-shortcut
   template override), so undo the module's CSS border triangle; the module's
   open/closed rotation states still apply to this wrapper. The stroke is
   thickened to sit next to the heavy WWF display face. */
.webform-shortcut .webform-shortcut__chevron {
  width: auto;
  height: auto;
  border: 0;
  /* Flex centring (not inline baseline): the wrapper's whitespace text nodes
     would otherwise sink the glyph below the line, and the open-state 180°
     rotation mirrors that offset upward. */
  display: inline-flex;
  align-items: center;
  /* The glyph's ink only spans the middle of its box (Lucide side bearings,
     ~5px at this size), which reads as extra padding right of the chevron.
     Pulling both edges in by that bearing keeps the text + chevron group
     optically centred and the text-to-ink gap at the intended 0.75rem. */
  margin-inline: -0.3125rem;
}

.webform-shortcut .webform-shortcut__chevron svg {
  stroke-width: 3.5;
}

/* The mobile-first flag/cart/panel layout (base = the tab below the bar, lg =
   the in-bar slice) lives with each piece above; no max-width blocks here. */

/* Open: everything but the flag and its drawer belongs behind the backdrop.
   The header cannot simply drop below it: the flag lives inside the header, so
   its z-index is capped by the header's own stacking context and it would sink
   with the rest. The bar washes its own contents with the backdrop's veil
   instead, and the flag rides above both. */
.wwf-header:has(.webform-shortcut--open) .wwf-container::after,
.wwf-header:has(.webform-shortcut--open) .wwf-header__logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  pointer-events: none;
}

.wwf-header:has(.webform-shortcut--open) .wwf-container::after {
  z-index: 45;
}

/* The logo block overhangs the bar, so the container's veil would leave its
   lower edge lit. It carries its own and rides over the bar's, which would
   otherwise wash the part inside the bar twice. */
.wwf-header:has(.webform-shortcut--open) .wwf-header__logo {
  z-index: 46;
}

.wwf-header .js-webform-shortcut.webform-shortcut--inline.webform-shortcut--open {
  z-index: var(--wfs-z-index, 601);
}