/* ===========================================================================
   Bonkie Bonkie · Link Hub — shared styles
   Cream theme tokens (from brand handoff). Loaded by every page.
   =========================================================================== */
:root{
  --page-bg:#F4F2EC;
  --heading:#006E47;
  --sub:#6B6759;
  --btn-bg:#ffffff;
  --btn-text:#161512;
  --btn-border:#161512;
  --btn-shadow:#161512;
  --chev:#006E47;
  --feat-bg:#006E47;
  --feat-text:#ffffff;
  --feat-border:#161512;
  --tag-bg:#ffffff;
  --tag-text:#006E47;
  --foot:#A8A296;
  --soon-border:#D9D4C8;
  /* delivery platform brand colours */
  --lineman:#06C755;
  --grab:#00B14F;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Mulish','IBM Plex Sans Thai',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--page-bg);
  color:var(--btn-text);
}
::selection{background:#006E47;color:#fff;}

@keyframes bonkBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

.page{
  min-height:100vh;
  width:100%;
  display:flex;
  justify-content:center;
  padding:44px 20px 36px;
}
.col{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---- Header / hero logo ---- */
.logo{
  width:172px;
  height:auto;
  animation:bonkBob 2.6s ease-in-out infinite;
}
.logo .cls-1{fill:var(--heading);}   /* drive logo colour from the theme */
/* smaller logo on sub-pages */
.logo--sm{width:112px;}

/* visually-hidden but available to screen readers / SEO (wordmark is in the SVG) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- Back link (sub-pages) ---- */
.backlink{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  font-family:'Mulish',sans-serif;
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--sub);
}
.backlink:hover,.backlink:focus-visible{color:var(--heading);}
.backlink:focus-visible{outline:3px solid var(--heading);outline-offset:3px;border-radius:6px;}

.subtitle{
  margin:18px 0 0;
  font-size:16px;
  line-height:1.5;
  text-align:center;
  font-weight:600;
  color:var(--sub);
  max-width:32ch;
}
.subtitle-th{
  display:block;
  margin-bottom:4px;
  font-family:'IBM Plex Sans Thai',sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:var(--heading);
}

/* ---- Link stack ---- */
.links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:30px;
}
.link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px;
  border-radius:18px;
  background:var(--btn-bg);
  color:var(--btn-text);
  border:2.5px solid var(--btn-border);
  box-shadow:4px 5px 0 var(--btn-shadow);
  text-decoration:none;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .12s ease;
}
.link:hover,.link:active,.link:focus-visible{
  transform:translate(2px,3px);
  box-shadow:1px 2px 0 var(--btn-shadow);
}
.link:focus-visible{outline:3px solid var(--heading);outline-offset:3px;}
.link .chev{font-size:22px;line-height:1;color:var(--chev);}
.link .lead{display:flex;align-items:center;gap:12px;min-width:0;}

/* ---- Featured link ---- */
.link--feat{
  position:relative;
  background:var(--feat-bg);
  color:var(--feat-text);
  border-color:var(--feat-border);
}
.link--feat .chev{color:var(--feat-text);opacity:.7;}
.tag{
  background:var(--tag-bg);
  color:var(--tag-text);
  font-family:'Mulish',sans-serif;
  font-weight:800;
  font-size:10px;
  letter-spacing:.12em;
  padding:4px 9px;
  border-radius:999px;
  white-space:nowrap;
}

/* ---- Delivery platform badge (text placeholder — no logo assets yet) ---- */
.badge{
  flex:none;
  font-family:'Mulish',sans-serif;
  font-weight:800;
  font-size:10px;
  letter-spacing:.1em;
  color:#fff;
  padding:4px 9px;
  border-radius:999px;
}
.badge--lineman{background:var(--lineman);}
.badge--grab{background:var(--grab);}

/* ---- Coming-soon (disabled) link ---- */
.link--soon{
  background:transparent;
  color:var(--sub);
  border-color:var(--soon-border);
  border-style:dashed;
  box-shadow:none;
  cursor:default;
}
.link--soon:hover,.link--soon:active,.link--soon:focus-visible{
  transform:none;
  box-shadow:none;
}
.status{
  font-family:'Mulish',sans-serif;
  font-weight:800;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--foot);
  border:1.5px solid var(--soon-border);
  padding:4px 9px;
  border-radius:999px;
  white-space:nowrap;
}
/* date variant for Members (opening dates) */
.status--date{
  color:var(--heading);
  border-color:var(--heading);
}

.footer{
  margin:30px 0 0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--foot);
}

@media (prefers-reduced-motion:reduce){
  .logo{animation:none;}
}