:root {
  /* These will be overridden by customizer values */
  --school-primary: var(--school-primary, #FF4500);
  --school-secondary: var(--school-secondary, #FFA500);
  --school-accent: var(--school-accent, #FFD700);
  --school-light: var(--school-light, #FFFFFF);
  --school-muted: var(--school-muted, #F9F9F9);
  --school-text: var(--school-text, #555555);
  --footer-bg-color: var(--footer-bg-color, #F9F9F9);
  --footer-text-color: var(--footer-text-color, #555555);
  --footer-hover-color: var(--footer-hover-color, #FFA500);
}

/* General Typography */
body {
  font-family: 'Inter', sans-serif;
  color: var(--school-text);
  line-height: 1.6;
  background-color: var(--school-light);
}

/* Professional Heading Styles - WOW Factor for August-Ruf School */
body h1, body h2, body h3, body h4, body h5, body h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,
.wp-block h1, .wp-block h2, .wp-block h3, .wp-block h4, .wp-block h5, .wp-block h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 2rem !important;
  margin-top: 3rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  position: relative !important;
  /* Preserve user formatting from editor */
  text-align: inherit;
  font-style: inherit;
}

/* H1 - Main Page Title with Stunning Gradient Background */
body h1, .entry-content h1, .wp-block h1 {
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--school-primary, #FF4500) 0%, var(--school-secondary, #FFA500) 50%, var(--school-accent, #FFD700) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: var(--school-primary, #FF4500) !important;
  margin-bottom: 2.5rem !important;
  margin-top: 0 !important;
  padding: 1.5rem 2rem !important;
  border-radius: 15px !important;
  background-color: rgba(255, 69, 0, 0.05) !important;
  /* border-left: 6px solid var(--school-primary, #FF4500) !important; */
  box-shadow: 0 8px 32px rgba(255, 69, 0, 0.15) !important;
  position: relative !important;
  text-shadow: none !important;
}

body h1::before, .entry-content h1::before, .wp-block h1::before {
/*  content: '' !important; */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.08) 0%, rgba(255, 165, 0, 0.05) 50%, rgba(255, 215, 0, 0.03) 100%) !important;
  border-radius: 15px !important;
  z-index: -1 !important;
}

/* H2 - Section Headers with Cool Background */
body h2, .entry-content h2, .wp-block h2 {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: #1a202c !important;
  margin-bottom: 2rem !important;
  padding: 1.25rem 1.75rem !important;
  background: rgba(255, 69, 0, 0.1) !important;
  border-left: 5px solid var(--school-primary, #FF4500) !important;
  /* color: white !important; */
  /* border-radius: 12px !important; */
  position: relative !important;
  overflow: hidden !important;
  /* box-shadow: 0 6px 24px rgba(45, 55, 72, 0.2) !important; */
  border-bottom: none !important;
}

body h2::after, .entry-content h2::after, .wp-block h2::after {
/*  content: '' !important; */
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  /* background: linear-gradient(90deg, var(--school-primary, #FF4500) 0%, var(--school-secondary, #FFA500) 50%, var(--school-accent, #FFD700) 100%) !important; */
}

/* H3 - Subsection with Elegant Accent */
body h3, .entry-content h3, .wp-block h3 {
  font-size: 2rem !important;
  font-weight: 650 !important;
  color: var(--school-primary, #FF4500) !important;
  margin-bottom: 1.75rem !important;
  padding: 1rem 1.5rem !important;
  background: rgba(255, 69, 0, 0.03) !important;
  border-left: 5px solid var(--school-primary, #FF4500) !important;
  border-radius: 0 10px 10px 0 !important;
  position: relative !important;
  box-shadow: 0 4px 16px rgba(255, 69, 0, 0.1) !important;
}

/* Exception for SubHeadline block - disable fancy H3 styles */
.subheadline-image-block h3,
.subheadline-image-block .subheadline-title {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: var(--school-primary, #FF4500) !important;
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  position: static !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
  font-family: 'Inter', sans-serif !important;
}

body h3::before, .entry-content h3::before, .wp-block h3::before {
/*  content: '' !important; */
  position: absolute !important;
  top: 50% !important;
  left: -2px !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--school-primary, #FF4500) !important;
  border-radius: 50% !important;
}

/* Remove pseudo-elements from SubHeadline block */
.subheadline-image-block h3::before,
.subheadline-image-block h3::after,
.subheadline-image-block .subheadline-title::before,
.subheadline-image-block .subheadline-title::after {
  display: none !important;
  content: none !important;
}

/* H4 - Professional with Subtle Background */
body h4, .entry-content h4, .wp-block h4 {
  font-size: 1.65rem !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  margin-bottom: 1.5rem !important;
  padding: 0.875rem 1.25rem !important;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.08) 0%, rgba(255, 215, 0, 0.05) 100%) !important;
  border-radius: 8px !important;
  border-top: 3px solid var(--school-secondary, #FFA500) !important;
  position: relative !important;
}

/* H5 - Clean with Orange Accent */
body h5, .entry-content h5, .wp-block h5 {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #4a5568 !important;
  margin-bottom: 1.25rem !important;
  padding: 0.75rem 1rem !important;
  border-left: 4px solid var(--school-secondary, #FFA500) !important;
  background: rgba(255, 165, 0, 0.04) !important;
  border-radius: 0 6px 6px 0 !important;
  position: relative !important;
}

/* H6 - Minimal with Gold Accent */
body h6, .entry-content h6, .wp-block h6 {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #4a5568 !important;
  margin-bottom: 1rem !important;
  padding: 0.625rem 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid var(--school-accent, #FFD700) !important;
  background: rgba(255, 215, 0, 0.06) !important;
  border-radius: 4px !important;
  display: inline-block !important;
  position: relative !important;
}

/* Hover Effects for Interactive Feel */
body h1:hover, .entry-content h1:hover, .wp-block h1:hover {
}

body h2:hover, .entry-content h2:hover, .wp-block h2:hover {
}

body h3:hover, .entry-content h3:hover, .wp-block h3:hover {
}

body h4:hover, .entry-content h4:hover, .wp-block h4:hover,
body h5:hover, .entry-content h5:hover, .wp-block h5:hover,
body h6:hover, .entry-content h6:hover, .wp-block h6:hover {
}

/* Footer Heading Overrides - Tone Down Fancy Styles (excluding h4) */
.biz-modern-footer h1,
.biz-modern-footer h2,
.biz-modern-footer h3,
.biz-modern-footer h5,
.biz-modern-footer h6,
footer h1,
footer h2,
footer h3,
footer h5,
footer h6,
.footer-heading,
.footer-column h1,
.footer-column h2,
.footer-column h3,
.footer-column h5,
.footer-column h6 {
  /* Reset fancy styles for footer (excluding h4) */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  transform: none !important;
  transition: none !important;
  
  /* Simple, clean footer heading style */
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #212529 !important;
  position: relative !important;
  
  /* Keep the orange underline accent but make it subtle */
  border-bottom: 2px solid var(--school-primary, #FF4500) !important;
  padding-bottom: 0.5rem !important;
  display: block !important;
}

/* Remove all pseudo-elements from footer headings (excluding h4) */
.biz-modern-footer h1::before, .biz-modern-footer h1::after,
.biz-modern-footer h2::before, .biz-modern-footer h2::after,
.biz-modern-footer h3::before, .biz-modern-footer h3::after,
.biz-modern-footer h5::before, .biz-modern-footer h5::after,
.biz-modern-footer h6::before, .biz-modern-footer h6::after,
footer h1::before, footer h1::after,
footer h2::before, footer h2::after,
footer h3::before, footer h3::after,
footer h5::before, footer h5::after,
footer h6::before, footer h6::after,
.footer-heading::before, .footer-heading::after,
.footer-column h1::before, .footer-column h1::after,
.footer-column h2::before, .footer-column h2::after,
.footer-column h3::before, .footer-column h3::after,
.footer-column h5::before, .footer-column h5::after,
.footer-column h6::before, .footer-column h6::after {
  display: none !important;
  content: none !important;
}

/* Remove hover effects from footer headings (excluding h4) */
.biz-modern-footer h1:hover, .biz-modern-footer h2:hover, .biz-modern-footer h3:hover,
.biz-modern-footer h5:hover, .biz-modern-footer h6:hover,
footer h1:hover, footer h2:hover, footer h3:hover,
footer h5:hover, footer h6:hover,
.footer-heading:hover,
.footer-column h1:hover, .footer-column h2:hover, .footer-column h3:hover,
.footer-column h5:hover, .footer-column h6:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Specific override for the existing footer-heading class */
.footer-heading {
  /* Keep existing styles but ensure they override the fancy ones */
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #212529 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--school-primary, #FF4500) !important;
  
  /* Reset any fancy styling */
  background: none !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
  body h1, .entry-content h1, .wp-block h1 {
    font-size: 2.5rem !important;
    padding: 1.25rem 1.5rem !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }
  
  body h2, .entry-content h2, .wp-block h2 {
    font-size: 2rem !important;
    padding: 1rem 1.25rem !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
  }
  
  body h3, .entry-content h3, .wp-block h3 {
    font-size: 1.65rem !important;
    padding: 0.875rem 1.25rem !important;
  }
  
  body h4, .entry-content h4, .wp-block h4 {
    font-size: 1.4rem !important;
    padding: 0.75rem 1rem !important;
  }
  
  body h5, .entry-content h5, .wp-block h5 {
    font-size: 1.2rem !important;
    padding: 0.625rem 0.875rem !important;
  }
  
  body h6, .entry-content h6, .wp-block h6 {
    font-size: 1rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}

@media (max-width: 480px) {
  body h1, .entry-content h1, .wp-block h1 {
    font-size: 2rem !important;
    padding: 1rem 1.25rem !important;
  }
  
  body h2, .entry-content h2, .wp-block h2 {
    font-size: 1.75rem !important;
    padding: 0.875rem 1rem !important;
  }
  
  body h3, .entry-content h3, .wp-block h3 {
    font-size: 1.4rem !important;
    padding: 0.75rem 1rem !important;
  }
  
  /* Disable hover effects on touch devices */
  body h1:hover, .entry-content h1:hover, .wp-block h1:hover,
  body h2:hover, .entry-content h2:hover, .wp-block h2:hover,
  body h3:hover, .entry-content h3:hover, .wp-block h3:hover,
  body h4:hover, .entry-content h4:hover, .wp-block h4:hover,
  body h5:hover, .entry-content h5:hover, .wp-block h5:hover,
  body h6:hover, .entry-content h6:hover, .wp-block h6:hover {
    transform: none !important;
  }
}


.wp-block-file__button wp-element-button {
  border-radius: 4px !important;
  display: none !important;
}
/* Preserve WordPress block formatting exactly as entered in editor */
.entry-content,
.page-content,
.post-content {
  /* Preserve all WordPress block attributes */
  font-family: inherit;
  line-height: inherit;
}

/* WordPress block alignment - preserve from backend */
.has-text-align-center {
  text-align: center !important;
}

.has-text-align-left {
  text-align: left !important;
}

.has-text-align-right {
  text-align: right !important;
}

/* Font formatting - preserve from backend */
.has-bold,
strong,
b {
  font-weight: bold !important;
}

.has-italic,
em,
i {
  font-style: italic !important;
}

/* WordPress blocks - preserve all formatting */
.wp-block {
  /* Preserve block attributes from editor */
  margin-left: inherit;
  margin-right: inherit;
  text-align: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  margin-bottom: 1rem;
}

.wp-block p {
  margin-bottom: 1em;
  /* Preserve paragraph formatting */
  text-align: inherit;
  font-weight: inherit;
  font-style: inherit;
}

/* Lists - preserve formatting */
.wp-block ul,
.wp-block ol {
  padding-left: 2em;
  margin-bottom: 1em;
  /* Preserve list formatting */
  text-align: inherit;
}

.wp-block li {
  margin-bottom: 0.5em;
  /* Preserve list item formatting */
  text-align: inherit;
  font-weight: inherit;
  font-style: inherit;
}

/* Blockquotes - preserve formatting */
.wp-block blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1em;
  margin: 1em 0;
  font-style: italic;
  /* Preserve blockquote formatting */
  text-align: inherit;
}

/* Code blocks - preserve formatting */
.wp-block code {
  background: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  /* Preserve code formatting */
  font-family: monospace;
}

.wp-block pre {
  background: #f4f4f4;
  padding: 1em;
  border-radius: 3px;
  overflow-x: auto;
  /* Preserve pre formatting */
  font-family: monospace;
}

/* Tables - preserve formatting */
.wp-block table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
  /* Preserve table formatting */
  text-align: inherit;
}

.wp-block table th,
.wp-block table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  /* Preserve cell formatting */
  font-weight: inherit;
  font-style: inherit;
}

.wp-block table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Images - preserve alignment and sizing */
.wp-block img {
  max-width: 100%;
  height: auto;
  /* Preserve image alignment */
  text-align: inherit;
}

.wp-block .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wp-block .alignleft {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

.wp-block .alignright {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}

/* Clear floats */
.wp-block::after {
  content: "";
  display: table;
  clear: both;
}

/* General Link Styling */
a {
  color: var(--school-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--school-secondary); /* Orange accent color on hover */
}

/* Buttons */
.school-btn {
  background-color: var(--school-secondary);
  color: var(--school-light);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.school-btn:hover {
  background-color: var(--school-primary);
  transform: translateY(-2px);
}

/* Card Component */
.school-card {
  background-color: var(--school-light);
  border: 1px solid var(--school-muted);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: none;
}

.school-card:hover {
  transform: translateY(-5px);
  box-shadow: none;
}

.school-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--school-primary);
  margin-bottom: 0.5rem;
}

.school-card-description {
  font-size: 0.95rem;
  color: var(--school-text);
  margin-bottom: 1rem;
}

/* Divider */
.school-divider {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}

.school-divider::before,
.school-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--school-secondary);
  opacity: 0.4;
}

.school-divider::before {
  margin-right: 1.5rem;
}

.school-divider::after {
  margin-left: 1.5rem;
}

/* Badges */
.school-badge {
  display: inline-block;
  background-color: var(--school-primary);
  color: var(--school-light);
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  margin-right: 0.5rem;
}

/* Header */
.school-header {
  background-color: var(--school-light);
  color: var(--school-text);
  border-bottom: 2px solid var(--school-muted);
}

.school-header a {
  color: var(--school-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.school-header a:hover {
  color: var(--school-primary);
}

/* Footer */
.school-footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding: 2rem 1rem;
  font-family: 'Playfair Display', serif;
}

.school-footer a {
  color: var(--school-primary);
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.school-footer a:hover {
  color: var(--footer-hover-color); /* Orange accent color on hover */
  text-decoration: underline; /* Add underline on hover */
}

/* Contact Links (Email, Phone, etc.) */
.school-topbar a,
.footer-contact-item a {
  color: var(--footer-text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.school-topbar a:hover,
.footer-contact-item a:hover {
  color: var(--school-secondary); /* Orange accent color on hover */
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .school-card {
    margin-bottom: 1.5rem;
  }
}