@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   FOOTER.CSS — edge-to-edge footer.
   Address far-left with the directions pill beneath it,
   wordmark centred with the tagline, links far-right.
══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════
   FOOTER — container-fluid, edge-to-edge
   Links far-left | Logo center | Address far-right
   Tagline center-bottom | Get directions far-right
════════════════════════════════════════ */
footer{background:var(--color-bg);padding:3.5rem 0 2rem}
.ft-fluid{padding:0 2rem}
/* links */
/* DS: footer font-display · color-dark · hover color-pink */
.ft-links .ft-label{color: var(--color-muted-purple);font-family:var(--font-display);text-transform:uppercase;text-align: right;margin-bottom:.5rem;display:block}
.ft-links a{display:block;font-family: var(--font-display);letter-spacing: 0;text-transform:uppercase;text-align: right;color:var(--color-dark);text-decoration:none;margin-bottom:.38rem;transition:color .3s}
.ft-links a:hover{color:var(--color-pink)}
/* logo */
.ft-logo-img{width: 100%;max-width: 360px;display: inline-block;}
.ft-logo-img svg{width:100%;height:auto}
/* tagline below logo */
/* DS: tagline font-display · color-dark · BANDRA in color-pink */
.ft-tagline{color: var(--color-dark);font-family:var(--font-display);text-transform:uppercase;margin-top: 1rem;text-align:center}
.ft-tagline .pink{color:var(--color-pink)}
/* DS: address font-sans · color-muted-purple */
	
.ft-location{height: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;}
.ft-address{color: var(--color-body-text);line-height: 1.5;}

/* ── INNER-PAGE FOOTER ──
   Same skeleton, with the LINKS label visible and the address
   column spaced so the pill sits at the bottom. */
.ft-links{text-align:right}
.ft-links .ft-label{color:var(--color-black);margin-bottom:.55rem;font-size:.95rem}
.ft-links a{font-size:.95rem}
.ft-tagline{color:var(--color-black);font-size:1.05rem}
.ft-logo-img img{width:100%;height:auto;object-fit:contain}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   Desktop keeps the three-column layout: address left,
   wordmark centre, links right.

   Below 991px the row stacks and the order is rebuilt with
   flex `order` so the reading order becomes:

       1. wordmark
       2. tagline           (already inside the wordmark column)
       3. address
       4. Get directions
       5. social links      inline, centred, label hidden

   Nothing is duplicated in the markup — only reordered.
══════════════════════════════════════════════════════════ */
@media(max-width:991px){
  footer{padding:3.5rem 0 2.5rem}
  .ft-fluid{padding:0 1.25rem}

  .row{flex-direction:column}
  .ft-col{width:100%;max-width:100%;flex:0 0 auto;text-align:center}
  .ft-col-logo   {order:1}
  .ft-col-address{order:2;margin-top:2.25rem}
  .ft-col-links  {order:3;margin-top:2rem}

  /* wordmark + tagline */
  .ft-logo-img{max-width:min(300px,72vw)}
  .ft-tagline{margin-top:1rem}

  /* address stacked above the pill, both centred */
  .ft-location{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:1.5rem;
    height:auto;
  }
  .ft-address{text-align:center}

  /* social links inline; the "Links" heading is desktop-only */
  .ft-links{text-align:center}
  .ft-links .ft-label{display:none}
  .ft-links a{
    display:inline-block;
    margin:0 .55rem;
    padding:.15rem 0;
  }
}

@media(max-width:400px){
  .ft-links a{margin:0 .35rem;font-size:.85rem}
}

/* ══════════════════════════════════════════════════════════
   B&F CREDITS — sub-footer
   The flip logo is the standard credits block. Two changes
   from the stock version, because this footer sits on a light
   background rather than a dark one:
     · --color-05 does not exist in this project, so the text
       uses --color-body-text, matching the address above it.
     · the #424242 divider would read as a hard black line on
       lavender, so it uses the --rule hairline instead.
   The stock `.text-muted{color:#fff}` is left out on purpose:
   it overrides a Bootstrap utility globally and would make
   any muted text invisible on these pages.
══════════════════════════════════════════════════════════ */
footer .sub-footer{
  border-top:1px solid var(--rule);
  margin-top:3rem;
  padding:1.5rem 0 .25rem;
}
footer .sub-footer p{
  color:var(--color-body-text);
  font-size:14px;font-weight:500;margin-bottom:0;
}
footer .sub-footer,
footer .sub-footer li,
footer .sub-footer a{
  color:var(--color-body-text);
  text-decoration:none;
  position:relative;z-index:9;
}

/* ── flip logo ── */
.flip-container2{perspective:1000px}
.flip-container2,.front2,.back2{position:relative;top:0;float:left}
.flipper{
  transition:.6s;
  transform-style:preserve-3d;
  position:relative;
  width:30px;height:30px;
}
.front2,.back2{
  backface-visibility:hidden;
  transition:.6s;
  transform-style:preserve-3d;
  position:absolute;top:0;right:0;
}
.front2{transform:rotateY(0deg);z-index:2}
.back2{transform:rotateY(-180deg)}
.flip-container2:hover .front2,.flip-container2.hover .front2{transform:rotateY(180deg)}
.flip-container2:hover .back2, .flip-container2.hover .back2 {transform:rotateY(0deg)}
.front2 img,.back2 img{width:30px;height:30px;object-fit:contain;display:block}

@media(max-width:767px){
  footer .sub-footer{margin-top:2.25rem;padding-top:1.25rem;text-align:center}
  footer .sub-footer .row{gap:.9rem}
  /* the flip logo floats, so it needs centring by its own box */
  .flip-container2{float:none;display:flex;justify-content:center}
  .flip-container2,.front2,.back2{float:none}
  .flipper{margin:0 auto}
}
@media(prefers-reduced-motion:reduce){
  .flipper,.front2,.back2{transition:none}
}