/* =================================================================
   North Side Bistro Caribbean Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: dinner on the old North Side Bistro veranda — bistro-green
   tablecloths, yellow napkins, white veranda railings, painted shutters
   and a St. Thomas sunset. Bodoni Moda (classic menu-card serif) for
   headings, Mulish for text. Uses the original grapes logo.
   Motifs: a white veranda railing of balusters (--railing) under the
   header, over the footer and on top of the veranda band; louvred
   shutter slats (--louvres) on the dark bands; feature images framed like
   a veranda window (white frame, yellow outer line); a sunset gradient
   rule under section titles; a folded-napkin yellow bar under the
   current menu item.
   Deliberately different from the other network sites (oceansidebistro.net
   waves, asianrestaurantvi.com lacquer frames, baznotik.com sail slants,
   bowlingvi.com retro marquee, chenaybay.com cabana stripes, chinchillasskb.com
   volcano domes, greenervi.com leaf cuts, istanbulturkishrestaurant.com
   Iznik tiles, lapausemartinique.com lanterns, laoboutique.com gold rings,
   laplacesxm.com enamel street signs, mokpropertiespr.com site-plan grid,
   nohayliga.com checkered flags).
   ================================================================= */

:root{
  --bistro:    #1D4A34;   /* tablecloth green: header, headings, bands */
  --bistro-dk: #12301F;   /* footer */
  --napkin:    #F2C230;   /* yellow: primary button, current menu item */
  --sunset:    #E8724A;   /* coral: small accents, hover */
  --dusk:      #7A4E8C;   /* grape purple from the logo: rare accents */
  --linen:     #FBF7EE;   /* heroes, about band */
  --ink:       #1E2620;
  --muted:     #58625B;
  --line:      rgba(30,38,32,.14);

  --font-display: 'Bodoni Moda', Didot, Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  /* veranda railing: top rail, bottom rail and a baluster per 20px */
  --railing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 40'%3E%3Crect width='22' height='5' fill='%23ffffff'/%3E%3Crect y='35' width='22' height='4' fill='%23ffffff'/%3E%3Cpath d='M9.5 5h3v4.5c1.6 1 1.6 3 0 4V27c1.6 1 1.6 3 0 4v4h-3v-4c-1.6-1-1.6-3 0-4V13.5c-1.6-1-1.6-3 0-4z' fill='%23ffffff'/%3E%3C/svg%3E");
  --louvres: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 9px, rgba(0,0,0,.12) 9px 11px, rgba(255,255,255,0) 11px 14px);
  --sunset-rule: linear-gradient(90deg, var(--napkin), var(--sunset) 60%, var(--dusk));
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--bistro); }
a:hover{ color: var(--sunset); }
:focus-visible{ outline: 3px solid var(--napkin); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 700; line-height: 1.06; margin: 0; color: var(--bistro); letter-spacing: -.01em; }
h1 em, h2 em{ font-style: italic; font-weight: 500; color: var(--sunset); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--napkin); color: var(--bistro); padding: 10px 16px; font-weight: 800; text-decoration: none;
}
.skip-link:focus{ top: 12px; }

/* ---------- Brand (header + footer) ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand:hover{ color: #fff; }
.brand__mark{ width: 52px; height: 52px; flex: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.04; }
.brand__name{ font-family: var(--font-display); font-weight: 700; font-size: 26px; white-space: nowrap; }
.brand__tag{ font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 4px; white-space: nowrap; }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .site-header .brand__mark{ width: 44px; height: 44px; }
  .site-header .brand__name{ font-size: 22px; }
  .site-header .brand__tag{ white-space: normal; letter-spacing: .04em; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--bistro); }
.site-header::after{ content: ""; display: block; height: 32px; background: var(--railing) repeat-x 0 0 / 18px 32px, var(--bistro); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter) 6px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 800 15px/1 var(--font-body); color: var(--bistro);
  background: var(--napkin); border: 0; border-radius: 4px; padding: 12px 18px; cursor: pointer;
}
html:not(.js) .nav-toggle{ display: none; }

.site-nav{ flex-basis: 100%; }
.js .site-nav{ display: none; }
.js .site-nav.is-open{ display: block; }

.bnet-menu{ list-style: none; margin: 0; padding: 4px 0 12px; }
.bnet-menu a{
  display: block; padding: 11px 2px;
  font-weight: 700; font-size: 16.5px; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.14);
}
.bnet-menu a:hover{ color: var(--napkin); }

/* active page: body page-* class + li bnet-* class */
.page-home .bnet-home a,
.page-website-solutions .bnet-website-solutions a,
.page-thrive .bnet-thrive a,
.page-directory .bnet-directory a,
.page-photos .bnet-photos a,
.page-free-stuff .bnet-free-stuff a,
.page-blog-network .bnet-blog-network a{ color: var(--napkin); font-weight: 800; }

@media (min-width: 1140px){
  .site-header__inner{ flex-wrap: nowrap; }
  .nav-toggle{ display: none; }
  .site-nav, .js .site-nav{ display: block; flex-basis: auto; margin-left: auto; }
  .bnet-menu{ display: flex; gap: 2px; padding: 0; }
  .bnet-menu a{ border-top: 0; padding: 8px 10px 13px; font-size: 15.5px; white-space: nowrap; position: relative; }
  /* the current page gets a folded yellow napkin */
  .page-home .bnet-home a::after,
  .page-website-solutions .bnet-website-solutions a::after,
  .page-thrive .bnet-thrive a::after,
  .page-directory .bnet-directory a::after,
  .page-photos .bnet-photos a::after,
  .page-free-stuff .bnet-free-stuff a::after,
  .page-blog-network .bnet-blog-network a::after{
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 5px; border-radius: 3px;
    background: var(--napkin);
  }
  .page-home .bnet-home a,
  .page-website-solutions .bnet-website-solutions a,
  .page-thrive .bnet-thrive a,
  .page-directory .bnet-directory a,
  .page-photos .bnet-photos a,
  .page-free-stuff .bnet-free-stuff a,
  .page-blog-network .bnet-blog-network a{ color: #fff; }
}

/* ---------- Heroes ---------- */
.hero{ background: var(--linen); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 54px var(--gutter) 72px; }
.hero__copy{ max-width: 880px; }
.hero__kicker{ margin: 0 0 16px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sunset); }
.hero__title{
  font-size: clamp(40px, 6.2vw, 78px);
  line-height: 1.04;
  text-wrap: balance;
}
.hero__lede{ margin: 20px 0 0; max-width: 58ch; font-size: clamp(17.5px, 1.6vw, 20px); color: var(--muted); }
.hero__lede a{ color: var(--bistro); }
.hero__actions{ margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(36px, 5vw, 62px); }
.hero--page .hero__inner{ padding-top: 46px; padding-bottom: 62px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px; border-radius: 4px;
  font: 800 16.5px/1.2 var(--font-body); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn--sun{ background: var(--napkin); color: var(--bistro); }
.btn--sun:hover{ background: var(--sunset); color: #fff; }
.btn--line{ color: var(--bistro); border: 2px solid var(--bistro); }
.btn--line:hover{ background: var(--bistro); color: #fff; }

/* the feature image framed like a veranda window (includes/banner.incl.php) */
.banner{
  margin: 40px 0 0; padding: 12px;
  background: #fff;
  border: 3px solid var(--napkin);
  box-shadow: 0 0 0 7px var(--linen), 0 0 0 9px var(--bistro), 0 26px 44px -30px rgba(18,48,31,.6);
}
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; }
.hero--page .banner{ margin-top: 34px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner{ padding: 7px; box-shadow: 0 0 0 5px var(--linen), 0 0 0 7px var(--bistro); margin-left: 7px; margin-right: 7px; }
  .hero--page .banner img{ aspect-ratio: 1280 / 500; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 64px 0 80px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{ font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 28px; }
.section__title::after, .about-blog h2::after, .explore h2::after{
  content: ""; display: block; width: 120px; height: 4px; margin-top: 14px; border-radius: 2px;
  background: var(--sunset-rule);
}
.embed{ min-height: 320px; }

/* page content runs the full content width, same as "Keep exploring";
   the gandor.tv widgets cap themselves at 920px in their own styles */
.network-embed > div[class^="gtv-"]{ max-width: none; margin-top: 0; margin-bottom: 0; }

/* Third-party embeds paint their own white/cream panels; let the page
   background show through (cards inside keep theirs). !important
   because these widgets inject their CSS after ours. */
.page-home .eapps-facebook-feed-inner,
.page-photos .eapps-instagram-feed-header,
.page-thrive .cc-thrive-widget,
.page-directory .network-embed .ui-tabs,
.page-directory .network-embed .ui-tabs-nav,
.page-directory .network-embed .ui-tabs-panel,
.page-directory .network-embed .directory-card{ background: transparent !important; }

/* ---------- From the North Side veranda (home) ---------- */
.veranda{
  background: var(--railing) repeat-x 0 0 / 22px 40px, var(--louvres), var(--bistro);
  color: rgba(255,255,255,.86); padding: 100px 0 80px;
}
.veranda__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.veranda__photo{ margin: 0; padding: 10px; background: #fff; border: 3px solid var(--napkin); }
.veranda__photo img{ width: 100%; aspect-ratio: 1032 / 739; object-fit: cover; }
.veranda__logo{ width: 96px; height: 96px; margin-bottom: 16px; }
.veranda h2{ color: #fff; font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 14px; }
.veranda p{ margin: 0 0 14px; max-width: 48ch; font-size: 19px; }
.veranda .btn{ margin-top: 10px; }
@media (min-width: 860px){ .veranda__inner{ grid-template-columns: 1.2fr 1fr; gap: 64px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--linen); padding: 76px 0 72px; }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.about-blog h2{ font-size: clamp(34px, 4.2vw, 50px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font-size: 16px; font-weight: 700; color: var(--muted); }
.follow{ list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.follow a{
  display: inline-block; padding: 9px 20px; border-radius: 4px;
  background: var(--bistro); color: #fff; text-decoration: none; font-weight: 800; font-size: 15.5px;
}
.follow a:hover{ background: var(--sunset); color: #fff; }
@media (min-width: 860px){ .about-blog__inner{ grid-template-columns: 1fr 2fr; gap: 56px; } }

/* ---------- Keep exploring ---------- */
.explore{ padding: 72px 0 32px; }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{ font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 28px; }
.explore__grid{ display: grid; gap: 36px; }
@media (min-width: 760px){ .explore__grid{ grid-template-columns: 1fr 1fr; } }
.tile{ display: block; text-decoration: none; color: var(--ink); }
.tile:hover{ color: var(--ink); }
.tile__img{ display: block; padding: 8px; background: #fff; border: 3px solid var(--napkin); box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--bistro); margin: 7px; transition: border-color .2s ease; }
.tile:hover .tile__img{ border-color: var(--sunset); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.tile__title{ display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 27px; color: var(--bistro); line-height: 1.15; }
.tile:hover .tile__title{ color: var(--sunset); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 80px; }
.share__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.share__label{ margin: 0; font-weight: 700; color: var(--muted); }
.share__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share__list a{
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px;
  background: #fff; border: 2px solid var(--bistro);
  transition: border-color .2s ease;
}
.share__list a:hover{ border-color: var(--sunset); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--louvres), var(--bistro-dk); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 40px; background: var(--railing) repeat-x 0 0 / 22px 40px, var(--bistro-dk); }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer a{ color: #fff; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--napkin); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font-family: var(--font-body); font-size: 17px; font-weight: 800; color: var(--napkin); margin-bottom: 14px; line-height: 1.3; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__network p{ margin: 0 0 14px; }
.site-footer__network .site-footer__gtv{ margin-bottom: 22px; }
.site-footer__cc{ display: inline-block; background: #fff; border-radius: 4px; padding: 10px 16px; }
.site-footer__cc img{ width: 170px; }
@media (min-width: 900px){
  .site-footer__inner{ grid-template-columns: 1fr 1.4fr 1fr; gap: 56px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .tile__img, .share__list a{ transition: none; }
}