@cagovweb/state-template 6.5.0 → 6.5.2

package/dist/css/cagov.core.css

@@ -1,4 +1,4 @@
-/*! State Web Template Version 6.5.0 */
+/*! State Web Template Version 6.5.2 */
 @charset "UTF-8";
 /*!
  * Bootstrap  v5.3.3 (https://getbootstrap.com/)
@@ -12208,6 +12208,8 @@ textarea.form-control-lg {
   --alert-danger-border: color-mix(in srgb, var(--state-danger-bg), #000 7%);
   --blockquote-border-color: var(--gray-100, #ededef) !default;
   --text-field-color: rgba(255 255 255 / 80%);
+  --ca-gov-logo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8192 4563'><defs><linearGradient id='grad1' y1='2329' x2='0' y2='4499' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%238b5a24'/><stop offset='1' stop-color='%23441a12'/></linearGradient><linearGradient id='grad2' y1='396' x2='0' y2='4498' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%231b93b8'/><stop offset='.6' stop-color='%231b93b8'/><stop offset='1' stop-color='%2304628d'/></linearGradient></defs><path fill='url(%23grad1)' d='M7850 3454l-4 2c-6-125-108-382-197-463 39-115-15-173-46-212-18-23-79-39-106-49-97-147-304-280-593-365-188-55-410-91-661-96-11 0-24-1-37-1-25 0-53 1-84 3-230 13-583 64-665 64h-7c-35-2-120-40-221-79-119-47-257-98-360-98 0 0-21 0-31 2-97 12-324 157-409 203-58 32-335 150-345 153-133 45-227 197-267 223-4-16-54-86-125-86s-17 1-25 3c-86 36-80 99-80 130-17-7-42-38-89-37s-37 4-59 14c-95 51-44 134-66 163-34 45-146 157-188 234-18 32 2 115-12 148-37 91-238 251-256 288-7 17 47 71 114 123 61 48 82 79 175 104s385-51 443-57h1c17 0 47 11 86 21 34 9 75 17 121 17s26 0 39-2c60-13 100-40 133-73 54-55 86-125 148-152 47-21 108-37 161-37s50 4 70 13c-99 177-77 414-112 448-39 37-69 76-92 113-85 130-97 248-137 276-11 8-26 10-42 10-46 0-109-22-154-22s-20 1-29 4c-53 19-176 133-131 160 14 1 216 1 428 1h184c6 0 118-103 124-103h299c28-4 25-49 154-115 146-57 76-339 263-554 2 0 57-52 70-52 65 0 174 118 566 118s487-135 541-135 81 41 81 54c-175 298 266 632 230 653-1 1-3 1-4 1-15 0-58-24-122-24s-55 4-87 15c-72 24-129 114-74 141 15 0 190 1 364 1s194 0 263-1c22-3 20-45 19-86-1-27-1-53 5-68 18-24 35-108 81-167 46-50 81-89 119-89s31 7 47 21c83 45 282 70 395 111 47 17 80 36 82 62-2 14-13 18-29 18s-15-1-23-2c-28-4-64-13-99-13s-36 3-52 9c-51 19-103 75-118 116-8 22-5 40 16 45h470c54 0 34-108 154-348 18-68-151-160-175-288-16-84-32-250-34-412l3-1 1-1hZ'/><path fill='url(%23grad2)' d='M5362 193h774l711 1843c-187-43-388-67-598-72h-44c-30 0-61 1-90 3h-10c-13 1-26 2-39 3l-312-807-327 846c-9-4-18-8-27-11-19-8-39-16-59-24-156-62-269-113-422-121-153-7-208 25-208 25l651-1685ZM2279 4542c478 0 838-95 1157-264l69-174c-113 17-258 49-374 21s-180-75-289-161c-42-33-109-87-161-159-120 28-248 43-389 43-924 0-1569-643-1569-1563s681-1568 1550-1550c476 10 919 194 1318 593l283-718C3432 236 2874 30 2292 30S1107 249 685 646C246 1058 4 1639 4 2281c0 1332 936 2262 2275 2262v-1h0Z'/><path fill='%23b91f39' d='M2886 1844l-148-424-148 424h-446l361 276-128 424 361-276 361 276-128-424 361-276h-446 1-Z'/></svg>")
+    no-repeat;
 }
 /* -----------------------------------------
    OCEANSIDE COLOR THEME
@@ -15020,7 +15022,7 @@ a.list-group-item {
   transform: translateX(-50%);
   z-index: 999;
 
-  a {
+  & a {
     width: 1px;
     height: 1px;
     text-align: center;
@@ -15277,7 +15279,7 @@ h2 {
       align-content: center;
     }
 
-    img {
+    & img {
       max-width: 300px;
       max-height: 55px;
       object-fit: contain !important;
@@ -15292,7 +15294,7 @@ h2 {
       }
     }
 
-    a {
+    & a {
       position: relative;
       text-decoration: none;
       color: black;
@@ -15413,7 +15415,7 @@ h2 {
       height: 55px;
       max-height: 45px;
 
-      a {
+      & a {
         max-width: 225px;
       }
     }
@@ -15435,17 +15437,19 @@ h2 {
   .cagov-logo {
     margin-right: 1.5rem;
 
-    img {
+    & img {
       height: 1.7rem;
     }
 
     .ca-gov-logo-svg {
-      height: 1.7rem;
-      width: auto;
+      vertical-align: middle;
+      aspect-ratio: 9 / 5;
+      display: inline-block;
+      width: 50px;
     }
   }
 
-  ul {
+  & ul {
     list-style: none;
     margin: 5px 0;
 
@@ -15467,7 +15471,7 @@ h2 {
     padding-left: 0;
     margin-top: 1rem;
 
-    li {
+    & li {
       display: inline-block;
     }
   }
@@ -15478,10 +15482,10 @@ h2 {
     font-size: 1.125rem;
     line-height: 1.6rem;
 
-    li {
+    & li {
       margin-right: 20px;
 
-      a {
+      & a {
         color: var(--black, #000);
         text-decoration: none;
 
@@ -15511,7 +15515,7 @@ h2 {
       margin-top: 5px;
     }
 
-    ul > li {
+    & ul > li {
       display: inline-block;
     }
   }
@@ -15526,10 +15530,7 @@ h2 {
    SITE SEARCH - /src/css/cagov/search.css
 ----------------------------------------- */
 
-/* stylelint-disable no-descending-specificity */
-
-.search-container,
-.featured-search.active {
+.search-container {
   overflow: hidden;
   z-index: 7;
   position: relative;
@@ -15546,6 +15547,51 @@ h2 {
     top: 96px;
   }
 
+  #Search {
+    display: flex;
+
+    .gsc-search-button {
+      right: 50px;
+      background-color: var(--gray-600, #72717c);
+      border-color: var(--gray-600, #72717c);
+      color: var(--white, #fff);
+
+      &:focus {
+        outline: 2px solid var(--outline-dark-mode-color);
+        outline-offset: -4px;
+      }
+
+      &:hover,
+      &:focus {
+        background-color: var(--gray-800, #4a4958);
+        border-color: var(--gray-800, #4a4958);
+      }
+
+      .ca-gov-icon-search {
+        color: var(--white, #fff);
+      }
+
+      @media (width <= 991px) {
+        background-color: var(--white, #fff);
+        border-color: var(--white, #fff);
+
+        .ca-gov-icon-search {
+          color: var(--gray-700, #5e5e6a);
+        }
+
+        &:hover,
+        &:focus {
+          background-color: var(--gray-50, #fafafa);
+          border-color: var(--gray-50, #fafafa);
+
+          .ca-gov-icon-search {
+            color: var(--gray-900, #3b3a48);
+          }
+        }
+      }
+    }
+  }
+
   .search-textfield {
     font-size: 1.1rem;
     width: 100%;
@@ -15608,52 +15654,21 @@ h2 {
     float: left;
     width: 100%;
   }
-
-  .close-search {
-    display: none;
-    position: absolute;
-    right: -10px;
-    cursor: pointer;
-
-    .sr-only {
-      height: unset !important;
-      width: unset !important;
-      position: relative !important;
-      clip: unset !important;
-      background: none !important;
-      margin: 0 !important;
-      font-size: 1.125rem !important;
-      color: var(--color-p2, #046b99);
-      text-decoration: underline;
-
-      &:hover,
-      &:focus {
-        color: var(--color-p2-darker, #214a68);
-        text-decoration: none;
-      }
-    }
-
-    @media (width <= 991px) {
-      right: 0;
-      display: none;
-    }
-  }
 }
 
 input[type="search"].search-textfield {
-  padding-left: 10px;
   -webkit-appearance: none;
   background-color: canvas;
   border: 1px solid #72717c;
   border-radius: 5px 0 0 5px;
+}
 
-  .search-container & {
-    @media (width <= 991px) {
-      border-color: var(--white, #fff);
+@media (width <= 991px) {
+  input[type="search"].search-textfield {
+    border-color: var(--white, #fff);
 
-      &:focus {
-        outline-offset: -4px;
-      }
+    &:focus {
+      outline-offset: -4px;
     }
   }
 }
@@ -15673,29 +15688,11 @@ input[type="search"].search-textfield {
   .featured-search {
     display: block;
     position: absolute;
-    top: 240px;
     padding: 0;
     max-height: 100%;
     border-radius: 0;
-    width: 60%;
-    left: 20%;
-
-    .flexbox & {
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-      width: 60%;
-      max-width: 630px;
-    }
-
-    &.play-animation {
-      animation-duration: 1s;
-      animation-fill-mode: both;
-      animation-name: pulse;
-    }
 
     .search-textfield {
-      padding: 14px;
       border-color: var(--gray-600, #72717c) !important;
       font-size: 1.1rem;
       height: 38px;
@@ -15706,408 +15703,64 @@ input[type="search"].search-textfield {
       width: 55px;
       transition: all 0.4s;
 
-      button {
-        transition: all 0.4s;
-        font-size: 2.5rem;
-        width: 60px;
-        appearance: none;
-
-        > span {
-          font-size: 2.8125rem;
-          line-height: 2.8125rem;
-        }
-      }
-    }
-  }
-
-  .featured-search.active {
-    position: relative;
-    visibility: visible;
-    opacity: 1;
-
-    @media (width >= 992px) {
-      position: absolute;
-    }
-
-    transition:
-      top 0.4s,
-      left 0.2s 0.4s,
-      width 0.2s 0.4s,
-      background-color 0.4s + 0.2s,
-      border 0.4s,
-      padding 0.2s 0.4s;
-    top: 96px;
-    left: 0;
-    padding: 20px 0;
-    border-radius: 0;
-    padding-right: 15%;
-    padding-left: 15%;
-    border-bottom: none;
-    width: 100%;
-    max-width: 100%;
-
-    .close-search {
-      display: none;
-    }
-
-    .search-textfield {
-      font-size: 1.1rem;
-      height: 40px;
-      width: 100%;
-      border-radius: var(--border-radius-base);
-      border: 3px solid transparent;
-      padding: 0 4px;
-      transition: border 0.4s;
-    }
-  }
-}
-
-/* Resize search bar to look better on tablet size screens */
-@media (768px <= width <= 992px) {
-  .featured-search {
-    left: 10%;
-    width: 80%;
-  }
-
-  .flexbox .featured-search {
-    left: 0;
-    width: 100%;
-  }
-
-  .featured-search.active {
-    width: 100%;
-  }
-}
-
-.agency-form {
-  margin-top: var(--spacer, 1rem) !important;
-  margin-bottom: var(--spacer, 1rem) !important;
-
-  .textfield-container {
-    float: left;
-    padding-right: 44px;
-    margin-right: -44px;
-    width: 100%;
-  }
-
-  .search-textfield {
-    width: 100%;
-  }
-
-  .submit-container {
-    float: left;
-    height: 40px;
-
-    button {
-      color: #fff;
-      border: none;
-      width: 44px;
-      height: 100%;
-      float: left;
-      font-size: 1.5rem;
-      line-height: 0.9375rem;
-      padding: 0;
-      -webkit-appearance: none;
-
-      > span {
-        position: relative;
-        top: 0;
-        font-size: 1.87rem;
-        line-height: 1.875rem;
-      }
-
-      @media (width <= 991px) {
-        font-size: 2rem;
-        line-height: 1em;
-        padding-top: 0;
-      }
-    }
-  }
-
-  input,
-  button {
-    height: 40px;
-    line-height: 2.5rem;
-  }
-
-  button {
-    background: var(--gray-600, #72717c);
-
-    > span {
-      top: 0;
-      font-size: 1.8rem;
-    }
-  }
-}
-
-.search-container,
-.search-container.featured-search.active {
-  .textfield-container {
-    /* Desktop Search Button Padding */
-    margin-right: -80px;
-    padding-right: 80px;
-
-    /* Mobile Search button padding */
-    @media (width <= 991px) {
-      margin-right: -48px;
-      padding-right: 44px;
-    }
-  }
-
-  .submit-container {
-    width: auto;
-  }
-
-  .search-locator {
-    color: var(--gray-900, #3b3a48);
-    float: left;
-    text-align: center;
-    width: 100px;
-    position: relative;
-    display: none;
-    line-height: inherit !important;
-    cursor: pointer;
-
-    [class^="ca-gov-icon-"] {
-      font-size: 1.4rem;
-      padding: 0 !important;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      left: 0;
-    }
-
-    small {
-      position: absolute;
-      top: 1.7em;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    /* Active on mobile */
-    @media (width <= 991px) {
-      width: 75px;
-      margin-left: 5px;
-    }
-  }
-
-  &.active {
-    .search-locator {
-      display: block;
-    }
-  }
-}
-
-.search-container.featured-search {
-  @media (width <= 991px) {
-    padding: 0 1rem;
-    max-height: 100%;
-  }
-
-  &:hover,
-  &:focus {
-    background: none;
-  }
-
-  &.active {
-    background-color: var(--gray-100, #f3f3f4);
-    border-top: 1px solid var(--gray-300, #bcbbc1);
-  }
-}
-
-@media (width >= 992px) {
-  .fixed.compact .search-container {
-    opacity: 0;
-  }
-
-  .active-search .fixed.compact .search-container,
-  .fixed.compact .search-container.active {
-    opacity: 1;
-    top: 55px;
-  }
-}
-
-/* full width navigation search container */
-@media (width >= 992px) {
-  .nav-full-width + .search-container,
-  .nav-full-width + .featured-search.active {
-    top: 35px;
-  }
-
-  .active-search .fixed.compact .nav-full-width + .search-container,
-  .fixed.compact .nav-full-width + .search-container.active {
-    opacity: 1;
-    top: 35px;
-  }
-}
-
-@media (992px <= width <= 1200px) {
-  .nav-full-width + .search-container,
-  .nav-full-width + .featured-search.active {
-    top: 32px;
-  }
-
-  .active-search .fixed.compact .nav-full-width + .search-container,
-  .fixed.compact .nav-full-width + .search-container.active {
-    opacity: 1;
-    top: 32px;
-  }
-}
-
-/* Search Button */
-
-button.gsc-search-button {
-  border-radius: 0 5px 5px 0;
-  padding: 0 12px;
-  border: 1px solid;
-  min-height: 38px;
-  margin-left: -1px;
-}
-
-/* ------------- Custom search box (not google) -------------- */
-.search-container {
-  #Search {
-    display: flex;
-
-    .gsc-search-button {
-      right: 50px;
-      background-color: var(--gray-600, #72717c);
-      border-color: var(--gray-600, #72717c);
-      color: var(--white, #fff);
-
-      &:focus {
-        outline: 2px solid var(--outline-dark-mode-color);
-        outline-offset: -4px;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: var(--gray-800, #4a4958);
-        border-color: var(--gray-800, #4a4958);
-      }
-
-      .ca-gov-icon-search {
-        color: var(--white, #fff);
-      }
-
-      @media (width <= 991px) {
-        background-color: var(--white, #fff);
-        border-color: var(--white, #fff);
-
-        .ca-gov-icon-search {
-          color: var(--gray-700, #5e5e6a);
-        }
-
-        &:hover,
-        &:focus {
-          background-color: var(--gray-50, #fafafa);
-          border-color: var(--gray-50, #fafafa);
-
-          .ca-gov-icon-search {
-            color: var(--gray-900, #3b3a48);
-          }
-        }
-      }
-    }
-
-    .close-search-btn {
-      display: block;
-
-      .sr-only {
-        color: var(--color-p2, #046b99);
-        text-decoration: underline;
-
-        &:hover,
-        &:focus {
-          color: var(--color-p2-darker, #214a68);
-          text-decoration: none;
-        }
-      }
-    }
-
-    .close-search {
-      display: block;
-      right: 0;
-
-      @media (width <= 991px) {
-        display: block;
-        cursor: pointer;
-        min-height: 38px;
-
-        .sr-only {
-          height: unset !important;
-          width: unset !important;
-          position: relative !important;
-          clip: unset !important;
-          background: none !important;
-          margin: 0 !important;
-          font-size: 1.125rem !important;
-        }
-      }
-    }
-  }
-
-  &:hover,
-  &:focus,
-  &.active {
-    .search-textfield {
-      background-color: #fff;
-    }
-
-    .submit-container button {
-      border-color: #fff;
-    }
-  }
-
-  &.active {
-    max-height: 300px;
-    padding: 20px 15%;
-
-    /* Active on mobile 991px */
-    @media (width <= 991px) {
-      padding-top: 1.125rem;
-      padding-bottom: 1.125rem;
-    }
-
-    .close-search {
-      display: block;
+      button {
+        transition: all 0.4s;
+        font-size: 2.5rem;
+        width: 60px;
+        appearance: none;
 
-      @media (width <= 991px) {
-        display: none;
+        > span {
+          font-size: 2.8125rem;
+          line-height: 2.8125rem;
+        }
       }
     }
+  }
+}
 
-    div.gsc-clear-button {
-      width: 40px;
+/* Resize search bar to look better on tablet size screens */
+@media (768px <= width <= 992px) {
+  .featured-search {
+    left: 10%;
+    width: 80%;
+  }
+}
 
-      &::before {
-        content: "\4d";
-        font-family: CaGov;
-        font-size: 2rem;
-        width: 100%;
-        color: var(--gray-100, #ededef);
-        display: block;
-        margin-top: 12px;
-        margin-left: 2px;
-      }
-    }
+.search-container.featured-search {
+  @media (width <= 991px) {
+    padding: 0 1rem;
+    max-height: 100%;
+  }
 
-    background-color: var(--gray-100, #f3f3f4);
+  &:hover,
+  &:focus {
+    background: none;
+  }
+}
 
-    .submit-container button {
-      border-color: var(--gray-200, #d4d4d7);
-      background: var(--gray-700, #5e5e6a);
-    }
+@media (width >= 992px) {
+  .fixed.compact .search-container {
+    opacity: 0;
+  }
+
+  .active-search .fixed.compact .search-container {
+    opacity: 1;
+    top: 55px;
   }
 }
 
+button.gsc-search-button {
+  border-radius: 0 5px 5px 0;
+  padding: 0 12px;
+  border: 1px solid;
+  min-height: 38px;
+  margin-left: -1px;
+}
+
+/* ------------- Custom search box (not google) -------------- */
+
 .featured-search {
-  div.gsc-clear-button {
+  & div.gsc-clear-button {
     width: 0;
 
     &::before {
@@ -16135,25 +15788,6 @@ button.gsc-search-button {
   }
 }
 
-.featured-search.active {
-  .search-locator {
-    display: block;
-  }
-
-  .container {
-    #Search {
-      .gsc-search-button {
-        right: 50px;
-        outline-offset: -2px;
-      }
-
-      .close-search-btn {
-        display: block;
-      }
-    }
-  }
-}
-
 /* -----------------------------------------
 GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES 
 /src/css/cagov/search.css
@@ -16295,67 +15929,6 @@ table.gsc-search-box td {
   .full-width-nav .featured-search input.search-textfield {
     padding: 0 8px;
   }
-
-  /* full width featured search hack for IE */
-  @media all and (-ms-high-contrast: none) {
-    .full-width-nav .featured-search {
-      width: 100%;
-      max-width: 100%;
-      padding-right: 15px;
-
-      .container {
-        width: 40%;
-        float: right;
-      }
-    }
-
-    *::-ms-backdrop,
-    .full-width-nav .featured-search {
-      width: 100%;
-      max-width: 100%;
-      padding-right: 15px;
-
-      .container {
-        width: 40%;
-        float: right;
-      }
-    }
-  }
-}
-
-@media (992px <= width <= 1200px) {
-  /* full width featured search hack for IE */
-  @media all and (-ms-high-contrast: none) {
-    .full-width-nav .featured-search {
-      width: 100%;
-      max-width: 100%;
-      padding-right: 15px;
-
-      .container {
-        width: 40%;
-        float: right;
-      }
-    }
-
-    *::-ms-backdrop,
-    .full-width-nav .featured-search {
-      width: 100%;
-      max-width: 100%;
-      padding-right: 15px;
-
-      .container {
-        width: 40%;
-        float: right;
-      }
-    }
-  }
-}
-
-/* search box icons for mobile */
-@media (width <= 991px) {
-  .search-container #Search .close-search {
-    padding-left: 10px;
-  }
 }
 
 /* clears the ‘X’ from Internet Explorer */
@@ -16650,7 +16223,7 @@ input[type="search"]::-webkit-search-results-decoration {
   margin: 0;
   padding: 0;
 
-  a {
+  & a {
     text-decoration: none;
 
     &:focus {
@@ -16836,8 +16409,8 @@ input[type="search"]::-webkit-search-results-decoration {
       -moz-box-flex: 1;
       flex: 1 1 auto;
 
-      .noflex &,
-      .oldie & {
+      .noflex,
+      .oldie {
         display: table-cell;
       }
 
@@ -16906,7 +16479,7 @@ input[type="search"]::-webkit-search-results-decoration {
     .nav-item:hover .sub-nav {
       display: block;
 
-      .touch & {
+      .touch {
         display: none;
       }
     }
@@ -17056,7 +16629,7 @@ input[type="search"]::-webkit-search-results-decoration {
       margin: 0 2px;
       text-decoration: none;
 
-      span[class^="ca-gov-icon"]:not(.carrot) {
+      & span[class^="ca-gov-icon"]:not(.carrot) {
         font-size: 1.5rem;
         display: inline-block;
         vertical-align: -2px;
@@ -17224,8 +16797,8 @@ input[type="search"]::-webkit-search-results-decoration {
         .unit1 {
           min-height: unset !important;
 
-          a.second-level-link:hover,
-          a.second-level-link:focus {
+          & a.second-level-link:hover,
+          & a.second-level-link:focus {
             background-color: var(--gray-50, #fafafa);
             text-decoration: none;
           }
@@ -17238,9 +16811,23 @@ input[type="search"]::-webkit-search-results-decoration {
         &.has-sub {
           .carrot {
             position: absolute;
-            right: 0.75rem;
+            right: 1.2rem;
             top: 0.35rem;
             transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
+
+            &::after {
+              content: "";
+              display: inline-block;
+              text-decoration: none;
+              position: relative;
+              width: 0.55rem;
+              height: 0.55rem;
+              border-top: 2px solid var(--color-p2, #046b99);
+              border-left: 2px solid var(--color-p2, #046b99);
+              transform: rotate(225deg);
+              vertical-align: middle;
+              top: -2px;
+            }
           }
         }
 
@@ -17330,34 +16917,41 @@ input[type="search"]::-webkit-search-results-decoration {
   }
 
   /* button carrot */
-  .first-level-btn[aria-expanded="false"] .rotate {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    font-size: 1.5rem !important;
-    line-height: 3.2rem !important;
-    width: 55px !important;
-    height: 55px !important;
-    text-align: center;
-    cursor: pointer;
-    border: none;
-    transition: all 0.2s ease !important;
-    color: var(--white, #fff) !important;
-  }
+  .first-level-btn {
+    &[aria-expanded="false"] .rotate,
+    &[aria-expanded="true"] .rotate {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 55px !important;
+      height: 55px !important;
+      text-align: center;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s ease !important;
+      color: var(--white, #fff) !important;
 
-  .first-level-btn[aria-expanded="true"] .rotate {
-    transform: rotate(90deg) !important;
-    position: absolute;
-    width: 55px !important;
-    height: 55px !important;
-    line-height: 3rem !important;
-    font-size: 1.5rem !important;
-    top: 0;
-    right: 0;
-    text-align: center;
-    transition: all 0.2s ease !important;
-    color: var(--white, #fff) !important;
+      &::after {
+        content: "";
+        display: inline-block;
+        text-decoration: none;
+        position: absolute;
+        width: 0.55rem;
+        height: 0.55rem;
+        border-top: 2px solid #fff;
+        border-left: 2px solid #fff;
+        vertical-align: middle;
+        top: 50%;
+        transform: translateY(-50%) rotate(135deg);
+        right: 1.5rem;
+        margin-left: 0.5rem;
+      }
+    }
+
+    &[aria-expanded="true"] .rotate {
+      transform: rotate(90deg) !important;
+    }
   }
 
   /* Side nav second level active styles */
@@ -17893,7 +17487,7 @@ header.nav-overlay {
   min-height: 1.75rem;
   margin: 0.4rem 0 0 auto;
 
-  span {
+  & span {
     height: 3px;
     width: 32px;
     display: block;
@@ -17919,20 +17513,20 @@ header.nav-overlay {
   }
 
   &[aria-expanded="true"] {
-    span:nth-child(1) {
+    & span:nth-child(1) {
       top: 12px;
       width: 0%;
     }
 
-    span:nth-child(2) {
+    & span:nth-child(2) {
       transform: rotate(45deg);
     }
 
-    span:nth-child(3) {
+    & span:nth-child(3) {
       transform: rotate(-45deg);
     }
 
-    span:nth-child(4) {
+    & span:nth-child(4) {
       top: 12px;
       width: 0%;
     }
@@ -18206,7 +17800,7 @@ header.nav-overlay {
     }
   }
 
-  a {
+  & a {
     display: inline-block;
     padding: 0;
     text-decoration: underline;
@@ -18220,7 +17814,7 @@ header.nav-overlay {
     }
   }
 
-  ul {
+  & ul {
     padding-left: 0;
     margin-bottom: 0;
     margin-left: -5px;
@@ -18240,10 +17834,10 @@ header.nav-overlay {
       }
     }
 
-    li {
+    & li {
       padding: 0 8px;
 
-      button {
+      & button {
         font-size: 100%;
         outline: none !important;
         position: relative;
@@ -18251,7 +17845,7 @@ header.nav-overlay {
         background-color: transparent;
         border: none;
 
-        span {
+        & span {
           font-size: 100% !important;
         }
 
@@ -18306,7 +17900,7 @@ header.nav-overlay {
       justify-content: flex-end;
       min-height: 38px;
 
-      a {
+      & a {
         margin: 0;
         margin-left: 1rem;
         font-size: 0.95rem;
@@ -18316,7 +17910,7 @@ header.nav-overlay {
         }
       }
 
-      button {
+      & button {
         margin: 0;
         padding-right: 0;
         font-size: 0.95rem;
@@ -18331,8 +17925,14 @@ header.nav-overlay {
     }
 
     .social-media-links {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      min-height: 38px;
+      align-items: center;
+
       /* stylelint-disable-next-line no-descending-specificity */
-      a {
+      & a {
         margin: 0 10px;
         color: var(--black, #000);
         text-decoration: none;
@@ -18343,16 +17943,10 @@ header.nav-overlay {
         }
       }
 
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      min-height: 38px;
-      align-items: center;
-
       .header-cagov-logo {
         margin-right: 0.5rem;
 
-        img {
+        & img {
           left: 0;
           height: 24px;
           margin-top: 6px;
@@ -18361,9 +17955,12 @@ header.nav-overlay {
 
         .ca-gov-logo-svg {
           vertical-align: middle;
+          aspect-ratio: 9 / 5;
+          display: inline-block;
+          width: 45px;
         }
 
-        a {
+        & a {
           margin: 0;
           padding-top: 0;
         }
@@ -18484,7 +18081,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p2-darker, #214a68);
       border-color: var(--white, #fff);
@@ -18494,8 +18091,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18522,7 +18118,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p3-darker, #242830);
       border-color: var(--white, #fff);
@@ -18532,8 +18128,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18561,7 +18156,7 @@ header.nav-overlay {
   }
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--white, #fff);
 
     &:hover,
@@ -18588,7 +18183,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p2-darker, #214a68);
       border-color: var(--white, #fff);
@@ -18598,8 +18193,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18637,8 +18231,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18693,7 +18286,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p2-darker, #214a68);
       border-color: var(--white, #fff);
@@ -18703,8 +18296,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18732,7 +18324,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p3-darker, #242830);
       border-color: var(--white, #fff);
@@ -18742,8 +18334,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18770,7 +18361,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: rgb(255 255 255 / 20%);
       border-color: var(--white, #fff);
@@ -18780,8 +18371,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18837,7 +18427,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p2-darker, #214a68);
       border-color: var(--white, #fff);
@@ -18847,8 +18437,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18876,7 +18465,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p3-darker, #242830);
       border-color: var(--white, #fff);
@@ -18886,8 +18475,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18943,7 +18531,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p2-darker, #214a68);
       border-color: var(--white, #fff);
@@ -18953,8 +18541,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -18982,7 +18569,7 @@ header.nav-overlay {
     &:not(:disabled, .disabled):active,
     &:not(:disabled, .disabled).active,
     .show > .dropdown-toggle,
-    .open > .dropdown-toggle & {
+    .open > .dropdown-toggle {
       color: var(--white, #fff);
       background-color: var(--color-p3-darker, #242830);
       border-color: var(--white, #fff);
@@ -18992,8 +18579,7 @@ header.nav-overlay {
 
     &.disabled,
     &[disabled],
-    fieldset[disabled] & {
-      &,
+    fieldset[disabled] {
       &:hover,
       &:focus,
       &:active,
@@ -19074,7 +18660,7 @@ textarea.sourcecode {
   color: var(--white, #fff);
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--white, #fff);
     text-decoration: underline;
 
@@ -19861,7 +19447,7 @@ html {
     margin-left: 2.5rem;
   }
 
-  img,
+  & img,
   .alert-img {
     max-width: 28px;
     max-height: 28px;
@@ -19882,7 +19468,7 @@ html {
     background: none;
   }
 
-  a:not(.btn),
+  & a:not(.btn),
   .close {
     color: var(--white, #fff);
 
@@ -20023,7 +19609,6 @@ html {
         color: var(--link-color, #046b99);
         font-weight: 600;
 
-        &,
         &:hover {
           border: none;
           border-top: none !important;
@@ -20130,10 +19715,12 @@ html {
   }
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 .nav-tabs > li > a:hover {
   color: var(--brand-primary-darker, #29597f);
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 .nav-tabs > li > a:focus {
   outline: 2px solid var(--outline-default-color);
   outline-offset: -2px;
@@ -20305,6 +19892,7 @@ html {
     margin: 0;
     font-weight: 600;
 
+    /* stylelint-disable-next-line no-descending-specificity */
     &:focus {
       outline: 2px solid var(--outline-default-color);
       outline-offset: -2px;
@@ -20333,6 +19921,7 @@ html {
     padding: 1.1rem;
     margin-top: -2px;
 
+    /* stylelint-disable-next-line no-descending-specificity */
     a:focus {
       outline: 2px solid var(--outline-default-color);
     }
@@ -20359,13 +19948,13 @@ html {
 /* accordion component specific classes */
 
 /* initial styles */
-cagov-accordion details {
+cagov-accordion > details {
   margin-bottom: 0;
   min-height: 3rem;
   margin-top: 1rem;
   overflow: visible;
 
-  summary {
+  > summary {
     cursor: pointer;
     padding: 0.5rem 3rem 0.5rem 3.75rem;
     background-color: var(--gray-50, #fafafa);
@@ -20435,52 +20024,52 @@ cagov-accordion details {
 
 /* styles applied after custom element javascript runs */
 cagov-accordion:defined {
-  details {
+  > details {
     transition: height 0.2s;
     height: 3rem;
     overflow: visible;
-  }
-
-  summary::-webkit-details-marker {
-    display: none;
-  }
 
-  details summary {
-    list-style: none;
-    border-radius: 4px;
+    > summary {
+      list-style: none;
+      border-radius: 4px;
 
-    &:focus {
-      &::before {
-        background-color: var(--gray-100, #f3f3f4);
+      &::-webkit-details-marker {
+        display: none;
       }
 
-      &::after {
-        outline: 2px solid var(--outline-default-color);
-        outline-offset: -2px;
+      &:focus {
+        &::before {
+          background-color: var(--gray-100, #f3f3f4);
+        }
+
+        &::after {
+          outline: 2px solid var(--outline-default-color);
+          outline-offset: -2px;
+        }
       }
     }
-  }
 
-  details[open] {
-    height: auto;
+    &[open] {
+      height: auto;
 
-    .cagov-open-indicator {
-      &::before {
-        transform: rotate(90deg) translateY(-0.2rem);
+      .cagov-open-indicator {
+        &::before {
+          transform: rotate(90deg) translateY(-0.2rem);
+        }
       }
-    }
 
-    summary {
-      border-radius: 4px 4px 0 0;
+      > summary {
+        border-radius: 4px 4px 0 0;
 
-      &::before {
-        border-radius: 3px 0 0;
-        background-color: var(--gray-100, #f3f3f4);
-      }
+        &::before {
+          border-radius: 3px 0 0;
+          background-color: var(--gray-100, #f3f3f4);
+        }
 
-      &:focus {
-        &::after {
-          border-radius: 3px 3px 0 0;
+        &:focus {
+          &::after {
+            border-radius: 3px 3px 0 0;
+          }
         }
       }
     }
@@ -20785,13 +20374,13 @@ cagov-accordion:defined {
 .side-subnav {
   padding-left: 0;
 
-  li {
+  & li {
     margin: 0;
     padding-left: 0;
     list-style: none;
     font-size: 1.125rem;
 
-    a {
+    & a {
       position: relative;
       display: block;
       padding-top: 0.7rem;
@@ -20842,12 +20431,12 @@ cagov-accordion:defined {
 }
 
 cagov-accordion.sidenav {
-  details {
+  > details {
     border: none;
     min-height: 2rem;
     margin-top: 0;
 
-    summary {
+    > summary {
       border: none;
       background: var(--white, #fff);
       padding: 0.7rem 2rem 0.7rem 1rem;
@@ -20911,7 +20500,7 @@ cagov-accordion.sidenav {
       }
 
       &[open] {
-        summary {
+        > summary {
           color: var(--black, #000);
 
           &::after {
@@ -20940,7 +20529,7 @@ cagov-accordion.sidenav {
         margin-bottom: 0;
         margin-left: 0;
 
-        li {
+        & li {
           &:first-child {
             margin-top: 0;
           }
@@ -20967,12 +20556,12 @@ cagov-accordion.sidenav {
     font-size: calc(var(--font-size-small) + var(--ratio));
   }
 
-  li {
+  & li {
     position: relative;
     padding-left: 0.75rem;
     padding-right: 0.75rem;
 
-    a {
+    & a {
       padding: 0.375rem 0;
     }
 
@@ -21050,7 +20639,7 @@ hr.hr-light {
   border: none;
   background-color: var(--color-s1, #eef8fb);
 
-  img {
+  & img {
     max-width: 100px;
     max-height: 100px;
     border-radius: 50%;
@@ -21063,7 +20652,7 @@ hr.hr-light {
     border-left: 1px solid var(--gray-900, #3b3a48);
   }
 
-  p,
+  & p,
   .executive-name {
     margin-top: 4px;
     margin-bottom: 4px;
@@ -23760,7 +23349,7 @@ fieldset[disabled] .btn-more {
    Number Counter
 ----------------------------------------- */
 .number-counter {
-  .no-js & {
+  .no-js {
     visibility: visible;
   }
 }
@@ -24438,13 +24027,13 @@ fieldset[disabled] .btn-more {
   margin-left: 0;
   padding-left: 0;
 
-  li {
+  & li {
     list-style: none;
     margin: 0;
     font-size: calc(1rem + var(--ratio));
     padding-left: 0;
 
-    a {
+    & a {
       position: relative;
       display: block;
       text-decoration: none !important;
@@ -24509,27 +24098,27 @@ fieldset[disabled] .btn-more {
       }
     }
 
-    a:hover,
-    a:focus {
+    & a:hover,
+    & a:focus {
       text-decoration: none;
       background-color: var(--gray-50, #fafafa);
       color: var(--gray-900, #3b3a48);
     }
 
     /* stylelint-disable-next-line no-descending-specificity */
-    a:focus {
+    & a:focus {
       outline: 2px solid var(--outline-default-color);
       outline-offset: -2px;
     }
 
-    ul {
+    & ul {
       padding-left: 0;
 
-      li {
+      & li {
         margin: 0;
 
         /* stylelint-disable-next-line no-descending-specificity */
-        a {
+        & a {
           padding-left: 2.5rem;
 
           &.active {
@@ -24624,7 +24213,7 @@ fieldset[disabled] .btn-more {
         position: relative;
       }
 
-      ul {
+      & ul {
         margin-top: 0;
         margin-bottom: 0;
       }
@@ -24632,8 +24221,8 @@ fieldset[disabled] .btn-more {
 
     .list-navigation,
     .side-navigation ul {
-      li {
-        a {
+      & li {
+        & a {
           color: var(--white, #fff);
           border-bottom-color: var(--mobile-drawer, #214a68);
 
@@ -24663,7 +24252,7 @@ fieldset[disabled] .btn-more {
             }
           }
 
-          ul li a.active::before {
+          & ul li a.active::before {
             border-left-color: var(--color-p1, #fdb81e);
           }
         }
@@ -25050,12 +24639,19 @@ a.sidenav {
   }
 
   &::after {
-    font-family: CaGov;
-    content: "5";
     position: absolute;
-    top: 0.8rem;
-    right: 0.7rem;
-    font-size: 1.6rem;
+    content: "";
+    display: inline-block;
+    text-decoration: none;
+    width: 0.55rem;
+    height: 0.55rem;
+    border-top: 2px solid var(--color-p2, #046b99);
+    border-left: 2px solid var(--color-p2, #046b99);
+    vertical-align: middle;
+    top: 50%;
+    transform: translateY(-50%) rotate(135deg);
+    right: 1.5rem;
+    margin-left: 0.5rem;
   }
 }
 
@@ -25080,6 +24676,11 @@ a.sidenav {
 .bg-p3 {
   .link-grid {
     border-color: var(--white, #fff);
+
+    &::after {
+      border-top-color: var(--white, #fff);
+      border-left-color: var(--white, #fff);
+    }
   }
 }
 
@@ -25124,11 +24725,7 @@ a.sidenav {
    GLOBALS - /src/css/cagov/globals.css
 ----------------------------------------- */
 .ca-gov-logo-svg {
-  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8192 4563'><defs><linearGradient id='grad1' y1='2329' x2='0' y2='4499' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%238b5a24'/><stop offset='1' stop-color='%23441a12'/></linearGradient><linearGradient id='grad2' y1='396' x2='0' y2='4498' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%231b93b8'/><stop offset='.6' stop-color='%231b93b8'/><stop offset='1' stop-color='%2304628d'/></linearGradient></defs><path fill='url(%23grad1)' d='M7850 3454l-4 2c-6-125-108-382-197-463 39-115-15-173-46-212-18-23-79-39-106-49-97-147-304-280-593-365-188-55-410-91-661-96-11 0-24-1-37-1-25 0-53 1-84 3-230 13-583 64-665 64h-7c-35-2-120-40-221-79-119-47-257-98-360-98 0 0-21 0-31 2-97 12-324 157-409 203-58 32-335 150-345 153-133 45-227 197-267 223-4-16-54-86-125-86s-17 1-25 3c-86 36-80 99-80 130-17-7-42-38-89-37s-37 4-59 14c-95 51-44 134-66 163-34 45-146 157-188 234-18 32 2 115-12 148-37 91-238 251-256 288-7 17 47 71 114 123 61 48 82 79 175 104s385-51 443-57h1c17 0 47 11 86 21 34 9 75 17 121 17s26 0 39-2c60-13 100-40 133-73 54-55 86-125 148-152 47-21 108-37 161-37s50 4 70 13c-99 177-77 414-112 448-39 37-69 76-92 113-85 130-97 248-137 276-11 8-26 10-42 10-46 0-109-22-154-22s-20 1-29 4c-53 19-176 133-131 160 14 1 216 1 428 1h184c6 0 118-103 124-103h299c28-4 25-49 154-115 146-57 76-339 263-554 2 0 57-52 70-52 65 0 174 118 566 118s487-135 541-135 81 41 81 54c-175 298 266 632 230 653-1 1-3 1-4 1-15 0-58-24-122-24s-55 4-87 15c-72 24-129 114-74 141 15 0 190 1 364 1s194 0 263-1c22-3 20-45 19-86-1-27-1-53 5-68 18-24 35-108 81-167 46-50 81-89 119-89s31 7 47 21c83 45 282 70 395 111 47 17 80 36 82 62-2 14-13 18-29 18s-15-1-23-2c-28-4-64-13-99-13s-36 3-52 9c-51 19-103 75-118 116-8 22-5 40 16 45h470c54 0 34-108 154-348 18-68-151-160-175-288-16-84-32-250-34-412l3-1 1-1hZ'/><path fill='url(%23grad2)' d='M5362 193h774l711 1843c-187-43-388-67-598-72h-44c-30 0-61 1-90 3h-10c-13 1-26 2-39 3l-312-807-327 846c-9-4-18-8-27-11-19-8-39-16-59-24-156-62-269-113-422-121-153-7-208 25-208 25l651-1685ZM2279 4542c478 0 838-95 1157-264l69-174c-113 17-258 49-374 21s-180-75-289-161c-42-33-109-87-161-159-120 28-248 43-389 43-924 0-1569-643-1569-1563s681-1568 1550-1550c476 10 919 194 1318 593l283-718C3432 236 2874 30 2292 30S1107 249 685 646C246 1058 4 1639 4 2281c0 1332 936 2262 2275 2262v-1h0Z'/><path fill='%23b91f39' d='M2886 1844l-148-424-148 424h-446l361 276-128 424 361-276 361 276-128-424 361-276h-446 1-Z'/></svg>")
-    no-repeat;
-  aspect-ratio: 9 / 5;
-  width: 45px;
-  display: inline-block;
+  background: var(--ca-gov-logo);
 }
 
 .overflow-hidden {
@@ -25285,6 +24882,22 @@ a.sidenav {
   display: block;
 }
 
+.outline-offset-2:focus {
+  outline-offset: -2px !important;
+}
+
+.outline-offset-3:focus {
+  outline-offset: -3px !important;
+}
+
+.outline-offset-4:focus {
+  outline-offset: -4px !important;
+}
+
+.outline-offset-5:focus {
+  outline-offset: -5px !important;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }