Polish section header breadcrumb styling

Center the slash separator in section header breadcrumbs and remove link underlines in the shared stylesheets.

Add a regression test to keep the header breadcrumb spacing consistent across both published CSS bundles.

Author: vickymaulana

public/assets/style.css

@@ -2928,6 +2928,20 @@ pre {
 .section .section-header .section-header-breadcrumb .breadcrumb-item {
   font-size: 12px;
 }
+.section .section-header .section-header-breadcrumb .breadcrumb-item + .breadcrumb-item {
+  padding-left: 0;
+}
+.section .section-header .section-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+  content: "/";
+  float: none;
+  display: inline-block;
+  padding: 0 6px;
+}
+.section .section-header .section-header-breadcrumb .breadcrumb-item a,
+.section .section-header .section-header-breadcrumb .breadcrumb-item a:hover,
+.section .section-header .section-header-breadcrumb .breadcrumb-item a:focus {
+  text-decoration: none;
+}
 .section .section-header .btn {
   font-size: 12px;
 }
@@ -3650,4 +3664,4 @@ body.layout-3 .main-wrapper {
     -webkit-transform: scale(1.2, 1.2);
     opacity: 0;
   }
-}
+}

public/css/style.css

@@ -2928,6 +2928,20 @@ pre {
 .section .section-header .section-header-breadcrumb .breadcrumb-item {
   font-size: 12px;
 }
+.section .section-header .section-header-breadcrumb .breadcrumb-item + .breadcrumb-item {
+  padding-left: 0;
+}
+.section .section-header .section-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+  content: "/";
+  float: none;
+  display: inline-block;
+  padding: 0 6px;
+}
+.section .section-header .section-header-breadcrumb .breadcrumb-item a,
+.section .section-header .section-header-breadcrumb .breadcrumb-item a:hover,
+.section .section-header .section-header-breadcrumb .breadcrumb-item a:focus {
+  text-decoration: none;
+}
 .section .section-header .btn {
   font-size: 12px;
 }
@@ -3650,4 +3664,4 @@ body.layout-3 .main-wrapper {
     -webkit-transform: scale(1.2, 1.2);
     opacity: 0;
   }
-}
+}

tests/Feature/Styling/BreadcrumbHeaderStyleTest.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace Tests\Feature\Styling;
+
+use Tests\TestCase;
+
+class BreadcrumbHeaderStyleTest extends TestCase
+{
+    public function test_section_header_breadcrumb_styles_render_a_centered_slash_separator(): void
+    {
+        $primaryCss = file_get_contents(public_path('css/style.css'));
+        $mirroredCss = file_get_contents(public_path('assets/style.css'));
+
+        $linkSelector = '.section .section-header .section-header-breadcrumb .breadcrumb-item a';
+        $adjacentItemSelector = '.section .section-header .section-header-breadcrumb .breadcrumb-item + .breadcrumb-item';
+        $separatorSelector = '.section .section-header .section-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before';
+
+        $this->assertIsString($primaryCss);
+        $this->assertIsString($mirroredCss);
+
+        $this->assertStringContainsString($linkSelector, $primaryCss);
+        $this->assertStringContainsString($adjacentItemSelector, $primaryCss);
+        $this->assertStringContainsString($separatorSelector, $primaryCss);
+        $this->assertStringContainsString('padding-left: 0;', $primaryCss);
+        $this->assertStringContainsString('content: "/";', $primaryCss);
+        $this->assertStringContainsString('display: inline-block;', $primaryCss);
+        $this->assertStringContainsString('padding: 0 6px;', $primaryCss);
+        $this->assertStringContainsString('text-decoration: none;', $primaryCss);
+        $this->assertStringNotContainsString('margin-left: 8px;', $primaryCss);
+        $this->assertStringNotContainsString('content: " / ";', $primaryCss);
+
+        $this->assertStringContainsString($linkSelector, $mirroredCss);
+        $this->assertStringContainsString($adjacentItemSelector, $mirroredCss);
+        $this->assertStringContainsString($separatorSelector, $mirroredCss);
+        $this->assertStringContainsString('padding-left: 0;', $mirroredCss);
+        $this->assertStringContainsString('content: "/";', $mirroredCss);
+        $this->assertStringContainsString('display: inline-block;', $mirroredCss);
+        $this->assertStringContainsString('padding: 0 6px;', $mirroredCss);
+        $this->assertStringContainsString('text-decoration: none;', $mirroredCss);
+        $this->assertStringNotContainsString('margin-left: 8px;', $mirroredCss);
+        $this->assertStringNotContainsString('content: " / ";', $mirroredCss);
+    }
+}