/* =========================================================
   Solage — Minimalisme moderne
   Fond gris très clair, cartes blanches, bordures 1px,
   ombres douces, un seul accent (violet).
   Toutes les valeurs sont pilotées par les variables ci-dessous.
   Échelle : 1rem = 16px (font-size root par défaut).
   ========================================================= */

:root {
    /* Palette */
    --bg:            #f7f7f8;   /* fond de page */
    --surface:       #ffffff;   /* cartes / inputs */
    --ink:           #1b1b1f;   /* texte principal */
    --muted:         #6f6f7a;   /* texte secondaire */
    --border-color:  #e6e6eb;   /* bordures hairline */
    --border-strong: #d4d4dc;   /* bordures au survol */

    --accent:        #7c3aed;   /* violet : actions primaires + cœur actif */
    --accent-dark:   #6d28d9;   /* violet foncé : survol des boutons accent */
    --accent-soft:   #f1ebfd;   /* teinte violette : avatars, focus, toasts */
    --accent-ink:    #ffffff;   /* texte sur fond accent */
    --hover:         #f2f2f4;   /* gris : survol liens / outils */
    --danger:        #dc2626;
    --danger-dark:   #b91c1c;
    --danger-ink:    #ffffff;

    /* Compat avec les SVG : --primary = encre, --secondary = surface */
    --primary:       var(--ink);
    --secondary:     var(--surface);
    --thirdColor:    var(--surface);
    --borderColor:   var(--border-color);

    /* Bordures */
    --bw:            0.0625rem; /* 1px */

    /* Rayons */
    --radius-sm:     0.375rem;  /* 6px */
    --radius-md:     0.625rem;  /* 10px */
    --radius-lg:     0.875rem;  /* 14px */
    --radius-pill:   624.9375rem;

    /* Ombres douces */
    --shadow-sm:     0 0.0625rem 0.125rem rgba(27, 27, 31, 0.06);
    --shadow-md:     0 0.125rem 0.5rem rgba(27, 27, 31, 0.08);
    --shadow-lg:     0 0.5rem 1.5rem rgba(27, 27, 31, 0.10);
    --shadow-accent: 0 0.25rem 0.75rem rgba(124, 58, 237, 0.25);
    --focus-ring:    0 0 0 0.1875rem var(--accent-soft);

    /* Espacement */
    --space-1:       0.25rem;
    --space-2:       0.5rem;
    --space-3:       0.75rem;
    --space-4:       1rem;
    --space-5:       1.25rem;
    --space-6:       1.5rem;
    --space-8:       2rem;
    --space-10:      2.5rem;

    /* Typographie — pile système, aucune dépendance externe */
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-base:  1rem;
    --fs-md:    1.125rem;
    --fs-lg:    1.25rem;
    --fs-xl:    1.5rem;
    --fs-2xl:   1.875rem;
    --fs-3xl:   2.5rem;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-bold:    600;
    --fw-black:   700;

    /* Layout */
    --content-max: 42rem;       /* 672px */
    --content-min: 20rem;       /* 320px */
    --sidebar-w:   18.75rem;    /* 300px */
    --sidebar-w-narrow: 4.5rem; /* 72px */
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    background-color: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    font-weight: var(--fw-black);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

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

a {
    color: var(--ink);
    text-decoration: none;
    font-weight: var(--fw-bold);
}

input {
    font-family: inherit;
    font-size: var(--fs-base);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.hidden {
    display: none;
}

.icon, svg {
    color: var(--ink);
    height:100%;
}

/* =========================================================
   Layout principal
   ========================================================= */

.main {
    display: flex;
    justify-content: center;
    align-self: center;
}

.postContainer {
    width: 100%;
    max-width: var(--content-max);
    min-width: var(--content-min);
    padding: var(--space-6) var(--space-4) var(--space-10);
}

/* =========================================================
   Sidebars
   ========================================================= */

.sidebars { position: relative; }

.sidebar {
    position: relative;
    min-width: var(--sidebar-w);
    height: 100vh;
}

.sidebarFixed {
    position: fixed;
    min-width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    height: 100vh;
    padding: var(--space-6) var(--space-5);
}

.sidebarFixed > .sidebarFixedContainer {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-md);
    width: 100%;
    height: 100%;
}

.sidebarFixed > .sidebarFixedContainer > li {
    width: 100%;
}

.menuLink {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    gap:var(--space-3);
    align-items: center;
    width: fit-content;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-medium);
    transition: background-color 0.15s ease;
}

.menuLink:hover {
    background-color: var(--hover);
}

.menuLink:first-child {
    margin-bottom: var(--space-4);
    background: none;
    pointer-events: none;
}

.sidebarMobile {
    display: none;
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: var(--surface);
    border-top: var(--bw) solid var(--border-color);
    box-shadow: 0 -0.125rem 0.5rem rgba(27, 27, 31, 0.06);
    z-index: 100;
}

.sidebarMobile > .sidebarMobileContainer {
    display: flex;
    justify-content: space-around;
    padding: var(--space-2) 0;
}

.sidebarMobile .menuLink:hover {
    background-color: transparent;
}

/* Vide volontairement : équilibre la composition avec la sidebar gauche
   (sinon postContainer décalé à gauche du centre visuel). */
.rightSidebar {
    position: relative;
    min-width: var(--sidebar-w);
    max-width: var(--sidebar-w);
}

/* =========================================================
   Boutons
   ========================================================= */

button,
.btn,
button[type="submit"],
input[type="submit"],
input[type="button"] {
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--ink);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--hover);
    border-color: var(--border-strong);
}

button:active,
.btn:active,
button[type="submit"]:active,
input[type="submit"]:active,
input[type="button"]:active {
    box-shadow: none;
}

.postCreateButton {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
}

.postCreateButton:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

#magicButton {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-base);
    margin-top: var(--space-6);
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-pill);
    color: var(--accent-ink);
    box-shadow: var(--shadow-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

#magicButton:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

#magicButton svg { color: var(--accent-ink); }

.navigationBtn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-pill);
}

/* =========================================================
   Inputs
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

input[type="file"] { font-family: inherit; }

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/* =========================================================
   Navigation top (post détail)
   ========================================================= */

/* Marge top négative : la barre compense le padding du postContainer
   pour que les posts ne réapparaissent pas au-dessus en scrollant. */
.navigationContainer {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: calc(-1 * var(--space-6)) 0 var(--space-3);
    padding: var(--space-3) 0;
    background-color: var(--bg);
}

.navigationBtnContainer {
    display: flex;
    align-items: center;
}

/* =========================================================
   Titres de page (Accueil, Profil, Édition, Recherche, Admin)
   ========================================================= */

.homepageTitle,
.user-profile > h1,
.edit-user-profile > h1,
.search-page > h1,
.admin-page > h1 {
    margin: 0 0 var(--space-5);
    padding: 0 var(--space-1);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--ink);
}

#postList {
    display: flex;
    flex-direction: column;
}

/* =========================================================
   Posts (cartes)
   ========================================================= */

.post {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    display: flex;
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.post:not(.mainPost):hover {
    cursor: pointer;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.mainPost {
    position: relative;
    padding: var(--space-5);
}

.mainPost > .postInsideContainer > .postContentTools > .postContent {
    margin-top: var(--space-3);
    font-size: var(--fs-md);
}

.mainPost > .postInsideContainer > .postContentTools > .postTools {
    margin-top: var(--space-3);
    border-top: var(--bw) solid var(--border-color);
    padding-top: var(--space-2);
}

.bold { font-weight: var(--fw-bold); }

.postAvatarContainer {
    padding-right: var(--space-3);
    width: 3.25rem;
}

.postAvatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-lg);
    background-color: var(--accent-soft);
}

.postNameDate {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
    align-items: baseline;
}

.postNameDate > div:first-child {
    font-weight: var(--fw-bold);
}

.postDate {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.postContentTools {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-1) 0;
}

.postContent {
    margin-bottom: var(--space-3);
}

.postInsideContainer {
    flex: 1;
    height: 100%;
    min-width: 0;
}

.postTools {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: var(--space-1) 0;
}

.postTool {
    height: 2.25rem;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    color: var(--muted);
    font-weight: var(--fw-medium);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.postTool:hover {
    background-color: var(--hover);
    color: var(--ink);
    cursor: pointer;
}

.postTool svg,
.postTool .icon {
    color: inherit;
}

.postToolsImage {
    width: 1.125rem;
    height: 1.125rem;
}

.postImage {
    margin-bottom: var(--space-3);
    width: 100%;
    max-height: 18.75rem;
    object-fit: cover;
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-md);
}

/* =========================================================
   Create post
   ========================================================= */

.createPost {
    position: relative;
    width: 100%;
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
}

.postCreateInput {
    display: block;
    padding: var(--space-3);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    margin-bottom: var(--space-2);
    min-height: 2.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.postCreateInput:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

#postContent[contenteditable]:empty::before {
    content: 'Que vous arrive-t-il ?';
    display: inline-block;
    color: var(--muted);
}

#postContent[contenteditable]:empty:focus::before {
    color: var(--muted);
}

.postCreateTools {
    padding: var(--space-3) 0 0 0;
    width: 100%;
    min-height: 3.4375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: var(--bw) solid var(--border-color);
    margin-top: var(--space-2);
}

.postCreateTool {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.postCreateToolsImage {
    width: 1.5rem;
    height: 1.5rem;
}

.fitWidth {
    width: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
}

/* =========================================================
   Hearts / icônes
   ========================================================= */

.heart {
    fill: none;
}

.heart > path {
    stroke: currentColor;
}

.heart.active {
    fill: var(--accent);
}

.heart.active > path {
    stroke: var(--accent);
}

.icon:not(.response):hover { cursor: pointer; }

/* =========================================================
   Scroll to top
   ========================================================= */

#scrollTopBtn {
    position: fixed;
    bottom: 4.6875rem;
    right: 1.5rem;
    background-color: var(--surface);
    padding: var(--space-3);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 1000;
}

/* =========================================================
   Login / Register
   ========================================================= */

.loginRegisterContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--space-10) auto;
    max-width: 25rem;
    padding: 0 var(--space-4);
}

.loginRegisterContainer > h1 {
    font-size: var(--fs-xl);
    text-align: center;
    color: var(--muted);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
}

.homepagelogo { margin: var(--space-4) 0; }

.loginRegisterForm {
    display: flex;
    flex-direction: column;
    margin: var(--space-4) 0;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-8) var(--space-6);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.loginRegisterForm h2 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-2);
}

.loginRegisterForm button[type="submit"] {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    padding: var(--space-3) var(--space-4);
}

.loginRegisterForm button[type="submit"]:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.formBlock {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.formBlock label {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--muted);
}

/* =========================================================
   Accessibilité
   ========================================================= */

.sr-only {
    border: 0 !important;
    clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 0.0625rem !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 0.0625rem !important;
    white-space: nowrap !important;
}

/* =========================================================
   404
   ========================================================= */

.errorContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--space-10) auto;
    padding: var(--space-8) var(--space-6);
    max-width: 25rem;
    text-align: center;
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.errorContainer h1 { font-size: var(--fs-3xl); }
.ghosticon { margin: var(--space-8) 0; }

/* =========================================================
   Search
   ========================================================= */

.search-page form {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-5);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.search-page input[type="text"] {
    flex: 1;
    margin: 0;
    border-color: transparent;
}

.search-page input[type="text"]:focus {
    box-shadow: none;
    border-color: var(--accent);
}

.search-results h2 {
    margin: 0 0 var(--space-4);
    padding: 0 var(--space-1);
    font-size: var(--fs-lg);
}

.search-results > p {
    color: var(--muted);
    padding: 0 var(--space-1);
}

/* =========================================================
   Profil utilisateur
   ========================================================= */

.user-header {
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.user-posts h2 {
    margin: 0 0 var(--space-4);
    padding: 0 var(--space-1);
    font-size: var(--fs-lg);
}

/* =========================================================
   Édition profil
   ========================================================= */

.edit-user-profile form {
    padding: var(--space-6);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.form-group { margin-bottom: var(--space-5); }

.form-group label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    display: block;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

.form-group input {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--fs-base);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--ink);
}

.form-group input:disabled {
    background-color: var(--bg);
    color: var(--muted);
    cursor: not-allowed;
}

.form-group img {
    margin: var(--space-3) auto var(--space-5);
    border-radius: var(--radius-pill);
    width: 6.25rem;
    height: 6.25rem;
    border: var(--bw) solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: block;
}

.edit-user-profile .button-container {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.edit-user-profile input[type="submit"] {
    flex: 1;
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-size: var(--fs-base);
    padding: var(--space-3) var(--space-4);
}

.edit-user-profile input[type="submit"]:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.edit-user-profile input[type="button"] {
    flex: 1;
    background-color: var(--surface);
    color: var(--ink);
    font-size: var(--fs-base);
    padding: var(--space-3) var(--space-4);
}

/* =========================================================
   Messages dynamiques (toasts)
   ========================================================= */

#messageContainer {
    width: 100%;
    max-width: 18.75rem;
    background-color: var(--accent-soft);
    color: var(--ink);
    border-left: 0.1875rem solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-weight: var(--fw-medium);
}

.dynamicMessage p {
    padding: var(--space-2) var(--space-4);
    margin: 0;
}

/* =========================================================
   Admin
   ========================================================= */

.user {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    align-items: center;
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.userViewButton { flex: 1; display: flex; justify-content: flex-end; }

.admin-page {
    display: flex;
    flex-direction: column;
}

.admin-page form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    background-color: var(--surface);
    border: var(--bw) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.admin-page form label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-weight: var(--fw-medium);
}

.deleteForm { display: flex; justify-content: flex-end; }
.deleteForm button {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--danger-ink);
}

.deleteForm button:hover {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
}

.logoutButton {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--danger-ink);
}

.logoutButton:hover {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
}

.logoImage {
    width: 80%;
    height:auto;
}

/* =========================================================
   Animations
   ========================================================= */

@keyframes fadein {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadein 0.35s ease-out;
}

/* =========================================================
   Responsive
   ========================================================= */

@media only screen and (max-width: 60.625rem) { /* 970px */
    .rightSidebar { display: none; }
    #magicButton strong { display: none; }
    #magicButton {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        margin: var(--space-6) auto 0;
    }
    .sidebarFixed {
        min-width: initial;
        width: var(--sidebar-w-narrow);
        padding: var(--space-2);
    }
    .sidebarFixed > ul { align-items: center; }
    .sidebarIMG { margin-right: 0; }
    .sidebar {
        min-width: initial;
        width: var(--sidebar-w-narrow);
    }
    /* Scopé à la sidebar : .menuTxt sert aussi de compteur de réponses
       dans les posts, qu'il ne faut pas masquer. */
    .sidebarFixed .menuTxt { display: none; }
}

@media only screen and (max-width: 46.875rem) { /* 750px */
    .sidebarMobile { display: block; }
    .sidebars { display: none; }
    .postContainer { padding: var(--space-4) var(--space-3) var(--space-8); }
    .navigationContainer { margin-top: calc(-1 * var(--space-4)); }
    body { padding-bottom: 4.5rem; }
}

@media (max-width: 37.5rem) { /* 600px */
    .homepageTitle,
    .user-profile > h1,
    .edit-user-profile > h1,
    .search-page > h1,
    .admin-page > h1 {
        font-size: var(--fs-xl);
    }
}

/* =========================================================
   Print
   ========================================================= */

@media print {
    body {
        font-size: 12pt;
        color: var(--ink);
        background-color: var(--surface);
    }
    header, footer, .navigation, .sidebar, .sidebarMobile {
        display: none;
    }
    .post, .createPost, .navigationContainer {
        box-shadow: none;
    }
}