/* =================================================================
   GreenerVI Caribbean Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: "green, clean and beautiful" — deep ocean navy, fresh leaf
   green and a bright lime, on clean white and mint, with Epilogue
   (heavy, plain-spoken) for headings and Public Sans for text.
   Motifs: images cut as a leaf (two opposite corners square, two deeply
   rounded), a lime "marker" stroke under section headings, and the leaf
   mark in the logo.
   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 + contour lines).
   ================================================================= */

:root{
  --ocean:      #0E2A47;   /* header, about band, headings, text */
  --ocean-deep: #0A1F35;   /* footer */
  --leaf:       #2FA84F;   /* accents, borders */
  --leaf-deep:  #1E7D3A;   /* buttons with white text, links */
  --lime:       #D7F171;   /* marker strokes, active menu item, highlights */
  --mint:       #EAF7EE;   /* hero / section backgrounds */
  --page:       #FFFFFF;
  --muted:      #4A5D6E;
  --line:       rgba(14,42,71,.12);

  --font-display: 'Epilogue', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Public Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --leafcut: 0 160px 0 160px;
  --leafcut-sm: 0 70px 0 70px;
}

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

h1,h2,h3{ font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--ocean); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--lime); color: var(--ocean); padding: 10px 16px; font-weight: 700; 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: 44px; height: 44px; flex: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.05; }
.brand__name{ font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; white-space: nowrap; }
.brand__vi{ color: var(--lime); }
.brand__tag{ font-size: 13px; 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__tag{ white-space: normal; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--ocean); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 700 15px/1 var(--font-body); color: var(--ocean);
  background: var(--lime); border: 0; border-radius: 0 16px 0 16px; 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: 500; font-size: 16px; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.14);
}
.bnet-menu a:hover{ color: var(--lime); }

/* 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(--lime); font-weight: 700; }

@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 11px; font-size: 15px; white-space: nowrap; border-radius: 0 12px 0 12px; }
  .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{ background: var(--lime); color: var(--ocean); }
}

/* ---------- Heroes ---------- */
.hero{ background: var(--mint); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 64px; }
.hero__copy{ max-width: 860px; }
.hero__title{
  font-size: clamp(38px, 6.4vw, 80px);
  line-height: 1.02;
  text-wrap: balance;
}
.hero__lede{ margin: 22px 0 0; max-width: 56ch; font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); }
.hero__lede a{ color: var(--leaf-deep); }
.hero__actions{ margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(34px, 5vw, 60px); }
.hero--page .hero__inner{ padding-top: 44px; padding-bottom: 56px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px; border-radius: 0 18px 0 18px;
  font: 700 16px/1.2 var(--font-body); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn--green{ background: var(--leaf-deep); color: #fff; }
.btn--green:hover{ background: var(--ocean); color: #fff; }
.btn--line{ color: var(--ocean); border: 2px solid var(--ocean); }
.btn--line:hover{ background: var(--ocean); color: #fff; }

/* the feature image, cut as a leaf (includes/banner.incl.php) */
.banner{
  margin: 40px 0 0;
  aspect-ratio: 1280 / 500;
  border-radius: var(--leafcut); overflow: hidden;
  background: var(--leaf);
}
.banner img{ width: 100%; height: 100%; object-fit: cover; }
.hero--page .banner{ aspect-ratio: 1280 / 420; margin-top: 32px; }
@media (max-width: 600px){
  .banner{ border-radius: var(--leafcut-sm); }
  .hero--page .banner{ 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,
.mission h2,
.explore h2{
  display: inline-block;
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 28px;
  background: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%);
  padding: 0 4px;
}
.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; }

/* ---------- Mission (home) ---------- */
.mission{ padding: 80px 0 16px; }
.mission__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 36px; align-items: center;
}
.mission__photo{ margin: 0; }
.mission__photo img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--leafcut-sm); }
.mission__photo figcaption{ margin-top: 10px; font-size: 14px; color: var(--muted); }
.mission h2{ margin-bottom: 18px; font-size: clamp(28px, 3vw, 36px); }
.mission p{ margin: 0; max-width: 60ch; font-size: 18px; }
.mission__sign{ margin-top: 18px !important; font-family: var(--font-display); font-weight: 600; font-size: 22px !important; color: var(--leaf-deep); letter-spacing: -0.01em; }
@media (min-width: 860px){ .mission__inner{ grid-template-columns: 1fr 1.15fr; gap: 64px; } }

/* ---------- About this blog (ocean band) ---------- */
.about-blog{ background: var(--ocean); color: rgba(255,255,255,.86); padding: 72px 0; }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.about-blog h2{ color: #fff; font-size: clamp(30px, 4vw, 46px); }
.about-blog strong{ color: #fff; }
.about-blog p{ margin: 0; max-width: 64ch; font-size: 18px; }
.about-blog .follow-label{ margin-top: 22px; font-size: 16px; color: rgba(255,255,255,.7); }
.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: 0 14px 0 14px;
  background: var(--lime); color: var(--ocean); text-decoration: none; font-weight: 700; font-size: 15px;
}
.follow a:hover{ background: #fff; color: var(--ocean); }
@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, 40px); }
.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(--ocean); }
.tile:hover{ color: var(--ocean); }
.tile__img{ display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--leafcut-sm); }
.tile__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tile:hover .tile__img img{ transform: scale(1.04); }
.tile__title{ display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -0.02em; }
.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: 600; 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: 0 14px 0 14px;
  background: #fff; border: 2px solid var(--leaf);
  transition: background-color .2s ease;
}
.share__list a:hover{ background: var(--lime); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ocean-deep); color: rgba(255,255,255,.8); font-size: 15px; border-top: 6px solid var(--lime); }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 56px 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(--lime); }
.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: 700; letter-spacing: 0; 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: 0 16px 0 16px; 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; }
  .tile__img img{ transition: none; }
}