/* =================================================================
   Chenay Bay Beach Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: an easy beach day on St. Croix — reef blue, sea glass and
   hibiscus pink on a light sea-glass background, a soft serif (Young Serif)
   with Outfit for text. Motifs: a cabana-stripe band (pink / white / sea
   glass) under the header and over the footer, and "pebble" corners
   (big round corners on two diagonal sides) on images and cards; the hero
   image floats half over the hero and half over the page.
   Deliberately different from the other network sites (oceansidebistro.net
   waves, asianrestaurantvi.com lacquer frames, baznotik.com sail slants,
   bowlingvi.com retro marquee).
   ================================================================= */

:root{
  --reef:          #0B5D7A;   /* headings, links, the bay band */
  --reef-deep:     #083F53;   /* footer */
  --seaglass:      #7FCFC0;   /* stripes, borders, accents */
  --seaglass-soft: #DFF2EE;   /* hero / about backgrounds */
  --hibiscus:      #D6336C;   /* buttons, active menu item */
  --page:          #F7FBFA;   /* page background */
  --ink:           #10313B;   /* text */
  --muted:         #4D6670;
  --line:          rgba(16,49,59,.13);

  --font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Outfit', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --pebble: 64px 14px 64px 14px;
  --pebble-sm: 36px 10px 36px 10px;
  --cabana: repeating-linear-gradient(90deg,
              var(--hibiscus) 0 28px, #fff 28px 56px,
              var(--seaglass) 56px 84px, #fff 84px 112px);
}

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

h1,h2,h3{ font-family: var(--font-display); font-weight: 400; line-height: 1.12; margin: 0; color: var(--reef); }

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

/* ---------- Brand (header + footer) ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--reef); }
.brand:hover{ color: var(--reef); }
.brand__mark{ width: 44px; height: 44px; flex: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.1; }
.brand__name{ font-family: var(--font-display); font-size: 24px; white-space: nowrap; }
.brand__tag{ font-size: 13px; color: var(--muted); 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: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
}
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cabana{ height: 10px; background: var(--cabana); }
.nav-toggle{
  margin-left: auto;
  font: 600 15px/1 var(--font-body); color: #fff;
  background: var(--reef); border: 0; border-radius: 999px; padding: 12px 20px; 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: var(--ink); text-decoration: none;
  border-top: 1px solid var(--line);
}
.bnet-menu a:hover{ color: var(--hibiscus); }

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

@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 12px; font-size: 15px; white-space: nowrap; position: relative; }
  .bnet-menu a::after{
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 4px; border-radius: 4px;
    background: var(--seaglass); opacity: 0; transition: opacity .2s ease;
  }
  .bnet-menu a:hover::after{ opacity: .6; }
  .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{ opacity: 1; }
}

/* ---------- Heroes: sea-glass band, image floating over its lower edge ---------- */
.hero{ background: var(--seaglass-soft); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 0; display: flow-root; }  /* flow-root: keeps the banner's negative margin inside, so it overlaps the next section */
.hero__copy{ max-width: 760px; }
.hero__title{
  font-size: clamp(38px, 6vw, 74px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__lede{ margin: 20px 0 0; max-width: 52ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); }
.hero__lede a{ color: var(--reef); }
.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; }
.hero--no-image .hero__inner{ padding-bottom: 56px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px; border-radius: 999px;
  font: 600 16px/1.2 var(--font-body); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--pink{ background: var(--hibiscus); color: #fff; }
.btn--pink:hover{ background: #B92559; color: #fff; }
.btn--line{ color: var(--reef); border: 2px solid var(--reef); }
.btn--line:hover{ background: var(--reef); color: #fff; }

/* the feature image, floating half over the hero (includes/banner.incl.php) */
.banner{
  position: relative; z-index: 1;
  margin: 44px 0 -110px;
  aspect-ratio: 1280 / 500;
  border-radius: var(--pebble); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(8,63,83,.45);
  background: var(--seaglass);
}
.banner img{ width: 100%; height: 100%; object-fit: cover; }
.hero--page .banner{ aspect-ratio: 1280 / 420; margin: 36px 0 -90px; }
.hero--home + .section{ padding-top: 170px; }
.hero--page:not(.hero--no-image) + .section{ padding-top: 140px; }
@media (max-width: 600px){
  .banner{ border-radius: var(--pebble-sm); margin-bottom: -60px; }
  .hero--page .banner{ aspect-ratio: 1280 / 500; margin-bottom: -50px; }
  .hero--home + .section{ padding-top: 100px; }
  .hero--page:not(.hero--no-image) + .section{ padding-top: 90px; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 56px 0 80px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{ font-size: clamp(30px, 4vw, 46px); 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; }

/* ---------- Chenay Bay band (home) ---------- */
.bay{ background: var(--reef); color: #fff; padding: 64px 0; }
.bay__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 28px; align-items: center;
}
.bay h2{ color: #fff; font-size: clamp(30px, 4vw, 46px); margin-bottom: 12px; }
.bay p{ margin: 0; max-width: 52ch; font-size: 19px; color: rgba(255,255,255,.88); }
.bay__card{
  display: block; background: #fff; color: var(--ink); text-decoration: none;
  border-radius: var(--pebble-sm); padding: 22px 26px;
  border-left: 10px solid var(--hibiscus);
  transition: transform .2s ease;
}
.bay__card:hover{ color: var(--ink); transform: translateY(-3px); }
.bay__card strong{ display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--reef); line-height: 1.15; }
.bay__card span{ display: block; margin-top: 6px; color: var(--muted); }
@media (min-width: 860px){ .bay__inner{ grid-template-columns: 1.3fr 1fr; gap: 56px; } }

/* ---------- Why we write this blog ---------- */
.about-blog{ background: var(--seaglass-soft); padding: 72px 0; }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.about-blog h2{ font-size: clamp(30px, 4vw, 46px); max-width: 12ch; }
.about-blog p{ margin: 0; max-width: 64ch; font-size: 18px; }
.about-blog .follow-label{ margin-top: 22px; 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 20px; border-radius: 999px;
  background: #fff; color: var(--reef); text-decoration: none; font-weight: 600; font-size: 15px;
  border: 2px solid var(--seaglass);
}
.follow a:hover{ background: var(--hibiscus); border-color: var(--hibiscus); 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(28px, 3.6vw, 40px); 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; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--pebble-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-size: 26px; line-height: 1.15; color: var(--reef); }
.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: 500; 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: 50%;
  background: #fff; border: 2px solid var(--seaglass);
  transition: border-color .2s ease;
}
.share__list a:hover{ border-color: var(--hibiscus); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--reef-deep); color: rgba(255,255,255,.8); font-size: 15px; }
.site-footer::before{ content: ""; display: block; height: 10px; background: var(--cabana); }
.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(--seaglass); }
.site-footer .brand, .site-footer .brand:hover{ color: #fff; }
.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: 600; 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: var(--pebble-sm); 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, .bay__card, .bnet-menu a::after{ transition: none; }
}