/* Shared Forest & Clay palette for the HTML and PHP renderers. */
:root {
  --dr-page-gutter: 24px;
  --dr-paper: #faf8f3;
  --dr-surface: #fffefa;
  --dr-sidebar: #f1f1e8;
  --dr-sage: #eaf1e9;
  --dr-sage-hover: #dfeadd;
  --dr-ink: #2d3430;
  --dr-muted: #61685f;
  --dr-brand: #326454;
  --dr-brand-hover: #264f42;
  --dr-accent: #b75b3e;
  --dr-accent-hover: #9d482f;
  --dr-link: #9d482f;
  --dr-border: #dedfd4;
  --dr-border-strong: #bdcbbd;
  --dr-on-action: #ffffff;
}

body, #right-column { background-color: var(--dr-paper); color: var(--dr-ink); }
.site-header, .filter-bar, .article-card, .practice-card { background-color: var(--dr-surface); }
#left-column { background-color: var(--dr-sidebar); }

.bg-surface { background-color: var(--dr-surface); }
.bg-neutral { background-color: var(--dr-sidebar); }
.bg-sage { background-color: var(--dr-sage); }
.bg-accent { background-color: var(--dr-accent); }
.bg-brand { background-color: var(--dr-brand); }
.text-ink { color: var(--dr-ink); }
.text-muted { color: var(--dr-muted); }
.text-brand { color: var(--dr-brand); }
.text-on-action { color: var(--dr-on-action); }
.border-warm { border-color: var(--dr-border); }
.hover\:bg-sage:hover, .hover\:bg-neutral:hover { background-color: var(--dr-sage); }
.hover\:bg-accent-hover:hover { background-color: var(--dr-accent-hover); }
.hover\:bg-brand-hover:hover { background-color: var(--dr-brand-hover); }
.hover\:text-brand:hover { color: var(--dr-brand); }
.hover\:text-ink:hover { color: var(--dr-ink); }
.focus\:bg-surface:focus { background-color: var(--dr-surface); }
.focus\:border-brand:focus { border-color: var(--dr-brand); }

.site-header, .filter-bar, #left-column { border-color: var(--dr-border); }
.site-header, .filter-bar {
  padding-left: var(--dr-page-gutter) !important;
  padding-right: var(--dr-page-gutter) !important;
}
.filter-bar { display: flex; align-items: flex-start; gap: 16px; }
#tags-container { flex: 1; min-width: 0; }
.filter-bar > .telegram-pill { margin-left: auto; }

.site-header .group:hover { color: var(--dr-brand); }
.site-header .site-wordmark { font-size: 24px; line-height: 32px; }
@media (min-width: 1024px) {
  .site-header .site-wordmark { font-size: 26px; }
}
.group:hover .group-hover\:text-brand { color: var(--dr-brand); }

.btn-primary-brand { background-color: var(--dr-accent); color: var(--dr-on-action) !important; }
.btn-primary-brand:hover { background-color: var(--dr-accent-hover); color: var(--dr-on-action) !important; }

.article-card:hover { border-color: var(--dr-border-strong); border-left-color: var(--dr-brand); }
.article-card:hover h3 { color: var(--dr-brand); }
.dr-active-card {
  background-color: var(--dr-sage) !important;
  border-color: var(--dr-border-strong) !important;
  border-left-color: var(--dr-brand) !important;
  box-shadow: 0 2px 6px rgba(45, 52, 48, 0.04) !important;
}
.dr-active-card h3 { color: var(--dr-brand) !important; }
.tag-pill-active {
  background-color: var(--dr-brand) !important;
  color: var(--dr-on-action) !important;
  border-color: transparent !important;
}
.tag-pill-inactive { background-color: var(--dr-paper); color: var(--dr-ink); border-color: transparent; }
.tag-pill-inactive:hover { background-color: var(--dr-sage); border-color: transparent; color: var(--dr-brand); }
.telegram-pill { background-color: var(--dr-sage); color: var(--dr-brand); border-color: var(--dr-border-strong); }
.telegram-pill:hover { background-color: var(--dr-brand); border-color: var(--dr-brand); color: var(--dr-on-action); box-shadow: 0 1px 3px rgba(50, 100, 84, 0.16); }
.telegram-pill:hover svg { fill: currentColor; }
.telegram-bar-divider { background-color: var(--dr-border); }

#search-input { background-color: var(--dr-paper); color: var(--dr-ink); border-color: var(--dr-border); }
#search-input::placeholder { color: var(--dr-muted); opacity: 1; }
#search-input:focus { background-color: var(--dr-surface); border-color: var(--dr-brand); box-shadow: 0 0 0 3px rgba(50, 100, 84, 0.12); }
.search-icon-svg, #search-kbd, #search-clear-btn { color: var(--dr-muted); }
#search-kbd { background-color: var(--dr-sidebar); border-color: var(--dr-border); }
#search-clear-btn:hover { background-color: var(--dr-sage); color: var(--dr-brand); }

.dossier-box { background-color: var(--dr-sage); border-color: transparent; border-left-color: var(--dr-brand); }
.dossier-box p { color: var(--dr-ink); }
.dossier-label, .article-content h2, .article-content h3, .article-content h4 { color: var(--dr-brand); }
.article-content p.text-xs { background-color: var(--dr-sidebar); color: var(--dr-muted); border-color: transparent; }
.article-badge { background-color: var(--dr-sage); color: var(--dr-brand); border-color: var(--dr-border); }
.article-badge:hover { background-color: var(--dr-brand); color: var(--dr-on-action); border-color: var(--dr-brand); }
.article-content a { color: var(--dr-link) !important; text-decoration-color: rgba(183, 91, 62, 0.45); }
.article-content a:hover { color: var(--dr-brand) !important; text-decoration-color: var(--dr-brand); }
.article-content .ipk-reference { margin: 0 0 18px; font-size: 13px; line-height: 1.6; }
.article-content .ipk-reference a { font-weight: 600; }
.ipk-return-button { display: inline-block; margin: 0 0 22px; padding: 9px 14px; border: 1px solid var(--dr-border); border-radius: 6px; background: var(--dr-sage); color: var(--dr-brand); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ipk-return-button:hover { background: var(--dr-sage-hover); }
.ipk-original-title { font-size: 21px; line-height: 1.6; overflow-wrap: anywhere; }
.ipk-original-title span { display: block; }
.ipk-original-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: inherit; line-height: 1.7; }
.ipk-reader-status { color: var(--dr-muted); line-height: 1.6; }
.ipk-reader-status a { color: var(--dr-link); text-decoration: underline; }

.trust-strip, .executive-cta { background-color: var(--dr-sage); border-color: var(--dr-border); color: var(--dr-ink); }
#landing-viewer .trust-strip, #landing-viewer .executive-cta { border-color: transparent; }
.trust-strip .font-bold, .landing-section-title, #landing-viewer .practice-card h3 { color: var(--dr-brand); }
.executive-cta h3, .executive-cta h4, .executive-cta .text-brand { color: var(--dr-brand); }
.executive-cta p { color: var(--dr-muted); }
.executive-cta a[href^="mailto:"] { color: var(--dr-ink); border: 1px solid var(--dr-border); }
.practice-card:hover { border-color: var(--dr-border-strong); }
#landing-viewer .practice-card,
#landing-viewer .practice-card:hover { border-color: transparent; box-shadow: none; }

button:focus-visible, a:focus-visible { outline: 2px solid var(--dr-brand); outline-offset: 3px; }
::-webkit-scrollbar-track { background-color: var(--dr-paper); }
::-webkit-scrollbar-thumb { background-color: var(--dr-border-strong); }
::-webkit-scrollbar-thumb:hover { background-color: var(--dr-muted); }

/* Desktop: Margin alignment and hide mobile back link */
@media (min-width: 1024px) {
  #article-viewer,
  #landing-viewer,
  #team-viewer {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .mobile-back-link { display: none !important; }
}

/* CTA text switching for mobile vs desktop */
.cta-short { display: none; }
.cta-full { display: inline; }

/* Mobile & Tablet Detail View (< 1024px): Hide filter bar on article/team/services reading */
@media (max-width: 1023px) {
  .filter-bar.filter-bar-detail {
    display: none !important;
  }
}

/* Mobile Header (< 640px) */
@media (max-width: 639px) {
  .site-header {
    display: grid !important;
    grid-template-columns: 1fr auto;
    row-gap: 10px;
    column-gap: 12px;
    align-items: center;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  #site-logo {
    grid-column: 1;
    grid-row: 1;
  }
  .site-nav {
    display: contents !important;
  }
  .site-header .btn-primary-brand {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    line-height: 1.25;
    border-radius: 8px;
    justify-self: end;
  }
  .cta-short { display: inline; }
  .cta-full { display: none; }

  .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
  }
  .nav-team-link {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .nav-landing-link {
    grid-column: 2;
    grid-row: 3;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Catalog View on Mobile: Smooth horizontal tag scroll (single row) */
  .filter-bar:not(.filter-bar-detail) {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .filter-bar:not(.filter-bar-detail) #tags-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    flex: 1;
  }
  .filter-bar:not(.filter-bar-detail) #tags-container::-webkit-scrollbar {
    display: none;
  }
  .filter-bar:not(.filter-bar-detail) > .telegram-pill {
    display: none;
  }

  /* Mobile back link on phones */
  .mobile-back-link {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dr-muted);
    text-decoration: none;
    margin-bottom: 12px;
    padding: 4px 0;
    transition: color 0.15s ease;
  }
  .mobile-back-link:hover {
    color: var(--dr-ink);
  }
}

/* Standalone practice and team pages share the full content canvas. */
body.full-page #left-column,
body.full-page .filter-bar { display: none !important; }
body.full-page #right-column { display: block !important; width: 100%; }
body.full-page #landing-viewer,
body.full-page #team-viewer {
  width: 100%;
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.full-page .mobile-back-link {
  display: block !important;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 24px;
  text-align: left;
  color: var(--dr-muted);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
}
body.full-page .mobile-back-link:hover { color: var(--dr-brand); }
@media (min-width: 1024px) {
  body.full-page #right-column { padding: 32px 48px 64px; }
}