<div class="bhs-page">
  <main class="bhs-content"><p>&#8593; Page content above the footer</p></main>
  <footer class="bhs">
    <div class="bhs-inner">
      <div class="bhs-status-card">
        <div class="bhs-status-row">
          <span class="bhs-dot" id="bhsDot"></span>
          <b id="bhsLabel">Checking hours...</b>
        </div>
        <p class="bhs-sub" id="bhsSub">&nbsp;</p>
        <p class="bhs-local" id="bhsLocal">&nbsp;</p>
      </div>

      <table class="bhs-table" id="bhsTable">
        <tbody>
          <tr data-day="0"><td>Sunday</td><td>Closed</td></tr>
          <tr data-day="1"><td>Monday</td><td>9:00 AM &ndash; 6:00 PM</td></tr>
          <tr data-day="2"><td>Tuesday</td><td>9:00 AM &ndash; 6:00 PM</td></tr>
          <tr data-day="3"><td>Wednesday</td><td>9:00 AM &ndash; 6:00 PM</td></tr>
          <tr data-day="4"><td>Thursday</td><td>9:00 AM &ndash; 6:00 PM</td></tr>
          <tr data-day="5"><td>Friday</td><td>9:00 AM &ndash; 8:00 PM</td></tr>
          <tr data-day="6"><td>Saturday</td><td>10:00 AM &ndash; 4:00 PM</td></tr>
        </tbody>
      </table>

      <div class="bhs-bottom">
        <span>&copy; 2026 Harlow &amp; Co.</span>
        <span>123 Market Street, Austin, TX</span>
      </div>
    </div>
  </footer>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#fafaf9}
.bhs-page{min-height:100vh;display:flex;flex-direction:column}
.bhs-content{flex:1;display:flex;align-items:center;justify-content:center;color:#a8a29e;font-size:13px;padding:50px 20px}

.bhs{background:#fff;border-top:1px solid #e7e5e4}
.bhs-inner{max-width:640px;margin:0 auto;padding:36px 24px 28px}

.bhs-status-card{background:#f5f5f4;border-radius:14px;padding:18px 20px;margin-bottom:18px}
.bhs-status-row{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.bhs-dot{width:10px;height:10px;border-radius:50%;background:#a8a29e;flex-shrink:0;transition:background .2s}
.bhs-dot.open{background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:bhsPulse 2s infinite}
.bhs-dot.closed{background:#dc2626}
@keyframes bhsPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.bhs-status-row b{font-size:15px;color:#1c1917}
.bhs-sub{font-size:12.5px;color:#78716c;margin-left:19px}
.bhs-local{font-size:11px;color:#a8a29e;margin-left:19px;margin-top:4px}

.bhs-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:20px}
.bhs-table td{padding:7px 4px;color:#57534e;border-bottom:1px solid #f5f5f4}
.bhs-table td:last-child{text-align:right;font-weight:600;color:#292524}
.bhs-table tr.bhs-today td{color:#059669;font-weight:800}
.bhs-table tr.bhs-today td:first-child::before{content:'\25CF';font-size:6px;margin-right:6px;vertical-align:middle}

.bhs-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:11.5px;color:#a8a29e;padding-top:14px;border-top:1px solid #f5f5f4}

@media (max-width:480px){ .bhs-bottom{flex-direction:column} }

var hours = {
  0: null,
  1: [9, 18],
  2: [9, 18],
  3: [9, 18],
  4: [9, 18],
  5: [9, 20],
  6: [10, 16]
};
var dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

var dot = document.getElementById('bhsDot');
var label = document.getElementById('bhsLabel');
var sub = document.getElementById('bhsSub');
var localEl = document.getElementById('bhsLocal');

function fmtHour(h) {
  var period = h >= 12 ? 'PM' : 'AM';
  var display = h % 12 === 0 ? 12 : h % 12;
  return display + ':00 ' + period;
}

function update() {
  var now = new Date();
  var day = now.getDay();
  var todayHours = hours[day];
  var isOpen = false;

  if (todayHours) {
    var h = now.getHours() + now.getMinutes() / 60;
    isOpen = h >= todayHours[0] && h < todayHours[1];
  }

  dot.className = 'bhs-dot ' + (isOpen ? 'open' : 'closed');

  if (isOpen) {
    label.textContent = 'Open now';
    sub.textContent = 'Closes today at ' + fmtHour(todayHours[1]);
  } else {
    label.textContent = 'Closed now';
    var nextDay = day;
    var hop = 0;
    var next = null;
    while (hop < 8) {
      nextDay = (nextDay + 1) % 7;
      hop++;
      if (hours[nextDay]) { next = { day: nextDay, open: hours[nextDay][0] }; break; }
    }
    if (next) {
      var when = next.day === (day + 1) % 7 ? 'tomorrow' : dayNames[next.day];
      sub.textContent = 'Opens ' + when + ' at ' + fmtHour(next.open);
    } else {
      sub.textContent = 'See hours below';
    }
  }

  localEl.textContent = 'Local time: ' + now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

  document.querySelectorAll('.bhs-table tr').forEach(function (row) {
    row.classList.toggle('bhs-today', Number(row.dataset.day) === day);
  });
}

update();
setInterval(update, 30000);