/**
 * assets/styles/ds/public.css
 *
 * THE PUBLIC HALF: the platform site, each nursery's own site, and the parent
 * portal. Loaded after platform.css (on dawkids.com) or after the nursery
 * theme's style.css, and it takes the same position in both -- last.
 *
 * The public surface has a different job from the admin surface and is allowed
 * to breathe: larger type, more space, images that carry weight. What it does
 * NOT get is a second palette or a second type scale. One system, two densities.
 */

/* ====================================================================== *
 * READING
 * ====================================================================== */

.site-head ~ main,
.public-page { font-size: var(--t-lg); }

/* ---------------------------------------------------------------------- *
 * THE LANGUAGE SWITCH
 * A <details> element, so it opens with no script and is operable from the
 * keyboard by default. Ten locales ship; until recently none of them could be
 * chosen on four of the five public pages.
 * ---------------------------------------------------------------------- */

.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { border-color: var(--accent-line); color: var(--accent); }
.lang-switch[open] > summary { border-color: var(--accent); color: var(--accent); }
.lang-switch ul {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: var(--z-drop);
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  min-width: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  display: grid;
  gap: 1px;
}
.lang-switch ul a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  font-size: var(--t-xs);
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.lang-switch ul a:hover { background: var(--accent-wash); color: var(--accent); }
.lang-switch ul a.is-current { background: var(--accent); color: var(--ink-on-brand); font-weight: var(--fw-semi); }

/* ====================================================================== *
 * THE PARENT PORTAL
 *
 * Its own section, because its constraints are unlike anything else here:
 * read on a phone, one-handed, often outdoors, often in a hurry -- "did my
 * child arrive", "is the bus close", "who is collecting today". Big answers,
 * small chrome, and nothing that needs two hands.
 * ====================================================================== */

/* ---- the answer line -------------------------------------------------- *
 * Every portal screen leads with one sentence that answers the question the
 * parent opened it to ask, before any table or timeline. If the screen cannot
 * state its answer in a sentence, it is not finished.                         */
.pp-answer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--ink-muted);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-5);
}
.pp-answer--ok   { border-inline-start-color: var(--ok-600);   background: var(--ok-100);   color: var(--ok-700); }
.pp-answer--wait { border-inline-start-color: var(--warn-600); background: var(--warn-100); color: var(--warn-700); }
.pp-answer--bad  { border-inline-start-color: var(--bad-600);  background: var(--bad-100);  color: var(--bad-700); }
.pp-answer__title { font-family: var(--font-display); font-weight: var(--fw-semi); margin: 0; }
.pp-answer__detail { font-size: var(--t-sm); opacity: .85; margin: var(--s-1) 0 0; }

/* ---- which child ----------------------------------------------------- *
 * The portal had three separate navigation systems -- account-scoped,
 * class-scoped and child-scoped -- and none of them answered "which of my
 * children am I looking at". This bar does, and it stays put while scrolling.  */
.pp-childbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
}
.pp-childbar__avatar {
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  object-fit: cover;
  border: 2px solid var(--surface);
  box-shadow: var(--e-1);
  flex: 0 0 auto;
}
.pp-childbar__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-lg); margin: 0; }
.pp-childbar__meta { font-size: var(--t-xs); color: var(--ink-muted); }

/* ---- the four child pills -------------------------------------------- *
 * Today / who may collect / permissions / the bus. Hard-coded twice in the
 * markup today, in two files that have already diverged.                      */
.pp-pills {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-5);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pp-pills::-webkit-scrollbar { display: none; }
.pp-pills a {
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  background: var(--surface);
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.pp-pills a:hover { border-color: var(--accent-line); color: var(--accent); }
.pp-pills a[aria-current] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-on-brand);
  font-weight: var(--fw-semi);
}

/* ---- the day, as a timeline ------------------------------------------ *
 * The existing rail is drawn with padding-left / left / border-left in a
 * 32-line inline <style>. In Arabic that puts the rail on the far side of
 * right-aligned text and detaches every dot from its row. Logical properties
 * fix both directions at once, and the rule lives here rather than in a page.  */
.pp-timeline {
  position: relative;
  padding-inline-start: var(--s-7);
  margin: 0;
  list-style: none;
}
.pp-timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 9px;
  width: 2px;
  background: var(--line);
  border-radius: var(--r-pill);
}
.pp-timeline__entry { position: relative; padding-block: var(--s-3); }
.pp-timeline__entry + .pp-timeline__entry { border-top: 1px dashed var(--line); }
.pp-timeline__dot {
  position: absolute;
  inset-inline-start: calc(var(--s-7) * -1 + 3px);
  inset-block-start: var(--s-4);
  width: 14px; height: 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 3px solid var(--ink-muted);
}
.pp-timeline__dot--in   { border-color: var(--ok-600); }
.pp-timeline__dot--out  { border-color: var(--accent); }
.pp-timeline__dot--bus  { border-color: var(--sun-600); }
.pp-timeline__dot--stop { border-color: var(--bad-600); }
.pp-timeline__time {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semi);
  font-size: var(--t-lg);
  color: var(--ink);
}
.pp-timeline__what { font-size: var(--t-sm); color: var(--ink-2); }
.pp-timeline__who { font-size: var(--t-xs); color: var(--ink-muted); }

/* A correction is shown, not hidden: the superseded entry stays, marked. */
.pp-timeline__entry--superseded { opacity: .6; }
.pp-timeline__entry--superseded .pp-timeline__time { text-decoration: line-through; }

/* ---- the bus --------------------------------------------------------- */
.pp-bus {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--surface);
}
.pp-bus--live { border-inline-start: 4px solid var(--ok-600); }
.pp-bus__time {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}
.pp-bus__label { font-size: var(--t-xs); color: var(--ink-muted); }

/* A live signal that is not colour alone: it pulses, and it says "live". */
.pp-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--ok-600);
  margin-inline-end: var(--s-2);
  animation: pp-pulse 2s ease-in-out infinite;
}
@keyframes pp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- who may collect ------------------------------------------------- *
 * State must read at a glance and must not be carried by border colour
 * alone, which is how the current tiles do it.                                */
.pp-guardian {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pp-guardian img {
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex: 0 0 auto;
}
.pp-guardian__name { font-weight: var(--fw-semi); }
.pp-guardian__rel { font-size: var(--t-xs); color: var(--ink-muted); }
.pp-guardian__state { margin-inline-start: auto; }
.pp-guardian--pending { border-style: dashed; }
.pp-guardian--refused { opacity: .7; }

/* ====================================================================== *
 * PUBLIC PAGE FURNITURE
 * ====================================================================== */

/* Images the theme leaves unconstrained. `.img-responsive` is Bootstrap 3 and
   does nothing under Bootstrap 5, which is why a photo pasted into a chat
   currently blows the conversation pane open. */
.img-responsive { max-width: 100%; height: auto; }

/* The theme clamps text with a jQuery plugin (dotdotdot, 11KB, loaded on every
   page for four pages' worth of use). CSS does it without the download. */
.dotdotdot, .u-clamp-2, .u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dotdotdot, .u-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* An article body, whatever the editor pasted into it. */
.article-body { font-size: var(--t-lg); line-height: var(--lh-loose); max-width: var(--measure); }
.article-body img { border-radius: var(--r-md); margin-block: var(--s-5); }
.article-body h2 { margin-top: var(--s-8); }
.article-body h3 { margin-top: var(--s-6); }
.article-body blockquote {
  margin: var(--s-6) 0;
  padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--accent-line);
  color: var(--ink-2);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
}
.article-body table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.article-body :is(td, th) { border: 1px solid var(--line); padding: var(--s-2) var(--s-3); }

/* Editor content can contain anything, including a 1200px table. It scrolls
   inside its own box rather than taking the page sideways. */
.article-body > table,
.article-body > pre { display: block; overflow-x: auto; max-width: 100%; }

/* ---- pagination ------------------------------------------------------ *
 * The portal's pager is fourteen `javascript:void(0)` anchors: not links to
 * assistive technology, not openable in a new tab, not crawlable. The styling
 * is here; the hrefs have to be fixed in the markup, and are listed in the
 * report.                                                                     */
.paging, .pagination-public {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
}
.paging a, .paging span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.paging a:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-wash); }
.paging .active a, .paging a[aria-current] {
  background: var(--accent); border-color: var(--accent); color: var(--ink-on-brand); font-weight: var(--fw-semi);
}

/* ---- touch targets --------------------------------------------------- *
 * 44px is the smallest thing a thumb finds reliably. The portal is used at a
 * school gate, in a coat, in the rain.                                        */
@media (pointer: coarse) {
  .pp-pills a, .paging a, .paging span { min-height: 44px; }
  .btn, .ds-btn { min-height: 44px; }
}

/* ====================================================================== *
 * THE NURSERY THEME'S WORST HABITS, NEUTRALISED
 *
 * These are not style preferences. Each one is a rule in the purchased theme
 * that breaks the page, and each is replaced rather than argued with.
 * ====================================================================== */

/* style.css line 10 is `*:focus { outline: none; }`, with five more like it.
   The only thing that restored a focus ring was a toggle inside the
   accessibility panel -- so keyboard navigation was invisible by default on
   the entire public site and the whole parent portal. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* The home page hard-codes `style="height:576px;width:576px"` on gallery
   images, inside a responsive grid. Below about 600px that tile is wider than
   its container and takes the whole document sideways. */
@media (max-width: 767.98px) {
  .box-intro img[style],
  .home-gallery img[style],
  main img[style*="width"] { width: 100% !important; height: auto !important; }
}

/* Bootstrap 3 grid classes still in the markup, which resolve to nothing
   under Bootstrap 5 and leave three cards per row on a 320px phone. */
@media (max-width: 575.98px) {
  .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
  main .col-3, main .col-4, main .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* The preloader never leaves if a script throws, and the page looks dead. */
#preloader, .preloader { animation: pp-preloader-out 0s linear 8s forwards; }
@keyframes pp-preloader-out { to { opacity: 0; visibility: hidden; } }