/* =================================================================
   Saffron House Exuma Caribbean Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: the Saffron House logo (a white saffron flower with red and
   orange threads, a black script wordmark, condensed "EXUMA BAHAMAS")
   on Exuma's water — white sand, gin-clear shallows, turquoise and deep
   sea blue. Light, airy header with the original script wordmark;
   Marcellus (elegant serif) for headings, Barlow Condensed (tracked caps,
   like the logo's EXUMA BAHAMAS) for labels, Hanken Grotesk for text.
   Motifs: an "Exuma shallows" strip — stacked bands from sand to
   shallows to turquoise to deep blue (--shallows) — under the header,
   over the footer and under feature images; three saffron threads
   (--threads, inline SVG: red, orange, red) under the current menu item,
   in kickers and as the section-title ornament; photos as soft white
   "postcards" with rounded corners. Photos are the site's own beach and
   underwater pictures (no house photos — owner's request).
   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).
   ================================================================= */

:root{
  --sand:      #FBF7F0;   /* header, heroes */
  --sand-2:    #F3E9D8;
  --shallow:   #A8E6E0;   /* gin-clear shallows */
  --turquoise: #20AEBB;
  --sea:       #0E6F80;   /* primary button, links */
  --deep:      #0B3F57;   /* headings, footer, dark band */
  --saffron:   #D9262B;   /* saffron thread red: accents */
  --saffron-o: #E3962A;   /* saffron thread orange */
  --ink:       #1F2427;
  --muted:     #5A6870;
  --line:      rgba(11,63,87,.13);

  --font-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-label:   'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --shallows: linear-gradient(180deg, var(--sand-2) 0 25%, var(--shallow) 25% 50%, var(--turquoise) 50% 75%, var(--deep) 75% 100%);
  --threads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='2.4'%3E%3Cpath d='M15 19C14 13 9 8 5 3' stroke='%23D9262B'/%3E%3Cpath d='M15 19C15.5 12 16 7 17.5 1.5' stroke='%23E3962A'/%3E%3Cpath d='M15 19C17 13 21 9 25.5 4.5' stroke='%23D9262B'/%3E%3C/g%3E%3Cg fill='%23D9262B'%3E%3Ccircle cx='5' cy='3' r='2.2'/%3E%3Ccircle cx='25.5' cy='4.5' r='2.2'/%3E%3C/g%3E%3Ccircle cx='17.5' cy='1.8' r='2.2' fill='%23E3962A'/%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.7;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--sea); }
a:hover{ color: var(--saffron); }
:focus-visible{ outline: 3px solid var(--turquoise); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; color: var(--deep); letter-spacing: -.005em; }
h1 em, h2 em{ font-style: normal; color: var(--turquoise); }

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

.threads{ display: inline-block; width: 24px; height: 16px; margin-right: 8px; vertical-align: -2px; background: var(--threads) 0 0 / 100% 100%; }

/* ---------- Brand (header + footer): the original script wordmark ---------- */
.brand{ display: inline-flex; align-items: flex-end; gap: 10px; text-decoration: none; color: var(--deep); }
.brand:hover{ color: var(--deep); }
.brand__word{ height: 50px; width: auto; }
.brand__word--light{ display: none; }
.brand__tag{ font: 500 12.5px/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; white-space: nowrap; }
.site-footer .brand__word--dark{ display: none; }
.site-footer .brand__word--light{ display: block; }
.site-footer .brand__tag{ color: rgba(255,255,255,.65); }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .brand__word{ height: 40px; }
  .site-header .brand__tag{ display: none; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: rgba(251,247,240,.97); backdrop-filter: blur(6px); }
.site-header::after{ content: ""; display: block; height: 12px; background: var(--shallows); }
.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: 600 15px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--sea); 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: 500 17px/1.3 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--deep); text-decoration: none;
  border-top: 1px solid var(--line);
}
.bnet-menu a:hover{ color: var(--turquoise); }

/* 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(--saffron); font-weight: 600; }

@media (min-width: 1140px){
  .site-header__inner{ flex-wrap: nowrap; }
  /* keep the logo its full size; tag sits under the script wordmark so the menu fits beside it */
  .site-header .brand{ flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 2px; }
  .site-header .brand__tag{ padding: 0 0 0 4px; font-size: 11px; }
  .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 9px 18px; font-size: 15.5px; white-space: nowrap; position: relative; }
  /* the current page gets three saffron threads */
  .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: 1px; width: 18px; height: 12px; margin-left: -9px;
    background: var(--threads) 0 0 / 100% 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: var(--deep); }
}

/* ---------- Heroes ---------- */
.hero{ background: linear-gradient(180deg, var(--sand) 0%, #fff 100%); }
.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: 500 15px/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--sea); }
.hero__title{
  font-size: clamp(40px, 6.2vw, 78px);
  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(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: 50px; padding: 12px 28px; border-radius: 999px;
  font: 600 16px/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn--sea{ background: var(--sea); color: #fff; }
.btn--sea:hover{ background: var(--turquoise); color: #fff; box-shadow: 0 8px 20px -10px rgba(14,111,128,.7); }
.btn--line{ color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--deep); }
.btn--line:hover{ background: var(--deep); color: #fff; }

/* the feature image as a white postcard, edged with the Exuma shallows (includes/banner.incl.php) */
.banner{ margin: 40px 0 0; padding: 10px 10px 0; background: #fff; border-radius: 30px; box-shadow: 0 30px 60px -36px rgba(11,63,87,.55), 0 0 0 1px var(--line); overflow: hidden; }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 22px 22px 0 0; }
.banner::after{ content: ""; display: block; height: 14px; margin: 0 -10px; background: var(--shallows); }
.hero--page .banner{ margin-top: 34px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 40%; }
@media (max-width: 600px){
  .banner{ padding: 6px 6px 0; border-radius: 20px; }
  .banner img{ border-radius: 15px 15px 0 0; }
  .banner::after{ margin: 0 -6px; height: 10px; }
  .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::before, .about-blog h2::before, .explore h2::before, .reasons h2::before{
  content: ""; display: block; width: 30px; height: 20px; margin-bottom: 12px; background: var(--threads) 0 0 / 100% 100%;
}
.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; }

/* ---------- 10 reasons to visit Exuma (home) ---------- */
.reasons{
  background: linear-gradient(180deg, var(--shallow) 0%, var(--turquoise) 55%, var(--sea) 100%);
  color: #fff; padding: 76px 0 84px;
}
.reasons__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.reasons h2{ color: var(--deep); font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 30px; }
.reasons h2 em{ color: #fff; }
.reasons__list{ list-style: none; counter-reset: r; margin: 0; padding: 0; display: grid; gap: 14px; }
.reasons__list li{
  counter-increment: r; position: relative; padding: 18px 20px 18px 64px;
  background: rgba(255,255,255,.92); color: var(--ink); border-radius: 18px; font-size: 16.5px; line-height: 1.55;
  box-shadow: 0 14px 30px -24px rgba(11,63,87,.8);
}
.reasons__list li::before{
  content: counter(r); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--deep); color: #fff; font: 600 17px/1 var(--font-label);
}
.reasons__list strong{ display: block; font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--deep); margin-bottom: 2px; }
@media (min-width: 760px){ .reasons__list{ grid-template-columns: 1fr 1fr; } }

/* ---------- From the beach at Saffron House (home) ---------- */
.shore{ background: var(--sand); padding: 80px 0; }
.shore__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.shore__photo{ margin: 0; padding: 10px; background: #fff; border-radius: 30px; box-shadow: 0 30px 60px -36px rgba(11,63,87,.55); }
.shore__photo img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; }
.shore__logo{ width: 120px; margin-bottom: 8px; }
.shore h2{ font-size: clamp(32px, 4vw, 46px); margin-bottom: 14px; }
.shore p{ margin: 0 0 14px; max-width: 54ch; }
.shore .btn{ margin-top: 10px; }
@media (min-width: 860px){ .shore__inner{ grid-template-columns: 1.15fr 1fr; 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(34px, 4.2vw, 50px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font: 500 14px/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: 9px 22px; border-radius: 999px;
  background: var(--deep); color: #fff; text-decoration: none; font: 600 15px/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
}
.follow a:hover{ background: var(--turquoise); 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(--sand); }
.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: 8px; background: #fff; border-radius: 24px; box-shadow: 0 22px 44px -30px rgba(11,63,87,.6); transition: transform .25s ease; }
.tile:hover .tile__img{ transform: translateY(-4px); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 17px; }
.tile__title{ display: block; margin-top: 16px; font-family: var(--font-display); font-size: 27px; color: var(--deep); line-height: 1.15; }
.tile:hover .tile__title{ color: var(--turquoise); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 80px; background: var(--sand); }
.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 15px/1.4 var(--font-label); letter-spacing: .12em; 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(--turquoise); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--deep); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 14px; background: var(--shallows); }
.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(--shallow); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font: 600 15px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--shallow); 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: 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; }
  .btn, .tile__img, .share__list a{ transition: none; }
}