/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* FOOTER + STICKY BOOK BAR */

/* ============================================================
   14. FOOTER
   ============================================================ */
.footer { padding-bottom: 2.5em; }
.footer-box { position: relative; border: 1px solid var(--c-dark); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.footer-brand { padding: 2em; border-right: 1px solid var(--c-dark); display: flex; flex-direction: column; justify-content: space-between; gap: 4em; }
.footer-logo { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 1.5em; line-height: 1; letter-spacing: -.04em; }
.footer-links { padding: 2em; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-col); }
.footer-col-head { margin-bottom: 1.75em; }
.footer-list { display: flex; flex-direction: column; gap: .6em; }
.footer-list a { display: flex; align-items: center; gap: .4em; }
@media (max-width: 991px) { .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2em; } }
@media (max-width: 767px) {
  .footer-box { grid-template-columns: 1fr; }
  .footer-brand { border-right: 0; border-bottom: 1px solid var(--c-dark); gap: 2em; }
  .footer-links { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .footer-col { border-bottom: 1px solid rgba(0,0,0,.2); }
  .footer-col-head { margin: 0; display: flex; justify-content: space-between; width: 100%; padding: 1em 2em; }
  .footer-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1); }
  .footer-body > * { min-height: 0; overflow: hidden; }
  [data-accordion-status="active"] .footer-body { grid-template-rows: 1fr; }
  .footer-list { padding: 0 2em 1.25em; }
}
.acc-icon { position: relative; width: .7em; height: .7em; flex: none; display: none; }
.acc-icon span { position: absolute; inset: 0; margin: auto; background: currentColor; }
.acc-icon .h { height: 1px; }
.acc-icon .v { width: 1px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
[data-accordion-status="active"] .acc-icon .v { transform: rotate(90deg); }
@media (max-width: 767px) { .acc-icon { display: block; } }

/* Sticky mobile book bar: the one thing a phone visitor needs.
   Inset from all three edges rather than welded to them. A full-bleed
   strip reads as system chrome (a cookie notice, an alert); the gap is
   what makes the same rectangle read as an object you can press. */
.book-bar {
  position: fixed; z-index: 10;
  left: var(--pad-global);
  right: var(--pad-global);
  /* env() keeps it clear of the iPhone home indicator. Falls back to 0
     on everything else. */
  bottom: calc(1em + env(safe-area-inset-bottom, 0px));

  display: none;                       /* flipped to flex in the query below */
  align-items: center; justify-content: center; gap: .6em;

  background:  #0400f8;
  padding: 1.15em 1.25em;
  font-size: var(--t-tag); letter-spacing: .08em; line-height: 1;
  text-align: center;

  /* Elevation. Buttons sit above the page, bars sit flush with it. */
  box-shadow: 0 .5em 1.5em rgba(0, 0, 0, .28);

  transition: transform .18s cubic-bezier(.16, 1, .3, 1),
              box-shadow .18s cubic-bezier(.16, 1, .3, 1);
}

/* Matches the arrow used on every other link in the design. */
.book-bar::after { content: '\21B3'; }

/* Press state. On a touch screen this is the only feedback the visitor
   gets that the thing responded, so it matters more than hover does. */
.book-bar:active {
  transform: translateY(2px) scale(.99);
  box-shadow: 0 .25em .75em rgba(0, 0, 0, .3);
}

@media (max-width: 767px) {
  .book-bar { display: flex; }
  /* Bar now floats higher, so the footer needs more clearance. */
  .footer { padding-bottom: 6.5em; }
}

.book-bar,
.book-bar * {
  color: #fff;
}

/* Studio credit. A thin rule under the footer box, which is where a build
   credit belongs: findable by anyone who looks, invisible to anyone who
   doesn't, and not competing with the client's own footer content. */
.footer-credit {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1em; flex-wrap: wrap;
  margin-top: 1.25em; padding-top: 1.25em;
  border-top: 1px solid rgba(0, 0, 0, .2);
}

.footer-credit-link {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--c-mute);
  transition: color .3s ease;
}
.footer-credit-link:hover,
.footer-credit-link:focus-visible { color: var(--c-brand); }

/* Display face at tag size, so the studio name reads as a name and not as
   another line of small print. */
.footer-credit-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-tag); letter-spacing: .02em;
}

@media (max-width: 767px) {
  .footer-credit { flex-direction: column; align-items: flex-start; gap: .6em; }
  .footer-credit-link { min-height: 2.75em; }   /* keeps the tap target */
}