/* =================================================================
   La Pause Caribbean Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: an evening on the terrace in Village Créole — dusk plum,
   lantern amber, a little passion-fruit coral and lime, with
   DM Serif Display (headings) and Manrope (text).
   Motifs: a string of glowing lanterns (--lights) under the header and
   over the footer; the white tent canopy of the old La Pause terrace as
   a row of canopy peaks (--canopy) on section edges and as the peaked
   top of the feature images; the current menu item gets a lit lantern.
   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).
   ================================================================= */

:root{
  --plum:       #2A1838;   /* header, headings, dark bands */
  --plum-deep:  #1B0F25;   /* footer */
  --amber:      #F0A63A;   /* lanterns, primary button */
  --amber-deep: #D98A1C;
  --coral:      #E2574C;   /* hover, accents */
  --lime:       #B5C94A;   /* small accents */
  --cream:      #FFF6EA;   /* hero / about background */
  --ink:        #251B2E;   /* text */
  --muted:      #5E5266;
  --line:       rgba(37,27,46,.13);

  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  /* string of lights: a sagging wire with an amber lantern in each dip (tile 60x22) */
  --lights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 22'%3E%3Cpath d='M0 3 Q30 15 60 3' fill='none' stroke='%23FFF6EA' stroke-opacity='.35' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='14' r='6' fill='%23F0A63A' fill-opacity='.28'/%3E%3Ccircle cx='30' cy='14' r='3.4' fill='%23F0A63A'/%3E%3Ccircle cx='29' cy='13' r='1.2' fill='%23FFF6EA'/%3E%3C/svg%3E");
  /* canopy peaks (tile 80x20), drawn in cream; used over dark bands */
  --canopy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H80V20Q60 18 40 1Q20 18 0 20Z' fill='%23FFF6EA'/%3E%3C/svg%3E");
  --canopy-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H80V20Q60 18 40 1Q20 18 0 20Z' fill='%23ffffff'/%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: 17.5px;
  line-height: 1.7;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: #8A3A6A; }
a:hover{ color: var(--coral); }
:focus-visible{ outline: 3px solid var(--amber); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; color: var(--plum); letter-spacing: -.005em; }
h1 em, h2 em{ font-style: italic; color: var(--coral); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--amber); color: var(--plum); 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: var(--cream); }
.brand:hover{ color: var(--cream); }
.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-size: 31px; white-space: nowrap; }
.brand__name em{ color: var(--amber); }
.brand__tag{ font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,246,234,.66); 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(--plum); }
.site-header::after{ content: ""; display: block; height: 22px; background: var(--lights) repeat-x 0 0 / 60px 22px, var(--plum); }
.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(--plum);
  background: var(--amber); 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: 600; font-size: 16.5px; color: var(--cream); text-decoration: none;
  border-top: 1px solid rgba(255,246,234,.14);
}
.bnet-menu a:hover{ color: var(--amber); }

/* 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(--amber); 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 12px; font-size: 15.5px; white-space: nowrap; position: relative; }
  /* the current page gets a lit lantern */
  .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: 50%; bottom: 0; width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%; background: var(--amber);
    box-shadow: 0 0 0 4px rgba(240,166,58,.25), 0 0 14px 4px rgba(240,166,58,.55);
  }
}

/* ---------- Heroes ---------- */
.hero{ background: var(--cream); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gutter) 72px; }
.hero__copy{ max-width: 860px; }
.hero__kicker{
  margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
.hero__title{
  font-size: clamp(40px, 6.4vw, 80px);
  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: #8A3A6A; }
.hero__actions{ margin: 30px 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: 56px; padding-bottom: 60px; }

/* home: dusk over the bay */
.hero--home{
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(240,166,58,.22), transparent 70%),
    linear-gradient(180deg, var(--plum) 0%, #4A2347 55%, #7A3346 100%);
}
.hero--home .hero__title{ color: var(--cream); }
.hero--home .hero__lede{ color: rgba(255,246,234,.82); }
.hero--home .btn--line{ color: var(--cream); border-color: rgba(255,246,234,.7); }
.hero--home .btn--line:hover{ background: var(--cream); color: var(--plum); }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 28px; border-radius: 999px;
  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--amber{ background: var(--amber); color: var(--plum); box-shadow: 0 0 0 0 rgba(240,166,58,0); }
.btn--amber:hover{ background: #FFB851; color: var(--plum); box-shadow: 0 0 24px 2px rgba(240,166,58,.45); }
.btn--line{ color: var(--plum); border: 2px solid var(--plum); }
.btn--line:hover{ background: var(--plum); color: var(--cream); }

/* the feature image under a canopy peak (includes/banner.incl.php).
   The peak only trims the top edge; the 1280x500 composites stay uncropped side to side. */
.banner{
  margin: 44px 0 0;
  filter: drop-shadow(0 26px 34px rgba(42,24,56,.35));
}
.banner img{
  width: 100%; aspect-ratio: 1280 / 500; object-fit: cover;
  clip-path: polygon(0 7%, 50% 0, 100% 7%, 100% 100%, 0 100%);
  border-radius: 0 0 22px 22px;
}
.hero--home .banner{ filter: drop-shadow(0 0 40px rgba(240,166,58,.35)); }
.hero--page .banner{ margin-top: 36px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner img{ border-radius: 0 0 14px 14px; }
  .hero--page .banner img{ aspect-ratio: 1280 / 500; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 68px 0 84px; }
.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; }
.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 Village Créole (home) ---------- */
.village{ background: var(--canopy-white) repeat-x 0 0 / 80px 20px, var(--plum); color: rgba(255,246,234,.86); padding: 84px 0 72px; }
.village__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 32px; align-items: center;
}
.village__photo{ margin: 0; max-width: 340px; }
.village__photo img{ border-radius: 18px; box-shadow: 0 0 0 6px rgba(240,166,58,.35), 0 0 50px rgba(240,166,58,.3); }
.village h2{ color: var(--cream); font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 12px; }
.village p{ margin: 0; max-width: 50ch; font-size: 19px; }
.village__card{
  display: block; margin-top: 26px; max-width: 460px; text-decoration: none; color: var(--ink);
  background: var(--cream); border-radius: 18px; padding: 20px 24px;
  border-left: 6px solid var(--lime);
  transition: transform .2s ease;
}
.village__card:hover{ color: var(--ink); transform: translateY(-3px); }
.village__card strong{ display: block; font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.2; color: var(--plum); }
.village__card span{ display: block; margin-top: 6px; color: var(--muted); font-weight: 600; }
@media (min-width: 860px){ .village__inner{ grid-template-columns: 340px 1fr; gap: 64px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--cream); padding: 80px 0 76px; }
.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 h2::after{ content: ""; display: block; width: 120px; height: 22px; margin-top: 14px; background: var(--lights) repeat-x 0 0 / 60px 22px; filter: brightness(.55) saturate(1.6); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font-size: 15.5px; font-weight: 600; 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 22px; border-radius: 999px;
  background: var(--plum); color: var(--cream); text-decoration: none; font-weight: 800; font-size: 15.5px;
}
.follow a:hover{ background: var(--coral); color: #fff; }
@media (min-width: 860px){ .about-blog__inner{ grid-template-columns: 1fr 2fr; gap: 56px; } }

/* ---------- Keep exploring ---------- */
.explore{ padding: 76px 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; overflow: hidden; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .4s ease; clip-path: polygon(0 6%, 50% 0, 100% 6%, 100% 100%, 0 100%); }
.tile:hover .tile__img img{ transform: scale(1.03); }
.tile__title{ display: block; margin-top: 14px; font-family: var(--font-display); font-size: 28px; color: var(--plum); line-height: 1.15; }
.tile:hover .tile__title{ color: var(--coral); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 84px; }
.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: 50px; height: 50px; border-radius: 50%;
  background: #fff; border: 2px solid var(--plum);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.share__list a:hover{ border-color: var(--amber); box-shadow: 0 0 16px rgba(240,166,58,.5); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--canopy-white) repeat-x 0 0 / 80px 20px, var(--plum-deep); color: rgba(255,246,234,.78); font-size: 15.5px; padding-top: 20px; }
.site-footer::before{ content: ""; display: block; height: 22px; margin-top: 10px; background: var(--lights) repeat-x 30px 0 / 60px 22px; }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 44px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer a{ color: var(--cream); text-decoration-color: rgba(255,246,234,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--amber); }
.site-footer .brand__tag{ color: rgba(255,246,234,.6); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font-family: var(--font-body); font-size: 17px; font-weight: 800; color: var(--cream); 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: 14px; 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; }
  .village__card, .tile__img img{ transition: none; }
}