@font-face {
    font-family: "Halis Grotesque";
    src: url("fonts/halisgr-book-webfont.woff2") format("woff2"),
         url("fonts/halisgr-book-webfont.woff") format("woff"),
         url("fonts/HalisGR-Book.otf") format("opentype");
}
@font-face {
    font-family: "Halis Grotesque";
    font-weight: bold;
    src: url("fonts/halisgr-bold-webfont.woff2") format("woff2"),
         url("fonts/halisgr-bold-webfont.woff") format("woff"),
         url("fonts/HalisGR-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Halis Grotesque";
    font-style: italic;
    src: url("fonts/halisgr-medium-webfont.woff2") format("woff2"),
         url("fonts/halisgr-medium-webfont.woff") format("woff"),
         url("fonts/HalisGR-Medium.otf") format("opentype");
}
@font-face {
  font-family: 'Homemade Apple';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/homemadeapple/v24/Qw3EZQFXECDrI2q789EKQZJob0x6XHgOiJM6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --primary-hue-default           : 185;
    --primary-sat-default           : 15%;
    --primary-light-default         : 82%;

    --primary-sat-weaker            : 31%;
    --primary-sat-stronger          : 30%;
    --primary-light-lighter         : 90%;
    --primary-light-darker          : 75%;

    --secondary-hue-default         : 195; /*calc(var(--primary-hue-default) + 180);*/
    --secondary-sat-default         : 49%;
    --secondary-light-default       : 42%;

    --secondary-sat-weaker          : 15%;
    --secondary-sat-stronger        : calc(var(--secondary-sat-default) + 20%);
    --secondary-light-darker        : 20%;
    --secondary-light-lighter       : 85%; /*calc(var(--secondary-light-default) + 10%);*/

}


body {
  display                     : flex;
  align-items                 : center;
  flex-direction              : column;
  background-color            : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter));
  padding                     : 0;
  margin                      : 0;
  font-family                 : 'Halis Grotesque', Arial, Helvetica, sans-serif;
  font-size                   : 1em;
  color                       : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-darker));
}

h2 {
  text-align                  : center;
  font-family                 : Helvetica, Arial, sans-serif;
  font-size                   : 2em;
}

/* Create a hanging indent */
p {
    margin-left               : 1em;
    text-indent               : -1em;
    padding-right             : 1em;
}
p a {
    text-decoration           : none;
    font-weight               : bold;
    border-bottom             : 1px dashed hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-darker));
}

a[target="_blank"]:after{
    content                   :"\21D7";
    font-size                 : 60%;
    line-height               : 0;
    position                  : relative;
    vertical-align            : baseline;
    top                       : -0.5em;
}

figure {
    display                   : table;
    border-spacing            : 0;
    & img {
        display               : block;
        border-radius         : 1em 1em 0 0;
        margin-bottom         : 0;
        width                 : 100%;
    }
    & figcaption {
        display               : table-caption;
        caption-side          : bottom ;
        border-radius         : 0 0 0.5em 0.5em;
        margin-top            : 0;
        padding               : 0.5em;
        background-color      : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-darker));
    }
}

footer {
    width                     : 100%;
    background-color          : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-darker));
    & p {
        font-size             : 0.8em;
        margin                : 0.5em auto;
        text-align            : center;
    }
}

select {
    margin                    : 2em;
}

details {
    margin                    : 0.5em 0;
}

details div {
    background-color          : hsl(var(--secondary-hue-default), var(--secondary-sat-weaker), var(--secondary-light-lighter));
    margin-left               : 2em;
    padding                   : 1em;
    border-bottom-left-radius : 1em;
    border-bottom-right-radius: 1em;
    border                    : 1px solid hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    border-top                : none;

    & table {
        font-family           : sans-serif;
        font-size             : 0.9em;
        & thead {
            background-color  : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
            color             : #eee;
            & th {
                padding       : 0.25em;
            }
        }
        tr {
            &:nth-child(even) {
                background-color  : hsl(var(--secondary-hue-default), 40%, 40%);
                color             :#ddd;
            }
            & td {
                padding        : 0.25em 0.5em;
            }
        }
    }

    & img {
        margin                 :0 auto;
    }
}

details div p {
    font-size                  : 0.8em;
}

summary {
    background-color           : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    border-radius              : 0.5em;
    padding                    : 0.25em;
    color                      : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter));

    span {
        float                  : right;
        margin-right           : 0.5em;
        font-size              : 0.8em;
    }
}

span.closing_in {
    background-color            : hsl(250, 40%, 50%);
    color                       : white;
    padding                     : 0 0.5em;
    border-radius               : 0.5em;
}
span.completed {
    background-color            : hsl(51, 100%, 40%);
    color                       : black;
    padding                     : 0 0.5em;
    border-radius               : 0.5em;
}

summary:hover {
    background-color           : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-darker));
}

details:open summary {
    border-bottom-right-radius: 0;
}

li, dd {
    font-size                  : 0.9em;
}

dt {
    font-weight                : bold;
}

dialog {
    position                   : fixed;
    left                       : 30%;
    top                        : 50%;
    transform                  : translate(-50%, -50%);
    border-radius              : 1em;
    border-color               : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    background-color           : hsl(var(--secondary-hue-default), var(--secondary-sat-weaker), var(--secondary-light-lighter));
    padding                    : 0.5em;
    max-width                  : 20em;

    & .title {
        border-top-left-radius : 0.7em;
        border-top-right-radius: 0.7em;
        padding                : 0.5em;
        background-color       : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
        color                  : #eee;

        h4 {
            margin-left        : 1em;
        }
    }

    & .inner_info {
        padding                : 0 0.9em;
    }

    & button {
        margin                 : 0 auto 0.5em auto;
    }
}

dialog.errorDialog {
    border-color               : hsl(355, 69%, 50%);
    background-color           : hsl(355, 50%, 80%);
    padding                    : 0;
    & .title {
        background-color       : hsl(355, 50%, 60%);
    }
}

iframe {
    width                      : 100%;
    height                     : calc((880px / 16) * 9);
}
@media (max-width: 512px) {
    iframe {
        height                 : calc((100vw / 16) * 9);
    }
}

.main {
  max-width                    : 55em;
  padding                      : 0 2em;
}

.siteTitle {
    width                      : 100%;
    height                     : 100%;
    font-family                : "Homemade Apple",Tangerine,"Times New Roman",serif;
    color                      : black;
    background-size            : 100% auto;
    background-image           : url("./images/biking/northumbrian/northumbrian-23.jpg");
    background-position        : 0 85%;
    border-top                 : 20px solid hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));

    & h1 {
        font-size              : 3em;
        text-align             : left;
        margin                 : 0 auto;
        padding                : 0.25em 0 2.5em 0.5em;
    }
    & a {
        margin                 : 0 auto;
        color                  : black;
        text-decoration        : none;
    }
}

.biking .siteTitle {
    background-image           : url("./images/biking/northumbrian/northumbrian-23.jpg");
    background-position        : 0 85%;
}

.climbing .siteTitle {
    background-image           : url("./images/climbing/pabbay.jpg");
    background-position        : 0 90%;
    & a {
        color                  : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter));
    }
}

.walking .siteTitle {
    background-image           : url("./images/walking/munros/ben_alder_1.jpeg");
    background-position        : 0 0;
}

.bob_graham .siteTitle {
    background-image           : url("./images/bobgraham/ill_crag.jpg");
    background-position        : 20% 20%;

}

.quote {
    font-family                : Helvetica, Arial,  sans-serif;
    font-size                  : 0.9em;
    font-style                 : italic;
}

.indented {
    font-family                : Helvetica, Arial,  sans-serif;
    margin-left                : 2em;
}

.callout {
    margin-left                : 2em;
    margin-right               : 2em;
    border-radius              : 1em;
    padding                    : 0.5em;
    text-indent                : 0;

    background-color           : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-darker));
}

.copyright {
    font-size                  : 0.8em;
    margin                     : 1em auto;
    text-align                 : center;
}

.graph_copyright {
    margin-top                 : 4em;
}

/* Add a black background color to the top navigation */
.topnav {
  display                      : flex;
  position                     : sticky;
  background-color             : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
  overflow                     : hidden;
  align-items                  : center;
  border-bottom                : 1px solid #bbb;
}

.topnav div {
    margin                    : 0 auto;
}

/* Style the links inside the navigation bar */
.topnav a {
  float                       : left;
  color                       : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter));
  text-align                  : center;
  padding                     : 14px 16px;
  text-decoration             : none;
  font-size                   : 1.5em;
  border-right                : 1px solid #bbb;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color            : #ddd;
  color                       : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
  font-style                  : italic;
}


/* Add a color to the active/current link */
.topnav a.active
 {
  background-color            : #7a7;
  color                       : white;
}

.section_nav {
    display                   : flex;
    align-items               : center;
    background-color          : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    margin-bottom             : 3em;
    font-size                 : 0.8em;
    button {
      margin-left             : 1em;
    }
}

.section_nav a{
    text-align                : center;
    color                     : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter));
    padding                   : 14px 16px;
    text-decoration           : none;
}
.section_nav a.active_page {
    color                     : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    background-image          : radial-gradient(ellipse at center,
                                                hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter)) 40%,
                                                hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default)) 70%
                                            );
}

.flexWrapper {
    display                   : flex;
    flex-flow                 : row wrap;
}

.flexImageText {
    display                   : flex;
    gap                       : 2em;
    margin-bottom             : 2em;
}

.flexCentre {
    justify-content           : center;
    margin                    : 1em 0;
    & button {
        margin                : 0 0.5em;
        padding               : 0 0.5em;
        & a {
            text-decoration   : none;
        }
    }
}

.rounded {
    border-radius             : 0.5em;
}
.centred {
    display: block;
    margin: 0 auto;
}

/* For the charts on the membership list page */
.chartWrapper {
    display                   : flex;
    flex-flow                 : row wrap;
}

.postcodesWrapper {
    border                    : 1px solid black;
    height                    : 1000px;
    margin-bottom             : 2em;
}

.canvasWrapper {
    display                   : inline-block;
    width                     : 350px;
}

.sectionsCanvasWrapper {
    display                   : inline-block;
    width                     : 50vw;
}

.midiCanvasWrapper {
    display                   : inline-block;
    width                     : 50vw;
    margin-bottom             : 2em;
    margin-top                : 2em;

}

.missingText {
    font-size: 0.8em;
}

.cartouche,
span[id^="c_info_"],
span[id^="ac_info_"] {
    border                   : 1px solid hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-darker));
    border-radius            : 100vw;
    padding                  : 0.2em;
    background-color         : #ddd;
    font-family              : Helvetica, Arial, sans-serif;
    font-size                : 0.9em;
    white-space              : nowrap;
}

/* The calculator form */
.calculator_dialog {
    position: fixed;
    left: 50%;
    top: 90%;
    transform: translate(-10%, -50%);
}

.bgrCalc {
    width                      : 100%;
    margin                     : 0;
    font-size                  : 0.8em;

    & fieldset {
        background-color       : hsl(var(--secondary-hue-default), var(--secondary-sat-weaker), var(--secondary-light-lighter));
        border-radius          : 0.5em;
    }
    & fieldset.formWrapper {
        border-top-left-radius : 0;
        border-top-right-radius: 0;
    }
    & div {
        margin                 : 0.5em 0;
    }
    & select {
        margin                 : 1em;
    }
    & .road_val {
        font-size              : 0.8em;
    }
    & .hidden,
    & .phone {
        display                : none;
    }
    & textarea {
        width                  : 95%;
    }
}

/* The *Background rules are built up dynamically from the light status in the schedule info.*/
.dark {
    border-right               : 8px solid #333;
}
.DarkBackground {
    background-color           : #666;
    color                      : #eee;
}

.dusk {
    border-right               : 8px solid #999;
}
.DuskBackground,
.DawnBackground {
    background-color           : #999;
    color                      : #eee;
}

.daylight {
    border-right               : 8px solid hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
}
.DaylightBackground {
    background-color           : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    color                      : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter));
}

/* Results table */

.results_table {
    /*border                      : 2px solid hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));*/
    border-collapse             : collapse;
    margin                      : 2em 0;

    & thead {
        background-color        : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-darker));
        color                   : #eee;
    }
    & th {
        background-color        : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-darker));
    }
    & th[data-editable] {
        background-color        : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    }
    & th,
    & td {
        border                  : 1px solid #eee;
        padding                 : 0.25em;
    }
    & td.adjusted {
        background-color        : hsl(26, 79%, 44%);
    }
}

.bgr_tops {
    & div {
        margin-left: 1em;
        font-size: 0.8em;
    }
    & img {
        border-radius: 1em;
    }
}

.tops_wrapper {
    margin                      : 3em 0;
}

.peaks_table {
    /*border                      : 2px solid hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-darker));*/
    border-collapse             : collapse;
    margin                      : 2em 0;
    font-family                 : sans-serif;
    font-size                   : 0.9em;
    & thead {
        background-color        : hsl(var(--primary-hue-default), var(--primary-sat-default), 35%);
        color                   : #eee;
        & th {
            padding             : 0.5em;
        }
    }
    tr {
        &:nth-child(even) {
            background-color    : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-darker));
        }
        & td {
            padding: 0.25em 0.5em;
        }
    }

}

/* Carousel
    rules taken from https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Overflow/Carousels
*/
ul.carousel {
    width                         : 600px;
    height                        : 400px;
    padding                       : 20px;
    display                       : flex;
    gap                           : 4vw;
    overflow                      : scroll;
    scroll-snap-type              : x mandatory;
    anchor-name                   : --my-carousel;
    scroll-marker-group           : after;

    &::scroll-button(*) {
        border                    : 0;
        font-size                 : 2rem;
        background                : none;
        color                     : black;
        opacity                   : 0.7;
        cursor                    : pointer;
    }

    &::scroll-button(*):hover,
    &::scroll-button(*):focus {
        opacity                   : 1;
    }

    &::scroll-button(*):active {
        translate                 : 1px 1px;
    }

    &::scroll-button(*):disabled {
        opacity                   : 0.2;
        cursor                    : unset;
    }
    &::scroll-button(left) {
        content                   : "◄" / "Previous";
    }

    &::scroll-button(right) {
        content                   : "►" / "Next";
    }


    &::scroll-button(*) {
        position                  : absolute;
        position-anchor           : --my-carousel;
    }
    &::scroll-button(left) {
        right                     : calc(anchor(left) - 70px);
        bottom                    : calc(anchor(top) + 13px);
    }

    &::scroll-button(right) {
        left                      : calc(anchor(right) - 70px);
        bottom                    : calc(anchor(top) + 13px);


    &::scroll-marker-group
        position                  : absolute;
        position-anchor           : --my-carousel;
        top                       : calc(anchor(bottom) - 70px);
        justify-self              : anchor-center;

        display                   : flex;
        justify-content           : center;
        gap                       : 20px;
    }

    & li {
        list-style-type           : none;
        scroll-snap-align         : center;

        flex                      : 0 0 100%;

        &::scroll-marker {
            content               : attr(data-accName);
            width                 : 16px;
            height                : 16px;
            background-color      : transparent;
            border                : 2px solid black;
            border-radius         : 50%;
            overflow              : hidden;
            text-indent           : 16px;
        }
        &::scroll-marker:target-current {
            background-color      : black;
        }
    }
}

wc-carousel-lite {
    width                         : 600px;
    margin                        : auto;
    height                        : 400px;
    background-color              : inherit;
    border                        : none;
    display                       : flex;
    & div {
        background-color          : inherit;
        border                    : none;
    }
    .item {
        border-radius             : 1em;
        margin-left               : 20px;
        margin-right              : 20px;
  }
}
.carousel_wrapper {
    position: relative;
}

.carousel_item {
        border-radius             : 1em;
        margin-left               : 20px;
        margin-right              : 20px;
}

.carousel_caption {
    display                       : flex;
    justify-content               : center;
    margin                        : 0.5em auto;
}

.indicators {
    position                      : relative;
    bottom                        : 5%;
    left                          : 50%;
    transform                     : translateX(-50%);
    display                       : flex;
    justify-content               : center;
    /*font-size                     : 1.5rem;*/

    span {
        background-color          : #fff;
        cursor                    : pointer;
        opacity                   : 0.3;
        transition                : all 0.3s ease;
        width                     : 15px;
        aspect-ratio              : 1;
        border-radius             : 50%;
        margin                    : 0.5em;
    }
}
.active_indicator {
    opacity                       : 1 !important;
}


.controls {
    display                       : flex;
    justify-content               : center;
    background                    : inherit;
    border                        : none;
    & button {
        margin                    : 0.5em 1em;
        padding                   : 0.5em 0.75em;
        border-radius             : 100%;
    }
}


/* menu and sub-menu styling */
body.home .topnav,
body.bob_graham .topnav,
body.climbing .topnav,
body.biking .topnav,
body.walking .topnav,
body.tarps .topnav {
    background-color          : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
    color                     : hsl(var(--primary-hue-default), var(--primary-sat-default), var(--primary-light-lighter));
}

body.home a.home_link,
body.bob_graham a.bobgraham_link,
body.climbing a.climbing_link,
body.biking a.biking_link,
body.walking a.walking_link,
body.tarps a.tarps_link {
    background-color          : #ddd;
    color                     : hsl(var(--secondary-hue-default), var(--secondary-sat-default), var(--secondary-light-default));
}

.active_page {
    background-color          : #ddd;
}