Update the sophisticated business theme to support the FSE site header styles to match the editor with the front end.

sophisticated-business/sass/site/header/_site-header.scss

@@ -29,7 +29,7 @@
 .site-branding {
 	display: flex;
 	flex-wrap: wrap;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: space-between;
 
 	color: $color__text-light;
@@ -56,9 +56,11 @@
 
 // Site title
 
-.site-title {
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
 	color: $color__text-main;
-	font-size: $font__size-md;
+	font-size: $font__size-md !important;
 	font-weight: 600;
 	flex: 1 1 auto;
 	margin: 0;
@@ -83,10 +85,16 @@
 
 // Site description
 
-.site-description {
+.site-description,
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
 	flex: initial;
 	color: $color__text-main;
 	font-size: $font__size-xs;
 	font-weight: normal;
 	margin: 0.27rem 0 0;
+
+	@include media(tablet) {
+		text-align: right;
+	}
 }

sophisticated-business/sass/typography/_headings.scss

@@ -16,6 +16,8 @@
 .pagination .nav-links,
 .sticky-post,
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 .site-info,
 #cancel-comment-reply-link,
 img:after,
@@ -38,6 +40,8 @@ h6 {
 .comment-author .fn,
 .no-comments,
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 h1,
 h2,
 h3,
@@ -90,6 +94,8 @@ h3 {
 }
 
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 .site-description,
 .nav-links,
 .page-title,
@@ -123,7 +129,6 @@ h6 {
 	font-size: $font__size-xxs;
 }
 
-.site-title,
 .page-title {
 	font-weight: normal;
 }

sophisticated-business/style-editor.css

@@ -9,6 +9,782 @@ Sophisticated Business Editor Styles
 /* Fallback for non-latin fonts */
 /* Calculates maximum width for post content */
 /* Nested sub-menu padding: 10 levels deep */
+.site-header {
+  padding: 1rem;
+}
+
+.site-header.featured-image {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 90vh;
+}
+
+.site-header.featured-image .site-branding-container {
+  margin-bottom: auto;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-header {
+    margin: 0;
+  }
+  .site-header.featured-image {
+    min-height: 100vh;
+    margin-bottom: 3rem;
+  }
+}
+
+.site-branding {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  color: #cccccc;
+  position: relative;
+}
+
+.site-logo {
+  margin-right: 0.5rem;
+}
+
+.site-logo .custom-logo-link {
+  box-sizing: content-box;
+  display: block;
+  line-height: 0;
+  overflow: hidden;
+}
+
+.site-logo .custom-logo-link .custom-logo {
+  max-height: 60px;
+  width: auto;
+}
+
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
+  color: #fff;
+  font-size: 1.125em !important;
+  font-weight: 600;
+  flex: 1 1 auto;
+  margin: 0;
+}
+
+.site-title a,
+.wp-block-a8c-site-title a,
+.wp-block-a8c-site-title:focus a {
+  color: #fff;
+}
+
+.site-title a:link, .site-title a:visited,
+.wp-block-a8c-site-title a:link,
+.wp-block-a8c-site-title a:visited,
+.wp-block-a8c-site-title:focus a:link,
+.wp-block-a8c-site-title:focus a:visited {
+  color: #fff;
+}
+
+.site-title a:hover,
+.wp-block-a8c-site-title a:hover,
+.wp-block-a8c-site-title:focus a:hover {
+  color: #c6c6c6;
+}
+
+.featured-image .site-title, .featured-image
+.wp-block-a8c-site-title, .featured-image
+.wp-block-a8c-site-title:focus {
+  margin: 0;
+}
+
+.site-description,
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
+  flex: initial;
+  color: #fff;
+  font-size: 0.71111em;
+  font-weight: normal;
+  margin: 0.27rem 0 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-description,
+  .wp-block-a8c-site-description,
+  .wp-block-a8c-site-description:focus {
+    text-align: right;
+  }
+}
+
+/** === Main menu === */
+.main-navigation {
+  display: block;
+  margin-top: 0.25rem;
+  width: 100%;
+  /* Un-style buttons */
+  /*
+	 * Sub-menu styles
+	 *
+	 * :focus-within needs its own selector so other similar
+	 * selectors don’t get ignored if a browser doesn’t recognize it
+	 */
+  /**
+	 * Fade-in animation for top-level submenus
+	 */
+  /**
+	 * Off-canvas touch device styles
+	 */
+}
+
+body.page .main-navigation {
+  display: block;
+}
+
+.main-navigation > div {
+  display: inline;
+}
+
+.main-navigation button {
+  display: inline-block;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  text-decoration: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background 250ms ease-in-out, transform 150ms ease;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.main-navigation button:hover, .main-navigation button:focus {
+  background: transparent;
+}
+
+.main-navigation button:focus {
+  outline: 1px solid transparent;
+  outline-offset: -4px;
+}
+
+.main-navigation button:active {
+  transform: scale(0.99);
+}
+
+.main-navigation .main-menu {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+.main-navigation .main-menu > li {
+  color: #caab57;
+  display: inline;
+  position: relative;
+}
+
+.main-navigation .main-menu > li > a {
+  font-weight: 600;
+  color: #caab57;
+  margin-right: 0.5rem;
+}
+
+.main-navigation .main-menu > li > a + svg {
+  margin-right: 0.5rem;
+}
+
+.main-navigation .main-menu > li > a:hover,
+.main-navigation .main-menu > li > a:hover + svg {
+  color: #b59439;
+}
+
+.main-navigation .main-menu > li.menu-item-has-children {
+  display: inline-block;
+  position: inherit;
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .main-menu > li.menu-item-has-children {
+    position: relative;
+  }
+}
+
+.main-navigation .main-menu > li.menu-item-has-children > a {
+  margin-right: 0.125rem;
+}
+
+.main-navigation .main-menu > li.menu-item-has-children > a:after,
+.main-navigation .main-menu > li.menu-item-has-children .menu-item-has-children > a:after {
+  content: "";
+  display: none;
+}
+
+.main-navigation .main-menu > li.menu-item-has-children .submenu-expand {
+  display: inline-block;
+  margin-right: 0.25rem;
+  /* Priority+ Menu */
+}
+
+.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle {
+  position: relative;
+  height: 24px;
+  line-height: 1.2;
+  width: 24px;
+  padding: 0;
+  margin-left: 0.5rem;
+  top: 6px;
+}
+
+.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle svg {
+  height: 24px;
+  width: 24px;
+  top: -0.125rem;
+  vertical-align: text-bottom;
+}
+
+.wp-customizer-unloading .main-navigation .main-menu > li.menu-item-has-children .submenu-expand, .main-navigation .main-menu > li.menu-item-has-children .submenu-expand.is-empty {
+  display: none;
+}
+
+.main-navigation .main-menu > li.menu-item-has-children .submenu-expand svg {
+  position: relative;
+  top: 0.2rem;
+}
+
+.main-navigation .main-menu > li:last-child > a,
+.main-navigation .main-menu > li:last-child.menu-item-has-children .submenu-expand {
+  margin-right: 0;
+}
+
+.main-navigation .sub-menu {
+  background-color: #caab57;
+  color: #080808;
+  list-style: none;
+  padding-left: 0;
+  position: absolute;
+  opacity: 0;
+  left: -9999px;
+  z-index: 99999;
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .sub-menu {
+    width: auto;
+    min-width: -moz-max-content;
+    min-width: -webkit-max-content;
+    min-width: max-content;
+  }
+}
+
+.main-navigation .sub-menu > li {
+  display: block;
+  float: none;
+  position: relative;
+}
+
+.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand {
+  display: inline-block;
+  position: absolute;
+  width: calc( 24px + 1rem);
+  right: 0;
+  top: calc( .125 * 1rem);
+  bottom: 0;
+  color: white;
+  line-height: 1;
+  padding: calc( .5 * 1rem);
+}
+
+.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand svg {
+  top: 0;
+}
+
+.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand {
+  margin-right: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .sub-menu > li.menu-item-has-children .menu-item-has-children > a:after {
+    content: "\203a";
+  }
+}
+
+.main-navigation .sub-menu > li > a,
+.main-navigation .sub-menu > li > .menu-item-link-return {
+  color: #080808;
+  display: block;
+  line-height: 1.2;
+  text-shadow: none;
+  padding: calc( .5 * 1rem) calc( 24px + 1rem) calc( .5 * 1rem) 1rem;
+  white-space: nowrap;
+}
+
+.main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus,
+.main-navigation .sub-menu > li > .menu-item-link-return:hover,
+.main-navigation .sub-menu > li > .menu-item-link-return:focus {
+  background: #b59439;
+}
+
+.main-navigation .sub-menu > li > a:hover:after, .main-navigation .sub-menu > li > a:focus:after,
+.main-navigation .sub-menu > li > .menu-item-link-return:hover:after,
+.main-navigation .sub-menu > li > .menu-item-link-return:focus:after {
+  background: #b59439;
+}
+
+.main-navigation .sub-menu > li > .menu-item-link-return {
+  width: 100%;
+  font-size: 22px;
+  font-weight: normal;
+  text-align: left;
+}
+
+.main-navigation .sub-menu > li > a:empty {
+  display: none;
+}
+
+.main-navigation .sub-menu > li.mobile-parent-nav-menu-item {
+  display: none;
+  font-size: 0.88889em;
+  font-weight: normal;
+}
+
+.main-navigation .sub-menu > li.mobile-parent-nav-menu-item svg {
+  position: relative;
+  top: 0.2rem;
+  margin-right: calc( .25 * 1rem);
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
+  display: block;
+  left: 0;
+  margin-top: 0;
+  opacity: 1;
+  width: auto;
+  min-width: 100%;
+  /* Non-mobile position */
+  /* Nested sub-menu dashes */
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
+    display: block;
+    margin-top: 0;
+    opacity: 1;
+    position: absolute;
+    left: 0;
+    right: auto;
+    top: auto;
+    bottom: auto;
+    height: auto;
+    min-width: -moz-max-content;
+    min-width: -webkit-max-content;
+    min-width: max-content;
+    transform: none;
+  }
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
+  left: 0;
+  width: 100%;
+  display: table;
+  position: absolute;
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
+    right: 0;
+    left: auto;
+    display: block;
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+  }
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand {
+  display: none;
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
+  display: block;
+  margin-top: inherit;
+  position: relative;
+  width: 100%;
+  left: 0;
+  opacity: 1;
+  /* Non-mobile position */
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
+    float: none;
+    max-width: 100%;
+  }
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
+  counter-reset: submenu;
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before {
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+  content: "– " counters(submenu, "– ", none);
+  counter-increment: submenu;
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
+.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
+  display: block;
+  left: 0;
+  margin-top: 0;
+  opacity: 1;
+  width: auto;
+  min-width: 100%;
+  /* Non-mobile position */
+  /* Nested sub-menu dashes */
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
+  .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
+    display: block;
+    float: none;
+    margin-top: 0;
+    opacity: 1;
+    position: absolute;
+    left: 0;
+    right: auto;
+    top: auto;
+    bottom: auto;
+    height: auto;
+    min-width: -moz-max-content;
+    min-width: -webkit-max-content;
+    min-width: max-content;
+    transform: none;
+  }
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links,
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links,
+.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links {
+  left: 0;
+  width: 100%;
+  display: table;
+  position: absolute;
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links,
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links,
+  .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links {
+    right: 0;
+    left: auto;
+    display: table;
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+  }
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .submenu-expand,
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .submenu-expand,
+.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .submenu-expand {
+  display: none;
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu,
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu,
+.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu {
+  display: block;
+  margin-top: inherit;
+  position: relative;
+  width: 100%;
+  left: 0;
+  opacity: 1;
+  /* Non-mobile position */
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu,
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu,
+  .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu {
+    float: none;
+    max-width: 100%;
+  }
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu,
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu,
+.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu {
+  counter-reset: submenu;
+}
+
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu > li > a::before,
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu > li > a::before,
+.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu > li > a::before {
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+  content: "– " counters(submenu, "– ", none);
+  counter-increment: submenu;
+}
+
+.main-navigation .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
+  animation: fade_in 0.1s forwards;
+}
+
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .submenu-expand .svg-icon {
+  transform: rotate(270deg);
+}
+
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .sub-menu {
+  opacity: 0;
+  position: absolute;
+  z-index: 0;
+  transform: translateX(-100%);
+}
+
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:hover,
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:focus,
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:hover,
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:focus {
+  background-color: transparent;
+}
+
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu > li > a,
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu > li > .menu-item-link-return {
+  white-space: inherit;
+}
+
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true {
+  display: table;
+  margin-top: 0;
+  opacity: 1;
+  padding-left: 0;
+  /* Mobile position */
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  position: fixed;
+  z-index: 100000;
+  /* Make sure appears above mobile admin bar */
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  transform: translateX(100%);
+  animation: slide_in_right 0.3s forwards;
+  /* Prevent menu from being blocked by admin bar */
+}
+
+.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true > .mobile-parent-nav-menu-item {
+  display: block;
+}
+
+.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true {
+  top: 46px;
+  height: calc( 100vh - 46px);
+  /* WP core breakpoint */
+}
+
+.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true {
+  top: 0;
+}
+
+@media only screen and (min-width: 782px) {
+  .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true {
+    top: 32px;
+    height: calc( 100vh - 32px);
+  }
+  .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true {
+    top: 0;
+  }
+}
+
+.main-navigation .main-menu-more:nth-child(n+3) {
+  display: none;
+}
+
+/* Menu animation */
+@keyframes slide_in_right {
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes fade_in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.author-description .author-link,
+.comment-metadata,
+.comment-reply-link,
+.comments-title,
+.comment-author .fn,
+.discussion-meta-info,
+.entry-meta,
+.entry-footer,
+.main-navigation,
+.no-comments,
+.not-found .page-title,
+.error-404 .page-title,
+.post-navigation .post-title,
+.page-links,
+.page-description,
+.pagination .nav-links,
+.sticky-post,
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
+.site-info,
+#cancel-comment-reply-link,
+img:after,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.page-description,
+.author-description .author-link,
+.not-found .page-title,
+.error-404 .page-title,
+.post-navigation .post-title,
+.pagination .nav-links,
+.comments-title,
+.comment-author .fn,
+.no-comments,
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.2;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.page-title {
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.site-branding,
+.main-navigation ul.main-menu > li,
+.social-navigation,
+.author-description .author-bio,
+.nav-links {
+  line-height: 1.25;
+}
+
+.entry-title {
+  font-size: 1.6875em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry-title {
+    font-size: 2.25em;
+  }
+}
+
+h1 {
+  font-size: 1.6875em;
+}
+
+.not-found .page-title,
+.error-404 .page-title,
+.has-larger-font-size,
+h2 {
+  font-size: 1.125em;
+}
+
+.has-regular-font-size,
+.has-large-font-size,
+.comments-title,
+h3 {
+  font-size: 22px;
+}
+
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
+.site-description,
+.nav-links,
+.page-title,
+.page-description,
+.comment-author .fn,
+.no-comments,
+p.author-bio,
+h4 {
+  font-size: 0.88889em;
+}
+
+.main-navigation,
+.pagination .nav-links,
+.comment-content,
+h5 {
+  font-size: 0.71111em;
+}
+
+.entry-meta,
+.entry-footer,
+.discussion-meta-info,
+.site-info,
+.has-small-font-size,
+.comment-reply-link,
+.comment-metadata,
+.comment-notes,
+.sticky-post,
+#cancel-comment-reply-link,
+img:after,
+h6 {
+  font-size: 0.59259em;
+}
+
+.page-title {
+  font-weight: normal;
+}
+
+.page-description,
+.page-links a {
+  font-weight: normal;
+}
+
+.post-navigation .post-title,
+.entry-title,
+.not-found .page-title,
+.error-404 .page-title,
+.comments-title,
+blockquote {
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+  word-break: break-word;
+}
+
+/* Do not hyphenate entry title on tablet view and bigger. */
+@media only screen and (min-width: 768px) {
+  .entry-title {
+    -webkit-hyphens: none;
+        -ms-hyphens: none;
+            hyphens: none;
+  }
+}
+
 /** === Editor Frame === */
 body {
   background-color: #080808;
@@ -846,6 +1622,11 @@ ul.wp-block-archives li ul,
   font-size: 0.71111em;
 }
 
+/** === Site Header Block == **/
+.wp-block-columns.site-branding .editor-inner-blocks {
+  width: 100%;
+}
+
 /** === Classic Editor === */
 /* Properly center-align captions in the classic-editor block */
 .wp-caption dd {

sophisticated-business/style-editor.scss

@@ -6,6 +6,9 @@ Sophisticated Business Editor Styles
 
 @import "sass/variables-site/variables-site";
 @import "sass/mixins/mixins-master";
+@import "sass/site/header/site-header";
+@import "sass/navigation/menu-main-navigation";
+@import "sass/typography/headings";
 
 /** === Editor Frame === */
 
@@ -839,6 +842,16 @@ ul.wp-block-archives,
 	}
 }
 
+/** === Site Header Block == **/
+
+.wp-block-columns.site-branding {
+
+	.editor-inner-blocks {
+		width: 100%;
+	}
+
+}
+
 /** === Classic Editor === */
 
 /* Properly center-align captions in the classic-editor block */

sophisticated-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://automattic.com/
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your delicious food and special concoctions! With its bold typography and chic color scheme, Sophisticated Business exudes the same cool, intimate atmosphere as an upscale bar, lounge, or pub.
 Requires at least: WordPress 4.9.6
-Version: 1.4
+Version: 1.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: sophisticated-business
@@ -440,6 +440,8 @@ textarea {
 .pagination .nav-links,
 .sticky-post,
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 .site-info,
 #cancel-comment-reply-link,
 img:after,
@@ -462,6 +464,8 @@ h6 {
 .comment-author .fn,
 .no-comments,
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 h1,
 h2,
 h3,
@@ -516,6 +520,8 @@ h3 {
 }
 
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 .site-description,
 .nav-links,
 .page-title,
@@ -549,7 +555,6 @@ h6 {
   font-size: 0.59259em;
 }
 
-.site-title,
 .page-title {
   font-weight: normal;
 }
@@ -1910,7 +1915,7 @@ body.page .main-navigation {
 .site-branding {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   color: #cccccc;
   position: relative;
@@ -1932,31 +1937,45 @@ body.page .main-navigation {
   width: auto;
 }
 
-.site-title {
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
   color: #fff;
-  font-size: 1.125em;
+  font-size: 1.125em !important;
   font-weight: 600;
   flex: 1 1 auto;
   margin: 0;
 }
 
-.site-title a {
+.site-title a,
+.wp-block-a8c-site-title a,
+.wp-block-a8c-site-title:focus a {
   color: #fff;
 }
 
-.site-title a:link, .site-title a:visited {
+.site-title a:link, .site-title a:visited,
+.wp-block-a8c-site-title a:link,
+.wp-block-a8c-site-title a:visited,
+.wp-block-a8c-site-title:focus a:link,
+.wp-block-a8c-site-title:focus a:visited {
   color: #fff;
 }
 
-.site-title a:hover {
+.site-title a:hover,
+.wp-block-a8c-site-title a:hover,
+.wp-block-a8c-site-title:focus a:hover {
   color: #c6c6c6;
 }
 
-.featured-image .site-title {
+.featured-image .site-title, .featured-image
+.wp-block-a8c-site-title, .featured-image
+.wp-block-a8c-site-title:focus {
   margin: 0;
 }
 
-.site-description {
+.site-description,
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
   flex: initial;
   color: #fff;
   font-size: 0.71111em;
@@ -1964,6 +1983,14 @@ body.page .main-navigation {
   margin: 0.27rem 0 0;
 }
 
+@media only screen and (min-width: 768px) {
+  .site-description,
+  .wp-block-a8c-site-description,
+  .wp-block-a8c-site-description:focus {
+    text-align: left;
+  }
+}
+
 .site-header.featured-image {
   /* Hide overflow for overflowing featured image */
   overflow: hidden;

sophisticated-business/style.css

@@ -440,6 +440,8 @@ textarea {
 .pagination .nav-links,
 .sticky-post,
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 .site-info,
 #cancel-comment-reply-link,
 img:after,
@@ -462,6 +464,8 @@ h6 {
 .comment-author .fn,
 .no-comments,
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 h1,
 h2,
 h3,
@@ -516,6 +520,8 @@ h3 {
 }
 
 .site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus,
 .site-description,
 .nav-links,
 .page-title,
@@ -549,7 +555,6 @@ h6 {
   font-size: 0.59259em;
 }
 
-.site-title,
 .page-title {
   font-weight: normal;
 }
@@ -1916,7 +1921,7 @@ body.page .main-navigation {
 .site-branding {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   color: #cccccc;
   position: relative;
@@ -1938,31 +1943,45 @@ body.page .main-navigation {
   width: auto;
 }
 
-.site-title {
+.site-title,
+.wp-block-a8c-site-title,
+.wp-block-a8c-site-title:focus {
   color: #fff;
-  font-size: 1.125em;
+  font-size: 1.125em !important;
   font-weight: 600;
   flex: 1 1 auto;
   margin: 0;
 }
 
-.site-title a {
+.site-title a,
+.wp-block-a8c-site-title a,
+.wp-block-a8c-site-title:focus a {
   color: #fff;
 }
 
-.site-title a:link, .site-title a:visited {
+.site-title a:link, .site-title a:visited,
+.wp-block-a8c-site-title a:link,
+.wp-block-a8c-site-title a:visited,
+.wp-block-a8c-site-title:focus a:link,
+.wp-block-a8c-site-title:focus a:visited {
   color: #fff;
 }
 
-.site-title a:hover {
+.site-title a:hover,
+.wp-block-a8c-site-title a:hover,
+.wp-block-a8c-site-title:focus a:hover {
   color: #c6c6c6;
 }
 
-.featured-image .site-title {
+.featured-image .site-title, .featured-image
+.wp-block-a8c-site-title, .featured-image
+.wp-block-a8c-site-title:focus {
   margin: 0;
 }
 
-.site-description {
+.site-description,
+.wp-block-a8c-site-description,
+.wp-block-a8c-site-description:focus {
   flex: initial;
   color: #fff;
   font-size: 0.71111em;
@@ -1970,6 +1989,14 @@ body.page .main-navigation {
   margin: 0.27rem 0 0;
 }
 
+@media only screen and (min-width: 768px) {
+  .site-description,
+  .wp-block-a8c-site-description,
+  .wp-block-a8c-site-description:focus {
+    text-align: right;
+  }
+}
+
 .site-header.featured-image {
   /* Hide overflow for overflowing featured image */
   overflow: hidden;