/* ============================================================
   shared.css - small shared styles layered on top of Pico
   ------------------------------------------------------------
   Pico does ~all of the styling. This is only the handful of
   things every page needs that Pico doesn't give us. Page-specific
   CSS (like the calculator's tables) stays in that page's own file.
   ============================================================ */

/* --- Top banner -------------------------------------------------------- */
:root { --banner-blue: #1565c0; }              /* change the banner colour here */

.site-banner { background: var(--banner-blue); margin-bottom: 1.5rem; }
.site-banner .container { padding-top: 0.4rem; padding-bottom: 0.4rem; }

/* Banner text + links are white (brand, the inline links, the Menu label)... */
.site-banner a,
.site-banner a:hover,
.site-banner strong,
.site-banner summary { color: #fff; }
.site-banner a[aria-current="page"] { text-decoration: underline; }

/* ...EXCEPT links inside the dropdown panel, which sit on a light panel -
   keep those dark so they stay readable when the Menu is open. */
.site-banner details.dropdown ul a,
.site-banner details.dropdown ul a:hover { color: var(--pico-color, #2d3748); }

/* --- Responsive nav ---------------------------------------------------- */
/* Wide screens: show the inline links, hide the Menu dropdown.
   Narrow screens: hide the inline links, show the Menu. This is the
   mobile-overflow fix - on a phone the banner is just brand + Menu. */
.nav-menu { display: none; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-menu  { display: flex; }
}

/* --- Footer ------------------------------------------------------------ */
footer { margin-top: 3rem; opacity: 0.75; }
.copyright { display: block; font-size: 0.75em; }   /* tiny line under the tagline */

/* --- Placeholder boxes (delete as each page becomes real) -------------- */
.placeholder-note {
  border: 1px dashed var(--pico-muted-border-color, #b3b3b3);
  border-radius: var(--pico-border-radius, 0.25rem);
  padding: 1rem 1.25rem;
}

/* --- Status messages (errors / confirmations), usable on any page ------ */
.ok   { color: #2e7d32; font-weight: 600; }
.warn { color: #c62828; font-weight: 600; }