/* =================================================================
   La O Boutique Caribbean Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: a boutique's printed lookbook — ivory paper, charcoal
   type, bougainvillea pink and a little gold foil, with Cormorant
   Garamond (fashion-editorial serif, italics in pink) for headings and
   Jost (geometric sans, tracked caps for labels and buttons) for text.
   Motifs: the "O" — a thin gold ring (brand mark, current menu item,
   section-title ornament); fine gold double rules (under the header,
   over the footer); feature images and tiles with a gold hairline frame
   offset behind them, like a print in a mount; a swing-tag card with a
   punched hole; square, letter-spaced buttons. Light ivory header.
   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 and canopy peaks).
   ================================================================= */

:root{
  --ivory:     #FBF8F3;   /* page, header */
  --linen:     #F3ECE2;   /* heroes, about band */
  --charcoal:  #1F1D22;   /* text, dark bands, footer */
  --rose:      #B01F5A;   /* bougainvillea: primary button, italics, hover */
  --rose-deep: #8E1747;
  --gold:      #B8935A;   /* hairlines, rings */
  --gold-lt:   #E8CD96;   /* gold on dark */
  --muted:     #625C66;
  --line:      rgba(31,29,34,.14);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --double-rule: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 1px no-repeat,
                 linear-gradient(var(--gold), var(--gold)) 0 4px / 100% 1px no-repeat;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--rose); }
a:hover{ color: var(--rose-deep); }
:focus-visible{ outline: 2px solid var(--rose); outline-offset: 3px; }

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

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

/* ---------- Brand (header + footer) ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--charcoal); }
.brand:hover{ color: var(--charcoal); }
.brand__mark{ width: 44px; height: 44px; flex: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1; }
.brand__name{ font-family: var(--font-display); font-weight: 600; font-size: 30px; white-space: nowrap; letter-spacing: .005em; }
.brand__name em{ color: var(--rose); }
.brand__tag{ font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 5px; white-space: nowrap; }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .site-header .brand__name{ font-size: 26px; }
  .site-header .brand__tag{ white-space: normal; letter-spacing: .14em; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--ivory); }
.site-header::after{ content: ""; display: block; height: 5px; background: var(--double-rule); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 500 13px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory);
  background: var(--charcoal); border: 0; border-radius: 0; padding: 13px 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 10px; }
.bnet-menu a{
  display: block; padding: 11px 2px;
  font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none;
  border-top: 1px solid var(--line);
}
.bnet-menu a:hover{ color: var(--rose); }

/* 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(--rose); 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: 0; padding: 0; }
  .bnet-menu a{ border-top: 0; padding: 8px 9px 14px; font-size: 12.5px; letter-spacing: .12em; white-space: nowrap; position: relative; }
  /* the current page gets the gold "O" */
  .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: 0; width: 9px; height: 9px; margin-left: -4.5px;
    border-radius: 50%; border: 1.5px solid var(--gold);
  }
}

/* ---------- Heroes ---------- */
.hero{ background: var(--linen); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 60px var(--gutter) 76px; }
.hero__copy{ max-width: 880px; }
.hero__kicker{
  margin: 0 0 14px; font-size: 12.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.hero__title{
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1;
  text-wrap: balance;
}
.hero__lede{ margin: 22px 0 0; max-width: 56ch; font-size: clamp(17.5px, 1.6vw, 20px); color: var(--muted); }
.hero__actions{ margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(40px, 5.6vw, 68px); }
.hero--page .hero__inner{ padding-top: 52px; padding-bottom: 68px; }
/* home: the hero sits on ivory with a big gold "O" ring behind the title */
.hero--home{ background: var(--ivory); position: relative; overflow: hidden; }
.hero--home::before{
  content: ""; position: absolute; right: -140px; top: -160px; width: 520px; height: 520px;
  border-radius: 50%; border: 1px solid var(--gold); opacity: .55; pointer-events: none;
}
.hero--home .hero__inner{ position: relative; }
@media (max-width: 859px){ .hero--home::before{ display: none; } }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 28px; border-radius: 0;
  font: 500 13.5px/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn--rose{ background: var(--rose); color: #fff; }
.btn--rose:hover{ background: var(--charcoal); color: #fff; }
.btn--line{ color: var(--charcoal); border: 1px solid var(--charcoal); }
.btn--line:hover{ background: var(--charcoal); color: var(--ivory); }

/* the feature image with a gold hairline frame offset behind it (includes/banner.incl.php) */
.banner{ margin: 48px 18px 0 0; position: relative; }
.banner::before{
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold); pointer-events: none;
}
.banner img{ position: relative; width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; }
.hero--page .banner{ margin-top: 38px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner{ margin-right: 10px; }
  .banner::before{ inset: 10px -10px -10px 10px; }
  .hero--page .banner img{ aspect-ratio: 1280 / 500; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 72px 0 84px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{ font-size: clamp(38px, 4.6vw, 56px); margin-bottom: 30px; }
.section__title::before{
  content: ""; display: block; width: 14px; height: 14px; margin-bottom: 14px;
  border-radius: 50%; border: 1.5px solid var(--gold);
}
.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; }

/* ---------- Island spotlight (home) ---------- */
.edit{ background: var(--charcoal); color: rgba(251,248,243,.82); padding: 76px 0; }
.edit__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 36px; align-items: center;
}
.edit__kicker{ margin: 0 0 12px; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-lt); }
.edit h2{ color: var(--ivory); font-size: clamp(38px, 4.6vw, 56px); margin-bottom: 14px; }
.edit h2 em{ color: #F08BB3; }
.edit p{ margin: 0; max-width: 52ch; font-size: 18.5px; }
/* swing tag */
.edit__tag{
  position: relative; display: block; justify-self: start; width: min(100%, 360px);
  padding: 46px 30px 28px; text-decoration: none; color: var(--charcoal);
  background: var(--ivory);
  clip-path: polygon(14% 0, 86% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  transform: rotate(-3deg); transition: transform .25s ease;
}
.edit__tag:hover{ color: var(--charcoal); transform: rotate(0deg); }
.edit__tag-hole{
  position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--charcoal); box-shadow: 0 0 0 3px var(--gold);
}
.edit__tag strong{ display: block; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; }
.edit__tag span:last-child{ display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gold); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
@media (min-width: 860px){ .edit__inner{ grid-template-columns: 1.3fr 1fr; gap: 64px; } .edit__tag{ justify-self: center; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--linen); padding: 80px 0 76px; }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.about-blog h2{ font-size: clamp(38px, 4.6vw, 56px); }
.about-blog h2::after{ content: ""; display: block; width: 72px; height: 5px; margin-top: 18px; background: var(--double-rule); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 22px; font-size: 13px; letter-spacing: .16em; 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 20px;
  border: 1px solid var(--charcoal); color: var(--charcoal); text-decoration: none;
  font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.follow a:hover{ background: var(--charcoal); color: var(--ivory); }
@media (min-width: 860px){ .about-blog__inner{ grid-template-columns: 1fr 2fr; gap: 56px; } }

/* ---------- Keep exploring ---------- */
.explore{ padding: 76px 0 36px; }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{ font-size: clamp(34px, 4vw, 48px); margin-bottom: 30px; }
.explore__grid{ display: grid; gap: 44px; }
@media (min-width: 760px){ .explore__grid{ grid-template-columns: 1fr 1fr; } }
.tile{ display: block; text-decoration: none; color: var(--charcoal); }
.tile:hover{ color: var(--charcoal); }
.tile__img{ display: block; position: relative; margin-right: 12px; }
.tile__img::before{ content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--gold); transition: inset .25s ease; }
.tile:hover .tile__img::before{ inset: 6px -6px -6px 6px; }
.tile__img img{ position: relative; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.tile__title{ display: block; margin-top: 24px; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; }
.tile:hover .tile__title{ color: var(--rose); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 36px 0 84px; }
.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-size: 13px; letter-spacing: .16em; 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: 50px; height: 50px;
  background: #fff; border: 1px solid var(--gold);
  transition: border-color .2s ease;
}
.share__list a:hover{ border-color: var(--rose); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--charcoal); color: rgba(251,248,243,.74); font-size: 15.5px; }
.site-footer::before{ content: ""; display: block; height: 5px; background: var(--double-rule); }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer a{ color: var(--ivory); text-decoration-color: rgba(251,248,243,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--gold-lt); }
.site-footer .brand{ color: var(--ivory); }
.site-footer .brand__name em{ color: #F08BB3; }
.site-footer .brand__tag{ color: rgba(251,248,243,.58); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 14px; line-height: 1.4; }
.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; 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; }
  .edit__tag, .tile__img::before{ transition: none; }
}