From 9ece7f0b4d00d574e302f3aa60a6347fe2ac888b Mon Sep 17 00:00:00 2001
From: "A. Wilcox" <AWilcox@Wilcox-Tech.com>
Date: Tue, 13 Jan 2026 13:13:47 -0600
Subject: [PATCH] stylesheets: Refactor header imprint styles

Before this change, the containing `a` element was using a `display`
of `contents`, which caused the elements to be inaccessible via the
keyboard.  Changing the `a` to be a simple flex item caused various
other layout issues that were corrected:

* `vertical-align` was set to `middle` for both the image and text,
  allowing them to look mostly the same as before.

* Added `text-align: center` to ensure the elements are centred on
  mobile-sized viewports in column layout mode.

* On mobile, the image remains a `block` element so that it causes a
  hard break in the flex grid (otherwise, on larger mobile/tablet
  screen sizes, it is undersized and the "Audio/Video" appears next to
  the logo element).  On desktop, they are no longer required to be
  `block` elements.

* Additionally, the fixed width size of the logo is now set as the
  `max-width`, and a `width` of `100%` is used.  This allows the logo
  to shrink on very small viewports, such as an iPhone 11 in 2x zoom
  mode.  The iPhone 11 @ 2x has an effective viewport of 305px, which
  is smaller than the 315px width and caused the logo to be cut off
  with the current rules.

Closes: ADA-669
---
 app/assets/stylesheets/includes/desktop.scss |  9 ++++++++-
 app/assets/stylesheets/includes/main.scss    |  8 --------
 app/assets/stylesheets/includes/mobile.scss  | 12 ++++++++++++
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/includes/desktop.scss b/app/assets/stylesheets/includes/desktop.scss
index 5c1d900..339d5bd 100644
--- a/app/assets/stylesheets/includes/desktop.scss
+++ b/app/assets/stylesheets/includes/desktop.scss
@@ -18,10 +18,17 @@
       &.branding {
         flex-direction: row;
 
+        img {
+          &.header-logo {
+            vertical-align: middle;
+            width: 315px;
+          }
+        }
+
         span {
           &.site-name {
             padding-left: $margin;
-            padding-top: $sitename-baseline-adjust;
+            vertical-align: middle;
           }
         }
       }
diff --git a/app/assets/stylesheets/includes/main.scss b/app/assets/stylesheets/includes/main.scss
index 764fb5a..1d8cf94 100644
--- a/app/assets/stylesheets/includes/main.scss
+++ b/app/assets/stylesheets/includes/main.scss
@@ -60,24 +60,16 @@ header {
   div {
     &.branding {
       display: flex;
-      flex-direction: column;
-
-      a {
-        display: contents;
-      }
 
       img {
         &.header-logo {
-          display: block;
           height: 52px;
-          width: 315px;
         }
       }
 
       span {
         &.site-name {
           color: $color-site-name;
-          display: block;
           font-size: $font-size-large;
           letter-spacing: $margin-small;
           text-transform: uppercase;
diff --git a/app/assets/stylesheets/includes/mobile.scss b/app/assets/stylesheets/includes/mobile.scss
index 7051508..894e78d 100644
--- a/app/assets/stylesheets/includes/mobile.scss
+++ b/app/assets/stylesheets/includes/mobile.scss
@@ -16,6 +16,18 @@
         flex-direction: column;
         padding: $margin-2xl;
 
+        a {
+          text-align: center;
+        }
+
+        img {
+          &.header-logo {
+            display: block;
+            width: 100%;
+            max-width: 315px;
+          }
+        }
+
         span {
           &.site-name {
             padding-left: $margin-small;