/* Riverlight Medical Practice — house additions on top of nhsuk-frontend.
   Only what the design system does not already give us: practice sidebar nav,
   news cards, the important-banner, the display tools and the footer strip. */

:root {
  --rl-blue: #005eb8;
  --rl-dark-blue: #003087;
  --rl-grey-1: #f0f4f5;
  --rl-grey-4: #d8dde0;
  --rl-text: #212b32;
}

html { scroll-behavior: smooth; }
body { background: #fff; }

/* ------------------------------------------------------------------ banner */
.rl-banner {
  background: #ffeb3b;
  border-bottom: 4px solid #330072;
  color: #212b32;
  padding: 16px 0;
  margin-top: 16px;
}
.rl-banner p { margin: 0; max-width: 48em; }
.rl-banner a { color: #330072; font-weight: 700; }

/* ----------------------------------------------------------------- sidebar */
.rl-sidebar { border-top: 4px solid var(--rl-blue); padding-top: 16px; }
.rl-sidebar__heading {
  font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; color: var(--rl-text);
}
.rl-sidebar ul { list-style: none; margin: 0 0 24px; padding: 0; }
.rl-sidebar li { border-bottom: 1px solid var(--rl-grey-4); }
.rl-sidebar li:first-child { border-top: 1px solid var(--rl-grey-4); }
.rl-sidebar a {
  display: block; padding: 10px 0 10px 4px; text-decoration: none;
  color: var(--rl-blue);
}
.rl-sidebar a:hover { text-decoration: underline; }
.rl-sidebar a[aria-current="page"] {
  font-weight: 700; color: var(--rl-text);
  box-shadow: inset 4px 0 0 var(--rl-blue); padding-left: 12px;
}

.rl-contact-box {
  background: var(--rl-grey-1); border-left: 6px solid var(--rl-blue);
  padding: 16px 20px; margin-bottom: 24px;
}
.rl-contact-box h2 { font-size: 1.15rem; margin-top: 0; }
.rl-contact-box p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- cards */
.rl-cards { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 20px; }
@media (min-width: 640px) { .rl-cards { grid-template-columns: 1fr 1fr; } }
.rl-cards .nhsuk-card { margin-bottom: 0; height: 100%; }
.rl-cards a { text-decoration: none; }
.rl-cards a:hover .nhsuk-card__heading { text-decoration: underline; }

.rl-news-item { border-bottom: 1px solid var(--rl-grey-4); padding: 0 0 20px; margin-bottom: 24px; }
.rl-news-item h3 { margin-bottom: 4px; }
.rl-news-item .rl-date { color: #4c6272; font-size: .95rem; display: block; margin-bottom: 8px; }

/* -------------------------------------------------------------------- table */
.rl-hours { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.rl-hours caption { text-align: left; padding-bottom: 8px; font-weight: 700; }
.rl-hours th, .rl-hours td { border-bottom: 1px solid var(--rl-grey-4); padding: 10px 8px; text-align: left; }
.rl-hours thead th { background: var(--rl-grey-1); }
.rl-hours td + td, .rl-hours th + th { text-align: right; }
.rl-hours tr.is-today { background: #fff3c4; font-weight: 700; }

.rl-facts { display: grid; grid-template-columns: 12rem 1fr; gap: 8px 16px; margin-bottom: 32px; }
.rl-facts dt { font-weight: 700; }
.rl-facts dd { margin: 0; }

/* ------------------------------------------------------------------- people */
.rl-person { display: flex; gap: 20px; border-top: 1px solid var(--rl-grey-4); padding: 20px 0; }
.rl-avatar {
  flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--rl-blue);
  color: #fff; font-weight: 700; font-size: 1.2rem; display: flex;
  align-items: center; justify-content: center;
}
.rl-person h3 { margin: 0 0 2px; }
.rl-person .rl-role { color: #4c6272; margin: 0 0 8px; }
.rl-person p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ CQC / stat bar */
.rl-statbar { display: grid; gap: 16px; margin: 0 0 32px; padding: 0; list-style: none; }
@media (min-width: 640px) { .rl-statbar { grid-template-columns: repeat(3, 1fr); } }
.rl-statbar li { background: var(--rl-grey-1); border-top: 4px solid var(--rl-blue); padding: 16px; }
.rl-statbar strong { display: block; font-size: 1.8rem; line-height: 1.1; }

.rl-cqc { border: 2px solid var(--rl-grey-4); padding: 16px; margin-bottom: 24px; }
.rl-cqc__rating { font-size: 1.4rem; font-weight: 700; margin: 0; }
.rl-cqc__rating span { background: #007f3b; color: #fff; padding: 2px 10px; }

/* ------------------------------------------------------------------- footer */
.site-footer { background: #003087; color: #fff; padding: 24px 0 32px; }
.site-footer p { margin: 0 0 8px; color: #fff; }
.site-footer a { color: #fff; }
.site-footer__owner { font-size: .95rem; }
.site-footer__meta { font-size: .9rem; }
@media (min-width: 641px) { .site-footer__meta { text-align: right; } }

.nhsuk-footer-container { border-bottom: none; }

/* ------------------------------------------------------------ display tools */
.a11y-tools {
  position: fixed; right: 12px; bottom: 12px; z-index: 50;
  background: #fff; border: 2px solid var(--rl-blue); border-radius: 6px;
  padding: 6px; display: flex; gap: 4px; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: .85rem;
}
.a11y-tools__label { padding: 0 4px; color: #212b32; }
.a11y-tools button {
  font: inherit; min-width: 34px; min-height: 34px; cursor: pointer;
  border: 1px solid var(--rl-grey-4); background: var(--rl-grey-1);
  color: var(--rl-dark-blue); border-radius: 4px;
}
.a11y-tools button:hover { background: var(--rl-grey-4); }
.a11y-tools button[aria-pressed="true"] { background: var(--rl-dark-blue); color: #fff; }

body.contrast { background: #000; color: #fff; }
body.contrast .nhsuk-main-wrapper, body.contrast .nhsuk-body, body.contrast p,
body.contrast li, body.contrast h1, body.contrast h2, body.contrast h3, body.contrast h4,
body.contrast dt, body.contrast dd { color: #fff; }
body.contrast a:not(.nhsuk-header__link):not(.nhsuk-footer__list-item-link) { color: #ffeb3b; }
body.contrast .nhsuk-card, body.contrast .rl-contact-box, body.contrast .a11y-tools { background: #111; color: #fff; border-color: #ffeb3b; }
body.contrast .rl-hours th, body.contrast .rl-hours td { border-color: #555; color: #fff; }
body.contrast .rl-hours thead th, body.contrast .rl-statbar li { background: #111; }

/* --------------------------------------------------------------------- misc */
.rl-lede { font-size: 1.25rem; line-height: 1.4; margin-bottom: 24px; }
.rl-print-only { display: none; }
@media print {
  .a11y-tools, .nhsuk-header__navigation, .rl-sidebar { display: none; }
  .rl-print-only { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

.nhsuk-header__service-name { max-width: 22ch; }
@media (max-width: 640px) {
  .nhsuk-header__service-name { font-size: 1rem; }
  .rl-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .rl-facts dd { margin-bottom: 10px; }
}

/* current section in the primary nav, and the overflow "More" button */
.nhsuk-header__navigation-item--current .nhsuk-header__navigation-link {
  box-shadow: inset 0 -4px 0 #fff; font-weight: 700;
}
.nhsuk-header__menu-toggle { visibility: hidden; }
.nhsuk-header__menu-toggle.nhsuk-header__menu-toggle--visible { visibility: visible; }
.nhsuk-header__menu-toggle svg { margin-left: 4px; }