/* Styles for the page shell: header, footer, call bar, cookie banner and the 404 page.
   Ported from the <style> blocks of the Astro components, without Astro scoping. */

/* ---- Header ---- */
.hdr {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--cyan);
  }

  .hdr__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
    padding-block: 0.5rem;
  }

  /* Pushes the menu, the phone button and the menu button to the right. */
  .hdr__logo {
    flex: none;
    display: block;
    margin-right: auto;
  }

  .hdr__logo img {
    width: clamp(170px, 8vw + 95px, 256px);
    height: auto;
  }

  .hdr__list {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 1.4vw, 1.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Links and the Services button share one look. */
  .hdr__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: clamp(0.9375rem, 0.7rem + 0.3vw, 1.125rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  /* The original turned links white on hover, which is unreadable on cyan.
     A navy underline gives the same feedback and keeps the contrast. */
  .hdr__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    height: 3px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .hdr__link:hover::after,
  .hdr__link[aria-current='page']::after,
  .hdr__link.is-current::after {
    transform: scaleX(1);
  }

  .hdr__home-icon {
    width: 1.3em;
    height: 1.3em;
  }

  .hdr__home-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hdr__contact {
    padding-inline: 1.25rem;
    font-size: clamp(0.95rem, 0.75rem + 0.3vw, 1.2rem);
    white-space: nowrap;
  }

  /* The phone number: a navy pill beside Contact Us. The site's usual dark
     button turns cyan on hover, which would vanish on this bar, so this one
     turns white instead. */
  .hdr__phone {
    padding-inline: 1.2rem;
    background: var(--navy);
    color: var(--white);
    font-size: clamp(0.95rem, 0.75rem + 0.3vw, 1.2rem);
    white-space: nowrap;
  }

  .hdr__phone:hover {
    background: var(--white);
    color: var(--navy);
  }

  .hdr__toggle,
  .hdr__dd-label,
  .hdr__bar-call {
    display: none;
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .hdr__bar-call {
      display: inline-flex;
    }
  }

  /* ---- Desktop: inline menu and the Services dropdown ---- */

  @media (min-width: 1024px) {
    /* The nav and the dropdown's list item fill the bar's height, so the panel
       can start exactly at the bar's bottom edge with no gap for the pointer
       to fall through. */
    .hdr__nav {
      display: flex;
      align-self: stretch;
    }

    .hdr__contact[aria-current='page'] {
      background: var(--navy);
      color: var(--white);
    }

    .hdr__dd {
      position: relative;
      display: flex;
      align-items: center;
      align-self: stretch;
    }

    .hdr__dd-caret {
      width: 0.85em;
      height: 0.85em;
      transition: transform 0.25s var(--ease);
    }

    .hdr__dd.is-open .hdr__dd-caret {
      transform: rotate(180deg);
    }

    .hdr__dd-panel {
      position: absolute;
      top: 100%;
      left: 50%;
      display: none;
      width: 27rem;
      /* Transparent bridge across the bar's bottom padding. */
      padding-top: 0.5rem;
      transform: translateX(-50%);
    }

    .hdr__dd.is-open .hdr__dd-panel {
      display: block;
    }

    .hdr__dd-list {
      --focus-ring: var(--cyan);
      display: grid;
      gap: 0.15rem;
      list-style: none;
      margin: 0;
      padding: 0.6rem;
      background: var(--navy);
      border-right: var(--edge-sm) solid var(--cyan);
      box-shadow: 0 18px 40px rgb(13 17 40 / 0.28);
    }

    .hdr__dd-list a {
      display: grid;
      grid-template-columns: 2.6rem 1fr;
      column-gap: 0.9rem;
      align-items: center;
      padding: 0.7rem 0.85rem;
      color: var(--white);
      text-decoration: none;
      transition: background-color 0.2s var(--ease);
    }

    .hdr__dd-list a:hover,
    .hdr__dd-list a:focus-visible {
      background: rgb(255 255 255 / 0.07);
    }

    .hdr__dd-icon {
      grid-row: span 2;
      width: 2.6rem;
      height: 2.6rem;
      color: var(--cyan);
    }

    .hdr__dd-name {
      font-weight: 700;
      line-height: 1.25;
    }

    .hdr__dd-hint {
      margin-top: 0.15rem;
      font-size: 0.85rem;
      line-height: 1.35;
      color: rgb(255 255 255 / 0.8);
    }

    .hdr__dd-list a:hover .hdr__dd-name,
    .hdr__dd-list a[aria-current='page'] .hdr__dd-name {
      color: var(--cyan);
    }
  }

  /* A short slide, deliberately without a fade: if the browser pauses
     animations (a background tab, a power saver), the panel must still show. */
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .hdr__dd.is-open .hdr__dd-list {
      animation: dd-in 0.2s var(--ease);
    }

    @keyframes dd-in {
      from {
        transform: translateY(-6px);
      }
    }
  }

  /* ---- Tablet and phone: the original's full-screen navy menu ---- */

  @media (max-width: 1023px) {
    .hdr__toggle {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 3rem;
      height: 3rem;
      margin-right: -0.5rem;
      padding: 0;
      border: 0;
      background: none;
      color: var(--navy);
      cursor: pointer;
    }

    .hdr__toggle svg {
      width: 2.1rem;
      height: 2.1rem;
    }

    .hdr__toggle-close {
      display: none;
    }

    .hdr__nav {
      --focus-ring: var(--cyan);
      position: fixed;
      inset: 0;
      z-index: 1;
      display: none;
      overflow-y: auto;
      padding: calc(var(--header-h) + 1rem) var(--gutter) 3rem;
      background: var(--navy);
    }

    .menu-open .hdr__nav {
      display: flex;
      align-items: center;
    }

    .menu-open .hdr__toggle {
      color: var(--cyan);
    }

    .menu-open .hdr__toggle-open {
      display: none;
    }

    .menu-open .hdr__toggle-close {
      display: block;
    }

    .hdr__list {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      width: 100%;
    }

    .hdr__link {
      font-size: clamp(1.4rem, 5vw, 1.75rem);
      color: var(--cyan);
      white-space: normal;
    }

    .hdr__home-label {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip: auto;
      margin-left: 0.6rem;
    }

    /* Services: a plain label with the pages listed under it, one tap away. */
    .hdr__dd-btn,
    .hdr__dd-icon,
    .hdr__dd-hint {
      display: none;
    }

    .hdr__dd-label {
      display: block;
      font-size: clamp(1.4rem, 5vw, 1.75rem);
      font-weight: 700;
      line-height: 1.2;
      color: var(--white);
    }

    .hdr__dd-list {
      display: grid;
      gap: 0.85rem;
      list-style: none;
      margin: 0.9rem 0 0;
      padding: 0.1rem 0 0.1rem 1rem;
      border-left: 3px solid var(--cyan);
    }

    .hdr__dd-list a {
      display: inline-block;
      font-size: clamp(1.1rem, 4vw, 1.3rem);
      font-weight: 700;
      line-height: 1.3;
      color: var(--cyan);
      text-decoration: none;
    }

    .hdr__dd-list a[aria-current='page'] {
      text-decoration: underline;
      text-decoration-thickness: 3px;
      text-underline-offset: 0.25em;
    }

    .hdr__contact {
      font-size: clamp(1.2rem, 4.5vw, 1.4rem);
    }

    /* Inside the navy menu the call button goes back to cyan. */
    .hdr__nav .hdr__phone {
      background: var(--cyan);
      color: var(--navy);
      font-size: clamp(1.2rem, 4.5vw, 1.4rem);
    }

    .hdr__nav .hdr__phone:hover {
      background: var(--white);
    }
  }

/* ---- Footer ---- */
.ftr__main {
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
    font-size: 0.975rem;
  }

  .ftr__grid {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: 1fr;
  }

  @media (min-width: 700px) {
    .ftr__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .ftr__grid {
      grid-template-columns: 1.45fr 1fr 1fr 1.1fr;
      gap: 2.5rem;
    }
  }

  .ftr__logo img {
    width: 220px;
    height: auto;
  }

  .ftr__blurb {
    max-width: 40ch;
    margin-top: 1.1rem;
  }

  .ftr__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1.25rem;
  }

  .ftr__social-label {
    margin: 0;
    font-weight: 700;
  }

  .ftr__social ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ftr__social a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    transition:
      background-color 0.3s var(--ease),
      color 0.3s var(--ease);
  }

  .ftr__social a:hover {
    background: var(--white);
    color: var(--navy);
  }

  .ftr__social svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .ftr__creds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
  }

  .ftr__creds img {
    width: auto;
  }

  /* A credential with no logo file yet shows its name instead. */
  .ftr__cred-name {
    display: block;
    max-width: 8rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .ftr__col h2 {
    margin-bottom: 0.9rem;
    font-size: 1.1rem;
  }

  .ftr__col-second {
    margin-top: 2rem;
  }

  .ftr__col ul {
    display: grid;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ftr__col a {
    display: inline-block;
    padding-block: 0.15rem;
    text-decoration: none;
  }

  .ftr__col a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .ftr__areas li {
    line-height: 1.5;
  }

  /* Only some areas have a page, so those few are marked as links. */
  .ftr__areas a {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
  }

  .ftr__postcodes {
    margin: 0.9rem 0 0;
    font-weight: 700;
  }

  .ftr__label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .ftr__label + .ftr__phone,
  .ftr__label + .ftr__mobile {
    margin-bottom: 0.75rem;
  }

  .ftr__phone {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .ftr__mobile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
  }

  .ftr__whatsapp {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
  }

  .ftr__whatsapp svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .ftr__email {
    font-weight: 700;
    word-break: break-word;
  }

  .ftr__meta {
    margin: 0.5rem 0 0;
  }

  .ftr__maps {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-weight: 700;
  }

  .ftr__maps svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  /* Legal bar */

  .ftr__legal {
    padding-block: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .ftr__legal-inner {
    display: grid;
    gap: 0.9rem 2rem;
  }

  @media (min-width: 1100px) {
    .ftr__legal-inner {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }

  .ftr__company {
    margin: 0;
    max-width: 90ch;
  }

  .ftr__credit {
    display: block;
    margin-top: 0.2rem;
  }

  .ftr__legal a,
  .ftr__cookies {
    color: var(--cyan);
    font-weight: 700;
    text-decoration: none;
  }

  .ftr__legal a:hover,
  .ftr__cookies:hover {
    color: var(--white);
    text-decoration: underline;
  }

  .ftr__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ftr__links a,
  .ftr__cookies {
    display: inline-block;
    padding-block: 0.3rem;
  }

  .ftr__cookies {
    padding-inline: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

/* ---- Call bar ---- */
.callbar {
    display: none;
  }

  @media (max-width: 767px) {
    .callbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: var(--z-callbar);
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-height: var(--callbar-h);
      padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
      background: var(--navy);
      border-top: 3px solid var(--cyan);
    }

    .callbar .btn {
      flex: 1 1 auto;
      min-height: 2.75rem;
      padding-inline: 0.9rem;
      font-size: 1rem;
      white-space: nowrap;
    }

    .callbar__call {
      flex-grow: 2;
    }
  }

/* ---- Cookie banner ---- */
.cc {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + var(--callbar-h, 0px));
    z-index: var(--z-cookie);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .cc[hidden] {
    display: none;
  }

  .cc__panel {
    pointer-events: auto;
    display: grid;
    gap: 1rem 2rem;
    width: 100%;
    max-width: 68rem;
    max-height: calc(100dvh - 2rem - var(--callbar-h, 0px));
    overflow-y: auto;
    padding: 1.4rem 1.5rem;
    background: var(--navy);
    color: var(--white);
    border-right: var(--edge-sm) solid var(--cyan);
    box-shadow: 0 18px 50px rgb(13 17 40 / 0.35);
  }

  @media (min-width: 900px) {
    .cc__panel {
      grid-template-columns: 1fr auto;
      align-items: center;
      padding: 1.6rem 2.25rem;
      border-right-width: var(--edge);
    }
  }

  .cc__title {
    margin-bottom: 0.35rem;
    font-size: 1.2rem;
  }

  .cc__body {
    margin-bottom: 0.35rem;
    max-width: 70ch;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .cc__more {
    margin: 0;
    font-size: 0.9rem;
  }

  .cc__more a {
    color: var(--cyan);
    font-weight: 700;
  }

  .cc__actions {
    display: grid;
    gap: 0.6rem;
  }

  @media (min-width: 480px) and (max-width: 899px) {
    .cc__actions {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    .cc__actions {
      min-width: 16rem;
    }
  }

  .cc__actions .btn {
    width: 100%;
    font-size: 1rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .cc__panel {
      animation: cc-in 0.45s var(--ease) both;
    }

    @keyframes cc-in {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
    }
  }

/* ---- 404 ---- */
.nf {
    background: var(--navy);
    color: var(--white);
  }

  .nf__panel {
    max-width: 853px;
    padding: 25px 20px;
    border-right: var(--edge-sm) solid var(--cyan);
  }

  @media (min-width: 768px) {
    .nf__panel {
      padding: 40px 50px;
      border-right-width: var(--edge);
    }
  }

  .nf__code {
    margin: 0 0 0.25rem;
    font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--cyan);
  }

  .nf__title {
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  }

  .nf__lead {
    max-width: 55ch;
  }

  .nf__links {
    margin: 1.5rem 0 2rem;
  }

  .nf__links a {
    color: var(--white);
    text-decoration-color: var(--cyan);
    text-decoration-thickness: 2px;
  }