/* =========================================================================
   HeartFelt Kids — LEARNING
   Rick's instruction of 12 August 2026.

   Two jobs, and they are separate on purpose:

     1  the shelf      the landing page, its cards, and the program bar
     2  .lprog         the fence a program runs inside

   Everything here is written against the tokens in tokens.css. Nothing
   invents a colour, a radius, or a type size, which is the whole reason a
   program dropped into .lprog stops looking like a different website.

   A program's own stylesheet lives in assets/learning/{slug}.css and every
   rule in it is written inside .lprog. That is what keeps a program from
   reaching the header, the footer, or the next program along.
   ========================================================================= */

/* =========================================================================
   1. THE HERO
   Learning borrows the grown up pages' type banner because it has no
   painting yet. It is a child's page though, so it is warmed up: Forest
   rather than the calm sky, and the title at child scale.
   ========================================================================= */
.learning-page .ahero {
  background: var(--forest-soft);
  border-bottom: 2px solid #CFE6D1;
}

.learning-page .ahero__title { color: var(--navy); }

.learning-page .ahero__lead {
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
  max-width: 62ch;
}

/* =========================================================================
   2. WORD OF THE DAY, THE PANEL AT THE TOP
   ========================================================================= */
.learn-daily__panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-32);
  align-items: center;
  background: linear-gradient(135deg, var(--sky-soft), var(--cream));
}

.learn-daily__plate {
  width: 96px; height: 96px;
  border-radius: var(--radius-lg);
  background: var(--sky);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

.learn-daily__eyebrow {
  font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase;
  font-weight: var(--w-bold); color: var(--sky);
  margin: 0 0 6px;
}

.learn-daily__title {
  font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: var(--t-h2-size); line-height: var(--t-h2-lh);
  color: var(--navy); margin: 0 0 10px;
}

.learn-daily__lead {
  font-size: var(--t-lead-size); line-height: var(--t-lead-lh);
  color: var(--body); max-width: 62ch; margin: 0 0 var(--space-24);
}

/* =========================================================================
   3. THE SHELVES
   ========================================================================= */
/* auto-fill rather than a fixed count, so a shelf holding two programs and a
   shelf holding fifteen both look deliberate and neither needs a new rule
   written for it. This is the part that lets the page grow. */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-24);
}

.learn-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.learn-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.learn-card__plate {
  width: 72px; height: 72px;
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-16);
  flex-shrink: 0;
}

.learn-card__art {
  width: 72px; height: 72px;
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
}

.learn-card__title {
  font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: var(--t-h3-size); line-height: var(--t-h3-lh);
  color: var(--navy); margin: 0 0 8px;
}

.learn-card__link { color: inherit; text-decoration: none; }

/* The title link is the card's one real control, so it is stretched across
   the whole tile. The button below is decoration that repeats where it goes;
   see the note in template-parts/learning/card.php. */
.learn-card { position: relative; }

.learn-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }

.learn-card__link:hover { text-decoration: underline; }

.learn-card__link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.learn-card__blurb {
  font-size: var(--t-adult-size); line-height: var(--t-adult-lh);
  color: var(--body); margin: 0 0 var(--space-16);
}

.learn-card__ages {
  font-size: var(--t-small-size); line-height: var(--t-small-lh);
  font-weight: var(--w-bold); color: var(--soft);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 3px 14px;
  margin: 0 0 var(--space-16);
}

/* Pushed to the foot so every card in a row ends on its button, whatever
   length the description happens to be. */
.learn-card__go { margin-top: auto; }

/* Per program colour: the plate is filled, the border picks up a hint of it,
   and the button already carries it through the shared .btn classes. */
.learn-card--sky      .learn-card__plate { background: var(--sky); }
.learn-card--forest   .learn-card__plate { background: var(--forest); }
.learn-card--heart    .learn-card__plate { background: var(--heart); }
.learn-card--lavender .learn-card__plate { background: var(--lavender); }
.learn-card--gold     .learn-card__plate { background: var(--gold); }

.learn-card--sky:hover      { border-color: var(--sky); }
.learn-card--forest:hover   { border-color: var(--forest); }
.learn-card--heart:hover    { border-color: var(--heart); }
.learn-card--lavender:hover { border-color: var(--lavender); }
.learn-card--gold:hover     { border-color: var(--gold); }

/* =========================================================================
   4. THE BAR ON A PROGRAM PAGE
   One line: the way back, the name, and who it is for. Kept short because a
   child arriving here has already chosen, and the program should be the
   first thing on the screen rather than the fourth.
   ========================================================================= */
.learn-bar {
  background: var(--cream);
  border-bottom: 2px solid var(--line);
  padding: var(--space-16) 0;
}

.learn-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-12) var(--space-24);
}

.learn-bar__back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap-min);
  padding: 0 var(--space-16) 0 var(--space-12);
  border: 2px solid var(--line);
  border-radius: var(--pill);
  background: var(--panel);
  font-weight: var(--w-bold);
  font-size: var(--t-small-size);
  color: var(--navy);
  text-decoration: none;
}

.learn-bar__back:hover { background: var(--sky-soft); border-color: var(--sky); }

.learn-bar__back:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* The arrow icon points right in the shared set; this is the way back. */
.learn-bar__back svg { transform: rotate(180deg); }

.learn-bar__title {
  font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: var(--t-h2-size); line-height: var(--t-h2-lh);
  color: var(--navy); margin: 0; margin-right: auto;
}

.learn-bar__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.learn-bar__chip {
  font-size: var(--t-small-size); line-height: 1.4;
  font-weight: var(--w-bold); color: var(--body);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 5px 14px;
}

/* =========================================================================
   5. .lprog — THE FENCE
   A program's markup is dropped in here whole. This gives it the site's
   panel, the site's type, and a width to live in, and nothing else. What it
   deliberately does NOT do is style the program's insides: that is the
   program's own stylesheet, so one program's idea of a button can never
   become another's.
   ========================================================================= */
.lprog {
  padding: var(--space-48) 0;
  background: var(--cream);
}

.lprog > .container { display: flex; justify-content: center; }

/* The program's own root. Each bundle opens with this element. */
.lprog .lprog__app {
  width: 100%;
  max-width: 760px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--space-32);
  font-family: var(--font-body);
  color: var(--body);
  /* A program is an interactive thing, and dragging a selection across it
     while tapping fast is never what a child meant to do. */
  -webkit-tap-highlight-color: transparent;
}

.lprog .lprog__app *,
.lprog .lprog__app *::before,
.lprog .lprog__app *::after { box-sizing: border-box; }

/* Headings inside a program take the site's display face rather than
   whatever the program shipped with. This is most of why an installed
   program reads as HeartFelt Kids at a glance. */
.lprog .lprog__app h1,
.lprog .lprog__app h2,
.lprog .lprog__app h3,
.lprog .lprog__app h4 {
  font-family: var(--font-head);
  font-weight: var(--w-extrabold);
  color: var(--navy);
  line-height: 1.15;
  margin: 0;
}

.lprog .lprog__app p { margin: 0; }

.lprog .lprog__app button { font-family: var(--font-body); }

/* Every control a child taps clears the Bible's 48px minimum, whatever the
   program's own stylesheet asked for. */
.lprog .lprog__app button,
.lprog .lprog__app [role="button"] { min-height: var(--tap-min); }

.lprog .lprog__app button:focus-visible,
.lprog .lprog__app input:focus-visible,
.lprog .lprog__app select:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Each of Rick's programs was written to stand on its own, so several of
   them print "HeartFelt Kids" across the top with a little heart. Inside the
   site that is the fourth time the visitor has been told where they are: the
   header says it, the tab says it, the footer says it. The program's own
   badge is hidden rather than deleted from its markup, so a program lifted
   back out of the theme still knows what it belongs to. */
.lprog .lprog__app .brand,
.lprog .lprog__app .logo-area,
.lprog .lprog__app h1 > small { display: none; }

/* =========================================================================
   6. NARROWER SCREENS
   ========================================================================= */
@media (max-width: 900px) {
  .learn-daily__panel { grid-template-columns: 1fr; gap: var(--space-24); }
  .learn-daily__plate { width: 76px; height: 76px; }
}

@media (max-width: 760px) {
  .learn-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .learn-bar__title { font-size: var(--t-h3-size); width: 100%; margin-right: 0; }
  .lprog { padding: var(--space-24) 0; }
  .lprog .lprog__app { padding: var(--space-24) var(--space-16); border-radius: var(--radius-lg); }
}

@media (max-width: 480px) {
  .learn-grid { grid-template-columns: 1fr; }
  .learn-card__go { width: 100%; justify-content: center; }
}

/* Children who are sensitive to motion, and the Bible's section 22. */
@media (prefers-reduced-motion: reduce) {
  .learn-card { transition: none; }
  .learn-card:hover { transform: none; }
}