/*
 * Foundub vacancy cards.
 *
 * Every customer runs a different theme, so this file styles STRUCTURE only —
 * the grid, the spacing, the card shape. Everything that carries a brand is
 * inherited:
 *
 *   - no font-family and no absolute font-size, so the theme's typography wins;
 *   - colour is `inherit`, and the borders/surfaces are built from
 *     `currentColor` at low alpha, so the cards work on a light theme and a
 *     dark one without knowing which it is;
 *   - the call to action carries the theme's own button classes
 *     (`wp-element-button`, `button`, `btn`); the rules here are a fallback
 *     that a themed button overrides simply by being more specific.
 *
 * Every value is overridable per site with a custom property, so a customer can
 * match their own cards without editing the plugin:
 *
 *   .foundub-cards { --foundub-card-radius: 0; --foundub-gap: 2rem; }
 */

.foundub-cards {
  --foundub-gap: 1.5rem;
  --foundub-card-padding: 1.5rem;
  --foundub-card-radius: 12px;
  --foundub-card-bg: rgba(127, 127, 127, 0.04);
  --foundub-card-border: rgba(127, 127, 127, 0.24);
  --foundub-card-min: 17.5rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--foundub-card-min), 1fr));
  gap: var(--foundub-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foundub-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--foundub-card-padding);
  background: var(--foundub-card-bg);
  border: 1px solid var(--foundub-card-border);
  border-radius: var(--foundub-card-radius);
  color: inherit;
}

.foundub-card__title {
  margin: 0;
  /* Relative, so it stays in proportion to whatever the theme sets. */
  font-size: 1.15em;
  line-height: 1.3;
}

.foundub-card__title a {
  color: inherit;
  text-decoration: none;
}

.foundub-card__title a:hover,
.foundub-card__title a:focus-visible {
  text-decoration: underline;
}

.foundub-card__meta {
  margin: 0;
  font-size: 0.875em;
  opacity: 0.75;
}

.foundub-card__excerpt {
  margin: 0;
  font-size: 0.9375em;
  opacity: 0.85;
}

/* Pushes the call to action to the bottom, so cards of unequal length line up. */
.foundub-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/*
 * Fallback for a theme that styles none of the button classes on this element.
 *
 * Deliberately a single class and nothing more specific: this stylesheet is
 * enqueued before the theme's (priority 5), so a theme rule on `.button`,
 * `.btn` or `.wp-element-button` comes later in the cascade at equal
 * specificity and wins. Anything clever with `:not()` would fail here, because
 * those classes are always present — the point is that they may be unstyled.
 */
.foundub-card__cta,
.foundub-apply__submit {
  display: inline-block;
  padding: 0.5em 1.1em;
  border: 1px solid currentColor;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  /* A <button> inherits none of this on its own. */
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.foundub-empty {
  opacity: 0.75;
}

.foundub-archive__head {
  margin-bottom: var(--foundub-gap, 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  .foundub-card {
    transition: border-color 0.15s ease-in-out;
  }
}

.foundub-card:hover,
.foundub-card:focus-within {
  border-color: rgba(127, 127, 127, 0.45);
}

/*
 * The archive's own page frame.
 *
 * The template renders straight into whatever the theme calls its content area,
 * and a theme is free to supply no layout there at all. Draiv's does exactly
 * that (25 September 2026): its navigation is `position: fixed` and every one of
 * the theme's OWN templates reserves the 112px itself. The overview is not one
 * of those templates, so it sat flush against the viewport edge with its title
 * cut in half by the header and the empty-state line hidden behind it entirely.
 *
 * Structure only, like the rest of this file, and every value overridable:
 *
 *   .foundub-archive { --foundub-archive-width: none; --foundub-archive-top: 0; }
 *
 * `--foundub-archive-top` is the one a fixed header needs; foundub-archive.js
 * measures that header and raises it, so this value is what the page falls back
 * to when the script does not run.
 */
.foundub-archive {
  --foundub-archive-width: 75rem;
  --foundub-archive-inset: 1.5rem;
  --foundub-archive-top: 2.5rem;
  --foundub-archive-bottom: 4rem;

  box-sizing: border-box;
  max-width: var(--foundub-archive-width);
  margin-right: auto;
  margin-left: auto;
  padding: var(--foundub-archive-top) var(--foundub-archive-inset) var(--foundub-archive-bottom);
}

/*
 * The apply form on a vacancy page.
 *
 * Until 1.1.1 this carried inline styles and the page loaded no stylesheet at
 * all, so nothing about it could be overridden and it read as a raw browser
 * form under the vacancy text. Same contract as the cards: structure only, the
 * theme keeps the typography, the colours and the button.
 */
.foundub-apply {
  --foundub-apply-gap: 1rem;

  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(127, 127, 127, 0.24);
}

.foundub-apply__title {
  margin: 0 0 1.5rem;
  font-size: 1.3em;
  line-height: 1.3;
}

.foundub-apply__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--foundub-apply-gap) 1.5rem;
}

.foundub-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

/* The CV picker reads as one field across the row rather than half of one. */
.foundub-field--wide {
  grid-column: 1 / -1;
}

.foundub-field__label {
  font-size: 0.9375em;
}

/* Width only: borders, padding and focus stay the theme's business. */
.foundub-field input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.foundub-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.9375em;
}

.foundub-consent input {
  /* Lines the box up with the first line of the sentence, whatever its size. */
  margin-top: 0.25em;
  flex: none;
}

.foundub-apply__actions {
  margin: 1.5rem 0 0;
}

.foundub-apply__msg {
  margin: 1rem 0 0;
}

/*
 * The fallback position (see `foundub_apply_form_fallback`): the form is printed
 * outside the theme's own content area, so it needs the page frame the archive
 * has. Without this it would sit flush against both edges of the screen.
 */
.foundub-apply-standalone {
  box-sizing: border-box;
  max-width: var(--foundub-archive-width, 75rem);
  margin-right: auto;
  margin-left: auto;
  padding: 0 var(--foundub-archive-inset, 1.5rem) var(--foundub-archive-bottom, 4rem);
}