/* === SMS HOME HERO (logo background + live CQC badge) — remove this file to disable === */
/* Logo: a genuine CSS background directly on #content — this is what
   actually worked (confirmed visible). A positioned ::before with z-index:-1
   was tried for the opacity and re-broke it: a positioned/negative-z-index
   layer is subject to the same stacking fight as any other element, and
   <main> (spanning nearly all of #content) covered it again. An element's
   OWN background, by contrast, is always painted beneath its children by
   definition — no stacking context involved, nothing to fight. To fake 50%
   opacity without leaving that safe path, a semi-transparent white layer is
   stacked into the same background-image list, on top of the photo. */
.page-id-10 #content{
  position:relative; /* containing block for the overlaid badge below */
  background-image:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
    url("../images/SM_photo_Apr22.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%; /* stretch to fill, not preserve aspect ratio */
}

/* "Latest News" post-grid — tint the section's own backdrop only, via
   background-color alpha, so the hero image shows through the gaps while
   the article cards on top stay fully opaque (unlike opacity, which fades
   an element's children along with it). .sms-news-heading is added by
   sms-home-hero.js to the "Latest News" <h2> — it isn't otherwise
   selectable, since it shares its classes with the other section headings
   (Quick Links, Practice info). */
.page-id-10 .uagb-block-223cf3db,
.page-id-10 .sms-news-heading{ 
	background-color: rgba(255,255,255,.75);
	padding-bottom: 20px;
    margin-bottom: 0;
}

/* #primary and article are children of #content with their own opaque
   backgrounds — as children, they paint over #content's background-image
   wherever they cover it. Made transparent so the image actually shows
   through, rather than fighting z-index like before. */
.page-id-10 #primary{ background:transparent; }
.page-id-10 article{ background-color:transparent !important; }

/* Best-effort attempt at the white strip reported just below the header —
   couldn't pin down a definitive cause by reading the theme CSS (checked
   #content, main.nhsuk-main-wrapper, .nhsuk-header and body for margin/
   padding, and sampled the image's own top pixels to rule out a baked-in
   border). Zeroing the likeliest remaining candidates as a guess; flag it
   back if this doesn't clear it and it'll need inspecting live in DevTools. */
.page-id-10 body{ margin:0; }
.page-id-10 main.nhsuk-main-wrapper{ margin-top:0; }
.page-id-10 .entry-header{ margin:0; padding:0; }

/* The shortcode still renders a foreground <img> for the logo (kept in
   functions.php so the file swap note there still holds) — hidden here since
   the background-image above replaces it visually. */
.sms-hero__logo{ display:none; }

/* CQC badge — moved off position:fixed (floating, detached from the page)
   onto position:absolute against #content, the same container that carries
   the background image, so it's overlaid on it and scrolls with the page
   rather than floating independently. Positive z-index here is fine — this
   is a normal foreground overlay, not trying to hide behind anything, so
   none of the earlier stacking fights apply. */
.sms-hero__cqc{
  display:flex;
  position:absolute;
  top:20px;
  right:24px;
  z-index:10;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-align:center;
  background:#fff;
  padding:.75rem 1rem;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.sms-hero__cqc-logo{ max-width:140px; width:60%; height:auto; }

.sms-cqc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:130px;
  padding:.5rem 1.1rem;
  border-radius:12px;
  background:#3d7d25;   /* default; JS sets the live colour */
  color:#fff;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.2;
}
.sms-cqc-badge.is-outstanding{ background:#00703c; }
.sms-cqc-badge.is-good{ background:#3d7d25; } /* darkened from #4c9c2e: original gave white text only 3.4:1 contrast, fails WCAG AA 4.5:1 */
.sms-cqc-badge.is-requires-improvement{ background:#a85906; } /* darkened from #d97706: original gave white text only 3.2:1 contrast, fails WCAG AA 4.5:1 */
.sms-cqc-badge.is-inadequate{ background:#d5281b; }
.sms-cqc-badge.is-unknown{ background:#6b7280; }

@media (max-width:782px){
  .sms-hero__cqc{ top:auto; bottom:16px; right:16px; }
}
/* === END SMS HOME HERO === */