/*
 * PADIS frontend site styles.
 *
 * Consumes the design tokens from tokens.css. Do not hard-code colours, fonts
 * or spacing here; reference the custom properties so the site stays themeable.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--padis-font-body);
  font-size: var(--padis-font-size-base);
  line-height: var(--padis-line-height-base);
  color: var(--padis-color-text);
  background-color: var(--padis-color-surface);
}

h1,
h2,
h3,
h4 {
  font-family: var(--padis-font-heading);
  line-height: 1.2;
  margin: 0 0 var(--padis-space-sm);
}

p {
  margin: 0 0 var(--padis-space-md);
}

a {
  color: var(--padis-color-primary);
}

/* Rich-text images carry their intrinsic pixel size, which overflows any
   column they land in. */
img {
  max-width: 100%;
  height: auto;
}

/* Fluid container: the gutter grows with the viewport and the cap only ever
   acts as a ceiling, so no fixed width decides the layout. */
.padis-container {
  width: min(100% - 2 * var(--padis-gutter), var(--padis-container-max));
  margin-inline: auto;
}

/* Header */

.padis-header {
  position: fixed;
  inset-inline: 0;
  /* Offset below any active operational-message bar, published by layout.js,
     so the fixed bar and the fixed header never overlap and both stay clickable. */
  top: var(--padis-operational-height, 0px);
  z-index: 30;
  padding-block-start: 0;
  padding-inline: var(--padis-header-inset);
  /* The bar is transparent at rest, so the text colour has to follow whatever it
     happens to be sitting on: dark over plain page content, light over a hero or
     the scrolled pill. */
  --padis-header-color: var(--padis-header-text);
  color: var(--padis-header-color);
  transition: padding-block-start var(--padis-header-transition),
              padding-inline var(--padis-header-transition),
              background-color var(--padis-header-transition),
              box-shadow var(--padis-header-transition),
              color var(--padis-header-transition);
  /* The bar spans the full width but is mostly empty; only the pill itself
     should intercept clicks so hero buttons underneath stay reachable. */
  pointer-events: none;
}

/* Scoped to the variants that are transparent at rest: the solid bar sits on its
   own background and takes the scrolled colour instead. Only while the header is
   still transparent - :has() counts its argument's specificity, so without the
   :not()s this rule outranked the scrolled/opaque rule below and the Theme tab's
   "Text when scrolled" was ignored on every page that opens with a hero. */
body:has(.padis-main > .padis-hero:first-of-type) .padis-header--pill:not(.is-scrolled),
body:has(.padis-main > .padis-hero:first-of-type) .padis-header--bar:not(.is-scrolled):not(.padis-header--opaque) {
  --padis-header-color: var(--padis-color-on-primary);
}

/* Once the header paints its own background the text follows that, not the page
   behind it. */
.padis-header.padis-header--pill.is-scrolled,
.padis-header.padis-header--bar.is-scrolled,
.padis-header.padis-header--bar.padis-header--opaque,
.padis-header.padis-header--solid {
  --padis-header-color: var(--padis-header-text-scrolled);
}

.padis-header--pill.is-scrolled {
  padding-block-start: var(--padis-header-float-gap);
  padding-inline: var(--padis-header-inset-scrolled);
}

/* Scoped to the header to outrank .padis-container, which this element also
   carries and which would otherwise cap and pad it like normal page content. */
.padis-header .padis-header__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--padis-space-md);
  width: 100%;
  max-width: var(--padis-header-max);
  padding-inline: var(--padis-header-gutter);
  padding-block: var(--padis-header-padding-scrolled);
  background-color: transparent;
  border-radius: 0;
  transition: max-width var(--padis-header-transition),
              padding-inline var(--padis-header-transition),
              padding-block var(--padis-header-transition),
              background-color var(--padis-header-transition),
              border-radius var(--padis-header-transition),
              box-shadow var(--padis-header-transition);
}

.padis-header--pill.is-scrolled .padis-header__inner {
  max-width: var(--padis-header-max-scrolled);
  padding-inline: var(--padis-header-gutter-scrolled);
  background-color: var(--padis-header-bg-scrolled);
  backdrop-filter: blur(var(--padis-header-blur));
  -webkit-backdrop-filter: blur(var(--padis-header-blur));
  border-radius: var(--padis-header-radius);
  box-shadow: var(--padis-shadow);
}

/* Theme tab "Background before scrolling": an optional colour for the pill and
   sticky-bar variants at rest. Unset keeps them transparent (the original
   look). */
.padis-header--pill:not(.is-scrolled) .padis-header__inner,
.padis-header--bar:not(.is-scrolled):not(.padis-header--opaque) .padis-header__inner {
  background-color: var(--padis-header-bg-rest, transparent);
}

/* Header appearance "No blur": the scrolled pill and the band over a
   Fullscreen hero stop blurring what is behind them. */
.padis-header--no-blur {
  --padis-header-blur: 0px;
  --padis-header-blur-rest: 0px;
}

/* Sticky bar: square and full width like the legacy header, but it still
   collapses on scroll rather than staying put. Only the background and the
   collapse are variant-specific; the geometry is the shared resting one. */
.padis-header--bar.is-scrolled,
.padis-header--bar.padis-header--opaque {
  background-color: var(--padis-header-bg-solid);
  box-shadow: var(--padis-shadow);
  pointer-events: auto;
}

/* Solid variant: a square, opaque, full-width bar that does not collapse on
   scroll, matching the previous site. */
.padis-header--solid {
  background-color: var(--padis-header-bg-solid);
  box-shadow: var(--padis-shadow);
  pointer-events: auto;
}

.padis-header__brand {
  font-family: var(--padis-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--padis-header-color);
  text-decoration: none;
}

/* Hero base styling (heading/description/media/actions/layout modifiers) now
   lives in hero.css, loaded by the hero partials themselves - see
   hero.cshtml/heroBlock.cshtml. The header-transparency
   interaction rules below stay here since they key off .padis-hero as a
   structural selector on the page shell, not on the component's own styling. */

.padis-main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  background-color: var(--padis-color-surface);
  padding-block: calc(var(--padis-header-height, 5rem) + var(--padis-operational-height, 0px) + var(--padis-space-lg)) var(--padis-space-lg);
  /* Reserves the scroll room that uncovers the fixed footer underneath. */
  margin-block-end: var(--padis-footer-height);
}

/* A hero runs full-bleed beneath the transparent header instead of being pushed
   clear of it, so it absorbs the header offset itself. */
body:has(.padis-main > .padis-hero:first-of-type) .padis-main {
  padding-block-start: 0;
}

.padis-main > .padis-hero:first-of-type {
  padding-block-start: calc(var(--padis-header-height, 5rem) + var(--padis-space-lg));
}

/* A Fullscreen hero that opens a Block Grid page also runs behind the header;
   the Block Grid wraps it in a layout item so the rules above don't match. */
.padis-main:has(.umb-block-grid__layout-item:first-child > .padis-hero--fullscreen) {
  padding-block-start: 0;
}

.umb-block-grid__layout-item:first-child > .padis-hero--fullscreen {
  padding-block-start: calc(var(--padis-header-height, 5rem) + var(--padis-operational-height, 0px) + var(--padis-space-lg));
}

body:has(.umb-block-grid__layout-item:first-child > .padis-hero--fullscreen) .padis-header--pill:not(.is-scrolled),
body:has(.umb-block-grid__layout-item:first-child > .padis-hero--fullscreen) .padis-header--bar:not(.is-scrolled):not(.padis-header--opaque) {
  --padis-header-color: var(--padis-color-on-primary);
}

/* Subtle translucent band so the nav stays legible over a Fullscreen hero
   photo; the scrolled pill/bar styling takes over once the page moves. The
   Theme tab's "Background before scrolling" replaces the band colour, and the
   "No blur" header setting switches its blur off. */
body:has(.padis-main > .padis-hero--fullscreen:first-of-type, .umb-block-grid__layout-item:first-child > .padis-hero--fullscreen) .padis-header--pill:not(.is-scrolled) .padis-header__inner,
body:has(.padis-main > .padis-hero--fullscreen:first-of-type, .umb-block-grid__layout-item:first-child > .padis-hero--fullscreen) .padis-header--bar:not(.is-scrolled):not(.padis-header--opaque) .padis-header__inner {
  background-color: var(--padis-header-bg-rest, rgba(0, 0, 0, 0.25));
  backdrop-filter: blur(var(--padis-header-blur-rest, 0.5rem));
  -webkit-backdrop-filter: blur(var(--padis-header-blur-rest, 0.5rem));
}

/* The hero's 100vw breakout includes the scrollbar width and would otherwise
   cause a horizontal scrollbar. */
html {
  overflow-x: clip;
}

.padis-section {
  margin-bottom: var(--padis-space-lg);
}

.padis-placeholder {
  border: 1px dashed var(--padis-color-border);
  border-radius: var(--padis-radius);
  background-color: var(--padis-color-surface-alt);
  color: var(--padis-color-text-muted);
  padding: var(--padis-space-lg);
  text-align: center;
}

/* Footer */

/* Sits behind the page content and is uncovered as you scroll to the bottom. */
.padis-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  background-color: var(--padis-color-footer-bg);
  color: var(--padis-color-footer-text);
  padding-block: var(--padis-space-lg);
}

.padis-footer a {
  color: var(--padis-color-footer-text);
}

/* Legacy centred the footer on a wider ceiling than the rest of the page and
   let the auto margins absorb the slack. */
.padis-footer .padis-container {
  width: min(100% - 2 * var(--padis-gutter-wide), var(--padis-container-max-wide));
}

.padis-footer__bottom {
  border-top: 1px solid rgba(233, 228, 245, 0.2);
  margin-top: var(--padis-space-md);
  padding-top: var(--padis-space-md);
  font-size: 0.875rem;
  opacity: 0.8;
}

.padis-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--padis-space-lg);
}

/* Buttons */

.padis-button {
  display: inline-block;
  padding: 0.6em 1.4em;
  border: 2px solid var(--padis-color-primary);
  border-radius: var(--padis-radius);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.padis-button--primary {
  background-color: var(--padis-color-primary);
  color: var(--padis-color-on-primary);
}

.padis-button--primary:hover {
  background-color: var(--padis-color-primary-dark);
  border-color: var(--padis-color-primary-dark);
}

.padis-button--secondary {
  background-color: transparent;
  color: var(--padis-color-primary);
}

.padis-button--secondary:hover {
  background-color: var(--padis-color-primary);
  color: var(--padis-color-on-primary);
}

/* Header logos and navigation */

.padis-header__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.padis-header__logo {
  display: block;
  height: var(--padis-header-logo-height-scrolled);
  width: auto;
  transition: height var(--padis-header-transition),
              opacity var(--padis-header-transition);
}

/* Stacked on top of the default logo so the two can cross-fade in place. */
.padis-header__logo--scrolled {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
}

/* Only fade the default logo out when an alternate one was actually authored. */
.padis-header--pill.is-scrolled .padis-header__brand:has(.padis-header__logo--scrolled) .padis-header__logo--default,
.padis-header--bar.is-scrolled .padis-header__brand:has(.padis-header__logo--scrolled) .padis-header__logo--default {
  opacity: 0;
}

.padis-header--pill.is-scrolled .padis-header__logo--scrolled,
.padis-header--bar.is-scrolled .padis-header__logo--scrolled {
  opacity: 1;
}

.padis-nav__list {
  display: flex;
  align-items: center;
  gap: var(--padis-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.padis-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--padis-header-color);
  text-decoration: none;
}

.padis-nav__link:hover {
  text-decoration: underline;
}

.padis-nav__icon {
  height: 1.25em;
  width: auto;
}

.padis-nav__group {
  position: relative;
}

.padis-nav__group-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--padis-header-color);
}

/* The trigger is a button for keyboard and screen-reader support, so it has to
   be stripped back down to look like the sibling nav links. */
button.padis-nav__group-title {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

.padis-nav__chevron {
  transition: transform var(--padis-header-transition);
}

/* Opt-in coloured pill. Two classes deep on the group title so it outranks the
   button reset above, which zeroes the padding this needs. */
.padis-nav__link--pill,
.padis-nav__group-title.padis-nav__group-title--pill {
  padding: var(--padis-nav-pill-padding-block) var(--padis-nav-pill-padding-inline);
  border-radius: 999px;
  background-color: var(--padis-nav-pill-bg);
  color: var(--padis-nav-pill-text);
  transition: background-color var(--padis-header-transition);
}

/* The plain nav link underlines on hover; a pill shifts colour instead. */
.padis-nav__link--pill:hover,
.padis-nav__group-title.padis-nav__group-title--pill:hover {
  background-color: var(--padis-nav-pill-hover);
  text-decoration: none;
}

/* Per-item pill colour (pillColor). Re-scopes the pill tokens on the item
   itself, so the rules above pick the theme's Secondary/Accent colours up. */
.padis-nav__pill--secondary {
  --padis-nav-pill-bg: var(--padis-color-secondary);
  --padis-nav-pill-hover: var(--padis-color-secondary-dark);
  --padis-nav-pill-text: var(--padis-color-on-secondary);
}

.padis-nav__pill--accent {
  --padis-nav-pill-bg: var(--padis-color-accent);
  --padis-nav-pill-hover: var(--padis-color-accent-dark);
  --padis-nav-pill-text: var(--padis-color-on-accent);
}

/* Stretching the item makes it as tall as the flex line, so the button below
   inherits the tallest nav item's height instead of recomputing it. */
.padis-nav__item--search {
  display: flex;
  align-self: stretch;
}

/* Icon-only, so the pill is a circle rather than the wider nav-item shape. As a
   flex item it stretches to the row height, and aspect-ratio squares it off. */
.padis-nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  /* Sized up from the plain nav-item padding so the circle reads as its own
     clearly-tappable button rather than blending into the row. */
  padding: 0.65em;
  aspect-ratio: 1;
  border: none;
  border-radius: 999px;
  background-color: var(--padis-nav-pill-bg);
  color: var(--padis-nav-pill-text);
  cursor: pointer;
  /* Delayed opacity step (not a fade) so the trigger stays hidden through the
     whole close animation - see aria-expanded="true" below. */
  transition: background-color var(--padis-header-transition),
              opacity 0s linear 0.42s;
}

.padis-nav__search:hover {
  background-color: var(--padis-nav-pill-hover);
}

/* Sized in em so the icon tracks the nav font rather than a fixed pixel size. */
.padis-nav__search svg {
  width: 1.5em;
  height: 1.5em;
}

/* The trigger's screen position is measured in JS (search.js), so sub-pixel
   rounding can leave a sliver of its circle peeking past the panel's rounded
   corner. Hiding it - instantly on open, only after the panel fully closes
   (matching its 0.42s clip-path) - removes that artifact outright. */
.padis-nav__search[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s linear 0s;
}

/* Search overlay */

/* position: fixed (not absolute): the panel is a sibling of <header> in
   <body>, not nested under a positioned ancestor, so search.js's measured
   translate() anchors it to the trigger's on-screen position. */
.padis-search {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 40;
  inline-size: min(22rem, 90vw);
  overflow: visible;
  pointer-events: none;
}

.padis-search.is-open {
  pointer-events: auto;
}

.padis-search__panel {
  inline-size: 100%;
  /* Fixed height matching the trigger's own circular size so the pill never
     grows - results render below in .padis-search__results instead. */
  block-size: calc(1.5em + 2 * 0.65em);
  padding: 0;
  background-color: var(--padis-color-surface);
  border-radius: 999px;
  box-shadow: var(--padis-shadow);
  overflow: hidden;
  /* Revealed via clip-path (an inset from the right edge) rather than
     scaleX(): scaling distorted the border-radius corners into a
     momentarily square/blocky shape. Clipping keeps the panel's rounding
     correct at every point of the animation since only visibility changes,
     not the box's own geometry. */
  clip-path: inset(0 0 0 100% round 999px);
  transition: clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.padis-search.is-open .padis-search__panel {
  clip-path: inset(0 0 0 0 round 999px);
}

.padis-search__bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  block-size: calc(1.5em + 2 * 0.65em);
  gap: 0;
}

/* Purely decorative, echoing the magnifying-glass shape of the trigger inside
   the pill itself; the actual search is triggered by typing, not this icon. */
.padis-search__icon {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  margin-inline-start: var(--padis-space-md);
  color: var(--padis-color-text-muted);
}

.padis-search__input {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  padding-inline: var(--padis-space-sm) var(--padis-space-md);
  font: inherit;
  border: none;
  border-radius: 0;
  background: none;
}

.padis-search__input:focus {
  outline: none;
}

/* The browser's built-in clear ("x") button on <input type="search"> doesn't
   match this pill's custom styling, so it's hidden across engines; typing and
   Escape/outside-click already provide ways to clear/close. */
.padis-search__input::-webkit-search-cancel-button,
.padis-search__input::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
}

.padis-search__input::-ms-clear {
  display: none;
}

/* Icon-button treatment matching the search trigger on the opposite end of the bar. */
.padis-search__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--padis-space-sm);
  padding: 0.25em;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--padis-color-text-muted);
  cursor: pointer;
}

.padis-search__close svg {
  width: 1.1em;
  height: 1.1em;
}

.padis-search__close:hover,
.padis-search__close:focus-visible {
  background-color: var(--padis-color-primary);
  color: var(--padis-color-on-primary);
}

.padis-search__close:focus-visible {
  outline: 2px solid var(--padis-color-primary);
  outline-offset: 2px;
}

/* Separate box below the pill so the pill itself stays a fixed height;
   :empty hides it until a query actually runs. */
.padis-search__results {
  position: absolute;
  inset-block-start: calc(100% + var(--padis-space-sm));
  inset-inline-end: 0;
  inline-size: 100%;
  max-block-size: min(60vh, 24rem);
  overflow-y: auto;
  margin: 0;
  padding-block: var(--padis-space-sm);
  padding-inline: var(--padis-space-sm);
  background-color: var(--padis-color-surface);
  border-radius: var(--padis-radius);
  box-shadow: var(--padis-shadow);
}

.padis-search__results:empty {
  display: none;
}

.padis-search__result-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.padis-search__result a {
  display: block;
  padding: var(--padis-space-sm);
  color: inherit;
  text-decoration: none;
  border-radius: var(--padis-radius);
}

.padis-search__result a:hover {
  background-color: var(--padis-color-primary);
  color: var(--padis-color-on-primary);
}

.padis-search__result-title {
  display: block;
  font-weight: bold;
}

.padis-search__result-context {
  display: block;
  font-size: 0.875em;
  opacity: 0.75;
}

.padis-search__empty {
  margin: 0;
  opacity: 0.75;
}

/* Below ~768px the flyout position is computed in JS from the trigger's
   bounding box (see search.js), since nav wrapping is unpredictable. */
@media (max-width: 48rem) {
  .padis-search {
    position: fixed;
    inset-inline-end: auto;
    inset-inline-start: auto;
    inset-block-end: auto;
    transform: none;
    inline-size: min(20rem, calc(100vw - 2 * var(--padis-space-md)));
    block-size: auto;
    max-block-size: 80vh;
  }
}

.padis-nav__group-title[aria-expanded="true"] .padis-nav__chevron {
  transform: rotate(180deg);
}

.padis-nav__sublist {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  /* Hug the content instead of a fixed min-width, to avoid empty space
     next to a single short item while keeping long labels from stretching. */
  width: max-content;
  min-width: 8rem;
  max-width: 18rem;
  margin: 0;
  padding: var(--padis-space-sm);
  list-style: none;
  background-color: var(--padis-color-surface);
  border-radius: var(--padis-radius);
  box-shadow: var(--padis-shadow);
}

/* Opened by click rather than hover: a hover menu is unusable on touch and traps
   the pointer on the way past. */
.padis-nav__group.is-open .padis-nav__sublist {
  display: block;
}

.padis-nav__sublist a {
  display: block;
  padding: 0.25em 0;
  color: var(--padis-color-text);
  text-decoration: none;
}

.padis-nav__sublist a:hover {
  color: var(--padis-color-primary);
}

/* Content block grid */

.umb-block-grid__layout-container {
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), 1fr);
  gap: var(--padis-space-md);
}

.umb-block-grid__layout-item {
  grid-column: span var(--umb-block-grid--item-column-span, 12);
  min-width: 0;
}

.umb-block-grid__area-container {
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, 12), 1fr);
  gap: var(--padis-space-md);
  margin-top: var(--padis-space-md);
}

.umb-block-grid__area {
  grid-column: span var(--umb-block-grid--area-column-span, 12);
  min-width: 0;
}

/* Two Column Layout: a subtle vertical divider between the "left"/"right"
   areas (e.g. Afdelingsfaciliteter next to Boligtyper) makes the two
   independently-sized columns read as an intentional side-by-side layout
   rather than a misaligned/broken one when their content heights differ. */
.umb-block-grid__area[data-area-alias="right"] {
  border-left: 1px solid var(--padis-color-border);
  padding-left: var(--padis-space-lg);
}

@media (max-width: 48rem) {
  .umb-block-grid__area[data-area-alias="right"] {
    border-left: none;
    padding-left: 0;
  }
}

/* Content blocks */

.padis-block {
  margin-bottom: var(--padis-space-md);
}

.padis-block__media img,
.padis-block--image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--padis-radius);
}

.padis-block__caption {
  margin-top: var(--padis-space-sm);
  font-size: 0.875rem;
  color: var(--padis-color-text-muted);
}

.padis-block--text-image {
  display: flex;
  align-items: center;
  gap: var(--padis-space-md);
}

.padis-block--image-right {
  flex-direction: row-reverse;
}

.padis-block--text-image .padis-block__media {
  flex: 1 1 40%;
}

.padis-block--text-image .padis-block__body {
  flex: 1 1 60%;
}

/* Responsive collapse */

/* The header only grows (and therefore only shrinks on scroll) from desktop up.
   Below this the compact size is the permanent resting state. */
@media (min-width: 64rem) {
  .padis-header .padis-header__inner {
    padding-block: var(--padis-header-padding);
  }

  .padis-header__logo {
    height: var(--padis-header-logo-height);
  }

  .padis-header--pill.is-scrolled .padis-header__inner,
  .padis-header--bar.is-scrolled .padis-header__inner {
    padding-block: var(--padis-header-padding-scrolled);
  }

  .padis-header--pill.is-scrolled .padis-header__logo,
  .padis-header--bar.is-scrolled .padis-header__logo {
    height: var(--padis-header-logo-height-scrolled);
  }
}

@media (prefers-reduced-motion: reduce) {
  .padis-header,
  .padis-header__inner,
  .padis-header__logo,
  .padis-nav__chevron {
    transition: none;
  }
}

@media (max-width: 48rem) {
  /* A proportional gutter is right on desktop but eats a fifth of a phone
     screen, and the derived pill inset compounds it. */
  .padis-header {
    --padis-header-gutter: var(--padis-space-md);
    --padis-header-inset-scrolled: var(--padis-space-sm);
  }

  .padis-header .padis-header__inner {
    flex-wrap: wrap;
  }

  /* A stacked footer easily outgrows a phone viewport, and a fixed element
     taller than the viewport can never be scrolled to. Fall back to a normal
     footer below the content. */
  .padis-footer {
    position: static;
    z-index: auto;
  }

  .padis-main {
    margin-block-end: 0;
  }

  .padis-nav__list {
    flex-wrap: wrap;
  }

  .padis-nav__sublist {
    position: static;
    display: block;
    padding-left: var(--padis-space-md);
    box-shadow: none;
  }

  .umb-block-grid__area {
    grid-column: 1 / -1;
  }

  /* Blocks placed directly in the grid (no column layout) with a half or
     third column span stack full width on mobile, like area content does. */
  .umb-block-grid__layout-item {
    grid-column: 1 / -1;
  }

  .padis-block--text-image {
    flex-direction: column;
    align-items: stretch;
  }

  .padis-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--padis-space-md);
  }
}