@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    [role="list"] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        font-style: italic;
        background-repeat: no-repeat;
        background-size: cover;
        shape-margin: .5rem;
        vertical-align: middle;
        max-inline-size: 100%;
        block-size: auto;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    h1,
    h2,
    h3,
    button,
    input,
    label {
        line-height: 1.1;
    }

    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    p,
    li {
        text-wrap: pretty;
    }

    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

}

@layer base {
    @font-face {
        font-family: 'Roboto Condensed';
        src: url('sources/fonts/Roboto_Condensed.woff2') format("woff2") tech(variations);
        font-weight: 100 900;
        font-display: swap;

    }


    :root {
        --clr-neutral-100: hsl(0, 0%, 93%, 1);
        --clr-primary-800: hsl(246, 45%, 25%, 1);
        --clr-primary-700: hsl(229, 43%, 20%, 1);
        --clr-primary-400: hsl(230; 50%, 58%, 0.3);
        --clr-primary-300: hsl(229, 36%, 39%, 1);
        --clr-primary-200: hsl(229, 21%, 53%, 1);
        --clr-accent-400: hsl(15, 82%, 51%, 1);
        --clr-secondary-400: hsl(229, 78%, 60%, 1);
        --clr-text-contrast: white;
        --clr-text-normal: black;



        --ff-base: 'Roboto Condensed';

        --fw-regular: 400;
        --fw-semi-bold: 600;
        --fw-bold: 800;

        /* Setting it up for mobile view in the :root as base! */

        --fs-200: .6rem;
        --fs-300: 0.875rem;
        --fs-400: 1rem;
        --fs-500: 1.25rem;
        --fs-600: 1.75rem;
        --fs-700: 2.25rem;
        --fs-800: 3.25rem;
        --fs-900: 4rem;


        --border-radius-1: 1rem;
        --border-radius-2: 2rem;
        --border-radius-3: 2.5rem;

        /* Setting up declaritive variables. */

        --fs-body: var(--fs-300);
        --fs-primary-heading: var(--fs-600);
        --fs-secondary-heading: var(--fs-500);
        --fs-section-heading: var(--fs-500);
        --fs-nav: var(--fs-300);
        --fs-crt-post: var(--fs-300);
        --fs-hero-list: var(--fs-300);

        /*Setting up gaps.*/
        --inline-gap: .5rem;
        --block-gap: .5rem;

        /* Setting media query for big screens! */
        @media (width > 760px) {
            --fs-body: var(--fs-400);
            --fs-primary-heading: var(--fs-800);
            --fs-secondary-heading: var(--fs-600);
            --fs-section-heading: var(--fs-600);
            --fs-nav: var(--fs-400);
            --fs-crt-post: var(--fs-300);
            --fs-hero-list: var(--fs-500);
            --inline-gap: 1rem;
            --block-gap: 1rem;
        }

    }

    body {
        background-color: var(--clr-neutral-100);
        min-block-size: 100dvh 100svh 100vh;
        -webkit-font-smoothing: antialiased;
        font-size: var(--fs-body);
        font-family: var(--ff-base);
        font-weight: var(--fw-regular);

        a {
            color: var(--clr-text-normal);
        }
    }

    .primary-heading {
        font-size: var(--fs-primary-heading);
        font-weight: var(--fw-bold);
        /*text-wrap: balance;*/

        @container inline-wrapper (width > 500px) {
            inline-size: 60%;
        }

    }

    .secondary-heading {
        font-size: var(--fs-secondary-heading);
        font-weight: var(--fw-semi-bold);

        span {
            background-color: hsl(from var(--clr-neutral-100) h s l / 0.8);
            border-radius: var(--border-radius-2);
            padding-right: .5rem;
            padding-block: .2rem;
            box-decoration-break: clone;
            /* Ensures background and border-radius apply correctly when text wraps */
            -webkit-box-decoration-break: clone;
            /* Safari support */
        }

        @container inline-wrapper (width > 500px) {
            inline-size: 60%;
        }
    }

    .section-heading {
        font-size: var(--fs-section-heading);
        font-weight: var(--fw-semi-bold);
        margin-bottom: 1rem;
    }
}

@layer layout {
    body {
        display: grid;
        grid-template-rows: calc(10vw + 4rem) 1fr 20rem;
    }

    header {
        z-index: 10;
    }

    section {
        --padding-block-section: 1.5rem;
        padding-block: var(--padding-block-section);

        @container inline-wrapper (width > 760px) {
            --padding-block-section: 2.5rem;
        }
    }

    .inline-wrapper {
        container: inline-wrapper / inline-size;
        --wrapper-max-inline-size: 760px;
        --wrapper-padding-inline: .5rem;
        max-inline-size: var(--wrapper-max-inline-size);
        margin-inline: auto;
        padding-inline: var(--wrapper-padding-inline);

        @media (width > 760px) {
            --wrapper-max-inline-size: calc(1050px + 2rem);
            --wrapper-padding-inline: 1rem;
        }
    }

    /*Selects everything except the first child.*/
    .flow>*+* {
        margin-block-start: var(--flow-spacer, 1em);
    }

    .equal-columns {
        display: grid;
        gap: var(--inline-gap, 1rem);
        align-items: stretch;

        @container inline-wrapper (width > 760px) {
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
        }
    }

    .split-40-60 {
        display: grid;
        gap: var(--inline-gap, 1rem);
        align-items: stretch;
        /* justify-items: stretch; */

        @container inline-wrapper (width > 760px) {
            grid-template-columns: 40% 60%;
        }
    }

    .split-60-40 {
        display: grid;
        gap: var(--inline-gap, 1rem);
        align-items: stretch;

        @container inline-wrapper (width > 760px) {
            grid-template-columns: 60% 40%;
        }
    }

    .grid-stack {
        display: grid;
        grid-template-areas: "stack";
        /*position: relative;*/
        /*block-size: 50vh;*/

        &>* {
            @container inline-wrapper (width > 760px) {
                grid-area: stack;
            }
        }
    }

    .block-wrapper {
        /*background-color: hsl(from var(--clr-neutral-100) h s l / 0.8);*/
        /*border-radius: var(--border-radius-3);*/
        display: flex;
        flex-flow: column wrap;
        gap: var(--block-gap);

        /*@container inline-wrapper (width < 760px) {*/
        /*}*/
    }

    .img-container {
        display: flex;
        justify-content: center;
        align-items: stretch;
    }


    footer {
        font-size: var(--fs-body);
        font-weight: var(--fw-semi-bold);
        display: grid;
        place-items: end center;
        padding-block: 2rem;
        background-image: url(sources/footer_wave_origin.svg);
        background-size: cover;
        background-position: top;

        a {
            color: var(--clr-text-normal);
        }
    }
}

@layer components {
    .site-header {
        margin-block: .5rem;
        margin-inline: .5rem;
        padding-block: 1rem;
        padding-inline: .5rem;
        max-block-size: calc(10vw + 4rem);
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 0.5rem;


    }

    [data-case="site-header"] {
        flex: 0 1 90px;

        svg {
            width: 100%;
            height: max(100%, 90px);
            max-width: 100%;

            .kanu {
                fill: var(--clr-primary-800);
            }

            .dudes {
                fill: var(--clr-accent-400);
            }

        }
    }

    .primary-navigation {
        display: block;
        align-self: center;
        font-weight: var(--fw-semi-bold);
        font-size: var(--fs-nav);
        color: var(--clr-primary-800);

        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;

            @container inline-wrapper (width > 760px) {
                gap: 2rem;
            }
        }

        a {
            text-decoration: none;
            color: var(--clr-primary-800);
        }
    }

    .hero {
        /*--inline-gap: 0;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        margin-block-start: clamp(1rem, 3vw, 2.5rem);
        padding-inline: 1rem;
        position: relative;

    }

    .hero-list {
        font-size: var(--fs-hero-list);
        font-weight: var(--fw-regular);
        inline-size: 70%;
        list-style: url("sources/canoe_small.svg");
        padding-left: 1.5rem;

        li {
            margin-bottom: .5rem;
        }

        span {
            background-color: hsl(from var(--clr-neutral-100) h s l / 0.8);
            border-radius: var(--border-radius-2);
            padding-block: .2rem;
            padding-right: .5rem;
            box-decoration-break: clone;
            /* Ensures background and border-radius apply correctly when text wraps */
            -webkit-box-decoration-break: clone;
            /* Safari support */
        }

    }

    [data-case="hero"] {
        --img-top: 2rem;
        --img-left: 45cqi;
        --img-bottom: -5rem;
        --img-right: -5rem;

        position: absolute;
        right: var(--img-right);
        top: var(--img-top);
        left: var(--img-left);
        bottom: var(--img-bottom);
        z-index: -100;

        @container inline-wrapper (width > 500px) {
            --img-right: -8rem;
            --img-top: -10rem;
            --img-left: 45cqi;
            --img-bottom: -5rem;
        }

        @container inline-wrapper (width > 1040px) {
            --img-top: -15rem;
        }

        svg {
            width: auto;
            height: 100%;
            max-width: 100%;


            @container inline-wrapper (width > 760px) {
                width: 160%;
                height: auto;
                max-width: 160%;
            }

        }
    }



    .bt-primary {
        --bt-bg-color: hsl(from var(--clr-primary-800) calc(h + var(--hue-delta, 0)) s l);
        --bt-text-color: var(--clr-accent-400);
        box-sizing: border-box;
        cursor: pointer;
        padding: 0.5rem 0.5rem;
        background-color: var(--bt-bg-color);
        color: var(--bt-text-color);
        border-radius: 1.5rem;
        border: 2px solid transparent;

        &:hover,
        &:focus-visible {
            /*--hue-delta: -20;*/
            /*--saturation-delta: -20;*/
            border-color: var(--clr-accent-400);
        }
    }


    .details-tab {
        display: block;
        order: 0;
        cursor: pointer;
        /* tabs come first*/

        &::-webkit-details-marker {
            display: none;
            /* hide the default arrow icon*/
        }
    }

    .details-tabs {
        position: relative;
        justify-content: center;
        /* center the tabs*/
        display: flex;
        flex-wrap: wrap;
        gap: var(--inline-gap);
    }


    .details-content {
        --inline-gap: 2rem;
        order: 1;
        /* content comes after tabs*/
        justify-content: center;
        align-items: center;
        margin-inline: 1rem;
        padding-block: 1rem;
        width: 100%;
        /* make the content sit on it's own row*/

        details {
            margin: 1.5rem;

        }

        img,
        a {
            justify-self: center;
            height: auto;
        }
    }

    .details-item {
        display: contents;

        &[open] {
            &>.details-tab {
                background: var(--clr-accent-400);
            }
        }
    }


    /* new syntax for chrome etc*/
    /*check support, if so apply style*/
    @supports selector(::details-content) {
        .details-item[open]::details-content {
            display: contents;
        }
    }


    .bt-secondary {
        --bt-bg-color: hsl(from var(--clr-primary-300) h s l / var(--opacity-hover, 0.8));
        --bt-text-color: var(--clr-neutral-100);
        box-sizing: border-box;
        padding: 0.5rem 1rem;
        background-color: var(--bt-bg-color);
        color: var(--bt-text-color);
        border-radius: 1.5rem;
        border: 2px solid transparent;

        &:hover,
        &:focus-visible {
            /*--hue-delta: -20;*/
            /*--saturation-delta: -20;*/
            border-color: var(--clr-accent-400);
            --opacity-hover: 1;
        }
    }

    .promo-card {
        --flex-wrap: wrap;
        color: var(--clr-text-contrast);
        background-color: hsl(from var(--clr-primary-300) h s l / 0.8);
        border-radius: var(--border-radius-2);
        padding-block: 20px;
        padding-inline: 15px;
        display: flex;
        flex-flow: row var(--flex-wrap);
        gap: var(--block-gap);

        @container inline-wrapper (width > 760px) {
            --flex-wrap: nowrap;
        }
    }

    [data-case="promo-card"] {
        flex: 1 0 120px;

        img {
            width: 100%;
            height: auto;
            max-width: 100%;
            object-fit: cover;
            border-radius: var(--border-radius-1);
        }
    }

    .promo-card__text {
        flex: 1 1 20ch;
        display: flex;
        align-content: space-around;
        justify-content: center;
        flex-flow: column wrap;
        --flow-spacer: 0.5em;

        a {
            text-decoration: none;
            color: inherit;

            &:hover {
                text-decoration: underline;
            }
        }

        h3 {
            margin-bottom: 1rem;
            /*text-align: center;*/
            font-weight: var(--fw-semi-bold);
            font-size: var(--fs-section-heading);
        }

        p {
            /*text-wrap: balance;*/
        }
    }


    .crew-card {
        --flex-wrap: wrap;
        /*color: var(--clr-text-contrast);*/
        background-color: hsl(from var(--clr-neutral-100) h s calc(l + (-30)));
        border-radius: var(--border-radius-2);
        padding-block: 20px;
        padding-inline: 15px;
        display: flex;
        flex-flow: column var(--flex-wrap);
        gap: var(--block-gap);

        /*@container inline-wrapper (width > 760px) {*/
        /*    --flex-wrap: nowrap;*/
        /*}*/
    }

    [data-case="crew-card"] {
        flex: 1 0 120px;

        img {
            width: 100%;
            height: auto;
            max-width: 100%;
            object-fit: cover;
            border-radius: var(--border-radius-1);
        }
    }

    .crew-card__text {
        flex: 1 1 20ch;
        display: flex;
        align-content: space-around;
        justify-content: center;
        flex-flow: column wrap;
        --flow-spacer: 0.5em;

        a {
            text-decoration: none;
            color: inherit;

            &:hover {
                text-decoration: underline;
            }
        }

        h3 {
            margin-bottom: 1rem;
            /*text-align: center;*/
            font-weight: var(--fw-semi-bold);
            font-size: var(--fs-section-heading);
        }

        p {
            /*text-wrap: balance;*/
        }
    }




    .crt-widget.crt-widget-branded {
        padding-bottom: 0 !important;
    }

    .crt-tag {
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
    }

    .crt-carousel-stage {
        /*height: 420px !important;*/
    }

    .crt-grid-post {
        padding: 10px !important;
    }

    .crt-post-c {
        border-radius: 1rem !important;
    }

    .crt-post-hover {
        /*background-color: var(--clr-primary-800) !important;*/
    }

    .crt-post-fullname {
        /*color: var(--clr-text-contrast) !important;*/
    }

    .crt-post-text {
        /*color: white !important;*/
        /*font-size: var(--fs-crt-post) !important;*/

        &>a {
            /*color: var(--clr-text-contrast) !important;*/
        }
    }
}