/* Add smooth scroll */
html {
    scroll-behavior: smooth;
}

/* NHS width container is normally 960px with 16px margin - css rules below to change width and padding applied */

/* Override NHS body width and add padding left and right */
.nhsuk-width-container {
  max-width: 1100px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Remove extra padding on small laptop size down */
@media (max-width: 1023px) {
  .nhsuk-width-container {
    padding-left: 0!important;
    padding-right: 0 !important;
  }
}

/* Add some extra breathing room to nhs footer */

.nhsuk-footer {
    padding-top: 50px !important; /* Increase top and bottom padding on NHS footer */
    padding-bottom: 50px !important;
    margin-top: 10px !important; /* Breathing room to content above footer */
}

/* Blockquote */
blockquote {
      border-left: 8px solid #005EB8; /* NHS blue */
      padding-left: 1.25rem;
      padding-top: 1.3rem;
      padding-bottom: 0.35rem;
      margin-left: 0;
      margin-bottom: 40px;
}

/* Skip Nav keyboard link */
.pnav-skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
  padding: 8px 16px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #000 !important;  /* black text */
  background: #ffffff;
  text-decoration: underline;
}

.pnav-skip-link:focus {
  top: 15px;
  left: 15px;
  outline: none;
  color: #000 !important;   /* focused text */
  background: #ffeb3b;   /* yellow focus background */
/* No bottom black border required - receives this from NHS frontend css */
  text-decoration: none;
}

/*==== Fix layout and colour issues with clickable card with chevron ====*/

/* Give the content area a positioning context */
.nhsuk-card--clickable .nhsuk-card__content {
  position: relative;
}

/* Reserve space on the right for the chevron, regardless of the
   parent's own padding rules */
.nhsuk-card--clickable .nhsuk-card__heading,
.nhsuk-card--clickable .nhsuk-card__description {
  max-width: calc(100% - 50px);
  box-sizing: border-box;
}
/* Pull the chevron out of normal flow, dock it right, center it vertically */
.nhsuk-card--clickable .nhsuk-icon--chevron-right-circle {
  position: absolute;
  top: 50%;
  right: 25px; /* breathing space from the card's edge */
  transform: translateY(-50%);
  fill: #005eb8;
  width: 32px;
  height: 32px;
  min-width: 32px; /* belt and braces against shrink rules */
  flex-shrink: 0; /* harmless if not in a flex context, protects it if it ever is */
}

/* On hover/focus, chevron turns NHS dark pink to match the link */
.nhsuk-card--clickable:hover .nhsuk-icon--chevron-right-circle,
.nhsuk-card--clickable .nhsuk-card__link:focus ~ .nhsuk-icon--chevron-right-circle {
  fill: #7c2855;
}

/*==== Staff Biography Card ====*/
.nhsuk-card--staff .nhsuk-card__content {
  text-align: center;
}

.staff-photo {
  width: 195px;
  height: auto;
  display: block;
  border-radius: 50%;
  margin: 0 auto 16px auto; /* auto left/right centers it, keeps space below */
}


/*=== Action list modifying class ==*/
.action-list {
  margin-top: 30px; /* increase top margin */
}
.action-list .nhsuk-action-link {
  margin-bottom: 16px; /* reduce space between action list links */
}


/* Push blue hero overlay down on tablet and mobile */
@media (max-width: 40em) {
  .beta-hero-variant.nhsuk-hero--image-description {
    margin-bottom: 125px; /* Distance to content on page — adjust to taste */
  }
  .beta-hero-variant.nhsuk-hero--image-description .nhsuk-hero-content {
    top: 140px; /* positions blue overlay — adjust to taste */
  }
}

/*==== Scoped css / modifier to change height of hero image on different breakpoints - remove this style from hero if want to use NHS defaults ===*/
/* Default = desktop and up */
.modified-hero-height .nhsuk-hero__overlay {
  height: 375px;
  min-height: 375px;
}

/* Tablet down (below desktop breakpoint, 48.0625em) */
@media (max-width: 48em) {
  .modified-hero-height .nhsuk-hero__overlay {
    height: 275px;
    min-height: 275px;
  }
}

/* Mobile down (below tablet breakpoint, 40.0625em) */
@media (max-width: 40em) {
  .modified-hero-height .nhsuk-hero__overlay {
    height: 200px;
    min-height: 200px;
  }
}

/*==== Additional css to adapt the NHS 3 column grid to go from 3 to 2 to 1 at appropriate breakpoints====*/
/* Default = large desktop (68.75em / 11100px and up): 3 columns */
.nhsuk-card-group__item.modified-card-grid-item {
  width: 33.3333%;
}

/* Desktop breakpoint down (below 68.75em / 1100px): 2 columns */
@media (max-width: 68.75em) {
  .nhsuk-card-group__item.modified-card-grid-item {
    width: 50%;
  }
}

/* Below NHS desktop breakpoint (48em / below 769px): 1 column */
@media (max-width: 47.9999em) {
  .nhsuk-card-group__item.modified-card-grid-item {
    width: 100%;
  }
}

/* Horizontal Rule */
hr {
    border: 0;
    border-top: none;
    border-bottom: 2px solid #D8DDE0;
    height: 0;
    margin-top: 20px;
    margin-Bottom: 50px;
}

/* Increase line height on blue hero overlay h1 heading */
.nhsuk-hero__overlay h1 .app-main-heading {
    line-height: 1.3 !important;
}

/*==== Modify the size of text in chevron cards used as 'buttons' on health advice, medical servces, policies etc top level pages ====*/
.modified-card-heading .nhsuk-card__heading.nhsuk-heading-m {
    font-size: 20px !important;
}


/*=== CONNECTED RULES FOR SPACING BETWEEN ELEMENTS ===*/

/* Neutralise the action link's own built-in margin when wrapped in a p */
p > a.nhsuk-action-link {
  margin-bottom: 0;
}

/* Default: no extra space from the wrapping paragraph */
p:has(> a.nhsuk-action-link) {
  margin-bottom: 0;
}

/* Paragraphs before a heading get extra space (desktop-first default) */
p:has(+ h2),
p:has(+ h3),
p:has(+ h4),
p:has(> a.nhsuk-action-link):has(+ h2),
p:has(> a.nhsuk-action-link):has(+ h3),
p:has(> a.nhsuk-action-link):has(+ h4) {
  margin-bottom: 32px;
}

/* Below NHS's tablet breakpoint (767px / 47.9375em), increase to 40px */
@media (max-width: 47.9375em) {
  p:has(+ h2),
  p:has(+ h3),
  p:has(+ h4),
  p:has(> a.nhsuk-action-link):has(+ h2),
  p:has(> a.nhsuk-action-link):has(+ h3),
  p:has(> a.nhsuk-action-link):has(+ h4) {
    margin-bottom: 24px;
  }
}

/* Stop map on contact page squashing up onto content above it when collapses to single column view */
@media (max-width: 61.1875em) {
    .contact-map  {
        margin-top: 40px;
    }
}


/*=== Make the contact page map's height responsive ===*/
.contact-map iframe {
    display: block;
    width: 100%; /* default width for all devices */
    height: 650px; /* desktop height */
    border: 0;
}

@media (max-width: 61.1875em) {
    .contact-map iframe {
        height: 450px; /* tablet height */
    }
}

@media (max-width: 40.0525em) {
    .contact-map iframe {
        height: 350x; /* mobile height */
    }
}