/* ==========================================================================
   Mouldshop FOOTER — skin for Custom/MouldshopFooter.cshtml (operator, 2026-09-25: "hardcode
   footer", reference https://mouldshop.co.uk/).

   Values read off the live footer's own stylesheet (curl, 2026-09-25):
     band            theme-darkblue: #092B74, white text
     company name    #6cb2de, bold, 5px after the pin                (.bon-footer-data strong)
     contact icons   stroke #6CB2DE, 10px before the text           (.bon-footer-data a svg)
     column rules    1px rgba(255,255,255,.25) on every column but the last
     social discs    46px, white; path fill #6CB2DE on hover         (.bon-footer-socialmedia-icons)
     social / cards  15px apart                                      (padding-left: 15px)
     bottom bar      theme-lightgrey: #EFEFEF, navy text, small
   Container: the header's own - --ms-page-width + --ms-page-gutter - so the footer's edges line
   up with the header's at every step of the ladder.
   ========================================================================== */

:root {
  --ms-footer-bg:        #092B74;              /* live theme-darkblue */
  --ms-footer-fg:        #FFFFFF;
  --ms-footer-accent:    var(--ms-blue, #6CB2DE);
  --ms-footer-rule:      rgba(255, 255, 255, .25);
  --ms-footer-bar-bg:    #EFEFEF;              /* live theme-lightgrey */
  --ms-footer-bar-fg:    #092B74;
  --ms-footer-social:    46px;
  --ms-footer-gap:       15px;
}

.ms-footer {
  font-family: var(--ms-font-body);
}

.ms-footer-main {
  background: var(--ms-footer-bg);
  color: var(--ms-footer-fg);
}

.ms-footer-inner {
  max-width: var(--ms-page-width, 1200px);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--ms-page-gutter, 1.5rem);
}

.ms-footer-main > .ms-footer-inner {
  padding-block: 2rem 1rem;
}

.ms-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Links in the footer are white and carry no underline. The colour-scheme link rule
   (CLAUDE.md, DEC-0071) only bites inside a schemed row; the footer sits outside any row, but
   the selectors are scoped under .ms-footer-main so a plain `a` rule elsewhere cannot win. */
.ms-footer-main a {
  color: var(--ms-footer-fg);
  text-decoration: none;
}

.ms-footer-main a:hover {
  text-decoration: underline;
}

/* --- row 1: logo · social -------------------------------------------------------------- */
.ms-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .5rem 1rem;
}

.ms-footer-logo img {
  display: block;
  width: 196px;
  height: auto;
}

.ms-footer-social {
  display: flex;
  gap: var(--ms-footer-gap);
}

.ms-footer-social a {
  display: block;
  width: var(--ms-footer-social);
  height: var(--ms-footer-social);
  color: var(--ms-footer-fg);
  transition: color .2s ease;
}

.ms-footer-social a:hover,
.ms-footer-social a:focus-visible {
  color: var(--ms-footer-accent);
  text-decoration: none;
}

.ms-footer-social svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- rules ---------------------------------------------------------------------------- */
.ms-footer-rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ms-footer-rule);
  opacity: 1;
}

/* --- row 2: three columns split by thin rules ------------------------------------------ */
.ms-footer-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: 1.25rem;
  line-height: 1.5;
}

.ms-footer-col {
  padding-inline: 0 1.5rem;
}

.ms-footer-col:not(:last-child) {
  border-right: 1px solid var(--ms-footer-rule);
}

.ms-footer-col + .ms-footer-col {
  padding-inline-start: 1.5rem;
}

.ms-footer-address {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.ms-footer-company {
  display: inline-flex;
  align-items: center;
}

.ms-footer-company strong {
  color: var(--ms-footer-accent);
  padding-left: 5px;
}

.ms-footer-main .ms-footer-company:hover {
  text-decoration: none;
}

.ms-footer-main .ms-footer-company:hover strong {
  color: var(--ms-footer-fg);
}

.ms-footer-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-footer-contact ul {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.ms-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

.ms-footer-contact .ms-footer-ico {
  stroke: var(--ms-footer-accent);
}

.ms-footer-company-data {
  text-align: right;
}

.ms-footer-company-data p {
  margin: 0 0 .75rem;
}

.ms-footer-cards {
  display: flex;
  justify-content: flex-end;
  gap: var(--ms-footer-gap);
}

.ms-footer-cards img {
  display: block;
  width: 53px;
  height: 34px;
}

/* --- row 3: legal links ---------------------------------------------------------------- */
.ms-footer-legal {
  padding-block: 1rem .25rem;
}

.ms-footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1rem;
}

/* --- bottom bar ------------------------------------------------------------------------ */
.ms-footer-bar {
  background: var(--ms-footer-bar-bg);
  color: var(--ms-footer-bar-fg);
}

.ms-footer-bar p {
  margin: 0;
  padding-block: .9rem;
  text-align: center;
  font-size: .875rem;
}

/* --- phones and tablets: the three columns stack, centred; rules become horizontal ------ */
@media (max-width: 989.98px) {
  .ms-footer-top {
    flex-direction: column;
    gap: 1.25rem;
  }

  .ms-footer-data {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ms-footer-col,
  .ms-footer-col + .ms-footer-col {
    padding: 1rem 0;
  }

  .ms-footer-col:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--ms-footer-rule);
  }

  .ms-footer-address {
    align-items: center;
  }

  .ms-footer-company-data {
    text-align: center;
  }

  .ms-footer-cards {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .ms-footer-social {
    gap: 10px;
  }

  .ms-footer-social a {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-footer-social a { transition: none; }
}