/* ================================================
   PHYSICIAN LIVING - CUSTOM CSS FOR ZOHO SITES
   Brand: Wealth & Wellness
   ================================================ */

/* ================================================
   TABLES
   ================================================ */

/* Base table styling */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  background: #FBF8F2; /* Soft Ecru */
  border: 1px solid #E2DACE; /* Stone Beige */
  border-top: none;
  border-radius: 0 0 8px 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Table caption */
table caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.5rem;
  font-family: 'Newreader', Georgia, serif;
  font-size: 1.125rem !important;
  font-weight: 600;
  color: #0B141C; /* Midnight Ink */
  background: #F7F3EC; /* Warm Canvas */
  border: 1px solid #E2DACE; /* Stone Beige */
  border-bottom: 2px solid #0C6455; /* Eucalyptus Deep */
  border-radius: 8px 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: table-caption;
}

/* Table header */
thead th {
  background: #0C6455; /* Eucalyptus Deep */
  color: #F7F3EC; /* Warm Canvas */
  font-weight: 600;
  text-align: left;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  border-bottom: 2px solid #0B141C; /* Midnight Ink */
}

/* Table body cells */
tbody td {
  padding: 1rem 1.5rem;
  color: #0B141C; /* Midnight Ink */
  border-bottom: 1px solid #E2DACE; /* Stone Beige */
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Remove border from last row */
tbody tr:last-child td {
  border-bottom: none;
}

/* Alternating row colors for readability */
tbody tr:nth-child(even) {
  background: #F7F3EC; /* Warm Canvas */
}

tbody tr:nth-child(odd) {
  background: #FBF8F2; /* Soft Ecru */
}

/* Hover effect for table rows */
tbody tr:hover {
  background: #D6E8E2; /* Eucalyptus Mist */
  transition: background 0.2s ease;
}

/* Column headers in first column */
tbody th {
  background: #F2E4CF; /* Warm Oyster */
  color: #0B141C; /* Midnight Ink */
  font-weight: 600;
  text-align: left;
  padding: 1rem 1.5rem;
  border-right: 2px solid #E2DACE; /* Stone Beige */
}

/* Responsive table wrapper */
.table-wrapper {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(11, 20, 28, 0.08);
}

/* Table variants */
table.pl-table-compact thead th,
table.pl-table-compact tbody td,
table.pl-table-compact tbody th {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

table.pl-table-borderless {
  border: none;
  box-shadow: none;
}

table.pl-table-borderless tbody td {
  border-bottom: none;
}

table.pl-table-no-hover tbody tr:hover {
  background: inherit;
}


/* ================================================
   CALLOUTS
   ================================================ */

/* Base callout styling */
.pl-callout {
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 1rem !important;
  line-height: 1.7;
  background: #F7F3EC; /* Warm Canvas */
  box-shadow: 0 2px 6px rgba(11, 20, 28, 0.06);
}

/* Callout title */
.pl-callout-title {
  font-family: 'Newreader', Georgia, serif;
  font-size: 1.25rem !important;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #0B141C; /* Midnight Ink */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Callout content */
.pl-callout-content {
  color: #4A525C; /* Soft Graphite */
  font-size: 1rem !important;
}

.pl-callout-content p {
  margin: 0 0 0.75rem 0;
  font-size: 1rem !important;
}

.pl-callout-content p:last-child {
  margin-bottom: 0;
}

.pl-callout-content ul {
  margin: 0;
  padding-left: 1.5rem;
}

.pl-callout-content li {
  margin-bottom: 0.5rem;
  font-size: 1rem !important;
}

.pl-callout-content li:last-child {
  margin-bottom: 0;
}

/* Default callout (Wealth - Eucalyptus) */
.pl-callout-default,
.pl-callout-wealth {
  border-left-color: #0C6455; /* Eucalyptus Deep */
  background: #D6E8E2; /* Eucalyptus Mist */
}

.pl-callout-default .pl-callout-title,
.pl-callout-wealth .pl-callout-title {
  color: #0C6455; /* Eucalyptus Deep */
}

/* Wellness callout (Mineral Blue) */
.pl-callout-wellness {
  border-left-color: #28566E; /* Mineral Blue */
  background: #E3F2F7; /* Lighter blue tint */
}

.pl-callout-wellness .pl-callout-title {
  color: #28566E; /* Mineral Blue */
}

/* Luxury/Premium callout (Champagne Brass) */
.pl-callout-luxury,
.pl-callout-premium {
  border-left-color: #C7A268; /* Champagne Brass */
  background: #F2E4CF; /* Warm Oyster */
}

.pl-callout-luxury .pl-callout-title,
.pl-callout-premium .pl-callout-title {
  color: #C7A268; /* Champagne Brass */
}

/* Action/Next Step callout */
.pl-callout-action {
  border-left-color: #1C7A5B; /* Success/Positive */
  background: #E8F5F1; /* Light green tint */
}

.pl-callout-action .pl-callout-title {
  color: #1C7A5B; /* Success/Positive */
}

/* Warning/Caution callout */
.pl-callout-warning {
  border-left-color: #D48A32; /* Warning/Attention */
  background: #FFF4E6; /* Light orange tint */
}

.pl-callout-warning .pl-callout-title {
  color: #D48A32; /* Warning/Attention */
}

/* Important/Alert callout */
.pl-callout-important {
  border-left-color: #B94A4A; /* Error/Negative */
  background: #FDEAEA; /* Light red tint */
}

.pl-callout-important .pl-callout-title {
  color: #B94A4A; /* Error/Negative */
}

/* Story/Example callout */
.pl-callout-story,
.pl-callout-example {
  border-left-color: #E3C9C6; /* Blush Clay */
  background: #FAF5F4; /* Very light blush */
}

.pl-callout-story .pl-callout-title,
.pl-callout-example .pl-callout-title {
  color: #28566E; /* Mineral Blue */
}


/* ================================================
   BLOCKQUOTES
   ================================================ */

/* Standard blockquote */
blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  position: relative;
  background: #FBF8F2; /* Soft Ecru */
  border-left: 4px solid #C7A268; /* Champagne Brass */
  font-family: 'Newreader', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #0B141C; /* Midnight Ink */
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

/* Blockquote with decorative quote mark */
blockquote::before {
  content: '"';
  position: absolute;
  left: -0.25rem;
  top: -0.5rem;
  font-size: 4rem;
  color: #C7A268; /* Champagne Brass */
  opacity: 0.15;
  font-family: Georgia, serif;
  line-height: 1;
}

/* Blockquote paragraphs */
blockquote p {
  margin: 0 0 1rem 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Blockquote attribution/citation */
blockquote cite,
blockquote footer {
  display: block;
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-style: normal;
  color: #4A525C; /* Soft Graphite */
  font-family: 'Inter', sans-serif;
}

blockquote cite::before,
blockquote footer::before {
  content: '— ';
}


/* ================================================
   SUBTITLE
   ================================================ */

.subtitle {
  font-family: 'Newreader', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #4A525C; /* Soft Graphite */
  margin: 1.5rem 0 2rem 0;
  font-weight: 400;
  font-style: italic;
}


/* ================================================
   PULL QUOTES
   ================================================ */

.pull-quote {
  margin: 3rem auto;
  padding: 0;
  max-width: 42rem;
  text-align: center;
  font-family: 'Newreader', Georgia, serif;
  font-size: 1.375rem;
  line-height: 1.6;
  color: #0C6455; /* Eucalyptus Deep */
  font-weight: 600;
  font-style: normal;
  position: relative;
}

.pull-quote::before {
  content: '"';
  display: block;
  font-size: 3rem;
  color: #0C6455; /* Eucalyptus Deep */
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 0.5rem;
  text-align: left;
}

.pull-quote::after {
  content: '"';
  display: block;
  font-size: 3rem;
  color: #0C6455; /* Eucalyptus Deep */
  opacity: 0.3;
  line-height: 1;
  margin-top: 0.5rem;
  text-align: right;
}


/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */

@media (max-width: 768px) {
  /* Tables */
  table {
    font-size: 0.875rem;
  }
  
  thead th,
  tbody td,
  tbody th {
    padding: 0.75rem 1rem;
  }
  
  table caption {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
  
  /* Callouts */
  .pl-callout {
    padding: 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
  }
  
  .pl-callout-title {
    font-size: 1.125rem;
  }
  
  /* Blockquotes */
  blockquote {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    margin: 1.5rem 0;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 1.125rem;
    margin: 0 0 1.5rem 0;
  }
  
  /* Pull Quotes */
  .pull-quote {
    font-size: 1.125rem;
    margin: 2rem auto;
  }
  
  .pull-quote::before,
  .pull-quote::after {
    font-size: 2rem;
  }
}

/* ================================================
   INHERIT SPACING (for pasted HTML)
   ================================================ */

.inherit-spacing,
.inherit-spacing p,
.inherit-spacing h1,
.inherit-spacing h2,
.inherit-spacing h3,
.inherit-spacing h4,
.inherit-spacing ul,
.inherit-spacing ol,
.inherit-spacing li,
.inherit-spacing a {
    margin: revert;
    padding: revert;
    line-height: revert;
    font-size: revert;
    color: revert;
}

/* ===========================================
   ROADMAP PAGES: Dynamic Content Visibility
   Used by JavaScript on /roadmap/ pages to 
   show/hide archetype and career-stage content
   based on URL parameters from Zoho Forms.
   =========================================== */

.hidden-content {
  display: none !important;
}