/* ==========================================================================
   Boquete Directory — publish.css
   Lives at the root of the Boquete Directory vault and is published with it.
   Built phone-first: most readers open this from a WhatsApp link.

   Palette: Barú blue, with WhatsApp-green contact buttons.
   Nothing in the notes needs special markup. Listings are recognised by
   their shape (bold name, then a wa.me link), so the update-directory
   skill keeps filing entries exactly as before.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ---------- Tokens -------------------------------------------------------- */

body {
  --bd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;

  --font-text-theme: var(--bd-font);
  --font-interface-theme: var(--bd-font);
  --font-text-size: 17px;
  --line-height-normal: 1.6;
  --file-line-width: 44rem;

  --bd-radius: 14px;
  --bd-radius-sm: 10px;
}

body.theme-light {
  --bd-bg: #f6f8fb;
  --bd-card: #ffffff;
  --bd-line: #dde5ee;
  --bd-ink: #15202b;
  --bd-muted: #5a6878;
  --bd-faint: #8795a5;
  --bd-navy: #123a63;
  --bd-blue: #1d5fa8;
  --bd-blue-hover: #174e8c;
  --bd-tint: #e4eef9;
  --bd-green: #1e8266;
  --bd-green-hover: #176b54;
  --bd-on-header: #ffffff;

  --background-primary: var(--bd-bg);
  --background-primary-alt: var(--bd-card);
  --background-secondary: var(--bd-bg);
  --background-secondary-alt: var(--bd-card);
  --background-modifier-border: var(--bd-line);
  --text-normal: var(--bd-ink);
  --text-muted: var(--bd-muted);
  --text-faint: var(--bd-faint);
  --text-accent: var(--bd-blue);
  --text-accent-hover: var(--bd-blue-hover);
  --interactive-accent: var(--bd-blue);
  --link-color: var(--bd-blue);
  --link-external-color: var(--bd-blue);
  --text-selection: rgba(29, 95, 168, 0.18);
}

body.theme-dark {
  --bd-bg: #0e1621;
  --bd-card: #16212e;
  --bd-line: #26354a;
  --bd-ink: #e6edf5;
  --bd-muted: #9aabbd;
  --bd-faint: #6f8196;
  --bd-navy: #0a1a2c;
  --bd-blue: #7cb3ef;
  --bd-blue-hover: #a3cbf5;
  --bd-tint: #1a2d44;
  --bd-green: #1e8266;
  --bd-green-hover: #239a79;
  --bd-on-header: #ffffff;

  --background-primary: var(--bd-bg);
  --background-primary-alt: var(--bd-card);
  --background-secondary: var(--bd-bg);
  --background-secondary-alt: var(--bd-card);
  --background-modifier-border: var(--bd-line);
  --text-normal: var(--bd-ink);
  --text-muted: var(--bd-muted);
  --text-faint: var(--bd-faint);
  --text-accent: var(--bd-blue);
  --text-accent-hover: var(--bd-blue-hover);
  --interactive-accent: var(--bd-blue);
  --link-color: var(--bd-blue);
  --link-external-color: var(--bd-blue);
  --text-selection: rgba(124, 179, 239, 0.22);
}

/* ---------- Page frame ---------------------------------------------------- */

body,
.published-container,
.markdown-preview-view {
  background-color: var(--bd-bg);
}

.published-container,
.markdown-preview-view {
  font-family: var(--bd-font);
  color: var(--bd-ink);
  -webkit-font-smoothing: antialiased;
}

.markdown-preview-view {
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  padding-top: 24px;
  padding-bottom: 6rem;
}

/* Frontmatter is for the vault, not for readers. */
.markdown-preview-view .mod-frontmatter {
  display: none;
}

/* ---------- Site header (phones) ----------------------------------------- */

.published-container .site-header {
  background-color: var(--bd-navy) !important;
  border-bottom: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

.published-container .site-header .site-header-text,
.published-container .site-header .clickable-icon,
.published-container .site-header .clickable-icon svg {
  color: var(--bd-on-header) !important;
}

.site-header .site-header-text {
  font-family: var(--bd-font);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.site-header .clickable-icon:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Sidebar (desktop, and the ☰ menu on phones) ------------------ */

.site-body-left-column {
  background: var(--bd-card);
  border-right: 1px solid var(--bd-line);
  font-family: var(--bd-font);
}

.site-body-left-column-site-name {
  font-family: var(--bd-font);
  font-weight: 700;
  color: var(--bd-navy);
  letter-spacing: -0.01em;
}

body.theme-dark .site-body-left-column-site-name {
  color: var(--bd-ink);
}

.site-body-left-column .tree-item-self {
  border-radius: var(--bd-radius-sm);
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.site-body-left-column .tree-item-self.mod-active {
  background: var(--bd-tint);
  color: var(--bd-blue);
  font-weight: 600;
}

/* Keep search prominent; it is the fastest path to an answer. */
.search-view-outer input,
.search-input-container input {
  font-family: var(--bd-font);
  font-size: 16px; /* under 16px, iOS Safari zooms the page on focus */
  border-radius: var(--bd-radius-sm);
  border: 1px solid var(--bd-line);
  background: var(--bd-bg);
}

/* No graph view: it means nothing to a reader looking for a plumber. */
.graph-view-container,
.site-body-right-column-graph {
  display: none !important;
}

.site-footer {
  font-size: 12px;
  color: var(--bd-faint);
}

/* ---------- Headings ------------------------------------------------------ */

.markdown-preview-view h1,
.markdown-preview-view .page-header {
  font-family: var(--bd-font);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--bd-navy);
  margin: 0.2em 0 0.4em;
}

body.theme-dark .markdown-preview-view h1,
body.theme-dark .markdown-preview-view .page-header {
  color: var(--bd-ink);
}

/* Category headings. These are not pinned while scrolling: pinned headings
   stack on top of each other, and iPhone browsers paint the earlier ones
   over the heading a tile jumps to. Pinning can come back once publish.js
   wraps each section, so a heading lets go at the end of its own section. */
.markdown-preview-view .el-h2 {
  /* Publish scrolls a jumped-to heading slightly past the top edge. The
     padding keeps the heading text in view; the margin cancels it out so
     the spacing between sections looks unchanged. */
  padding-top: 32px;
  margin-top: calc(1.4em - 32px);
  padding-bottom: 10px;
}

.markdown-preview-view h2 {
  font-family: var(--bd-font);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--bd-navy);
  margin: 0 !important;
  padding: 0 0 0.45em;
  border-bottom: 2px solid var(--bd-blue);
}

body.theme-dark .markdown-preview-view h2 {
  color: var(--bd-ink);
}

/* Section bar, drawn by publish.js: one bar at the top showing the section
   you are reading. publish.js sets its position; this sets its look. */
.bd-section-bar {
  position: fixed;
  z-index: 20;
  display: none;
  box-sizing: border-box;
  padding: 10px 0 8px;
  background: var(--bd-bg);
  border-bottom: 2px solid var(--bd-blue);
  font-family: var(--bd-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bd-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
}

.bd-section-bar.is-visible {
  display: block;
}

body.theme-dark .bd-section-bar {
  color: var(--bd-ink);
}

@media print {
  .bd-section-bar {
    display: none !important;
  }
}

/* When a tile or chip jumps to a heading, Publish flashes it yellow. The
   flash becomes a brief blue on the heading text instead. */
.markdown-preview-view .el-h2.is-flashing {
  background-color: transparent !important;
}

.markdown-preview-view .el-h2.is-flashing h2 {
  color: var(--bd-blue);
}

.markdown-preview-view h3 {
  font-family: var(--bd-font);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bd-ink);
  margin: 1.8em 0 0.4em;
}

/* The fold arrow next to headings is noise on a phone. */
.markdown-preview-view .heading-collapse-indicator {
  display: none;
}

/* ---------- Body text and links ------------------------------------------ */

.markdown-preview-view p {
  margin: 0.7em 0;
}

.markdown-preview-view a,
.markdown-preview-view a.internal-link,
.markdown-preview-view a.external-link {
  color: var(--bd-blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--bd-blue) 35%, transparent);
}

.markdown-preview-view a:hover {
  color: var(--bd-blue-hover);
  text-decoration-color: currentColor;
}

/* Publish's external-link arrow: every other link here is a phone number,
   and the arrows turn the page into confetti. */
.markdown-preview-view a.external-link {
  background-image: none;
  padding-right: 0;
}

.markdown-preview-view em {
  color: var(--bd-muted);
}

.markdown-preview-view hr {
  border: none;
  border-top: 1px solid var(--bd-line);
  margin: 1.4em 0;
}

/* ---------- Category chips ------------------------------------------------
   Any paragraph with five or more links to headings (the directory's
   "Jump to" line, the rule numbers on Group Rules) becomes a row of chips.
   The " · " separators are plain text, so the paragraph's own text is set
   to zero size and only the chips show. Spacing comes from margins, not
   gap, because the invisible separators would each collect a gap.
   ------------------------------------------------------------------------ */

.markdown-preview-view p:has(> a.internal-link:nth-of-type(5)) {
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 1.1em 0 1.2em;
}

.markdown-preview-view p:has(> a.internal-link:nth-of-type(5)) > strong {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bd-muted);
  margin-bottom: 8px;
}

.markdown-preview-view p:has(> a.internal-link:nth-of-type(5)) > a {
  margin: 0 8px 8px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--bd-blue);
  background: var(--bd-tint);
  border-radius: 999px;
  padding: 11px 14px; /* 36px+ tall: an easy thumb target */
}

.markdown-preview-view p:has(> a.internal-link:nth-of-type(5)) > a:hover {
  background: var(--bd-blue);
  color: #ffffff;
}

/* Long lists (the directory's categories) scroll sideways in a few rows
   instead of filling two screens before the first listing. The paragraph
   is laid out wide and its wrapper scrolls; the fade on the right edge
   shows there is more to swipe. */
.markdown-preview-view .el-p:has(> p > a.internal-link:nth-of-type(12)) {
  overflow-x: auto;
  scrollbar-width: none;
  margin-right: -16px;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}

.markdown-preview-view .el-p:has(> p > a.internal-link:nth-of-type(12))::-webkit-scrollbar {
  display: none;
}

.markdown-preview-view p:has(> a.internal-link:nth-of-type(12)) {
  display: block;
  width: 1250px;
}

.markdown-preview-view p:has(> a.internal-link:nth-of-type(12)) > strong {
  display: block;
}

.markdown-preview-view p:has(> a.internal-link:nth-of-type(12)) > a {
  display: inline-block;
}

/* Shorter cross-page link lines ("Looking for where to buy…", "← Directory")
   read as quiet navigation, not body text. */
.markdown-preview-view p:has(> a.internal-link + a.internal-link):not(:has(> a.internal-link:nth-of-type(5))) {
  font-size: 15px;
  color: var(--bd-muted);
}

/* ---------- Directory listings as cards ----------------------------------
   Targets only lists whose items open with a bold name, so ordinary bullet
   lists elsewhere on the site are left alone.
   ------------------------------------------------------------------------ */

.markdown-preview-view ul:has(> li > strong:first-child) {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.6em;
}

.markdown-preview-view li:has(> strong:first-child) {
  background: var(--bd-card);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  padding: 14px 16px;
  margin: 0 0 10px;
  line-height: 1.5;
  font-size: 16px;
  overflow: hidden; /* contains the floated button */
}

.markdown-preview-view li:has(> strong:first-child)::marker {
  content: none;
}

.markdown-preview-view li > strong:first-child {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--bd-ink);
}

/* Member quotes: set apart from the description, quieter than the name. */
.markdown-preview-view li:has(> strong:first-child) > em {
  font-size: 15px;
  color: var(--bd-muted);
}

/* ---------- WhatsApp buttons ----------------------------------------------
   The first link after a provider's name is their contact. When it is a
   wa.me link, it becomes a green button in the card's top-right corner.
   An empty float reserves that corner so the text wraps around it, and the
   " · " between name and number is tucked under the name.
   ------------------------------------------------------------------------ */

.markdown-preview-view li:has(> strong:first-child + a[href*="wa.me"]) {
  position: relative;
}

.markdown-preview-view li:has(> strong:first-child + a[href*="wa.me"])::before {
  content: "";
  float: right;
  width: 134px;
  height: 38px;
}

.markdown-preview-view li > strong:first-child:has(+ a[href*="wa.me"]) {
  position: relative;
  z-index: 1;
  background: var(--bd-card);
  margin-right: -0.62em;
}

.markdown-preview-view li > strong:first-child + a[href*="wa.me"] {
  position: absolute;
  top: 12px;
  right: 14px;
  margin: 0;
}

/* Every wa.me link on the site is a green WhatsApp button. */
.markdown-preview-view a[href*="wa.me"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  background: var(--bd-green);
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 14px 10px 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.markdown-preview-view a[href*="wa.me"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.markdown-preview-view a[href*="wa.me"]::after {
  content: "WhatsApp";
  font-size: 14px;
  font-weight: 600;
}

.markdown-preview-view a[href*="wa.me"]:hover {
  background: var(--bd-green-hover);
  color: #ffffff;
}

/* ---------- Callouts ------------------------------------------------------ */

.markdown-preview-view .callout {
  --callout-color: 29, 95, 168;
  background: var(--bd-tint);
  border: none;
  border-radius: var(--bd-radius);
  padding: 14px 16px;
  margin: 1.4em 0;
  mix-blend-mode: normal;
}

.markdown-preview-view .callout-title {
  font-family: var(--bd-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bd-blue);
  gap: 6px;
}

.markdown-preview-view .callout-icon .svg-icon {
  width: 16px;
  height: 16px;
  color: var(--bd-blue);
}

.markdown-preview-view .callout-content {
  font-size: 15px;
  color: var(--bd-ink);
}

.markdown-preview-view .callout-content p:last-child {
  margin-bottom: 0;
}

/* Warnings (Pest Control) keep a warm signal colour. */
.markdown-preview-view .callout[data-callout="warning"] {
  --callout-color: 180, 110, 20;
  background: #fdf3e2;
}

.markdown-preview-view .callout[data-callout="warning"] .callout-title,
.markdown-preview-view .callout[data-callout="warning"] .callout-icon .svg-icon {
  color: #8a5300;
}

body.theme-dark .markdown-preview-view .callout[data-callout="warning"] {
  background: #33260f;
}

body.theme-dark .markdown-preview-view .callout[data-callout="warning"] .callout-title,
body.theme-dark .markdown-preview-view .callout[data-callout="warning"] .callout-icon .svg-icon {
  color: #f0c27a;
}

/* ---------- Navigation strip ----------------------------------------------
   Every page opens with the same strip, written in the note as:
     > [!nav]
     > [[Boquete Directory|Home]] · [[Service Providers|Providers]] · …
   It shows as one row of tabs that scrolls sideways on narrow phones.
   ------------------------------------------------------------------------ */

.markdown-preview-view .callout[data-callout="nav"] {
  background: none;
  padding: 0;
  margin: 0 0 1em;
}

.markdown-preview-view .callout[data-callout="nav"] .callout-title {
  display: none;
}

.markdown-preview-view .callout[data-callout="nav"] .callout-content {
  overflow-x: auto;
  scrollbar-width: none;
  margin-right: -16px;
}

.markdown-preview-view .callout[data-callout="nav"] .callout-content::-webkit-scrollbar {
  display: none;
}

.markdown-preview-view .callout[data-callout="nav"] .callout-content p {
  flex-wrap: nowrap;
  margin: 0;
  padding-right: 16px;
}

.markdown-preview-view .callout[data-callout="nav"] .callout-content p > a {
  margin: 0 6px 0 0;
  padding: 9px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bd-navy);
  background: var(--bd-card);
  border: 1px solid var(--bd-line);
}

body.theme-dark .markdown-preview-view .callout[data-callout="nav"] .callout-content p > a {
  color: var(--bd-ink);
}

.markdown-preview-view .callout[data-callout="nav"] .callout-content p > a:hover {
  background: var(--bd-tint);
  color: var(--bd-blue);
}

/* ---------- Home page ------------------------------------------------------ */

.markdown-preview-view.home .page-header {
  font-size: 2.2rem;
}

/* The one-paragraph introduction under the title. */
.markdown-preview-view.home .mod-frontmatter + .el-p p {
  font-size: 1.1em;
  line-height: 1.55;
  color: var(--bd-muted);
}

/* Tiles, written in the note as a list inside a callout:
     > [!tiles]
     > - [[Page|Label]] One line saying what is on that page.
   Each item becomes a card; the whole card is tappable. */
.markdown-preview-view .callout[data-callout="tiles"] {
  background: none;
  padding: 0;
  margin: 1.4em 0;
}

.markdown-preview-view .callout[data-callout="tiles"] .callout-title {
  display: none;
}

.markdown-preview-view .callout[data-callout="tiles"] ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.markdown-preview-view .callout[data-callout="tiles"] li {
  position: relative;
  background: var(--bd-card);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  padding: 14px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--bd-muted);
}

.markdown-preview-view .callout[data-callout="tiles"] li::marker {
  content: none;
}

.markdown-preview-view .callout[data-callout="tiles"] li:hover {
  border-color: var(--bd-blue);
}

.markdown-preview-view .callout[data-callout="tiles"] li > a:first-child {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bd-ink);
  text-decoration: none;
  margin-bottom: 4px;
}

/* Stretch the link over the whole card. */
.markdown-preview-view .callout[data-callout="tiles"] li > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Icon above each tile's label: a tinted square drawn by the link, with the
   icon itself laid over it by the card. The icon is picked by the page the
   tile links to (the --bd-icon values below). */
.markdown-preview-view .callout[data-callout="tiles"] li > a:first-child::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--bd-tint);
}

.markdown-preview-view .callout[data-callout="tiles"] li {
  --bd-icon: none;
}

.markdown-preview-view .callout[data-callout="tiles"] li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 23px;
  width: 20px;
  height: 20px;
  background-color: var(--bd-blue);
  -webkit-mask: var(--bd-icon) center / contain no-repeat;
  mask: var(--bd-icon) center / contain no-repeat;
  pointer-events: none;
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href="Service Providers"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href="Where to Buy"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href^="Common Questions#Jubilado"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href^="Common Questions#Driving"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16V11l2.5-5h11L20 11v5Z'/%3E%3Cpath d='M4 11h16'/%3E%3Ccircle cx='7.5' cy='16.5' r='2'/%3E%3Ccircle cx='16.5' cy='16.5' r='2'/%3E%3C/svg%3E");
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href^="Common Questions#Things"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 3 4 8 5-5 5 15H2L8 3z'/%3E%3C/svg%3E");
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href="Common Questions"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href="Pest Control"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.markdown-preview-view .callout[data-callout="tiles"] li:has(> a[data-href="Group Rules"]) {
  --bd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
}

/* Join block, written in the note as:
     > [!join] Join the WhatsApp groups
     > [Group name](https://chat.whatsapp.com/…) One line about the group.
   Each group link becomes a full-width green button with its line below. */
.markdown-preview-view .callout[data-callout="join"] {
  background: var(--bd-card);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  padding: 16px;
  margin: 1.6em 0;
}

.markdown-preview-view .callout[data-callout="join"] .callout-icon {
  display: none;
}

.markdown-preview-view .callout[data-callout="join"] .callout-title {
  color: var(--bd-navy);
  font-size: 13px;
}

body.theme-dark .markdown-preview-view .callout[data-callout="join"] .callout-title {
  color: var(--bd-ink);
}

.markdown-preview-view .callout[data-callout="join"] .callout-content p {
  font-size: 14px;
  color: var(--bd-muted);
  margin: 0 0 14px;
}

.markdown-preview-view .callout[data-callout="join"] .callout-content p:last-child {
  margin-bottom: 0;
}

.markdown-preview-view a[href*="chat.whatsapp.com"] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--bd-green);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.markdown-preview-view a[href*="chat.whatsapp.com"]::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
}

.markdown-preview-view a[href*="chat.whatsapp.com"]::after {
  content: "Join";
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.markdown-preview-view a[href*="chat.whatsapp.com"]:hover {
  background: var(--bd-green-hover);
  color: #ffffff;
}

/* ---------- Question headings (Common Questions) -------------------------- */

.markdown-preview-view .el-h3 h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--bd-ink);
  margin: 1.6em 0 0.5em;
}

.markdown-preview-view .el-h2 + .el-h3 h3 {
  margin-top: 0.4em;
}

/* ---------- Tables (price lists) ------------------------------------------ */

.markdown-preview-view table {
  font-family: var(--bd-font);
  font-size: 15px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bd-card);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  overflow: hidden;
  margin: 1.2em 0;
}

.markdown-preview-view th,
.markdown-preview-view td {
  border: none;
  border-bottom: 1px solid var(--bd-line);
  padding: 10px 14px;
  text-align: left;
}

.markdown-preview-view tr:last-child td {
  border-bottom: none;
}

.markdown-preview-view th {
  background: var(--bd-tint);
  color: var(--bd-navy);
  font-weight: 600;
}

/* Headerless tables (the water price list) drop their empty header row. */
.markdown-preview-view thead:not(:has(th:not(:empty))) {
  display: none;
}

.markdown-preview-view td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Phones -------------------------------------------------------- */

@media (max-width: 750px) {
  body {
    --font-text-size: 16.5px;
    --file-margins: 16px;
  }

  .markdown-preview-view h1,
  .markdown-preview-view .page-header {
    font-size: 1.75rem;
  }

  .markdown-preview-view h2 {
    margin-top: 1.8em;
  }

  /* Tables with three or more columns stack into one card per row, so
     nobody has to scroll a price list sideways. */
  .markdown-preview-view table:has(td:nth-child(3)) thead {
    display: none;
  }

  .markdown-preview-view table:has(td:nth-child(3)),
  .markdown-preview-view table:has(td:nth-child(3)) tbody,
  .markdown-preview-view table:has(td:nth-child(3)) tr,
  .markdown-preview-view table:has(td:nth-child(3)) td {
    display: block;
    width: 100%;
  }

  .markdown-preview-view table:has(td:nth-child(3)) tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--bd-line);
  }

  .markdown-preview-view table:has(td:nth-child(3)) td {
    border: none;
    padding: 2px 14px;
    text-align: left;
    white-space: normal;
  }

  .markdown-preview-view table:has(td:nth-child(3)) td:first-child {
    font-weight: 600;
  }
}

/* ---------- Print --------------------------------------------------------- */

@media print {
  .site-body-left-column,
  .site-body-right-column,
  .site-header,
  .callout {
    display: none !important;
  }

  .markdown-preview-view .el-h2 {
    position: static;
  }

  .markdown-preview-view a[href*="wa.me"] {
    font-size: inherit;
    background: none;
    color: inherit;
    padding: 0;
  }

  .markdown-preview-view a[href*="wa.me"]::before,
  .markdown-preview-view a[href*="wa.me"]::after {
    content: none;
    display: none;
  }
}