/*
 * Horeca editorial design tokens and shared defaults.
 * Load this file before the component files.
 */
@layer horeca.tokens, horeca.base, horeca.components, horeca.utilities;

@layer horeca.tokens {
  :root {
    --horeca-red: #cc292b;
    --horeca-red-dark: #991f21;
    --horeca-red-soft: #fff1f1;
    --horeca-ink: #222426;
    --horeca-muted: #62676b;
    --horeca-line: #d9dcde;
    --horeca-surface: #f4f5f5;
    --horeca-surface-warm: #f8f5f1;
    --horeca-white: #ffffff;
    --horeca-warning: #9a6418;
    --horeca-warning-soft: #fff6e6;
    --horeca-success: #2f6b57;
    --horeca-focus: #005fcc;

    --horeca-font: Roboto, Arial, Helvetica, sans-serif;
    --horeca-text-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --horeca-reading-width: 54.75rem;
    --horeca-wide-width: 64rem;
    --horeca-radius-sm: 0.25rem;
    --horeca-radius-md: 0.5rem;
    --horeca-space-1: 0.5rem;
    --horeca-space-2: 0.75rem;
    --horeca-space-3: 1rem;
    --horeca-space-4: 1.5rem;
    --horeca-space-5: 2rem;
    --horeca-space-6: 3rem;
  }
}

@layer horeca.base {
  #article-single-content {
    color: var(--horeca-ink);
    font-family: var(--horeca-font);
    font-size: var(--horeca-text-size);
    line-height: 1.72;
    overflow-wrap: break-word;
  }

  #article-single-content :where([class^="horeca-blog-"], [class*=" horeca-blog-"]) {
    box-sizing: border-box;
    min-width: 0;
  }

  #article-single-content :where([class^="horeca-blog-"], [class*=" horeca-blog-"]) :where(img, video, iframe) {
    height: auto;
    max-width: 100%;
  }

  #article-single-content :where([class^="horeca-blog-"], [class*=" horeca-blog-"]) a {
    color: var(--horeca-red-dark);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  #article-single-content :where([class^="horeca-blog-"], [class*=" horeca-blog-"]) a:hover {
    color: var(--horeca-red);
  }

  #article-single-content mark {
    background: transparent !important;
    color: inherit !important;
  }

  #article-single-content :where([class^="horeca-blog-"], [class*=" horeca-blog-"]) :focus-visible {
    border-radius: 0.125rem;
    outline: 0.1875rem solid var(--horeca-focus);
    outline-offset: 0.1875rem;
  }

  @media (max-width: 48rem) {
    #article-single-content {
      font-size: 1rem;
      line-height: 1.65;
    }

    #article-single-content :where([class^="horeca-blog-"], [class*=" horeca-blog-"]) {
      max-width: 100%;
    }
  }
}

@layer horeca.utilities {
  .horeca-blog-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}