/* ==========================================================================
   Brand Section — Component Styles
   ========================================================================== */

/* Brand section container — deep blue background */
.brand-introduction {
  background: #080452;
  padding: 3.5rem 1.5rem;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Force parent containers to allow full width */
.path-frontpage .layout--onecol .layout__region,
.path-frontpage .views-element-container,
.path-frontpage .view-articles.view-display-id-brand {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Subtle animated glow background overlay */
.brand-introduction::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255, 233, 148, 0.04) 0%, transparent 70%);
  animation: brandGlow 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes brandGlow {
  0%   { transform: translateX(-5%) scale(1); }
  100% { transform: translateX(5%) scale(1.1); }
}

/* Decorative red accent line under the title */
.brand-introduction .title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: #cc1111;
  margin: 0.6rem auto 0.8rem auto;
  border-radius: 2px;
  animation: linePulse 3s ease-in-out infinite;
}

@keyframes linePulse {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50%      { opacity: 1; transform: scaleX(1.1); }
}

/* Main title — gold shimmer */
.brand-introduction .title {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  background: linear-gradient(135deg, #FFE994 30%, #FFF5C0 50%, #FFE994 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 0% center; }
  50%  { background-position: 200% center; }
  100% { background-position: 0% center; }
}

/* Body text — white, readable */
.brand-introduction .body-text p {
  color: #FFFFFF;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0.25rem auto;
}

.brand-introduction .body-text p:last-of-type {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

/* Strong / Bold — gold */
.brand-introduction .body-text strong,
.brand-introduction .body-text b {
  color: #FFE994;
}

/* Responsive */
@media (max-width: 768px) {
  .brand-introduction {
    padding: 2.5rem 1rem;
  }
  .brand-introduction .title {
    font-size: 2.2rem;
  }
  .brand-introduction .body-text p {
    font-size: 1rem;
    padding: 0 0.5rem;
  }
  .brand-introduction .body-text p:last-of-type {
    font-size: 0.9rem;
  }
}