/*
 * Calidos theme: layout rules theme.json cannot express.
 * Only use --cal-* tokens (tokens.css) or --wp--preset--* variables here; no hard-coded values.
 */

/* Skip link ---------------------------------------------------------------- */
.cal-skip-link {
  position: absolute;
  left: var(--cal-space-md);
  top: -100px;
  z-index: 1000;
  padding: var(--cal-space-xs) var(--cal-space-md);
  background: var(--cal-color-surface-default);
  color: var(--cal-color-action-primary-bg);
  font-weight: var(--cal-font-weight-semibold);
  border-radius: var(--cal-radius-sm);
}
.cal-skip-link:focus {
  top: var(--cal-space-md);
}

/* Header ------------------------------------------------------------------- */
.cal-header {
  border-bottom: var(--cal-border-width-thin) solid var(--cal-color-border-default);
  background: var(--cal-color-surface-default);
}
.cal-header .cal-logo img {
  display: block;
  height: auto;
}
.cal-header .wp-block-navigation a {
  color: var(--cal-color-text-heading);
}
.cal-header .wp-block-button {
  flex-shrink: 0;
}
/* Phones: logo, menu toggle and languages fill the bar; every page ends with a contact band. */
@media (max-width: 599px) {
  .cal-header .wp-block-buttons {
    display: none;
  }
}

/* Language switcher (calidos/language-switcher) ------------------------------ */
.cal-languages ul {
  display: flex;
  gap: var(--cal-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cal-font-size-sm);
  font-weight: var(--cal-font-weight-semibold);
}
.cal-languages a {
  display: block;
  padding: var(--cal-space-2xs) var(--cal-space-xs);
  border-radius: var(--cal-radius-sm);
  color: var(--cal-color-text-subtle);
  text-decoration: none;
}
.cal-languages a:hover {
  color: var(--cal-color-text-heading);
  text-decoration: underline;
}
.cal-languages a[aria-current] {
  color: var(--cal-color-text-heading);
  background: var(--cal-color-surface-subtle);
}

/* Footer ------------------------------------------------------------------- */
/* Full-width bands end each page, so the footer sits flush against them (no root block gap). */
.wp-site-blocks > footer.wp-block-template-part {
  margin-block-start: 0;
}
.cal-footer a {
  color: var(--cal-color-text-inverse);
}
.cal-footer a:hover {
  color: var(--cal-color-text-inverse);
  text-decoration-thickness: 2px;
}
.cal-footer .cal-footer__meta {
  border-top: var(--cal-border-width-thin) solid var(--cal-color-blue-800);
}
.cal-footer ul {
  list-style: none;
  padding-left: 0;
}

/* Hero --------------------------------------------------------------------- */
.cal-hero {
  position: relative;
  overflow: hidden;
}
.cal-hero h1,
.cal-hero h2 {
  color: var(--cal-color-text-inverse);
}
.cal-hero .cal-hero__tagline {
  color: var(--cal-color-text-highlight-inverse);
  font-weight: var(--cal-font-weight-semibold);
}
/* The icon is decoration: drop it where columns stack (core columns breakpoint, 781px). */
@media (max-width: 781px) {
  .cal-hero .cal-hero__art {
    display: none;
  }
}

/* Cards (group block style "Card") ------------------------------------------ */
.is-style-cal-card {
  background: var(--cal-color-surface-default);
  border: var(--cal-border-width-thin) solid var(--cal-color-border-default);
  border-radius: var(--cal-radius-lg);
  box-shadow: var(--cal-shadow-sm);
  padding: var(--cal-space-lg);
  height: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--cal-duration-normal) var(--cal-easing-standard);
}
.is-style-cal-card:hover {
  box-shadow: var(--cal-shadow-md);
}
/* Product accent bar on product cards (decorative use of the secondary colours). */
.cal-product--artemis,
.cal-product--othello,
.cal-product--maat {
  border-top: 4px solid var(--cal-product-accent, var(--cal-color-accent-default));
}
.cal-product--artemis,
.cal-product--othello {
  --cal-product-accent: var(--cal-color-brand-light-green);
}
.cal-product--maat {
  --cal-product-accent: var(--cal-color-brand-light-blue);
}

/* List style "Calidos dots" ------------------------------------------------- */
.wp-block-list.is-style-cal-dots {
  list-style: none;
  padding-left: 0;
}
.wp-block-list.is-style-cal-dots li {
  position: relative;
  padding-left: calc(var(--cal-space-md) + var(--cal-space-xs));
  margin-bottom: var(--cal-space-xs);
}
.wp-block-list.is-style-cal-dots li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.6em;
  height: 0.6em;
  border-radius: var(--cal-radius-full);
  background: var(--cal-color-accent-default);
}
.wp-block-list.is-style-cal-dots li:nth-child(4n + 2)::before {
  background: var(--cal-color-brand-dark-blue);
}
.wp-block-list.is-style-cal-dots li:nth-child(4n + 3)::before {
  background: var(--cal-color-brand-light-green);
}
.wp-block-list.is-style-cal-dots li:nth-child(4n + 4)::before {
  background: var(--cal-color-brand-light-blue);
}

/* Section eyebrow (small label above headings) ------------------------------ */
.cal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--cal-font-weight-semibold);
  color: var(--cal-color-accent-strong);
}
.has-dark-blue-background-color .cal-eyebrow {
  color: var(--cal-color-text-highlight-inverse);
}

@media (prefers-reduced-motion: reduce) {
  .is-style-cal-card {
    transition: none;
  }
}