/*
    Skill City section styles.

    Scoped to the .skill-city root so they don't leak into the MTW chrome.
    Everything inside a Skill City Razor page lives inside <div class="skill-city">.
*/

.skill-city {
    font-family: 'Figtree', sans-serif;
    color: #1A2B4A;
    background: #ffffff;

    /* Bleed out of MtwLayout's .mtw-page max-width so SkillCity sections that
       want full-bleed backgrounds (hero, character carousel, partners with the
       city backdrop, etc.) actually reach the viewport edges. Inside each
       section the original max-w-5xl/6xl + mx-auto wrappers keep content
       constrained to the SkillCity-native layout width. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.skill-city * { box-sizing: border-box; }

/* Skill City logo colours */
.skill-city .logo-skill { color: #1B4F9B; }
.skill-city .logo-city  { color: #F5A623; }

/* Primary pill button — orange filled */
.skill-city .btn-primary {
    background: #F5A623;
    color: #fff;
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 10px 28px;
    display: inline-block;
    transition: background 0.2s, transform 0.15s;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
.skill-city .btn-primary:hover { background: #E09510; transform: translateY(-2px); }
.skill-city .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.skill-city .btn-primary:disabled:hover { transform: none; }

/* Outline button — blue */
.skill-city .btn-outline {
    border: 2.5px solid #1B4F9B;
    color: #1B4F9B;
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 8px 24px;
    display: inline-block;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.skill-city .btn-outline:hover { background: #1B4F9B; color: #fff; transform: translateY(-2px); }

/* Outline (white) — used on dark backgrounds */
.skill-city .btn-outline-white {
    border: 2.5px solid #ffffff;
    color: #ffffff;
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 8px 24px;
    display: inline-block;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.skill-city .btn-outline-white:hover { background: #ffffff; color: #1A2B4A; transform: translateY(-2px); }

/* Hero background — uses the hero banner image */
.skill-city .hero-bg {
    background: url('/Image/SkillCity/herobanner.png') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}
.skill-city .hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cpolygon points='60,0 120,30 60,60 0,30' fill='none' stroke='%231B4F9B' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 120px 60px;
}
.skill-city .hero-bg > * { position: relative; z-index: 1; }

/* Partner card */
.skill-city .partner-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 16px rgba(27, 79, 155, 0.08);
    border: 1px solid #B8D9F0;
}

/* Carousel dot */
.skill-city .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #B8D9F0;
    transition: background 0.2s;
    display: inline-block;
}
.skill-city .dot.is-active { background: #F5A623; }

/* Pulse soft animation (hero CTA) */
.skill-city .animate-pulse-soft {
    animation: sc-pulse-soft 2.5s ease-in-out infinite;
}
@keyframes sc-pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(245, 166, 35, 0); }
}

/* Float animation (phone/tablet mockup) */
.skill-city .animate-float {
    animation: sc-float 4s ease-in-out infinite;
}
@keyframes sc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Fade-up entrance */
.skill-city .animate-fade-up {
    animation: sc-fade-up 0.6s ease both;
}
@keyframes sc-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Long-form content blocks (legal pages) */
.skill-city .sc-prose h1 {
    font-family: 'Figtree', sans-serif;
    font-weight: 900;
    font-size: 32px;
    color: #1A2B4A;
    margin: 0 0 16px;
}
.skill-city .sc-prose h2 {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #1A2B4A;
    margin: 32px 0 12px;
}
.skill-city .sc-prose p,
.skill-city .sc-prose li {
    color: #6B8CAE;
    line-height: 1.6;
    margin: 0 0 12px;
}
.skill-city .sc-prose ul,
.skill-city .sc-prose ol { margin: 12px 0 20px; padding-left: 24px; }
.skill-city .sc-prose a { color: #1B4F9B; text-decoration: underline; }
.skill-city .sc-prose a:hover { color: #F5A623; }