/*
Theme Name: Bylaw
Author: Mohammad Kafi
Version: 1.3.0
*/

/* Fixed header: reserve space so content is not hidden under it */
body {
  padding-top: 80px;
}
@media (max-width: 767px) {
  /*
   * Single post mobile: no top branding bar (header is md+ only). Reserve space for
   * fixed toolbar in single.php (~68px) + safe area.
   */
  body.single {
    padding-top: calc(68px + env(safe-area-inset-top, 0px));
  }

  body.single .bylaw-single-mobile-toolbar {
    top: env(safe-area-inset-top, 0px);
  }
}

/*
 * Variable-columns table — mobile stacked cards only (.bylaw-var-table-mobile).
 * Border/arrow use #dee2e6; cell/label colors in CSS so Tailwind arbitrary hex is not required.
 */
.bylaw-var-table-mobile-card {
  border: 1px solid #dee2e6;
}

.bylaw-var-table-mobile-arrow {
  display: inline-block;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
  margin-right: 10px;
  color: #8c949f;
}

.bylaw-var-table-mobile-label {
  color: #9aa3b2;
}

.bylaw-var-table-mobile-cell--tone-a {
  color: #8c949f;
}

.bylaw-var-table-mobile-cell--tone-b {
  color: #000000;
}

/* Front page — Interactive Zoning Map: row on desktop (intro + link); iframe stays below this block */
.bylaw-zoning-map-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .bylaw-zoning-map-head {
    display: grid;
    grid-template-columns: minmax(0, 2fr) auto;
    align-items: start;
    /* A few words of air between paragraph and “View Full Map”. */
    column-gap: calc(0.75rem + 6ch);
    row-gap: 0.75rem;
  }

  /* Use full width of the text column (no extra max-width cap). */
  .bylaw-zoning-map-intro {
    max-width: 100%;
  }

  .bylaw-zoning-map-link {
    justify-self: start;
    white-space: nowrap;
  }
}

/* Quick nav: scroll content to top below fixed header (no content under header) */
[data-quick-nav-content] {
  scroll-margin-top: 80px;
}
@media (max-width: 767px) {
  body.single [data-quick-nav-content] {
    scroll-margin-top: calc(68px + env(safe-area-inset-top, 0px));
  }
}

/* Hide native browser clear (x) button for search inputs */
[data-front-search-input]::-webkit-search-cancel-button,
[data-front-search-input]::-webkit-search-decoration,
[data-front-search-input]::-webkit-search-results-button,
[data-front-search-input]::-webkit-search-results-decoration,
[data-quick-nav-search-input]::-webkit-search-cancel-button,
[data-quick-nav-search-input]::-webkit-search-decoration,
[data-quick-nav-search-input]::-webkit-search-results-button,
[data-quick-nav-search-input]::-webkit-search-results-decoration,
[data-definitions-search-input]::-webkit-search-cancel-button,
[data-definitions-search-input]::-webkit-search-decoration,
[data-definitions-search-input]::-webkit-search-results-button,
[data-definitions-search-input]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

[data-front-search-input]::-ms-clear,
[data-front-search-input]::-ms-reveal,
[data-quick-nav-search-input]::-ms-clear,
[data-quick-nav-search-input]::-ms-reveal,
[data-definitions-search-input]::-ms-clear,
[data-definitions-search-input]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* Unified search result term highlight (modal, front page, Quick Navigation, REST) */
.bylaw-search-highlight {
  background-color: rgba(208, 151, 73, 0.28);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Quick nav desktop: collapsed state – narrow width, icons only */
[data-quick-nav-desktop].is-collapsed {
  width: 72px !important;
}

[data-quick-nav-desktop].is-collapsed [data-quick-nav-header-wrap] {
  padding-left: 12px;
  padding-right: 12px;
}

[data-quick-nav-desktop].is-collapsed [data-quick-nav-header-wrap] > div {
  justify-content: center;
}

[data-quick-nav-desktop].is-collapsed [data-quick-nav-collapse-hide] {
  display: none !important;
}

[data-quick-nav-desktop].is-collapsed [data-quick-nav-scroll] {
  padding-left: 12px;
  padding-right: 12px;
}

[data-quick-nav-desktop].is-collapsed [data-quick-nav-item] button[data-quick-nav-toggle],
[data-quick-nav-desktop].is-collapsed [data-quick-nav-item] a[data-quick-nav-link] {
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
}

/* Active quick nav link – background when tab is active */
[data-quick-nav] a[data-quick-nav-link].is-active {
  background-color: #dee2e6;
}

/* Quick nav accordion: smooth open/close via grid height transition */
[data-quick-nav-children] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
}
[data-quick-nav-children].is-open {
  grid-template-rows: 1fr;
}
[data-quick-nav-children] > div {
  min-height: 0;
  overflow: hidden;
}

/* Smooth caret rotation on toggle */
[data-quick-nav-caret] {
  transition: transform 0.25s ease-out;
}

/* Lists inside quick nav content (Tailwind preflight resets list-style) */
[data-quick-nav-content] ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

[data-quick-nav-content] ul ul {
  list-style-type: circle;
}

[data-quick-nav-content] ul ul ul {
  list-style-type: square;
}

[data-quick-nav-content] ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

[data-quick-nav-content] ol ol {
  list-style-type: lower-alpha;
}

[data-quick-nav-content] ol ol ol {
  list-style-type: lower-roman;
}

[data-quick-nav-content] li {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Paragraph line height in quick nav sections (main content) */
[data-quick-nav-sections] p {
  line-height: 30px;
}
 /* spacing for bullets / numbered list */
[data-quick-nav-sections] li {
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ── Rich-text / WYSIWYG nested list styles ─────────────────────── */

.bylaw-richtext ul,
.bylaw-richtext ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.6em;
}

.bylaw-richtext li {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  line-height: 1.8;
}

.bylaw-richtext li > ul,
.bylaw-richtext li > ol {
  margin-top: 0.15em;
  margin-bottom: 0;
  padding-left: 1.4em;
}

/* Level 1 */
.bylaw-richtext > ul                { list-style-type: disc; }
.bylaw-richtext > ol                { list-style-type: decimal; }

/* Level 2 */
.bylaw-richtext ul ul               { list-style-type: circle; }
.bylaw-richtext ol ol               { list-style-type: upper-roman; }
.bylaw-richtext ul ol               { list-style-type: decimal; }
.bylaw-richtext ol ul               { list-style-type: circle; }

/* Level 3 */
.bylaw-richtext ul ul ul            { list-style-type: square; }
.bylaw-richtext ol ol ol            { list-style-type: lower-alpha; }
.bylaw-richtext ul ul ol            { list-style-type: upper-roman; }
.bylaw-richtext ol ul ul            { list-style-type: square; }

/* Level 4 */
.bylaw-richtext ul ul ul ul         { list-style-type: disc; }
.bylaw-richtext ol ol ol ol         { list-style-type: lower-roman; }

/* Level 5 – cycle back */
.bylaw-richtext ul ul ul ul ul      { list-style-type: disc; }
.bylaw-richtext ol ol ol ol ol      { list-style-type: decimal; }

/*
 * Paragraph rhythm — Tailwind preflight (bundle.css) resets p margins to 0, so a
 * single blank line in TinyMCE disappears on the front. Restore spacing and give
 * empty / br-only paragraphs a visible gap.
 */
.bylaw-richtext p,
.prose p {
  margin-top: 0;
  margin-bottom: 1em;
}

.bylaw-richtext p:last-child,
.prose p:last-child {
  margin-bottom: 0;
}

.bylaw-richtext p:empty,
.prose p:empty {
  min-height: 1em;
}

.bylaw-richtext p:has(> br:only-child),
.prose p:has(> br:only-child) {
  min-height: 1em;
}

/*
 * WYSIWYG image alignment — bundle.css (Tailwind preflight) loads after this file
 * and sets img{display:block}; use img/figure selectors + !important so the public
 * site matches the editor. Include .prose for single.php section intros.
 */
.bylaw-richtext .alignleft,
.bylaw-richtext img.alignleft,
.bylaw-richtext figure.alignleft,
.prose .alignleft,
.prose img.alignleft,
.prose figure.alignleft {
  float: left !important;
  margin: 0 1em 0.75em 0 !important;
}

.bylaw-richtext .alignright,
.bylaw-richtext img.alignright,
.bylaw-richtext figure.alignright,
.prose .alignright,
.prose img.alignright,
.prose figure.alignright {
  float: right !important;
  margin: 0 0 0.75em 1em !important;
}

.bylaw-richtext .aligncenter,
.bylaw-richtext img.aligncenter,
.bylaw-richtext figure.aligncenter,
.prose .aligncenter,
.prose img.aligncenter,
.prose figure.aligncenter {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  clear: both;
}

.bylaw-richtext img.alignnone,
.bylaw-richtext .alignnone,
.prose img.alignnone,
.prose .alignnone {
  display: inline !important;
  vertical-align: middle !important;
  float: none !important;
}

.bylaw-richtext::after,
.prose::after {
  content: "";
  display: table;
  clear: both;
}

.bylaw-richtext .wp-caption,
.prose .wp-caption {
  max-width: 100%;
}

.bylaw-richtext .wp-caption-text,
.prose .wp-caption-text {
  font-size: 0.875em;
  margin-top: 0.35em;
  color: #6c7b99;
}

/* ── Site footer: cap width on ultrawide, generous columns, mobile stack ─ */

.bylaw-footer__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  /* Slightly more inset on the left so the block sits a bit toward the right */
  padding: 32px clamp(20px, 3.5vw, 56px) 32px clamp(36px, 6vw, 104px);
}

@media (min-width: 768px) {
  .bylaw-footer__inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.bylaw-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: stretch;
  color: #ffffff;
}

/*
 * Desktop: CSS Grid — one column-gap value = identical gutter width between col 1|2 and 2|3 (spec).
 * Three equal tracks so perceived space between text blocks matches, not only grid lines.
 */
@media (min-width: 768px) {
  .bylaw-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(56px, 6vw, 96px);
    row-gap: 0;
  }
}

@media (min-width: 1024px) {
  .bylaw-footer__grid {
    column-gap: clamp(64px, 7vw, 104px);
  }
}

/* Column 2: block centred in the track; text inside stays left-aligned (one rastá) */
@media (min-width: 768px) {
  .bylaw-footer__col:nth-child(2) {
    justify-self: center;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    text-align: left;
  }
}

.bylaw-footer__col {
  min-width: 0;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/*
 * Column 1 has a 40px-tall logo row with the dept title vertically centred (line-height 24px).
 * Offset cols 2–3 so "Quick Links" / "Contact" line up with that title, not the top of the logo.
 * (40 - 24) / 2 ≈ 8px — only when the brand row is a single line (matches nowrap breakpoint).
 */
@media (min-width: 1024px) {
  .bylaw-footer__col:nth-child(2),
  .bylaw-footer__col:nth-child(3) {
    padding-top: 8px;
  }
}

.bylaw-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.bylaw-footer__logo {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

.bylaw-footer__brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.bylaw-footer__dept-title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* Keep logo + department title on one line once columns are wide enough */
@media (min-width: 1024px) {
  .bylaw-footer__brand-text {
    flex-shrink: 0;
    min-width: min-content;
  }

  .bylaw-footer__dept-title {
    white-space: nowrap;
  }
}

.bylaw-footer__intro {
  font-size: 14px;
  line-height: 25.5px;
  color: #dee2e6;
}

/*
 * First column intro: target three lines. Wider box + min column width; line-clamp caps overflow.
 */
.bylaw-footer__col:first-child .bylaw-footer__intro {
  width: 100%;
  max-width: min(40ch, 100%);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-clamp: 3;
}

.bylaw-footer__section-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 14px;
}

.bylaw-footer__section-title--contact {
  margin-bottom: 16px;
}

.bylaw-footer__nav {
  display: flex;
  flex-direction: column;
}

.bylaw-footer__nav a {
  display: block;
  color: #dee2e6;
  line-height: 28.8px;
  margin-bottom: 12px;
  text-decoration: none;
}

.bylaw-footer__nav a:last-child {
  margin-bottom: 0;
}

.bylaw-footer__nav a:hover,
.bylaw-footer__nav a:focus-visible {
  text-decoration: none;
  opacity: 0.8;
}

.bylaw-footer__contact-block {
  margin-bottom: 18px;
}

.bylaw-footer__contact-block--last {
  margin-bottom: 0;
}

.bylaw-footer__contact-label {
  color: #dee2e6;
  line-height: 28.8px;
}

.bylaw-footer__email {
  display: block;
  color: #bf812c;
  line-height: 28.8px;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bylaw-footer__bottom {
  box-sizing: border-box;
  width: 100%;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px clamp(20px, 3.5vw, 56px) 10px clamp(36px, 6vw, 104px);
  text-align: center;
  font-size: 14px;
  line-height: 25.5px;
  color: #b8c2d7;
  overflow-wrap: anywhere;
}

.bylaw-footer__copyright {
  margin-right: 0.35em;
}

/* Front page: "Coming Soon" pill — not Tailwind (arbitrary colors may be purged from bundle) */
.bylaw-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: #f4f5f6;
  color: #415376;
  font-weight: 500;
  cursor: not-allowed;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.bylaw-coming-soon-badge svg {
  flex-shrink: 0;
  display: block;
  color: inherit;
}

@media (min-width: 640px) {
  .bylaw-coming-soon-badge {
    padding: 0.375rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Definition item highlight: flashes gold border + background, then fades out */
@keyframes bylaw-definition-flash {
  0%   { background-color: rgba(191, 129, 44, 0.10); box-shadow: 0 0 0 2px rgba(191, 129, 44, 0.40); }
  50%  { background-color: rgba(191, 129, 44, 0.10); box-shadow: 0 0 0 2px rgba(191, 129, 44, 0.40); }
  100% { background-color: transparent; box-shadow: none; }
}

.bylaw-definition-highlighted {
  animation: bylaw-definition-flash 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Global search modal: above everything */
.bylaw-front-search-modal {
  z-index: 120;
}

/* X close button: hidden on mobile, flex on desktop */
.bylaw-search-close {
  display: none;
}

@media (min-width: 768px) {
  /* Panel: fixed size so flex-1 on results works */
  .bylaw-search-panel {
    height: auto;
    max-width: 640px;
    border-radius: 1rem;
    box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.2);
  }

  /* X button visible on desktop */
  .bylaw-search-close {
    display: inline-flex;
  }

  /* Results: cap to ~5 rows (~430px) then scroll */
  .bylaw-search-results {
    max-height: 430px;
    overflow-y: auto;
  }
}

/* Mobile bottom sheet: stay below browser UI (URL bar) using svh + safe-area; results list scrolls */
@media (max-width: 767px) {
  .bylaw-search-panel {
    border-radius: 2.125rem 2.125rem 0 0;
    box-sizing: border-box;
    /* Small viewport height avoids content sitting under dynamic browser chrome */
    height: min(92dvh, calc(100svh - env(safe-area-inset-top, 0px) - 12px));
    max-height: min(92dvh, calc(100svh - env(safe-area-inset-top, 0px) - 12px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bylaw-search-panel.bylaw-search-panel--expanded {
    height: min(100dvh, calc(100svh - env(safe-area-inset-top, 0px) - 8px)) !important;
    max-height: min(100dvh, calc(100svh - env(safe-area-inset-top, 0px) - 8px)) !important;
  }

  [data-front-search-modal] .bylaw-search-results {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    isolation: isolate;
  }

  [data-front-search-modal] .bylaw-search-results::-webkit-scrollbar {
    width: 4px;
  }

  [data-front-search-modal] .bylaw-search-results::-webkit-scrollbar-track {
    background: transparent;
  }

  [data-front-search-modal] .bylaw-search-results::-webkit-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 9999px;
  }
}

/* ── Flexible fee table (ACF-driven, appendix-style schedules) ─────────── */

/* Fixed 80px header offset + extra breathing room for this template. */
.bylaw-flex-fee-page-wrap {
  padding-top: calc(2.75rem);
}

/* Single vertical rhythm for flexible fee page (no stacked conflicting margins). */
.bylaw-flex-fee-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .bylaw-flex-fee-page {
    gap: 2rem;
  }
}

.bylaw-flex-fee-page__note {
  margin: 0 0 -0.35rem;
}

/* Flexible fee table template: full width on small screens; capped width from md up. */
.bylaw-flex-table-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .bylaw-flex-table-page {
    max-width: min(100%, 78%);
  }
}

/* Section heading: above the bordered table; pill narrower than col1; flush with table */
.bylaw-flex-table__section-above {
  box-sizing: border-box;
  margin-bottom: 0;
}

.bylaw-flex-table__section-above-col1 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

.bylaw-flex-table__section-above-gap {
  min-width: 0;
}

.bylaw-flex-table__section-heading-pill {
  display: block;
  width: calc(100% - 52px);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.55rem;
  background: #ede8e3;
  border: 1px solid #ede8e3;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #141e32;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.bylaw-flex-table-sheet {
  box-sizing: border-box;
  border: 1px solid #ede8e3;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.bylaw-flex-table-mobile {
  padding: 0.75rem;
  background: #ffffff;
}

.bylaw-flex-table-mobile__category {
  margin: 0.35rem 0 0.55rem;
  color: #141e32;
  font-size: 0.95rem;
  font-weight: 700;
}

.bylaw-flex-table-mobile__card {
  border: 1px solid #ede8e3;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.65rem;
}

.bylaw-flex-table-mobile__row + .bylaw-flex-table-mobile__row {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #ede8e3;
}

.bylaw-flex-table-mobile__label {
  color: #9aa3b2;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bylaw-flex-table-mobile__value {
  margin-top: 0.2rem;
  color: #141e32;
  font-size: 0.94rem;
  line-height: 1.35;
}

.bylaw-flex-table-mobile__value--fill {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #f3e7d9;
  border: 1px solid #ede8e3;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.bylaw-flex-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.bylaw-flex-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffffff;
}

.bylaw-flex-table__col-first {
  width: 46%;
  min-width: 180px;
}

/* Flexible table aligns like other custom tables: all left. */
.bylaw-flex-table__align--left,
.bylaw-flex-table__align--center,
.bylaw-flex-table__align--right,
.bylaw-flex-table__cell.bylaw-flex-table__align--left,
.bylaw-flex-table__cell.bylaw-flex-table__align--center,
.bylaw-flex-table__cell.bylaw-flex-table__align--right {
  text-align: left;
}

.bylaw-flex-table__head {
  border-top: 1px solid #ede8e3;
  border-bottom: 1px solid #ede8e3;
  border-left: 1px solid #ede8e3;
  border-right: 1px solid #ede8e3;
  padding: 0.75rem 1rem;
  font-weight: 500;
  vertical-align: bottom;
  background: #ffffff;
  text-align: left;
}

.bylaw-flex-table__cell {
  border-top: 1px solid #ede8e3;
  border-bottom: 1px solid #ede8e3;
  padding: 0.75rem 1rem;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  background: #ffffff;
  text-align: left;
  color: #141e32;
}

.bylaw-flex-table__row-standard .bylaw-flex-table__cell:first-child,
.bylaw-flex-table__row-column-headers .bylaw-flex-table__head:first-child {
  border-left: 1px solid #ede8e3;
}

.bylaw-flex-table__row-standard .bylaw-flex-table__cell:last-child,
.bylaw-flex-table__row-column-headers .bylaw-flex-table__head:last-child {
  border-right: 1px solid #ede8e3;
}

.bylaw-flex-table__cell--column-fill {
  background-color: #f3e7d9;
}

.bylaw-flex-table__row-category .bylaw-flex-table__category {
  border-top: 1px solid #ede8e3;
  border-bottom: 1px solid #ede8e3;
  border-left: 1px solid #ede8e3;
  border-right: 1px solid #ede8e3;
  padding: 0.6rem 1rem;
  background: #ede8e3;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #141e32;
}

.bylaw-flex-table__row-standard--under-category .bylaw-flex-table__cell {
  background: #ffffff;
}

.bylaw-flex-table__row-standard--alt .bylaw-flex-table__cell {
  background: #fbfaf8;
}

.bylaw-flex-table__row-standard--group-end .bylaw-flex-table__cell {
  border-bottom: 1px solid #ede8e3;
}

.bylaw-flex-table__row-standard .bylaw-flex-table__cell--column-fill,
.bylaw-flex-table__row-standard--alt .bylaw-flex-table__cell--column-fill {
  background: #f3e7d9;
}

.bylaw-flex-table__row-arrow-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.bylaw-flex-table__row-arrow {
  display: inline-block;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #9aa3b2;
}

/* Mobile optimization: keep section heading inside border and improve table readability. */
@media (max-width: 767px) {
  .bylaw-flex-table__section-heading-pill {
    width: calc(100% - 20px);
    padding: 0.32rem 0.45rem;
    font-size: 0.74rem;
    line-height: 1.22;
    letter-spacing: 0.01em;
  }

  .bylaw-flex-table-mobile {
    padding: 0.6rem;
  }
}