/*
 * Job Fair landing page: shared tokens and components for the acf/job-fair-* blocks.
 * Translated from the approved static page (GoodWill-May-22/job-fair-2026, compiled
 * Tailwind) into plain CSS so Tailwind's reset never touches the theme header/footer.
 * Loaded before the per-block files (inc/job-fair.php), front end and editor.
 *
 * BEM + specificity contract (keeps these blocks immune to theme/editor rules and to
 * stylesheet load order):
 *   - tokens:            .jf-block                      (0,1,0)
 *   - shared components: .jf-block .jf-btn, .jf-eyebrow  (0,2,0)
 *   - per-block rules:   .jf-block.jf-hero .jf-hero__x   (0,3,0) in css/blocks/job-fair-*.css
 * Breakpoints match the source: sm 640px, md 768px, lg 1024px.
 */
.jf-block {
  --jf-brand: #0351a3;
  --jf-navy: #012f62;
  --jf-ink: #171b24;
  --jf-muted: #536477;
  --jf-ice: #eef6fe;
  --jf-sky: #29a8e3;
  --jf-sun: #ffbf00;
  --jf-leaf: #34ad65;
  --jf-rule: #c6dcef;
  font-family: "Gantari", sans-serif;
  color: var(--jf-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
.jf-block *,
.jf-block *::before,
.jf-block *::after { box-sizing: border-box; }

/* Neutralise theme/Bootstrap element defaults inside the blocks at element-level
   specificity, so every class rule below and in the block files still beats it. */
:where(.jf-block) :is(h1, h2, h3, p, dl, dt, dd, ul, li, figure) { margin: 0; padding: 0; font-family: inherit; color: inherit; }
:where(.jf-block) ul { list-style: none; }
:where(.jf-block) img { display: block; max-width: 100%; }
.jf-block a:focus-visible,
.jf-block button:focus-visible { outline: 3px solid var(--jf-sky); outline-offset: 5px; }

.jf-block .jf-page-width { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 1.5rem; }

.jf-block .jf-eyebrow { font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--jf-navy); }
.jf-block .jf-section-title { font-size: 1.875rem; line-height: 1.12; font-weight: 700; letter-spacing: -.035em; color: var(--jf-navy); }
.jf-block .jf-body-copy { font-size: 1.125rem; line-height: 1.5; color: var(--jf-muted); }

/* Button (BEM block .jf-btn, modifier --primary). Mirrors the theme's header CTA
   (.custom-btn.btn--blue in style.css): 12px radius, 2px border, 22px/32px bold,
   the same padding, hover colour and step-down scale per breakpoint (see media
   queries at the end of this file), full width on phones. */
.jf-block .jf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9375rem;
  padding: .875rem 1.625rem; border: .125rem solid var(--jf-brand); border-radius: .75rem;
  font-size: 1.375rem; line-height: 2rem; font-weight: 700; text-decoration: none;
  transition: .4s;
}
.jf-block .jf-btn--primary,
.jf-block .jf-btn--primary:visited { background-color: var(--jf-brand); border-color: var(--jf-brand); color: #fff; }
.jf-block .jf-btn--primary:hover,
.jf-block .jf-btn--primary:focus,
.jf-block .jf-btn--primary:active { background-color: #07416f; border-color: #07416f; color: #fff; text-decoration: none; }

/* Text link (BEM block .jf-text-link, modifier --light) */
.jf-block .jf-text-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--jf-brand);
  text-decoration: underline; text-underline-offset: 4px;
}
.jf-block .jf-text-link:hover { color: var(--jf-brand); text-decoration-thickness: 2px; }
.jf-block .jf-text-link--light,
.jf-block .jf-text-link--light:hover,
.jf-block .jf-text-link--light:visited { color: #fff; }

/* Icon (BEM block .jf-icon, size and colour modifiers) */
.jf-block .jf-icon { display: inline-block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jf-block .jf-icon--xs { width: 1rem; height: 1rem; }
.jf-block .jf-icon--sm,
.jf-block .jf-icon--md { width: 1.25rem; height: 1.25rem; }
.jf-block .jf-icon--md2 { width: 1.5rem; height: 1.5rem; }
.jf-block .jf-icon--lg { width: 1.75rem; height: 1.75rem; }
.jf-block .jf-icon--date { width: 2.25rem; height: 2.25rem; }
.jf-block .jf-icon--xl2 { width: 2.5rem; height: 2.5rem; }
.jf-block .jf-icon--xl { width: 3.5rem; height: 3.5rem; }
.jf-block .jf-icon--brand { color: var(--jf-brand); }
.jf-block .jf-icon--navy { color: var(--jf-navy); }

.jf-block .jf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.jf-block .jf-br-sm { display: none; }

@media (min-width: 640px) {
  .jf-block .jf-br-sm { display: inline; }
}
@media (min-width: 768px) {
  .jf-block .jf-page-width { padding-inline: 2.5rem; }
  .jf-block .jf-eyebrow { font-size: .875rem; line-height: 1.25rem; }
  .jf-block .jf-section-title { font-size: 38px; }
  .jf-block .jf-body-copy { font-size: 1.25rem; line-height: 1.5; }
  .jf-block .jf-text-link { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Button scale: same breakpoints and values as .custom-btn in the theme's style.css. */
@media (min-width: 93.75rem) and (max-width: 99.9375rem) {
  .jf-block .jf-btn { font-size: 1.25rem; padding: .8125rem 1.625rem; }
}
@media (min-width: 87.5rem) and (max-width: 93.6875rem) {
  .jf-block .jf-btn { font-size: 1.125rem; padding: .75rem .9375rem; }
}
@media (min-width: 81.25rem) and (max-width: 87.4375rem) {
  .jf-block .jf-btn { font-size: 1.0625rem; padding: .625rem .9375rem; }
}
@media (min-width: 62rem) and (max-width: 81.1875rem) {
  .jf-block .jf-btn { font-size: 1rem; padding: .625rem .9375rem; }
}
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .jf-block .jf-btn { font-size: 1.125rem; padding: .6875rem 1.375rem; }
}
@media (max-width: 47.9375rem) {
  .jf-block .jf-btn { width: 100%; font-size: 1.125rem; padding: .625rem 1.375rem; }
}
@media (max-width: 379px) {
  .jf-block .jf-eyebrow { letter-spacing: .12em; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-block *, .jf-block *::before, .jf-block *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Block editor only: css/editor-overrides.css forces every link blue and not
   underlined with !important. Keep the job fair buttons and links as designed. */
.editor-styles-wrapper .jf-block a.jf-btn--primary { color: #fff !important; }
.editor-styles-wrapper .jf-block a.jf-text-link { color: var(--jf-brand) !important; text-decoration: underline !important; }
.editor-styles-wrapper .jf-block a.jf-text-link--light { color: #fff !important; }