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

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

diff --git a/mandelstudio/static/mandelstudio/header_mobile.css b/mandelstudio/static/mandelstudio/header_mobile.css
new file mode 100644
index 0000000..c8d0c43
--- /dev/null
+++ b/mandelstudio/static/mandelstudio/header_mobile.css
@@ -0,0 +1,111 @@
+/* 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
deleted file mode 100644
index d4fea45..0000000
--- a/mandelstudio/static/mandelstudio/header_mobile.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-/* 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 a1842c4..f1087ab 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 (no Bootstrap overrides). #}
-<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/header_mobile.scss' %}">
+{# Project-scoped header mobile fixes (plain CSS to avoid SCSS compilation at runtime). #}
+<link rel="stylesheet" href="{% static 'mandelstudio/header_mobile.css' %}">
 {% endblock %}
 
 {% block extrahead %}