/* /free — 100% free family outings across Lambton County.
   A civic directory page in the /clubs and /sports family: cream ground, white
   cards on warm hairlines, forest for every action, a serif for the headlines
   and 'Inter' for everything a parent taps. No photos anywhere: each card
   carries a tinted icon column instead, so the page is fast, needs no image
   upkeep, and a new category only needs a new tint.

   The shared header, footer and mobile bar come from nav-footer.css and are
   deliberately not touched here; page rules for them are what broke the
   mobile bar before (see CLAUDE.md).

   Sponsor slots: the two sections ship with the hidden attribute and
   /assets/js/sponsor-spots.js reveals them only when Airtable has an active
   sponsor for the Free page, so an unsponsored page shows no band, no border
   and no gap. The :empty rules below are a second guard for the same case. */

.free-page {
  --free-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --free-serif: "Inter", Georgia, "Times New Roman", serif;
  /* The same cream, ink and forest /clubs and /sports use, so the three
     directory pages read as one product under one header. */
  /* Crisp white and soft blue (owner, 19 September 2026): near-white ground,
     white surfaces, ink headings, a slate blue for eyebrows and badge text,
     the pale cool blue for every tint, and the deep green kept for buttons
     and links only. The page used to set every heading in green. */
  --free-bg: #fbfcfb;
  --free-surface: #ffffff;
  --free-surface-2: #fbfcfb;
  --free-ink: #22312b;
  --free-ink-muted: #55635c;
  --free-muted: #55635c;
  --free-green: #356382;
  /* Lighter than the resting colour on purpose: iOS keeps :hover after a tap
     and a darker tapped button reads as broken (see CLAUDE.md). */
  --free-green-hover: #3c7194;
  --free-sage: #35576b;        /* slate blue: eyebrows, badge and tile text */
  --free-sage-mist: #e6eef3;   /* the pale cool blue tint */
  --free-sage-border: #cfdbe3; /* its hairline */
  --free-line: #e3e8e4;
  --free-radius-sm: 8px;
  --free-radius-md: 16px;
  --free-radius-lg: 20px;
  --free-control: 44px;
  /* Height of the sticky shared header, which the filter bar and the
     sidebar sit beneath. */
  --free-header: 76px;

  margin: 0;
  background: var(--free-bg);
  color: var(--free-ink);
  font-family: var(--free-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.free-page *, .free-page *::before, .free-page *::after { box-sizing: border-box; }
.free-page button, .free-page input { font: inherit; }
.free-page button, .free-page a { -webkit-tap-highlight-color: transparent; }
.free-page [hidden] { display: none !important; }
.free-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.free-shell :is(a, button):focus-visible { outline: 2px solid var(--free-green); outline-offset: 3px; }

.free-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--page-pad, 1.6rem); }

/* Hero ---------------------------------------------------------------------- */
.free-hero { padding: 28px 0 18px; }
@media (min-width: 981px) { .free-hero { padding: 40px 0 24px; } }
.free-hero-kicker {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--free-sage);
}
.free-hero-kicker::before { content: ''; flex: none; width: 18px; height: 2px; background: currentColor; }
.free-hero-title {
  margin: 0 0 14px;
  font-family: var(--free-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--free-ink);
  text-wrap: balance;
}
.free-hero-lead { max-width: 64ch; margin: 0; font-size: 17px; line-height: 1.6; color: var(--free-ink-muted); }
.free-hero-lead a { color: var(--free-green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Sponsor slots ------------------------------------------------------------ */
.free-premier-sponsor-wrap:empty,
.free-community-partners-section:empty,
.free-partners-grid:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* Premier: one white card under the hero, laid out by sponsor-spots.js. */
.free-premier-sponsor-wrap { margin-top: 22px; padding: 18px 20px; background: var(--free-surface); border: 1px solid var(--free-sage-border); border-radius: var(--free-radius-md); }
.free-premier-sponsor-wrap .pb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.free-premier-sponsor-wrap .pb-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--free-sage); }
/* Community: a hairline band between the hero and the filters. */
.free-community-partners-section { padding: 18px var(--page-pad, 1.6rem) 22px; border-top: 1px solid var(--free-line); border-bottom: 1px solid var(--free-line); background: rgba(255, 255, 255, .5); }
.free-community-partners-section .csx-head { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--free-sage); }
.free-community-partners-section .csx-join { display: inline-flex; align-items: center; min-height: var(--free-control); margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--free-green); text-decoration: underline; text-underline-offset: 3px; }

/* Upcoming free events ------------------------------------------------------
   Filled by free.js from the shared events feed and revealed only when at
   least one dated free event is still to come; the section ships with the
   hidden attribute and stays out of the layout otherwise. Same card grammar
   as the anytime outings below (white on a warm hairline, 16px radius,
   forest for every action) with a sage date pill where those carry an icon. */
.free-upcoming { padding: 6px 0 30px; }
.free-upcoming-head { margin: 0 0 14px; }
.free-upcoming-title { margin: 0; font-family: var(--free-serif); font-size: clamp(24px, 3vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--free-ink); text-wrap: balance; }
.free-upcoming-sub { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--free-ink-muted); }
.free-upcoming-sub:has(> span:empty) { display: none; }
/* The calendar and saved links sit under the cards, never before them. */
.free-upcoming-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 12px 0 0; }
@media (min-width: 701px) { .free-upcoming-links { flex-direction: row; flex-wrap: wrap; gap: 4px 28px; } }
.free-upcoming-all, .free-upcoming-saved {
  display: inline-flex; align-items: center; flex: none;
  min-height: var(--free-control);
  font-size: 14px; font-weight: 700; color: var(--free-green);
  text-decoration: underline; text-underline-offset: 3px;
}
.free-upcoming-saved { color: var(--free-sage); }
.free-upcoming-saved strong { margin: 0 .3em; font-weight: 800; color: var(--free-green); }
.free-upcoming-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 980px) { .free-upcoming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .free-upcoming-grid { grid-template-columns: minmax(0, 1fr); } }

.free-event {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px;
  padding: 16px;
  background: var(--free-surface);
  border: 1px solid var(--free-line); border-radius: var(--free-radius-md);
  box-shadow: 0 1px 2px rgba(42, 38, 34, .04), 0 2px 10px rgba(42, 38, 34, .03);
}
/* The date pill: month, day and weekday stacked on soft sage. */
.fe-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  align-self: start;
  width: 64px; min-height: 76px; padding: 8px 4px;
  background: var(--free-sage-mist); border: 1px solid var(--free-sage-border); border-radius: 12px;
  color: var(--free-sage); text-align: center; line-height: 1;
}
.fe-date-mon { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--free-sage); }
.fe-date-day { margin: 3px 0 4px; font-family: var(--free-serif); font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.fe-date-dow { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--free-ink-muted); }
.fe-body { min-width: 0; display: flex; flex-direction: column; }
.fe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.fe-soon { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--free-bg); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--free-ink-muted); }
.fe-soon-now { background: var(--free-sage-mist); color: var(--free-sage); }
.fe-title { margin: 0 0 6px; font-family: var(--free-serif); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--free-ink); text-wrap: balance; overflow-wrap: anywhere; }
.fe-title a { color: inherit; text-decoration: none; }
.fe-title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.fe-when, .fe-where { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--free-ink-muted); }
.fe-when { font-weight: 600; color: var(--free-ink); }
.fe-where { overflow-wrap: anywhere; }
.fe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; padding-top: 10px; }
.fe-link { display: inline-flex; align-items: center; min-height: var(--free-control); font-size: 14px; font-weight: 700; color: var(--free-green); text-decoration: underline; text-underline-offset: 3px; }
.fe-save { min-height: 40px; padding: 0 12px; }

/* Filter pills --------------------------------------------------------------- */
.free-filters-bar {
  position: sticky; top: var(--free-header); z-index: 20;
  padding: 12px 0;
  background: var(--free-bg);
  border-bottom: 1px solid var(--free-line);
}
.free-filters-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 var(--page-pad, 1.6rem); }
.free-filters-scroll::-webkit-scrollbar { display: none; }
.free-pill {
  flex: none; white-space: nowrap;
  min-height: var(--free-control); padding: 0 16px;
  border: 1px solid var(--free-line); border-radius: 10px;
  background: var(--free-surface); color: var(--free-ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
/* Selected: still white, drawn in green rather than filled with it (the
   owner finds a solid, fully rounded green pill cartoonish). */
.free-pill.is-active { background: var(--free-sage-mist); border-color: var(--free-sage-border); color: var(--free-ink); font-weight: 700; }

/* Layout --------------------------------------------------------------------- */
.free-main-content { padding: 28px 0 56px; }
.free-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
@media (max-width: 980px) {
  .free-layout-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.free-listings-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; }
.free-listings-head h2 { margin: 0; font-family: var(--free-serif); font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--free-ink); }
.free-listings-count { margin: 0; font-size: 13.5px; color: var(--free-muted); }
.free-cards-stack { display: flex; flex-direction: column; gap: 14px; }
.free-empty { margin: 0; padding: 28px 20px; background: var(--free-surface); border: 1px dashed var(--free-line); border-radius: var(--free-radius-md); font-size: 15px; color: var(--free-ink-muted); text-align: center; }

/* Cards: an icon column and a body, no photo anywhere -------------------- */
.free-card {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  background: var(--free-surface);
  border: 1px solid var(--free-line); border-radius: var(--free-radius-md);
  box-shadow: 0 1px 2px rgba(42, 38, 34, .04), 0 2px 10px rgba(42, 38, 34, .03);
  overflow: hidden;
}
.fc-icon-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 10px;
  background: var(--tint, var(--free-sage-mist));
  border-right: 1px solid var(--free-sage-border);
  color: var(--free-sage);
}
.fc-svg { display: block; width: 30px; height: 30px; stroke: currentColor; }
.fc-icon-type { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--free-sage); }
/* One muted tint per category. A new category gets a new class here and
   nothing else changes. */
.fc-icon-nature { --tint: #e2eee4; }
.fc-icon-music  { --tint: #ece6f3; }
.fc-icon-play   { --tint: #e3eaf0; }
.fc-icon-park   { --tint: #e9ecdf; }
.fc-icon-passes { --tint: #dfedf1; }
.fc-icon-art    { --tint: #ebf0ec; }
.fc-icon-water  { --tint: #dfeef5; }
.fc-icon-beach  { --tint: #e3eaf0; }

.fc-body { min-width: 0; padding: 18px 22px 20px; }
.fc-meta-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.fc-tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fc-tag-free      { background: #e6eef3; color: #35576b; }
.fc-tag-dropin    { background: #e6eff6; color: #1b4f6f; }
.fc-tag-admission { background: #f2f5f3; color: #35576b; }
.fc-tag-pass      { background: #ede8f4; color: #4f2a7a; }
.fc-tag-community { background: #eef2e2; color: #4b5b12; }
.fc-location { font-size: 13.5px; font-weight: 600; color: var(--free-ink-muted); }
.fc-age { padding: 2px 7px; border-radius: 4px; background: var(--free-bg); font-size: 12.5px; font-weight: 600; color: var(--free-ink-muted); }
.fc-title { margin: 0 0 8px; font-family: var(--free-serif); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--free-ink); text-wrap: balance; }
.fc-desc { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--free-ink-muted); }
.fc-features { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.fc-feat { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--free-ink); }
.fc-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--free-sage); }
.fc-note { margin: -6px 0 14px; font-size: 13px; line-height: 1.5; color: var(--free-muted); }
.fc-note a { color: var(--free-green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.fc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--free-control); padding: 0 18px;
  border-radius: var(--free-radius-sm);
  font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.fc-btn-primary { background: var(--free-green); border: 1px solid var(--free-green); color: #fff; }
.fc-btn-primary:hover { background: var(--free-green-hover); border-color: var(--free-green-hover); }
/* The town-guide link beside the primary action: quiet, same height. */
.fc-btn-secondary { background: var(--free-surface); border: 1px solid var(--free-sage-border); color: var(--free-green); }
.fc-btn-secondary:hover { background: var(--free-sage-mist); }
.fc-btn-save {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--free-control); padding: 0 14px;
  border: 1px solid var(--free-line); border-radius: var(--free-radius-sm);
  background: transparent; color: var(--free-ink-muted);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.fc-btn-save[aria-pressed="true"] { background: var(--free-sage-mist); border-color: var(--free-sage); color: var(--free-green); }
.fc-btn-save svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.fc-btn-save[aria-pressed="true"] svg { fill: currentColor; }

@media (max-width: 600px) {
  .free-card { grid-template-columns: minmax(0, 1fr); }
  .fc-icon-col { flex-direction: row; justify-content: flex-start; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--free-sage-border); }
  .fc-svg { width: 24px; height: 24px; }
  .fc-body { padding: 16px 16px 18px; }
  .fc-title { font-size: 20px; }
  .fc-actions .fc-btn-primary { flex: 1 1 auto; }
}

/* Sidebar ------------------------------------------------------------------- */
.free-sidebar-sticky { position: sticky; top: calc(var(--free-header) + 84px); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 980px) { .free-sidebar-sticky { position: static; } }

/* The Saturday plan, on the pale cool blue (it used to be a forest card). */
.free-blueprint-card { padding: 24px; background: var(--free-sage-mist); color: var(--free-ink); border: 1px solid var(--free-sage-border); border-radius: var(--free-radius-lg); }
.fb-badge { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--free-sage); }
.fb-title { margin: 0 0 8px; font-family: var(--free-serif); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--free-ink); }
.fb-sub { margin: 0 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--free-ink-muted); }
.fb-timeline { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.fb-timeline li { display: flex; gap: 14px; align-items: flex-start; }
.fb-num { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--free-sage); font-size: 12px; font-weight: 800; }
.fb-step { min-width: 0; }
.fb-step strong { display: block; margin: 0 0 3px; font-size: 14px; color: var(--free-ink); }
.fb-step p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--free-ink-muted); }
.fb-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--free-sage-border); }
.fb-cost { font-size: 13.5px; color: var(--free-ink-muted); }
.fb-cost strong { font-size: 18px; color: var(--free-ink); }
.fb-btn { min-height: 40px; padding: 8px 14px; border: 1px solid var(--free-sage-border); border-radius: var(--free-radius-sm); background: #fff; color: var(--free-green); font-size: 13px; font-weight: 700; cursor: pointer; }

/* The library card list. */
.free-card-utility { padding: 22px; background: var(--free-surface); border: 1px solid var(--free-line); border-radius: var(--free-radius-md); }
.fcu-title { margin: 0 0 8px; font-family: var(--free-serif); font-size: 20px; font-weight: 600; color: var(--free-ink); }
.fcu-intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--free-ink-muted); }
.fcu-perks { display: flex; flex-direction: column; margin: 0 0 14px; padding: 0; list-style: none; }
.fcu-perks li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--free-line); font-size: 13.5px; }
.fcu-perks li:last-child { border-bottom: 0; }
.fcu-perk-name { font-weight: 600; color: var(--free-ink); }
.fcu-perk-val { flex: none; padding: 3px 7px; border-radius: 4px; background: var(--free-sage-mist); font-size: 11.5px; font-weight: 700; color: var(--free-sage); }
.fcu-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--free-muted); }
.fcu-note a { color: var(--free-green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* The tip line. */
.free-tipline-card { padding: 20px; background: #f2f5f3; border: 1px dashed #d5dcd7; border-radius: var(--free-radius-md); }
.ftl-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--free-sage); }
.ftl-title { margin: 4px 0 6px; font-family: var(--free-serif); font-size: 18px; font-weight: 600; color: var(--free-ink); }
.ftl-desc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--free-ink-muted); }
.ftl-btn { display: inline-flex; align-items: center; min-height: var(--free-control); font-size: 14px; font-weight: 700; color: var(--free-green); text-decoration: underline; text-underline-offset: 3px; }

/* Print: the Saturday plan is the thing a parent prints, so print only it. */
@media print {
  .free-page > *:not(.free-shell), .free-hero, .free-upcoming, .free-filters-bar, .free-listings-col, .free-card-utility, .free-tipline-card, .free-community-partners-section { display: none !important; }
  .free-layout-grid { display: block; }
  .free-blueprint-card { background: #fff; color: #000; box-shadow: none; border: 1px solid #000; }
  .free-blueprint-card * { color: #000 !important; }
  .fb-btn { display: none; }
}

/* One-off for Orange Shirt Day, Sept 30, 2026 (record rec9y7JUoWIcMEdqM):
   orange left edge and soft orange tint. Remove after that date. The left
   padding gives back the 3px the wider edge takes, so the text stays put. */
.free-event.is-orange-shirt-day { background: #FDE8D4; border-color: #F28C28; border-left: 4px solid #F28C28; padding-left: 13px; }