/* ================================================================
   MOD: BOOKING — access-code-gated Google Calendar scheduling
   Requires: core.css tokens. Requires: booking.js.
   Lives inside the Contact section, after .contact-inner.
   HTML needed:

   <div class="booking-block reveal" id="booking">

     <div class="booking-banner">
       <span class="booking-banner-icon" aria-hidden="true">📞</span>
       <p>
         All appointments require a quick call or text to confirm before
         they're official — <a href="tel:+16147955383">call or text (614) 795-5383</a>
         first. Once we've talked, I'll give you the access code to unlock
         booking below.
       </p>
     </div>

     <!-- LOCKED STATE -->
     <div class="booking-locked" id="bookingLocked">
       <div class="lock-icon" aria-hidden="true">🔒</div>
       <h3>Booking Is By Access Code</h3>
       <p>Enter the code I gave you on the phone to open the calendar and pick a time.</p>
       <form class="gate-form" id="gateForm">
         <input type="text" id="gateCode" placeholder="Access code" autocomplete="off" aria-label="Access code" />
         <button type="submit">Unlock Booking</button>
       </form>
       <p class="gate-error" id="gateError" role="alert">That code didn't match — text me and I'll send the right one.</p>
     </div>

     <!-- UNLOCKED STATE -->
     <div class="booking-widget" id="bookingWidget">
       <div class="booking-widget-desktop" id="bookingWidgetDesktop"></div>
       <a class="booking-widget-mobile btn-primary" id="bookingWidgetMobile"
          href="[[CALENDAR_LINK]]" target="_blank" rel="noopener">
         Open Booking Calendar&nbsp;→
       </a>
       <p class="booking-widget-note">Pick any open slot — it'll be confirmed once we've connected by phone.</p>
     </div>

   </div>
   
================================================================ */

.booking-block {
  margin-top: 72px;
  background: var(--color-card);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--accent2-rgb), 0.15);
  box-shadow: var(--shadow-card);
  padding: 44px 40px;
  scroll-margin-top: 90px; /* clears the 64px fixed navbar + 26px breathing room */
}

.booking-banner {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(var(--accent2-rgb), 0.08);
  border: 1px solid rgba(var(--accent2-rgb), 0.25);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 32px;
}
.booking-banner-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.booking-banner p { min-width: 0; font-size: 0.92rem; color: rgba(var(--fg-rgb), 0.85); line-height: 1.65; }
.booking-banner a { color: var(--accent2); font-weight: 600; text-decoration: none; }
.booking-banner a:hover { text-decoration: underline; }

/* Locked state — shown until a valid access code is entered */
.booking-locked { text-align: center; padding: 32px 16px; max-width: 420px; margin: 0 auto; }
.booking-locked .lock-icon {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--accent2-rgb), 0.1);
  border: 1px solid rgba(var(--accent2-rgb), 0.3); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto 18px;
}
.booking-locked h3 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-color); margin-bottom: 10px; }
.booking-locked p { font-size: 0.88rem; color: rgba(var(--fg-rgb), 0.55); line-height: 1.7; margin-bottom: 22px; }

.gate-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gate-form input {
  flex: 1; min-width: 180px; background: rgba(var(--fg-rgb), 0.06); border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: var(--radius-sm); padding: 12px 16px; color: var(--text-color); font-family: var(--font-body);
  font-size: 1rem; outline: none; text-align: center; letter-spacing: 0.05em;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gate-form input:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px var(--accent2-glow); }
.gate-form button {
  padding: 12px 24px; background: var(--accent1); color: var(--paper); border: none;
  border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background var(--transition), transform var(--transition);
}
.gate-form button:hover { background: var(--accent1-dark); transform: translateY(-1px); }

.gate-error {
  display: none; margin-top: 14px; font-size: 0.82rem; color: #e8a4a4;
  background: rgba(220, 80, 80, 0.1); border: 1px solid rgba(220, 80, 80, 0.25);
  border-radius: var(--radius-sm); padding: 10px 14px;
}

/* Unlocked state — Google Calendar appointment scheduling button renders here.
   Desktop shows the popup button widget; phones show a plain link instead
   (the embedded widget doesn't behave well on small screens). Toggled by
   width to match the matchMedia guard in booking.js. */
.booking-widget { display: none; text-align: center; padding: 12px 0 4px; }
.booking-widget-mobile { display: none; white-space: nowrap; padding: 14px clamp(20px, 6vw, 36px); }
.booking-widget-note { font-size: 0.8rem; color: rgba(var(--fg-rgb), 0.4); margin-top: 18px; }

@media (max-width: 680px) {
  .booking-widget-mobile { display: inline-block; }
}

@media (max-width: 900px) {
  .booking-block { padding: 32px 24px; }
}

@media (max-width: 680px) {
  .gate-form { flex-direction: column; }
}

@media (max-width: 380px) {
  .booking-block { padding: 24px 16px; }
  .booking-locked { padding: 24px 8px; }
  .gate-form input { min-width: 0; width: 100%; }
  .gate-form button { width: 100%; }
}