/**
 * Drupal 11 Compatibility Styles
 * Mapping D7 classes to D11 equivalents
 */

/* ============================================
   Drupal 7 → Drupal 11 Class Mapping
   ============================================ */

/* Body classes - D11 uses different class patterns */
body.path-frontpage { /* was: body.front */ }
body.user-logged-in { /* was: body.logged-in */ }
body.path-node { /* was: body.page-node */ }

/* Region classes - D11 structure */
.region-header { /* remains same */ }
.region-sidebar-first { /* was: .region-sidebar */ }
.region-content { /* remains same */ }

/* Block classes - D11 uses BEM-style naming */
.block--system-menu-block { /* was: #block-system-user-menu */ }
.block--menu { /* was: .block-menu */ }
.block__content { /* was: .content in blocks */ }

/* Node classes - D11 structure */
.node--type-blog { /* was: .node-blog */ }
.node--type-page { /* was: .node-page */ }
.node--view-mode-teaser { /* was: .node-teaser */ }
.node--view-mode-full { /* was: .node-full */ }
.node__content { /* was: .content in nodes */ }

/* Field classes - D11 uses consistent naming */
.field--name-body { /* was: .field-name-body */ }
.field--name-field-image { /* was: .field-name-field-image */ }
.field--type-text-with-summary { /* was: .field-type-text-with-summary */ }
.field__label { /* was: .field-label */ }
.field__item { /* was: .field-item */ }
.field__items { /* was: .field-items */ }

/* Views classes - D11 structure */
.views-element-container { /* new wrapper */ }
.views-view { /* was: .view */ }
.views-row { /* was: .views-row */ }
.views-field { /* remains same */ }
.views-field__content { /* was: .field-content */ }
.views-field__field { /* new structure */ }

/* Menu classes - D11 navigation */
.menu { /* remains same */ }
.menu__item { /* was: menu li */ }
.menu__link { /* was: menu a */ }
.menu__link--active { /* was: .active */ }
.menu__link--active-trail { /* was: .active-trail */ }
.menu--main { /* was: #main-menu */ }
.menu--account { /* was: #user-menu */ }

/* Forms - D11 structure */
.form-item { /* remains same */ }
.form-item__label { /* was: .form-item label */ }
.form-item__description { /* was: .description */ }
.form-control { /* new: general input styling */ }
.form-text { /* was: input[type="text"] */ }
.form-email { /* was: input[type="email"] */ }
.form-select { /* was: select */ }
.form-textarea { /* was: textarea */ }
.form-submit { /* was: input[type="submit"] */ }
.form-actions { /* remains same */ }

/* Messages - D11 structure */
.messages { /* remains same */ }
.messages--status { /* was: .status */ }
.messages--warning { /* was: .warning */ }
.messages--error { /* was: .error */ }

/* Breadcrumb - D11 */
.breadcrumb { /* remains same */ }
.breadcrumb__list { /* new structure */ }
.breadcrumb__item { /* was: .breadcrumb li */ }

/* Pager - D11 structure */
.pager { /* remains same */ }
.pager__items { /* was: .pager ul */ }
.pager__item { /* was: .pager li */ }
.pager__link { /* was: .pager a */ }

/* ============================================
   Main Navigation handled in cagp-main-menu.css
   ============================================ */

/* ============================================
   Footer Styles for D11 - Full Width Fix
   ============================================ */

/* Allow main-wrapper to show full-width elements */
html body .main-wrapper {
  overflow: visible;
}

/* Override specific footer width constraints from base CSS */
body #footer {
  width: 100%;
  min-width: 100%;
  max-width: none;
}

/* Footer should span full width - override layout.css constraints */
html body #footer,
html body footer,
html body .main-wrapper #footer,
html body .main-wrapper footer {
  background: #222222;
  color: #ffffff;
  font-size: 14px;
  padding: 50px 0 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Company logo section full width - even inside main-wrapper */
.company-logo {
  background: #f5f5f5;
  padding: 40px 0;
  text-align: center;
  width: 100%;
}

/* Footer content container stays constrained */
footer .container {
  max-width: 950px;
  margin: 0 auto;
  position: relative;
}

.company-logo .container {
  max-width: 950px;
  margin: 0 auto;
  position: relative;
}

/* Footer content styling */
.footer-content {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.footer-content > li {
  flex: 1;
  padding-right: 3%;
  min-width: 300px;
}

.footer-content > li:empty {
  display: none;
}

.footer-content li:last-child {
  padding-right: 0;
}

.footer-content h5 {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 13px;
  text-transform: uppercase;
  color: #ffffff;
}

.footer-content p {
  line-height: 16px;
  font-size: 14px;
  margin: 0 0 10px;
  color: #ffffff;
}

.footer-content a {
  color: #ffffff;
  text-decoration: none;
}

.footer-content a:hover {
  text-decoration: underline;
}

/* Social icons in footer */
.footer-content .social-icon {
  float: left;
}

.footer-content .social-icon li a {
  margin: -2px 7px 0 0;
}

.footer-content .social-icon > li {
  font-size: 14px;
  padding-right: 15px;
}

/* Social icons styling for .social-icon1 */
.social-icon1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
}

.social-icon1 > li {
  margin: 0 17px 0 0;
  display: inline-block;
}

.social-icon1 a {
  background: #ffffff;
  border-radius: 100%;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-left: 6px;
  padding: 1px;
  text-align: center;
}

.social-icon1 i {
  color: #444444;
  font-size: 13px;
  position: relative;
}

/* Copyright section */
.copyright,
.region-footer {
  border-top: 1px solid #4d4d4d;
  margin-top: 45px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 100;
  padding: 20px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #ffffff;
}

.copyright img,
.region-footer img {
  float: left;
  margin: 0 5px 5px 0;
}

.copyright a,
.region-footer a {
  color: #ffffff;
  text-decoration: underline;
}

.copyright a:hover,
.region-footer a:hover {
  color: #ccc;
}

.copyright-left img {
  margin-right: 5px;
}

/* Learn more link */
.learn-more {
  color: #ffffff;
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-transform: uppercase;
}

/* Subscribe button */
.subs-btn {
  background: #ffffff;
  border-radius: 3px;
  color: #444444;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 36px;
  margin: 3px 0 20px;
  min-width: 110px;
  text-align: center;
  text-decoration: none;
}

.subs-btn:hover {
  background: #f0f0f0;
  color: #333;
}

/* Font Awesome icons in footer */
footer .fa {
  color: #444444;
}

/* Address styling */
address {
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  margin-bottom: 10px;
  color: #ffffff;
}

/* Responsive footer adjustments */
@media (max-width: 768px) {
  .footer-content > li {
    float: none;
    width: 100%;
    padding-right: 0;
    margin-bottom: 30px;
  }

  .footer-content > li:last-child {
    margin-bottom: 0;
  }

  .company-logo .container,
  footer .container {
    padding: 0 15px;
  }

  .copyright {
    text-align: center;
  }

  .copyright img {
    float: none;
    display: block;
    margin: 0 auto 10px;
  }
}

/* Clear floats in footer */
footer:after,
.footer-content:after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================
   Content Area Styles for D11
   ============================================ */

/* Node page specific styles */
/* Page title h1 styling - outside content area */
.left-part h1,
.left-part h1.title,
.left-part #page-title,
body.path-node .left-part h1,
body.path-node .left-part h1.title,
body.path-node .left-part #page-title {
  color: #666;
  font-size: 54px;
  font-weight: 100;
  margin: 0 0 11px;
  font-family: YanoneKaffeesatz-ExtraLight, Arial, sans-serif;
}

/* Content area h1 styling - inside content blocks */
body.path-node .left-part .content h1,
body.path-node .content-region h1 {
  color: #666;
  font-size: 54px;
  font-weight: 100;
  margin: 0 0 11px;
  font-family: YanoneKaffeesatz-ExtraLight, Arial, sans-serif;
}

/* Content area h2 styling */
body.path-node .left-part .content h2,
body.path-node .content-region h2,
.left-part .content h2,
.left-part article h2,
.left-part .node__content h2,
.left-part .field-item h2,
.left-part .field__item h2 {
  font-family: clearsans-medium, Arial, sans-serif;
  font-size: 19px;
  margin: 0 0 15px;
  text-align: left;
  font-weight: normal;
  color: #444;
}

/* High specificity rule to ensure h3 styling works - match D11 structure */
/* Content area h3 styling */
.left-part h3,
.left-part .node__content h3,
.left-part article h3,
.left-part .field-item h3,
.left-part .field__item h3,
.left-part .content h3,
body.path-node .left-part h3,
body.path-node .left-part .node__content h3,
body.path-node .left-part .content h3 {
  color: #fb6100;
  font-family: clearsans-medium, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 9px;
}

/* Content area paragraph styling */
body.path-node .left-part .content p,
body.path-node .content-region p,
.left-part .content p,
.left-part article p,
.left-part .node__content p,
.left-part .field-item p,
.left-part .field__item p {
  color: #333;
  font-size: 15px;
  line-height: 21px;
  margin: 0 0 17px;
  font-family: ClearSans-Regular, Arial, sans-serif;
}

/* Content area list styling */
body.path-node .left-part .content ul,
body.path-node .content-region ul,
.left-part .content ul,
.left-part article ul,
.left-part .node__content ul,
.left-part .field-item ul,
.left-part .field__item ul {
  list-style: disc !important;
  margin: 18px 0 18px 36px !important;
}

body.path-node .left-part .content ul li,
body.path-node .content-region ul li,
.left-part .content ul li,
.left-part article ul li,
.left-part .node__content ul li,
.left-part .field-item ul li,
.left-part .field__item ul li {
  padding: 0;
  margin: 3px 0;
}

/* Tables in content */
body.path-node .content-region table {
  width: 100%;
  border-collapse: collapse;
}

body.path-node .content-region table th {
  background-color: #253980;
  color: #fff;
  font-size: 15px;
  padding: 18px 24px;
  text-align: left;
}

/* Table styling for node content - works with both legacy and D11 structure */
body.path-node .content-region table td,
body.page-node .left-part .content table td,
body .left-part table td,
.region-content table td {
  border-bottom: 1px solid #ccc;
  font-size: 15px;
  padding: 18px 23px;
  color: #333;
}

body.path-node .content-region table th,
body.page-node .left-part .content table th,
body .left-part table th,
.region-content table th {
  border-bottom: 2px solid #999;
  font-size: 15px;
  padding: 18px 23px;
  color: #333;
  font-weight: bold;
  text-align: left;
}

body.path-node .content-region table tr:last-child td,
body.page-node .left-part .content table tr:last-child td,
body .left-part table tr:last-child td,
.region-content table tr:last-child td {
  border-bottom: 0 none;
}

/* Forms in content */
body.path-node .form-item {
  margin-bottom: 1.5em;
}

body.path-node .form-item label {
  display: block;
  margin-bottom: .25em;
  font-weight: bold;
}

body.path-node .form-text,
body.path-node .form-email,
body.path-node .form-tel,
body.path-node .form-url,
body.path-node .form-search,
body.path-node .form-number,
body.path-node .form-date,
body.path-node .form-time {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  height: 42px;
  margin: 0 0 24px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}

body.path-node .form-textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0 0 24px;
  padding: 10px 12px;
  width: 100%;
  min-height: 120px;
  font-size: 15px;
  box-sizing: border-box;
}

body.path-node .form-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 24px;
  width: 100%;
  font-size: 15px;
  background-color: white;
}

body.path-node .form-submit,
body.path-node .button {
  background-color: #253980;
  border: 0 none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  padding: 10px 20px;
  text-transform: uppercase;
  margin: 14px 15px 0 0;
  transition: background-color 0.3s ease;
}

body.path-node .form-submit:hover,
body.path-node .button:hover {
  background-color: #1a2660;
}

/* ============================================
   Sidebar Styles for D11
   ============================================ */

.region-sidebar-first .block {
  margin-bottom: 30px;
}

.region-sidebar-first .block h2 {
  font-size: 15px;
  text-align: left;
  font-weight: bold;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  padding: 0 10px;
  color: #253980;
}

.region-sidebar-first .block .content {
  padding: 10px;
}

.region-sidebar-first .block .content a {
  color: #253980;
  text-decoration: none;
}

.region-sidebar-first .block .content a:hover,
.region-sidebar-first .block .content a:focus {
  text-decoration: underline;
}

.region-sidebar-first .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.region-sidebar-first .menu__item {
  border-bottom: 1px solid #e5e5e5;
}

.region-sidebar-first .menu__link {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.region-sidebar-first .menu__link:hover,
.region-sidebar-first .menu__link--active {
  background-color: #f5f5f5;
  color: #253980;
}

/* ============================================
   Front Page Styles for D11
   ============================================ */

body.path-frontpage h2 {
  padding: 30px 0;
  font-family: YanoneKaffeesatz-Thin;
  font-size: 40px;
  color: #333;
}

body.path-frontpage .the-latest-section .views-row {
  float: left;
  position: relative;
  margin: 0 2% 70px 0;
  width: 32%;
}

body.path-frontpage .the-latest-section .views-row:nth-child(3n) {
  margin-right: 0;
}

body.path-frontpage .views-field-title {
  border-bottom: 1px solid #dddddd;
  color: #ff6000;
  padding: 13px 0;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  font-size: 15px;
}

body.path-frontpage .views-field-body {
  font-size: 15px;
  line-height: 19px;
  margin: 0 0 15px;
  font-family: ClearSans-Regular;
}

/* ============================================
   Blog Node Type Styles for D11
   ============================================ */

.node--type-blog.node--view-mode-teaser {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.node--type-blog.node--view-mode-teaser:after {
  content: "";
  display: table;
  clear: both;
}

.node--type-blog .node__title a {
  color: #253980;
  font-size: 24px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.node--type-blog .node__title a:hover,
.node--type-blog .node__title a:focus {
  color: #ff6000;
}

.node--type-blog .node__meta {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
}

.node--type-blog .field--name-field-blog-category {
  margin-bottom: 15px;
}

.node--type-blog .field--name-field-blog-category .field__label {
  display: none;
}

.node--type-blog .field--name-field-blog-category a {
  color: #ff6000;
  text-decoration: none;
  margin-right: 10px;
}

.node--type-blog .field--name-field-blog-category a:hover {
  text-decoration: underline;
}

.node--type-blog .field--name-field-featured-image {
  margin-bottom: 20px;
}

.node--type-blog .field--name-field-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.node--type-blog .field--name-body {
  margin-bottom: 20px;
}

.node--type-blog .node__links {
  margin-top: 20px;
}

.node--type-blog .node__links .node-readmore a {
  background: #253980;
  color: #fff;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.node--type-blog .node__links .node-readmore a:hover {
  background-color: #1a2660;
}

/* ============================================
   Views Styles for D11
   ============================================ */

.views-element-container {
  margin-bottom: 30px;
}

.view-content .views-row {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.view-content .views-row:last-child {
  border-bottom: none;
}

.views-field-title .field-content {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.views-field-body .field-content {
  font-size: 15px;
  line-height: 1.6;
}

/* Latest blog posts block */
.block--views-latest-blog-posts-block .views-field-title .field-content,
.block--views-blog-posts-by-author-block .views-field-title .field-content {
  font-size: 16px;
  margin-bottom: 8px;
}

/* ============================================
   Fallback Menu Hover Rules (Higher Specificity)
   ============================================ */

/* Fallback hover rules that will work regardless of container structure */
body .mainmenu li:hover > ul {
  display: block;
}

body .mainmenu li:hover ul ul {
  display: none;
}

body .mainmenu li:hover li:hover > ul {
  display: block;
}

body .mainmenu li:hover li a {
  display: block;
  padding: 10px 15px;
  color: #666;
  text-decoration: none;
  background: none;
  line-height: normal;
  text-transform: none;
}

body .mainmenu li:hover li a:hover {
  color: #fff;
  background-color: #444;
}

/* Ensure dropdowns are positioned correctly */
body .mainmenu ul ul {
  display: none;
  position: absolute;
  z-index: 10;
  background-color: #f5f5f5;
  min-width: 180px;
  top: 100%;
  left: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

body .mainmenu ul ul ul {
  left: 100%;
  top: 0;
}

/* ============================================
   Responsive Menu for D11
   ============================================ */

.mobile-menu-toggle {
  display: none;
  background: none;
  width: auto;
  text-transform: uppercase;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
  margin: 17px 0 0 15px;
  font-size: 17px;
  color: #FFF;
  padding: 0;
  border: none;
}

@media (max-width: 980px) {
  .mobile-menu-toggle,
  .browse-icon {
    display: block;
  }

  .region-primary-menu .menu--main,
  .region-header-highlighted .menu--main {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #253980;
    z-index: 1000;
  }

  .region-primary-menu .menu--main.active,
  .region-header-highlighted .menu--main.active {
    display: block;
  }

  .region-primary-menu .menu__item,
  .region-header-highlighted .menu__item {
    float: none;
    width: 100%;
  }

  .region-primary-menu .menu__link,
  .region-header-highlighted .menu__link {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}

/* ============================================
   Header Block Styling (Top Menu, Account Menu, Language Switcher)
   ============================================ */

/* Header region layout matching D7 structure */
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Logo positioning - ensure it stays on the left */
#logo {
  flex: 0 0 auto;
  display: block;
  order: -1; /* Ensure logo comes first */
}

#logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Region header contains the utility blocks */
.region-header {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 20px;
  order: 1; /* Ensure region header comes after logo */
  margin-top: 10px;
}

/* Main navigation section should have blue background */
.region-header-highlighted,
section.container:has(#cagp-main-navigation) {
  background-color: rgb(37, 57, 128);
  color: white;
  padding: 0;
  margin: 0 auto;
  width: 100%;
}

/* Container inside header should have proper layout */
.region-header-highlighted .container,
section.container:has(#cagp-main-navigation) > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  /* padding: 0 20px; */

  margin: 0 auto;
  max-width: 950px;
  min-height: 60px;
  position: relative;
}

/* Ensure the navigation wrapper itself is centered */
section.container:has(#cagp-main-navigation) {
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

/* Navigation wrapper should be on the left */
#cagp-main-navigation {
  flex: 1;
  background: transparent;
}

/* Social icons should be on the right */
#block-cagp-block-8 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Search form should be positioned properly */
#block-cagp-search-form {
  position: absolute;
  right: 150px;
  top: 50%;
  transform: translateY(-50%);
}

/* Top menu styling - matches D7 */
.top-menu,
#block-cagp-menu-menu-top-menu {
  order: 2;
}

.top-menu .menu,
#block-cagp-menu-menu-top-menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 15px;
}

.top-menu .menu li,
#block-cagp-menu-menu-top-menu .menu li {
  margin: 0;
}

.top-menu .menu a,
#block-cagp-menu-menu-top-menu .menu a {
  color: #253980;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;  /* Changed from capitalize to uppercase to match legacy */
  font-family: ClearSans-Regular, Arial, sans-serif;  /* Match legacy font */
  transition: color 0.3s;
}

.top-menu .menu a:hover,
#block-cagp-menu-menu-top-menu .menu a:hover {
  color: #fb6100;
  text-decoration: none;
}

/* Account menu styling - for logged-in users */
.account-menu {
  order: 2;
}

.account-menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.account-menu .menu li {
  margin-right: 10px;
}

.account-menu .menu li:last-child {
  margin-right: 0;
}

.account-menu .menu a {
  color: #253980;
  text-decoration: none;
  font-size: 12px;
  font-family: ClearSans-Regular;
}

.account-menu .menu a:hover {
  text-decoration: underline;
}

/* Language switcher styling - matches D7 */
/* Apply order to the wrapper div by selecting the last direct child that contains a block */
header .container > div:last-of-type {
  order: 3;
  display: flex;
  align-items: center;
}

.language-switcher,
#block-cagp-language-switcher {
  order: 3;  /* Changed from 1 to 3 to make it rightmost (logo=-1, top-menu=2, language=3) */
}

.language-switcher .links,
#block-cagp-language-switcher .links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 3px;
}

.language-switcher .links li,
#block-cagp-language-switcher .links li {
  margin: 0;
  position: relative;
}

/* Hide active language - show only opposite language */
.language-switcher .links li.is-active,
#block-cagp-language-switcher .links li.is-active {
  display: none;
}

/* Pipe separator removed - not in legacy design */
.language-switcher .links li:not(:last-child)::after,
#block-cagp-language-switcher .links li:not(:last-child)::after {
  content: "";
  display: none;
}

.language-switcher .links a,
#block-cagp-language-switcher .links a {
  color: #253980;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;  /* Add uppercase to match legacy */
  font-family: ClearSans-Regular, Arial, sans-serif;  /* Match legacy font */
  padding: 2px 8px;
  display: inline-block;
  transition: all 0.3s;
  margin-top: 45px;
}

.language-switcher .links a:hover,
#block-cagp-language-switcher .links a:hover {
  color: #444;  /* Changed from #fb6100 to #444 to match legacy hover */
  text-decoration: underline;
}

/* Responsive header layout */
@media (max-width: 768px) {
  header .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .region-header {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .top-menu .menu,
  .account-menu .menu {
    justify-content: flex-start;
  }
}

/* Ensure main navigation area is separate */
nav.clearfix {
  clear: both;
  margin-top: 0;  /* Removed 10px margin to match legacy pixel-perfect */
}

/* ============================================
   Utility Classes
   ============================================ */

/* Clear floats */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* Accessibility */
.visually-hidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

/* Print styles */
@media print {
  .region-primary-menu,
  .region-sidebar-first,
  .region-footer,
  .mobile-menu-toggle,
  .form-submit {
    display: none;
  }
}