/* Redesigned (Direction C) site chrome: the shared navbar and footer for the English site.

   Served as a static file (wwwroot/css/site-chrome.css) and linked from Views/Shared/_Layout.cshtml
   for English only; the Arabic pages keep the original navbar/footer (Views/Shared/_Navbar.cshtml,
   _Footer.cshtml) and their styles.

   Everything is scoped under .sc (the wrapper class on the shared header/footer), so it can reuse the
   design's class names (tm-navlink, press, btn-navy, ...) without touching the home stylesheet. The
   layout lives in the markup's inline style attributes; this file holds the box-sizing reset, focus
   rings, link/button/underline states, the mobile menu and the responsive toggles. */

.sc *,
.sc *::before,
.sc *::after {
  box-sizing: border-box;
}

.sc {
  font-family: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  color: #020F32;
}

.sc a {
  color: inherit;
}

.sc button {
  font-family: inherit;
}

.sc .ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.sc a:focus-visible,
.sc button:focus-visible {
  outline: 2px solid #0C79AE;
  outline-offset: 3px;
}

/* Brand marks */
.sc-logo {
  display: block;
  height: 40px;
  width: auto;
}

/* The navbar carries the larger mark; the small footer keeps 40px. */
.sc-header .sc-logo {
  height: 80px;
}

.sc-logo-full {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

/* Pressed controls drop 1px */
.sc .press {
  transition: transform 120ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.sc .press:active {
  transform: translateY(1px);
}

.sc .btn-navy:hover {
  background-color: #0B2160 !important;
}

.sc .btn-line:hover {
  background-color: rgba(2, 15, 50, 0.06) !important;
}

.sc .tm-link {
  text-decoration: none;
}

.sc .tm-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* The account menu keeps its label on one line when space gets tight */
.sc .tm-account-btn {
  white-space: nowrap;
}

/* Menu bar: the link for the section on screen is underlined */
.sc .tm-navlink {
  position: relative;
  text-decoration: none;
}

.sc .tm-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 1px;
  background: #020F32;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}

.sc .tm-navlink:hover::after {
  transform: scaleX(1);
  background: #9AA7B4;
}

.sc .tm-navlink[aria-current="true"]::after {
  transform: scaleX(1);
  background: #020F32;
}

/* The mobile menu drops below the bar and fades in when the button opens it */
.sc .tm-menu {
  animation: sc-fade 300ms ease-out both;
}

.sc .tm-menu a[aria-current="true"] {
  color: #0C79AE;
}

.sc .tm-menu a[aria-current="true"]::after {
  content: "";
  margin-inline-start: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42BEFE;
}

@keyframes sc-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* The menu button replaces the links once they no longer fit */
.sc .tm-menu-btn {
  display: none !important;
}

.sc .tm-show-sm {
  display: none !important;
}

@media (max-width: 1179px) {
  .sc .tm-nav-links {
    display: none !important;
  }

  .sc .tm-menu-btn {
    display: flex !important;
  }
}

@media (min-width: 1180px) {
  .sc .tm-menu {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .sc .tm-hide-sm {
    display: none !important;
  }

  .sc .tm-show-sm {
    display: flex !important;
  }

  /* The account menu stays in the bar on phones: it sits next to the menu button instead of
     moving into the mobile menu. Tighten the bar so the mark, the account button and the menu
     button fit on the narrowest screens. */
  .sc-header > .tm-bar {
    gap: 12px !important;
    padding-inline: 16px !important;
  }

  .sc-header .sc-logo {
    height: 52px;
  }

  .sc .tm-account-btn {
    gap: 6px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
  }

  .sc .tm-foot-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc .press,
  .sc .tm-navlink::after,
  .sc .tm-menu {
    transition: none;
    animation: none;
  }
}