/* Site styles layered on top of nhsuk-frontend 8.3. */

:root {
  --nhs-blue: #005eb8;
  --nhs-dark-blue: #003087;
  --nhs-black: #212b32;
  --nhs-grey-1: #4c6272;
  --nhs-grey-4: #d8dde0;
  --nhs-grey-5: #f0f4f5;
  --nhs-red: #d5281b;
  --nhs-yellow: #ffeb3b;
}

/* ---------- Header ---------- */
/* Logo and practice name side by side, as on the original site. */
.nhsuk-header--organisation .nhsuk-header__link { display: flex; align-items: center; flex-wrap: wrap; }
.nhsuk-header--organisation .nhsuk-header__link .nhsuk-logo { flex: none; margin-right: 16px; }
.app-header__org { display: flex; flex-direction: column; }
.app-header__org .nhsuk-organisation-name { margin-top: 0; }
.nhsuk-header--white .nhsuk-organisation-descriptor { color: var(--nhs-blue); }
.app-header__navigation-item--current .nhsuk-header__navigation-link { box-shadow: inset 0 -4px 0 var(--nhs-blue); }
@media (min-width: 61.875em) {
  .nhsuk-header--white .app-header__navigation-item--current .nhsuk-header__navigation-link { box-shadow: inset 0 -4px 0 var(--nhs-blue); }
}

/* ---------- Cookie banner ---------- */
.app-cookie-banner { background: #fff; border-bottom: 1px solid var(--nhs-grey-4); padding: 24px 0 16px; box-shadow: 0 0 4px 0 rgba(33,43,50,.16); position: relative; z-index: 10; }
.app-cookie-banner--confirmation { background: var(--nhs-grey-5); padding: 16px 0; }
.app-cookie-banner__buttons { display: flex; flex-wrap: wrap; gap: 0 16px; }

/* ---------- Home page ---------- */
.app-main-wrapper--no-padding { padding-top: 0; padding-bottom: 0; }
.app-hero { background: linear-gradient(135deg, #dbe9f5 0%, var(--nhs-grey-5) 60%, #fff 100%); padding: 40px 0 24px; }

/* Welcome panel with contact details, beside the cards on desktop. */
.app-welcome { background: #fff; border-top: 8px solid var(--nhs-blue); padding: 24px; margin-bottom: 32px; box-shadow: 0 4px 0 var(--nhs-grey-4); }
.app-welcome h2 { margin-bottom: 8px; }
.app-welcome__lead { color: var(--nhs-grey-1); }
.app-welcome .nhsuk-button { margin-bottom: 16px; }
.app-welcome__details { margin: 0 0 16px; }
.app-welcome__details dt { font-weight: 600; margin-top: 12px; }
.app-welcome__details dd { margin: 0; }
.app-welcome__tel { font-size: 1.5rem; font-weight: 600; }
@media (min-width: 61.875em) {
  .app-hero__layout { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
  .app-hero__layout .nhsuk-card-group { margin: 0 -16px; }
  .app-hero__layout .nhsuk-card-group__item { width: 50%; }
}
.app-section { padding: 48px 0; background: #fff; }
.app-section--grey { background: var(--nhs-grey-5); }
.app-section > .nhsuk-width-container > :last-child { margin-bottom: 0; }

/* Blue clickable cards on the hero image. */
.nhs-blue .nhsuk-card { background: var(--nhs-blue); border: 0; }
.nhs-blue .nhsuk-card__link, .nhs-blue .nhsuk-card__link:visited, .nhs-blue .nhsuk-card__description { color: #fff; }
.nhs-blue .nhsuk-card--clickable:hover { background: var(--nhs-dark-blue); border: 0; }
.nhs-blue .nhsuk-card--clickable:hover .nhsuk-card__link { color: #fff; }
.nhs-blue .nhsuk-card__link:focus { color: var(--nhs-black); }

/* Two-column list of blue signage links ("Local and NHS services"). */
.app-list-signage { list-style: none; padding: 0; margin: 0 0 32px; }
.app-list-signage li { margin: 0 0 8px; }
.app-list-signage a { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--nhs-blue); color: #fff; text-decoration: none; }
.app-list-signage a:visited { color: #fff; }
.app-list-signage a:hover { background: var(--nhs-dark-blue); color: #fff; text-decoration: underline; }
.app-list-signage a:focus { background: var(--nhs-yellow); color: var(--nhs-black); box-shadow: 0 -2px var(--nhs-yellow), 0 4px var(--nhs-black); outline: 4px solid transparent; }
.app-list-signage .nhsuk-icon { width: 24px; height: 24px; flex: none; fill: #fff; order: 2; margin-left: 8px; }
.app-list-signage a:focus .nhsuk-icon { fill: var(--nhs-black); }
@media (min-width: 40.0625em) {
  .app-list-signage--two-columns { column-count: 2; column-gap: 32px; }
  .app-list-signage--two-columns li { break-inside: avoid; }
}

/* ---------- News ---------- */
.app-news-date { color: var(--nhs-grey-1); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.app-icon-calendar { width: 16px; height: 16px; fill: var(--nhs-grey-1); }
.app-news-item hr { margin: 24px 0; }

/* ---------- Content colour utilities carried over from the old editor ---------- */
.has-color-nhsuk-red-background-color { background: var(--nhs-red); color: #fff; padding: 16px 24px; }
.has-color-nhsuk-black-background-color { background: var(--nhs-black); color: #fff; padding: 16px 24px 16px 48px; }
.has-color-nhsuk-blue-background-color { background: var(--nhs-blue); color: #fff; padding: 16px 24px; }
.has-color-nhsuk-pale-grey-background-color, .has-color-nhsuk-grey-5-background-color { background: var(--nhs-grey-5); padding: 16px 24px; }
.has-color-nhsuk-yellow-background-color { background: var(--nhs-yellow); padding: 16px 24px; }
.has-color-nhsuk-white-background-color, .has-nhsuk-white-background-color { background: #fff; }
.has-color-nhsuk-white-color, .has-color-nhsuk-white-color a { color: #fff; }
.has-color-nhsuk-red-background-color + .has-color-nhsuk-black-background-color { margin-top: -16px; }
.has-small-font-size { font-size: 1rem; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

/* ---------- WordPress content blocks ---------- */
/* Long URLs and email addresses used as link text must wrap on small screens. */
.app-content { overflow-wrap: break-word; }
.app-content a, .nhsuk-card__description a { overflow-wrap: anywhere; }
.nhsuk-card { min-width: 0; }
.app-content img { max-width: 100%; height: auto; }
.app-content h2 img, .app-content h3 img { vertical-align: middle; margin-right: 4px; }
.wp-block-image { margin: 0 0 24px; }
.wp-block-image img { max-width: 100%; height: auto; }
.wp-block-image figcaption { font-size: 1rem; color: var(--nhs-grey-1); margin-top: 8px; }
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.alignright { float: right; margin: 0 0 16px 16px; }
.alignleft { float: left; margin: 0 16px 16px 0; }
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 24px; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 40em) { .wp-block-columns { flex-direction: column; gap: 0; } }
.wp-block-table { overflow-x: auto; margin: 0 0 24px; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border-bottom: 1px solid var(--nhs-grey-4); padding: 8px 16px 8px 0; text-align: left; vertical-align: top; }
.wp-block-quote { border-left: 8px solid var(--nhs-blue); margin: 0 0 24px; padding: 8px 0 8px 24px; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.app-content iframe { max-width: 100%; border: 0; }
.app-content .nhsuk-card-group { margin-bottom: 16px; }

/* ---------- Live open / closed status ---------- */
.app-open-status { font-size: 1.1875rem; margin-bottom: 16px; }
.app-open-status--open strong { color: #007f3b; }
.app-open-status--closed strong { color: var(--nhs-red); }

/* ---------- Partner services (Umbrella) ---------- */
.app-referral-panel { background: #fff; border-top: 8px solid var(--nhs-blue); box-shadow: 0 4px 0 var(--nhs-grey-4); padding: 24px; margin-bottom: 40px; }
.app-referral-panel h2 { margin-bottom: 8px; }
.app-referral-panel .nhsuk-button { font-size: 1.1875rem; }
.app-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; background: #fff; border-left: 8px solid var(--nhs-blue); box-shadow: 0 4px 0 var(--nhs-grey-4); padding: 24px; }
.app-promo img { width: 150px; height: auto; flex: none; }
.app-promo__body { flex: 1 1 320px; }
.app-promo__body > :last-child { margin-bottom: 0; }
.app-promo h2 { margin-bottom: 8px; }

/* ---------- Search ---------- */
.app-search-results { list-style: none; padding: 0; }
.app-search-results li { border-bottom: 1px solid var(--nhs-grey-4); padding: 16px 0; margin: 0; }
.app-search-results p { margin: 4px 0 0; color: var(--nhs-grey-1); }
.app-search-results mark { background: var(--nhs-yellow); color: inherit; }

/* ---------- Footer ---------- */
.app-footer { background: var(--nhs-grey-5); border-top: 4px solid var(--nhs-blue); padding: 32px 0 24px; font-size: 1rem; }
.app-footer a { color: var(--nhs-grey-1); }
.app-footer a:hover { color: var(--nhs-black); }
.app-footer p { font-size: 1rem; margin-bottom: 16px; }
.app-footer__grid { display: grid; grid-template-columns: 1fr; gap: 8px 32px; }
@media (min-width: 40.0625em) { .app-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 61.875em) { .app-footer__grid { grid-template-columns: 1fr 1fr 1fr 1.3fr; } }
.app-footer__list, .app-footer__legal { list-style: none; padding: 0; margin: 0 0 16px; }
.app-footer__list li { margin-bottom: 12px; }
.app-tel { font-weight: 600; }
.app-footer__nhs-badge { display: block; max-width: 100%; height: auto; margin-top: 16px; }
.app-cqc-widget { min-height: 24px; }
.app-footer__bottom { border-top: 1px solid var(--nhs-grey-4); margin-top: 16px; padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px; }
.app-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.app-footer__legal li { margin: 0; }
.app-footer .nhsuk-footer__copyright { margin: 0; color: var(--nhs-grey-1); }

@media print {
  .app-cookie-banner, .nhsuk-header__search, .nhsuk-navigation-container, .nhsuk-breadcrumb, .app-cqc-widget { display: none !important; }
}
