/* Reset global theme styles to prevent interference */
.banner-container * {
    box-sizing: border-box;
}

.banner-container {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    background: #4c50e9;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 1;
    min-height: clamp(12rem, 36vw, 18.125rem);
    padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(0.9375rem, 2.6vw, 1.875rem);
}

/* Reset only specific properties that commonly cause issues */
.banner-container p,
.banner-container h1,
.banner-container h2,
.banner-container h3,
.banner-container h4,
.banner-container h5,
.banner-container h6 {
    margin: 0;
    padding: 0;
}

.banner-container a {
    text-decoration: none;
}

.banner-container img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}

/* Accent circles - scale with container up to 1160px */
.banner-container .background-circle {
    position: absolute;
    width: clamp(15rem, 35vw, 24rem);
    height: clamp(15rem, 35vw, 24rem);
    border-radius: 50%;
    z-index: 1;
}

.banner-container .dark-blue-circle {
    background: rgba(0, 0, 88, 0.2);
    right: clamp(4rem, 15.17vw, 11rem);
    top: clamp(-7.5rem, -10.34vw, -4.5rem);
}

.banner-container .cyan-circle-right {
    background: rgba(106, 218, 226, 0.2);
    right: clamp(-4.5rem, -6.21vw, -2.7rem);
    bottom: clamp(-7.5rem, -10.34vw, -4.5rem);
}

.banner-container .cyan-circle-left {
    display: none;
    background: rgba(106, 218, 226, 0.2);
    right: clamp(1.8rem, 4.14vw, 3rem);
    bottom: clamp(-13.5rem, -18.62vw, -8rem);
}

.banner-container .banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.7vw, 1.25rem);
}

.banner-container .banner-text {
    flex: 1;
}

.banner-container .banner-heading {
    font-size: clamp(1.7rem, 7.5vw, 4rem);
    font-weight: 900;
    color: #6adae2;
    line-height: 1.1;
    margin-bottom: clamp(0.375rem, 0.86vw, 0.625rem);
    font-family: 'DM Sans', sans-serif;
}

.banner-container .banner-subheading {
    font-size: clamp(1.4rem, 6.5vw, 3.25rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: clamp(0.75rem, 1.72vw, 1.25rem);
    font-family: 'DM Sans', sans-serif;
}

.banner-container .banner-button {
    display: inline-block;
    background: #ffb607;
    color: #000058;
    font-size: clamp(1rem, 3.5vw, 1.375rem);
    font-weight: 900;
    padding: clamp(0.625rem, 2.5vw, 0.9375rem) clamp(1.5rem, 5.5vw, 2.25rem);
    border-radius: clamp(1.875rem, 8vw, 3.125rem);
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.3s ease;
    align-self: flex-start;
    white-space: nowrap;
    letter-spacing: 0.03125rem;
    font-family: 'DM Sans', sans-serif;
}

.banner-container .banner-button:hover,
.banner-container .banner-button:focus {
    background: #ffc727;
}

.banner-container .banner-button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.banner-container .banner-logo {
    position: absolute;
    bottom: clamp(0.9375rem, 2.6vw, 1.875rem);
    right: clamp(1.25rem, 3.45vw, 2.5rem);
    z-index: 2;
    width: clamp(6rem, 13.8vw, 10rem);
    height: auto;
}

/* Logo link focus state for accessibility */
.banner-container a[href]:has(.banner-logo):focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Ensure all interactive elements have visible focus */
.banner-container a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Respect user's motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .banner-container .banner-button {
        transition: none;
    }
}