/* =================================================================
   Villa Rental St. Thomas Caribbean Blog — site stylesheet (2026)
   One file for the whole site. Mobile-first. Tokens in :root.
   For now the site only features the Caribbean blog (the villa site is
   archived until the client wants to continue).
   Identity: the Island Life logo — a navy palm leaf on a golden sun over
   a script "Island Life" and a gold-and-blue wave line — at sunrise on
   St. Thomas' south shore.
   Palette: night navy, sunrise gold, soft cream, sea blue and shallow
   aqua. Type: Prata (elegant serif display) for headings, Lexend for
   labels, menu, buttons and text.
   Motifs: the logo's horizon line (--horizon: a gold arc over two blue
   waves) under the header, over the footer and as a divider; a palm
   leaf on a gold sun (--sunleaf) above section titles, in the kicker and
   as the current-menu marker; photos with a golden "sun" disc rising
   from behind their top-right corner; partner logos as round badges on
   the promotion photos.
   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, northsidebistro.com veranda railings,
   paradiserentalspr.com bike lanes, sanjuanwatertours.com signal flags,
   racersclubpr.com runway markings, saffronhouseexuma.com Exuma shallows,
   seaplanesinparadise.com flight paths, secrethavenvilla.com palm shade,
   antiguacarrentals.com rising-sun pennants).
   ================================================================= */

:root{
  --cream:   #FBF4E2;   /* header, heroes */
  --cream-2: #F5E7C4;
  --gold:    #F0C068;   /* logo sun */
  --amber:   #E8A33D;
  --navy:    #0A1A3A;   /* logo leaf + script: headings, footer, bands */
  --navy-2:  #14295A;
  --sea:     #2D6E9E;   /* links, accents */
  --aqua:    #7FC4D6;
  --ink:     #1B2233;
  --muted:   #5E6676;
  --line:    rgba(10,26,58,.13);

  --font-display: 'Prata', Georgia, 'Times New Roman', serif;
  --font-label:   'Lexend', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Lexend', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --sunleaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='34' cy='26' r='22' fill='%23F0C068'/%3E%3Cpath d='M8 56C12 32 28 12 54 6C48 30 32 48 8 56Z' fill='%230A1A3A'/%3E%3Cg stroke='%23F0C068' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M18 44l-5 -9'/%3E%3Cpath d='M23 38l-5 -9'/%3E%3Cpath d='M28 32l-5 -9'/%3E%3Cpath d='M33 26l-5 -9'/%3E%3Cpath d='M38 20l-5 -9'/%3E%3Cpath d='M43 15l-5 -9'/%3E%3Cpath d='M16 46l9 3'/%3E%3Cpath d='M21 40l9 3'/%3E%3Cpath d='M26 34l9 3'/%3E%3Cpath d='M31 28l9 3'/%3E%3Cpath d='M36 22l9 3'/%3E%3Cpath d='M41 17l9 3'/%3E%3C/g%3E%3Cpath d='M8 56L52 8' stroke='%23F0C068' stroke-width='1.4'/%3E%3C/svg%3E");
  --horizon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q200 -2 400 4' fill='none' stroke='%23E8A33D' stroke-width='3'/%3E%3Cpath d='M0 11C50 7 100 15 150 11S250 7 300 11 350 15 400 11' fill='none' stroke='%232D6E9E' stroke-width='3'/%3E%3Cpath d='M0 17C50 13 100 21 150 17S250 13 300 17 350 21 400 17' fill='none' stroke='%237FC4D6' stroke-width='2.4'/%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-weight: 300;
  font-size: 18px;
  line-height: 1.7;
}
strong{ font-weight: 600; }
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--sea); }
a:hover{ color: var(--amber); }
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 400; line-height: 1.12; margin: 0; color: var(--navy); }
h1 em, h2 em{ font-style: normal; color: var(--sea); }

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

.sunleaf{ display: inline-block; width: 26px; height: 26px; margin-right: 10px; vertical-align: -7px; background: var(--sunleaf) 0 0 / 100% 100% no-repeat; }

/* ---------- Brand (header + footer): Island Life logo + name ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand:hover{ color: var(--navy); }
.brand__logo{ height: 62px; width: auto; flex: none; }
.brand__logo--light{ display: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__name{ font: 400 22px/1.1 var(--font-display); white-space: nowrap; }
.brand__tag{ margin-top: 4px; font: 500 11.5px/1.2 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.site-footer .brand{ color: #fff; }
.site-footer .brand__logo--dark{ display: none; }
.site-footer .brand__logo--light{ display: block; height: 78px; }
.site-footer .brand__tag{ color: var(--gold); }
@media (max-width: 480px){
  .brand{ max-width: 100%; }
  .site-header .brand{ flex: 1 1 0; min-width: 0; gap: 9px; }
  .site-header .brand__logo{ height: 50px; }
  .brand__name{ font-size: 18px; white-space: normal; }
  .brand__tag{ font-size: 10px; letter-spacing: .12em; white-space: normal; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: rgba(251,244,226,.97); backdrop-filter: blur(6px); }
.site-header::after{ content: ""; display: block; height: 14px; background: var(--horizon) 0 0 / 400px 14px repeat-x; }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter) 6px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 500 14px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  background: var(--navy); border: 0; border-radius: 999px; padding: 13px 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: 6px 0 12px; }
.bnet-menu a{
  display: block; padding: 12px 2px;
  font: 500 15px/1.3 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); text-decoration: none;
  border-top: 1px solid var(--line);
}
.bnet-menu a:hover{ color: var(--sea); }

/* 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); }

@media (min-width: 1280px){
  /* full menu only when logo + menu fit side by side (header can be a little wider than the page content) */
  .site-header__inner{ max-width: 1280px; flex-wrap: nowrap; }
  .site-header .brand{ flex: none; }
  .site-nav, .js .site-nav{ display: block; flex-basis: auto; margin-left: auto; min-width: 0; }
  .nav-toggle{ display: none; }
  .bnet-menu{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 0; }
  .bnet-menu a{ border-top: 0; padding: 8px 7px 24px; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; position: relative; }
  /* the current page gets the palm leaf on a gold sun */
  .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: 2px; width: 18px; height: 18px; margin-left: -9px;
    background: var(--sunleaf) 0 0 / 100% 100% no-repeat;
  }
  .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(--navy); }
}

/* ---------- Heroes: cream sunrise ---------- */
.hero{ background: radial-gradient(120% 90% at 85% 0%, #FFE3A6 0%, rgba(255,227,166,0) 55%), linear-gradient(180deg, var(--cream) 0%, #fff 100%); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 72px; }
.hero__copy{ max-width: 900px; }
.hero__kicker{ margin: 0 0 16px; font: 500 14px/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--sea); }
.hero__title{ font-size: clamp(36px, 5.4vw, 66px); 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(--sea); }
.hero__actions{ margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(34px, 4.8vw, 56px); }
.hero--page .hero__inner{ padding-top: 48px; padding-bottom: 62px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px; border-radius: 999px;
  font: 500 14.5px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn--navy{ background: var(--navy); color: var(--gold); }
.btn--navy:hover{ background: var(--navy-2); color: #fff; box-shadow: 0 10px 22px -12px rgba(10,26,58,.8); }
.btn--sun{ background: var(--gold); color: var(--navy); }
.btn--sun:hover{ background: #fff; color: var(--navy); }
.btn--line{ color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--line:hover{ background: var(--navy); color: var(--gold); }
.btn--line-light{ color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn--line-light:hover{ background: #fff; color: var(--navy); }

/* photos with a golden sun rising from behind the top-right corner (includes/banner.incl.php etc.) */
.banner, .shore__photo, .tile__img{ position: relative; isolation: isolate; }
.banner::before, .shore__photo::before, .tile__img::before{
  content: ""; position: absolute; z-index: -1; right: -26px; top: -26px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 40% 60%, #FFD98A 0%, var(--gold) 55%, var(--amber) 100%);
}
.banner{ margin: 44px 26px 0 0; }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 50px -34px rgba(10,26,58,.75); }
.banner::after{ content: ""; display: block; height: 14px; margin-top: 16px; background: var(--horizon) 0 0 / 400px 14px repeat-x; }
.hero--page .banner{ margin-top: 36px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 45%; }
@media (max-width: 600px){
  .banner{ margin-right: 14px; }
  .banner::before, .shore__photo::before, .tile__img::before{ width: 72px; height: 72px; right: -14px; top: -14px; }
  .banner img{ border-radius: 14px; }
  .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; }
.section__title::before, .about-blog h2::before, .explore h2::before, .outings h2::before{
  content: ""; display: block; width: 34px; height: 34px; margin-bottom: 12px; background: var(--sunleaf) 0 0 / 100% 100% no-repeat;
}
.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; }

/* ---------- By boat or by jeep (home): the two promotions ---------- */
.outings{ position: relative; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: rgba(255,255,255,.88); padding: 84px 0 90px; }
.outings::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--horizon) 0 0 / 400px 14px repeat-x; opacity: .9; }
.outings__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.outings__kicker{ margin: 0 0 6px; font: 500 13.5px/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); }
.outings h2{ color: #fff; font-size: clamp(32px, 4vw, 48px); margin-bottom: 12px; }
.outings h2 em{ color: var(--gold); }
.outings__intro{ margin: 0 0 36px; max-width: 60ch; }
.outings__grid{ display: grid; gap: 30px; }
.outing{ display: flex; flex-direction: column; background: rgba(255,255,255,.06); border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(240,192,104,.3); }
.outing__photo{ position: relative; margin: 0; }
.outing__photo > img:first-child{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px 24px 0 0; }
.outing__badge{
  position: absolute; right: 18px; bottom: -40px; width: 96px; height: 96px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 6px; box-shadow: 0 0 0 4px var(--gold), 0 14px 24px -12px rgba(0,0,0,.6);
}
.outing__badge--wide{ padding: 10px; }
.outing__body{ display: flex; flex-direction: column; flex: 1; padding: 26px 24px 28px; }
.outing__label{ margin: 0 0 8px; padding-right: 110px; font: 500 12.5px/1.4 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.outing h3{ color: #fff; font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 10px; padding-right: 96px; }
.outing p{ margin: 0 0 14px; }
.outing__list{ list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 7px; font-size: 16.5px; }
.outing__list li{ position: relative; padding-left: 24px; }
.outing__list li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 -4px 0 var(--amber); }
.outing__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0 !important; }
@media (min-width: 880px){ .outings__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){
  .outing__badge{ width: 78px; height: 78px; bottom: -30px; right: 14px; }
  .outing__label, .outing h3{ padding-right: 0; }
  .outing__body{ padding-top: 40px; }
}

/* ---------- Island Life on St. Thomas (home) ---------- */
.shore{ background: var(--cream); padding: 88px 0; }
.shore__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 44px; align-items: center;
}
.shore__photo{ margin: 26px 26px 0 0; }
.shore__photo img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 50px -34px rgba(10,26,58,.75); }
.shore__logo{ width: 110px; margin-bottom: 16px; }
.shore h2{ font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 14px; }
.shore p{ margin: 0 0 16px; max-width: 56ch; }
@media (min-width: 900px){ .shore__inner{ grid-template-columns: 1fr 1.05fr; gap: 64px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: #fff; padding: 76px 0 72px; border-top: 1px solid var(--line); }
.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: 500 13px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; 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: 10px 22px; border-radius: 999px;
  background: var(--navy); color: var(--gold); text-decoration: none; font: 500 13.5px/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
}
.follow a:hover{ background: var(--sea); color: #fff; }
@media (min-width: 860px){ .about-blog__inner{ grid-template-columns: 1fr 2fr; gap: 56px; } }

/* ---------- Keep exploring ---------- */
.explore{ padding: 72px 0 32px; background: var(--cream); }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{ font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 34px; }
.explore__grid{ display: grid; gap: 40px; }
@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; margin: 0 16px 0 0; transition: transform .25s ease; }
.tile__img::before{ width: 80px; height: 80px; right: -16px; top: -16px; }
.tile:hover .tile__img{ transform: translateY(-4px); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 40px -30px rgba(10,26,58,.75); }
.tile__title{ display: block; margin-top: 16px; font: 400 25px/1.2 var(--font-display); color: var(--navy); }
.tile:hover .tile__title{ color: var(--sea); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 80px; background: var(--cream); }
.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: 500 13px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; 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; box-shadow: 0 0 0 1.5px var(--line);
  transition: box-shadow .2s ease;
}
.share__list a:hover{ box-shadow: 0 0 0 2px var(--gold); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 14px; background: var(--cream) var(--horizon) 0 0 / 400px 14px repeat-x; }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer__inner > *{ min-width: 0; }
.site-footer a{ color: #fff; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--gold); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font: 500 13.5px/1.4 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.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: 12px; 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; }
}