/*
 * First, for consistency, we set sane default for all main selector
 *
 * For readibility, we avoid too many nesting.
 *
 * We scope only minimal tag (ex "a", insted of "main a"), so it will be easy
 * to override with a stricter css rule.
 *
 * TODO: we need a class, or id, or data-selector by "row", so we can theme by
 * context. Ex 2 row of products are "section t-product". It's not sufficient.
 */
html {
    font-family: var(--text-font-family);
    font-size: var(--root-font-size);
    overflow-wrap: break-word;

    @media (min-width: 768px) {
        font-size: calc(var(--root-font-size) + 1px);
    }
}

body,
html {
    background-color: var(--bg-color);
    color: var(--text-color);
}

blockquote {
    font-family: var(--quote-font-family);
    border-left: 2px solid var(--primary-color);
    padding-left: var(--spacer-default);
}

body {
    overflow-y: scroll;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "onepixelmsg" "header" "announcement" "flash" "main" "footer";

    & > main {
        grid-area: main;
    }
}

/* -------------------------------------
   Links use primary-color
------------------------------------- */
main ul a,
main a:not(.link1),
header ul a,
header a:not(.link1),
footer ul a,
footer a:not(.link1) {
    color: var(--primary-color);
}

/* disabled state */
.link1,
.linkalt,
button {
    &:disabled {
        opacity: 0.65;
    }
}

input,
textarea,
select {
    background: var(--input-bg);
}

/* -------------------------------------
    btn or custom link style
------------------------------------- */
.link1,
.linkalt {
    display: inline-block;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
    vertical-align: middle;
    user-select: none;
    border: 1px solid;
    border-radius: var(--default-radius);
    padding: 0.5rem 1rem;
    line-height: 1.5rem;
}

.link1 {
    color: var(--text-on-primary);
    background-color: var(--primary-color);
    border-color: var(--primary-color);

    &:hover {
        background-color: var(--primary-color-hover);
    }
}

.linkalt {
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid var(--text-color);

    &:hover {
        color: var(--text-on-primary);
        background-color: var(--primary-color);
    }
}

/* -------------------------------------
   Title use primary-color
   h1 & h2 use heading font.
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-color);
}

h1,
h2 {
    font-family: var(--heading-font-family);
    font-weight: 700;
    word-break: normal;
}

/* -------------------------------------
   Default content wrapper layout
------------------------------------- */
.content-wrapper {
    padding: var(--spacer-default);
    width: 100%;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    /* default content inside a content wrapper will be flex, column (responsive first) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer-default);
}

/* -------------------------------------
   Default section layout
------------------------------------- */
section {
    border-radius: 12px;
    overflow: hidden;

    /* PageRowTitle */
    &.pagerow.title {
        text-align: center;
    }

    &.pagerow {
        &:not(.hero) .content-wrapper .card {
            overflow: hidden;
        }

        /* container of pagerow is mostly a grid */
        /* Other default is flex as it cover special zone (header, footer, facet...) */
        & .content-wrapper {
            display: grid;
        }

        &.t-product li.card .title h2 {
            font-size: 1rem;
        }
    }
}

/* -------------------------------------
   Alert and global message
------------------------------------- */
#onepixelmsg {
    grid-area: onepixelmsg;
    margin-top: 0;
}

#announcement {
    grid-area: announcement;
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}

.message {
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;

    &-warning {
        background-color: var(--warning-color);
        color: #000;
    }
}

/* -------------------------------------
   Img
------------------------------------- */
img {
    max-width: 100%;
    border-radius: calc(2 * var(--default-radius));

    &.loaded {
        transition: opacity 1s;
        opacity: 1 !important;
    }
}

/* img caption */
.item-caption {
    margin: 0;
    text-align: center;
    font-size: var(--small-font-size);
}

/* -------------------------------------
    FLASH
------------------------------------- */
.flash {
    grid-area: flash;
    border-bottom-width: 0;
    border-bottom-style: solid;

    & .content-wrapper {
        gap: var(--spacer-xs);
        @media (min-width: 768px) {
            flex-direction: row;
            gap: var(--spacer-default);
            max-width: fit-content;
        }
        & .flash-svg {
            height: 32px;
        }

        & .flash-message > * {
            word-break: break-all;
        }
    }
}

/* -------------------------------------
    FILTER BAR
------------------------------------- */
form:has(#filter-bar) {
    padding-left: var(--spacer-default);
    padding-right: var(--spacer-default);
}

#filter-bar {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--default-radius);
    border: 1px solid var(--primary-color);

    summary {
        padding: 10px;

        & span {
            margin-right: 20px;
            margin-left: 20px;
        }
    }

    .filter-body {
        display: flex;
        flex-direction: column;
        padding: var(--spacer-default);
        gap: 20px;
        .filter-sort-fields,
        .filter-actions {
            display: flex;
            gap: 20px;
            flex-direction: column;
        }

        .filters-fields div,
        .sorts-fields div {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        @media (min-width: 768px) {
            .filter-sort-fields {
                flex-direction: row;
                > div {
                    flex: 1;
                }
            }
        }

        .filter-actions {
            flex-direction: row;
            align-self: flex-end;
        }

        input,
        select {
            appearance: none;
            border-radius: 0;
            color: var(--text-color);
            appearance: none;
            padding: var(--spacer-default);
            border: 1px solid var(--text-color);
            border-radius: var(--default-radius);
            text-overflow: ellipsis;
            /* prevent overflow of the select */
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* manage very small screens */
        @media screen and (max-width: 360px) {
            font-size: var(--small-font-size);
        }
    }
}

/* -------------------------------------
   PAGE WITH LISTING
------------------------------------- */
body[data-selector="homepage"],
body[data-selector="all-products-page"],
body[data-selector="product-list"] {
    section.pagerow.t-product {
        .content-wrapper {
            grid-template-columns: 1fr;
            gap: var(--spacer-xxl); /* more room ... */
            /* listing of product is bigger */
            max-width: 1080px;
            align-items: start;

            @media (min-width: 768px) {
                grid-template-columns: 1fr 1fr 1fr;

                /* if only one item */
                &:has(> li:first-child:nth-last-child(1)),
                &:has(> div:first-child:nth-last-child(1)) {
                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
                    .card {
                        grid-column: 3 / 5;
                    }
                }

                /* if two items */
                &:has(li:first-child:nth-last-child(2)) {
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    > li:first-of-type {
                        grid-column-start: 2;
                    }
                }
            }

            @media (min-width: 1080px) {
                grid-template-columns: 1fr 1fr 1fr 1fr;

                /* if only one item */
                &:has(> li:first-child:nth-last-child(1)),
                &:has(> div:first-child:nth-last-child(1)) {
                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                    .card {
                        grid-column: 4 / 6;
                    }
                }

                /* if é items */
                &:has(li:first-child:nth-last-child(2)) {
                    > li:first-of-type {
                        grid-column-start: 2;
                    }
                }

                /* if 3 items */
                &:has(li:first-child:nth-last-child(3)) {
                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                    > li:first-of-type {
                        grid-column-start: 2;
                    }
                }
            }
        }

        /* TODO: see #1948, we need a twig valid for our shop that does not
         * require thos kind of update by default */
        .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;

            & .title {
                order: 2;
            }

            & .main_media {
                order: 1;
            }

            & .content {
                order: 3;
            }

            & .content,
            & .main_media {
                flex-basis: 100%;
            }

            & .content {
                align-self: center;
            }
        }
    }
}

/* -------------------------------------
   SHOP PRODUCT (alone): mirror effect
------------------------------------- */
body[data-selector="product-content"] {
    section.pagerow.t-content_alone {
        .content-wrapper .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;

            & div:nth-child(1),
            & div:nth-child(2) {
                flex-basis: 50%;
            }

            & .content,
            & .main_media {
                flex-basis: 100%;
            }

            & .content {
                align-self: center;
            }

            @media (min-width: 768px) {
                max-width: 768px;
                margin-left: auto;
                margin-right: auto;
                flex-direction: row;
            }
        }
    }
}

body[data-selector="blog-list"] {
    section.pagerow.t-product {
        .content-wrapper {
            grid-template-columns: 1fr;
        }

        .content-wrapper .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: left;
            gap: var(--spacer-xl);

            @media (min-width: 768px) {
                flex-direction: row;
            }

            & .title {
                order: 2;
            }

            & .main_media {
                order: 1;
            }

            & .content {
                order: 3;
            }

            & .content,
            & .main_media {
                flex-basis: 100%;
            }

            & .content {
                align-self: center;
            }
        }
    }
}

/* Product listing are ul, need accessibility */
ul.content-wrapper {
    list-style: none;
    list-style-type: "";
}

/* -------------------------------------
   Product alone img carousel
------------------------------------- */
.product-carousel {
    max-width: 500px;
    margin: 20px auto;
}

.big-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 1px solid var(--text-color);
}

.thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.thumbnails img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--default-radius);
    transition: border-color 0.3s;
}

.thumbnails img.active {
    border-color: var(--primary-color);
}

.view-page #add-to-cart button[type="submit"] {
    margin-top: 20px;
}

.tags {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-sm);
    margin-bottom: 20px;
    margin-top: var(--spacer-xxl);
    margin-bottom: var(--spacer-xxl);
    a {
        text-transform: capitalize;
    }
}

/* -------------------------------------
   Forms
------------------------------------- */
form {
    #contact_form_opx-as-blackhole {
        display: none;
    }

    &[name="add_to_cart_form"],
    &[name="cart_contact_form"],
    &[name="i18n_switcher"],
    &[name="contact_form"] {
        & div {
            margin-bottom: 20px;
        }

        & input,
        & textarea {
            margin-top: 10px;
            appearance: none;
            width: 100%;
            border: 1px solid var(--primary-color);
            border-radius: var(--default-radius);
            color: var(--text-color);
            padding: var(--spacer-sm);
            box-sizing: border-box;
        }

        & select {
            appearance: none;
            width: 100%;
            padding: var(--spacer-sm);
            /* text not overflow arrow */
            padding-right: calc(var(--spacer-default) * 2);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: var(--spacer-default);
            background-position: right 0.75rem center;
            border: 1px solid var(--primary-color);
            border-radius: var(--default-radius);
        }
        select[name="item-variant"] {
            margin-bottom: var(--spacer-sm);
        }
    }
}

/* -------------------------------------
   Header style
------------------------------------- */
body > header {
    /* Wee need 100% so first it stretch, then it narrowed following other rules. */
    width: 100%;
    grid-area: header;
    background: var(--bg-color);

    .content-wrapper {
        display: flex;
        align-items: center;
        box-sizing: border-box;

        #nav-action {
            display: flex;
        }
    }

    a {
        text-decoration: none;
    }

    /* Logo */
    .logo {
        z-index: 1;
        font-family: var(--heading-font-family);

        @media (min-width: 768px) {
            display: flex;
        }

        img {
            width: auto; /* to avoid the logo to be streched */
            max-height: var(--logo-size);

            @media (min-width: 768px) {
                max-height: var(--logo-size-from-tablet);
            }
        }
    }

    /* nav bar is hide for smartphone ,    show from tablet */
    nav.main-nav-menu:not(.is-uncollapsed) {
        display: none;

        @media (min-width: 768px) {
            display: flex;
            align-items: center;
            padding: 0;
        }
    }

    nav {
        ul {
            /* Remember accessiblity https://developer.mozilla.org/fr/docs/Web/CSS/list-style#accessibilit%C3%A9 */
            /* https://www.havardbrynjulfsen.design/writing/tips/a-new-way-to-remove-list-styles-in-safari/ */
            list-style: none;
            list-style-type: "";
            padding: 0;
            align-items: center;

            li {
                padding: 0 calc(0.5 * var(--spacer-default));
            }

            @media (min-width: 768px) {
                display: flex !important;
            }
        }
    }
    &.h-sticky,
    &.h-fixed {
        position: sticky;
        top: 0;
        z-index: 100;
        /* add transition for smooth effect on header if data-cs-start exists. */
        /* see header.html.twig */
        transition:
            color 500ms ease-in-out,
            background-color 500ms ease-in-out;
        .btn {
            transition:
                color 500ms ease-in-out,
                background-color 500ms ease-in-out;
        }
    }

    &.h-fixed {
        position: fixed;
    }

    /* Cart button */
    .header-cart {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        font-weight: 500;
        text-decoration: none;

        &:hover {
            color: var(--text-color);
        }

        &[data-count]::after {
            content: attr(data-count);
            display: inline-block;
            background-color: var(--primary-color);
            color: var(--text-on-primary);
            font-weight: bold;
            border-radius: var(--default-radius);
            text-align: center;
            padding: 0 var(--spacer-sm);
        }
    }
}

header.menulogoleft,
header.menulogoright,
header.menudefault {
    .content-wrapper {
        flex-direction: row;
        font-family: var(--text-font-family);

        nav {
            ul {
                margin: 0;

                @media (min-width: 768px) {
                    padding: 0;
                }
            }
        }
    }
}

header.menulogoleft,
header.menulogoright,
header.menudefault {
    .content-wrapper {
        nav.is-uncollapsed ul {
            padding-top: var(--spacer-default);
            padding-bottom: var(--spacer-default);
        }

        /* logo */
        .logo {
            align-items: center;
        }
    }
}

/* prevent scrolling when menu is open */
body:has(.main-nav-menu.is-uncollapsed) {
    overflow: hidden;
}

/* Design for js (hwjs: header with js. For no js, see nojs.css @import) */
.hwjs {
    .navbar-toggle-btn {
        display: block;
        align-self: center;
        margin-right: 0;

        /* same code as in mixins/_buttons.scss */
        /* new-button-base */
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        white-space: normal;
        user-select: none;
        border-radius: 0;

        /* button-builder */
        display: flex;
        align-items: center;

        background-color: transparent;
        border: none;

        &:hover {
            color: var(--primary-color);
            border-color: transparent;
        }

        width: fit-content;

        padding: 0 !important;
        height: fit-content;

        @media (min-width: 768px) {
            display: none;
        }

        .icon {
            color: var(--primary-color);
            width: 40px;
            margin-right: 0;
            vertical-align: bottom; /* align with site name. */
        }
    }

    .main-nav-menu {
        .header-nav {
            li a:has(img) {
                display: flex;
                align-items: center;
                gap: var(--spacer-sm);
            }
        }
    }

    /* hwjs : header with js */
    .main-nav-menu.is-uncollapsed {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        z-index: 10;
        width: 100vw;
        height: calc(
            100vh - 4.5rem
        ); /* This height will be overidden by the front-menu-toggle_controller.js. */
        position: absolute;
        margin: 0;
        padding: 0;
        top: 4.5rem; /* this should be the same space as header ? */
        left: 0;
        right: 0;
        opacity: 1;
        animation: fadeInOpacity 0.2s ease-in-out 1;
        overflow-y: hidden;
        background: var(--bg-color);
        color: var(--text-color);

        ul li {
            margin: 1rem;
        }

        .navbar-toggle-btn {
            margin-top: 0.2rem;
            border-radius: 0;
        }
    }
}

/* in pure css, it can't be nested */
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Theming menu header */
body > header.menulogoleft,
body > header.menulogoright,
body > header.menudefault {
    .logo {
        font-size: var(--h3-font-size);

        @media (min-width: 1080px) {
            font-size: var(--h2-font-size);
        }
    }
}

/*
*
* HEADER 2 lines.
* logo first line, and nav second line.
*
*/
header.menudefault {
    .navbar-toggle-btn {
        margin-left: var(--spacer-default);
    }
    .content-wrapper {
        @media (min-width: 768px) {
            flex-direction: column;
            gap: var(--spacer-default);
        }
    }

    #cta-fs {
        margin-left: calc(0.25 * var(--spacer-default));
        @media (min-width: 768px) {
            margin-left: 0;
        }
    }

    &.left {
        .content-wrapper {
            justify-content: space-between;
            @media (min-width: 768px) {
                align-items: flex-start;
            }
        }
    }

    &.center {
        .content-wrapper {
            @media (max-width: 768px) {
                justify-content: space-between;
            }
        }
    }

    &.space-between {
        .content-wrapper {
            justify-content: space-between;
            @media (min-width: 768px) {
                #nav-action {
                    width: 100%;
                }
            }
        }
    }

    &.right {
        .content-wrapper {
            justify-content: space-between;
            @media (min-width: 768px) {
                align-items: flex-end;
            }
        }
    }
}

/*
*
* HEADER NAVIGATION logo-left
* logo and nav
*
*/
body > header.menulogoleft {
    .navbar-toggle-btn {
        margin-left: var(--spacer-default);
    }

    #cta-fs {
        margin-left: calc(0.25 * var(--spacer-default));
    }

    &.space-between {
        .content-wrapper {
            justify-content: space-between;
        }
    }

    &.center {
        .content-wrapper {
            justify-content: space-between;
        }
    }

    &.right {
        .content-wrapper {
            justify-content: flex-end;
        }
    }
}

/*
*
* HEADER NAVIGATION Logo RIGHT
* logo and nav
*
*/
body > header.menulogoright {
    .navbar-toggle-btn {
        margin-right: var(--spacer-default);
    }

    #cta-fs {
        margin-right: calc(0.25 * var(--spacer-default));
    }

    &.space-between {
        .content-wrapper {
            justify-content: space-between;
        }
    }

    &.center {
        .content-wrapper {
            justify-content: space-between;
        }
    }

    &.right {
        .content-wrapper {
            justify-content: flex-end;
        }
    }
}
/* -------------------------------------
    Footer
------------------------------------- */
footer {
    grid-area: footer;
    font-size: var(--small-font-size);
    margin-top: var(--spacer-xxl);
    ul {
        list-style: none;
        list-style-type: "";
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: row;
        gap: var(--spacer-default);

        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .footer-sn {
        text-transform: capitalize;

        & svg {
            fill: var(--primary-color);
            width: auto;
            max-height: 2rem;
        }
    }
}