@import url(../css/variables.css);

.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;

    align-items: start;
}

/* =========================
   SIDEBAR STICKY
========================= */

#blog-sidebar {
    position: sticky;
    top: 90px;

    width: 100%;
    align-self: start;
}

/* =========================
   WIDGETS
========================= */

.sidebar-widget {
    margin-bottom: 40px;
}

.sidebar-title {
    color: var(--color-title);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;

    margin-bottom: 16px;
    padding-bottom: 12px;

    border-bottom: 1px solid var(--color-divider-border);
}

.sidebar-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-widget li {
    padding: 8px 0;
}

.sidebar-widget a {
    text-decoration: none;
    color: var(--color-paragraphe);
    font-size: 14px;

    transition: color .2s ease;
}

.sidebar-widget a:hover {
    color: #000;
}

/* =========================
   TAGS
========================= */

.sidebar-widget-tags {
    margin-top: 40px;
}

.sidebar-title-tags {
    color: var(--color-title);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;

    margin-bottom: 20px;
    padding-bottom: 12px;

    border-bottom: 1px solid var(--color-divider-border);
}

.sidebar-widget-tags .tag-cloud-link {
    display: inline-flex;
    align-items: center;

    margin: 0 8px 8px 0;
    padding: 6px 12px;

    background: var(--color-tags);
    border-radius: 999px;

    color: var(--color-texte-tags);
    font-family: var(--font-text);
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1;

    text-decoration: none;
    transition: all .2s ease;
}

.sidebar-widget-tags .tag-cloud-link:hover {
    background: #dd4c5c;
    color: #fff;
}

/* =========================
   NEWSLETTER
========================= */

.sidebar-widget-newsletter {
    background: #fff0f2;
    border: 1px solid #f0e6e6;
    border-radius: 12px;

    padding: 24px 20px;
    margin-top: 32px;
}

.sidebar-title-newsletter {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-title);

    margin-bottom: 12px;
}

.sidebar-widget-newsletter p {
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--color-paragraph);

    margin-bottom: 16px;
}

.sidebar-widget-newsletter .newsletter-form input[type="email"] {
    width: 100%;

    padding: 10px 14px;
    margin-bottom: 12px;

    border: 1px solid #e3dedc;
    border-radius: 25px;

    font-family: var(--font-text);

    box-sizing: border-box;
}

.sidebar-widget-newsletter .newsletter-form button {
    width: 100%;
    padding: 10px 0;

    background: var(--color-link);
    color: #fff;

    border: none;
    border-radius: 25px;

    font-family: var(--font-texte);
    font-size: 14px;

    cursor: pointer;
    transition: background .2s ease;
}

.sidebar-widget-newsletter .newsletter-form button:hover {
    background: #a03f4d;
}

/* =========================
   MOBILE / TABLETTE
========================= */

@media (max-width: 1023px) {

    .content-layout {
        grid-template-columns: 1fr;
    }

    #blog-sidebar {
        position: static;
        top: auto;
    }
}