:root {
  /* LawyerBrandify Dark Theme - Legal Friendly Color Palette */
  --background-one: rgba(3, 7, 18, 0.95); /* gray-950 */
  --background-two: rgba(17, 24, 39, 0.8); /* gray-900 */
  --background-three: rgba(31, 41, 55, 1); /* gray-800 */
  --background-four: radial-gradient(
    at center,
    rgba(3, 7, 18, 1),
    /* gray-950 */ rgba(17, 24, 39, 1) /* gray-900 */
  );

  /* Brand Colors - Dark/Legal Friendly (Black + Blue) */
  --brand-color: #60a5fa; /* blue-400 - primary accent (links, highlights) */
  --brand-color-light: #bfdbfe; /* blue-200 - lighter accent */
  --brand-color-bold: #3b82f6; /* blue-500 - strong accent */
  --seconderyColor: #1f2937; /* gray-800 */
  --seconderyColorDark: #111827; /* gray-900 */
  --reviewColor: #ef4444; /* red-500 for reviews */
  --light: #6b7280; /* gray-500 */
  --white: #ffffff;
  --gray: #9ca3af; /* gray-400 */
  --fontBold: 600;
  --black: #030712; /* gray-950 */
  --border-color: rgba(55, 65, 81, 0.5); /* gray-700 with opacity */
  --hover-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3),
    0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --radious: 3px;

  /* Typography Sizes */
  --tiny-size: 12px;
  --p-size: 15px;
  --p-line-height: 27px;
  --p-line-height-mobile: 25px;
  --p-color: #d1d5db; /* gray-300 */

  --mini-size: 14px;
  --mini-color: #9ca3af; /* gray-400 */

  --heading-size: 30px;
  --heading-color: #ffffff; /* white for headings */

  --title-size: 19px;
  --title-color: #f3f4f6; /* gray-100 */

  --mini-title-size: 17px;
  --mini-title-color: #e5e7eb; /* gray-200 */

  --fontBold: 600;
  --poppins: 'poppins';

  /* Legal Plate Colors - Professional & Dark Theme Friendly */
  --orange-plate-bg: #f97316; /* orange-500 */
  --blue-plate-bg: #3b82f6; /* blue-500 */
  --red-plate-bg: #ef4444; /* red-500 */

  /* Heading Sizes */
  --heading-one: 30px;
  --heading-two: 25px;
  --heading-three: 20px;
  --heading-four: 18px;
  --heading-five: 17px;
  --heading-six: 15px;
}

/* ----------------------------------------------------------
 * Container Layout Overrides
 * - We keep a legal-friendly, focused content width.
 * - Disable extra-wide (1536px) growth and cap at 1280px.
 * -------------------------------------------------------- */

/* Ensure container does not exceed 1280px on large screens */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* On extra-large screens, keep the same 1280px max width */
@media (min-width: 1536px) {
  .container {
    max-width: 1280px;
  }
}

body {
  font-family: 'Satoshi-Variable', 'Satoshi', 'Hind Siliguri', sans-serif !important;
  background-color: var(--background-one);
  color: var(--p-color);
}

/* Content Area - Dark Theme */
.single-content-area {
  margin-top: 13px;
  width: 100%;
  padding: 20px;
  background-color: transparent;
  color: var(--p-color);
}
.single-content-area:last-child {
  margin-bottom: 20px;
}
.page-content-area {
  padding: 10px;
  background-color: transparent;
  color: var(--p-color);
}
.page-content-area p {
  color: var(--p-color);
}
.page-content-area.single-content-area > h3 {
  display: inline-block;
}
.page-content-area.single-content-area {
  max-width: 900px;
  margin: auto;
  padding: 30px 0px;
}
.single-content-area ul,
.single-content-area ol {
  margin-bottom: 18px;
  margin-left: 20px;
}
.single-content-area li {
  font-size: 18px;
  position: relative;
  /* padding-left: 22px; */
  line-height: 30px;
  color: var(--p-color);
  margin-bottom: 10px;
  font-weight: 400;
}
/* .single-content-area li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--brand-color);
  border-radius: 2px;
} */
.single-content-area li strong {
  font-weight: 600;
  /* color: var(--brand-color-light); */
}
.single-content-area p {
  font-size: 18px;
  margin-bottom: 15px;
  line-height: 30px;
  color: var(--p-color);
}
.single-content-area p strong {
  font-weight: 600;
}
.single-content-area p img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
  box-shadow: var(--shadow);
}
.single-content-area p iframe {
  width: 100%;
  height: 450px;
  border-radius: 5px;
}
.single-content-area h2,
.single-content-area h3,
.single-content-area h4,
.single-content-area h5,
.single-content-area h6 {
  text-transform: capitalize;
  margin: 10px 0px;
  font-weight: 500;
  color: var(--heading-color);
}
.single-content-area h2 strong,
.single-content-area h3 strong,
.single-content-area h4 strong,
.single-content-area h5 strong,
.single-content-area h6 strong {
  font-weight: 600;
  color: var(--white);
}
.single-content-area h2 {
  font-weight: 600 !important;
  font-size: var(--heading-two) !important;
  line-height: 35px;
  color: var(--heading-color);
}
.single-content-area h3 {
  font-weight: 600 !important;
  font-size: var(--heading-three);
  color: var(--heading-color);
}
.single-content-area h4 {
  font-size: var(--heading-four);
  color: var(--title-color);
}
.single-content-area h5 {
  font-size: var(--heading-five);
  color: var(--title-color);
}
.single-content-area h6 {
  font-size: var(--heading-six);
  color: var(--mini-title-color);
}
.single-content-area a {
  border-bottom: 2px dotted rgba(209, 213, 219, 0.4); /* gray-300 with opacity */
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-color);
  margin: 0px 1px;
  transition: color 0.2s ease;
}
.single-content-area a:hover {
  color: var(--brand-color-light);
  border-bottom-color: var(--brand-color);
}
.single-content-area blockquote {
  background: var(--background-two);
  padding: 15px;
  border-left: 3px solid var(--brand-color);
  box-shadow: var(--shadow);
  margin: 20px 0px;
  border-radius: 3px;
  color: var(--p-color);
}
.single-content-area blockquote p {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: var(--p-color);
  margin-bottom: unset;
}

/* WordPress Block Styles - Dark Theme */
.wp-block-image {
  margin: unset !important;
}
.wp-block-image a {
  border-bottom: unset !important;
}
.single-content-area .wp-block-image img {
  height: auto;
  width: auto;
  border-radius: 5px;
  margin: 10px 0px;
  box-shadow: var(--shadow);
}
.wp-block-image figcaption {
  margin-top: unset !important;
  font-style: italic;
  font-size: var(--tiny-size);
  color: var(--mini-color);
}
.single-content-area iframe {
  width: 100%;
  height: 480px;
  border-radius: 5px;
  box-shadow: var(--shadow);
}
.wpp-meta,
.post-stats {
  color: var(--mini-color);
}
figure.wp-block-embed .wp-block-embed__wrapper iframe {
  width: 100% !important;
  height: 450px !important;
  border-radius: 7px;
  margin: 15px 0px;
  box-shadow: var(--shadow);
}

/* Table Styles - Dark Theme */
.wp-block-table table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-family: poppins;
  background-color: var(--background-two);
  color: var(--p-color);
}
.wp-block-table table td,
.wp-block-table table th {
  border: 1px solid var(--border-color);
  padding: 12px;
  font-weight: 600;
  color: var(--p-color);
}
.wp-block-table table td strong,
.wp-block-table table th strong,
.wp-block-table td strong,
.single-content-area th strong {
  font-weight: 600;
  font-size: var(--p-size);
  color: var(--brand-color-light);
}
.wp-block-table table td,
.wp-block-table table th,
.wp-block-table td {
  font-weight: 400;
  font-size: var(--p-size);
  transition: all 0.3s ease-in;
  color: var(--p-color);
}
.wp-block-table thead {
  border-bottom: unset !important;
  background-color: var(--background-three);
}
.wp-block-table table tr:nth-child(even) {
  background-color: var(--background-three);
}
.wp-block-table table tr:hover {
  background-color: var(--background-two);
}
.wp-block-table table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  color: var(--heading-color);
  background-color: var(--background-three);
}
.wp-block-table .wp-element-caption {
  font-style: italic;
  margin-top: 5px;
  font-size: 14px;
  color: var(--mini-color);
}
.has-background {
  padding: 20px !important;
  border-radius: 10px !important;
  background-color: var(--background-two) !important;
}
.wp-block-separator {
  margin: 20px 0px !important;
  border-color: var(--border-color) !important;
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px !important;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1280px !important;
  }
}