/* =================================================================
   Racers Club PR Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: the Racers Club "RC" roundel and the Puerto Rico Half Mile
   (La Media Milla), run on an airstrip — the logo's deep slate and
   orange, runway concrete and white runway paint. Michroma (wide,
   Eurostile-like, matching the logo) for the brand and labels, Chakra
   Petch for headings, Red Hat Text for body.
   Motifs: runway threshold "piano keys" (white bars, --keys) under the
   header and over the footer and above feature images; dashed runway
   centre-lines as the rule under section titles; three orange start
   lights (the logo's three dots) as the current-menu marker and in the
   kicker; a timing-board readout in the half-mile band; buttons with
   one clipped corner.
   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).
   ================================================================= */

:root{
  --slate:     #193135;   /* logo background: header, footer, half-mile band */
  --slate-dk:  #10222A;
  --orange:    #E8622A;   /* logo ring: primary button, lights, accents */
  --orange-dk: #C44E1C;
  --concrete:  #EEF0EE;   /* runway concrete: heroes, about band */
  --ink:       #16262A;
  --muted:     #586468;
  --line:      rgba(22,38,42,.14);

  --font-label:   'Michroma', 'Eurostile', 'Arial', sans-serif;
  --font-display: 'Chakra Petch', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Red Hat Text', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  /* runway threshold markings: white bars on asphalt */
  --keys: repeating-linear-gradient(90deg, transparent 0 6px, #F4F4F0 6px 13px, transparent 13px 19px) 0 50% / 100% 72% no-repeat, #2B3337;
  /* runway centre-line */
  --centre: repeating-linear-gradient(90deg, var(--orange) 0 18px, transparent 18px 28px);
  --clip: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

*,*::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(--orange-dk); }
a:hover{ color: var(--slate); }
:focus-visible{ outline: 3px solid var(--orange); outline-offset: 3px; }

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

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

/* three start lights */
.lights{ display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: 1px; }
.lights i{ display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 6px rgba(232,98,42,.6); }

/* ---------- Brand (header + footer) ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand:hover{ color: #fff; }
.brand__mark{ width: 46px; height: 46px; flex: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.1; }
.brand__name{ font-family: var(--font-label); font-size: 17px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.brand__name em{ font-style: normal; color: var(--orange); }
.brand__tag{ font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.66); margin-top: 4px; white-space: nowrap; }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .brand__name{ font-size: 13.5px; white-space: normal; }
  .brand__tag{ white-space: normal; }
}
.site-footer .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(--slate); }
.site-header::after{ content: ""; display: block; height: 22px; background: var(--keys); }
.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: 13px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: var(--orange); border: 0; padding: 13px 18px; cursor: pointer; clip-path: var(--clip);
}
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: 600 17px/1.3 var(--font-display); letter-spacing: .01em; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.12);
}
.bnet-menu a:hover{ color: var(--orange); }

/* 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(--orange); }

@media (min-width: 1280px){
  /* full menu only when logo + menu fit side by side (header can be a little wider than the page content) */
  .site-header__inner{ max-width: 1280px; }
  .site-header .brand{ flex: none; }
  .site-nav, .js .site-nav{ min-width: 0; }
  .bnet-menu{ flex-wrap: wrap; justify-content: flex-end; }
  .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 15px; font-size: 16px; white-space: nowrap; position: relative; }
  /* the current page gets three orange start lights */
  .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: 26px; height: 6px; margin-left: -13px;
    background: radial-gradient(circle, var(--orange) 0 2.9px, transparent 3.2px) 0 0 / 10px 6px repeat-x;
  }
  .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(--concrete); }
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 68px; }
.hero__copy{ max-width: 900px; }
.hero__kicker{ margin: 0 0 16px; font: 12px/1.6 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero__title{
  font-size: clamp(40px, 6.4vw, 80px);
  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(--orange-dk); }
.hero__actions{ margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(36px, 5vw, 64px); }
.hero--page .hero__inner{ padding-top: 46px; padding-bottom: 60px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 28px;
  font: 700 17px/1.2 var(--font-display); letter-spacing: .02em; text-decoration: none;
  clip-path: var(--clip);
  transition: background-color .2s ease, color .2s ease;
}
.btn--orange{ background: var(--orange); color: #fff; }
.btn--orange:hover{ background: var(--orange-dk); color: #fff; }
.btn--line{ background: var(--slate); color: #fff; }
.btn--line:hover{ background: var(--slate-dk); color: var(--orange); }
.btn--line-light{ background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.btn--line-light:hover{ background: #fff; color: var(--slate); }

/* the feature image with runway threshold markings (includes/banner.incl.php) */
.banner{ margin: 40px 0 0; }
.banner::before{ content: ""; display: block; height: 24px; background: var(--keys); }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; }
.banner::after{ content: ""; display: block; height: 6px; background: var(--orange); }
.hero--page .banner{ margin-top: 32px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 60%; }
@media (max-width: 600px){
  .banner::before{ height: 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.4vw, 52px); margin-bottom: 28px; }
.section__title::after, .about-blog h2::after, .explore h2::after{
  content: ""; display: block; width: 130px; height: 5px; margin-top: 14px; background: var(--centre);
}
.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 the Puerto Rico Half Mile (home) ---------- */
.halfmile{
  background: var(--slate);
  border-bottom: 6px solid var(--orange);
  color: rgba(255,255,255,.84); padding: 80px 0;
}
.halfmile__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.halfmile__logo{ margin: 0; max-width: 300px; justify-self: center; }
.halfmile__logo img{ width: 100%; }
.halfmile__kicker{ margin: 0 0 12px; font: 12px/1.6 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.halfmile h2{ color: #fff; font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 14px; }
.halfmile p{ margin: 0 0 14px; max-width: 52ch; font-size: 18.5px; }
.halfmile p em{ color: #fff; }
/* timing-board readout */
.board{ display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.board__cell{
  display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 14px 8px;
  background: #0B1518; border: 1px solid rgba(232,98,42,.45); border-radius: 4px;
}
.board__cell b{ font: 26px/1 var(--font-label); color: var(--orange); text-shadow: 0 0 10px rgba(232,98,42,.5); }
.board__cell small{ margin-top: 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.halfmile__actions{ display: flex; flex-wrap: wrap; gap: 12px; max-width: none !important; }
@media (min-width: 860px){ .halfmile__inner{ grid-template-columns: 300px 1fr; gap: 72px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: var(--concrete); 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.4vw, 52px); }
.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: 8px; }
.follow a{
  display: inline-block; padding: 9px 22px;
  background: var(--slate); color: #fff; text-decoration: none;
  font: 700 16px/1.3 var(--font-display); clip-path: var(--clip);
}
.follow a:hover{ background: var(--orange); 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, 46px); 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; border-top: 12px solid transparent; border-image: repeating-linear-gradient(90deg, var(--slate) 0 10px, #fff 10px 18px) 12; box-shadow: 0 0 0 1px var(--line); }
.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: 27px; line-height: 1.1; color: var(--slate); }
.tile:hover .tile__title{ color: var(--orange); }
.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: 2px solid var(--slate); clip-path: var(--clip);
  transition: border-color .2s ease;
}
.share__list a:hover{ border-color: var(--orange); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--slate); color: rgba(255,255,255,.78); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 22px; background: var(--keys); }
.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(--orange); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font: 12.5px/1.5 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--orange); 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; padding: 10px 16px; clip-path: var(--clip); }
.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, .share__list a{ transition: none; }
}