/* Shared by the shop pages drawn on the graphic prototype (cart, checkout, course detail) and by the order pages.
   Sizes in px: the theme sets html to 15px, the prototype is drawn on 16px. */

/* Page chrome of the theme: the page draws its own heading in place of title and breadcrumb. */
body.courseshop-shop-page #page-header,
body.courseshop-shop-page .page-secnav {
    display: none;
}

body.courseshop-shop-page #main-content {
    padding: 0;
}

/* Moodle's skip-link target is a 1px block: out of the flow it stays focusable without leaving a white line. */
body.courseshop-shop-page #maincontent {
    position: absolute;
}

/* Full width without 100vw, which would include the vertical scrollbar and add a horizontal one. */
body.courseshop-shop-page #main-content > .container-fluid {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

body.courseshop-shop-page #theme-main-content {
    margin-left: 0;
    margin-right: 0;
}

body.courseshop-shop-page #theme-main-content > .content-col {
    padding-left: 0;
    padding-right: 0;
}

/* The theme keeps the footer at the bottom of the window by growing .pagelayout-content, which stays white:
   every wrapper down to the shop page grows too, so a short page (empty cart) keeps its background down to the footer. */
body.courseshop-shop-page .page-b,
body.courseshop-shop-page #main-content,
body.courseshop-shop-page #main-content > .container-fluid,
body.courseshop-shop-page #theme-main-content > .content-col,
body.courseshop-shop-page #region-main,
body.courseshop-shop-page #page-content,
body.courseshop-shop-page #page-content > [role="main"] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

body.courseshop-shop-page #theme-main-content,
body.courseshop-shop-page [role="main"] > .cs-page,
body.courseshop-shop-page [role="main"] > .courseshop-course-detail {
    flex-grow: 1;
}

/* Light page of the prototype (cart, checkout, order pages): palette, CosmicBackground and SectionHeading. */

.cs-page {
    --cs-font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --cs-blue: #2f6cf8;
    --cs-primary: hsl(211 90% 42%);
    --cs-accent: hsl(203 70% 88%);
    --cs-slate-900: #0f172a;
    --cs-slate-500: #64748b;
    --cs-slate-400: #94a3b8;
    --cs-slate-100: #f1f5f9;
    --cs-emerald-50: #ecfdf5;
    --cs-emerald-200: #a7f3d0;
    --cs-emerald-600: #059669;
    --cs-emerald-700: #047857;
    --cs-teal-600: #0d9488;
    --cs-teal-700: #0f766e;
    --cs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --cs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);

    position: relative;
    overflow: hidden;
    background-color: hsl(205 75% 94%);
    color: hsl(224 65% 14%);
    font-size: 16px;
    line-height: 1.5;
}

.cs-page p,
.cs-page h2 {
    margin: 0;
}

.cs-page .cs-page-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 336px at 176px 208px, rgba(142, 200, 240, .5), transparent 100%),
        radial-gradient(circle 304px at calc(100% - 144px) calc(25% + 304px), rgba(179, 163, 240, .4), transparent 100%),
        radial-gradient(circle 240px at calc(33% + 240px) calc(100% + 0px), rgba(165, 216, 255, .45), transparent 100%),
        linear-gradient(115deg, #bfe0f8 0%, #e2f1ff 50%, #cfd9f2 100%);
}

.cs-page .cs-page-stars,
.cs-page .cs-page-stars::before,
.cs-page .cs-page-stars::after {
    position: absolute;
    inset: 0;
}

.cs-page .cs-page-stars::before,
.cs-page .cs-page-stars::after {
    content: "";
    background-repeat: repeat;
    animation: cs-page-twinkle 6s ease-in-out infinite;
}

.cs-page .cs-page-stars::before {
    background-image:
        radial-gradient(circle at 37px 52px, #fff 1.5px, rgba(255, 255, 255, .6) 2.5px, transparent 5.5px),
        radial-gradient(circle at 301px 118px, #5aa8e8 1px, rgba(90, 168, 232, .5) 2px, transparent 5px),
        radial-gradient(circle at 143px 263px, #fff 1px, rgba(255, 255, 255, .6) 2px, transparent 5px),
        radial-gradient(circle at 422px 341px, #fff 0.8px, rgba(255, 255, 255, .6) 1.8px, transparent 4.8px),
        radial-gradient(circle at 212px 447px, #5aa8e8 1.2px, rgba(90, 168, 232, .5) 2.2px, transparent 5.2px),
        radial-gradient(circle at 489px 31px, #fff 1px, rgba(255, 255, 255, .6) 2px, transparent 5px),
        radial-gradient(circle at 76px 398px, #fff 1.4px, rgba(255, 255, 255, .6) 2.4px, transparent 5.4px),
        radial-gradient(circle at 355px 489px, #fff 0.8px, rgba(255, 255, 255, .6) 1.8px, transparent 4.8px);
    background-size: 530px 530px;
}

.cs-page .cs-page-stars::after {
    background-image:
        radial-gradient(circle at 91px 163px, #fff 1px, rgba(255, 255, 255, .6) 2px, transparent 5px),
        radial-gradient(circle at 268px 37px, #5aa8e8 1.2px, rgba(90, 168, 232, .5) 2.2px, transparent 5.2px),
        radial-gradient(circle at 394px 251px, #fff 1.2px, rgba(255, 255, 255, .6) 2.2px, transparent 5.2px),
        radial-gradient(circle at 17px 322px, #5aa8e8 0.9px, rgba(90, 168, 232, .5) 1.9px, transparent 4.9px),
        radial-gradient(circle at 203px 388px, #fff 1.5px, rgba(255, 255, 255, .6) 2.5px, transparent 5.5px);
    background-size: 430px 430px;
    animation-delay: -3s;
    animation-duration: 8s;
}

@keyframes cs-page-twinkle {
    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-page .cs-page-stars::before,
    .cs-page .cs-page-stars::after {
        animation: none;
        opacity: .6;
    }
}

.cs-page .cs-page-section {
    position: relative;
    max-width: 1152px;
    margin: 0 auto;
    padding: 56px 16px;
}

.cs-page .cs-page-heading {
    max-width: 672px;
    margin: 0 auto 40px;
    text-align: center;
}

.cs-page .cs-page-eyebrow {
    color: var(--cs-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cs-page .cs-page-title {
    margin-top: 8px;
    color: var(--cs-slate-900);
    font-family: var(--cs-font-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
}

.cs-page .cs-page-intro {
    margin-top: 12px;
    color: var(--cs-slate-500);
}

@media (min-width: 768px) {
    .cs-page .cs-page-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .cs-page .cs-page-title {
        font-size: 36px;
        line-height: 40px;
    }
}