/* Static Pages Styling
 * This file contains styles specific to static content pages like About Us, Privacy Policy, etc.
 */

:root {
  --static-page-top-margin: 0;
  --static-page-top-padding: 1rem;
  --static-page-section-spacing: 2rem;
}

/* Basic spacing for static pages */
.container {
  margin-top: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
}

/* Headings */
.content h1 {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
  color: #111827 !important;
}

.content h2 {
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  color: #1f2937 !important;
}

.content h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  color: #1f2937 !important;
}

/* Paragraphs and lists */
.content p {
  margin-bottom: 1.25rem !important;
  line-height: 1.6 !important;
}

.content ul,
.content ol {
  margin-bottom: 1.25rem !important;
  padding-left: 1.5rem !important;
}

.content ul {
  list-style-type: disc !important;
}

.content ol {
  list-style-type: decimal !important;
}

.content li {
  margin-bottom: 0.5rem !important;
}

/* Sections */
.content section {
  margin-bottom: 2rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.content section:last-child {
  border-bottom: none !important;
}

/* Links */
.content a {
  color: #2563eb !important;
  text-decoration: none !important;
}

.content a:hover {
  text-decoration: underline !important;
}

/* Image styling in content */
.content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.375rem !important;
  margin: 1.5rem 0 !important;
}

.content figure {
  margin: 1.5rem 0 !important;
}

.content figure img {
  margin: 0 !important;
}

.content figure figcaption {
  text-align: center !important;
  font-size: 0.875rem !important;
  color: #4b5563 !important;
  margin-top: 0.5rem !important;
}

/* Image sizing */
.content img[width="25%"],
.content figure[width="25%"] {
  width: 25% !important;
}

.content img[width="50%"],
.content figure[width="50%"] {
  width: 50% !important;
}

.content img[width="75%"],
.content figure[width="75%"] {
  width: 75% !important;
}

.content img[width="100%"],
.content figure[width="100%"] {
  width: 100% !important;
}

/* Column-based image sizing */
.content .column-image-container {
  margin-bottom: 1.5rem !important;
}

.content .column-image-container figure {
  margin: 0 0 0.5rem 0 !important;
}

.content .column-image-container img[style*="width: 25%"] {
  width: 25% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content .column-image-container img[style*="width: 50%"] {
  width: 50% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content .column-image-container img[style*="width: 75%"] {
  width: 75% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content .column-image-container img[style*="width: 100%"] {
  width: 100% !important;
}

/* Also support width attribute for better compatibility */
.content .column-image-container img[width="25%"] {
  width: 25% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content .column-image-container img[width="50%"] {
  width: 50% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content .column-image-container img[width="75%"] {
  width: 75% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content .column-image-container img[width="100%"] {
  width: 100% !important;
}

/* Hide size controls in frontend display */
.content .image-size-controls,
.content .image-controls,
.content .text-align-controls {
  display: none !important;
}

/* Image alignment classes */
.content figure.image-style-align-left {
  float: left !important;
  margin-right: 1.5rem !important;
  margin-bottom: 1rem !important;
  max-width: 50% !important;
}

.content figure.image-style-align-right {
  float: right !important;
  margin-left: 1.5rem !important;
  margin-bottom: 1rem !important;
  max-width: 50% !important;
}

.content figure.image-style-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Table-based layouts */
.content table {
  margin: 1.5rem 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.content table td {
  vertical-align: var(--cell-valign, inherit) !important;
}

.content table td figure {
  margin: 0 !important;
}

.content table td figure img {
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* Support for direct image width settings in tables */
.content table td img[style*="width: 25%"] {
  width: 25% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content table td img[style*="width: 50%"] {
  width: 50% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content table td img[style*="width: 75%"] {
  width: 75% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content table td img[style*="width: 100%"] {
  width: 100% !important;
}

/* Support width attribute for better compatibility */
.content table td img[width="25%"] {
  width: 25% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content table td img[width="50%"] {
  width: 50% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content table td img[width="75%"] {
  width: 75% !important;
  margin: 0 auto !important;
  display: block !important;
}

.content table td img[width="100%"] {
  width: 100% !important;
}

/* Text alignment in columns */
.content table td p {
  margin-bottom: 0.75rem !important;
}

.content table td p[style*="text-align: center"] {
  text-align: center !important;
}

.content table td p[style*="text-align: right"] {
  text-align: right !important;
}

.content table td p[style*="text-align: left"] {
  text-align: left !important;
}

/* Vertical alignment in columns */
.content table td[style*="vertical-align: top"] {
  --cell-valign: top;
}

.content table td[style*="vertical-align: middle"] {
  --cell-valign: middle;
}

.content table td[style*="vertical-align: bottom"] {
  --cell-valign: bottom;
}

/* Ensure tables stack nicely on mobile */
@media (max-width: 768px) {
  .content table,
  .content table tbody,
  .content table tr,
  .content table td {
    display: block !important;
    width: 100% !important;
  }
  
  .content table td {
    margin-bottom: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .content table td:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Ensure controls are hidden in mobile view */
  .content .image-controls,
  .content .text-align-controls {
    display: none !important;
  }
  
  /* Make image sizes more appropriate for mobile */
  .content table td img[style*="width: 25%"],
  .content table td img[width="25%"],
  .content .column-image-container img[style*="width: 25%"],
  .content .column-image-container img[width="25%"] {
    width: 50% !important; /* Make minimum size larger on mobile */
  }
}

/* Full-width image-text layout */
.content .full-width-container {
  display: flex !important;
  clear: both !important;
  margin: 2rem 0 !important;
  flex-wrap: wrap !important;
}

.content .full-width-container figure.image {
  width: 40% !important;
  margin: 0 !important;
}

.content .full-width-container .content-right {
  width: 60% !important;
  padding-left: 1.5rem !important;
}

.content .full-width-container figure.image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0.375rem !important;
}

/* Full-left image style */
.content figure.image-style-full-left {
  float: left !important;
  margin-right: 1.5rem !important;
  width: 40% !important;
  clear: left !important;
}

.content figure.image-style-full-left img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

/* Clear floats after image layouts */
.content:after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }
  
  .content h1 {
    font-size: 1.875rem !important;
  }
  
  .content h2 {
    font-size: 1.5rem !important;
  }
  
  .content h3 {
    font-size: 1.25rem !important;
  }
  
  /* Make images full width on mobile */
  .content figure.image-style-align-left,
  .content figure.image-style-align-right,
  .content figure.image-style-full-left {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Full-width container becomes stacked on mobile */
  .content .full-width-container figure.image,
  .content .full-width-container .content-right {
    width: 100% !important;
    padding-left: 0 !important;
  }
  
  .content .full-width-container .content-right {
    margin-top: 1rem !important;
  }
}

/* Support for custom image widths - make these rules stronger and more specific */
.content img[style*="width:"] {
  height: auto !important;
  max-width: 100% !important;
}

.content table td img[style*="width:"] {
  height: auto !important;
  max-width: 100% !important;
}

.content .column-image-container img[style*="width:"] {
  height: auto !important;
  max-width: 100% !important;
}

/* Make image width/height attributes stronger with more specific rules */
.content img[width],
.content figure[width] {
  width: attr(width) !important;
  height: auto !important;
}

/* Apply styles directly with !important for frontend rendering - stronger selectors */
.content img[width="25%"],
.content *[data-width="25%"] { width: 25% !important; height: auto !important; }

.content img[width="30%"],
.content *[data-width="30%"] { width: 30% !important; height: auto !important; }

.content img[width="40%"],
.content *[data-width="40%"] { width: 40% !important; height: auto !important; }

.content img[width="50%"],
.content *[data-width="50%"] { width: 50% !important; height: auto !important; }

.content img[width="60%"],
.content *[data-width="60%"] { width: 60% !important; height: auto !important; }

.content img[width="70%"],
.content *[data-width="70%"] { width: 70% !important; height: auto !important; }

.content img[width="75%"],
.content *[data-width="75%"] { width: 75% !important; height: auto !important; }

.content img[width="80%"],
.content *[data-width="80%"] { width: 80% !important; height: auto !important; }

.content img[width="90%"],
.content *[data-width="90%"] { width: 90% !important; height: auto !important; }

.content img[width="100%"],
.content *[data-width="100%"] { width: 100% !important; height: auto !important; }

/* Improve padding wrapper display */
.content .custom-padding-box {
  box-sizing: border-box !important;
  display: inline-block !important;
  padding: 0 !important; /* Reset default padding */
}

/* Ensure data-padding attributes are respected - using direct style application instead of attr() */
.content .custom-padding-box[data-padding-top] {
  padding-top: var(--padding-top, 0) !important;
}

.content .custom-padding-box[data-padding-right] {
  padding-right: var(--padding-right, 0) !important;
}

.content .custom-padding-box[data-padding-bottom] {
  padding-bottom: var(--padding-bottom, 0) !important;
}

.content .custom-padding-box[data-padding-left] {
  padding-left: var(--padding-left, 0) !important;
}

/* Vertical alignment in tables - ensure it works in frontend */
.content table td[style*="vertical-align: top"] {
  vertical-align: top !important;
}

.content table td[style*="vertical-align: middle"] {
  vertical-align: middle !important;
}

.content table td[style*="vertical-align: bottom"] {
  vertical-align: bottom !important;
}

/* Apply styles more forcefully for table cells */
.content table td[style*="vertical-align"] {
  display: table-cell !important;
}

/* Class-based vertical alignment */
.content table td.valign-top {
  vertical-align: top !important;
}

.content table td.valign-middle {
  vertical-align: middle !important;
}

.content table td.valign-bottom {
  vertical-align: bottom !important;
}

/* Data-attribute based vertical alignment for better compatibility */
.content table td[data-valign="top"] {
  vertical-align: top !important;
}

.content table td[data-valign="middle"] {
  vertical-align: middle !important;
}

.content table td[data-valign="bottom"] {
  vertical-align: bottom !important;
}

/* Super specific selectors for text alignment */
.content p[style*="text-align: center"],
.content td p[style*="text-align: center"] {
  text-align: center !important;
}

.content p[style*="text-align: right"],
.content td p[style*="text-align: right"] {
  text-align: right !important;
}

.content p[style*="text-align: left"],
.content td p[style*="text-align: left"] {
  text-align: left !important;
}

/* Emergency fix for image sizing */
.content figure.image_resized[style*="width"] {
  width: var(--figure-width, auto) !important;
  max-width: 100% !important;
}

.content figure.image_resized[style*="width:"] img {
  width: 100% !important;
}

/* Preserve figure width from style attributes */
.content figure[style*="width:"] {
  width: attr(style width) !important;
  max-width: 100% !important;
}