/* Shared building blocks: fonts, page backgrounds, breadcrumbs, links, cards
   and lists. Translated 1:1 from the legacy build's compiled stylesheet unless
   a comment says otherwise. */
@layer styles {
  /* Self-hosted variable fonts (the legacy build loaded these weights from
     fonts.googleapis.com; latin subset covers å/ä/ö) */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/roboto-variable-latin.woff2?v=1') format('woff2');
  }

  @font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/roboto-slab-variable-latin.woff2?v=1')
      format('woff2');
  }

  /* Page backgrounds — replaces the runtime-generated gatsby-background-image
     wrapper (fixed, cover, centered; the odd opacity comes from the legacy
     inline style and keeps the same stacking context). The media queries pick
     the same rendition widths Gatsby's srcset offered. */
  .background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.99;
  }

  .background--chocolate-fika {
    background-image: url('/assets/img/hero/chocolate-fika-750.webp?v=1');
  }

  .background--flying-cupcakes {
    background-image: url('/assets/img/hero/flying-cupcakes-750.webp?v=1');
  }

  .background--cakes-bg2 {
    background-image: url('/assets/img/hero/cakes-bg2-750.webp?v=1');
  }

  @media (min-width: 750px) {
    .background--chocolate-fika {
      background-image: url('/assets/img/hero/chocolate-fika-1080.webp?v=1');
    }

    .background--flying-cupcakes {
      background-image: url('/assets/img/hero/flying-cupcakes-1080.webp?v=1');
    }

    .background--cakes-bg2 {
      background-image: url('/assets/img/hero/cakes-bg2-1080.webp?v=1');
    }
  }

  @media (min-width: 1080px) {
    .background--chocolate-fika {
      background-image: url('/assets/img/hero/chocolate-fika-1366.webp?v=1');
    }

    .background--flying-cupcakes {
      background-image: url('/assets/img/hero/flying-cupcakes-1366.webp?v=1');
    }

    .background--cakes-bg2 {
      background-image: url('/assets/img/hero/cakes-bg2-1366.webp?v=1');
    }
  }

  @media (min-width: 1366px) {
    .background--chocolate-fika {
      background-image: url('/assets/img/hero/chocolate-fika-1920.webp?v=1');
    }

    .background--flying-cupcakes {
      background-image: url('/assets/img/hero/flying-cupcakes-1920.webp?v=1');
    }

    .background--cakes-bg2 {
      background-image: url('/assets/img/hero/cakes-bg2-1920.webp?v=1');
    }
  }

  /* Image wrappers — replace .gatsby-image-wrapper. The inner image fills its
     box and letterboxes with object-fit like the legacy absolute-positioned
     image did; display:block avoids the inline baseline gap the legacy markup
     never had. */
  .image-wrapper img,
  .category-card__image img,
  .product__image img {
    display: block;
    max-width: 100%;
  }

  .category-card__image {
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
  }

  .category-card__image img {
    height: 100%;
    object-fit: contain;
    width: 100%;
  }

  .product__image {
    max-width: 505px;
  }

  .product__image img {
    height: 100%;
    object-fit: contain;
    object-position: top center;
    width: 100%;
  }

  /* gatsby-plugin-breadcrumb stylesheet (imported by the legacy Layout) */
  .breadcrumb__title {
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
  }

  nav.breadcrumb {
    font-size: 1.5rem;
    font-weight: 500;
  }

  nav .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

  nav .breadcrumb__list__item {
    margin: 0 0.25em;
  }

  nav .breadcrumb__link,
  nav .breadcrumb__link__active,
  nav .breadcrumb__link__disabled {
    text-decoration: none;
  }

  /* Links */
  .breadcrumb__link,
  .section__link {
    color: var(--color__font);
    text-decoration: underline;
  }

  .breadcrumb__link:hover,
  .section__link:hover {
    color: var(--color__theme);
  }

  .breadcrumb__link {
    font-size: var(--font__size--medium);
  }

  .breadcrumb__link__active {
    color: var(--color__theme);
    font-weight: 700;
  }

  .section__link--themed {
    color: var(--color__white);
  }

  .section__link--themed:hover {
    color: var(--color__font--light-grey);
  }

  section a:hover {
    text-decoration: underline;
  }

  /* Shared page-margin padding (theme rule; the site's own .page-margin
     variant lives in sections.css) */
  .header,
  .heimr-section,
  .section {
    padding-left: var(--page__margin);
    padding-right: var(--page__margin);
  }

  /* Cards */
  .heimr-cards {
    grid-gap: var(--oma-page__space--small);
    display: grid;
    grid-template-columns: 1fr;
  }

  .size-600 .heimr-cards {
    grid-template-columns: repeat(auto-fit, minmax(var(--card__min-size), 1fr));
  }

  .heimr-cards--themed {
    margin-left: calc(var(--space__section) * -1);
    margin-right: calc(var(--space__section) * -1);
  }

  .heimr-cards--themed .card {
    padding-bottom: 0;
    padding-top: 0;
  }

  .heimr-cards--themed .card__content {
    color: var(--color__white);
  }

  .heimr-cards__item-content {
    display: grid;
    grid-auto-rows: 1fr auto;
    height: 100%;
  }

  .heimr-cards__item-link {
    color: var(--color__font);
    display: block;
    height: 100%;
    text-decoration: none;
  }

  .heimr-cards__item-link:hover {
    text-decoration: underline;
  }

  .card {
    padding: var(--oma-page__space--small);
  }

  .card--with-background {
    background-color: var(--color__background--transparent);
    border-radius: var(--corner__size);
  }

  .card__sub-heading {
    font-size: var(--font__size--medium);
    font-weight: var(--font__weight--light);
    text-transform: uppercase;
  }

  .card__heading {
    color: var(--color__theme);
    font-family: var(--font__family--emphasize);
    font-size: var(--font__size--small-heading);
    font-weight: var(--font__weight--heading);
    line-height: var(--font__line-height-heading);
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
    text-transform: uppercase;
  }

  .card__heading--bright {
    color: var(--color__font--heading-bright-card);
  }

  .category-card {
    background-color: var(--color__white);
    border-radius: var(--corner__size);
    box-shadow: var(--card__shadow);
    padding: var(--oma-page__space--extra-small);
    text-align: center;
  }

  .category-card__heading {
    font-size: var(--font__size--small-heading);
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
  }

  /* Lists */
  .list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .list__item {
    line-height: var(--font__line-height);
    text-align: center;
  }

  .list__item a {
    color: var(--color__font--grey);
    font-size: var(--font__size--small);
    text-decoration: none;
  }

  /* Page headings */
  .page__heading {
    color: var(--color__font--heading-theme);
    font-family: var(--font__family--emphasize);
    font-weight: var(--font__weight--heading);
    line-height: var(--font__line-height-heading);
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
  }

  .size-600 .page__heading {
    font-size: var(--font__size--large-heading);
  }

  .page__heading--bright {
    color: var(--color__font--bright);
  }

  /* Unused on current pages but part of the legacy theme stylesheet */
  .greeting {
    background-color: var(--color__background--transparent);
    margin-bottom: var(--page__margin);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space__large);
    padding-top: var(--space__small);
    width: 75%;
  }

  .greeting,
  .size-1200 .greeting {
    padding-bottom: var(--space__medium);
  }

  .size-1200 .greeting {
    padding-left: var(--space__medium);
    padding-right: var(--space__medium);
  }
}