/*
Theme Name: Raddad Docs
Theme URI: https://raddad.io
Author: Raddad
Author URI: https://raddad.io
Description: A professional documentation theme for raddad.io, based on Twenty Twenty-Five. Supports RTL/LTR, bilingual URLs (/en/, /ar/), responsive three-column layout with top nav, sidebar, content, and in-page TOC.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raddad-docs
Template: twentytwentyfive
Tags: documentation, rtl-language-support, three-columns, custom-menu, translation-ready
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {

  /* Layout */
  --nav-height: 56px;
  --sidebar-width: 260px;
  --toc-width: 220px;
  --content-max-width: 780px;

  /* Typography */
  --font-sans: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-heading: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

  /* Transitions */
  --transition: 150ms ease;
}

/* ============================================================
   COLOR SYSTEM — ALL COLORS LINKED TO WORDPRESS PRESETS
   WordPress injects --wp--preset--color--* on body (not :root).
   All --color-* tokens are defined here so the Site Editor's
   color picker updates flow through the entire docs UI.
   Change any color in Appearance → Editor → Styles → Colors.
   ============================================================ */
body {
  /* Brands */
  --color-primary: var(--wp--preset--color--primary, #372aac);
  --color-primary-dark: var(--wp--preset--color--primary-dark, #1e1a4d);
  --color-primary-light: var(--wp--preset--color--primary-light, #f3f1ff);
  --color-primary-yellow: var(--wp--preset--color--primary-yellow, #ffcd00);

  /* Neutrals */
  --color-bg: var(--wp--preset--color--white, #ffffff);
  --color-bg-sidebar: var(--wp--preset--color--bg-sidebar, #f8f9fd);
  --color-bg-toc: var(--wp--preset--color--bg-toc, #ffffff);
  --color-border: var(--wp--preset--color--border, #e5e7eb);
  --color-border-light: var(--wp--preset--color--border-light, #f0f0f0);
  --color-border-darker: var(--wp--preset--color--border-darker, #afb4ba);

  /* Text */
  --color-text: var(--wp--preset--color--text, #1a1a1a);
  --color-text-secondary: var(--wp--preset--color--text-secondary, #6b7280);
  --color-text-muted: var(--wp--preset--color--text-muted, #9ca3af);
  --color-link: var(--wp--preset--color--brand-link, #372aac);
  --color-link-hover: var(--wp--preset--color--brand-link-hover, #372aac);

  /* Nav */
  --color-nav-bg: var(--wp--preset--color--nav-bg, #ffcd00);
  --color-nav-text: var(--wp--preset--color--nav-text, #d1d5db);
  --color-nav-hover: var(--wp--preset--color--nav-hover, #ffffff);
  --color-nav-active: var(--wp--preset--color--primary, #372aac);

  /* Sidebar */

  --color-sidebar-active-bg: var(--wp--preset--color--primary-light, #f3f1ff);
  --color-sidebar-active-text: var(--wp--preset--color--primary, #372aac);
  --color-sidebar-hover-bg: var(--wp--preset--color--sidebar-hover, #f3f4f6);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Restore WP block layout margin/padding for the FSE footer.
   Our blanket reset above strips them — these put them back. */
.docs-footer-block .has-global-padding {
  padding-right: var(--wp--style--root--padding-right) !important;
  padding-left: var(--wp--style--root--padding-left) !important;
}

/* Critical: restore negative margins that make alignfull bleed
   to full width inside a has-global-padding container */
.docs-footer-block .has-global-padding>.alignfull {
  margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
  margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
}

/* Nested has-global-padding: no padding (WP default) */
.docs-footer-block .has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.docs-footer-block .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto !important;
  margin-right: auto !important;
}

.docs-footer-block .is-layout-constrained>.alignwide {
  max-width: var(--wp--style--global--wide-size);
}

.docs-footer-block :where(.is-layout-flex) {
  gap: var(--wp--style--block-gap, 1.2rem);
}

.docs-footer-block :where(.is-layout-flow)>* {
  margin-block-start: var(--wp--style--block-gap, 1.2rem);
  margin-block-end: 0;
}

.docs-footer-block :where(.is-layout-flow)> :first-child {
  margin-block-start: 0;
}

.docs-footer-block :where(figure) {
  margin: 0 0 1em;
}

.docs-footer-block .wp-block-columns {
  margin-bottom: 1.75em;
}

/* Preserve WP root padding CSS variables used by block layout
   (alignwide, alignfull, has-global-padding) even though we
   strip body padding for the docs layout */
body {
  --wp--style--root--padding-top: 0px;
  --wp--style--root--padding-bottom: 0px;
  --wp--style--root--padding-right: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));
  --wp--style--root--padding-left: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */
[dir="rtl"] {
  --sidebar-side: right;
  --toc-side: left;
}

[dir="ltr"],
:not([dir="rtl"]) {
  --sidebar-side: left;
  --toc-side: right;
}

/* ============================================================
   TOP NAVIGATION BAR
   ============================================================ */
.docs-topnav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--nav-height);
  background: var(--color-nav-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.docs-topnav__inner {
  width: 100%;
  max-width: 100%;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Logo */
.docs-topnav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}

.docs-topnav__logo-img {
  height: 28px;
  width: auto;
}

/* Constrain the WordPress custom logo output (the_custom_logo()
   wraps the image in <figure class="custom-logo-link"> — target
   the img directly to fit within the nav bar height) */
.docs-topnav__logo .custom-logo-link,
.docs-topnav__logo figure {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.docs-topnav__logo .custom-logo-link img,
.docs-topnav__logo figure img,
.docs-topnav__logo img {
  height: 32px;
  width: auto;
  max-height: 32px;
  display: block;
}

.docs-topnav__logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.docs-topnav__logo-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(232, 83, 26, .18);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Divider */
.docs-topnav__divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .15);
  flex-shrink: 0;
}

/* Main nav menu (WordPress menu) */
.docs-topnav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  flex: 1;
}

.docs-topnav__menu li a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-nav-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.docs-topnav__menu li a:hover,
.docs-topnav__menu li.current-menu-item a,
.docs-topnav__menu li.current-menu-parent a {
  color: var(--color-nav-hover);
  background: rgba(255, 255, 255, .08);
}

.docs-topnav__menu li.current-menu-item>a {
  color: var(--color-nav-active);
}

/* Dropdown menus */
.docs-topnav__menu li {
  position: relative;
}

.docs-topnav__menu li ul {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 200px;
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-md);
  list-style: none;
  padding: var(--space-2) 0;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 100;
}

.docs-topnav__menu li:hover>ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.docs-topnav__menu li ul li a {
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
  font-size: 0.8125rem;
}

/* Nav right area */
.docs-topnav__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* Search */
.docs-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  min-width: 180px;
}

.docs-search:hover {
  background: rgba(255, 255, 255, .75);
  border-color: rgba(255, 255, 255, .2);
}

.docs-search__icon {
  color: var(--color-nav-text);
  flex-shrink: 0;
}

.docs-search__placeholder {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  flex: 1;
}

.docs-search__kbd {
  display: flex;
  gap: 2px;
}

.docs-search__kbd kbd {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  padding: 1px 4px;
}

/* Language switcher */
.docs-lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.docs-lang-switch a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-nav-text);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.docs-lang-switch a:hover,
.docs-lang-switch a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
}

.docs-lang-switch a.active {
  color: var(--color-primary);
}

/* CTA button */
.docs-topnav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #ffffff !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}

.docs-topnav__cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* Mobile hamburger */
.docs-topnav__hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-2);
  margin-inline-start: auto;
}

.docs-topnav__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-nav-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ============================================================
   SEARCH FORM (top nav — native WP search)
   Replaced the old AJAX modal with a real <form> that submits
   to /?s= or /ar/?s= for native multilingual search.
   ============================================================ */
.docs-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 6px var(--space-3);
  cursor: text;
  transition: border-color var(--transition), background var(--transition);
  min-width: 180px;
}

.docs-search:focus-within {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.25);
}

.docs-search__icon {
  color: var(--color-nav-text);
  flex-shrink: 0;
}

.docs-search__input {
  background: none;
  border: none;
  outline: none;
  color: var(--color-nav-text);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  width: 100%;
  min-width: 0;
}

.docs-search__input::placeholder {
  color: var(--color-text-muted);
}

.docs-search__kbd {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ============================================================
   SEARCH RESULTS PAGE (search.php template)
   ============================================================ */
.docs-search-results__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.docs-search-results__title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.docs-search-results__keyword {
  color: var(--color-primary);
}

.docs-search-results__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 520px;
}

.docs-search-results__input {
  flex: 1;
  height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition);
}

.docs-search-results__input:focus {
  border-color: var(--color-primary);
}

.docs-search-results__submit {
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}

.docs-search-results__submit:hover {
  background: var(--color-primary-dark);
}

.docs-search-results__count {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.docs-search-results__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.docs-search-result-item {
  display: block;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.docs-search-result-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.docs-search-result-item__section {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.docs-search-result-item__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.docs-search-result-item__excerpt {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.docs-search-results__empty {
  padding: var(--space-12) 0;
  text-align: center;
  color: var(--color-text-secondary);
}

.docs-search-results__empty p {
  margin-bottom: var(--space-3);
}

/* Old modal — no longer used */
.docs-search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.docs-search-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.docs-search-modal__box {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform var(--transition);
}

.docs-search-modal.is-open .docs-search-modal__box {
  transform: translateY(0);
}

.docs-search-modal__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.docs-search-modal__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
}

.docs-search-modal__results {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.docs-search-modal__empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.docs-search-result {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition);
}

.docs-search-result:hover {
  background: var(--color-bg-sidebar);
}

.docs-search-result__title {
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

.docs-search-result__excerpt {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.docs-search-result__section {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-1);
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.docs-layout {
  margin-top: var(--nav-height);
  display: flex;
  min-height: calc(100vh - var(--nav-height));
}

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
.docs-sidebar {
  position: fixed;
  top: var(--nav-height);
  inset-inline-start: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  background: var(--color-bg-sidebar);
  border-inline-end: 1px solid var(--color-border);
  padding: var(--space-6) 0 var(--space-12);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  z-index: 100;
  transition: transform var(--transition);
}

.docs-sidebar::-webkit-scrollbar {
  width: 4px;
}

.docs-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

/* Section groups */
.docs-sidebar__section {
  margin-bottom: var(--space-2);
}

.docs-sidebar__section-title {
  padding: var(--space-2) var(--space-5);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

/* Nav links */
.docs-sidebar__nav {
  list-style: none;
}

.docs-sidebar__nav li {
  position: relative;
  overflow: visible;
  /* never clip the active ::before bar */
}

.docs-sidebar__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: 0;
  transition: color var(--transition), background var(--transition);
  line-height: 1.4;
}

.docs-sidebar__nav a:hover {
  color: var(--color-text);
  background: var(--color-sidebar-hover-bg);
}

.docs-sidebar__nav li.is-active>a {
  color: var(--color-sidebar-active-text);
  background: var(--color-sidebar-active-bg);
  font-weight: 600;
  position: relative;
  /* ensure text sits above the ::before bar */
  z-index: 0;
}

/* Active indicator line
   Lives on the <li> (not the <a>) so it always anchors to the sidebar
   edge regardless of nesting level. */
.docs-sidebar__nav li.is-active {
  position: relative;
}

.docs-sidebar__nav li.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 3px 3px 0;
  z-index: 1;
  pointer-events: none;
}

/* Sub-menu items: sub-menu has margin-inline-start + a 2px border.
   Pull the bar back far enough to reach the sidebar's true left edge.
   margin (20px) + border (2px) = 22px */
.docs-sidebar__nav .sub-menu li.is-active::before {
  inset-inline-start: calc(-1 * (var(--space-5) + 2px));
  border-radius: 0 3px 3px 0;
}

[dir="rtl"] .docs-sidebar__nav li.is-active::before {
  border-radius: 3px 0 0 3px;
}

[dir="rtl"] .docs-sidebar__nav .sub-menu li.is-active::before {
  inset-inline-start: auto;
  inset-inline-end: calc(-1 * (var(--space-5) + 2px));
  border-radius: 3px 0 0 3px;
}

/* Chevron for expandable items */
.docs-sidebar__nav .has-children>a .chevron {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--color-text-muted);
}

.docs-sidebar__nav .has-children.is-open>a .chevron {
  transform: rotate(90deg);
}

/* Sub-items */
.docs-sidebar__nav .sub-menu {
  list-style: none;
  display: none;
  border-inline-start: 2px solid var(--color-border);
  margin-inline-start: var(--space-5);
  overflow: visible;
  /* must not clip the ::before indicator bar */
}

.docs-sidebar__nav .has-children {
  overflow: visible;
  /* allow active ::before bar to escape to sidebar edge */
}

.docs-sidebar__nav .has-children.is-open>.sub-menu {
  display: block;
}

.docs-sidebar__nav .sub-menu a {
  padding-inline-start: var(--space-4);
  font-size: 0.8125rem;
}

.docs-sidebar__nav .sub-menu li.is-active>a {
  color: var(--color-sidebar-active-text);
  background: transparent;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.docs-main {
  flex: 1;
  margin-inline-start: var(--sidebar-width);
  margin-inline-end: var(--toc-width);
  min-width: 0;
  padding: var(--space-12) var(--space-10);
}

/* ============================================================
   TABLE OF CONTENTS (right panel)
   ============================================================ */
.docs-toc {
  position: fixed;
  top: var(--nav-height);
  inset-inline-end: 0;
  width: var(--toc-width);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  padding: var(--space-8) var(--space-5) var(--space-12);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  border-inline-start: 1px solid var(--color-border);
}

.docs-toc__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.docs-toc__nav {
  list-style: none;
}

.docs-toc__nav li {
  margin-bottom: 2px;
}

.docs-toc__nav a {
  display: block;
  padding: 4px var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  line-height: 1.4;
}

.docs-toc__nav a:hover {
  color: var(--color-text);
  border-inline-start-color: var(--color-border);
}

.docs-toc__nav a.is-active {
  color: var(--color-primary);
  border-inline-start-color: var(--color-primary);
  font-weight: 500;
}

.docs-toc__nav .toc-h3>a {
  padding-inline-start: var(--space-5);
  font-size: 0.75rem;
}

/* ============================================================
   ARTICLE CONTENT TYPOGRAPHY
   ============================================================ */
.docs-article {
  max-width: var(--content-max-width);
}

.docs-article__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.docs-article__breadcrumb a {
  color: var(--color-link);
  text-decoration: none;
}

.docs-article__breadcrumb a:hover {
  text-decoration: underline;
}

.docs-article__breadcrumb .sep {
  color: var(--color-border-darker);
  font-size: 0.75rem;
}

.docs-article h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.docs-article h2 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-text);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.docs-article h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-text);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.docs-article h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--color-text);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.docs-article p {
  font-size: 1.065rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.docs-article a {
  color: var(--color-link);
  /* text-decoration: underline; */
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.docs-article a:hover {
  color: var(--color-link-hover);
}

/* Lists */
.docs-article ul,
.docs-article ol {
  padding-inline-start: var(--space-6);
  margin-bottom: var(--space-4);
}

.docs-article li {
  font-size: 1.065rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Bullet custom */
.docs-article ul li::marker {
  color: var(--color-primary);
}

/* Code inline */
.docs-article code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: #f3f4f6;
  color: #c0392b;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Code blocks */
.docs-article pre {
  background: #1e1e2e;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-5);
  position: relative;
}

.docs-article pre code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: transparent;
  color: #cdd6f4;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* Copy code button */
.docs-copy-btn {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.docs-copy-btn:hover {
  background: rgba(255, 255, 255, .2);
  color: #ffffff;
}

.docs-copy-btn.copied {
  color: #4ade80;
  border-color: #4ade80;
}

/* Blockquote */
.docs-article blockquote {
  border-inline-start: 4px solid var(--color-primary);
  margin-inline: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-5);
}

[dir="rtl"] .docs-article blockquote {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.docs-article blockquote p {
  margin-bottom: 0;
  font-style: italic;
  color: #7c3a1a;
}

/* Tables */
.docs-article table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: 0.875rem;
}

.docs-article th {
  background: var(--color-bg-sidebar);
  font-weight: 600;
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.docs-article td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.docs-article tr:nth-child(even) td {
  background: #fafafa;
}

/* Callouts / alerts */
.docs-callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-size: 0.9rem;
  line-height: 1.6;
}

.docs-callout--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.docs-callout--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.docs-callout--success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.docs-callout--danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.docs-callout__icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
}

.docs-callout p {
  margin-bottom: 0;
  color: inherit;
  font-size: inherit;
}

/* Horizontal rule */
.docs-article hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Images */
.docs-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

/* Article footer nav */
.docs-article__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.docs-article__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  flex: 1;
  max-width: 45%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.docs-article__nav-link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.docs-article__nav-link--next {
  text-align: end;
  margin-inline-start: auto;
}

.docs-article__nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.docs-article__nav-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-link);
  line-height: 1.3;
}

/* ============================================================
   SEARCH HIGHLIGHT
   ============================================================ */
mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */
.docs-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .docs-toc {
    display: none;
  }

  .docs-main {
    margin-inline-end: 0;
  }
}

@media (max-width: 900px) {

  .docs-topnav__menu,
  .docs-search,
  .docs-lang-switch,
  .docs-topnav__cta {
    display: none;
  }

  .docs-topnav__hamburger {
    display: flex;
  }

  .docs-sidebar {
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: var(--shadow-lg);
  }

  [dir="rtl"] .docs-sidebar {
    transform: translateX(100%);
  }

  .docs-sidebar.is-open {
    transform: translateX(0);
  }

  .docs-sidebar-overlay.is-open {
    display: block;
  }

  .docs-main {
    margin-inline-start: 0;
    padding: var(--space-8) var(--space-5);
  }
}

@media (max-width: 480px) {
  .docs-article h1 {
    font-size: 1.6rem;
  }

  .docs-article h2 {
    font-size: 1.25rem;
  }

  .docs-article__footer {
    flex-direction: column;
  }

  .docs-article__nav-link {
    max-width: 100%;
  }

  .docs-article__nav-link--next {
    text-align: start;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {

  .docs-topnav,
  .docs-sidebar,
  .docs-toc,
  .docs-article__footer {
    display: none;
  }

  .docs-main {
    margin: 0;
    padding: 0;
  }
}

/* ============================================================
   SCROLLBAR GLOBAL
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* ============================================================
   WP BLOCK EDITOR COMPATIBILITY
   ============================================================ */
.editor-styles-wrapper .docs-article h1 {
  font-size: 2rem;
}

.editor-styles-wrapper .docs-article h2 {
  font-size: 1.375rem;
}

/* ============================================================
   DOCS FOOTER BLOCK WRAPPER
   Sits outside .docs-layout so WP block styles apply natively.
   position: relative + z-index ensures the footer renders on top
   of the fixed sidebar and TOC when the page is scrolled down,
   preventing them from overlapping the footer content.
   ============================================================ */
.docs-footer-block {
  width: 100%;
  margin-block-start: 0 !important;
  position: relative;
  z-index: 200;
}

/* FIX: Missing scoped block styles for flex layout justification
   ──────────────────────────────────────────────────────────────
   WordPress normally injects per-instance scoped <style> tags like:
     .wp-container-core-group-is-layout-HASH { justify-content: space-between; }
   into <head> via wp_head(). But because block_template_part() runs
   in the <body> — after wp_head() has already fired — those scoped
   styles are never generated for our docs pages.

   These rules permanently replace ALL missing scoped justification
   styles. They use the semantic classes WordPress always adds when
   you choose an alignment in the block editor, so any layout change
   you make in the editor will automatically be reflected here.

   Covers: space-between, center, right (flex-end), left (flex-start)
   ──────────────────────────────────────────────────────────────── */
.docs-footer-block .is-content-justification-space-between.is-layout-flex {
  justify-content: space-between;
}

.docs-footer-block .is-content-justification-center.is-layout-flex {
  justify-content: center;
}

.docs-footer-block .is-content-justification-right.is-layout-flex {
  justify-content: flex-end;
}

.docs-footer-block .is-content-justification-left.is-layout-flex {
  justify-content: flex-start;
}

/* ============================================================
   SIDEBAR HEADER (back link + product title)
   ============================================================ */
.docs-sidebar__header {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

.docs-sidebar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  transition: color var(--transition);
}

.docs-sidebar__back:hover {
  color: var(--color-primary);
}

/* Back link arrow: flip to point right in RTL */
[dir="rtl"] .docs-sidebar__back svg {
  transform: scaleX(-1);
}

.docs-sidebar__product-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.docs-sidebar__empty {
  padding: var(--space-4) var(--space-5);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ============================================================
   SECTION TOGGLE BUTTON (replaces <a> for non-link sections)
   ============================================================ */
.docs-sidebar__section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: .03em;
  transition: color var(--transition), background var(--transition);
}

.docs-sidebar__section-toggle:hover {
  color: var(--color-text);
  background: var(--color-sidebar-hover-bg);
}

.docs-sidebar__section-name {
  flex: 1;
  text-align: start;
}

/* Chevron: default state — point right in LTR, point left in RTL */
[dir="rtl"] .docs-sidebar__section-toggle .chevron,
[dir="rtl"] .docs-sidebar__nav .has-children>a .chevron {
  transform: scaleX(-1);
}

/* Chevron: open state */
.docs-sidebar__nav .has-children.is-open>.docs-sidebar__section-toggle .chevron {
  transform: rotate(90deg);
}

[dir="rtl"] .docs-sidebar__nav .has-children.is-open>.docs-sidebar__section-toggle .chevron {
  transform: scaleX(-1) rotate(90deg);
}

/* ============================================================
   DOCS ARCHIVE — FULL-WIDTH WRAPPER (no sidebar)
   ============================================================ */
.docs-archive-wrap {
  margin-top: var(--nav-height);
  min-height: calc(100vh - var(--nav-height));
}

.docs-archive-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
}

.docs-archive-hero {
  margin-bottom: var(--space-10);
}

.docs-archive-hero__title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.docs-archive-hero__sub {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}

.docs-archive-empty {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ============================================================
   PRODUCT CARDS GRID
   ============================================================ */
.docs-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

.docs-product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.docs-product-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light), var(--shadow-md);
  transform: translateY(-2px);
}

/* Card header */
.docs-product-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.docs-product-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.docs-product-card__name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 var(--space-1);
  letter-spacing: -0.01em;
}

.docs-product-card__name a {
  color: var(--color-text);
  text-decoration: none;
}

.docs-product-card__name a:hover {
  color: var(--color-primary);
}

.docs-product-card__desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Article list inside card */
.docs-product-card__articles {
  flex: 1;
  list-style: none;
  padding: var(--space-3) 0;
}

.docs-product-card__article {
  display: block;
}

.docs-product-card__article a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}

.docs-product-card__article a:hover {
  color: var(--color-link);
  background: var(--color-bg-sidebar);
}

/* Section inside card */
.docs-product-card__section-group {
  margin-top: var(--space-2);
}

.docs-product-card__section-label {
  display: block;
  padding: var(--space-2) var(--space-5) var(--space-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.docs-product-card__section-articles {
  list-style: none;
}

.docs-product-card__section-articles li a {
  display: block;
  padding: var(--space-2) var(--space-5) var(--space-2) calc(var(--space-5) + 12px);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}

.docs-product-card__section-articles li a:hover {
  color: var(--color-link);
  background: var(--color-bg-sidebar);
}

/* Card footer */
.docs-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-sidebar);
}

.docs-product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--transition);
}

.docs-product-card__cta:hover {
  gap: var(--space-2);
}

[dir="rtl"] .docs-product-card__cta svg {
  transform: scaleX(-1);
}

.docs-product-card__count {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ============================================================
   PRODUCT INDEX (taxonomy-docs_product.php)
   2-column card grid: featured image on top, title below.
   Sections show their heading above their own grid.
   ============================================================ */
.docs-product-index {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* 2-column card grid */
.docs-product-index__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

/* Section wrapper */
.docs-product-index__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.docs-product-index__section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  margin: 0;
}

/* Card */
.docs-product-index__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.docs-product-index__card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light), var(--shadow-sm);
  transform: translateY(-2px);
}

/* Featured image area */
.docs-product-index__card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
}

.docs-product-index__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: none;
  margin: 0;
}

/* Placeholder icon when no featured image */
.docs-product-index__card-image--placeholder {
  color: var(--color-border-darker);
}

/* Card title */
.docs-product-index__card-title {
  display: block;
  padding: var(--space-4) var(--space-4) var(--space-5);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  transition: color var(--transition);
}

.docs-product-index__card:hover .docs-product-index__card-title {
  color: var(--color-primary);
}

/* Responsive: single column on small screens */
@media (max-width: 600px) {
  .docs-product-index__grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive: archive grid */
@media (max-width: 768px) {
  .docs-product-grid {
    grid-template-columns: 1fr;
  }

  .docs-archive-main {
    padding: var(--space-8) var(--space-5);
  }

  .docs-archive-hero__title {
    font-size: 1.75rem;
  }
}

/* No-sidebar variant */
.docs-main--no-sidebar {
  margin-inline-start: 0;
  max-width: var(--content-max-width);
  margin-inline-end: auto;
  padding-inline: var(--space-8);
}

/* ============================================================
   ARTICLE FEATURED IMAGE
   ============================================================ */
.docs-article__featured-image {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* border: 1px solid var(--color-border); */
}

.docs-article__featured-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: none;
  margin-bottom: 0;
}

/* ============================================================
   ARTICLE META ROW (updated date + reading time)
   Moved from inline styles in single-docs.php
   ============================================================ */
.docs-article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.docs-article__meta-icon {
  margin-inline-end: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============================================================
   Additional styles
   ============================================================ */

/* excerpt docs */
.wp-block-post-excerpt__excerpt {
  color: var(--color-text) !important;
}

/* search button */
.wp-block-search .wp-block-search__button {
  background-color: var(--color-primary-yellow);
  transition: background-color 0.3s ease;
}

.wp-block-search .wp-block-search__button:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* search input override */
.wp-block-search .wp-block-search__input {
  border-radius: 999px !important;
  padding-block: 12px !important;
  padding-inline: 24px !important;
}

/* ============================================================
   Table stripes and header colors
     These styles use the same color variables as the sidebar to
     maintain a cohesive look, but can be customized independently.
   ============================================================ */

/* Raddad table colors */
.wp-block-table thead {
  background-color: var(--wp--preset--color--custom-acent-7);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
  background-color: var(--wp--preset--color--custom-acent-9);
  ;
}

/* ============================================================
   CHAT WITH AI BUTTON
   ============================================================ */

.docs-ai-wrap {
  position: relative;
  display: inline-flex;
  margin-bottom: var(--space-6);
}

.docs-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  /* background: var(--wp--preset--color--primary); */
  /* color: #fff; */
  border: none;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.docs-ai-btn:hover {
  background: var(--wp--preset--color--primary-yellow);
}

.docs-ai-btn:active {
  transform: scale(0.97);
}

.docs-ai-btn.is-copied {
  background: #16a34a;
  color: #fff;
}

.docs-ai-btn svg {
  flex-shrink: 0;
}

/* Dropdown panel */
.docs-ai-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 500;
  width: 320px;
  background: #fff;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Hint message at top */
.docs-ai-dropdown__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  background: var(--wp--preset--color--primary-light);
  font-size: 0.78rem;
  color: var(--wp--preset--color--primary-dark);
  line-height: 1.5;
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.docs-ai-dropdown__hint svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--wp--preset--color--primary);
}

/* AI link list */
.docs-ai-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-ai-dropdown__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wp--preset--color--text);
  text-decoration: none;
  transition: background 0.15s ease;
}

.docs-ai-dropdown__link:hover {
  background: var(--wp--preset--color--bg-sidebar);
  color: var(--wp--preset--color--text);
  text-decoration: none;
}

.docs-ai-dropdown__link svg {
  flex-shrink: 0;
  border-radius: 4px;
}

/* Brand icon colors */
.docs-ai-dropdown__link--chatgpt svg   { color: #10a37f; }
.docs-ai-dropdown__link--claude svg    { color: #cc785c; }
.docs-ai-dropdown__link--gemini svg    { color: #4285f4; }
.docs-ai-dropdown__link--perplexity svg { color: #20b2aa; }

/* Mobile: full-width dropdown */
@media (max-width: 480px) {
  .docs-ai-wrap {
    display: flex;
    width: 100%;
  }
  .docs-ai-btn {
    width: 100%;
    justify-content: center;
  }
  .docs-ai-dropdown {
    width: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
  }
}