/* =================================================================
   Paradise Rentals PR Caribbean Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: the old eBike / bicycle / scooter rental in San Juan —
   night-ride navy, "charging" electric lime, Old San Juan adoquín
   blue-grey, and white. Sora (geometric, techy) for headings, Rubik for
   text.
   Motifs: a bike-lane strip (asphalt with a dashed lane line and a lime
   edge line) under the header and over the footer; a battery-charge
   indicator (three lime bars) as the current menu item marker and in the
   kicker; feature images with a lime "charging" frame and a dotted route
   line with stops underneath; route lines with stops (dot-dash-dot) for
   section titles; adoquín blue-grey on the dark band. Pill buttons.
   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).
   ================================================================= */

:root{
  --night:    #12223A;   /* header, footer, pier band */
  --night-2:  #1B3050;
  --lime:     #C8F03C;   /* electric lime: primary button, charge bars, route */
  --lime-dk:  #9DC21B;
  --adoquin:  #5D7C93;   /* Old San Juan cobblestone blue-grey */
  --sky:      #EEF4F7;   /* heroes, about band */
  --ink:      #12223A;
  --muted:    #556676;
  --line:     rgba(18,34,58,.14);

  --font-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Rubik', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  /* bike lane: asphalt, a lime edge line and a dashed white lane line */
  --lane: linear-gradient(var(--lime), var(--lime)) 0 2px / 100% 3px no-repeat,
          repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 26px, transparent 26px 46px) 0 11px / 100% 3px no-repeat,
          #26303B;
  /* a route line with stops */
  --route: radial-gradient(circle, var(--lime) 0 5px, transparent 5.5px) 0 50% / 12px 12px no-repeat,
           radial-gradient(circle, var(--lime) 0 5px, transparent 5.5px) 100% 50% / 12px 12px no-repeat,
           repeating-linear-gradient(90deg, var(--adoquin) 0 6px, transparent 6px 11px) 12px 50% / calc(100% - 24px) 2px no-repeat;
}

*,*::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: #2F6F9A; }
a:hover{ color: var(--ink); }
:focus-visible{ outline: 3px solid var(--lime-dk); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 800; line-height: 1.06; margin: 0; color: var(--night); letter-spacing: -.03em; }
h1 em, h2 em{ font-style: normal; color: var(--night); background: linear-gradient(transparent 62%, var(--lime) 62% 92%, transparent 92%); padding: 0 .06em; }

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

/* battery charge indicator */
.charge{ display: inline-flex; gap: 2px; padding: 2px; margin-right: 8px; border: 2px solid currentColor; border-radius: 4px; vertical-align: -2px; position: relative; }
.charge::after{ content: ""; position: absolute; right: -6px; top: 50%; width: 3px; height: 6px; margin-top: -3px; background: currentColor; border-radius: 0 2px 2px 0; }
.charge i{ display: block; width: 5px; height: 9px; background: var(--lime-dk); border-radius: 1px; }

/* ---------- 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.05; }
.brand__name{ font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.03em; white-space: nowrap; }
.brand__name em{ font-style: normal; color: var(--lime); }
.brand__tag{ font-size: 13px; color: rgba(255,255,255,.66); margin-top: 3px; white-space: nowrap; }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .site-header .brand__name{ font-size: 20px; }
  .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(--night); }
.site-header::after{ content: ""; display: block; height: 16px; background: var(--lane); }
.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: 700 15px/1 var(--font-display); color: var(--night);
  background: var(--lime); 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: 16.5px; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.12);
}
.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: 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 15px; font-size: 15.5px; white-space: nowrap; position: relative; }
  /* the current page gets a full battery: three lime bars */
  .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: 3px; width: 23px; height: 6px; margin-left: -11.5px;
    background: repeating-linear-gradient(90deg, var(--lime) 0 6px, transparent 6px 8.5px);
  }
  .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(--sky); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 54px var(--gutter) 70px; }
.hero__copy{ max-width: 880px; }
.hero__kicker{ margin: 0 0 16px; font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--adoquin); }
.hero__title{
  font-size: clamp(38px, 6vw, 74px);
  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: #2F6F9A; }
.hero__actions{ margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(34px, 4.8vw, 58px); }
.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 28px; border-radius: 999px;
  font: 700 16px/1.2 var(--font-display); letter-spacing: -.01em; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn--lime{ background: var(--lime); color: var(--night); }
.btn--lime:hover{ background: #D9FF55; color: var(--night); box-shadow: 0 0 0 4px rgba(200,240,60,.35); }
.btn--line{ color: var(--night); border: 2px solid var(--night); }
.btn--line:hover{ background: var(--night); color: #fff; }

/* the feature image with a charging-lime frame and a route line (includes/banner.incl.php) */
.banner{ margin: 40px 0 0; }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 4px var(--lime), 0 0 0 9px var(--night); }
.banner::after{ content: ""; display: block; height: 12px; margin: 22px 9px 0; background: var(--route); }
.hero--page .banner{ margin-top: 34px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner{ margin-left: 9px; margin-right: 9px; }
  .banner img{ border-radius: 14px; box-shadow: 0 0 0 3px var(--lime), 0 0 0 7px var(--night); }
  .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::after, .about-blog h2::after, .explore h2::after{
  content: ""; display: block; width: 130px; height: 12px; margin-top: 14px; background: var(--route);
}
.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; }

/* ---------- Pier 2, Old San Juan (home) ---------- */
.pier{
  /* a faint adoquín (cobblestone brick-bond) texture */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px),
    var(--night);
  color: rgba(255,255,255,.84); padding: 80px 0;
}
.pier__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.pier__kicker{ margin: 0 0 12px; font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.pier h2{ color: #fff; font-size: clamp(32px, 4vw, 48px); margin-bottom: 14px; }
.pier p{ margin: 0 0 14px; max-width: 52ch; font-size: 18.5px; }
.pier .pier__route-label{ margin: 22px 0 0; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--adoquin); }
.pier__route{ list-style: none; margin: 10px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.pier__route li{ position: relative; padding: 0 30px 0 18px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; }
.pier__route li::before{ content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--lime); }
.pier__route li:not(:last-child)::after{ content: ""; position: absolute; right: 6px; top: 50%; width: 16px; border-top: 2px dashed var(--adoquin); }
@media (max-width: 600px){
  .pier__route{ flex-direction: column; gap: 0; }
  .pier__route li{ padding: 4px 0 4px 22px; }
  .pier__route li::before{ left: 0; }
  .pier__route li:not(:last-child)::after{ right: auto; left: 4px; top: calc(50% + 7px); width: 0; height: 16px; border-top: 0; border-left: 2px dashed var(--adoquin); }
}
.pier__photo{ margin: 0; justify-self: center; max-width: 440px; width: 100%; }
.pier__photo img{ width: 100%; border-radius: 22px; box-shadow: 0 0 0 4px var(--lime), 0 0 0 9px var(--night-2); }
@media (min-width: 860px){ .pier__inner{ grid-template-columns: 1.3fr 1fr; gap: 64px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--sky); 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 20px; border-radius: 999px;
  background: var(--night); color: #fff; text-decoration: none; font: 600 15.5px/1.4 var(--font-display);
}
.follow a:hover{ background: var(--lime); color: var(--night); }
@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; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px var(--night); transition: box-shadow .2s ease; }
.tile:hover .tile__img{ box-shadow: 0 0 0 3px var(--night), 0 0 0 7px var(--lime); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.tile__title{ display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -.03em; line-height: 1.15; }
.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(--night);
  transition: box-shadow .2s ease;
}
.share__list a:hover{ box-shadow: 0 0 0 3px var(--lime); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--night); color: rgba(255,255,255,.78); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 16px; background: var(--lane); }
.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: var(--lime); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--lime); 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: 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; }
}