/* =================================================================
   Mok Properties Island Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: an architect's site plan for island living — drafting paper
   with a fine grid, graphite ink, sea-glass mint as the "built" colour and
   a little sun yellow. Space Grotesk (headings), IBM Plex Sans (text) and
   IBM Plex Mono for small plan annotations (kickers, labels).
   Motifs: graph-paper grid (--grid) behind heroes and the about band;
   crop / registration marks at the corners of feature images; dimension
   lines (|<——>|) under section titles and under feature images;
   "rooms" — cards drawn as plan outlines with a door gap; the current
   menu item gets a dimension bracket. Square corners throughout.
   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).
   ================================================================= */

:root{
  --graphite:  #22252A;   /* header, footer, text */
  --graphite-2:#2E3238;
  --paper:     #F5F4EF;   /* drafting paper */
  --grid-line: rgba(47,120,140,.11);
  --mint:      #2FA58C;   /* sea glass: primary button, built elements */
  --mint-dk:   #1F7E6A;
  --sun:       #F2B134;   /* small accents */
  --ink:       #22252A;
  --muted:     #5D636B;
  --line:      rgba(34,37,42,.16);

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --wrap: 1160px;
  --gutter: 20px;
  --grid: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
          linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px;
}

*,*::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(--mint-dk); }
a:hover{ color: var(--graphite); }
:focus-visible{ outline: 2px dashed var(--mint); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 700; line-height: 1.06; margin: 0; color: var(--graphite); letter-spacing: -.025em; }

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

/* a dimension line: |<———>| */
.dim{
  display: block; height: 12px; width: 140px; margin-top: 16px;
  background:
    linear-gradient(var(--mint), var(--mint)) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--mint), var(--mint)) 100% 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--mint), var(--mint)) 0 50% / 100% 1.5px no-repeat;
}

/* ---------- 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: 25px; letter-spacing: -.02em; white-space: nowrap; }
.brand__tag{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 4px; white-space: nowrap; }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .site-header .brand__name{ font-size: 22px; }
  .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(--graphite); border-bottom: 3px solid var(--mint); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite);
  background: var(--paper); border: 0; border-radius: 0; padding: 13px 16px; 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: 16.5px; color: #fff; text-decoration: none;
  border-top: 1px dashed rgba(255,255,255,.2);
}
.bnet-menu a:hover{ color: #7FD8C4; }

/* 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: #7FD8C4; 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 14px; font-size: 15px; white-space: nowrap; position: relative; }
  /* the current page gets a dimension bracket */
  .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: 9px;
    background:
      linear-gradient(var(--mint), var(--mint)) 0 0 / 1.5px 100% no-repeat,
      linear-gradient(var(--mint), var(--mint)) 100% 0 / 1.5px 100% no-repeat,
      linear-gradient(var(--mint), var(--mint)) 0 50% / 100% 1.5px no-repeat;
  }
  .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(--grid), var(--paper); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 72px; }
.hero__copy{ max-width: 880px; }
.hero__kicker{
  margin: 0 0 16px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mint-dk);
}
.hero__title{
  font-size: clamp(40px, 6.4vw, 80px);
  line-height: 1.02;
  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(--mint-dk); }
.hero__actions{ margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.hero--page .hero__title{ font-size: clamp(36px, 5vw, 62px); }
.hero--page .hero__inner{ padding-top: 48px; padding-bottom: 64px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 24px; border-radius: 0;
  font: 600 16.5px/1.2 var(--font-body); text-decoration: none;
  border: 2px solid var(--graphite);
  box-shadow: 5px 5px 0 var(--graphite);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{ transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--graphite); }
.btn--mint{ background: var(--mint); color: #fff; }
.btn--mint:hover{ background: var(--mint-dk); color: #fff; }
.btn--line{ background: #fff; color: var(--graphite); }
.btn--line:hover{ color: var(--graphite); }

/* the feature image with crop marks and a dimension line (includes/banner.incl.php) */
.banner{
  margin: 44px 0 0; position: relative; padding: 14px;
  background:
    linear-gradient(var(--graphite), var(--graphite)) 0 0 / 22px 1.5px no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) 0 0 / 1.5px 22px no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) 100% 0 / 22px 1.5px no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) 100% 0 / 1.5px 22px no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) 0 100% / 22px 1.5px no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) 0 100% / 1.5px 22px no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) 100% 100% / 22px 1.5px no-repeat,
    linear-gradient(var(--graphite), var(--graphite)) 100% 100% / 1.5px 22px no-repeat;
}
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; }
.banner::after{
  content: ""; display: block; height: 12px; margin-top: 12px;
  background:
    linear-gradient(var(--mint), var(--mint)) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--mint), var(--mint)) 100% 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--mint), var(--mint)) 0 50% / 100% 1.5px no-repeat;
}
.hero--page .banner{ margin-top: 36px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner{ padding: 9px; }
  .hero--page .banner img{ aspect-ratio: 1280 / 500; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 68px 0 84px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{ font-size: clamp(32px, 4vw, 48px); margin-bottom: 30px; }
.section__title::after, .about-blog h2::after, .explore h2::after{
  content: ""; display: block; height: 12px; width: 120px; margin-top: 14px;
  background:
    linear-gradient(var(--mint), var(--mint)) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--mint), var(--mint)) 100% 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--mint), var(--mint)) 0 50% / 100% 1.5px no-repeat;
}
.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; }

/* ---------- Site plan (home) ---------- */
.plan{
  background:
    linear-gradient(rgba(127,216,196,.08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(127,216,196,.08) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--graphite);
  color: rgba(255,255,255,.84); padding: 76px 0;
}
.plan__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 36px; align-items: center;
}
.plan__kicker{ margin: 0 0 12px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #7FD8C4; }
.plan h2{ color: #fff; font-size: clamp(32px, 4vw, 48px); margin-bottom: 14px; }
.plan p{ margin: 0; max-width: 50ch; font-size: 18.5px; }
.plan__rooms{ display: grid; gap: 16px; }
/* a "room": a plan outline with a door gap in the top wall */
.room{
  position: relative; display: block; padding: 26px 26px 22px; text-decoration: none; color: #fff;
  border: 3px solid #fff;
  transition: border-color .2s ease, background-color .2s ease;
}
.room::before{ content: ""; position: absolute; top: -3px; left: 32px; width: 46px; height: 3px; background: var(--graphite); }
.room:hover{ color: #fff; border-color: var(--mint); background: rgba(47,165,140,.12); }
.room__label{ display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); margin-bottom: 6px; }
.room strong{ display: block; font-family: var(--font-display); font-size: 25px; line-height: 1.15; letter-spacing: -.015em; }
.room span:last-child{ display: block; margin-top: 6px; color: rgba(255,255,255,.72); font-size: 16px; }
@media (min-width: 860px){ .plan__inner{ grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--grid), var(--paper); 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-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; 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 18px;
  background: var(--graphite); color: #fff; text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.follow a:hover{ background: var(--mint); 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: 8px; border: 1.5px solid var(--graphite); transition: border-color .2s ease; }
.tile:hover .tile__img{ border-color: var(--mint); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.tile__title{ display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: -.015em; line-height: 1.2; }
.tile:hover .tile__title{ color: var(--mint-dk); }
.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;
  background: #fff; border: 1.5px solid var(--graphite);
  transition: border-color .2s ease;
}
.share__list a:hover{ border-color: var(--mint); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--graphite); color: rgba(255,255,255,.78); font-size: 16px; border-top: 3px solid var(--mint); }
.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: #7FD8C4; }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #7FD8C4; 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; }
  .btn, .room, .tile__img{ transition: none; }
}