/* Winota Section Title Styles */

/* Override conflicting styles from general.css loaded later */
.winota-section-styled .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Force flex row layout and override inline-block from general.css */
.winota-section-styled .section-title {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  /* gap: 15px; */
  font-family: "Oswald", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffd700 !important; /* Gold color */
  text-transform: uppercase;
  margin: 0 !important;
  flex-grow: 1;
  width: 85%;

  /* Reset properties from general.css .gsp-section .section-title */
  padding: 0 !important;
  background: none !important;
  clip-path: none !important;
  transform: none !important;
}

/* Remove the blue skewed background pseudo-element from general.css */
.winota-section-styled .section-title::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Text style */
.winota-section-styled .title-text {
  color: #f8f7e7 !important; /* Light cream color to match lines */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  font-size: 32px; /* Slightly adjusted size */
  line-height: 1;
  padding: 0 20px; /* Reduced padding since we removed background image */
  background: none; /* Removed background image */
  position: relative !important;
  z-index: 10;
  margin: 0;
  letter-spacing: 2px;
}

/* Decorative elements container setup */
.winota-deco-left,
.winota-deco-right {
  display: flex !important;
  align-items: center !important;
  flex-grow: 1;
  height: 40px;
  min-width: 50px; /* Prevent collapsing */
}

/* The Line Element inside the deco container */
.deco-line {
  flex-grow: 1;
  height: 2px; /* Line thickness */
  background: #f8f7e7; /* Fallback solid color */
  background: linear-gradient(
    90deg,
    transparent,
    #f8f7e7,
    transparent
  ); /* Fading effect */
  margin: 0 10px; /* Space between line and text/screen edge */
  opacity: 0.8;
  align-self: center; /* Center vertically relative to container */
}

/* Left Decoration Structure: [Line] TEXT */
.winota-deco-left {
  justify-content: flex-end !important;
}
/* Left line fades from transparent (left) to solid (right near text)? 
   Actually standard gradient transparent-color-transparent works well for both if centered, 
   but for side specific:
*/
.winota-deco-left .deco-line {
  background: linear-gradient(90deg, transparent, #f8f7e7);
}

/* Right Decoration Structure: TEXT [Line] */
.winota-deco-right {
  justify-content: flex-start !important;
}
.winota-deco-right .deco-line {
  background: linear-gradient(90deg, #f8f7e7, transparent);
}

/* Near Text: Large Right Swirl (Flipped) - Acts as Left End of Right Deco */
/* .winota-deco-right::before {
  content: "";
  width: 50px;
  height: 100%;
  background: url("/media/winota_media/assets/line-lg-right.png") no-repeat
    center left;
  background-size: contain;
  transform: scaleX(-1) translateY(-5px); 
  flex-shrink: 0;
} */

/* Far Right: Small Left Swirl (Flipped) - Acts as Right End of Right Deco */
/* .winota-deco-right::after {
  content: "";
  width: 31px;
  height: 100%;
  background: url("/media/winota_media/assets/line-sm-left.png") no-repeat
    center right;
  background-size: contain;
  transform: scaleX(-1); 
  flex-shrink: 0;
} */

/* Responsive adjustments */
@media (max-width: 768px) {
  .winota-section-styled .section-title {
    font-size: 24px;
    gap: 10px;
  }
  .winota-section-styled .title-text {
    font-size: 20px;
  }
  .winota-deco-left::before,
  .winota-deco-left::after,
  .winota-deco-right::before,
  .winota-deco-right::after {
    width: 30px; /* Smaller swirls on mobile */
  }
}

@media (max-width: 371px) {
  .section-header {
    flex-direction: column !important;
  }
  .winota-section-styled .section-title {
    width: 105%;
  }
}