/* =========================
   FresnoVendors (home) — SLIM
   Exact look preserved. Duplicates removed.
   ========================= */

/* ===== Base ===== */
body, td, th {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background:#000;            /* site background black */
  margin:0;
  text-align:center;
}

a {
  font-size:20px;
  color:#333;
  text-decoration:none;
}
a:link, a:visited { color:#B78000; }
a:hover { color:#DD9B00; }
a:active { font-weight:bold; }

/* ===== Layout ===== */
#wrapper {
  background:#fcf4e9;
  color:#fff;
  max-width:840px;
  margin:0 auto 50px;         /* center + bottom space */
  padding:0;
}
.container { padding:20px 40px 15px; }

/* Keep Milligram’s grid padding modest for desktop */
.row .column { padding:10px 0; color:#666; }

/* ===== Header ===== */
header img { display:block; margin:0 auto; border-radius:0; }
.newTextStyle {                 /* was undefined before */
  font-size:18px;
  line-height:1.3;
}

/* ===== Main tiles (Let’s Eat / Go Shopping / Events) ===== */
#items {
  display:flex;
  justify-content:center;
  gap:20px;                    /* spacing between tiles */
  text-align:center;           /* center labels */
}
#items .column { flex:0 1 auto; }
#items .column img { display:block; margin:0 auto 6px; border-radius:8px; }

/* Spacer section (kept intentionally empty in HTML) */
.section { margin-top:0; }

/* ===== Footer bar ===== */
#logo {
  background:#1b4526;
  padding:3px 0;
  text-align:center;
  font-weight:bold;
}
#logo img { display:block; margin:6px auto 0; } /* small top gap */

/* Footer links override */
#logo .footer-link {
  color:#ddd;
  font-size:18px;
  transition:color 160ms ease-in-out;
}
#logo .footer-link:hover,
#logo .footer-link:focus { color:#fff; }

/* ===== Responsive (<=600px) ===== */
@media (max-width:600px) {
  .container { padding:16px 18px; }

  /* Stack the three tiles tightly */
  #items {
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin:0;
    padding:0;
  }

  /* Neutralize grid padding/margins on phone */
  .row { margin:0 !important; padding:0 !important; }
  .row .column {
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
  }

  /* Remove any stray <br> space after images (belt & suspenders) */
  #items .column br { display:none !important; }

  /* Tight image→label gap */
  #items .column > a:first-child {
    display:block;
    line-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #items .column img {
    margin:0 auto 2px !important;  /* set to 1px/0 for tighter */
    max-width:90%;
    height:auto;
  }

  /* Ensure labels add no extra space */
  #items .column strong,
  #items .column a {
    display:inline-block;
    margin:0 !important;
    padding:0 !important;
    line-height:1.05;
  }
}



/* ====== Tighten image ↔ label gap (final overrides) ====== */

/* kill any residual space under the image */
#items .column img {
  display: block;
  margin: 0 auto 0 !important;   /* no bottom margin */
  line-height: 0 !important;     /* removes descender space */
  vertical-align: top;            /* belt & suspenders */
}

/* make the label a block and set a tiny top margin */
#items .column strong a {
  display: block;
  margin-top:8px !important;     /* set 1px if you want ultra-tight */
  padding: 0 !important;
  line-height: 1.05;              /* compact but readable */
}

/* neutralize any vertical padding from the column itself (helps on phone) */
#items .column {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* On mobile, go microscopic if you want */
@media (max-width:600px) {
  #items .column strong a { margin-top: 10px !important; }
}



.footer-link {
  display: block;
  margin-bottom: 8px;  /* adjust as needed */
}



header strong {
  font-size: 20px;
  font-weight: bold;
  color: #1b4526;   /* same as your link color */
}



/* Desktop (default) */
.site-logo {
  max-width: 450px;   /* your normal desktop size */
  height: auto;
}

/* Phone view (20% larger) */
@media (max-width: 600px) {
  .site-logo {
    max-width: 400px;  /* ~20% increase over 250px */
  }
}



header {
  margin-bottom: 16px;   /* increase/decrease as needed */
}



/* =========================
   Member Pages (shared)
   Applies to all vendor/member mini-sites
   ========================= */
.member-page header img {
  display: block;
  margin: 0 auto;
}

.member-title {
  margin: 1.25rem 0 .75rem;
  text-align: center;
}

.member-intro {
  max-width: 700px;
  margin: 0 auto 1.25rem;
  text-align: center;
}

.member-gallery .column img {
  display: block;
  margin: .25rem auto .75rem; /* center + tighten vertical gaps */
  height: auto;
  max-width: 100%;
}

.member-social {
  margin: .5rem 0 1.5rem;
  text-align: center;
}
.member-social img {
  height: 32px;
  vertical-align: middle;
}

.member-footer-logos {
  margin-top: 1rem;
  text-align: center;
}
.member-footer-logos img {
  display: inline-block;
  margin: 0 6px;
  vertical-align: middle;
}

/* Optional: uniform card spacing for each member tile if needed later */
.member-card {
  text-align: center;
  margin-bottom: 1rem;
}

/* Responsive: stack columns on small screens; keep 3-up on desktop */
@media (max-width: 640px) {
  .member-gallery .column {
    width: 100%;
    display: block;
    margin-bottom: .75rem;
  }
}

.vendor-description {
  color: #333; /* Replace with any hex, rgb, or named color */
}



footer {
  background-color: #154d2b; /* deep green shade from your sample */
  color: #fff;              /* white text */
  padding: 20px;
  text-align: center;
}

footer a {
  color: #fff;
  text-decoration: none;
  display: block;   /* stacked vertically like your screenshot */
  margin: 6px 0;
}

footer a:hover {
  text-decoration: underline;
}



.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; /* prevent line breaks */
}


 /* Member links */

a.member-link {
  color: #154b19 !important;   /* Dark green */
  font-weight: normal;         /* Not bold */
  text-decoration: none;
}

a.member-link:hover {
  color: #66bb6a !important;   /* Light green */
  text-decoration: none;
}


 /* Button links */

:root{
  --cta-bg:#154b19; --cta-hover:#1f7a28; --cta-active:#0f3612;
}

/* Button look */
a.button-link{
  display:block;
  box-sizing:border-box;
  padding:4px 18px;
  background:var(--cta-bg);
  color:#fff !important;
  text-decoration:none !important;
  font-weight:normal !important;
  border-radius:8px;
  text-align:center;
  transition:background-color .3s ease;
  white-space:nowrap;                     /* keep on one line; remove if you want wrapping */
}
a.button-link:hover{ background:var(--cta-hover); }
a.button-link:active{ background:var(--cta-active); }
a.button-link:visited{ color:#fff !important; }  /* avoid purple visited links */

/* Stack = equal widths to the widest child in that stack */
.button-stack{
  display:inline-flex;                    /* shrink-wrap to content */
  flex-direction:column;
  gap:12px;
  width:max-content;                      /* container becomes width of the widest child */
  max-width:100%;                         /* don’t overflow narrow containers */
}

/* Equalize all buttons in a stack; allow per-button overrides */
.button-stack .button-link{
  width:var(--btn-w, 100%);               /* default 100%; override with --btn-w when needed */
}

/* Optional: allow wrapping on small screens */
@media (max-width: 420px){
  a.button-link{ white-space:normal; }
}
Markup for each page
Page A (Owner + Business):

html
Copy code
<div class="button-stack">
  <a href="members-business-owner.htm" class="button-link">Owner’s Name</a>
  <a href="member-page.html" class="button-link">Business Name</a>
</div>

/* Center the Business Owners button regardless of parent alignment */
.button-stack{
  display:block;         /* stop being inline so text-align no longer matters */
  width:max-content;     /* shrink-wrap to the button's width */
  margin:12px auto;      /* <-- centers the block */
}

/* keep the button looking like a button */
.button-stack .button-link{
  display:block;         /* fine with block now */
}



/* Center the Business Owners button regardless of parent alignment */
.button-stack{
  display:block;         /* stop being inline so text-align no longer matters */
  width:max-content;     /* shrink-wrap to the button's width */
  margin:12px auto;      /* <-- centers the block */
}

/* keep the button looking like a button */
.button-stack .button-link{
  display:block;         /* fine with block now */
}

/* Banner Squising */
.banner-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;   /* keeps it centered */
}

h1:not(.visually-hidden) {
  color: #1b5e20;
}