/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 09 2026 | 15:05:00 */
/* ============================================================
   JA Legal — Blog Post Content Styles
   Scope    : .single .post-area .post-content
   Headings : #bf9874
   Body text : #ffffff
   Responsive: fluid type via clamp(), breakpoints at 768px & 480px
   Usage: Add to Appearance > Customize > Additional CSS
          or enqueue as a child-theme stylesheet.
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS Custom Properties
---------------------------------------------------------- */
:root {
  --color-heading      : #bf9874;
  --color-text         : #ffffff;
  --color-text-muted   : rgba(255, 255, 255, 0.70);
  --color-accent       : #bf9874;
  --color-border       : rgba(191, 152, 116, 0.25);
  --color-blockquote-bg: rgba(191, 152, 116, 0.08);

  --line-height-heading: 1.25;
  --line-height-body   : 1.80;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3rem;
}


.post .content-inner .post-featured-img img {
    max-height: 270px;
    height: 100% !important;
    min-height: 270px;
    object-fit: cover !important;
}

span.meta-category {
    display: none;
}

/* ----------------------------------------------------------
   2. Base Text Color
---------------------------------------------------------- */
.single .post-area .post-content {
  color: var(--color-text);
}


/* ----------------------------------------------------------
   3. Headings  (h1 – h6)
   Fluid sizing with clamp(min, preferred, max)
---------------------------------------------------------- */

/* H1 — Post title */
.single .post-area .post-content h1 {
  color        : var(--color-heading);
  font-size    : clamp(1.75rem, 4vw, 2.75rem);
  line-height  : var(--line-height-heading);
  font-weight  : 700;
  margin-top   : 0;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

/* H2 — Section headings */
.single .post-area .post-content h2 {
  color        : var(--color-heading);
  font-size    : clamp(1.35rem, 3vw, 2rem);
  line-height  : var(--line-height-heading);
  font-weight  : 700;
  margin-top   : var(--space-xl);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.015em;
  padding-left : 0.9rem;
  border-left  : 3px solid var(--color-accent);
}

/* H3 — Sub-section headings */
.single .post-area .post-content h3 {
  color        : var(--color-heading);
  font-size    : clamp(1.15rem, 2.5vw, 1.55rem);
  line-height  : var(--line-height-heading);
  font-weight  : 600;
  margin-top   : var(--space-lg);
  margin-bottom: var(--space-xs);
  letter-spacing: -0.01em;
}

/* H4 */
.single .post-area .post-content h4 {
  color        : var(--color-heading);
  font-size    : clamp(1.05rem, 2vw, 1.25rem);
  line-height  : var(--line-height-heading);
  font-weight  : 600;
  margin-top   : var(--space-md);
  margin-bottom: var(--space-xs);
}

/* H5 */
.single .post-area .post-content h5 {
  color        : var(--color-heading);
  font-size    : clamp(0.95rem, 1.8vw, 1.1rem);
  line-height  : var(--line-height-heading);
  font-weight  : 600;
  margin-top   : var(--space-md);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* H6 */
.single .post-area .post-content h6 {
  color        : var(--color-text-muted);
  font-size    : clamp(0.85rem, 1.5vw, 0.95rem);
  line-height  : var(--line-height-heading);
  font-weight  : 600;
  margin-top   : var(--space-sm);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ----------------------------------------------------------
   4. Body / Paragraph Text
---------------------------------------------------------- */
.single .post-area .post-content p {
  color        : var(--color-text);
  font-size    : clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height  : var(--line-height-body);
  margin-top   : 0;
  margin-bottom: var(--space-sm);
}

/* Lead / intro paragraph */
.single .post-area .post-content p:first-of-type {
  font-size : clamp(1rem, 1.8vw, 1.15rem);
  color     : rgba(255, 255, 255, 0.88);
  line-height: 1.85;
}


/* ----------------------------------------------------------
   5. Lists  (ul / ol / li)
---------------------------------------------------------- */
.single .post-area .post-content ul,
.single .post-area .post-content ol {
  color        : var(--color-text);
  font-size    : clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height  : var(--line-height-body);
  margin-top   : 0;
  margin-bottom: var(--space-md);
  padding-left : 0;
  list-style   : none;
}

.single .post-area .post-content ul li,
.single .post-area .post-content ol li {
  position     : relative;
  padding-left : 1.4rem;
  margin-bottom: var(--space-xs);
}

/* Custom bullet — accent dash for ul */
.single .post-area .post-content ul li::before {
  content    : '—';
  position   : absolute;
  left       : 0;
  color      : var(--color-accent);
  font-weight: 700;
}

/* Numbered counter for ol */
.single .post-area .post-content ol {
  counter-reset: blog-ol;
}

.single .post-area .post-content ol li::before {
  counter-increment: blog-ol;
  content    : counter(blog-ol) ".";
  position   : absolute;
  left       : 0;
  color      : var(--color-accent);
  font-weight: 700;
}

/* Nested lists */
.single .post-area .post-content ul ul,
.single .post-area .post-content ol ul,
.single .post-area .post-content ul ol,
.single .post-area .post-content ol ol {
  margin-top   : var(--space-xs);
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   6. Blockquote
---------------------------------------------------------- */
.single .post-area .post-content blockquote {
  position     : relative;
  background   : var(--color-blockquote-bg);
  border-left  : 4px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
  margin       : var(--space-lg) 0;
  padding      : var(--space-md) var(--space-lg);
  color        : rgba(255, 255, 255, 0.90);
  font-size    : clamp(1rem, 1.8vw, 1.125rem);
  font-style   : italic;
  line-height  : 1.75;
}

.single .post-area .post-content blockquote::before {
  content    : '\201C';
  position   : absolute;
  top        : -0.15rem;
  left       : 0.6rem;
  font-size  : 4rem;
  line-height: 1;
  color      : var(--color-accent);
  opacity    : 0.35;
}

.single .post-area .post-content blockquote cite {
  display      : block;
  margin-top   : var(--space-xs);
  font-size    : 0.85rem;
  font-style   : normal;
  color        : var(--color-text-muted);
  letter-spacing: 0.04em;
}

.single .post-area .post-content blockquote cite::before {
  content: '— ';
  color  : var(--color-accent);
}


/* ----------------------------------------------------------
   7. Inline Elements
---------------------------------------------------------- */

/* Links */
.single .post-area .post-content a {
  color                    : var(--color-accent);
  text-decoration          : underline;
  text-underline-offset    : 3px;
  text-decoration-thickness: 1px;
  transition               : opacity 0.2s ease;
}

.single .post-area .post-content a:hover {
  opacity: 0.75;
}

/* Strong / Bold */
.single .post-area .post-content strong,
.single .post-area .post-content b {
  color      : var(--color-heading);
  font-weight: 700;
}

/* Emphasis / Italic */
.single .post-area .post-content em,
.single .post-area .post-content i {
  color     : rgba(255, 255, 255, 0.85);
  font-style: italic;
}

/* Inline code */
.single .post-area .post-content code {
  background   : rgba(191, 152, 116, 0.12);
  border       : 1px solid var(--color-border);
  border-radius: 4px;
  padding      : 0.1em 0.4em;
  font-size    : 0.875em;
  color        : var(--color-heading);
}

/* Code block */
.single .post-area .post-content pre {
  background   : rgba(0, 0, 0, 0.35);
  border       : 1px solid var(--color-border);
  border-radius: 8px;
  padding      : var(--space-md);
  overflow-x   : auto;
  font-size    : 0.875rem;
  line-height  : 1.6;
  margin-bottom: var(--space-md);
  color        : var(--color-text);
}

.single .post-area .post-content pre code {
  background: none;
  border    : none;
  padding   : 0;
  font-size : 1em;
}


/* ----------------------------------------------------------
   8. Horizontal Rule
---------------------------------------------------------- */
.single .post-area .post-content hr {
  border    : none;
  border-top: 1px solid var(--color-border);
  margin    : var(--space-xl) 0;
}


/* ----------------------------------------------------------
   9. Tables
---------------------------------------------------------- */
.single .post-area .post-content table {
  width          : 100%;
  border-collapse: collapse;
  margin-bottom  : var(--space-lg);
  font-size      : clamp(0.85rem, 1.4vw, 0.95rem);
  color          : var(--color-text);
}

.single .post-area .post-content th {
  background   : rgba(191, 152, 116, 0.15);
  color        : var(--color-heading);
  font-weight  : 700;
  padding      : 0.65rem 1rem;
  text-align   : left;
  border-bottom: 2px solid var(--color-border);
}

.single .post-area .post-content td {
  padding       : 0.6rem 1rem;
  border-bottom : 1px solid var(--color-border);
  vertical-align: top;
}

.single .post-area .post-content tr:last-child td {
  border-bottom: none;
}

.single .post-area .post-content tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}


/* ----------------------------------------------------------
   10. Images & Figures
---------------------------------------------------------- */
.single .post-area .post-content img {
  max-width    : 100%;
  height       : auto;
  border-radius: 6px;
  display      : block;
}

.single .post-area .post-content figure {
  margin: var(--space-lg) 0;
}

.single .post-area .post-content figcaption {
  margin-top: var(--space-xs);
  font-size : 0.825rem;
  color     : var(--color-text-muted);
  text-align: center;
  font-style: italic;
}


/* ----------------------------------------------------------
   11. Responsive Breakpoints
---------------------------------------------------------- */

/* Tablet — 768px */
@media (max-width: 768px) {
  .single .post-area .post-content h2 {
    margin-top  : var(--space-lg);
    padding-left: 0.7rem;
  }

  .single .post-area .post-content blockquote {
    padding: var(--space-sm) var(--space-md);
  }

  .single .post-area .post-content th,
  .single .post-area .post-content td {
    padding: 0.5rem 0.65rem;
  }

  /* Scrollable tables on tablet */
  .single .post-area .post-content table {
    display   : block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile — 480px */
@media (max-width: 480px) {
  :root {
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: 2.25rem;
  }

  .single .post-area .post-content h2 {
    padding-left     : 0.6rem;
    border-left-width: 2px;
  }

  .single .post-area .post-content blockquote {
    margin : var(--space-md) 0;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) calc(var(--space-sm) + 0.5rem);
  }

  .single .post-area .post-content blockquote::before {
    font-size: 2.75rem;
  }

  .single .post-area .post-content ul li,
  .single .post-area .post-content ol li {
    padding-left: 1.2rem;
  }
}