/**
 * @file
 * Corporate (Olivero) — component styling.
 * Targets: Views listings, Webform, and Olivero's primary-nav dropdowns.
 * Uses the --corp-* tokens defined in corporate.css (same library, loaded first).
 */

/* ==========================================================================
   A. VIEWS LISTINGS
   ========================================================================== */

/* Exposed filters presented as a corporate filter bar. */
.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp1, 1rem);
  background: var(--corp-surface);
  border: 1px solid var(--corp-border);
  border-radius: var(--border-radius);
  padding: var(--sp1, 1rem) var(--sp1-5, 1.5rem);
  box-shadow: var(--corp-shadow-sm);
  margin-block-end: var(--sp2, 2rem);
}
.views-exposed-form .form-item,
.views-exposed-form .form-actions { margin: 0; }

/* Result summary / header text. */
.view .view-header {
  color: var(--corp-muted);
  font-size: var(--font-size-xs, 0.8125rem);
  margin-block-end: var(--sp1, 1rem);
}

/* Grouping title rows inside listings. */
.view .views-row + .views-row { margin-block-start: var(--sp1, 1rem); }

/* Pager rendered as corporate pills.
   Olivero's pager markup (templates/navigation/pager.html.twig) puts
   `pager__item--active` on the current <li> and `is-active` on its
   <a class="pager__link">, so we style the <li> as the pill and keep
   Olivero's own sizing and focus behaviour on the link. */
.pager__items { gap: 0.375rem; }
.pager__item {
  overflow: hidden; /* clip the full-size link to the pill radius */
  border: 1px solid var(--corp-border);
  border-radius: var(--border-radius);
  background-color: var(--corp-surface);
  transition: border-color 0.15s ease;
}
.pager__item:hover { border-color: var(--corp-primary); }
.pager__link {
  color: var(--corp-primary);
  font-weight: 600;
}
.pager__link:hover { background-color: var(--corp-tint); }
.pager__item--active {
  border-color: var(--corp-primary);
  background-color: var(--corp-primary);
}
.pager__item--active .pager__link,
.pager__link.is-active { color: #ffffff; }
.pager__item--active .pager__link:hover { background-color: transparent; }

/* ==========================================================================
   B. WEBFORM  (contrib module; selectors are harmless if not installed)
   ========================================================================== */

/* The submission form sits on a card surface. */
.webform-submission-form {
  background: var(--corp-surface);
  border: 1px solid var(--corp-border);
  border-radius: var(--border-radius);
  padding: var(--sp2, 2rem);
  box-shadow: var(--corp-shadow-sm);
}

/* Section headings inside multi-part forms. */
.webform-section__title,
.webform-submission-form legend,
.webform-submission-form .fieldset__legend {
  color: var(--corp-ink);
  font-weight: 700;
}

/* Required marker: intentionally NOT restyled. Olivero renders it as a
   background-image SVG asterisk (css/components/form.css), so a `color`
   override has no effect; replacing the image would couple us to Olivero
   internals for no real gain. */

/* Wizard progress bar tinted to the brand colour. */
.webform-progress-bar__page--current .webform-progress-bar__page,
.webform-progress-bar__page--done .webform-progress-bar__page {
  background-color: var(--corp-primary);
  border-color: var(--corp-primary);
}
.webform-progress-bar__page--current .webform-progress-bar__page-name { color: var(--corp-primary); }
.webform-progress .progress__track { border-radius: var(--border-radius); }

/* Confirmation message as a branded callout. */
.webform-confirmation {
  background: var(--corp-tint);
  border: 1px solid var(--corp-border);
  border-inline-start: 4px solid var(--corp-primary);
  border-radius: var(--border-radius);
  padding: var(--sp1-5, 1.5rem);
}

/* Multi-value "add another" and file widgets keep the card's neutral tone. */
.webform-multiple-table td { background: transparent; }

/* ==========================================================================
   C. MAIN-MENU DROPDOWNS  (Olivero primary navigation)
   ========================================================================== */

/* Level-1 links a touch bolder for a confident nav bar (all widths). */
.primary-nav__menu-link--level-1 { font-weight: 600; }

/* Wide-width dropdown panel. Scoped to Olivero's own context/breakpoint so the
   show/hide behaviour (visibility/opacity/transform) is left untouched — we
   only restyle the panel surface. The brand-coloured top border is inherited
   from Olivero's --color--primary-50 and recolours with the settings. */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
    padding-block: var(--sp1-5, 1.25rem);
    border-inline: 1px solid var(--corp-border);
    border-bottom: 1px solid var(--corp-border);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--corp-shadow-lg);
  }

  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
    border-radius: var(--border-radius);
    transition: background-color 0.15s ease;
  }
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:hover,
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus {
    background: var(--corp-tint);
  }
}

/* ==========================================================================
   D. REDUCED MOTION — neutralise this file's own motion effects
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pager__item,
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
    transition: none;
  }
}