/* Passersby Welcome - matches the look of passersbywelcome.com (Wix): white header with the script logo,
   Helvetica type, slate-teal buttons, light-grey link rows, black "Open" buttons. No web fonts, no JS. */
:root{
  --ink:#313131;          /* Wix body/menu text */
  --muted:#727272;        /* Wix color_6 */
  --bg:#ffffff;
  --soft:#fffaf4;         /* warm off-white used behind Wix sign-up/footer areas */
  --row:#eeeeee;          /* Wix Guide Links table rows */
  --teal:#5a8e9c;         /* Wix buttons ("Add to Cart", "Google Earth", "Shop All") */
  --teal-dark:#3c5f68;    /* logo colour */
  --black:#212121;        /* Wix "Open" / printable-map buttons */
  --line:#e0e0e0;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--font);color:var(--ink);background:var(--bg)}
a{color:var(--teal-dark)}
a:hover{color:var(--teal)}
img{max-width:100%;height:auto}

/* header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header.site .wrap{max-width:1100px;margin:0 auto;padding:.6rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);line-height:1}
.brand img{display:block;width:190px;height:auto}
.brand .tag{font-size:.68rem;font-weight:300;color:var(--ink);margin-top:.3rem;letter-spacing:.01em;font-style:normal}
nav.main{display:flex;gap:.25rem 1.6rem;flex-wrap:wrap}
nav.main a{color:var(--ink);text-decoration:none;font-size:1rem;padding:.25rem 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current]{color:var(--teal-dark);border-bottom-color:var(--teal)}

/* page body */
main{max-width:960px;margin:0 auto;padding:1.5rem 1.25rem 2.5rem}
h1,h2,h3{font-weight:700;color:var(--ink);line-height:1.25}
h1{font-size:2rem;margin:.75rem 0 1.25rem;text-align:center}
h2{font-size:1.45rem;margin:2.25rem 0 .9rem;text-align:center}
h3{font-size:1.1rem}
section p{max-width:680px;margin-left:auto;margin-right:auto}

/* home hero */
.hero-img{height:340px;background:#5a6b79 url(/assets/hero.jpg) center 62%/cover no-repeat}
.hero{text-align:center;padding:.5rem 0 1rem}
.hero h1{font-size:2.4rem;margin:.5rem 0 .2rem}
.hero .tag{color:var(--muted);margin-top:0}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1rem 0}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;padding:.6rem 1.4rem;border-radius:3px;font-size:.92rem;border:1px solid var(--teal);text-align:center;transition:background .15s}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.btn.alt{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:#fff}
.btn.dark{background:var(--black);border-color:var(--black)}
.btn.dark:hover{background:#000;border-color:#000}

/* boxed sections (mapping / printables) like the Wix cards */
section#mapping,section#printables{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:1rem 1.25rem 1.25rem;margin:1.5rem auto;max-width:720px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.06)}
section#mapping h2,section#printables h2{margin-top:.25rem}
section#printables .btn{background:var(--black);border-color:var(--black);min-width:9rem}

/* guide link tables: grey rows with gaps, black Open button (as on Wix) */
table.links{width:100%;border-collapse:separate;border-spacing:0 6px;margin:.5rem 0 1rem}
table.links th{font-weight:700;text-align:left;padding:.5rem 1rem;font-size:1rem;background:none}
table.links td{background:var(--row);padding:.7rem 1rem;vertical-align:middle}
table.links tbody tr:hover td{background:#e4e9ea}
table.links td:first-child{white-space:nowrap;width:6rem;border-radius:3px 0 0 3px}
table.links td:last-child{text-align:right;width:7.5rem;border-radius:0 3px 3px 0}
table.links .btn{background:var(--black);border-color:var(--black);padding:.4rem 1.6rem;font-size:.85rem}
table.links .btn:hover{background:var(--teal-dark);border-color:var(--teal-dark)}

nav.jump{display:flex;justify-content:center;gap:1.25rem;margin:-.5rem 0 1rem}
nav.jump a{color:var(--teal-dark)}

/* home cards */
ul.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:4px;padding:1rem 1.1rem;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.card h3{margin:0 0 .3rem}.card p{margin:.3rem 0}
.card .count{color:var(--muted);font-size:.9rem}

/* footer (Wix: "Passersby Welcome LLC" left, links middle, social icons right) */
footer.site{background:var(--soft);border-top:1px solid var(--line);margin-top:2.5rem;color:var(--ink);font-size:.9rem}
footer.site .wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1.25rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:flex-start}
footer.site .llc{font-size:1.15rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.15rem 0}
footer.site a{color:var(--ink)}
footer.site .social{display:flex;gap:.75rem}
footer.site .social a{display:inline-flex}
footer.site .social svg{width:22px;height:22px;fill:var(--ink)}
footer.site .disclaimer{flex-basis:100%;color:var(--muted);font-size:.8rem;text-align:center;margin:.5rem 0 0}

@media (max-width:640px){
  header.site{position:static}
  header.site .wrap{justify-content:center}
  nav.main{justify-content:center;gap:.25rem 1.1rem}
  .brand img{width:170px}
  h1{font-size:1.55rem}.hero h1{font-size:1.8rem}
  .hero-img{height:190px}
  table.links th{padding:.4rem .6rem}
  table.links td{padding:.6rem .6rem}
  table.links td:first-child{width:3.2rem}
  table.links td:last-child{width:auto}
  table.links .btn{padding:.4rem .9rem}
  footer.site .wrap{flex-direction:column;align-items:center;text-align:center}
}
table.links th{white-space:nowrap}
/* Wix shows the Google Maps buttons as white outlined buttons under the teal Google Earth one */
section#mapping p + .btns .btn,body > main > p + .btns .btn{background:#fff;color:var(--ink);border-color:var(--ink)}
section#mapping p + .btns .btn:hover,body > main > p + .btns .btn:hover{background:var(--ink);color:#fff}
main > p{max-width:680px;margin-left:auto;margin-right:auto;text-align:center}
body{min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto;width:100%}

/* ---- covers on home cards ---- */
ul.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{padding:0;overflow:hidden;display:flex;flex-direction:column;border-top-width:0}
.card .cover{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#f4f1ec;border-bottom:4px solid var(--teal)}
.card .cover.placeholder{display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font-weight:700;color:var(--teal-dark);background:var(--soft)}
.card-body{padding:.9rem 1.1rem 1rem}
.card-body a{display:inline-block;padding:.55rem 0;min-height:44px}

/* ---- shop ---- */
.note{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:.75rem 1rem;text-align:center;max-width:720px;margin:0 auto 1.5rem}
ul.products{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem 1.25rem}
.product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;scroll-margin-top:90px}
.pimg{position:relative;background:#f4f1ec}
.pimg img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain}
.ribbon{position:absolute;top:.6rem;left:.6rem;background:var(--teal);color:#fff;font-size:.8rem;padding:.2rem .55rem;border-radius:2px}
.pbody{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;flex:1}
.pbody h3{margin:0 0 .25rem;font-size:1.05rem}
.pbody p{margin:.4rem 0}
.price{font-size:1.05rem;color:var(--ink)}
.price s{color:var(--muted);margin-right:.3rem}
details{margin:.25rem 0 .5rem}
summary{cursor:pointer;color:var(--teal-dark);padding:.6rem 0;min-height:44px}
.buy{margin-top:auto!important;padding-top:.5rem}
.buy .btn{width:100%}
.btn.disabled{background:#bababa;border-color:#bababa;cursor:default}

/* ---- contact ---- */
.contact{text-align:center;max-width:680px;margin:0 auto}
.contact .btn{word-break:break-all}

/* ---- touch / iPhone ---- */
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
nav.main a{min-height:44px;display:inline-flex;align-items:center}
nav.jump a{min-height:44px;display:inline-flex;align-items:center}
footer.site li a{display:inline-block;padding:.5rem .25rem;min-height:44px}
footer.site .social a{min-width:44px;min-height:44px;align-items:center;justify-content:center}
main a{overflow-wrap:anywhere}
header.site .wrap{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right));padding-top:max(.6rem,env(safe-area-inset-top))}
main{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right))}
footer.site .wrap{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}

@media (max-width:640px){
  body{font-size:17px}
  main{padding-top:1rem}
  header.site .wrap{flex-direction:column;gap:.25rem;padding-bottom:.25rem}
  .brand .tag{font-size:.72rem}
  nav.main{gap:0 .9rem;width:100%;justify-content:center}
  nav.main a{font-size:1rem;padding:0 .1rem}
  .card .count,.price,footer.site,.note{font-size:1rem}
  footer.site .disclaimer{font-size:.875rem}
  ul.cards{grid-template-columns:1fr 1fr;gap:.75rem}
  .card-body{padding:.7rem .75rem .8rem}
  .card-body h3{font-size:1rem}
  ul.products{grid-template-columns:1fr}
  .btns .btn{flex:1 1 auto}
  /* link tables become stacked rows: lesson + topic on the left, Open button on the right */
  table.links thead{display:none}
  table.links,table.links tbody{display:block}
  table.links tr{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;background:var(--row);border-radius:4px;margin:0 0 .5rem;padding:.6rem .75rem;column-gap:.75rem}
  table.links td{display:block;background:none!important;padding:0;width:auto!important;border-radius:0!important}
  table.links td:first-child{grid-column:1;grid-row:1;font-size:.875rem;color:var(--muted)}
  table.links td:first-child::before{content:"Lesson "}
  table.links td:nth-child(2){grid-column:1;grid-row:2;font-size:1.0625rem}
  table.links td:last-child{grid-column:2;grid-row:1 / span 2}
  table.links .btn{font-size:1rem;padding:.4rem 1.2rem}
  section#mapping,section#printables{padding:.9rem .9rem 1rem}
}
@media (max-width:360px){ul.cards{grid-template-columns:1fr}}
/* inline text links: enlarge the touch area to >=44px without changing the layout */
main p a:not(.btn){padding:.8rem 0;margin:-.8rem 0;-webkit-tap-highlight-color:rgba(90,142,156,.25)}
.ribbon{font-size:.875rem}
main p a:not(.btn){padding:.85rem 0;margin:-.85rem 0}
@media (max-width:640px){.pimg img{aspect-ratio:auto;height:300px;object-fit:contain}}