@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ===========================================================
   HiveBuddies — styles.css (UNIFIED FINAL)
   =========================================================== */

/* ---------- Base (light) ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #0f172a;
  background: #faf7ef;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration-thickness: .08em; }

/* ---------- Header (shared across all pages) ---------- */
.hb-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 78px;
  background-image: url('images/honeycomb-header-150.png');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 78px;
  border-bottom: 1px solid #e1c469;
  padding: 0 20px; margin: 0;
}

.hb-brand {
  margin-right: auto;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  font-size: 20px !important;      /* consistent brand size */
  line-height: 1.1;
}

.hb-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 22px;
}

.hb-nav a {
  display: inline-flex; align-items: center;
  font-weight: 800;
  color: #fff; text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  font-size: 18px !important;      /* consistent link size */
  line-height: 1.1;
}
/* ---------- Spacing tokens ---------- */
:root{
  --card-left-indent: 2rem;                    /* 1 tab from page edge */
  --card-gap: calc(var(--card-left-indent) / 2); /* 1/2 tab inside cards & nested gaps */
  --card-max-width: 50vw;                      /* cards no wider than half screen */
}

/* ---------- Card visuals (white, rounded, shadow) ---------- */
.card,
.hb-form,            /* removals form “card” */
.swarm-item {        /* removals photo tiles as “cards” */
  background: #ffffff !important;
  border: 1px solid #111827;
  border-radius: 14px;
  padding: var(--card-gap);                    /* TEXT 1/2 TAB FROM BORDER */
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Trim top/bottom so padding is the visual edge */
.card > :first-child,
.hb-form > :first-child,
.swarm-item > :first-child { margin-top: 0; }
.card > :last-child,
.hb-form > :last-child,
.swarm-item > :last-child { margin-bottom: 0; }

/* Headings inside cards */
.card > h1, .card > h2, .card > h3, .card > h4 {
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.25;
  margin: 0 0 10px;
}
.card h3 { font-size: 1rem; font-weight: 700; }
.card h4 { font-size: 0.95rem; font-weight: 700; }

/* ---------- Section spacing band (do NOT apply to .card) ---------- */
.section:not(.card) + .section:not(.card) {
  margin-top: 22px;
  background-image: linear-gradient(180deg, #f3ecdb 0%, rgba(243,236,219,0) 80%);
  background-repeat: no-repeat;
  background-size: 100% 22px;
  background-position: top left;
  border-top: 1px solid #e5dcc4;
}
.section.card { background: #ffffff !important; background-image: none !important; }

/* ===========================================================
   CARD ALIGNMENT — Left-justified, 1 tab indent, ≤ 50% screen
   =========================================================== */

/* Top-level cards (page-level sections) */
.card,
section.card,
.wrap.section.card,
body > section.card,
body > .wrap.section.card,
/* Live Bee sections that ARE cards (not nested) */
#pickup.card, #faq.card, #contact.card,
/* Removals: form + photo tiles treated like cards */
.hb-form, .swarm-item {
  margin-left: var(--card-left-indent) !important;  /* 1 tab from left */
  margin-right: auto !important;
  max-width: var(--card-max-width) !important;      /* ≤ 50vw */
  width: auto !important;
}

/* Cards inside a section (e.g., inner list under Live Bee #pre): 1/2-tab inset */
.wrap.section > .card {
  margin: var(--card-gap) !important;
  max-width: calc(100% - (var(--card-gap) * 2)) !important;
}

/* If a section adds its own left padding, neutralize it so the rules above control inset */
section.wrap.section { padding-left: 0 !important; }

/* Nested cards inside cards: keep 1/2-tab gap */
.card .card,
.card section.card,
section.card .card {
  margin: var(--card-gap) !important;
  max-width: calc(100% - (var(--card-gap) * 2)) !important;
  margin-left: var(--card-gap) !important;
  margin-right: var(--card-gap) !important;
}

/* ---------- Forms (reservation & removal unified) ---------- */
form[name="reservation"],
form[name="removal"],
form[name="removal-request"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid #111827;
  border-radius: 16px;
  padding: var(--card-gap);                     /* inner = 1/2 tab */
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  max-width: 100%;
}
form[name="reservation"] label,
form[name="removal"] label,
form[name="removal-request"] label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}
form[name="reservation"] input,
form[name="reservation"] textarea,
form[name="reservation"] select,
form[name="removal"] input,
form[name="removal"] textarea,
form[name="removal"] select,
form[name="removal-request"] input,
form[name="removal-request"] textarea,
form[name="removal-request"] select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #111827;
  border-radius: 16px;
  background: #fff;
  font-weight: 400;
}
form[name="reservation"] textarea,
form[name="removal"] textarea,
form[name="removal-request"] textarea { min-height: 180px; resize: vertical; }
form[name="reservation"] input:focus,
form[name="reservation"] textarea:focus,
form[name="reservation"] select:focus,
form[name="removal"] input:focus,
form[name="removal"] textarea:focus,
form[name="removal"] select:focus,
form[name="removal-request"] input:focus,
form[name="removal-request"] textarea:focus,
form[name="removal-request"] select:focus {
  outline: none; border-color: #0d5bd7; box-shadow: 0 0 0 3px rgba(13,91,215,.2);
}
form[name="reservation"] .actions,
form[name="removal"] .actions,
form[name="removal-request"] .actions { display: flex; align-items: center; gap: 12px; }
form[name="reservation"] button[type=submit],
form[name="removal"] button[type=submit],
form[name="removal-request"] button[type=submit] {
  padding: 14px 24px;
  border-radius: 28px;
  font-weight: 800;
  background: #1667e7; color: #fff; border: none;
  box-shadow: 0 10px 24px rgba(13,91,215,.25);
  cursor: pointer;
}
form[name="reservation"] button[type=submit]:hover,
form[name="removal"] button[type=submit]:hover,
form[name="removal-request"] button[type=submit]:hover { filter: brightness(1.05); }


/* ---------- Removals photo grid: exact 1-tab spacing ---------- */
.swarm-grid { gap: var(--card-left-indent) !important; }
.swarm-item { margin: 0 !important; border-radius: 16px; overflow: hidden; }
.swarm-item img { display: block; width: 100%; height: auto; border-radius: inherit; }

/* === Card stack spacing (vertical) === */
:root{
  --card-stack-gap: 16px; /* space between stacked cards */
}

/* Give every top-level card some breathing room */
.card { 
  margin-top: var(--card-stack-gap);
}

/* Keep nested cards tight (already handled, but restate intent) */
.card .card,
.card section.card,
section.card .card {
  /* existing rule in file controls nested margins */
}

/* Slightly larger gap from the hero block to the first card */
.lb-intro + .wrap.section.card {
  margin-top: calc(var(--card-stack-gap) + 6px) !important;
}

/* Ensure consecutive section cards also get the gap */
.wrap.section.card + .wrap.section.card {
  margin-top: var(--card-stack-gap) !important;
}


/* --- Extra breathing room between outer & inner card edges --- */

/* Any card nested directly inside another card */
.card > .card,
.card > section.card {
  /* bump in a bit more than the default 1/2-tab */
  margin-left: calc(var(--card-gap) + 8px) !important;
  margin-right: calc(var(--card-gap) + 8px) !important;
}

/* Reservation/contact form inside a card (so its border doesn't hug the outer border) */
.card > form[name="reservation"] {
  margin: var(--card-gap) !important;          /* 1/2-tab all around */
}

/* (Optional) If you want the bump applied to ANY nested card level */
.card .card {
  margin-left: calc(var(--card-gap) + 8px) !important;
  margin-right: calc(var(--card-gap) + 8px) !important;
}



/* Space after the last card on the page */
.wrap.section.card:last-of-type {
  margin-bottom: calc(var(--card-left-indent)); /* ~1 tab of breathing room */
}

/* (optional) Give the footer a little top padding so it never feels cramped */
footer { padding-top: 10px; }



/* --- Live Bee intro: white panel + tidy section spacing --- */

/* Make the text column a white panel */
.lb-intro .lb-copy{
  background: #fff;
  border: 1px solid #111827;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  /* a little inner breathing room beyond the inline padding */
  padding: calc(22px + 4px);
}

/* Space between headings/sections inside the white panel */
.lb-intro .lb-copy > * + h2,
.lb-intro .lb-copy > * + h3{
  margin-top: 18px;         /* gap before each new section */
}

/* Keep lists/paragraphs nicely spaced but tight */
.lb-intro .lb-copy p,
.lb-intro .lb-copy ul{
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Mobile: slightly lighter padding so it doesn’t feel cramped */
@media (max-width: 900px){
  .lb-intro .lb-copy{ padding: 18px; }
}


/* ===== Floating brand logo (shared across pages) ===== */
.brand-overlay{
  position:absolute;
  top:100px;
  left:20px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:60;
  pointer-events:none; /* don’t block clicks on header/links */
}
.brand-overlay img{
  width:140px;
  height:140px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.brand-overlay .brand-name{
  font-size:30px;
  font-weight:800;
  color:#0f172a;
  background:rgba(255,255,255,.78);
  padding:4px 10px;
  border-radius:10px;
  line-height:1;
}

@media (max-width:900px){
  .brand-overlay{ top:120px; left:12px; }
  .brand-overlay img{ width:96px; height:96px; }
  .brand-overlay .brand-name{ font-size:22px; }
}


/* Push the main title/cards below the floating logo on the index page */
.brand-spacer {
  height: 90px;          /* adjust 150–190px to taste */
}

/* On smaller screens the logo shrinks; use a smaller spacer */
@media (max-width: 900px){
  .brand-spacer { height: 120px; }
}




/* Make the whole frame clickable */
.hb-card-link {
  display: block;
  text-decoration: none;
}

/* Fixed-size image area (no border/frame) */
.hb-media {
  height: 220px;                 /* keep your chosen frame height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;              /* prevents spillover */
  padding: 0;                    /* remove inner padding */
  border: 0;                     /* remove border */
  background: transparent;       /* remove background */
  border-radius: 0;              /* no outer rounding */
}

/* Image scales down inside the area */
.hb-media img {
  max-height: 250px;             /* adjust 170–190 to taste */
  max-width: 140%;
  height: auto;
  width: auto;
  display: block;
  border: 0;                     /* ensure no image border */
  border-radius: 6px;            /* optional: soft corners on the photo */
}





/* Honey-gold pill styling for your existing button */
#payBtn.hb-btn{
  --gold-light: #FFD24D;
  --gold-base:  #F0B429;
  --gold-dark:  #B98000;

  appearance: none;
  border: 0;
  border-radius: 9999px;      /* pill shape */
  padding: 12px 22px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-base));
  box-shadow:
    0 6px 14px rgba(0,0,0,.18),
    inset 0 -2px 0 rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}

#payBtn.hb-btn:hover{
  filter: brightness(1.03);
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 -2px 0 rgba(0,0,0,.18);
}

#payBtn.hb-btn:active{
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--gold-base), var(--gold-dark));
}

#payBtn.hb-btn:focus-visible{
  outline: 3px solid rgba(255,210,77,.55);
  outline-offset: 3px;
}

/* Optional: disabled look */
#payBtn.hb-btn:disabled{
  filter: grayscale(.2) brightness(.9);
  cursor: not-allowed;
  box-shadow: none;
}

.flex-between{ display:flex; justify-content:space-between; align-items:center; }


/* pushes main content below logo */
.brand-spacer {
  height: 150px;
}


/* ===========================================================
   MOBILE FIX PACK — 2025-10-10
   - Cards fill screen width on small devices
   - Brand overlay shrinks/repositions
   - Media frames shorten on small screens
   - Images scale fluidly
   - Swarm/photo grids collapse to 1 column
   =========================================================== */

@media (max-width: 640px){
  :root{
    --card-left-indent: 1rem;
    --card-max-width: 100vw; /* full width on phones */
  }

  /* Let cards span full width */
  .card,
  section.card,
  .wrap.section.card,
  body > section.card,
  body > .wrap.section.card,
  #pickup.card, #faq.card, #contact.card,
  .hb-form, .swarm-item{
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    border-left-width: 1px;
    border-right-width: 1px;
  }

  /* Brand overlay: shrink and nudge down */
  .brand-overlay{
    top: 70px;
    left: 12px;
    gap: 8px;
  }
  .brand-overlay img{
    width: 96px;
    height: 96px;
  }
  .brand-overlay .brand-name{
    font-size: 18px;
    padding: 4px 8px;
  }
  .brand-spacer{ height: 110px; }

  /* Media frames shorter so images don’t get overly cropped */
  .hb-media{ height: 160px; }

  /* Make all images fluid by default inside cards/sections */
  .card img, section img, .hb-media img{
    max-width: 100%;
    height: auto;
  }

  /* Quantity row & other flex rows should wrap instead of overflow */
  .hb-qty-row,
  .flex-between{
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Swarm / photo grids collapse to single column */
  .swarm-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Slightly larger phones / small tablets */
@media (min-width: 641px) and (max-width: 900px){
  :root{
    --card-left-indent: 1.25rem;
    --card-max-width: 90vw; /* breathe, but mostly full width */
  }
  .hb-media{ height: 180px; }
}



/* ===========================================================
   MOBILE POLISH PACK — 2025-10-10B
   Goal: make phone/tablet layout feel like laptop: generous spacing,
   crisp typography, consistent media, better card rhythm & shadows.
   =========================================================== */

/* Small phones */
@media (max-width: 400px){
  html { font-size: 16px; }                  /* readable base */
  body { line-height: 1.6; }
  .card, section.card{ border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
  .card > * { padding-left: 18px; padding-right: 18px; }
  .hb-btn, button, input[type="submit"]{ padding: 12px 16px; font-weight: 700; }
  .hb-media{
    height: auto;                            /* remove fixed height */
    aspect-ratio: 16 / 9;                    /* consistent crop */
  }
  .hb-media img{ width: 100%; height: 100%; object-fit: cover; }
  /* If logo overlaps on tiny screens, hide text label and nudge */
  .brand-overlay .brand-name{ display:none; }
  .brand-overlay{ top: 64px; left: 10px; }
  .brand-overlay img{ width: 84px; height: 84px; }
  .brand-spacer{ height: 96px; }
}

/* Phones (portrait) */
@media (min-width: 401px) and (max-width: 640px){
  html { font-size: 17px; }
  body { line-height: 1.65; }
  .card, section.card{ border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.07); }
  .card > * { padding-left: 22px; padding-right: 22px; }
  .hb-media{
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .hb-media img{ width: 100%; height: 100%; object-fit: cover; }
  .hb-qty-row, .flex-between{ gap: 12px; }
  .brand-overlay{ top: 72px; left: 12px; }
  .brand-overlay img{ width: 96px; height: 96px; }
  .brand-spacer{ height: 108px; }
}

/* Small tablets / landscape phones */
@media (min-width: 641px) and (max-width: 900px){
  html { font-size: 18px; }
  body { line-height: 1.7; }
  :root{ --card-max-width: 860px; }          /* closer to laptop width */
  .card, section.card{ border-radius: 18px; box-shadow: 0 14px 30px rgba(0,0,0,.08); }
  .card > * { padding-left: 26px; padding-right: 26px; }
  .hb-media{
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .hb-media img{ width: 100%; height: 100%; object-fit: cover; }
  .swarm-grid{
    grid-template-columns: 1fr 1fr !important;   /* 2-up on tablets */
    gap: 18px !important;
  }
  .brand-overlay{ top: 86px; left: 16px; }
  .brand-overlay img{ width: 108px; height: 108px; }
  .brand-spacer{ height: 120px; }
}

/* Shared small-screen niceties */
@media (max-width: 900px){
  /* Ensure images inside cards never overflow rounded corners */
  .card img, section.card img{ border-radius: 14px; }
  /* Make form fields comfy and consistent */
  input[type="text"], input[type="email"], input[type="tel"], select, textarea{
    font-size: 1rem;
    padding: 12px 14px;
  }
  /* Tap-friendly links inside list items */
  .card li a{ padding: 4px 2px; display:inline-block; }
  /* Avoid edge-to-edge crowding on very narrow screens */
  body { padding-left: 8px; padding-right: 8px; }
}






/* --- FORCE the cart columns to sit closer together --- */


/* prevent children from imposing extra width that creates space */
.cart-page .cart-wrap > .hb-form,
.cart-page .cart-wrap > .card{
  min-width: 0 !important;
  margin: 0 !important;            /* kill any side margins that add space */
}

/* (Optional) if your theme defines a large left indent via a CSS var */
:root{
  --card-left-indent: 32px;        /* override any big value used as gap */
}

/* Mobile keeps comfy spacing */
@media (max-width: 900px){
  
}

/* ===== Cart (final, cleaned) ===== */
.cart-page .cart-wrap{
  display: grid;
  grid-template-columns: 1.05fr 1fr;  /* slight emphasis on address card */
  gap: 32px;                           /* consistent, comfy gap */
  align-items: start;                   /* let each card size to content */
}
@media (max-width: 900px){
  .cart-page .cart-wrap{ grid-template-columns: 1fr; gap: 20px; }
}

/* Divider under the Order Summary title */
.cart-page .card .card-divider{
  height: 1px;
  background: linear-gradient(90deg, #e6e1d8 0%, #efe9df 100%);
  margin: 6px 0 10px;
  opacity: .9;
}

/* Compact summary rows (remove excess white space) */
.cart-page .card{ padding: 16px 18px; }
.cart-page .card h2{ margin: 0 0 8px; }
.cart-page .card .row{ padding: 6px 0; }

/* Form fields — match Removals look (rounded, full-width, stacked) */
.cart-page .hb-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-page .hb-form label{
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 1rem;
}
.cart-page .hb-form input{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 1.5rem;
  font-size: 1rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: border-color .2s, box-shadow .2s;
}
.cart-page .hb-form input:focus{
  border-color: #000;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  outline: none;
}
.cart-page .hb-form .actions{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.cart-page .hb-form .hb-button{
  border-radius: 1.5rem;
  padding: 10px 18px;
  font-weight: 600;
}

/* === Cart: normalize card/form heading sizes so both titles match === */
.hb-form > h1, .hb-form > h2, .hb-form > h3, .hb-form > h4{
  font-weight: 800;
  font-size: 1.125rem;    /* same as .card headings */
  line-height: 1.25;
  margin: 0 0 10px;
}