/* =====================================================
   ConfigServer.cloud — light theme layer (cs-light.css)
   Purpose: turns the dark navy / neon look into a flat, light, Persian-blue + saffron UI (owner direction 2026-09-14).
   Load order: Customizer "Additional CSS" (wp_head 101) → cs-system.css → cs-light.css (functions.php, wp_head 102).
   Preview gate: printed only for ?cs_theme=light requests until the owner approves.
   ui-ux-pro-max: Minimalism & Swiss style + trust-blue/orange-CTA palette (database match), adapted to Persian blue + saffron.
   Rules: no gradients, glow, blur or glass; two elevation levels; !important only where an earlier layer uses it.
   Every text pair below uses the WCAG-verified tokens; hover shades checked separately (all ≥ 7:1).
   ===================================================== */

/* =====================================================
   1. Tokens
   ===================================================== */

:root {
  /* Legacy --cs-* tokens remapped: every var()-based rule in the Customizer CSS and cs-system.css flips to light. */
  --cs-header: #FFFFFF;
  --cs-bg: #F6F8FC;
  --cs-bg-2: #F1F4F9;
  --cs-bg-3: #F6F8FC;
  --cs-text: #1E293B;
  --cs-muted: #475569;
  --cs-white-soft: #F1F4F9;
  --cs-white-line: #DCE3EE;
  --cs-cyan: #1C39BB;
  --cs-blue: #1C39BB;
  --cs-green: #0B7F73;
  --cs-yellow: #F5A524;
  --cs-line: #DCE3EE;
  --cs-line-strong: #1C39BB33;
  --cs-radius-xl: 20px;
  --cs-radius-lg: 16px;
  --cs-radius-md: 16px;
  --cs-shadow-soft: none;
  --cs-shadow: none;
  --cs-surface: #FFFFFF;
  --cs-focus: #1C39BB;

  /* Light tokens */
  --cs-page: #F6F8FC;
  --cs-card: #FFFFFF;
  --cs-band: #EAF1FF;
  --cs-alt: #F1F4F9;
  --cs-border: #DCE3EE;
  --cs-border-hover: #1C39BB33;
  --cs-input-border: #7A8699;
  --cs-ink: #0F1B33;
  --cs-body: #1E293B;
  --cs-brand: #1C39BB;
  --cs-brand-hover: #162F9B;
  --cs-brand-tint: #E8EDFF;
  --cs-brand-tint-hover: #DCE4FF;
  --cs-saffron: #F5A524;
  --cs-saffron-hover: #E89B1C;
  --cs-saffron-ink: #1A1206;
  --cs-teal: #0B7F73;
  --cs-teal-tint: #E3F6F3;
  --cs-header-text: #0F1B33;
  --cs-header-sub: #475569;
  --cs-footer-bg: #0F1B33;
  --cs-footer-text: #E6ECF5;
  --cs-footer-muted: #A9B6C8;
  --cs-footer-line: #26344F;
  --cs-code-bg: #0F1B33;
  --cs-code-text: #E6ECF5;
  --cs-danger: #B42318;
  --cs-success: #067647;
  --cs-warning: #93370D;
  --cs-warning-bg: #FFF7E6;
  --cs-table-head: #EEF3FB;
  --cs-zebra: #FAFBFD;
  --cs-shadow-hover: 0 8px 24px rgba(15, 27, 51, .08);
  --cs-shadow-float: 0 18px 48px rgba(15, 27, 51, .14);
  --cs-r-card: 16px;
  --cs-r-panel: 20px;
  --cs-r-chip: 999px;
  --cs-r-input: 12px;
  /* Hero-band texture: 2px solid dots at 6% opacity, SVG instead of a gradient function. */
  --cs-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%231C39BB' fill-opacity='0.06'/%3E%3C/svg%3E");

  /* Blocksy palette: 1 accent, 2 accent hover, 3 body text, 4 headings, 5 borders, 6/7 backgrounds, 8 cards. */
  --theme-palette-color-1: #1C39BB;
  --theme-palette-color-2: #162F9B;
  --theme-palette-color-3: #1E293B;
  --theme-palette-color-4: #0F1B33;
  --theme-palette-color-5: #DCE3EE;
  --theme-palette-color-6: #F1F4F9;
  --theme-palette-color-7: #F6F8FC;
  --theme-palette-color-8: #FFFFFF;

  /* Theme buttons are the saffron primary (dark text 9.08:1, hover 8.06:1). */
  --theme-button-background-initial-color: #F5A524;
  --theme-button-background-hover-color: #E89B1C;
  --theme-button-text-initial-color: #1A1206;
  --theme-button-text-hover-color: #1A1206;

  /* Palette-5 borders are too faint for fields (1.3:1); inputs use #7A8699 (3.69:1). */
  --theme-form-field-border-initial-color: #7A8699;
  --theme-form-field-border-focus-color: #1C39BB;
  --theme-form-field-background-initial-color: #FFFFFF;
  --theme-form-field-background-focus-color: #FFFFFF;
  --theme-form-text-initial-color: #0F1B33;
  --theme-form-text-focus-color: #0F1B33;
  --theme-form-selection-field-initial-color: #7A8699;
  --theme-form-selection-field-active-color: #1C39BB;
}

/* =====================================================
   2. Base, links, focus, code
   ===================================================== */

body.rtl {
  background: var(--cs-page) !important;
  color: var(--cs-body);
}

body.rtl::before {
  content: none;
  display: none;
}

a {
  color: var(--cs-brand);
}

a:hover {
  color: var(--cs-brand-hover);
}

/* cs-system.css sets the ring with !important; header and footer swap --cs-focus to white. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--cs-focus) !important;
  outline-offset: 3px;
}

.skip-link:focus {
  border: 2px solid var(--cs-brand);
  background: var(--cs-card) !important;
  color: var(--cs-ink) !important;
}

pre,
pre.wp-block-code,
.entry-content pre {
  padding: 16px 20px;
  overflow-x: auto;
  border: 0;
  border-radius: 12px;
  background: var(--cs-code-bg);
  color: var(--cs-code-text);
  direction: ltr;
  text-align: left;
}

pre code,
.wp-block-code code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

:not(pre) > code {
  padding: .1em .4em;
  border: 1px solid var(--cs-border);
  border-radius: 6px;
  background: var(--cs-alt);
  color: var(--cs-ink);
}

/* =====================================================
   3. Header and top navigation
   ===================================================== */

#header {
  --cs-focus: #FFFFFF;
}

#header [data-row="middle"] {
  border-bottom: 1px solid var(--cs-brand-hover) !important;
  box-shadow: none !important;
}

#header .ct-menu-link {
  color: var(--cs-header-text) !important;
}

#header .ct-menu-link::after {
  height: 2px;
  background: var(--cs-saffron);
}

#header [data-id="text"],
#header .ct-header-text {
  color: var(--cs-header-sub);
}

/* Dropdown panels (legacy rule is !important throughout) */
#header .sub-menu {
  --cs-focus: #1C39BB;
  --dropdown-divider: none;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-panel) !important;
  background: var(--cs-card) !important;
  box-shadow: var(--cs-shadow-float) !important;
}

#header .sub-menu .ct-menu-link {
  color: var(--cs-ink) !important;
}

#header .sub-menu .ct-menu-link::after {
  content: none;
}

#header .sub-menu .ct-menu-link:hover,
#header .sub-menu .current-menu-item > .ct-menu-link,
#header .sub-menu .current-menu-ancestor > .ct-menu-link,
#header .sub-menu .current-menu-parent > .ct-menu-link {
  background: var(--cs-alt);
  color: var(--cs-brand) !important;
}

/* «پنل کاربری»: white outline pill on the blue bar */
#header .ct-button-ghost,
.ct-header-cta .ct-button-ghost {
  border: 1px solid #FFFFFF !important;
  background: transparent !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

#header .ct-button-ghost:hover,
.ct-header-cta .ct-button-ghost:hover {
  background: #FFFFFF !important;
  color: var(--cs-brand) !important;
  box-shadow: none !important;
}

@media (min-width: 1000px) {
  #header-menu-1 .menu > li.cs-nav-tab > .sub-menu {
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-r-panel) !important;
    background: var(--cs-card) !important;
    box-shadow: var(--cs-shadow-float) !important;
  }

  #header-menu-1 li.cs-mega > .sub-menu > li > .ct-menu-link,
  #header-menu-1 li.cs-mega > .sub-menu > li > .ct-menu-link:hover {
    border-bottom: 1px solid var(--cs-border);
    background: transparent;
    color: var(--cs-brand) !important;
  }

  #header-menu-1 li.cs-nav-tab .sub-menu li[class*="cs-ico-"] > .ct-menu-link {
    color: var(--cs-ink) !important;
  }

  #header-menu-1 li.cs-nav-tab .sub-menu li[class*="cs-ico-"] > .ct-menu-link:hover,
  #header-menu-1 li.cs-nav-tab .sub-menu li[class*="cs-ico-"] > .ct-menu-link:focus-visible,
  #header-menu-1 li.cs-nav-tab .sub-menu li[class*="cs-ico-"].current-menu-item > .ct-menu-link {
    background: var(--cs-alt);
  }

  #header-menu-1 .cs-mi-icon {
    background: var(--cs-brand-tint);
    color: var(--cs-brand);
  }

  #header-menu-1 .ct-menu-link:hover .cs-mi-icon,
  #header-menu-1 .ct-menu-link:focus-visible .cs-mi-icon {
    background: var(--cs-brand-tint-hover);
  }

  /* Opt-in hook: the menu builder can add class cs-free to free-assessment items. */
  #header-menu-1 li.cs-free .cs-mi-icon,
  #header-menu-1 li.cs-free > .ct-menu-link:hover .cs-mi-icon {
    background: var(--cs-teal-tint);
    color: var(--cs-teal);
  }

  #header-menu-1 .cs-mi-title {
    color: var(--cs-ink);
  }

  #header-menu-1 .cs-mi-desc {
    color: var(--cs-muted);
  }
}

/* =====================================================
   4. Hero (homepage and service pages)
   ===================================================== */

.cs-home {
  background: var(--cs-page);
  color: var(--cs-body);
}

/* Service pages sit inside the 1180px PostX container; break out so section bands run full width. */
body.page-template-ultp_page_template:not(.home) .ultp-template-container .cs-home {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.cs-home > section {
  background: var(--cs-page);
}

.cs-home > section:nth-of-type(even) {
  background: var(--cs-card);
}

.cs-home > section.cs-hero {
  background: var(--cs-band);
}

.cs-hero::before,
.cs-hero--page::before {
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--cs-dots);
  background-size: 24px 24px;
  -webkit-mask-image: none;
  mask-image: none;
}

.cs-title,
.cs-section-title {
  color: var(--cs-ink);
}

.cs-gradient-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--cs-brand);
  -webkit-text-fill-color: currentColor;
}

.cs-eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cs-brand);
  font-weight: 700;
}

.cs-pulse-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: var(--cs-teal);
  box-shadow: none;
  animation: none;
}

.cs-chip {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-chip);
  background: var(--cs-alt);
  color: var(--cs-ink);
}

.cs-chip::before {
  background: var(--cs-teal);
  box-shadow: none;
}

/* On the #EAF1FF band a grey chip turns muddy; white keeps the same ink pair. */
.cs-hero .cs-chip {
  background: var(--cs-card);
}

/* Hero art: flat panels, no rotation, rings and animation removed */
.cs-orbit {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-panel);
  background: none;
  transform: none;
}

.cs-orbit::before,
.cs-orbit::after {
  content: none;
  animation: none;
}

.cs-node {
  box-shadow: none;
}

.cs-terminal {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-panel);
  background: var(--cs-card);
  box-shadow: none;
}

.cs-terminal-top {
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-alt);
}

.cs-window-dots span:nth-child(1) {
  background: var(--cs-danger);
}

/* Code lines keep a dark ink panel; chart and metrics below them sit on the white card. */
.cs-code-line {
  margin: 0;
  padding-inline: 16px;
  background: var(--cs-code-bg);
  color: var(--cs-code-text);
}

.cs-code-line:first-child {
  padding-top: 10px;
  border-radius: 12px 12px 0 0;
}

.cs-code-line:not(:has(+ .cs-code-line)) {
  padding-bottom: 10px;
  border-radius: 0 0 12px 12px;
}

.cs-code-line span {
  color: var(--cs-saffron);
}

.cs-chart {
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  background: var(--cs-page);
}

.cs-chart span {
  border-radius: 6px 6px 2px 2px;
  background: var(--cs-brand);
  animation: none;
}

.cs-chart span:nth-child(even) {
  background: var(--cs-teal);
}

.cs-metric {
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  background: var(--cs-card);
}

.cs-metric strong {
  color: var(--cs-ink);
}

.cs-floating-badge {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-card);
  background: var(--cs-card);
  box-shadow: var(--cs-shadow-hover);
  animation: none;
}

.cs-floating-badge strong {
  color: var(--cs-ink);
}

.cs-stat {
  padding: 20px 22px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-card);
  background: var(--cs-card);
}

.cs-stat strong {
  color: var(--cs-brand);
}

/* =====================================================
   5. Sections, cards, components
   ===================================================== */

.cs-service-card,
.cs-problem-card,
.cs-scope,
.cs-link-card,
.cs-blog-card {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-card);
  background: var(--cs-card);
  box-shadow: none;
}

.cs-service-card,
.cs-link-card,
.cs-blog-card,
.cs-stat,
.cs-lift {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.cs-service-card::before {
  content: none;
}

.cs-lift:hover,
.cs-service-card:hover,
.cs-link-card:hover,
.cs-blog-card:hover {
  border-color: var(--cs-border-hover);
  box-shadow: var(--cs-shadow-hover);
  transform: translateY(-2px);
}

/* Feature rows are a ruled list, not cards: no lift or shadow. */
.cs-feature.cs-lift:hover {
  border-color: var(--cs-border);
  box-shadow: none;
  transform: none;
}

.cs-icon {
  border: 0;
  border-radius: 14px;
  background: var(--cs-brand-tint);
  color: var(--cs-brand);
}

.cs-icon::before,
.cs-icon::after {
  background: var(--cs-brand);
  box-shadow: none;
}

/* Opt-in hook for free / assessment cards: <article class="cs-service-card cs-free">. */
.cs-free .cs-icon {
  background: var(--cs-teal-tint);
  color: var(--cs-teal);
}

.cs-free .cs-icon::before,
.cs-free .cs-icon::after {
  background: var(--cs-teal);
}

.cs-service-card h3,
.cs-blog-card h3,
.cs-problem-card h3,
.cs-scope h3,
.cs-feature h3,
.cs-step h3 {
  color: var(--cs-ink);
}

.cs-service-list li {
  color: var(--cs-body);
}

.cs-feature-list {
  border-top-color: var(--cs-border);
}

.cs-feature {
  border-bottom-color: var(--cs-border);
}

.cs-feature-number {
  border: 0;
  border-radius: 12px;
  background: var(--cs-brand-tint);
  color: var(--cs-brand);
}

.cs-step {
  border-top-color: var(--cs-border);
}

.cs-step::before {
  border-radius: 12px;
  background: var(--cs-brand);
  color: #FFFFFF;
  box-shadow: none;
}

.cs-link-card {
  color: var(--cs-ink) !important;
}

.cs-link-card strong {
  color: var(--cs-ink);
}

.cs-blog-card {
  padding: 22px;
}

.cs-scope li {
  color: var(--cs-body);
}

.cs-alert {
  border: 1px solid var(--cs-saffron);
  border-radius: var(--cs-r-card);
  background: var(--cs-warning-bg);
}

.cs-alert .cs-section-title {
  color: var(--cs-warning);
}

.cs-alert-list {
  color: var(--cs-body);
}

.cs-alert-list strong {
  color: var(--cs-ink);
}

/* =====================================================
   6. Buttons and form fields
   ===================================================== */

/* WordPress and Stackable buttons: solid Persian blue, white text (8.93:1; hover 10.97:1). */
.wp-block-button__link,
.wp-element-button,
.stk-block-button .stk-button,
.stk-link.stk-button {
  border: 1px solid var(--cs-brand) !important;
  background: var(--cs-brand) !important;
  color: #FFFFFF !important;
  box-shadow: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.stk-block-button .stk-button:hover,
.stk-link.stk-button:hover {
  border-color: var(--cs-brand-hover) !important;
  background: var(--cs-brand-hover) !important;
  color: #FFFFFF !important;
  box-shadow: none;
}

/* Primary CTA: saffron pill, dark text */
.cs-btn {
  border: 1px solid var(--cs-saffron) !important;
  background: var(--cs-saffron) !important;
  color: var(--cs-saffron-ink) !important;
  box-shadow: none;
}

.cs-btn:hover {
  border-color: var(--cs-saffron-hover) !important;
  background: var(--cs-saffron-hover) !important;
  color: var(--cs-saffron-ink) !important;
  box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.has-border-color,
.cs-btn-outline {
  border: 1px solid var(--cs-brand) !important;
  background: #FFFFFF !important;
  color: var(--cs-brand) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.has-border-color:hover,
.cs-btn-outline:hover {
  border-color: var(--cs-brand-hover) !important;
  background: var(--cs-brand-tint) !important;
  color: var(--cs-brand-hover) !important;
}

.comment-form .submit,
.comment-form input[type="submit"] {
  color: var(--cs-saffron-ink) !important;
}

input:not([type="submit"]),
textarea,
select {
  border: 1px solid var(--cs-input-border) !important;
  border-radius: var(--cs-r-input) !important;
  background: #FFFFFF !important;
  color: var(--cs-ink) !important;
}

input:not([type="submit"]):focus,
textarea:focus,
select:focus {
  border-color: var(--cs-brand) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--cs-muted) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--cs-brand);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  border-color: var(--cs-brand) !important;
  background-color: var(--cs-brand) !important;
}

/* =====================================================
   7. Tables, FAQ, CTA
   ===================================================== */

.cs-table-wrap {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-card);
  background: var(--cs-card);
}

.cs-table th,
.cs-table td {
  border-bottom: 1px solid var(--cs-border);
}

.cs-table thead th {
  background: var(--cs-table-head);
  color: var(--cs-ink);
}

.cs-table tbody tr:nth-child(even) {
  background: var(--cs-zebra);
}

.cs-table tbody tr:last-child > * {
  border-bottom: 0;
}

.cs-table tbody th {
  color: var(--cs-ink);
}

.cs-table td {
  color: var(--cs-body);
}

.cs-table a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tables inside posts follow the same pattern */
.entry-content .wp-block-table table {
  border-collapse: collapse;
}

.entry-content .wp-block-table thead {
  border-bottom: 0;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
  border: 1px solid var(--cs-border);
  color: var(--cs-body);
}

.entry-content .wp-block-table thead th {
  background: var(--cs-table-head);
  color: var(--cs-ink);
}

.entry-content .wp-block-table tbody tr:nth-child(even) {
  background: var(--cs-zebra);
}

.cs-faq details {
  padding: 0 20px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-card);
  background: var(--cs-card);
}

.cs-faq details[open] {
  border-color: var(--cs-border-hover);
}

.cs-faq summary {
  color: var(--cs-ink);
}

.cs-faq p {
  color: var(--cs-body);
}

.cs-cta {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-panel);
  background: var(--cs-band);
}

.cs-cta h2 {
  color: var(--cs-ink);
}

/* =====================================================
   8. Guide prose (.cs-guide .cs-prose)
   ===================================================== */

.cs-guide .cs-prose p,
.cs-guide .cs-prose ul,
.cs-guide .cs-prose ol {
  color: var(--cs-body);
}

.cs-guide .cs-prose h3,
.cs-guide .cs-prose strong {
  color: var(--cs-ink);
}

.cs-guide .cs-prose a {
  color: var(--cs-brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cs-guide .cs-prose a:hover {
  color: var(--cs-brand-hover);
}

.cs-guide .cs-prose .cs-note {
  border-inline-start: 3px solid var(--cs-brand);
  background: var(--cs-brand-tint);
  color: var(--cs-body);
}

/* =====================================================
   9. Blog, archives, single posts, PostX grid, widgets
   ===================================================== */

body.blog .site-main,
body.archive .site-main,
body.search .site-main {
  background: var(--cs-page) !important;
}

body.single-post .site-main {
  background: var(--cs-card) !important;
}

body.blog .hero-section,
body.archive .hero-section,
body.search .hero-section {
  background: var(--cs-band) !important;
}

body.blog .page-title,
body.archive .page-title,
body.search .page-title {
  color: var(--cs-ink) !important;
}

body.blog article,
body.archive article,
body.search article,
body.blog .entry-card,
body.archive .entry-card,
body.search .entry-card {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-card) !important;
  background: var(--cs-card) !important;
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.blog article:hover,
body.archive article:hover,
body.search article:hover,
body.blog .entry-card:hover,
body.archive .entry-card:hover,
body.search .entry-card:hover {
  border-color: var(--cs-border-hover) !important;
  box-shadow: var(--cs-shadow-hover);
  transform: translateY(-2px);
}

body.blog .entry-title a,
body.archive .entry-title a,
body.search .entry-title a,
body.blog .ct-post-title,
body.archive .ct-post-title,
body.search .ct-post-title {
  color: var(--cs-ink) !important;
}

body.single-post .hero-section {
  border-radius: var(--cs-r-panel) !important;
  background: var(--cs-band) !important;
}

body.single-post .entry-title,
body.single-post .hero-section .entry-title {
  color: var(--cs-ink) !important;
  -webkit-text-fill-color: var(--cs-ink) !important;
}

body.single-post .entry-meta {
  color: var(--cs-muted) !important;
}

body.single-post .entry-content,
body.single-post .entry-content p {
  color: var(--cs-body) !important;
}

body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
  color: var(--cs-ink) !important;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol {
  border-right-color: var(--cs-border);
  border-radius: 12px;
  background: var(--cs-page);
}

body.single-post .entry-content li {
  color: var(--cs-body);
}

/* Article CTA box: blue tint + saffron button */
.cs-post-cta {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-card);
  background: var(--cs-brand-tint);
}

.cs-post-cta .cs-post-cta__title,
body.single-post .entry-content .cs-post-cta .cs-post-cta__title {
  color: var(--cs-ink) !important;
}

.cs-post-cta p {
  color: var(--cs-body);
}

body.single-post .entry-content .cs-post-cta .cs-btn {
  color: var(--cs-saffron-ink) !important;
  text-decoration: none;
}

body.blog .ct-widget,
body.archive .ct-widget,
body.search .ct-widget,
body.single-post .ct-widget {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-card) !important;
  background: var(--cs-card) !important;
  box-shadow: none;
}

body.blog .widget-title,
body.archive .widget-title,
body.search .widget-title,
body.single-post .widget-title {
  color: var(--cs-ink) !important;
}

body.blog .ct-widget a,
body.archive .ct-widget a,
body.search .ct-widget a,
body.single-post .ct-widget a {
  color: var(--cs-body) !important;
}

/* PostX post grid */
.ultp-block-item {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-card) !important;
  background: var(--cs-card) !important;
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ultp-block-item:hover {
  border-color: var(--cs-border-hover) !important;
  box-shadow: var(--cs-shadow-hover);
  transform: translateY(-2px);
}

.ultp-block-content-wrap,
.ultp-block-image {
  border-radius: var(--cs-r-card) !important;
}

.ultp-block-title,
.ultp-block-title a {
  color: var(--cs-ink) !important;
}

/* =====================================================
   10. Older PostX / Stackable pages (VPS, hosting, cPanel, DirectAdmin)
   ===================================================== */

body.page-template-ultp_page_template:not(.home) .site-main,
body.page-template-ultp_page_template:not(.home) #main {
  background: var(--cs-page) !important;
}

/* Gutenberg hero group → hero band */
body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull:first-child {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-panel) !important;
  background-color: var(--cs-band) !important;
  background-blend-mode: normal;
  box-shadow: none;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull:first-child::before {
  background: var(--cs-dots);
  background-size: 24px 24px;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull:first-child h1 {
  color: var(--cs-ink) !important;
  text-shadow: none;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull:first-child p {
  color: var(--cs-muted) !important;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull:first-child p:first-child {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cs-brand) !important;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull:first-child p:first-child::before {
  flex-basis: 8px;
  width: 8px;
  height: 8px;
  background: var(--cs-teal);
  box-shadow: none;
  animation: none;
}

/* Stackable hero: the dark photo + gradient overlay (inline !important) gives way to the band. */
body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero,
body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero.alignfull {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-panel) !important;
  background-color: var(--cs-band) !important;
  background-image: none !important;
  box-shadow: none;
}

body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero::before {
  background-image: none !important;
  opacity: 0 !important;
}

body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero h1,
body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero h1 span,
body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero .stk-block-heading__text {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero p,
body.page-template-ultp_page_template:not(.home) .wp-block-stackable-hero .stk-block-text__text {
  color: var(--cs-muted) !important;
}

/* White text / palette-3 (now ink) backgrounds set in the block editor */
body.page-template-ultp_page_template:not(.home) .ultp-template-container .has-white-color:not(.wp-block-button__link) {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container .has-palette-color-3-background-color {
  background-color: var(--cs-card) !important;
}

/* Pricing section panel */
body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull.has-palette-color-5-background-color,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull.has-palette-color-6-background-color {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-panel) !important;
  background: var(--cs-alt) !important;
  box-shadow: none;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull.has-palette-color-5-background-color::before,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-group.alignfull.has-palette-color-6-background-color::before {
  content: none;
}

body.page-template-ultp_page_template:not(.home) #buynow {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) #buynow::after {
  width: 48px;
  height: 3px;
  background: var(--cs-brand);
}

/* Stackable tabs */
body.page-template-ultp_page_template:not(.home) .stk-block-tab-labels {
  border: 1px solid var(--cs-border);
  background: var(--cs-card) !important;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tabs__tab {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tabs__tab:hover {
  background: var(--cs-alt) !important;
  color: var(--cs-ink) !important;
  box-shadow: none;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tabs__tab:hover span {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tabs__tab--active,
body.page-template-ultp_page_template:not(.home) .stk-block-tabs__tab[aria-selected="true"] {
  background: var(--cs-brand) !important;
  color: #FFFFFF !important;
  box-shadow: none;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tabs__tab--active span,
body.page-template-ultp_page_template:not(.home) .stk-block-tabs__tab[aria-selected="true"] span {
  color: #FFFFFF !important;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] h3.wp-block-heading {
  color: var(--cs-ink) !important;
}

/* Plan cards */
body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-card) !important;
  background: var(--cs-card) !important;
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column:hover {
  border-color: var(--cs-border-hover) !important;
  box-shadow: var(--cs-shadow-hover);
  transform: translateY(-2px);
}

body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column h2 {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column p.has-xx-large-font-size,
body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column p.has-x-large-font-size {
  color: var(--cs-brand) !important;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column p,
body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column li {
  color: var(--cs-body) !important;
}

body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column p[style*="border-bottom"] {
  border-bottom: 1px solid var(--cs-border) !important;
  color: var(--cs-muted) !important;
}

/* Content typography */
body.page-template-ultp_page_template:not(.home) .ultp-template-container > h2.wp-block-heading,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > h3.wp-block-heading,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > h4.wp-block-heading {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > h2.wp-block-heading::after {
  right: calc(50% - 24px);
  left: calc(50% - 24px);
  height: 3px;
  background: var(--cs-brand);
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > p,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > p.wp-block-paragraph {
  color: var(--cs-body) !important;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > p strong,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > li strong {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > ul,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > ol {
  border-right-color: var(--cs-border);
  border-radius: 12px;
  background: var(--cs-card);
}

body.page-template-ultp_page_template:not(.home) .ultp-template-container > ul li,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > ol li {
  color: var(--cs-body) !important;
}

/* Generic columns outside pricing */
body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-columns > .wp-block-column,
body.page-template-ultp_page_template:not(.home) .ultp-template-container > .wp-block-columns.alignwide > .wp-block-column {
  border: 1px solid var(--cs-border) !important;
  background: var(--cs-card) !important;
  box-shadow: none;
}

body.page-template-ultp_page_template:not(.home) .wp-block-column h2,
body.page-template-ultp_page_template:not(.home) .wp-block-column h3,
body.page-template-ultp_page_template:not(.home) .wp-block-column h4,
body.page-template-ultp_page_template:not(.home) .wp-block-column strong {
  color: var(--cs-ink) !important;
}

body.page-template-ultp_page_template:not(.home) .wp-block-column p,
body.page-template-ultp_page_template:not(.home) .wp-block-column li {
  color: var(--cs-body) !important;
}

body.page-template-ultp_page_template:not(.home) .wp-block-separator {
  background: var(--cs-border) !important;
}

/* =====================================================
   11. Footer (dark ink block; white focus ring)
   ===================================================== */

#footer,
.ct-footer {
  --cs-focus: #FFFFFF;
  background: var(--cs-footer-bg) !important;
  color: var(--cs-footer-text);
}

#footer,
#footer [data-row],
#footer [data-column],
#footer .ct-widget,
.ct-footer,
.ct-footer [data-row],
.ct-footer [data-column],
.ct-footer .ct-widget {
  --theme-text-color: #E6ECF5;
  --theme-headings-color: #FFFFFF;
  --theme-link-initial-color: #FFFFFF;
  --theme-link-hover-color: #DCE4FF;
  --theme-border-color: #26344F;
  --theme-icon-color: #E6ECF5;
}

#footer::before,
.ct-footer::before {
  content: none;
}

#footer [data-row="bottom"],
.ct-footer [data-row="bottom"] {
  border-top: 1px solid var(--cs-footer-line) !important;
  background: transparent !important;
}

#footer p,
#footer li,
.ct-footer p,
.ct-footer li {
  color: var(--cs-footer-text) !important;
}

#footer a,
.ct-footer a {
  color: #FFFFFF !important;
}

#footer a:hover,
.ct-footer a:hover {
  color: var(--cs-header-sub) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

#footer .ct-footer-copyright,
.ct-footer .ct-footer-copyright,
#footer .ct-footer-copyright p,
.ct-footer .ct-footer-copyright p {
  color: var(--cs-footer-muted) !important;
}

/* =====================================================
   12. Offcanvas / mobile menu
   ===================================================== */

#offcanvas {
  --theme-text-color: #1E293B;
  --theme-link-initial-color: #0F1B33;
  --theme-link-hover-color: #1C39BB;
  --theme-icon-color: #0F1B33;
  --theme-icon-hover-color: #1C39BB;
  --theme-border-color: #DCE3EE;
}

#offcanvas .ct-panel-inner {
  background: var(--cs-card) !important;
}

#offcanvas .ct-panel-actions .ct-toggle-close,
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
  --theme-icon-color: #0F1B33;
  color: var(--cs-ink);
}

#offcanvas .mobile-menu {
  --mobile-menu-divider: 1px solid #DCE3EE;
}

.mobile-menu .ct-menu-link {
  color: var(--cs-ink) !important;
}

.mobile-menu .ct-menu-link:hover {
  background: var(--cs-alt);
  color: var(--cs-brand) !important;
}

.mobile-menu .current-menu-item > .ct-menu-link,
.mobile-menu .current-menu-ancestor > .ct-menu-link {
  background: var(--cs-brand-tint);
  color: var(--cs-brand) !important;
}

/* =====================================================
   13. Reduced motion (legacy global rule already stops animations and transitions)
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .cs-lift:hover,
  .cs-service-card:hover,
  .cs-link-card:hover,
  .cs-blog-card:hover,
  .ultp-block-item:hover,
  body.blog article:hover,
  body.archive article:hover,
  body.search article:hover,
  body.blog .entry-card:hover,
  body.archive .entry-card:hover,
  body.search .entry-card:hover,
  body.page-template-ultp_page_template:not(.home) .stk-block-tab-content [role="tabpanel"] .wp-block-column:hover,
  .cs-btn:hover,
  .cs-btn-outline:hover,
  .wp-block-button__link:hover,
  #header .ct-button-ghost:hover,
  .ct-header-cta .ct-button-ghost:hover {
    transform: none;
  }
}

/* cs-light: legacy hero backgrounds. Older PostX/Stackable pages paint a dark decorative image inline on the hero group and
   a white inline colour on the highlighted words; both vanish or clash on the light band. */
body.page-template-ultp_page_template:not(.home) .wp-block-group.has-background[style*="background-image"] {
  background-image: none !important;
}

body.page-template-ultp_page_template:not(.home) .stk-highlight[style*="color"] {
  color: #1C39BB !important;
}

/* cs-light: table of contents (LuckyWP TOC) on articles; the legacy CSS paints it dark with white links. */
.entry-content .lwptoc .lwptoc_i {
  padding: 18px 22px !important;
  border: 1px solid #DCE3EE !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

.entry-content .lwptoc .lwptoc_title {
  color: #0F1B33 !important;
}

.entry-content .lwptoc a,
.entry-content .lwptoc .lwptoc_toggle_label {
  color: #1C39BB !important;
}

.entry-content .lwptoc a:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------
   cs-light: logo sage accents (owner 2026-09-14: "a little light green that matches the logo").
   Logo green #84A88C. Text/icon #44644B (6.6:1 on white), dots #6A9573 (non-text 3.4:1), tint #EAF0EB,
   band #F2F7F3 (ink 16:1, muted 7.1:1, blue link 8.3:1). Replaces the turquoise secondary.
   ----------------------------------------------------- */
:root {
  --cs-sage: #84A88C;
  --cs-sage-dot: #6A9573;
  --cs-green: #44644B;
  --cs-teal: #44644B;
  --cs-teal-tint: #EAF0EB;
  --cs-sage-tint: #EAF0EB;
  --cs-bg-2: #F2F7F3;
  --cs-alt: #F2F7F3;
  --theme-palette-color-6: #F2F7F3;
}

.cs-pulse-dot,
.cs-chip::before,
.cs-service-list li::before {
  background: var(--cs-sage-dot) !important;
  box-shadow: none !important;
}

/* Alternate blue and sage icon tiles so the cards pick up the logo colour without a second loud accent. */
.cs-service-grid > :nth-child(even) .cs-icon,
.cs-problem-grid > :nth-child(even) .cs-icon,
.cs-link-grid > :nth-child(even) .cs-icon {
  background: var(--cs-sage-tint) !important;
  color: var(--cs-green) !important;
}

.cs-feature:nth-child(even) .cs-feature-number {
  background: var(--cs-sage-tint) !important;
  color: var(--cs-green) !important;
}

#cs-contact .cs-cta,
.cs-post-cta {
  border-color: #CFE0D3 !important;
  background: var(--cs-sage-tint) !important;
}

.cs-guide .cs-prose .cs-note {
  border-inline-start-color: var(--cs-sage) !important;
  background: var(--cs-sage-tint) !important;
}

#footer,
.ct-footer {
  border-top: 3px solid var(--cs-sage) !important;
}

/* Header v3 (owner feedback 2026-09-15): the blue bar did not belong to the light page, so the header is white with
   ink links and logo-sage accents. The header logo is the dark-text variant (configserver-logo-dark-text.png). */
#header {
  --cs-focus: #1C39BB;
}

#header [data-row="middle"] {
  border-bottom: 1px solid var(--cs-border) !important;
}

#header .menu > li > .ct-menu-link:hover,
#header .menu > li.ct-active > .ct-menu-link,
#header .menu > li.current-menu-item > .ct-menu-link,
#header .menu > li.current-menu-ancestor > .ct-menu-link {
  color: var(--cs-green) !important;
}

#header .ct-menu-link::after {
  background: var(--cs-sage-dot);
}

#header .ct-toggle-dropdown-desktop,
#header .ct-header-trigger {
  --theme-icon-color: currentColor;
  --theme-icon-hover-color: currentColor;
  color: inherit;
}

#header .ct-header-trigger {
  color: var(--cs-ink);
}

#header .ct-button-ghost,
.ct-header-cta .ct-button-ghost {
  border: 1px solid var(--cs-green) !important;
  background: transparent !important;
  color: var(--cs-green) !important;
}

#header .ct-button-ghost:hover,
.ct-header-cta .ct-button-ghost:hover {
  background: var(--cs-sage-tint) !important;
  color: var(--cs-green) !important;
}

/* The legacy Customizer CSS paints the mobile menu icon white with !important (it sat on the old blue bar). */
#header .ct-header-trigger rect,
#header .ct-header-trigger svg,
#header .ct-header-trigger .ct-icon {
  fill: var(--cs-ink) !important;
  color: var(--cs-ink) !important;
}

/* Page headers (blog, category, search, single post): the band colour sat flush against the text as a flat rectangle.
   Now a padded, rounded card that matches the content cards (owner feedback 2026-09-15). */
body.blog .hero-section,
body.archive .hero-section,
body.search .hero-section,
body.single-post .hero-section {
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 38px) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-panel) !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 45%, var(--cs-sage-tint) 100%) !important;
  box-shadow: none !important;
}

body.blog .hero-section .page-description,
body.archive .hero-section .page-description,
body.search .hero-section .page-description {
  margin-bottom: 0;
  color: var(--cs-muted);
}

/* Sidebar: technical services box (widget block-40) */
.cs-side-services .cs-side-services__title {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--cs-ink);
}

.cs-side-services .cs-side-services__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cs-muted);
}

.cs-side-services ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-side-services li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--cs-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}

.cs-side-services li a:hover,
.cs-side-services li a:focus-visible {
  background: var(--cs-alt);
  color: var(--cs-ink);
}

.cs-side-services__icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: var(--cs-brand-tint);
  color: var(--cs-brand);
}

.cs-side-services li:nth-child(even) .cs-side-services__icon {
  background: var(--cs-sage-tint);
  color: var(--cs-green);
}

.cs-side-services__icon svg {
  fill: currentColor;
}

.cs-side-services .cs-side-services__cta {
  display: block;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--cs-saffron);
  color: #1A1206;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.cs-side-services .cs-side-services__cta:hover {
  background: #E8961A;
  color: #1A1206;
}

/* Sidebar: about card (widget block-9, replaced the old blue pullquote) */
.cs-side-about .cs-side-about__title {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--cs-ink);
}

.cs-side-about p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--cs-muted);
}

.cs-side-about p:first-of-type {
  padding: 12px 14px;
  border-inline-start: 3px solid var(--cs-sage);
  border-radius: 10px;
  background: var(--cs-sage-tint);
  color: var(--cs-body);
}

.cs-side-about p:last-child {
  margin-bottom: 0;
}

.cs-side-about a {
  color: var(--cs-green);
  font-weight: 700;
  text-decoration: none;
}

.cs-side-about a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}