/* Bootstrap 5 Compatibility Fixes */

/* Fix heading colors - Bootstrap 5 uses inherit, we want dark */
/* NOTE: No !important here to allow inline styles on specific pages */
h1, h2, h3, h4, h5, h6 {
  color: #333333;
}

/* Fix h1 font styling - make it bolder and reduce letter spacing */
h1 {
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Override section-subtitle color for light backgrounds */
.section-subtitle {
  color: #333333;
}

/* Navbar toggler icon styling (replaces .navbar-toggle .icon-bar) */
.navbar-toggler {
  border-color: #ff6440;
  padding: 0.25rem 0.75rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 100, 64, 0.25);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ff6440' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navigation link styles for Bootstrap 5 */
.navigation .navbar .nav-link {
  color: #5C5C5C;
  padding: 10px 15px;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

.navigation .navbar .nav-link:hover,
.navigation .navbar .nav-link:focus {
  color: #000;
  background: transparent;
}

/* Ensure proper spacing for navbar-nav in Bootstrap 5 */
.navigation .navbar .navbar-nav {
  padding-top: 10px;
}

/* Fix button styles for Bootstrap 5 */
.btn-main,
.btn-transparent,
.btn-small {
  border-radius: 0;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-main:hover,
.btn-transparent:hover,
.btn-small:hover {
  background: #e55a3a;
  color: #fff;
}

/* Ensure text centering works everywhere */
.text-center,
.text-center h1,
.text-center h2,
.text-center h3,
.text-center h4,
.text-center p {
  text-align: center !important;
}

/* Grid adjustments - Bootstrap 5 uses different gutter system */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

/* Form control compatibility */
.form-control {
  border-radius: 0;
}

/* Slider block centering */
.slider .block {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Ensure all buttons are clickable (fix z-index issues) */
.btn,
.btn-main,
.btn-transparent,
.btn-small,
.btn-solid-border {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Fix overlays blocking clicks */
.overly:before,
.slider:before,
.call-to-action:before {
  pointer-events: none;
}

/* Page title block centering */
.page-title .block {
  text-align: center;
}

/* Feature section text alignment */
.feature .col-md-6 {
  text-align: left;
}

/* Call to action centering */
.call-to-action {
  text-align: center;
}

.call-to-action .block {
  text-align: center;
}

/* Training page - add bottom margin to first row of posts */
.training-page .row .col-md-6:nth-child(1),
.training-page .row .col-md-6:nth-child(2) {
  margin-bottom: 30px;
}

/* Ensure consistent spacing for all training posts */
.training-page .post {
  margin-bottom: 0;
}

/* Training page images - better display without cropping */
.training-page .post-thumb {
  height: 280px !important;
  overflow: hidden !important;
}

.training-page .post-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Fix call-to-action text contrast */
/* Standard call-to-action (dark background) - white text */
.call-to-action:not(.cta-white) h2,
.call-to-action:not(.cta-white) p {
  color: #fff !important;
  position: relative;
  z-index: 2;
}

/* White variant call-to-action - dark text */
.cta-white h2,
.cta-white p {
  color: #333 !important;
  position: relative;
  z-index: 2;
}

.call-to-action .block {
  position: relative;
  z-index: 2;
}

/* Slider/Hero section with dark background - white text */
/* Force white color with maximum specificity */
section.slider h1,
section.slider h2,
section.slider h3,
section.slider h4,
section.slider h5,
section.slider h6,
section.slider p,
section.slider .block h1,
section.slider .block h2,
section.slider .block h3,
section.slider .block p,
section.slider .container .block h1,
section.slider .container .block p,
section.slider .animated {
  color: #ffffff !important;
  position: relative;
  z-index: 2;
}

/* Page title section with dark background - white text */
section.page-title h1,
section.page-title h2,
section.page-title h3,
section.page-title h4,
section.page-title h5,
section.page-title h6,
section.page-title p,
section.page-title .block h1,
section.page-title .block p {
  color: #ffffff !important;
  position: relative;
  z-index: 2;
}

/* Feature sections with background images - white text */
section.feature.bg-2 h1,
section.feature.bg-2 h2,
section.feature.bg-2 h3,
section.feature.bg-2 h4,
section.feature.bg-2 p,
section.feature.bg-2 .section-subtitle,
section.feature.bg-2 h2.section-subtitle {
  color: #fff !important;
  position: relative;
  z-index: 2;
}

/* Also apply to nested elements */
section.feature.bg-2 .col-md-6 h1,
section.feature.bg-2 .col-md-6 h2,
section.feature.bg-2 .col-md-6 h3,
section.feature.bg-2 .col-md-6 h4,
section.feature.bg-2 .col-md-6 p,
section.feature.bg-2 .col-md-6 .section-subtitle,
section.feature.bg-2 .col-md-6 h2.section-subtitle {
  color: #fff !important;
}

/* Make social media icons larger */
.social-icons {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.social-icons li {
  display: inline-block;
  margin-right: 20px;
}

.social-icons li a {
  font-size: 48px;
  color: #ff6440;
  transition: all 0.3s ease;
}

.social-icons li a:hover {
  color: #e55a3a;
  transform: scale(1.1);
}

/* Contact page CTA centering */
.contact-cta {
  text-align: center;
}

.contact-cta h3,
.contact-cta p {
  text-align: center;
}

/* Ensure contact cards remain centered */
.contact-card {
  text-align: center !important;
}

.contact-card h3,
.contact-card p {
  text-align: center !important;
}

/* Section titles should be centered when marked as such */
.section-title.text-center,
.section-title.text-center h2,
.section-title.text-center p {
  text-align: center !important;
}

/* Brand text styling - "IT Consulting Simon Lauger" next to logo */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-brand .brand-text {
  font-weight: 600;
  font-size: 18px;
  color: #333;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.navbar-brand:hover .brand-text {
  color: #ff6440;
}

/* Hide brand text on very small screens to save space */
@media (max-width: 576px) {
  .navbar-brand .brand-text {
    display: none;
  }
}