/* draft21 site-wide — paste into Appearance → Customize → Additional CSS */

/* ── Readability (site-wide, tool pages + categories) ── */
.entry-content {
  font-size: 1.125rem;
  line-height: 1.75;
}
.entry-content [class$="-intro"],
.entry-content [class$="-hero"],
.entry-content [class$="-hint"],
.entry-content [class$="-about"] {
  font-size: 1.125rem !important;
}
.entry-content [class$="-label"],
.entry-content [class$="-name"],
.entry-content [class$="-opt"],
.entry-content label[class*="label"] {
  font-size: 0.9375rem !important;
}
.entry-content [class$="-desc"],
.entry-content [class$="-sublabel"],
.entry-content [class$="-idle"],
.entry-content [class$="-qa"] p {
  font-size: 0.9375rem !important;
}
.entry-content [class$="-qa"] h3 {
  font-size: 0.975rem !important;
}
.entry-content [class$="-rel-desc"],
.entry-content [class$="-rel-name"] {
  font-size: 0.9375rem !important;
}
.entry-content [class$="-related"] h2,
.entry-content [class$="-faq"] h2,
.entry-content h2 {
  font-size: 1.3rem;
}

/* Mobile layout + readability */
@media (max-width: 921px) {
  /* Astra page-builder strips container padding — restore side margins on phones */
  body.ast-page-builder-template .site-main .entry-header,
  body.ast-page-builder-template .site-main .entry-content {
    padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }
  body.ast-page-builder-template .site-main .entry-header {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }

  .entry-content,
  .elementor-widget-html .elementor-widget-container {
    font-size: 1.0625rem;
    line-height: 1.7;
  }
  .entry-content [class$="-intro"],
  .entry-content [class$="-hero"],
  .entry-content [class$="-about"],
  .elementor-widget-html [class$="-intro"],
  .elementor-widget-html [class$="-hero"],
  .elementor-widget-html [class$="-about"] {
    font-size: 1.125rem !important;
    color: #334155 !important;
    line-height: 1.75 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
  .entry-content [class$="-hint"],
  .entry-content [class$="-idle"],
  .entry-content [class$="-output-idle"],
  .elementor-widget-html [class$="-hint"],
  .elementor-widget-html [class$="-idle"],
  .elementor-widget-html [class$="-output-idle"] {
    font-size: 1rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
  }
  .entry-content [class$="-desc"],
  .entry-content [class$="-sublabel"],
  .entry-content [class$="-qa"] p,
  .elementor-widget-html [class$="-desc"],
  .elementor-widget-html [class$="-sublabel"],
  .elementor-widget-html [class$="-qa"] p {
    font-size: 1.0625rem !important;
    color: #334155 !important;
    line-height: 1.75 !important;
  }
  .entry-content [class$="-qa"] h3,
  .elementor-widget-html [class$="-qa"] h3 {
    font-size: 1.1rem !important;
  }
  .entry-content [class$="-rel-desc"],
  .elementor-widget-html [class$="-rel-desc"] {
    font-size: 1rem !important;
    color: #475569 !important;
  }
  .entry-content [class$="-rel-name"],
  .elementor-widget-html [class$="-rel-name"] {
    font-size: 1.0625rem !important;
  }
  .entry-content [class$="-label"],
  .entry-content label[class*="label"],
  .elementor-widget-html [class$="-label"],
  .elementor-widget-html label[class*="label"] {
    font-size: 1.0625rem !important;
  }
  .entry-content [class$="-input"],
  .entry-content [class$="-select"],
  .entry-content [class$="-textarea"],
  .entry-content textarea,
  .entry-content select,
  .elementor-widget-html [class$="-input"],
  .elementor-widget-html [class$="-select"],
  .elementor-widget-html [class$="-textarea"],
  .elementor-widget-html textarea,
  .elementor-widget-html select {
    font-size: 1.0625rem !important;
  }
  .entry-content [class$="-box"],
  .elementor-widget-html [class$="-box"] {
    padding: 22px 18px 20px !important;
  }
  .entry-content [class$="-input"]::placeholder,
  .entry-content [class$="-textarea"]::placeholder,
  .elementor-widget-html [class$="-input"]::placeholder,
  .elementor-widget-html [class$="-textarea"]::placeholder {
    color: #64748b !important;
    opacity: 1;
  }
  .entry-content [class$="-faq"] h2,
  .entry-content [class$="-related"] h2,
  .elementor-widget-html [class$="-faq"] h2,
  .elementor-widget-html [class$="-related"] h2 {
    font-size: 1.35rem !important;
  }
}

/* ── Monetization-ready slots (empty until ads/affiliates are added) ── */
.d21-ad-slot,
[class$="-affiliate"],
[class$="-monetize"] {
  min-height: 0;
  margin-bottom: 44px;
}
.d21-ad-slot:empty,
[class$="-affiliate"]:empty,
[class$="-monetize"]:empty {
  display: none;
}
/* When adding ads: insert markup into [class$="-monetize"] or [class$="-affiliate"] — slots already sit below tool grids / above FAQ. */

/* ── App-like cards & buttons inside tool content ── */
.entry-content [class$="-card"],
.entry-content [class$="-rel-card"],
.entry-content [class$="-btn"]:not(.d21wgs-tile),
.entry-content button[class*="btn"],
.entry-content [class$="-ex"] {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.entry-content [class$="-card"]:hover,
.entry-content [class$="-rel-card"]:hover {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
}
.entry-content [class$="-card"]:active,
.entry-content [class$="-rel-card"]:active {
  transform: scale(0.98);
}
.entry-content [class$="-btn-primary"],
.entry-content [class$="-btn"]:not([class*="secondary"]):not([class*="clear"]):not(.d21wgs-tile) {
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}
.entry-content [class$="-btn"]:not([class*="secondary"]):not([class*="clear"]):active,
.entry-content button[class*="btn"]:not([class*="secondary"]):active {
  transform: translateY(1px);
  box-shadow: none;
}
.entry-content [class$="-btn"]:focus-visible,
.entry-content [class$="-card"]:focus-visible,
.entry-content a[class$="-card"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Category hub cards — subtle accent, not gray-on-gray */
.d21wgt-card,
.d21wtt-card,
.d21gen-card,
.d21calc-card,
.d21cwt-card,
.d21aict-card,
.d21dev-card,
.d21home-cat,
.d21home-rel-card {
  border-left: 3px solid #bfdbfe !important;
}
.d21wgt-card--featured,
.d21home-cat:first-child {
  border-left-color: #2563eb !important;
  background: linear-gradient(135deg, #fff 0%, #f8fbff 100%) !important;
}

/* ── Mobile navigation (Astra) ── */
#ast-hf-mobile-menu .d21-mobile-cat-item .menu-link {
  font-weight: 600;
  color: #1e293b;
}
#ast-hf-mobile-menu .d21-mobile-cat-item.current-menu-item .menu-link,
#ast-hf-mobile-menu .d21-mobile-cat-item .menu-link:hover {
  color: #2563eb;
}
#ast-hf-mobile-menu .d21-mobile-nav-divider {
  list-style: none;
  margin: 10px 16px;
  padding: 0;
  height: 1px;
  background: #e2e8f0;
  pointer-events: none;
}
.ast-mobile-popup-drawer.active .menu-toggle-close {
  transition: opacity 0.15s ease;
}

/* ── Legal footer strip (AdSense / trust) ── */
.d21-legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  width: 100%;
  padding: 12px 16px 8px;
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--d21-bar-border, #e2e8f0);
}
.d21-legal-footer a {
  color: #2563eb !important;
  text-decoration: none;
}
.d21-legal-footer a:hover {
  text-decoration: underline;
}
html[data-d21-theme="dark"] .d21-legal-footer a {
  color: #93c5fd !important;
}

/* Footer: hide empty widget areas and admin "Add Widget" placeholders */
.site-footer .footer-widget-area-inner > a,
.site-footer .ast-footer-widget-area-inner > a,
.site-footer a[href*="autofocus[section]=sidebar-widgets"],
.site-footer a[href*="autofocus[section]=widgets"] {
  display: none !important;
}
.site-footer .footer-widget-area:not(:has(.widget)),
.site-footer .ast-footer-widget-area:not(:has(.widget)) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-primary-footer-wrap .site-footer-section:empty {
  display: none !important;
}

/* Hide duplicate Astra header search — draft21 bar is the site search */
.ast-header-search,
.ast-search-menu-icon {
  display: none !important;
}

/* ── Site bar: search + dark mode ── */
body.d21-has-topbar {
  padding-top: 0;
}
.d21-top-bar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 35px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--d21-bar-bg, #fff);
  border-bottom: 1px solid var(--d21-bar-border, #e2e8f0);
  box-shadow: none;
}
.d21-logo {
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e40af;
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.d21-logo:hover,
.d21-logo:focus-visible {
  color: #2563eb;
  text-decoration: none;
  outline: none;
}
.d21-logo:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}
.d21-search-wrap {
  flex: 0 1 420px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
/* Tighten gap between search bar and category navigation */
@media (max-width: 921px) {
  .ast-mobile-header-wrap .ast-primary-header-bar,
  .ast-primary-header-bar .site-primary-header-wrap {
    min-height: 0 !important;
  }
  .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .d21-has-topbar #ast-mobile-header .site-header-primary-section-left .site-branding:empty {
    display: none;
  }
}
@media (min-width: 922px) {
  .ast-primary-header-bar .site-primary-header-wrap,
  .ast-desktop .ast-primary-header-bar {
    min-height: 68px !important;
  }
  .ast-desktop:not(:has(.ast-header-sticked)) .ast-primary-header-bar .main-header-menu > .menu-item {
    line-height: 68px !important;
  }
}

@media (max-width: 921px) {
  body.d21-has-topbar {
    padding-top: 48px;
  }
  body.d21-has-topbar.admin-bar {
    padding-top: calc(52px + 32px);
  }
  @media (max-width: 782px) {
    body.d21-has-topbar.admin-bar {
      padding-top: calc(52px + 46px);
    }
  }
  .d21-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    padding: 6px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  }
  .d21-logo {
    font-size: 1rem;
    margin-right: 2px;
  }
  .admin-bar .d21-top-bar {
    top: 32px;
  }
  @media (max-width: 782px) {
    .admin-bar .d21-top-bar {
      top: 46px;
    }
  }
  .d21-search-wrap {
    flex: 1;
    max-width: none;
    margin: 0;
  }
  .d21-search-input {
    font-size: 1rem;
    padding: 11px 14px 11px 44px !important;
  }
  .d21-theme-btn {
    width: 44px;
    height: 44px;
  }
  #masthead.ast-sticky-active,
  .ast-primary-header-bar.ast-sticky-active {
    top: var(--d21-mobile-header-offset, 48px) !important;
  }
  body.admin-bar #masthead.ast-sticky-active,
  body.admin-bar .ast-primary-header-bar.ast-sticky-active {
    top: var(--d21-mobile-header-offset, calc(52px + 32px)) !important;
  }
}
.d21-search-input {
  width: 100%;
  padding: 10px 14px 10px 44px !important;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--d21-text, #0f172a);
  background-color: var(--d21-input-bg, #f8fafc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 16px 16px;
  border: 1px solid var(--d21-input-border, #cbd5e1);
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.d21-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.d21-search-wrap::before {
  display: none;
}
.d21-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--d21-bar-bg, #fff);
  border: 1px solid var(--d21-bar-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.d21-search-results.d21-open {
  display: block;
}
.d21-search-results li {
  margin: 0;
}
.d21-search-results a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--d21-text, #0f172a);
  font-size: 0.875rem;
  line-height: 1.35;
}
.d21-search-results a:hover,
.d21-search-results a.d21-active {
  background: var(--d21-hover, #eff6ff);
}
.d21-search-results .d21-search-cat {
  display: block;
  font-size: 0.72rem;
  color: var(--d21-muted, #64748b);
  margin-top: 2px;
}
.d21-search-empty {
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--d21-muted, #64748b);
}
.d21-theme-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--d21-input-border, #cbd5e1);
  border-radius: 8px;
  background: var(--d21-input-bg, #f8fafc);
  color: var(--d21-text, #0f172a);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.d21-theme-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d21-theme-btn:hover {
  background: var(--d21-hover, #eff6ff);
  border-color: #93c5fd;
}
.d21home-pill--count {
  color: #1e40af !important;
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

/* ── Dark mode ── */
html[data-d21-theme="dark"] {
  --d21-bar-bg: #1e293b;
  --d21-bar-border: #334155;
  --d21-text: #f1f5f9;
  --d21-muted: #94a3b8;
  --d21-input-bg: #0f172a;
  --d21-input-border: #475569;
  --d21-hover: #334155;
}
html[data-d21-theme="dark"] body {
  background: #0f172a !important;
  color: #e2e8f0;
}
html[data-d21-theme="dark"] .site-content,
html[data-d21-theme="dark"] .ast-separate-container .ast-article-single,
html[data-d21-theme="dark"] .ast-plain-container .site-content {
  background: #0f172a !important;
}
html[data-d21-theme="dark"] .entry-content,
html[data-d21-theme="dark"] .entry-content h1,
html[data-d21-theme="dark"] .entry-content h2,
html[data-d21-theme="dark"] .entry-content h3,
html[data-d21-theme="dark"] .entry-title {
  color: #f1f5f9 !important;
}
html[data-d21-theme="dark"] .entry-content [class$="-intro"],
html[data-d21-theme="dark"] .entry-content [class$="-hero"],
html[data-d21-theme="dark"] .entry-content [class$="-hint"],
html[data-d21-theme="dark"] .entry-content [class$="-about"],
html[data-d21-theme="dark"] .entry-content [class$="-desc"],
html[data-d21-theme="dark"] .entry-content [class$="-qa"] p,
html[data-d21-theme="dark"] .d21home-hero,
html[data-d21-theme="dark"] .d21home-section-sub,
html[data-d21-theme="dark"] .d21home-about {
  color: #94a3b8 !important;
}
html[data-d21-theme="dark"] .entry-content [class$="-box"],
html[data-d21-theme="dark"] .entry-content [class$="-card"],
html[data-d21-theme="dark"] .entry-content [class$="-rel-card"],
html[data-d21-theme="dark"] .d21wgt-card,
html[data-d21-theme="dark"] .d21wtt-card,
html[data-d21-theme="dark"] .d21gen-card,
html[data-d21-theme="dark"] .d21calc-card,
html[data-d21-theme="dark"] .d21cwt-card,
html[data-d21-theme="dark"] .d21aict-card,
html[data-d21-theme="dark"] .d21home-cat,
html[data-d21-theme="dark"] .d21home-rel-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: inherit !important;
}
html[data-d21-theme="dark"] .entry-content [class$="-card"]:hover,
html[data-d21-theme="dark"] .entry-content [class$="-rel-card"]:hover,
html[data-d21-theme="dark"] .d21wgt-card:hover,
html[data-d21-theme="dark"] .d21home-cat:hover {
  background: #334155 !important;
  border-color: #60a5fa !important;
}
html[data-d21-theme="dark"] .entry-content [class$="-name"],
html[data-d21-theme="dark"] .entry-content [class$="-rel-name"],
html[data-d21-theme="dark"] .d21home-cat-name,
html[data-d21-theme="dark"] .d21home-rel-name {
  color: #f1f5f9 !important;
}
html[data-d21-theme="dark"] .entry-content [class$="-input"],
html[data-d21-theme="dark"] .entry-content textarea,
html[data-d21-theme="dark"] .entry-content select {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-d21-theme="dark"] .entry-content [class$="-faq"] h2,
html[data-d21-theme="dark"] .entry-content [class$="-related"] h2,
html[data-d21-theme="dark"] .d21home-section h2 {
  border-bottom-color: #334155 !important;
}
html[data-d21-theme="dark"] #masthead,
html[data-d21-theme="dark"] .site-header {
  background: #1e293b !important;
  border-bottom: 1px solid #334155;
}
html[data-d21-theme="dark"] .main-header-menu a,
html[data-d21-theme="dark"] .site-title a {
  color: #e2e8f0 !important;
}
html[data-d21-theme="dark"] .entry-content [class$="-card"]:hover,
html[data-d21-theme="dark"] .entry-content [class$="-rel-card"]:hover {
  background: #334155 !important;
}
html[data-d21-theme="dark"] .d21-top-bar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html[data-d21-theme="dark"] .d21-logo {
  color: #93c5fd;
}
html[data-d21-theme="dark"] .d21-logo:hover,
html[data-d21-theme="dark"] .d21-logo:focus-visible {
  color: #bfdbfe;
}