/* ══════════════════════════════════════════════════════════════════════
   CH BABYSITTERS & PLAYGROUPS — DESKTOP stylesheet
   Loaded only on screens ≥ 820px wide (laptops, desktops, large tablets)
   via <link media="screen and (min-width: 820px)">. base.css carries the
   shared look; anything here can be changed without touching phones.
   ══════════════════════════════════════════════════════════════════════ */

/* The drawn sun and clouds behind the headline. base.css paints them and
   mobile.css hides them, so this rule is deliberately redundant — it means
   the decoration survives even if that hide rule is ever moved or widened,
   rather than silently vanishing on desktop too. */
.sky-decor {
  display: block;
}

/* ─── NARROW DESKTOPS: keep the sun/moon off the headline ──────────── */
/* The headline is centred and scales with the viewport; the sun sits at a
   percentage from the right. Below ~1200px the two converge and the sun
   lands directly on the word "Playgroups" — measured overlap was 72px at
   820px and still 63px at 1024px, which covers most laptops.
   Above the headline there is empty sky, so at these widths the orb tucks
   into the top-right corner at a smaller size instead of being hidden.
   The cutoff is 1280 rather than the ~1190 where overlap technically stops,
   because at 1200 the natural gap is only 8px — close enough to still read
   as a collision. By 1280 it is a comfortable 41px.
   !important is required: the positions are inline style attributes on the
   spans, which otherwise win over any stylesheet rule. */
@media (max-width: 1279.98px) {
  .sky-orb {
    top: 4px !important;
    right: 2% !important;
  }

  .sky-orb svg {
    width: 68px;
    height: 68px;
  }
}