<?php get_header(); ?>
<main class="pb-page" id="home">
  <div class="pb-artboard" aria-label="Phoenix Bites Landing Page">
    <img class="pb-design" src="<?php echo esc_url(get_template_directory_uri() . '/assets/phoenix-bites-page.jpeg'); ?>" alt="Phoenix Bites organic nutrient dense superfood bar landing page" />

    <!-- Section anchors matched to the attached design -->
    <span id="our-story" class="pb-section-anchor" style="top:26%;"></span>
    <span id="ingredients" class="pb-section-anchor" style="top:39%;"></span>
    <span id="benefits" class="pb-section-anchor" style="top:49%;"></span>
    <span id="impact" class="pb-section-anchor" style="top:68%;"></span>
    <span id="shop" class="pb-section-anchor" style="top:94%;"></span>

    <!-- Top navigation hotspots. Percent coordinates preserve links as image scales. -->
    <a class="pb-hotspot" href="#home" aria-label="Home" style="left:29.1%; top:1.2%; width:5.3%; height:2.3%;"></a>
    <a class="pb-hotspot" href="#our-story" aria-label="Our Story" style="left:36.0%; top:1.2%; width:9.6%; height:2.3%;"></a>
    <a class="pb-hotspot" href="#ingredients" aria-label="Ingredients" style="left:48.3%; top:1.2%; width:10.8%; height:2.3%;"></a>
    <a class="pb-hotspot" href="#benefits" aria-label="Benefits" style="left:61.0%; top:1.2%; width:8.2%; height:2.3%;"></a>
    <a class="pb-hotspot" href="#impact" aria-label="Impact" style="left:71.1%; top:1.2%; width:7.0%; height:2.3%;"></a>
    <a class="pb-hotspot" href="#shop" aria-label="Shop" style="left:80.0%; top:1.2%; width:6.0%; height:2.3%;"></a>
    <a class="pb-hotspot" href="https://sociatap.com/Phoenix/" target="_blank" rel="noopener" aria-label="Shop Now" style="left:88.0%; top:0.9%; width:10.0%; height:2.7%;"></a>

    <!-- Hero buttons -->
    <a class="pb-hotspot" href="https://sociatap.com/Phoenix/" target="_blank" rel="noopener" aria-label="Shop Now" style="left:5.8%; top:18.0%; width:13.5%; height:3.0%;"></a>
    <a class="pb-hotspot" href="#ingredients" aria-label="Learn More" style="left:21.0%; top:18.0%; width:14.0%; height:3.0%;"></a>

    <!-- Visible QR in hero, only linked; no second QR is added. -->
    <a class="pb-hotspot" href="https://sociatap.com/Phoenix/" target="_blank" rel="noopener" aria-label="Scan to learn more QR code" style="left:86.3%; top:21.4%; width:10.7%; height:7.5%;"></a>

    <!-- Impact button -->
    <a class="pb-hotspot" href="#impact" aria-label="Our Impact" style="left:36.4%; top:71.4%; width:12.0%; height:2.4%;"></a>

    <!-- Footer quick links and email area -->
    <a class="pb-hotspot" href="#home" aria-label="Footer Home" style="left:29.0%; top:94.0%; width:6.0%; height:1.2%;"></a>
    <a class="pb-hotspot" href="#our-story" aria-label="Footer Our Story" style="left:29.0%; top:95.2%; width:8.0%; height:1.2%;"></a>
    <a class="pb-hotspot" href="#ingredients" aria-label="Footer Ingredients" style="left:29.0%; top:96.4%; width:8.0%; height:1.2%;"></a>
    <a class="pb-hotspot" href="#benefits" aria-label="Footer Benefits" style="left:29.0%; top:97.6%; width:8.0%; height:1.2%;"></a>
    <a class="pb-hotspot" href="#impact" aria-label="Footer Impact" style="left:29.0%; top:98.8%; width:6.0%; height:1.0%;"></a>
    <a class="pb-hotspot" href="mailto:humblehandsorganics@yahoo.com?subject=Phoenix%20Bites%20Updates" aria-label="Subscribe by email" style="left:66.0%; top:96.15%; width:22.0%; height:2.1%;"></a>

    <!-- Footer QR exactly where shown -->
    <a class="pb-hotspot" href="https://sociatap.com/Phoenix/" target="_blank" rel="noopener" aria-label="Footer scan to learn more QR code" style="left:82.1%; top:93.3%; width:9.4%; height:5.7%;"></a>
  </div>
</main>
<?php get_footer(); ?>
/*
Theme Name: Phoenix Bites Working Landing Page
Theme URI: https://sociatap.com/Phoenix/
Author: Phoenix Bites
Description: Full-screen Phoenix Bites landing page theme with working overlay buttons and QR code link.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: Private
Text Domain: phoenix-bites-working
*/

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  background: #efe3ce !important;
}
body, button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
#wpadminbar ~ .pb-page { margin-top: 0; }
.pb-page {
  width: 100%;
  min-height: 100vh;
  background: #efe3ce;
  overflow-x: hidden;
}
.pb-artboard {
  position: relative;
  width: min(100vw, 768px);
  margin: 0 auto;
  line-height: 0;
  background: #efe3ce;
  box-shadow: 0 0 0 1px rgba(0,0,0,.02);
}
.pb-artboard img.pb-design {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}
.pb-hotspot {
  position: absolute;
  display: block;
  z-index: 20;
  text-decoration: none;
  background: rgba(255,255,255,0);
  border-radius: 8px;
}
.pb-hotspot:focus-visible {
  outline: 3px solid #d98232;
  outline-offset: 2px;
  background: rgba(217,130,50,.15);
}
.pb-section-anchor { position: absolute; width: 1px; height: 1px; left: 0; }
@media (min-width: 769px) {
  .pb-artboard { width: 768px; }
}
@media (max-width: 768px) {
  .pb-artboard { width: 100vw; }
}
