:root {
  /* Brand Colors */
  --brand-primary: #6967CD;
  --brand-hover: #7B79D5;
  --brand-light: #8F8DEC;
  --brand-dark: #5B59C3;

  /* Changed highlight color to a complementary orange tone */
  --highlight-primary: #69AA51;

  /* Neutral Colors — light-to-dark scale shared by all pages */
  --neutral-50: #f6f9fb;
  --neutral-100: #ECF0F1;
  --neutral-200: #dde4ea;
  --neutral-700: #93a3b5;
  --neutral-800: #4a5568;
  --neutral-900: #1a202c;

  /* Spacing - converted from rem to px */
  --spacing-xs: 8px;    /* was 0.5rem */
  --spacing-sm: 16px;   /* was 1rem */
  --spacing-md: 24px;   /* was 1.5rem */
  --spacing-lg: 32px;   /* was 2rem */
  --spacing-xl: 48px;   /* was 3rem */

  /* Corner radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layered shadows — softer and more diffuse than plain drop shadows */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 4px 6px rgba(16, 24, 40, 0.04), 0 12px 24px rgba(16, 24, 40, 0.10);

  /* Typeface stack — Inter with system-ui fallbacks */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.basic .container
/* ,
.container-fluid */ {
  max-width: 900px;
}

.navbar .container,
.navbar .container-fluid {
  max-width: 992px;
}

.clickable {
  cursor: pointer;
}

/* Let's pad a bit more, so it looks good with fixed topbar. */
#page > .flash-messages {
  padding-top: 16px;  /* was 1em */
}

/* This is for forms inside navbar.
   They have submit buttons instead of anchors, but we still
   want those to look the same as other li > a. */
.navbar-form button { font-size: inherit; }
.navbar-form button:hover { text-decoration: none; }

.toggler-shown .toggler-when-hidden,
.toggler-hidden .toggler-when-shown {
  display: none;
}

#page {
  margin-bottom: -54px;
  padding-bottom: 81px;
}

footer {
  height: 54px;
  line-height: 54px;
  border-top: #eee 1px solid;
}

.js-toggler-switch {
  color: #337ab7;
  /* font-size: 110%; */
  padding-top: 8px;   /* was 0.5em */
}

.toggler-when-shown {
  padding-bottom: 8px;  /* was 0.5em */
}


/* Sticky footer styles
-------------------------------------------------- */
body {
  left: 0;
  padding-top: 50px; }
html,
body {
  height: 100%; }
#page {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -54px;
}
img {
  max-width: 100%;
}

.link-unstyled,
.link-unstyled:visited,
.link-unstyled:active {
  font-style: inherit;
  color: inherit;
  background-color: transparent;
  font-size: inherit;
  text-decoration: none !important;
  font-variant: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  border-radius: inherit;
  border: inherit;
  outline: inherit;
  box-shadow: inherit;
  padding: inherit;
  vertical-align: inherit;
}

.event-detail {
  color: #ff00ff;
}
.event-info {
  color: #9b6d00;
}
.event-error {
  color: #f50000;
}

tr.compact-row, tr.compact-row > td {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* Sidebar CSS
 * User Profile Sidebar by @keenthemes
 * Licensed under MIT
 */

.sidebar-layout {
  background: #FFFFFF;
}

.sidebar-content .page-header {
  margin-top: 0;
  margin-bottom: 0;
}

/* Profile container */
.sidebar {
  margin: 20px 0;
}

/* Profile sidebar */
.sidebar-sidebar {
  padding: 15px 0 0 0;
  background: #fff;
}

.sidebar-header {
  text-align: center;
  padding-top: 20px;
}

.sidebar-header-title {
  color: #5a7391;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 7px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  padding: 0 10px;
}

.sidebar-header-subtitle {
  color: #5b9bd1;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  padding: 0 10px;
}

.sidebar-buttons {
  text-align: center;
  margin-top: 10px;
}

.sidebar-buttons .btn {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 15px;
  margin-right: 5px;
}

.sidebar-buttons .btn:last-child {
  margin-right: 0px;
}

.sidebar-menu {
  margin-top: 30px;
}

.sidebar-menu ul li {
  border-bottom: 0px;
}

.sidebar-menu ul li:last-child {
  border-bottom: none;
}

.sidebar-menu ul li a {
  color: #93a3b5;
  font-size: 14px;
  font-weight: 400;
}

.sidebar-menu ul li a i {
  margin-right: 8px;
  font-size: 14px;
}

.sidebar-menu ul li a:hover {
  background-color: #fafcfd;
  color: #5b9bd1;
}

.sidebar-menu ul li.active {
  border-bottom: none;
}

.sidebar-menu ul li.active a {
  color: #5b9bd1;
  background-color: #f6f9fb;
  border-left: 2px solid #5b9bd1;
  margin-left: -2px;
}

.sidebar-content {
  padding: 20px;
  background: #fff;
  min-height: 460px;
}

.sidebar-menu-separator {
  height: 10px;
  background-color: #FFFFFF;
}

.transaction-status i {
  padding: 0 5px;
  color: #5b9bd1;
}
table .sandbox-icon {
  color: #5b9bd1;
}

table a.view-more {
  text-decoration: none !important;
  font-weight: bolder;
}

table a.receipt-link {
  border-radius: 1em;
  margin-right: 1em;
  background-color: #68c8b5;
  color: #fff;
  padding: 1px 8px;
  text-decoration: none !important;
  font-size: 12px;
  min-width: 100px;
  display: inline-block;
  text-align: left;
}

table a.receipt-link i {
  margin-right: 5px;
}

table.events-table a:not(.btn) {
  text-decoration: none;
}

.receipt-amounts {
  margin-left: 5px;
}

.form-compact .form-group {
  margin-bottom: 0;
}

/** pretty print json */
.json-key     { color: brown; }
.json-string  { color: olive; }
.json-number  { color: steelblue; }
.json-boolean { color: teal; }
.json-null    { color: dimgray; }

.plan-key-indicator {
  color: olive;
  text-align: right;
}

.pricing-plans-panel .panel-heading {
  text-align: center;
}
.pricing-plans-panel .form-check{
  display: inline;
  margin-right: 20px;
}
.pricing-plans-panel .panel.panel-active,
.pricing-plans-panel .panel.panel-active .panel-footer {
  background-color: #ECF0F1;
}

.navbar-inverse {
  background-color: var(--brand-primary);
  border: none;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.15);
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus,
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {
  color: #ffffff;
  background-color: var(--brand-hover);
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
  background-color: var(--brand-hover);
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  background-color: var(--brand-dark);
}

blockquote {
  font-size: inherit;
}

#page {
  padding-top: 20px;
}

.sidebar-menu ul li.active a {
  color: #fff;
  background-color: var(--brand-hover);
  border-left: 2px solid #fff;
}

/* Buttons — slightly rounder and bolder than the flatly defaults, with a
   gentle hover lift on primary actions. */
.btn {
  border-radius: 8px;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  color: #ffffff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(105, 103, 205, 0.35);
}

/* Ghost button — secondary action next to a primary one (hero, CTA bands). */
.btn-ghost {
  color: var(--brand-primary);
  background-color: transparent;
  border: 2px solid rgba(105, 103, 205, 0.45);
}

.btn-ghost:hover,
.btn-ghost:focus {
  color: #ffffff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Visible keyboard-focus indicator on interactive elements. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

a {
  color: #6967CD;
}
a:hover, a:focus {
  color: #8f8dec;
}

.call-to-action {
  text-align: center;
  margin-top: 32px;     /* was 2em */
  font-size: 19.2px;    /* was 1.2em */
}

.call-to-action a {
	font-size: 16px;      /* was 1em */
    box-shadow: #00000040 0 5px 10px;
}

/* The homepage hero owns its background and top spacing (see Home.jsx). */
.home #page {
  padding-top: 0;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--neutral-800);
}

h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: -0.015em;
}

article {
  padding: 70px 0 60px;
  margin: 0;
}

.template h2,
.template h3,
.template h4,
.template h5,
.template h6 { margin-top: 35px; }

.template h1,
.template h2,
.template h3 { margin-bottom: 20px; }

.template .col > h2,
.template .col > h3,
.template .col > h4,
.template .col > h5,
.template .col > h6 { margin-top: 5px; }

.template .col > h1,
.template .col > h2,
.template .col > h3 { margin-bottom: 10px; }

h1 > i.fas,
h2 > i.fas,
h3 > i.fas,
h4 > i.fas,
h5 > i.fas,
h6 > i.fas { padding-right: 8px; }

pre a, code a {
  text-decoration: underline;
}

.required-span { color: red; }

.label-note{
  font-style: italic;
  font-size: 18px;
  color: #8f8686;
}

.a-test-webhook{
  margin-top: 4px;
}

/* Enhanced card styling */
.card {
  /* border-radius: 8px; */
  /* border: 1px solid var(--neutral-100); */
  /* box-shadow: var(--shadow-sm); */
  margin-bottom: var(--spacing-md);
}

.card-body {
  padding: var(--spacing-md);
}

/* Better typography */
.template h1, .template h2, .template h3 {
  color: var(--neutral-800);
  font-weight: 600;
  line-height: 1.3;
}

/* Enhanced code blocks */
/* pre {
  background: var(--neutral-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--neutral-100) !important;
  padding: var(--spacing-md) !important;
  margin: var(--spacing-md) 0 !important;
  box-shadow: var(--shadow-sm);
} */

/* Navigation improvements */
/* .navbar-inverse .navbar-nav > li > a { */
  /* font-weight: 500; */
  /* padding: 15px var(--spacing-md); */
  /* transition: all 0.2s ease; */
/* } */

/* Documentation content */
.entry-content {
  font-size: 16px;
  line-height: 1.6;
  color: var(--neutral-800);
}

.documentation-content table { width: 100%; }
.documentation-content td, .documentation-content th { padding: 4px 10px; }
.documentation-content table th {
  background-color: var(--neutral-50);
}

.template .entry-content .fas {
  color: var(--highlight-primary);
}

.entry-content li::marker {
  color: var(--highlight-primary);
}

.entry-content li > ul { margin-top: 10px; }

/* Lists in documentation */
.entry-content ul {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  list-style-type: none;
}
  
.entry-content ol {
  padding-left: var(--spacing-lg);
}

.entry-content ul li {
  /* margin-bottom: var(--spacing-xs); */
  position: relative;
}

.entry-content ul li::before {
  content: "•";
  color: var(--highlight-primary);
  position: absolute;
  left: -19.2px;        /* was -1.2em */
  font-size: 19.2px;    /* was 1.2em */
}

.entry-content ul.pager {
  padding-left: 0;
  margin-bottom: var(--spacing-md);
}

.entry-content ul.pager li::before {
  display: none;
}

/* Table improvements */
table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: var(--spacing-md) 0;
}

/* Footer refinements */
body > footer {
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-100);
  padding: var(--spacing-sm) 0;
}

/* Documentation Navigation */
.documentation-navigation {
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--neutral-100);
  padding-bottom: var(--spacing-xs);
}

.documentation-navigation ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--spacing-md);
}

.documentation-navigation li {
  margin: 0;
}

.documentation-navigation a {
  padding: var(--spacing-xs) 0;
  text-decoration: none;
  color: var(--neutral-700);
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.documentation-navigation li.active a {
  color: var(--brand-primary);
  background-color: var(--neutral-50);
}

.documentation-navigation a:hover {
  color: var(--brand-hover);
  background-color: var(--neutral-50);
}

/** hide .reading-meta on smaller screens */
@media (max-width: 768px) {
  .reading-meta { display: none; }
}

/* Add these new styles */
.toggler-label {
  width: 100%;
  display: block;
  cursor: pointer;
  padding: var(--spacing-sm);
}

.background-image-left {
  position: absolute;
  width: 350px;
  height: 350px;
  background-repeat: no-repeat;
  background-size: contain;
  left: 10px;
  display: none;
}
.background-image-right {
  position: absolute;
  width: 350px;
  height: 350px;
  background-repeat: no-repeat;
  background-size: contain;
  right: 10px;
  display: none;
}
@media (min-width: 1620px) {
  .background-image-left {
    display: block !important;
  }
  .background-image-right {
    display: block !important;
  }
}

/* Code Tabs Styling */
.code-tabs {
  margin: var(--spacing-md) 0;
  border: 1px solid var(--neutral-100);
  border-radius: 8px;
  overflow: hidden;
  background: var(--neutral-50);
  box-shadow: var(--shadow-sm);
}

.code-tabs .tab-buttons {
  display: flex;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-100);
  padding: 0;
  gap: 1px;
}

.code-tabs .tab-button {
  padding: var(--spacing-xs) var(--spacing-md);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--neutral-700);
  font-weight: 500;
  transition: all 0.2s ease;
}

.code-tabs .tab-button:hover {
  color: var(--brand-hover);
  background-color: var(--neutral-100);
}

.code-tabs .tab-button.active,
.code-tabs .tab-button[aria-selected="true"] {
  background: white;
  color: var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
}

.code-tabs .tab-content {
  display: none;
  background: white;
  max-height: 400px;
  overflow-y: scroll;
}

.code-tabs .tab-content.active,
.code-tabs .tab-content[aria-hidden="false"] {
  display: block;
}

.code-tabs pre {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: white !important;
}

.code-tabs .tab-content pre code {
  /* padding: var(--spacing-md); */
  font-size: 14px;
  line-height: 1.4;
}

/* Ensure proper spacing when multiple code-tabs are stacked */
.code-tabs + .code-tabs {
  margin-top: var(--spacing-lg);
}

/* Style file names in tabs */
.code-tabs .tab-button::before {
  margin-right: var(--spacing-xs);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* Use generic file icon as default */
.code-tabs .tab-button::before {
  content: "\f15b"; /* fa-file */
  color: #8f8f8f; /* neutral gray */
}

/* JavaScript/TypeScript files */
.code-tabs .tab-button[data-tab$=".js"]::before {
  content: "\f1c9"; /* fa-file-code */
  color: #f7df1e; /* JavaScript yellow */
}

.code-tabs .tab-button[data-tab$=".ts"]::before {
  content: "\f1c9"; /* fa-file-code */
  color: #3178c6; /* TypeScript blue */
}

/* CSS files */
.code-tabs .tab-button[data-tab$=".css"]::before {
  content: "\f1c9"; /* fa-file-code */
  color: #264de4; /* CSS blue */
}

/* HTML files */
.code-tabs .tab-button[data-tab$=".html"]::before {
  content: "\f1c9"; /* fa-file-code */
  color: #e34c26; /* HTML orange */
}

/* Text-based files */
.code-tabs .tab-button[data-tab$=".json"]::before {
  content: "\f15c"; /* fa-file-alt */
  color: #8bc34a; /* Light green for JSON */
}

.code-tabs .tab-button[data-tab$=".md"]::before {
  content: "\f15c"; /* fa-file-alt */
  color: #8bc34a; /* Light green for JSON */
}

/* Add these styles to handle selected state */
.js-plan-panel {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.js-plan-panel:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.js-plan-panel.selected-plan {
  border: 2px solid var(--brand-primary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

.js-plan-panel.selected-plan .panel-heading {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

.js-plan-panel.selected-plan .fa-check,
.js-plan-panel.selected-plan .fa-check-double {
  color: var(--brand-primary) !important;
}

/* Add styles for disabled button */
#update-plan-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Add styles for disabled payment method button */
#payment-method button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  position: relative;
}

.app-config-separator {
  margin: 20px 0 0 ;
  color: var(--neutral-700);
  font-style: italic;
}

/* Case Study Page Specific Styles */
body.case-study-page .entry-content {
  background-color: #ffffff; /* Change background to white for contrast */
  padding: 0; /* Remove padding, handle inside sections */
  border-top: none; /* Remove previous top border */
  margin-top: 0; /* Remove previous margin */
  box-shadow: none; /* Remove previous shadow */
  font-size: 1.1em; /* Slightly larger base font */
  line-height: 1.7;
  color: #4a5568; /* Softer text color */
}

body.case-study-page .entry-title {
  /* Hide the default H1 rendered by TemplatePage.jsx */
  display: none; 
}

body.case-study-page .container > div > div:first-child {
  /* Remove breadcrumb bottom margin if it's the first element */
  margin-bottom: 0;
}

/* --- Hero Section --- */
.case-study-hero {
  background: linear-gradient(135deg, #6967cd, #8785e2);
  color: #ffffff;
  padding: 50px 30px;
  margin: 10px -15px 30px -15px; /* Extend slightly into container padding */
  border-radius: 8px;
  text-align: center;
}

.case-study-hero h1 {
  font-size: 2.8em;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
  color: #ffffff;
  border-bottom: none;
  padding-bottom: 0;
}

.case-study-hero p.intro {
  font-size: 1.2em;
  font-weight: 300;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

/* --- Section Styling --- */
body.case-study-page .entry-content section {
  padding: 30px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

body.case-study-page .entry-content section:last-child {
  border-bottom: none;
}

/* --- Headings --- */
body.case-study-page .entry-content h2 {
  font-size: 2em;
  font-weight: 600;
  color: #333;
  margin-top: 10px;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #6967cd;
  display: inline-block;
}

body.case-study-page .entry-content h3 {
  font-size: 1.6em;
  font-weight: 600;
  color: #555;
  margin-bottom: 20px;
}

/* --- Blockquote Styling --- */
body.case-study-page .entry-content blockquote {
  font-size: 1.4em;
  font-style: italic;
  color: #555;
  border-left: 5px solid #8785e2;
  padding: 15px 30px;
  margin: 30px 0;
  background-color: #f9f9f9;
  border-radius: 0 8px 8px 0;
  position: relative;
}

body.case-study-page .entry-content blockquote p {
  margin-bottom: 10px;
}

body.case-study-page .entry-content blockquote cite {
  display: block;
  font-size: 0.9em;
  font-style: normal;
  font-weight: 600;
  color: #6967cd;
  margin-top: 10px;
}

body.case-study-page .entry-content blockquote::before {
  content: '\f10d'; /* FontAwesome quote-left */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 2.5em;
  color: #8785e2;
  position: absolute;
  left: -20px;
  top: -10px;
  opacity: 0.2;
}


/* --- Key Results Panel --- */
.case-study-results-panel {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 30px;
  margin: 30px 0;
}

.case-study-results-panel h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
  color: #6967cd;
}

.results-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
}

.result-item {
  flex: 1 1 200px; /* Allow items to grow and shrink, base width 200px */
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.result-item i {
  font-size: 2.5em;
  color: #8785e2;
  margin-bottom: 10px;
}

.result-item .metric {
  font-size: 2.2em;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.result-item .label {
  font-size: 1em;
  color: #555;
  line-height: 1.3;
}

/* --- Image Placeholder --- */
.case-study-image-placeholder {
  background-color: #e9ecef;
  border-radius: 8px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #adb5bd;
  font-style: italic;
  margin: 30px 0;
}

/* === End Enhanced Case Study Styles === */

/* === Case Studies Landing Page Styles === */

body.case-study-page .entry-content .case-study-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
  gap: 30px; /* Space between cards */
  padding: 30px 0; /* Padding around the grid */
  list-style: none; /* Remove default list styling */
  margin: 0;
}

body.case-study-page .entry-content .case-study-card {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden; /* Ensure content stays within rounded corners */
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

body.case-study-page .entry-content .case-study-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* Placeholder for a potential card image/thumbnail */
.case-study-card .card-thumbnail {
  background-color: #e9ecef;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-style: italic;
}

.case-study-card .card-content {
  padding: 20px;
  flex-grow: 1; /* Allow content to fill available space */
  display: flex;
  flex-direction: column;
}

.case-study-card .card-content h3 {
  font-size: 1.4em;
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  flex-grow: 1; /* Push link to the bottom */
}

.case-study-card .card-content h3 a {
  text-decoration: none;
  color: inherit;
}

.case-study-card .card-content h3 a:hover {
  color: var(--brand-primary);
}

.case-study-card .card-read-more {
  display: inline-block;
  margin-top: auto; /* Push to bottom */
  padding: 8px 15px;
  background-color: var(--brand-primary);
  color: #ffffff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
  align-self: flex-start; /* Align button to the start of the flex container */
}

.case-study-card .card-read-more:hover {
  background-color: var(--brand-hover);
  color: #ffffff;
}

/* Hide the simple intro paragraph if we use cards */
body.case-study-page .entry-content > p:first-of-type {
  /* Adjust if you want to keep the intro text */
  /* display: none; */
}

/* === End Case Studies Landing Page Styles === */

/* Add these styles at the end of the file */

.documentation-search {
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.documentation-search form {
  display: flex;
}

.documentation-search input[type="search"] {
  flex-grow: 1;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

.documentation-search button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-left: none;
  background-color: #f8f8f8;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.documentation-search button:hover {
  background-color: #eee;
}

/* Styles for search results page */
.search-results-list {
  list-style: none;
  padding-left: 0;
}

.search-result-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

.search-result-item h4 {
  margin-top: 0;
  margin-bottom: 0.3rem;
}

.search-result-item h4 a {
  text-decoration: none;
}

.search-result-breadcrumb {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 0.5rem;
}

.search-result-snippet {
  color: #333;
  font-size: 0.95em;
  line-height: 1.5;
}

.search-result-snippet mark,
.search-result-snippet strong { /* Style highlighted terms */
  background-color: #fcf8e3; /* Light yellow background */
  padding: 0.1em 0.2em;
  border-radius: 3px;
  font-weight: bold;
  color: #8a6d3b; /* Darker yellow text */
}

/* Styles for tutorial screenshots */
img.tutorial-screenshot {
  display: block; /* Allows margin auto for centering */
  margin-left: auto;
  margin-right: auto;
  max-width: 300px; /* Default max-width */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 1em; /* Add some space above */
  margin-bottom: 1em; /* Add some space below */
}

/* Modifier for larger images */
img.tutorial-screenshot-large {
  max-width: 100%; /* Larger max-width */
}