/* =================================================================
   San Juan Water Tours Caribbean Blog — site stylesheet (2026)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: a day on the water in San Juan Bay — deep harbour blue,
   the bright colours of international maritime signal flags (flag blue,
   signal red, signal yellow, white), and a sandy deck. Zilla Slab
   (nautical slab serif) for headings, Libre Franklin for text.
   Motifs: a line of signal flags ("dressing ship", --flags) under the
   header, over the footer and on the Sail Snorkel Party card; a twisted
   rope (--rope) as the frame of feature images and tiles and as the rule
   under section titles; a small signal pennant marking the current menu
   item. Rounded, chunky buttons. A small Puerto Rico flag (--pr-flag)
   appears subtly in the home hero kicker and the footer copyright line.
   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).
   ================================================================= */

:root{
  --harbour:   #0B3954;   /* header, footer, sail band, headings */
  --harbour-2: #0F4A6C;
  --flag-blue: #1F5FA8;
  --red:       #D7263D;   /* signal red */
  --sun:       #FFC914;   /* signal yellow: primary button */
  --deck:      #F4EFE6;   /* sandy deck: heroes, about band */
  --rope-a:    #C9A46A;
  --rope-b:    #9C7A44;
  --ink:       #10222F;
  --muted:     #566572;
  --line:      rgba(16,34,47,.14);

  --font-display: 'Zilla Slab', Rockwell, Georgia, serif;
  --font-body:    'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  /* signal flags on a halyard: S, J, W, T, Q (tile 150x30) */
  --flags: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 30'%3E%3Cpath d='M0 4H150' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.2'/%3E%3Cg transform='translate(4 6)'%3E%3Crect width='22' height='18' fill='%23fff'/%3E%3Crect x='6' y='5' width='10' height='8' fill='%231F5FA8'/%3E%3C/g%3E%3Cg transform='translate(34 6)'%3E%3Crect width='22' height='18' fill='%231F5FA8'/%3E%3Crect y='6' width='22' height='6' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(64 6)'%3E%3Crect width='22' height='18' fill='%231F5FA8'/%3E%3Crect x='4' y='4' width='14' height='10' fill='%23fff'/%3E%3Crect x='8' y='7' width='6' height='4' fill='%23D7263D'/%3E%3C/g%3E%3Cg transform='translate(94 6)'%3E%3Crect width='8' height='18' fill='%23D7263D'/%3E%3Crect x='7' width='8' height='18' fill='%23fff'/%3E%3Crect x='14' width='8' height='18' fill='%231F5FA8'/%3E%3C/g%3E%3Cg transform='translate(124 6)'%3E%3Crect width='22' height='18' fill='%23FFC914'/%3E%3C/g%3E%3C/svg%3E");
  /* a small Puerto Rico flag (30x20), used sparingly: hero kicker + footer copyright */
  --pr-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect width='30' height='4' fill='%23E0303F'/%3E%3Crect y='8' width='30' height='4' fill='%23E0303F'/%3E%3Crect y='16' width='30' height='4' fill='%23E0303F'/%3E%3Cpath d='M0 0L17.3 10L0 20Z' fill='%231F5BB8'/%3E%3Cpath d='M5.90 6.60 L6.69 8.91 L9.13 8.95 L7.18 10.42 L7.90 12.75 L5.90 11.35 L3.90 12.75 L4.62 10.42 L2.67 8.95 L5.11 8.91Z' fill='%23fff'/%3E%3C/svg%3E");
  --rope: repeating-linear-gradient(-55deg, var(--rope-a) 0 5px, var(--rope-b) 5px 7px, #E3C792 7px 10px);
}

*,*::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: var(--flag-blue); }
a:hover{ color: var(--red); }
:focus-visible{ outline: 3px solid var(--sun); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 700; line-height: 1.04; margin: 0; color: var(--harbour); letter-spacing: -.01em; }
h1 em, h2 em{ font-style: italic; font-weight: 500; color: var(--red); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--sun); color: var(--harbour); 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.04; }
.brand__name{ font-family: var(--font-display); font-weight: 700; font-size: 27px; white-space: nowrap; }
.brand__tag{ font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.68); margin-top: 3px; white-space: nowrap; }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .brand__name{ font-size: 21px; white-space: normal; }
  .brand__tag{ white-space: normal; letter-spacing: .03em; }
}
.site-footer .brand__tag{ white-space: normal; }
.site-footer__inner > *{ min-width: 0; }

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--harbour); }
.site-header::after{ content: ""; display: block; height: 30px; background: var(--flags) repeat-x 0 0 / 150px 30px, var(--harbour); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter) 4px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 700 15px/1 var(--font-body); color: var(--harbour);
  background: var(--sun); border: 0; border-radius: 10px; 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: 600; font-size: 16.5px; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.14);
}
.bnet-menu a:hover{ color: var(--sun); }

/* 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(--sun); 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 8px 16px; font-size: 15px; white-space: nowrap; position: relative; }
  .site-header .brand__name{ font-size: 24px; }
  .site-header .brand__tag{ font-size: 11.5px; }
  /* the current page gets a small yellow-and-red signal pennant */
  .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: 22px; height: 10px; margin-left: -11px;
    background: linear-gradient(var(--sun) 0 50%, var(--red) 50% 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .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(--deck); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 70px; }
.hero__copy{ max-width: 880px; }
.hero__kicker{ margin: 0 0 16px; font-weight: 700; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hero__title{
  font-size: clamp(40px, 6.2vw, 78px);
  text-wrap: balance;
}
.pr-flag{ display: inline-block; width: 21px; height: 14px; margin-right: 8px; vertical-align: -2px; background: var(--pr-flag) 0 0 / 100% 100%; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.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(--flag-blue); }
.hero__actions{ margin: 28px 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: 46px; padding-bottom: 62px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 26px; border-radius: 12px;
  font: 700 16.5px/1.2 var(--font-body); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn--sun{ background: var(--sun); color: var(--harbour); box-shadow: 0 4px 0 #D9A600; }
.btn--sun:hover{ background: #FFD54A; color: var(--harbour); transform: translateY(-1px); }
.btn--line{ color: var(--harbour); border: 2px solid var(--harbour); }
.btn--line:hover{ background: var(--harbour); color: #fff; }
.btn--line-light{ color: #fff; border: 2px solid rgba(255,255,255,.75); }
.btn--line-light:hover{ background: #fff; color: var(--harbour); }

/* the feature image in a rope frame (includes/banner.incl.php) */
.banner{ margin: 40px 0 0; padding: 10px; border-radius: 26px; background: var(--rope); box-shadow: 0 22px 40px -26px rgba(11,57,84,.6); }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 17px; }
.hero--page .banner{ margin-top: 34px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner{ padding: 7px; border-radius: 18px; }
  .banner img{ border-radius: 12px; }
  .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(34px, 4.2vw, 50px); margin-bottom: 28px; }
.section__title::after, .about-blog h2::after, .explore h2::after{
  content: ""; display: block; width: 120px; height: 7px; margin-top: 14px; border-radius: 4px; background: var(--rope);
}
.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; }

/* ---------- Sail Snorkel Party (home) ---------- */
.sail{
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(31,95,168,.45), transparent 60%),
    var(--harbour);
  color: rgba(255,255,255,.86); padding: 80px 0;
}
.sail__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.sail__kicker{ margin: 0 0 12px; font-weight: 700; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
.sail h2{ color: #fff; font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 16px; }
.sail h2 em{ color: var(--sun); }
.sail p{ margin: 0 0 14px; max-width: 54ch; font-size: 18.5px; }
.sail .sail__quote{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 24px; color: #fff; }
.sail__list{ list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 10px; }
.sail__list li{ position: relative; padding-left: 30px; }
.sail__list li::before{ content: ""; position: absolute; left: 0; top: .45em; width: 18px; height: 12px; background: linear-gradient(var(--sun) 0 50%, var(--red) 50% 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sail__actions{ display: flex; flex-wrap: wrap; gap: 12px; max-width: none !important; }
.sail__card{
  display: block; text-decoration: none; color: var(--harbour);
  background: var(--deck); border-radius: 22px; padding: 22px 26px 26px;
  border: 8px solid transparent;
  background: linear-gradient(var(--deck), var(--deck)) padding-box, var(--rope) border-box;
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.6);
  position: relative; transition: transform .2s ease;
}
.sail__card:hover{ color: var(--harbour); transform: translateY(-3px); }
.sail__flags{ display: block; height: 30px; margin: 0 -4px 14px; background: var(--flags) repeat-x 0 0 / 150px 30px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.sail__card strong{ display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; }
.sail__card span{ display: block; margin-top: 8px; color: var(--muted); }
.sail__card .sail__go{ margin-top: 16px; font-weight: 700; color: var(--red); }
@media (min-width: 860px){ .sail__inner{ grid-template-columns: 1.25fr 1fr; gap: 64px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--deck); 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(34px, 4.2vw, 50px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font-size: 16px; 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 20px; border-radius: 10px;
  background: var(--harbour); color: #fff; text-decoration: none; font-weight: 700; font-size: 15.5px;
}
.follow a:hover{ background: var(--red); 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(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; padding: 7px; border-radius: 20px; background: var(--rope); transition: transform .2s ease; }
.tile:hover .tile__img{ transform: translateY(-3px); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 13px; }
.tile__title{ display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 27px; color: var(--harbour); line-height: 1.12; }
.tile:hover .tile__title{ color: var(--red); }
.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: 10px;
  background: #fff; border: 2px solid var(--harbour);
  transition: border-color .2s ease;
}
.share__list a:hover{ border-color: var(--red); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--harbour); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 30px; background: var(--flags) repeat-x 75px 0 / 150px 30px, var(--harbour); }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 48px 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(--sun); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer .pr-flag{ width: 18px; height: 12px; margin-right: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.site-footer h2{ font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--sun); 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: 10px; 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, .sail__card{ transition: none; }
}