/* 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: #d8d5c2 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 36px;
  line-height: 1;
  padding: 15px 60px;
  background: url("/media/winlegend_media/assets/faa68c1e283ed869de44bd6cf54002b4.svg")
    no-repeat center center;
  background-size: 100% 100%;
  /* Ensure text doesn't inherit weird positioning */
  position: relative !important;
  z-index: 10;
  margin: 0 -25px; /* Pull lianas underneath */
}

/* 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: 30px; /* Adjust line thickness */
  background: url("/media/winlegend_media/assets/liana.e1f65be.webp") repeat-x
    center;
  background-size: auto 100%;
  margin: 0 -2px; /* Slight overlap with swirls */
}

/* Left Decoration Structure: [Small Left] [Line] [Large Right (Normal)] TEXT */
.winota-deco-left {
  justify-content: flex-end !important;
}

/* Far Left: Small Left Swirl (Normal) */
/* .winota-deco-left::before {
  content: "";
  width: 31px;
  height: 100%;
  background: url("/media/winota_media/assets/line-sm-left.png") no-repeat
    center left;
  background-size: contain;
  flex-shrink: 0;
} */

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

/* Right Decoration Structure: TEXT [Large Right (Flipped)] [Line] [Small Left (Flipped)] */
.winota-deco-right {
  justify-content: flex-start !important;
}

/* 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%;
  }
}