/* =============================================================================
   lounaat.info — search results (T5) and the static info pages (T6)

   The last two templates. Both are stacks of `.infobox-container` blocks, so
   they share one sheet. Everything else — shell, container width, olive nav,
   teal footer, cards, dish rows — is inherited from home.css.

   Neither page has a filter bar or an ad slot, so those rules simply never
   match here.
   ========================================================================== */

@import url("../home-refresh/home.css");

/* The panel's TABLE, prose list and link rules moved to home.css on 2026-08-31.
   They were written here for the visitor-stats block, but the logged-in area
   needs them too and its sheet imports forms.css, not this one — so the owner
   dashboard's tables rendered unstyled. A component used by more than one area
   belongs in the shared sheet. These pages still get them through the @import
   above, unchanged. */


/* -----------------------------------------------------------------------------
   Infobox — the unit both pages are built from
   .infobox-container > .infobox-title > h2
                      > .infobox-info  > content
   Styled as the same card as a restaurant listing, so the site reads as one
   surface rather than two.
   -------------------------------------------------------------------------- */
.wrap > .infobox-container,
.content > .infobox-container {
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-container);
  padding: var(--space-9) var(--space-6);
  margin-bottom: var(--space-4);
}

.infobox-title h2 {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: 1.1;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}
.infobox-title { margin-bottom: var(--space-6); }

.infobox-info,
.infobox-info p.content {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-ink);
}
/* Space between paragraphs. ⚠️ `p.content + p.content` — which is what this
   was — requires the class, and the legal pages emit BARE <p>: 9 on the terms
   page, 31 on the privacy page. All 40 ran together with no gap at all, which
   is what Mikko saw. Exactly the same shape as the bare h3/h4 miss above, in
   the same two pages, found one page later: I broadened the heading selector
   and not this one.
   `p + p` covers both, and the value is unchanged for the pages that do carry
   the class, so nothing already approved moves. */
.infobox-info p + p { margin-top: var(--space-4); }

/* Sub-headings. `h3.content` is what the info page emits; the privacy page
   emits BARE h3 and h4 with no class at all, so the selector cannot require
   one — matching only `h3.content` left every heading on a 712-view page
   unstyled, and the reverse sweep could not see it because `content` is
   styled elsewhere. h4 sits a step down again. */
.infobox-info h3,
.infobox-info h3.content {
  font-family: var(--font-display);
  font-size: var(--t-footer-row);       /* 18px — a step under the block title */
  line-height: 1.2;
  margin: var(--space-6) 0 var(--space-2);
}
.infobox-info h4 {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  line-height: var(--t-body-lh);
  margin: var(--space-4) 0 var(--space-1);
}

/* Bulleted lists — the privacy page is the only page on the site with one.
   home.css:38 resets every ul to list-style:none for the card grids, so the
   marker has to be put back deliberately here rather than assumed. */

/* The 404 body. Production gives it its own class but no distinct treatment,
   and it is one apologetic sentence with a link home — the prose rules above
   already fit it. Kept as a hook with the measure narrowed, because a single
   sentence set across a full card width reads as a stray line. */
.infobox-info.error-message { max-width: 44ch; }

/* THE DARK VARIANT IS GONE. Mikko, 2026-08-28: "no need for the second card at
   all". With the chart hidden it was a whole card holding a heading and one
   line of small print, and it is the same subject as the table below it, so
   `merge_stats_block()` folds it in and drops the `black` wrapper. Its rules
   are deleted rather than left: `infobox-info black` no longer exists in the
   markup, and check-css.py's reverse sweep cannot see a rule matching nothing —
   it read this page as clean while three dead rules sat here, which is the one
   blind spot that audit has. */

/* The update note now sits on the light card, so it cannot keep the on-dark
   colour it was given. Muted ink at meta size, like every other aside. */
.infobox-info .stats_detail {
  color: var(--c-ink-muted);
  font-size: var(--t-meta);
  line-height: var(--t-meta-lh);
  margin-top: calc(var(--space-2) * -1);   /* it belongs to the title above it */
}

/* The chart is drawn by script into an empty div carrying an inline 400px
   height. Scripts are stripped in this prototype, so without this it renders
   as a large blank box. The note underneath still reads. */
#stats { display: none !important; }

/* -----------------------------------------------------------------------------
   Data table — city visitor numbers on the info page
   -------------------------------------------------------------------------- */
      /* never let a table scroll the page */

/* -----------------------------------------------------------------------------
   Search — T5
   -------------------------------------------------------------------------- */

/* THE CHIP BAR IS GONE, and so are its rules. Mikko, 2026-08-28: it "by
   default hides results". They were never filters over one result set — they
   were three separate queries with the active one stored as a persisted
   setting, so a visitor got whichever query they last used regardless of what
   they typed. Three sections now run down one page instead.

   `.search-filters`, `.search-filter-wrap` and `.item-wide` rules were deleted
   rather than left to rot: all three classes are now absent from the built
   markup, and check-css.py's reverse sweep cannot see a rule matching nothing.
   (The all-caps treatment went with them — it styled the chips.)

   ⚠️ This is a SPECIFICATION, not styling. Production runs one query and
   renders one list; see searchsections.py for the two things that must change
   with it — the 100× radius gap and the today-only dish join.
   -------------------------------------------------------------------------- */

/* Results are the ordinary listing card, so the grid is home.css's masonry —
   no override at all. The old `columns: 1` made a result one wide row; a
   result is a restaurant, and a restaurant already has a card. */

.result-section + .result-section { margin-top: var(--space-12); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--t-name-lh);    /* the section names a set of restaurants */
  color: var(--c-ink);
}
.section-note {
  font-size: var(--t-meta);
  line-height: var(--t-meta-lh);
  color: var(--c-ink-muted);
}

/* "Näytä kaikki sijainnit" — the way OUT of the result list, to the full
   index. Pushed to the far end of the head so it never reads as part of the
   count beside it, and it is the only link in the head, so it carries the
   underline that marks a link in prose. Location section only. */
.section-all {
  margin-left: auto;
  font-size: var(--t-meta);
  line-height: var(--t-meta-lh);
  color: var(--c-ink);
  text-decoration: underline;
}

/* Each section carries its OWN button and its own pool. The behaviour scopes
   to [data-lounaat-element="result-section"]; without that all three buttons
   resolve the first grid on the page. `data-page-size` makes a press reveal
   one row rather than a server page of sixteen. */
.result-section .more.content { margin-top: var(--space-6); }

/* "Näytä lisää" — search uses a bare .button, not home's .button.showmore */
.more.content .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--c-chrome);
  border-radius: var(--r-container);
  padding: var(--space-4);
  color: var(--c-on-dark);
}
.more.content .button:hover { background: var(--c-chrome-raised); }

/* -----------------------------------------------------------------------------
   The help icon in the search infobox has no Obra equivalent in the set Mikko
   pasted into Figma, and it is decorative next to text that already explains
   itself. Hidden rather than substituted with a glyph he did not choose.
   -------------------------------------------------------------------------- */
.icon-help-circled { display: none; }