@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8;
    color: #171622;
}

/* the <main> of every page is always the direct child
   right after the injected header — let it grow so the
   footer below it gets pushed to the bottom on short pages */
body > main {
    flex: 1 0 auto;
}


/* =========================
   AD SLOTS (placeholders)
   Reusable ad container used across all pages.
   Swap the inner markup with real ad code
   (AdSense, etc.) when ready — the box itself
   already reserves the right responsive space.
========================= */

.ad-slot {
    width: 100%;
    max-width: 970px;
    margin: 40px auto;
    padding: 18px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;

    background: repeating-linear-gradient(
        45deg,
        #f8f8fc,
        #f8f8fc 10px,
        #f2f2f8 10px,
        #f2f2f8 20px
    );
    border: 2px dashed #b9b9d0;
    border-radius: 10px;

    color: #8888a0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
}

/* Large "leaderboard" style banner (top / bottom of a page) */
.ad-slot--banner {
    min-height: 90px;
}

/* Bigger in-content block (between sections / lesson rows) */
.ad-slot--wide {
    min-height: 250px;
}

/* Sidebar rail slot (see .ad-rail below) */
.ad-slot--rail {
    width: 100%;
    height: 100%;
    min-height: 400px;
    margin: 0;
}

@media (max-width: 650px) {

    .ad-slot {
        margin: 25px auto;
        font-size: 11px;
        min-height: 70px;
    }

    .ad-slot--wide {
        min-height: 200px;
    }
}


/* =========================================================
   PAGE TOC — fixed sidebar (site-wide)
   Built automatically by js/section-toc.js on EVERY page.
   It finds the page's main sections (.hero, .level-section,
   .semester, .course-section, or any [data-toc-section]) and
   links to them. Only shown once the viewport is wide enough
   that it sits in the margin next to the centered content —
   see the max-width values used across this stylesheet
   (they stay flat at large sizes on purpose, so this margin
   only ever grows, never shrinks, and the sidebar never
   overlaps the content or gets squeezed on tablets/phones).
========================================================= */

.page-toc {
    position: fixed;
    top: 110px;
    right: 24px;
    width: 200px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;

    padding: 16px 16px 18px;
    box-sizing: border-box;

    background-color: #ffffff;
    border: 2px solid #242244;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(36, 34, 68, 0.12);

    z-index: 500;
    display: none;
}

.page-toc h4 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ff8800;
    border-bottom: 2px solid #f0f0f5;
}

.page-toc ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-toc a {
    display: block;
    padding: 7px 10px;
    border-left: 3px solid transparent;
    border-radius: 6px;

    color: #242244;
    font-size: 13.5px;
    line-height: 1.4;
    text-decoration: none;

    transition: 0.2s;
}

.page-toc a:hover {
    background-color: #f8f8fc;
    border-left-color: #c1670a;
}

.page-toc a.is-active {
    background-color: #fff4e8;
    border-left-color: #ff8800;
    color: #c1670a;
    font-weight: 600;
}

/* Only show it once there's real room in the margin */
@media (min-width: 1700px) {

    .page-toc {
        display: block;
    }
}

@media (min-width: 2200px) {

    .page-toc {
        right: 50px;
        width: 230px;
    }

    .page-toc a {
        font-size: 15px;
    }
}


/* =========================
   HEADER
========================= */

body > header:has(.navbar) {
    width: 100%;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #ececf3;
    box-shadow: 0 2px 16px rgba(23, 22, 34, 0.06);
}

.navbar {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 50px;
}

.Main-page {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    color: #242244;
    transition: 0.25s;
}

.Main-page::before {
    display: none;
}

.header-logo {
    width: 34px;
    height: 34px;
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.Main-page:hover {
    color: #ff8800;
}

.navigation {
    display: flex;
    gap: 4px;
    list-style: none;
    align-items: center;
}

.navigation a {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 8px;

    text-decoration: none;
    color: #4a4864;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.1px;

    transition: 0.2s ease;
}

.navigation a:hover {
    color: #ff8800;
    background-color: #fff5e9;
}


/* =========================
   BREADCRUMB
   Injecté par js/components.js juste après le
   header, sur TOUTES les pages (même emplacement
   partout — voir SiteBreadcrumb dans components.js).
   Caché par défaut ([hidden]) tant qu'aucune page
   n'a fourni de trail.
========================= */

.site-breadcrumb {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 50px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    background-color: #f8f8f8;
}

.site-breadcrumb[hidden] {
    display: none;
}

.site-breadcrumb-item {
    padding: 2px 1px;
    color: #ff8800;
    text-decoration: none;
    font-weight: 600;
}

.site-breadcrumb-item:hover {
    text-decoration: underline;
}

.site-breadcrumb-item[aria-current="page"] {
    color: #4a4864;
    font-weight: 600;
    cursor: default;
}

.site-breadcrumb-item[aria-current="page"]:hover {
    text-decoration: none;
}

.site-breadcrumb-sep {
    color: #c4c4d6;
    margin: 0 2px;
}

@media (max-width: 650px) {
    .site-breadcrumb {
        padding: 10px 18px;
        font-size: 12.5px;
        gap: 4px;
    }
}


/* =========================
   HERO
========================= */

.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 15px;
    color: #ff8800;
}

.hero p {
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.7;
    color: #ff8800;
}


/* =========================
   SUBJECT CARDS
========================= */

.subjects {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.subject {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #171622;
    transition: 0.3s;
}

.subject-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #ff8800;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42px;
    transition: 0.3s;
}

.subject span {
    font-size: 18px;
    font-weight: 600;
}

.subject:hover {
    transform: translateY(-6px);
}

.subject:hover .subject-circle {
    transform: scale(1.08);
    background-color: #242244;
}

.subject:hover span {
    color: #ff8800;
}


/* =========================
   COURSES PAGE
========================= */

.courses-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
}

/* Les cartes "niveau" partagées avec exercises.html / quiz.html /
   devoirs.html doivent garder leur alignement d'origine (gauche) et
   ne pas hériter du text-align:center de .courses-page. */
.courses-page .exercise-card {
    text-align: left;
}

.courses-page > h1 {
    font-size: 42px;
    color: #ff8800;
    margin-bottom: 60px;
}

.level-section {
    margin-bottom: 70px;
}

.level-section h2 {
    font-size: 28px;
    color: #171622;
    margin-bottom: 35px;
}

.level-section h2 span {
    font-size: 22px;
    font-weight: 500;
    color: #ff8800;
}


/* =========================
   LEVEL CARDS
========================= */

.level-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 35px;
}

.level-card {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #171622;
    transition: 0.3s;
}

.level-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #ff8800;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    transition: 0.3s;
}

.level-card span {
    font-size: 17px;
    font-weight: 600;
}

.level-card small {
    font-size: 14px;
    color: #666666;
}

.level-card:hover {
    transform: translateY(-7px);
}

.level-card:hover .level-circle {
    background-color: #242244;
    transform: scale(1.08);
}

.level-card:hover span {
    color: #ff8800;
}


/* =========================
   LESSONS PAGE
========================= */

.lessons-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

.lessons-page > h1 {
    text-align: center;
    color: #ff8800;
    font-size: 38px;
    margin-bottom: 10px;
    position: relative;
    background-color: #fff8f0;
    width: 100vw;
    margin-top: -50px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 40px 20px 55px;
    box-sizing: border-box;
}

.lessons-page > h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C240,80 480,80 720,48 C960,16 1200,16 1440,48 L1440,90 L0,90 Z' fill='%23f8f8f8'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.lessons-page-ar {
    text-align: center;
    color: #666666;
    font-size: 21px;
    margin-bottom: 55px;
}

.semester {
    margin-bottom: 60px;
}

.semester > h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    font-size: 28px;
    color: #171622;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #242244;
}

.semester > h2 span {
    color: #ff8800;
    font-size: 18px;
    font-weight: 500;
}

/* NOTE (Courses Ruler Hierarchy redesign) : ".lesson-list" /
   ".lesson-row" et tout ce qui suit jusqu'à leurs media queries
   ne sont plus utilisés par courses/level.html (voir
   courses/js/courses-level-page.js + courses/css/level-page-
   rulers.css pour le nouveau design "Rulers", seul et unique
   design des Level pages Courses désormais). Il reste UN seul
   consommateur, volontaire et documenté : la page historique
   college/Physique/3eme-annee.html (voir courses/js/
   courses-routing.js, STATIC_LEVEL_PAGES) — son contenu n'a
   aucune donnée JSON dans courses/data/ à migrer, donc ni la
   supprimer ni la "migrer" n'est possible sans perdre ou
   inventer du contenu. Ces règles restent donc en usage réel,
   pas mortes, seulement réduites à cette unique page. */
.lesson-list {
    max-width: 850px;
    margin: 0 auto;
}

.lesson-row {
    display: grid;
    grid-template-columns: 1fr 210px;
    min-height: 165px;
    border: 2px solid #ececf3;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
    background-color: #ffffff;
    transition: 0.3s ease;
}

.lesson-row:hover {
    border-color: #c1670a;
    box-shadow: 0 18px 32px rgba(36, 34, 68, 0.1);
}

.lesson-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 28px 30px;
    text-align: center;
    background-color: #fff8f0;
    transition: 0.3s ease;
}

.lesson-info h3 {
    margin-bottom: 10px;
    font-size: 21px;
    color: #242244;
    transition: 0.3s ease;
}

.lesson-info h3::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin: 10px auto 0;
    background-color: #ff8800;
    border-radius: 2px;
    transition: 0.3s ease;
}

.lesson-info p {
    font-size: 17px;
    color: #666666;
    transition: 0.3s ease;
}

.lesson-info:hover {
    background-color: #ffe4bf;
}

.lesson-info:hover h3 {
    color: #412304;
}

.lesson-info:hover h3::after {
    width: 54px;
}

.lesson-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px 14px;
    background-color: #fff8f0;
    border-left: 2px solid #ececf3;
}

.lesson-actions a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    color: #171622;
    background-color: #ffffff;
    border: 2px solid #ececf3;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.25s ease;
}

.lesson-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: #fff8f0;
    font-size: 15px;
    transition: 0.25s ease;
}

.lesson-action-label {
    transition: 0.25s ease;
}

.lesson-actions a:hover {
    border-color: #ff8800;
    color: #ff8800;
    transform: translateX(4px);
    box-shadow: 0 10px 20px rgba(36, 34, 68, 0.12);
}

.lesson-actions a:hover .lesson-action-icon {
    background-color: #ff8800;
    color: #ffffff;
    transform: scale(1.08);
}


/* =========================
   TABLET — GENERAL
========================= */

@media (max-width: 900px) {

    .navbar {
        padding: 16px 30px;
    }

    .navigation {
        gap: 2px;
    }

    .navigation a {
        padding: 8px 12px;
    }

    .Main-page {
        font-size: 21px;
    }

    .header-logo {
        width: 30px;
        height: 30px;
        max-width: 30px;
        max-height: 30px;
    }

    .subjects {
        gap: 15px;
    }

    .subject {
        width: 160px;
    }

    .subject-circle {
        width: 110px;
        height: 110px;
        font-size: 36px;
    }

    .courses-page > h1 {
        font-size: 36px;
    }

    .level-cards {
        gap: 20px;
    }

    .level-card {
        width: 160px;
    }

    .level-circle {
        width: 110px;
        height: 110px;
        font-size: 24px;
    }

    .lesson-list,
    .semester > h2 {
        max-width: 750px;
    }

    .lesson-row {
        grid-template-columns: 1fr 185px;
    }

    .lesson-info h3 {
        font-size: 19px;
    }

    .lesson-actions {
        padding: 12px 10px;
        gap: 8px;
    }

    .lesson-actions a {
        font-size: 13.5px;
        padding: 7px 8px;
    }

    .lesson-action-icon {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}


/* =========================
   MOBILE — GENERAL
========================= */

@media (max-width: 650px) {

    .navbar {
        flex-direction: column;
        gap: 12px;
        padding: 14px 20px;
    }

    .Main-page {
        font-size: 21px;
    }

    .header-logo {
        width: 28px;
        height: 28px;
        max-width: 28px;
        max-height: 28px;
    }

    .navigation {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .navigation a {
        font-size: 13.5px;
        padding: 7px 12px;
    }

    .hero {
        padding: 40px 15px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 15px;
        margin-bottom: 35px;
    }

    .subjects {
        flex-wrap: wrap;
        gap: 25px 10px;
    }

    .subject {
        width: 140px;
    }

    .subject-circle {
        width: 100px;
        height: 100px;
        font-size: 32px;
    }

    .subject span {
        font-size: 16px;
    }

    .courses-page {
        padding: 40px 15px;
    }

    .courses-page > h1 {
        font-size: 32px;
        margin-bottom: 45px;
    }

    .level-section {
        margin-bottom: 55px;
    }

    .level-section h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .level-section h2 span {
        font-size: 18px;
    }

    .level-cards {
        flex-wrap: wrap;
        gap: 30px 10px;
    }

    .level-card {
        width: 140px;
    }

    .level-circle {
        width: 100px;
        height: 100px;
        font-size: 21px;
    }

    .level-card span {
        font-size: 15px;
    }

    .level-card small {
        font-size: 12px;
    }

    .lessons-page {
        padding: 40px 15px;
    }

    .lessons-page > h1 {
        margin-top: -40px;
    }

    .lessons-page > h1 {
        font-size: 28px;
    }

    .lessons-page-ar {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .semester > h2 {
        max-width: 100%;
        font-size: 23px;
    }

    .semester > h2 span {
        font-size: 15px;
    }

    .lesson-list {
        max-width: 100%;
    }

    .lesson-row {
        grid-template-columns: 1fr 130px;
        min-height: 150px;
    }

    .lesson-info {
        padding: 20px 10px;
    }

    .lesson-info h3 {
        font-size: 16px;
    }

    .lesson-info p {
        font-size: 14px;
        color: #666666;
    }

    .lesson-actions {
        padding: 10px 8px;
        gap: 6px;
    }

    .lesson-actions a {
        gap: 8px;
        padding: 6px 8px;
        font-size: 12.5px;
    }

    .lesson-action-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}


/* =========================
   VERY SMALL PHONES (≤ 480px)
========================= */

@media (max-width: 480px) {

    .navbar {
        padding: 12px 15px;
    }

    .Main-page {
        font-size: 19px;
    }

    .header-logo {
        width: 26px;
        height: 26px;
        max-width: 26px;
        max-height: 26px;
    }

    .navigation {
        gap: 6px 8px;
    }

    .navigation a {
        font-size: 12.5px;
        padding: 6px 10px;
    }

    .hero {
        padding: 30px 12px;
    }

    .hero h1 {
        font-size: 26px;
    }

    .hero p {
        font-size: 14px;
        margin-bottom: 28px;
    }

    .subjects {
        gap: 20px 8px;
    }

    .subject {
        width: 42%;
        min-width: 120px;
    }

    .subject-circle {
        width: 85px;
        height: 85px;
        font-size: 28px;
    }

    .subject span {
        font-size: 14px;
    }

    .courses-page > h1 {
        font-size: 26px;
        margin-bottom: 35px;
    }

    .level-cards {
        gap: 25px 8px;
    }

    .level-card {
        width: 42%;
        min-width: 120px;
    }

    .level-circle {
        width: 85px;
        height: 85px;
        font-size: 18px;
    }

    .lessons-page-ar {
        font-size: 16px;
    }

    .semester > h2 {
        font-size: 19px;
    }

    /* Stack the lesson row on very narrow screens instead of
       squeezing the actions column into an unreadable width */
    .lesson-row {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .lesson-info {
        padding: 18px 14px;
    }

    .lesson-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        border-left: none;
        border-top: 2px solid #ececf3;
        padding: 10px 6px;
        gap: 6px;
    }

    .lesson-actions a {
        flex: 1 1 0;
        flex-direction: column;
        gap: 4px;
        padding: 8px 2px;
        font-size: 10.5px;
        text-align: center;
    }

    .lesson-action-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}


/* =========================
   ULTRA SMALL PHONES (≤ 360px)
========================= */

@media (max-width: 360px) {

    .Main-page {
        font-size: 17px;
    }

    .header-logo {
        width: 24px;
        height: 24px;
        max-width: 24px;
        max-height: 24px;
    }

    .navigation a {
        font-size: 11.5px;
        padding: 5px 8px;
    }

    .hero h1 {
        font-size: 22px;
    }

    .subject,
    .level-card {
        width: 100%;
    }

    .lesson-actions {
        padding: 8px 4px;
        gap: 4px;
    }

    .lesson-actions a {
        padding: 6px 2px;
        font-size: 9.5px;
    }

    .lesson-action-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
}


/* =========================
   LARGE DESKTOPS / 4K (≥ 1600px)
========================= */

@media (min-width: 1600px) {

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        max-width: 800px;
        font-size: 18px;
    }

    .courses-page > h1,
    .lessons-page > h1 {
        font-size: 46px;
    }

    .lesson-list,
    .semester > h2 {
        max-width: 950px;
    }

    .subject-circle,
    .level-circle {
        width: 145px;
        height: 145px;
    }
}


/* =========================
   4K & ULTRA-WIDE (≥ 2200px)
========================= */

@media (min-width: 2200px) {

    body {
        font-size: 19px;
    }

    .hero h1 {
        font-size: 58px;
    }

    .hero p {
        max-width: 900px;
        font-size: 21px;
    }

    .courses-page > h1,
    .lessons-page > h1 {
        font-size: 54px;
    }

    .lesson-list,
    .semester > h2 {
        max-width: 1100px;
    }

    .lesson-row {
        min-height: 190px;
    }

    .lesson-info h3 {
        font-size: 24px;
    }

    .lesson-info p {
        font-size: 19px;
    }

    .subject-circle,
    .level-circle {
        width: 160px;
        height: 160px;
        font-size: 46px;
    }
}


/* =========================
   FOOTER (shared, injected by js/components.js
   on every page — edit here, changes everywhere)
========================= */

.site-footer {
    flex-shrink: 0;
    margin-top: 70px;
    background-color: #242244;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px 50px 30px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 10px;

    color: #ff8800;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.footer-logo:hover {
    color: #ffffff;
}

.footer-tagline {
    color: #c7c6da;
    font-size: 14px;
    line-height: 1.8;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.footer-links a {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #ff8800;
}

.footer-bottom {
    padding: 18px 50px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.footer-bottom p {
    color: #9c9bb5;
    font-size: 13px;
}

@media (max-width: 900px) {

    .footer-inner {
        padding: 35px 30px 25px;
    }

    .footer-bottom {
        padding: 16px 30px 20px;
    }
}

@media (max-width: 650px) {

    .site-footer {
        margin-top: 50px;
    }

    .footer-inner {
        padding: 30px 20px 22px;
        flex-direction: column;
        gap: 22px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-tagline {
        font-size: 13px;
    }

    .footer-links {
        gap: 10px 20px;
    }

    .footer-links a {
        font-size: 14px;
    }

    .footer-bottom {
        padding: 14px 20px 18px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}