/* Cards4Jobs consent banner (public/consent/consent.js). Framework-free, attached by consent.js (the layout preloads it).
   Colours, radii, shadows, focus ring and motion come from src/styles/tokens.css; derived colours are color-mix() of
   tokens; the type is the page's (Archivo, inherited from <body>), so the accessibility settings (text size, spacing,
   dyslexia font) apply to it like the rest of the page.
   Layout:
   - below 768 px, a bottom sheet across the screen, above the sticky mobile bar while that shows (--c4j-consent-offset,
     data-raised), so the bar's Call / Book Now / WhatsApp stay visible and usable;
   - from 768 px, a card at the bottom right, beside the floating WhatsApp button (56 px at 1.5rem). The hero heading
     and calls to action are left-aligned on every page and the accessibility launcher sits bottom left, so the card
     covers neither.
   "Accept all" and "Reject all" share one style and one size (equal prominence, ICO guidance); "Manage cookies"
   discloses the per-category panel. */

.c4j-consent[hidden],
.c4j-consent [hidden] { display: none !important; }

.c4j-consent {
  position: fixed;
  z-index: 60; /* above the launcher (45), the a11y panel (55), the header (40) and the bottom bars (30) */
  inset-inline: 0;
  bottom: var(--c4j-consent-offset, 0px);
  /* Room is left above the sheet for the sticky header and, below it, the accessibility launcher, which rises with the
     sheet (effects.css): a fully expanded sheet never pushes the launcher up over the logo. */
  max-height: calc(100vh - var(--c4j-consent-offset, 0px) - var(--header-h, 64px) - 4.5rem);
  max-height: calc(100dvh - var(--c4j-consent-offset, 0px) - var(--header-h, 64px) - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  background: var(--c4j-white);
  color: var(--c4j-ink);
  border-top: 1px solid var(--c4j-line);
  border-radius: var(--c4j-radius-lg) var(--c4j-radius-lg) 0 0;
  box-shadow: 0 -12px 40px color-mix(in srgb, var(--c4j-navy-900) 16%, transparent);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  text-align: start;
}
.c4j-consent *, .c4j-consent *::before, .c4j-consent *::after { box-sizing: border-box; }
.c4j-consent:focus { outline: none; } /* the container only receives focus to announce the dialog */
.c4j-consent :focus-visible {
  outline: var(--c4j-focus-width) solid var(--c4j-focus-outline);
  outline-offset: var(--c4j-focus-offset);
}

.c4j-consent__inner {
  display: grid;
  gap: 0.875rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.125rem max(1.25rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
}
/* On the sticky bar, the bar pads the home indicator. */
.c4j-consent[data-raised] .c4j-consent__inner { padding-bottom: 1rem; }

/* Heading row: the brand's icon tile (navy-900 with a cyan glyph), the title and, once a choice exists, Close. */
.c4j-consent__head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.c4j-consent__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--c4j-radius-sm);
  background: var(--c4j-navy-900);
  color: var(--c4j-cyan-400);
}
.c4j-consent__icon svg { display: block; width: 1.25rem; height: 1.25rem; }
.c4j-consent__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  font-stretch: var(--c4j-stretch-heading);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c4j-navy-900);
  text-wrap: balance;
}
.c4j-consent__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.625rem -0.5rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--c4j-radius-pill);
  background: transparent;
  color: var(--c4j-muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.c4j-consent__close:hover { background: var(--c4j-navy-50); color: var(--c4j-navy-900); }
.c4j-consent__close svg { display: block; }

.c4j-consent__body { display: grid; gap: 0.5rem; min-width: 0; }
.c4j-consent__text { margin: 0; font-size: 0.9375rem; color: var(--c4j-ink-soft); text-wrap: pretty; }
.c4j-consent__small { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--c4j-muted); text-wrap: pretty; }
/* Reopened banner: the saved choice, so the visitor knows what Accept / Reject would change. */
.c4j-consent__current {
  justify-self: start;
  margin: 0;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--c4j-radius-sm);
  background: var(--c4j-navy-50);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c4j-navy-800);
}
/* Global Privacy Control: a quiet note, not a warning. */
.c4j-consent__note {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid var(--c4j-cyan-700);
  border-radius: 0 var(--c4j-radius-sm) var(--c4j-radius-sm) 0;
  background: var(--c4j-navy-50);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c4j-ink-soft);
}
.c4j-consent a {
  color: var(--c4j-cyan-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.c4j-consent a:hover { color: var(--c4j-navy-900); text-decoration-thickness: 2px; }

/* Actions: Accept and Reject side by side, same look and size; Manage below, outlined, full width */
.c4j-consent__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 0.125rem;
}
.c4j-consent__manage { grid-column: 1 / -1; }

.c4j-consent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  margin: 0;
  padding: 0.625rem 1rem;
  border: 2px solid var(--c4j-navy-800);
  border-radius: var(--c4j-radius-pill);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.c4j-consent__btn--primary { background: var(--c4j-navy-800); color: var(--c4j-white); }
.c4j-consent__btn--primary:hover { background: var(--c4j-navy-900); border-color: var(--c4j-navy-900); box-shadow: var(--c4j-shadow-md); }
.c4j-consent__btn--secondary { background: var(--c4j-white); color: var(--c4j-navy-800); }
.c4j-consent__btn--secondary:hover { background: var(--c4j-navy-50); }
.c4j-consent__chevron { flex-shrink: 0; }
.c4j-consent__manage[aria-expanded="true"] { background: var(--c4j-navy-50); }
.c4j-consent__manage[aria-expanded="true"] .c4j-consent__chevron { transform: rotate(180deg); }

/* Manage panel */
.c4j-consent__prefs { min-width: 0; border-top: 1px solid var(--c4j-line); padding-top: 0.875rem; }
.c4j-consent__prefs-title {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c4j-muted);
}
.c4j-consent__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c4j-line);
}
.c4j-consent__row-text { min-width: 0; }
.c4j-consent__row-name { display: block; margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--c4j-navy-900); cursor: default; }
label.c4j-consent__row-name { cursor: pointer; }
.c4j-consent__row-desc { margin: 0.125rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--c4j-muted); text-wrap: pretty; }
.c4j-consent__always {
  flex-shrink: 0;
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-radius: var(--c4j-radius-pill);
  background: color-mix(in srgb, var(--c4j-success) 10%, var(--c4j-white));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--c4j-success);
}
.c4j-consent__save { width: 100%; margin-top: 0.875rem; }

/* Switch: a native checkbox (role="switch"), restyled. Border and knob keep 3:1 against white; the hit area grows to
   56 x 44 px with a transparent pseudo-element. Checked: navy track, cyan knob with a tick-like inner ring. */
.c4j-consent__switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  border: 2px solid var(--c4j-muted);
  border-radius: var(--c4j-radius-pill);
  background: var(--c4j-white);
  cursor: pointer;
}
.c4j-consent__switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--c4j-muted);
  transform: translateY(-50%);
}
.c4j-consent__switch::after { content: ""; position: absolute; inset: -0.5rem -0.25rem; }
.c4j-consent__switch:hover { border-color: var(--c4j-navy-800); }
.c4j-consent__switch:checked { background: var(--c4j-navy-800); border-color: var(--c4j-navy-800); }
.c4j-consent__switch:checked::before { background: var(--c4j-cyan-400); transform: translate(1.25rem, -50%); }

/* Screen-reader announcement of a saved choice (consent.js). */
.c4j-consent-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Small phones (320-359 px wide, or short screens): a tighter sheet, so more of the page stays in view. */
@media (max-width: 359px), (max-width: 767px) and (max-height: 700px) {
  .c4j-consent__inner { gap: 0.75rem; padding-top: 1rem; padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px)); }
  .c4j-consent__icon { width: 2rem; height: 2rem; }
  .c4j-consent__icon svg { width: 1.125rem; height: 1.125rem; }
  .c4j-consent__title { font-size: 1rem; }
  .c4j-consent__text { font-size: 0.875rem; line-height: 1.5; }
  .c4j-consent__small { font-size: 0.8125rem; }
  .c4j-consent__actions { gap: 0.5rem; }
}

/* From 768 px: a card at the bottom right, beside the floating WhatsApp button, and clear of the accessibility
   launcher on the left (an edge tab, or a 44 px disc at 1.5rem from 1440 px) even with the largest text setting. */
@media (min-width: 768px) {
  .c4j-consent {
    --c4j-consent-inset-right: calc(1.5rem + 56px + 1rem + env(safe-area-inset-right, 0px));
    inset-inline: auto var(--c4j-consent-inset-right);
    /* The gap is a margin, not part of `bottom` (which follows the sticky bar and is animated): consent.js reads it to
       work out --c4j-consent-space. */
    margin-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    width: min(26.5rem, calc(100vw - var(--c4j-consent-inset-right) - 1.5rem - 56px - 1rem));
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    border: 1px solid var(--c4j-line);
    border-radius: var(--c4j-radius-lg);
    box-shadow: var(--c4j-shadow-lg);
  }
  .c4j-consent__inner { max-width: none; gap: 0.875rem; padding: 1.375rem 1.5rem 1.5rem; }
  .c4j-consent__icon { width: 2.5rem; height: 2.5rem; }
  .c4j-consent__icon svg { width: 1.375rem; height: 1.375rem; }
  .c4j-consent__title { font-size: 1.125rem; }
}

/* Short viewports (landscape phones, 200-400% zoom): tighter, and the sheet takes at most half the height so the page
   stays reachable; it scrolls within itself (focused buttons scroll into view inside it). The sticky mobile bar steps
   aside while the banner shows (its actions repeat the header CTA), so header + banner + bar never fill the screen and
   focused controls stay visible (WCAG 2.4.11). */
@media (max-height: 480px) {
  .c4j-consent { max-height: 50vh; max-height: 50dvh; }
  html[data-consent-shown] [data-sticky-mobile-bar] { display: none; }
  .c4j-consent__inner { gap: 0.625rem; padding-block: 0.75rem; }
  .c4j-consent__head { gap: 0.5rem; }
  .c4j-consent__icon { width: 2rem; height: 2rem; }
  .c4j-consent__title { font-size: 1rem; }
  .c4j-consent__text { font-size: 0.875rem; line-height: 1.45; }
}
@media (min-width: 768px) and (max-height: 480px) {
  .c4j-consent { margin-bottom: 0.75rem; max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); }
  .c4j-consent__inner { padding: 1rem; }
}

/* While the banner shows, focused controls are scrolled clear of it (WCAG 2.4.11). Scroll padding cannot lift the last
   footer row above the banner once the page is scrolled to its end, so the page also reserves the banner's space (and
   the home indicator's safe area) at its end: inside the site footer, so that space keeps the footer's navy instead of
   showing a light band under it; on a page without that footer, below the body. */
html[data-consent-shown] { scroll-padding-bottom: calc(var(--c4j-consent-space, 0px) + 1rem); }
html[data-consent-shown] body > footer { padding-bottom: calc(var(--c4j-consent-space, 0px) + env(safe-area-inset-bottom, 0px)); }
html[data-consent-shown] body:not(:has(> footer)) { padding-bottom: calc(var(--c4j-consent-space, 0px) + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: no-preference) {
  .c4j-consent { transition: bottom 300ms var(--c4j-ease); }
  .c4j-consent:not([hidden]) { animation: c4j-consent-sheet-in 300ms var(--c4j-ease) both; }
  .c4j-consent__btn,
  .c4j-consent__close {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--c4j-ease);
  }
  .c4j-consent__btn:active,
  .c4j-consent__close:active { transform: scale(0.97); }
  .c4j-consent__chevron,
  .c4j-consent__switch::before { transition: transform 150ms var(--c4j-ease); }
  .c4j-consent__switch { transition: background-color 150ms var(--c4j-ease), border-color 150ms var(--c4j-ease); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .c4j-consent:not([hidden]) { animation-name: c4j-consent-card-in; }
}
@keyframes c4j-consent-sheet-in {
  from { transform: translateY(100%); }
}
@keyframes c4j-consent-card-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

@media (forced-colors: active) {
  .c4j-consent { border: 2px solid CanvasText; }
  .c4j-consent__icon { border: 1px solid CanvasText; }
  .c4j-consent__always,
  .c4j-consent__current,
  .c4j-consent__note { border: 1px solid CanvasText; }
  .c4j-consent__close { border: 1px solid ButtonText; }
  .c4j-consent__switch { -webkit-appearance: auto; appearance: auto; width: 1.5rem; height: 1.5rem; border: 0; }
  .c4j-consent__switch::before,
  .c4j-consent__switch::after { content: none; }
}

@media print {
  .c4j-consent { display: none !important; }
}