From 3da52b6b9e58cf1418bfaafc9bea08c14cb2b37e Mon Sep 17 00:00:00 2001
From: Aigars Silkalns <aigars.silkalns@gmail.com>
Date: Tue, 11 Aug 2026 12:57:30 +0300
Subject: [PATCH 1/2] Centre the submenu "has children" arrow on its row

The right-pointing arrow on a second-level menu item sat well below the label
it belongs to, near the bottom edge of the row.

It is drawn by .dropdown:after, whose base rule centres the glyph with

    top: 0;
    line-height: 53px;

53px is the height of the 55px top-level menu bar, where that rule was designed
to work. A submenu row is 32px (6px padding + 20px line-height + 6px), so the
inherited line box put the glyph centre 27.5px down a 32px row -- 11.5px below
the label's own centre at 16px. Measured in the browser before and after:

    before   line-height 53px, top 1px  ->  glyph 27.5px vs label 16px
    after    line-height 32px, top 0    ->  glyph 16px   vs label 16px

Anchored to the link row via line-height rather than top: 50% + translateY,
because this li also contains its child <ul>: its own height is the whole
expanded block, not the row, anywhere that submenu is laid out in flow.

Desktop only in practice -- .mobile-menu .dropdown:after is display: none, the
mobile accordion using the .shapely-dropdown span instead.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 style.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/style.css b/style.css
index 3915db2..3983b28 100644
--- a/style.css
+++ b/style.css
@@ -1659,6 +1659,18 @@ nav {
   content: "\f105"; /* fa-angle-right */
   right: 10px;
   display: inline-block;
+  /*
+   * The base .dropdown:after rule centres the glyph with line-height: 53px,
+   * which is the height of the 55px top-level bar. A submenu row is 32px
+   * (6px padding + 20px line-height + 6px), so inherited unchanged the arrow
+   * painted 11.5px below the label it belongs to.
+   *
+   * Anchored to the link row via line-height rather than top/transform: 50%,
+   * because this li also contains its child <ul>, so its own height is not the
+   * row height wherever that submenu expands in flow (the mobile accordion).
+   */
+  top: 0;
+  line-height: 32px;
 }
 
 .shapely-dropdown {

From 3d04cba72c4454ed49db75fe621c1f02b27afea7 Mon Sep 17 00:00:00 2001
From: Aigars Silkalns <aigars.silkalns@gmail.com>
Date: Tue, 11 Aug 2026 12:59:02 +0300
Subject: [PATCH 2/2] Match the submenu arrow to the taller mobile row too

The desktop fix hardcodes the 32px submenu row. Below 992px the same rows are
44px (10px padding + 24px line-height + 10px), so the arrow rode 6px high there.

Measured after this change:

    1440px  row 32px  line-height 32px  offset 0.0px
     991px  row 44px  line-height 44px  offset 0.0px
     768px  row 44px  line-height 44px  offset 0.0px
     480px  row 44px  line-height 44px  offset 0.0px

Also corrects the previous commit message: it claimed the arrow is hidden below
992px because of .mobile-menu .dropdown:after { display: none }. That rule is
inside @media (min-width: 992px) -- it applies to the mobile-style menu *option*
at desktop widths, not to narrow viewports. The arrow does render below 992px,
which is exactly why it needed its own value.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 style.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/style.css b/style.css
index 3983b28..42f8f8e 100644
--- a/style.css
+++ b/style.css
@@ -2407,6 +2407,16 @@ nav.fixed.scrolled {
     padding: 10px 16px;
   }
 
+  /*
+   * Submenu rows are 44px here (10px + 24px line-height + 10px) rather than the
+   * 32px they are on desktop, so the arrow's line box has to match or it rides
+   * high. Same reasoning as the base rule -- see the comment there.
+   */
+  .main-navigation .menu > li > ul li.menu-item-has-children:after,
+  .main-navigation .menu > li > ul li.menu-item-has-children > .dropdown:after {
+    line-height: 44px;
+  }
+
   .main-navigation .dropdown .dropdown li {
     padding-left: 18px;
   }