/* =====================================================================
   Sitewide footer - V4
   ---------------------------------------------------------------------
   Every selector in this file is scoped under `.dmw-footer` or
   `.dmw-footer-shell`, the two root classes on
   resources/views/partials/footer.blade.php. Nothing here may reach any
   other part of a page: this footer renders on every URL of the site.

   Hand-written on purpose, for the same reason as vm-v4.css. The public
   site's Tailwind config overrides `gray` and `primary` wholesale and
   there is no guarantee an arbitrary utility survived the content scan,
   so nothing here depends on one.

   No font-family is declared anywhere: the footer inherits Open Sans from
   <body class="font-open-sans">, set in layouts/base.blade.php.

   Values are transcribed from the V4 prototype's inline styles
   ("Large Cheque Page v4.dc.html", the <footer> near the end of the file).
   The one deliberate deviation is the background. The prototype paints the
   footer #fff because its whole page shell is white; this footer renders on
   a site whose canvas is bg-gray-200 (#F1F1F1), so it stays transparent and
   inherits the page background rather than stamping a hard-edged white band
   onto every page. The prototype's #E3E3E3 hairline top border is kept as
   the divider.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Layout shell
   1080px outer container with clamp(14px, 3.5vw, 28px) side padding, which
   resolves to exactly the 1024px inner column the header menu occupies.
   Nothing in the footer may extend past it.
   ------------------------------------------------------------------ */
.dmw-footer-shell {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(14px, 3.5vw, 28px);
    padding-right: clamp(14px, 3.5vw, 28px);
}

.dmw-footer {
    border-top: 1px solid #E3E3E3;
    margin: clamp(26px, 3.4vw, 40px) 0 0;
    padding: clamp(24px, 3vw, 34px) 0 clamp(22px, 2.6vw, 30px);
    text-align: center;
    color: #1A1A1A;
}

/* --- sCard intro ---------------------------------------------------- */
.dmw-footer__intro {
    margin: 0 auto clamp(18px, 2.4vw, 28px);
    max-width: 70ch;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.7;
    color: #1A1A1A;
}

.dmw-footer__intro strong {
    font-weight: 700;
}

/* --- Office / QR / contact row -------------------------------------
   flex-wrap plus `min-width: 0` on the text columns is what keeps this
   from overflowing at 320px: the three items simply drop onto their own
   lines rather than forcing a scrollbar.
   ------------------------------------------------------------------ */
.dmw-footer__cols {
    display: flex;
    gap: clamp(28px, 7vw, 100px);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.dmw-footer__col {
    flex: 1 1 180px;
    min-width: 0;
    text-align: center;
}

.dmw-footer__label {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    color: #1A1A1A;
}

.dmw-footer__label--whatsapp {
    color: #25D366;
}

.dmw-footer__value {
    margin: 0;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.7;
    /* The prototype used #8A8A8A, but that is 3.45:1 on white and 3.06:1 on
       this site's canvas - under WCAG AA. #5C5C5C is the design system's own
       documented "Muted text" token and reaches 5.92:1 here. */
    color: #5C5C5C;
    overflow-wrap: break-word;
}

/* Declared after .dmw-footer__value so the modifier wins at equal specificity. */
.dmw-footer__value--spaced {
    margin: 0 0 18px;
}

/* Tailwind preflight sets `color: inherit` on anchors, so the phone links
   need their colour and hover restated rather than inherited. */
.dmw-footer__value a,
.dmw-footer__value a:hover {
    /* The prototype used #8A8A8A, but that is 3.45:1 on white and 3.06:1 on
       this site's canvas - under WCAG AA. #5C5C5C is the design system's own
       documented "Muted text" token and reaches 5.92:1 here. */
    color: #5C5C5C;
}

.dmw-footer__value a {
    text-decoration: none;
}

.dmw-footer__value a:hover {
    text-decoration: underline;
}

/* --- sCard QR ------------------------------------------------------- */
.dmw-footer__qr {
    flex: 0 0 auto;
    display: block;
    width: clamp(96px, 10vw, 118px);
    transition: opacity 150ms ease;
}

.dmw-footer__qr:hover {
    opacity: .85;
    text-decoration: none;
}

.dmw-footer__qr img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- copyright and legal row ---------------------------------------- */
.dmw-footer__copyright {
    margin: clamp(20px, 2.6vw, 30px) 0 5px;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.7;
    color: #5C5C5C;
}

.dmw-footer__legal {
    margin: 0;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.7;
    color: #5C5C5C;
}

.dmw-footer__legal a,
.dmw-footer__legal a:hover {
    color: #5C5C5C;
}

.dmw-footer__legal a {
    text-decoration: none;
}

.dmw-footer__legal a:hover {
    text-decoration: underline;
}

/* Keyboard focus ring: the prototype only styles hover, but every link in
   here must stay reachable and visible for keyboard users. */
.dmw-footer a:focus-visible {
    outline: 2px solid #4B7016;
    outline-offset: 2px;
    border-radius: 4px;
}
