/* =================================================================
   Istanbul Caribbean Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: Iznik tiles meeting Old San Juan — cobalt, tile white,
   Iznik red and a little turquoise, with El Messiri (Ottoman-flavoured
   display) for headings and Source Sans 3 for text.
   Motifs: an eight-point-star tile pattern (--tiles, inline SVG) used as
   a strip under the header and over the footer, as the frame around
   feature images (the image sits inside a tiled border, like a panel set
   in a tiled wall), and as the underline of the current menu item.
   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).
   ================================================================= */

:root{
  --cobalt:      #1C3F94;   /* header, headings, links */
  --cobalt-deep: #10275E;   /* footer */
  --iznik-red:   #C8372D;   /* primary button, accents */
  --turquoise:   #1F9AA0;   /* small accents, borders */
  --tile-white:  #F6F8FC;   /* hero / page background */
  --ink:         #14203D;   /* text */
  --muted:       #4D5872;
  --line:        rgba(20,32,61,.13);

  --font-display: 'El Messiri', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%231C3F94'/%3E%3Cg transform='translate(24 24)'%3E%3Crect x='-12' y='-12' width='24' height='24' fill='%23fff'/%3E%3Crect x='-12' y='-12' width='24' height='24' fill='%23fff' transform='rotate(45)'/%3E%3Crect x='-7' y='-7' width='14' height='14' fill='%23C8372D'/%3E%3Crect x='-7' y='-7' width='14' height='14' fill='%23C8372D' transform='rotate(45)'/%3E%3Ccircle r='3.5' fill='%231F9AA0'/%3E%3C/g%3E%3Cg fill='%231F9AA0'%3E%3Cpath d='M0 0h5L0 5z'/%3E%3Cpath d='M48 0h-5l5 5z'/%3E%3Cpath d='M0 48h5l-5-5z'/%3E%3Cpath d='M48 48h-5l5-5z'/%3E%3C/g%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: 18px;
  line-height: 1.65;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--cobalt); }
a:hover{ color: var(--iznik-red); }
:focus-visible{ outline: 3px solid var(--iznik-red); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; color: var(--cobalt); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--iznik-red); color: #fff; 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.05; }
.brand__name{ font-family: var(--font-display); font-weight: 700; font-size: 28px; white-space: nowrap; }
.brand__tag{ font-size: 13.5px; color: rgba(255,255,255,.72); margin-top: 2px; 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(--cobalt); }
.site-header::after{ content: ""; display: block; height: 18px; background: var(--tiles) repeat-x 0 0 / 18px 18px; }
.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-body); color: var(--cobalt);
  background: #fff; border: 0; border-radius: 8px; 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: 17px; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.15);
}
.bnet-menu a:hover{ color: #FFD9D4; }

/* 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: #FFD9D4; 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 10px 14px; font-size: 16px; white-space: nowrap; position: relative; }
  .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: 10px; right: 10px; bottom: 2px; height: 8px;
    background: var(--tiles) repeat-x 0 0 / 8px 8px; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  }
  .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(--tile-white); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 64px; }
.hero__copy{ max-width: 820px; }
.hero__title{
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.08;
  text-wrap: balance;
}
.hero__lede{ margin: 18px 0 0; max-width: 54ch; font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); }
.hero__lede a{ color: var(--cobalt); }
.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; padding-bottom: 56px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px; border-radius: 8px;
  font: 700 17px/1.2 var(--font-body); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn--red{ background: var(--iznik-red); color: #fff; }
.btn--red:hover{ background: #A52A21; color: #fff; }
.btn--line{ color: var(--cobalt); border: 2px solid var(--cobalt); }
.btn--line:hover{ background: var(--cobalt); color: #fff; }

/* the feature image, set in a tiled frame (includes/banner.incl.php) */
.banner{
  margin: 40px 0 0;
  padding: 24px;
  background: var(--tiles) repeat 0 0 / 24px 24px;   /* padding = tile size, so the frame shows whole stars */
  border-radius: 12px;
  box-shadow: 0 24px 50px -28px rgba(16,39,94,.55);
}
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 4px; }
.hero--page .banner{ margin-top: 32px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; }
@media (max-width: 600px){
  .banner{ padding: 14px; background-size: 14px 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; }
.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 Old San Juan (home) ---------- */
.sail{ background: var(--cobalt); color: rgba(255,255,255,.88); padding: 64px 0; }
.sail__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 28px; align-items: center;
}
.sail h2{ color: #fff; font-size: clamp(32px, 4vw, 48px); margin-bottom: 10px; }
.sail p{ margin: 0; max-width: 52ch; font-size: 19px; }
.sail__card{
  display: block; text-decoration: none; color: var(--ink);
  background: #fff; border-radius: 10px; padding: 22px 26px;
  border: 3px solid var(--turquoise);
  transition: transform .2s ease;
}
.sail__card:hover{ color: var(--ink); transform: translateY(-3px); }
.sail__card strong{ display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--cobalt); }
.sail__card span{ display: block; margin-top: 6px; color: var(--muted); }
@media (min-width: 860px){ .sail__inner{ grid-template-columns: 1.2fr 1fr; gap: 56px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--tiles) repeat-x 0 0 / 18px 18px, var(--tile-white); padding: 90px 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: 8px;
  background: var(--cobalt); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
}
.follow a:hover{ background: var(--iznik-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(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; padding: 16px; border-radius: 10px; background: var(--tiles) repeat 0 0 / 16px 16px; }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px; }
.tile__title{ display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--cobalt); line-height: 1.2; }
.tile:hover .tile__title{ color: var(--iznik-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: 8px;
  background: #fff; border: 2px solid var(--cobalt);
  transition: border-color .2s ease;
}
.share__list a:hover{ border-color: var(--iznik-red); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--cobalt-deep); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 18px; background: var(--tiles) repeat-x 0 0 / 18px 18px; }
.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: #FFD9D4; }
.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: 18px; font-weight: 700; 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: 8px; 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; }
  .sail__card{ transition: none; }
}