/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./resources/scss/screen.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * The public side.
 *
 * Two pages: one distribution, and the month grid that lists them all.
 *
 * Quiet on purpose. The predecessor shipped eleven stylesheets to render a
 * date, an address and a phone number; this is a table, a list and a nav.
 */
/* The date, directly under the title, in place of the theme's byline. */
.ruokajako-when {
  margin: 0 0 1.5rem;
  font-weight: 600;
}
.ruokajako-when::first-letter {
  text-transform: uppercase;
}

/*
 * "Lisää kalenteriin": a label and four links on one line, pipe separated.
 *
 * The pipes are drawn rather than written, so a screen reader announces four
 * links and not four links and three vertical bars. They wrap with the links
 * on a narrow screen instead of leaving a pipe stranded at the end of a line.
 */
.ruokajako-calendar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin: 1.5rem 0;
}
.ruokajako-calendar__label {
  font-weight: 600;
}
.ruokajako-calendar__label::after {
  content: ":";
}
.ruokajako-calendar {
  /* Every link but the first is preceded by a separator. */
}
.ruokajako-calendar a + a::before {
  content: "|";
  margin-right: 0.5rem;
  opacity: 0.5;
}

/* The subscribe row and the line that says what it does. */
.ruokajako-subscribe {
  margin: 1.5rem 0;
}
.ruokajako-subscribe .ruokajako-calendar {
  margin-bottom: 0.25rem;
}
.ruokajako-subscribe__note {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

/*
 * The organisation's picture, between what the editor wrote and the address.
 *
 * Capped rather than full width: these are logos -- 493 pixels of Katulähetys
 * wordmark -- and a logo stretched across a 900px column reads as a banner the
 * page does not have.
 */
/*
 * Each block's wrapper, which is what carries an editor's colour and spacing.
 *
 * It has no look of its own -- the only rules here stop the first and last
 * child's margins from escaping through it, which is what would otherwise put
 * a gap above a background colour the editor set.
 */
.ruokajako-block > :first-child {
  margin-top: 0;
}
.ruokajako-block > :last-child {
  margin-bottom: 0;
}

/*
 * What a block shows in the editor when there is no distribution to show.
 *
 * A template is being edited, not a post, so every one of these blocks would
 * otherwise render to nothing -- and a block an editor cannot see is a block
 * they cannot move or remove. Never rendered for a reader.
 */
.ruokajako-placeholder {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px dashed color-mix(in srgb, currentcolor 35%, transparent);
  border-radius: 4px;
  font-size: 0.875rem;
  opacity: 0.75;
}

.ruokajako-image {
  margin: 1.5rem 0;
}
.ruokajako-image img {
  max-width: min(280px, 100%);
  height: auto;
}

.ruokajako-details {
  margin: 2rem 0;
}
.ruokajako-details h2 {
  margin-bottom: 0.5rem;
  font-size: var(--wp--preset--font-size--h-4);
}
.ruokajako-details dl {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}
.ruokajako-details dt {
  font-weight: 600;
}
.ruokajako-details dd {
  margin: 0;
}
.ruokajako-details {
  /* Narrow screens: the label above its value rather than a cramped column. */
}
@media (max-width: 30rem) {
  .ruokajako-details dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ruokajako-details dd {
    margin-bottom: 0.75rem;
  }
}

.ruokajako-details__map {
  display: inline-block;
  margin-top: 0.25rem;
}

/**
 * The dialog a calendar event opens in.
 *
 * <dialog> gives the top layer, the backdrop, the focus trap and Escape;
 * what is left is to make the inside look like the page it stands in for.
 *
 * Which mostly means not interfering. The details are the same markup as the
 * distribution's own page, so the theme's own rules already reach them -- the
 * date line, the definition lists, the link colour and the heading font are
 * whatever they are on the page. The values below are the theme's presets
 * rather than numbers of my own, with a plain fallback for a site whose theme
 * does not define them.
 *
 * The one thing that cannot be inherited is the title: on the page it is an h1
 * at 60px, which in a box 34rem wide would be four words a line. It takes the
 * heading font and colour from the theme and the size of an h3.
 */
.ruokajako-modal {
  width: min(46rem, 100vw - 2rem);
  /*
  * As tall as its contents, and no taller than the screen.
  *
  * The cap used to be min(80vh, 44rem), which meant a distribution with a
  * paragraph of practical detail scrolled inside a box with room to spare
  * below it -- two scrollbars, one of them unnecessary. Now the only limit
  * is the window: dvh so that a phone's collapsing address bar does not
  * count as height the dialog can use, with vh first for anything that has
  * not heard of it.
  */
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow: auto;
  padding: var(--wp--preset--spacing--xl, 1.25rem);
  border: 0;
  border-radius: var(--wp--preset--border-radius--m, 8px);
  background: var(--wp--preset--color--white, #fff);
  color: inherit;
  --ruokajako-modal-shadow: 0 10px 40px rgb(0 0 0 / 25%);
  box-shadow: var(--wp--preset--shadow--card-hover, var(--ruokajako-modal-shadow));
}
.ruokajako-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}
.ruokajako-modal__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--md, 1rem);
}
.ruokajako-modal__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h-3, 1.5rem);
}
.ruokajako-modal {
  /* A button, not a link: it does nothing to the page it is on. */
}
.ruokajako-modal__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--wp--preset--border-radius--xs, 4px);
  background: color-mix(in srgb, currentcolor 8%, transparent);
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.ruokajako-modal__close:hover, .ruokajako-modal__close:focus-visible {
  background: color-mix(in srgb, currentcolor 16%, transparent);
}
.ruokajako-modal {
  /* On the page this sits under an h1 and carries the air for it; here the
    bar above has its own. */
}
.ruokajako-modal .ruokajako-when {
  margin-top: var(--wp--preset--spacing--md, 0.75rem);
}
.ruokajako-modal__text {
  margin: 0 0 var(--wp--preset--spacing--xl, 1rem);
}
.ruokajako-modal__more {
  margin: var(--wp--preset--spacing--xl, 1.25rem) 0 0;
  padding-top: var(--wp--preset--spacing--md, 0.75rem);
  border-top: 1px solid color-mix(in srgb, currentcolor 18%, transparent);
}

.ruokajako-nearby {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
  padding-top: 1rem;
  border-top: 1px solid currentcolor;
  /* The two neighbours share a row; the archive gets the line below, because
  stepping to the next distribution and leaving for the list are different
  moves. */
}
.ruokajako-nearby__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.ruokajako-nearby__step {
  display: flex;
  flex-direction: column;
}
.ruokajako-nearby {
  /* The title carries the link, the date qualifies it. */
}
.ruokajako-nearby__when {
  font-size: 0.875em;
  opacity: 0.8;
}
.ruokajako-nearby__next {
  margin-left: auto;
  text-align: right;
}
.ruokajako-nearby {
  /* Only child in the row: it should not be pushed to the right as if a
  previous distribution existed. */
}
.ruokajako-nearby__next:only-child {
  margin-left: 0;
  text-align: left;
}

.ruokajako-nearby__previous .ruokajako-nearby__title::before {
  content: "« ";
}

.ruokajako-nearby__next .ruokajako-nearby__title::after {
  content: " »";
}

/**
 * The month grid.
 *
 * Borders and tints are mixed out of currentcolor rather than named, so the
 * calendar takes the colours of whatever page it is placed on instead of
 * carrying a palette of its own that has to be kept in step with the theme's.
 */
.ruokajako-cal {
  --ruokajako-cal-line: color-mix(in srgb, currentcolor 18%, transparent);
  --ruokajako-cal-tint: color-mix(in srgb, currentcolor 6%, transparent);
  /*
  * The calendar itself is white, on whatever the page around it is.
  *
  * The archive template puts it on the theme's secondary tint, and the days
  * want to be paper against that: a month of tinted cells separated by
  * tinted gaps reads as one wash of colour and the grid stops being a grid.
  * A variable rather than six repetitions of a colour, so a page that places
  * this block somewhere else has one value to change.
  */
  --ruokajako-cal-paper: var(--wp--preset--color--white, #fff);
  margin: 0 0 2rem;
}
.ruokajako-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  /*
   * On a phone the three in a row -- "« Syyskuu", "Lokakuu 2026",
   * "Marraskuu »" -- do not fit, and the week view's date ranges are
   * longer still. The title takes the first row on its own, and the
   * two steps share the second, each keeping its side so that back
   * is still left and forward right.
   */
}
@media (max-width: 48rem) {
  .ruokajako-cal__nav {
    display: grid;
    grid-template-areas: "title title" "prev next";
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .ruokajako-cal__nav .ruokajako-cal__title {
    grid-area: title;
    font-size: 1.375rem;
  }
  .ruokajako-cal__nav .ruokajako-cal__step {
    display: flex;
    font-size: 0.9375rem;
  }
  .ruokajako-cal__nav .ruokajako-cal__prev {
    grid-area: prev;
    justify-content: flex-start;
  }
  .ruokajako-cal__nav .ruokajako-cal__next {
    grid-area: next;
    justify-content: flex-end;
    text-align: right;
  }
}
@media (max-width: 48rem){
  .ruokajako-cal__nav .ruokajako-cal__title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  .ruokajako-cal__nav .ruokajako-cal__prev {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .ruokajako-cal__nav .ruokajako-cal__next {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
}
.ruokajako-cal {
  /* Finnish month and weekday names are lowercase in running text, and a
  heading is not running text. */
}
.ruokajako-cal__title {
  margin: 0;
  font-size: 1.5rem;
  text-align: center;
}
.ruokajako-cal__title::first-letter {
  text-transform: uppercase;
}
.ruokajako-cal {
  /*
   * The arrow is drawn, not typed: a chevron masked out of the link's own
   * colour, so it follows hover and focus colours, kept apart from the text
   * by the gap rather than by a space that can collapse. The link is a flex
   * box for that, and ::first-letter does not reach into a flex box -- so
   * the month name has a span of its own to be capitalised in.
   */
}
.ruokajako-cal__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid currentcolor;
  border-radius: 999px;
  background: var(--ruokajako-cal-paper);
  line-height: 1.2;
  text-decoration: none;
}
.ruokajako-cal__step-text::first-letter {
  text-transform: uppercase;
}
.ruokajako-cal__prev::before, .ruokajako-cal__next::after {
  content: "";
  flex: none;
  width: 0.75em;
  height: 0.75em;
  background-color: currentcolor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M10.5 2.5 5 8l5.5 5.5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.25%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}
.ruokajako-cal__next::after {
  transform: scaleX(-1);
}
.ruokajako-cal__here {
  margin: 0;
  text-align: center;
}
.ruokajako-cal__empty {
  margin: 0 0 1rem;
}
.ruokajako-cal__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--ruokajako-cal-paper);
}
.ruokajako-cal th {
  padding: 0.5rem;
  text-transform: uppercase;
  font-size: 0.875rem;
  text-align: left;
}
.ruokajako-cal {
  /* An abbreviated weekday with the full name behind it: the locale gives
  both, and a dotted underline on "ma" is noise. */
}
.ruokajako-cal abbr {
  text-decoration: none;
}
.ruokajako-cal {
  /*
  * A seventh of the width, whatever is in it.
  *
  * table-layout: fixed decides the column widths from the header row, so a
  * cell never widens to fit its contents -- it is the long word that has to
  * give. "Piikkiön Adventtiseurakunta" in a 90px column is one 18-character
  * token with nowhere to break, and without this it simply drew over the
  * next day.
  *
  * overflow-wrap: anywhere breaks it when there is no other way; hyphens
  * puts a hyphen at a syllable the browser knows about, which for Finnish
  * compounds is most of them. The hyphen is the polite version and the break
  * is the guarantee.
  */
}
.ruokajako-cal td {
  height: 6.5rem;
  padding: 0.375rem;
  border: 1px solid var(--ruokajako-cal-line);
  vertical-align: top;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ruokajako-cal__date {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}
.ruokajako-cal {
  /* In the grid the number is enough; the weekday is above it in the header
  row. See Archive::date() for why both are in the markup. */
}
.ruokajako-cal__full {
  display: none;
}
.ruokajako-cal__events {
  display: grid;
  gap: 0.25rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}
.ruokajako-cal__event {
  margin: 0;
}
.ruokajako-cal__event a {
  display: block;
  padding: 0.25rem 0.375rem;
  border-radius: 4px;
  background: var(--ruokajako-cal-tint);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-decoration: none;
}
.ruokajako-cal__event a:hover,
.ruokajako-cal__event a:focus {
  text-decoration: underline;
}
.ruokajako-cal {
  /* Times line up down the column when the digits are the same width. */
}
.ruokajako-cal__time {
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--tiny);
  /*
  * Digits stay together. The cell above allows a break anywhere, which
  * is right for a long name and wrong for a clock: "11:1 / 5–12:30" is
  * not a time. Normal wrapping still lets a range fold at its dash if
  * the column is too narrow for both ends of it.
  */
  overflow-wrap: normal;
  hyphens: none;
}
.ruokajako-cal {
  /* The days that only exist to square off the first and last week, and the
  ones already gone: still readable, visibly not the point. */
}
.ruokajako-cal .is-other-month,
.ruokajako-cal .is-past {
  opacity: 0.55;
}
.ruokajako-cal .is-today {
  background: var(--ruokajako-cal-tint);
}
.ruokajako-cal .is-today .ruokajako-cal__date {
  text-decoration: underline;
}
.ruokajako-cal {
  /*
  * The week and the day: the same distributions as a schedule.
  *
  * No hour scale down the side. The predecessor drew one, and it meant six
  * screens of empty night either side of the two hours anybody was reading --
  * these last an hour or two in the middle of the day and never overlap.
  */
  /* Centred under the centred title, the "this month" link (when there is
  one) and the view switch together. */
}
.ruokajako-cal__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
}
.ruokajako-cal__views ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ruokajako-cal__views li {
  margin: 0;
}
.ruokajako-cal__views {
  /* Drawn separators, so a screen reader announces three views rather
  than three views and two vertical bars. */
}
.ruokajako-cal__views li + li::before {
  content: "|";
  margin-right: 0.5rem;
  opacity: 0.5;
}
.ruokajako-cal__view.is-current span {
  font-weight: 600;
}
.ruokajako-cal__list {
  display: grid;
  gap: 0;
  background: var(--ruokajako-cal-paper);
  border: 1px solid var(--ruokajako-cal-line);
}
.ruokajako-cal__row {
  padding: 0.75rem;
  border-bottom: 1px solid var(--ruokajako-cal-line);
}
.ruokajako-cal__row:last-child {
  border-bottom: 0;
}
.ruokajako-cal__day-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.ruokajako-cal__day-title::first-letter {
  text-transform: uppercase;
}
.ruokajako-cal__none {
  margin: 0;
  opacity: 0.6;
}
.ruokajako-cal {
  /* The place, under the name, where there is width for it. */
}
.ruokajako-cal__where {
  display: block;
  font-size: 0.875rem;
  opacity: 0.8;
}

/*
 * Narrow screens: the same table, unrolled.
 *
 * Seven columns of six-line cells do not fit a phone, and a month of them is
 * mostly empty anyway -- so the cells become a column, the empty days drop out,
 * and each remaining day says which day it is, since the header row that used
 * to say so is gone.
 */
@media (max-width: 48rem) {
  .ruokajako-cal thead {
    display: none;
  }
  .ruokajako-cal table,
  .ruokajako-cal tbody,
  .ruokajako-cal tr,
  .ruokajako-cal td {
    display: block;
    width: auto;
  }
  .ruokajako-cal td {
    height: auto;
    padding: 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--ruokajako-cal-line);
  }
  .ruokajako-cal {
    /* A day with nothing on it has nothing to say in a list. */
  }
  .ruokajako-cal .is-empty {
    display: none;
  }
  .ruokajako-cal__number {
    display: none;
  }
  .ruokajako-cal__full {
    display: block;
    font-size: 1rem;
  }
  .ruokajako-cal__full::first-letter {
    text-transform: uppercase;
  }
  .ruokajako-cal__events {
    gap: 0.375rem;
    margin-top: 0.375rem;
  }
  .ruokajako-cal__event a {
    font-size: 1rem;
  }
}
/*
 * The week and the day list their distributions as rows of time and name,
 * rather than as the tinted blocks a grid cell needs.
 */
.ruokajako-cal--viikko .ruokajako-cal__events,
.ruokajako-cal--paiva .ruokajako-cal__events {
  gap: 0.5rem;
}
.ruokajako-cal--viikko .ruokajako-cal__event,
.ruokajako-cal--paiva .ruokajako-cal__event {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: 0 1rem;
}
.ruokajako-cal--viikko .ruokajako-cal__event a,
.ruokajako-cal--paiva .ruokajako-cal__event a {
  padding: 0;
  background: none;
  font-size: 1rem;
  text-decoration: underline;
}
.ruokajako-cal--viikko .ruokajako-cal__time,
.ruokajako-cal--paiva .ruokajako-cal__time {
  grid-row: span 2;
  font-size: 1rem;
}
.ruokajako-cal--viikko .ruokajako-cal__where,
.ruokajako-cal--paiva .ruokajako-cal__where {
  grid-column: 2;
}
@media (max-width: 30rem) {
  .ruokajako-cal--viikko .ruokajako-cal__event,
  .ruokajako-cal--paiva .ruokajako-cal__event {
    grid-template-columns: 1fr;
  }
  .ruokajako-cal--viikko .ruokajako-cal__time,
  .ruokajako-cal--paiva .ruokajako-cal__time {
    grid-row: auto;
  }
  .ruokajako-cal--viikko .ruokajako-cal__where,
  .ruokajako-cal--paiva .ruokajako-cal__where {
    grid-column: auto;
  }
}

/* The day view has one day and a heading above it already. */
.ruokajako-cal--paiva .ruokajako-cal__row {
  border: 0;
}

/*# sourceMappingURL=screen.css.map*/