/* =================================================================
   La Place du Village Caribbean Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: a French village square in the Caribbean (Village d'Orient,
   Saint-Martin) — enamel street-sign blue with a green rim and a white
   inner rule, pavement stone, and the pink neon of the old "La ♥ Place"
   entrance arch. Fraunces (soft old-style serif) for headings, Nunito Sans
   for text.
   Motifs: enamel street-sign plaques (brand mark, kicker labels, the frame
   around feature images: green rim → blue enamel → white inner rule);
   fan-pattern cobblestones ("pavés en éventail", --paves) as a strip under
   the header and over the footer; a pink neon underline glow on the
   current menu item and the primary button.
   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).
   ================================================================= */

:root{
  --enamel:    #113B5C;   /* street-sign blue: header, headings */
  --enamel-dk: #0B2940;   /* footer */
  --rim:       #1D5C4A;   /* sign rim green: accents */
  --neon:      #E83E8C;   /* pink neon: primary button, current menu item */
  --neon-dk:   #C42672;
  --stone:     #E7DFD2;   /* pavement */
  --sand:      #F8F4EC;   /* heroes, about band */
  --ink:       #17222E;
  --muted:     #56616C;
  --line:      rgba(23,34,46,.14);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  /* fan-pattern cobblestones (tile 40x20) */
  --paves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Crect width='40' height='20' fill='%23E7DFD2'/%3E%3Cg fill='none' stroke='%23B9AD9A' stroke-width='1.1'%3E%3Cpath d='M0 20a20 20 0 0 1 40 0'/%3E%3Cpath d='M6 20a14 14 0 0 1 28 0'/%3E%3Cpath d='M12 20a8 8 0 0 1 16 0'/%3E%3Cpath d='M-20 0a20 20 0 0 0 40 0'/%3E%3Cpath d='M20 0a20 20 0 0 0 40 0'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::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.68;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--enamel); }
a:hover{ color: var(--neon-dk); }
:focus-visible{ outline: 3px solid var(--neon); outline-offset: 3px; }

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

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

/* an enamel plaque: blue, white inner rule, green rim */
.plaque, .hero__kicker span, .square__plaque{
  display: inline-block; background: var(--enamel); color: #fff;
  border: 3px solid var(--rim); border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px #fff;
  font: 800 12.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 16px 10px;
}

/* ---------- Brand (header + footer) ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand:hover{ color: #fff; }
.brand__mark{ width: 46px; height: 46px; flex: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.02; }
.brand__name{ font-family: var(--font-display); font-weight: 700; font-size: 29px; white-space: nowrap; }
.brand__tag{ font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); margin-top: 3px; white-space: nowrap; }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .site-header .brand__tag{ white-space: normal; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--enamel); }
.site-header::after{ content: ""; display: block; height: 20px; background: var(--paves) repeat-x 0 0 / 40px 20px; border-top: 3px solid var(--rim); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 800 15px/1 var(--font-body); color: var(--enamel);
  background: #fff; border: 0; border-radius: 8px; 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,.15);
}
.bnet-menu a:hover{ color: #FFB3D4; }

/* 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: #FFB3D4; 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 pink neon tube */
  .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: 3px; height: 3px; border-radius: 3px;
    background: #FFC2DD; box-shadow: 0 0 6px 1px var(--neon), 0 0 14px 2px rgba(232,62,140,.7);
  }
  .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(--sand); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 68px; }
.hero__copy{ max-width: 860px; }
.hero__kicker{ margin: 0 0 20px; }
.hero__title{
  font-size: clamp(40px, 6.2vw, 78px);
  line-height: 1.04;
  text-wrap: balance;
}
.hero__lede{ margin: 20px 0 0; max-width: 56ch; font-size: clamp(17.5px, 1.6vw, 20px); color: var(--muted); }
.hero__lede a{ color: var(--enamel); }
.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: 60px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px; border-radius: 8px;
  font: 800 16.5px/1.2 var(--font-body); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn--neon{ background: var(--neon); color: #fff; }
.btn--neon:hover{ background: var(--neon-dk); color: #fff; box-shadow: 0 0 18px rgba(232,62,140,.55); }
.btn--line{ color: var(--enamel); border: 2px solid var(--enamel); }
.btn--line:hover{ background: var(--enamel); color: #fff; }
.btn--line-light{ color: #fff; border: 2px solid rgba(255,255,255,.75); }
.btn--line-light:hover{ background: #fff; color: var(--enamel); }

/* the feature image set in an enamel street-sign frame (includes/banner.incl.php) */
.banner{
  margin: 40px 0 0;
  padding: 12px;
  background: var(--enamel);
  border: 5px solid var(--rim);
  border-radius: 18px;
  box-shadow: inset 0 0 0 4px var(--enamel), inset 0 0 0 6px #fff, 0 22px 40px -26px rgba(11,41,64,.6);
}
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 8px; }
.hero--page .banner{ margin-top: 32px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner{ padding: 9px; border-width: 4px; border-radius: 14px; box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px #fff; }
  .banner img{ border-radius: 6px; }
  .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(32px, 4vw, 48px); margin-bottom: 28px; }
.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; }

/* ---------- La Place du Village d'Orient (home) ---------- */
.square{ background: var(--paves) repeat-x 0 0 / 40px 20px, var(--enamel); color: rgba(255,255,255,.86); padding: 84px 0 76px; }
.square__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 44px; align-items: center;
}
.square__photos{ margin: 0 0 40px; position: relative; }
.square__main{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 5px solid var(--rim); }
.square__arch{
  position: absolute; right: 10px; bottom: -40px; width: 38%;
  border-radius: 50% 50% 10px 10px; border: 5px solid #fff;
  box-shadow: 0 0 0 3px var(--neon), 0 0 26px rgba(232,62,140,.7);
}
.square__plaque{ margin: 0 0 18px; background: #fff; color: var(--enamel); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--enamel); }
.square h2{ color: #fff; font-size: clamp(32px, 4vw, 48px); margin-bottom: 12px; }
.square p{ margin: 0 0 12px; max-width: 50ch; font-size: 18.5px; }
.square p[lang="fr"]{ font-family: var(--font-display); font-size: 22px; color: #FFC2DD; }
.square .btn{ margin-top: 14px; }
@media (min-width: 860px){
  .square__inner{ grid-template-columns: 1.1fr 1fr; gap: 72px; }
  .square__photos{ margin-bottom: 0; }
  .square__arch{ right: -24px; }
}

/* ---------- About this blog ---------- */
.about-blog{ background: var(--sand); 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(32px, 4vw, 48px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font-size: 16px; 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 18px; border-radius: 8px;
  background: var(--enamel); color: #fff; text-decoration: none; font-weight: 800; font-size: 15.5px;
  border: 2px solid var(--rim); box-shadow: inset 0 0 0 2px var(--enamel), inset 0 0 0 3px #fff;
}
.follow a:hover{ background: var(--neon-dk); color: #fff; box-shadow: inset 0 0 0 2px var(--neon-dk), inset 0 0 0 3px #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(28px, 3.6vw, 42px); 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; border-radius: 14px; background: var(--enamel); border: 4px solid var(--rim); box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px #fff; transition: border-color .2s ease; }
.tile:hover .tile__img{ border-color: var(--neon); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 6px; }
.tile__title{ display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--enamel); line-height: 1.2; }
.tile:hover .tile__title{ color: var(--neon-dk); }
.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: 8px;
  background: #fff; border: 2px solid var(--enamel);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.share__list a:hover{ border-color: var(--neon); box-shadow: 0 0 12px rgba(232,62,140,.45); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--enamel-dk); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 20px; background: var(--paves) repeat-x 20px 0 / 40px 20px; border-bottom: 3px solid var(--rim); }
.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: #FFB3D4; }
.site-footer .brand__tag{ color: rgba(255,255,255,.65); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font-family: var(--font-body); font-size: 17px; font-weight: 800; color: #fff; 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: 8px; 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; }
}