From 3e0c9c14a2b75996e8151e20c782433a5067043d Mon Sep 17 00:00:00 2001
From: Mandel Olaiya <mandeleolaiya15@icloud.com>
Date: Sun, 3 May 2026 00:33:26 +0200
Subject: [PATCH] Revert "mobile header: ship CSS without SCSS"

This reverts commit b7cb932359b9ee270714ed201f3573a9edf345cc.
---
 .../static/mandelstudio/header_mobile.css     | 111 ----------------
 .../static/mandelstudio/header_mobile.scss    | 121 ++++++++++++++++++
 mandelstudio/templates/layout.html            |   4 +-
 3 files changed, 123 insertions(+), 113 deletions(-)
 delete mode 100644 mandelstudio/static/mandelstudio/header_mobile.css
 create mode 100644 mandelstudio/static/mandelstudio/header_mobile.scss

diff --git a/mandelstudio/static/mandelstudio/header_mobile.css b/mandelstudio/static/mandelstudio/header_mobile.css
deleted file mode 100644
index c8d0c43..0000000
--- a/mandelstudio/static/mandelstudio/header_mobile.css
+++ /dev/null
@@ -1,111 +0,0 @@
-/* Scoped mobile header fixes for MandelBlog Studio.
-   Keep changes local to the Carbasa mega header to avoid desktop regressions. */
-
-@media (max-width: 991.98px) {
-  header.mega_header .header-inner .container {
-    flex-wrap: nowrap;
-    align-items: center;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  header.mega_header .header-inner .navbar-brand {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    z-index: 30;
-  }
-
-  header.mega_header .header-inner .navbar-brand .logo.big_brand img,
-  header.mega_header .header-inner .navbar-brand .logo img {
-    max-height: 36px;
-    width: auto;
-    height: auto;
-  }
-
-  header.mega_header .header-inner .header-right {
-    padding-left: 0;
-    margin-left: auto;
-    gap: 0.5rem;
-    position: relative;
-    z-index: 30;
-  }
-
-  header.mega_header .header-inner .header-right .user-button {
-    margin-right: 0;
-  }
-
-  header.mega_header .header-inner .navbar-toggler {
-    position: static;
-    inset: auto;
-    width: 42px;
-    height: 42px;
-    margin: 0 0 0 0.5rem;
-    box-shadow: none;
-    background: #fff;
-    border: 1px solid rgba(15, 23, 42, 0.12);
-    z-index: 35;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent.show {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100vh;
-    width: 100%;
-    overflow: auto;
-    background: #fff;
-    padding: 5.25rem 1.25rem 6rem;
-    z-index: 40;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent.show ~ .header-right {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent .brand-wrapper {
-    display: none;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent .navbar-nav {
-    width: 100%;
-    align-items: stretch;
-    gap: 0.25rem;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li {
-    width: 100%;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.nav-link,
-  header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.toggler.nav-link {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.85rem 0.25rem;
-    font-size: 1.1rem;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent .dropdown-menu {
-    position: static;
-    float: none;
-    width: 100%;
-    border: 0;
-    padding: 0.25rem 0 0.75rem;
-    margin: 0;
-    background: transparent;
-  }
-
-  header.mega_header .header-inner #navbarSupportedContent .dropdown-menu .nav-link {
-    justify-content: flex-start;
-    padding: 0.6rem 0.25rem;
-    font-size: 1rem;
-    opacity: 0.9;
-  }
-}
-
diff --git a/mandelstudio/static/mandelstudio/header_mobile.scss b/mandelstudio/static/mandelstudio/header_mobile.scss
new file mode 100644
index 0000000..d4fea45
--- /dev/null
+++ b/mandelstudio/static/mandelstudio/header_mobile.scss
@@ -0,0 +1,121 @@
+/* Scoped mobile header fixes for MandelBlog Studio.
+   Keep changes local to the Carbasa mega header to avoid desktop regressions. */
+
+header.mega_header {
+  @media (max-width: 991.98px) {
+    .header-inner {
+      .container {
+        flex-wrap: nowrap;
+        align-items: center;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
+
+      .navbar-brand {
+        margin: 0;
+        padding: 0;
+        position: relative;
+        z-index: 30;
+
+        .logo.big_brand img,
+        .logo img {
+          max-height: 36px;
+          width: auto;
+          height: auto;
+        }
+      }
+
+      .header-right {
+        padding-left: 0;
+        margin-left: auto;
+        gap: 0.5rem;
+        position: relative;
+        z-index: 30;
+
+        .user-button {
+          margin-right: 0;
+        }
+      }
+
+      /* Move the mobile menu toggle into the header (not floating at the bottom). */
+      .navbar-toggler {
+        position: static;
+        inset: auto;
+        width: 42px;
+        height: 42px;
+        margin: 0 0 0 0.5rem;
+        box-shadow: none;
+        background: #fff;
+        border: 1px solid rgba(15, 23, 42, 0.12);
+        z-index: 35;
+      }
+
+      /* Fullscreen mobile menu that sits above header icons. */
+      #navbarSupportedContent.show {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100vh;
+        width: 100%;
+        overflow: auto;
+        background: #fff;
+        padding: 5.25rem 1.25rem 6rem;
+        z-index: 40;
+      }
+
+      /* Prevent header action icons overlapping the open menu. */
+      #navbarSupportedContent.show ~ .header-right {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+      }
+
+      /* Make mobile menu items look consistent and aligned. */
+      #navbarSupportedContent {
+        .brand-wrapper {
+          display: none;
+        }
+
+        .navbar-nav {
+          width: 100%;
+          align-items: stretch;
+          gap: 0.25rem;
+        }
+
+        .navbar-nav > li {
+          width: 100%;
+        }
+
+        .navbar-nav > li > a.nav-link,
+        .navbar-nav > li > a.toggler.nav-link {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.85rem 0.25rem;
+          font-size: 1.1rem;
+        }
+
+        .dropdown-menu {
+          position: static;
+          float: none;
+          width: 100%;
+          border: 0;
+          padding: 0.25rem 0 0.75rem;
+          margin: 0;
+          background: transparent;
+        }
+
+        .dropdown-menu .nav-link {
+          justify-content: flex-start;
+          padding: 0.6rem 0.25rem;
+          font-size: 1rem;
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
+
diff --git a/mandelstudio/templates/layout.html b/mandelstudio/templates/layout.html
index f1087ab..a1842c4 100644
--- a/mandelstudio/templates/layout.html
+++ b/mandelstudio/templates/layout.html
@@ -15,8 +15,8 @@
 {{ block.super }}
 {# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
 <link rel="stylesheet" type="text/x-scss" href="{% static 'carbasa/webshop_base.scss' %}">
-{# Project-scoped header mobile fixes (plain CSS to avoid SCSS compilation at runtime). #}
-<link rel="stylesheet" href="{% static 'mandelstudio/header_mobile.css' %}">
+{# Project-scoped header mobile fixes (no Bootstrap overrides). #}
+<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/header_mobile.scss' %}">
 {% endblock %}
 
 {% block extrahead %}