/*
 * Call-to-action menu links (Variant A - Refined inline pill, paired).
 *
 * Plain CSS copy of sass/components/cta.scss so the styling is available
 * without a Compass recompile.
 *
 * Architecture:
 *   - The CTA items live in their own Drupal menu `cta` (separate from
 *     `main`).
 *   - The domus2019 theme exposes a `header_cta` region rendered as
 *     `<div class="page-header__cta">{{ page.header_cta }}</div>` inside
 *     `<header id="header">`, between `.page-header__container` and
 *     `.search__toggle`.
 *   - `#header` is a flex row on desktop so the CTA region sits naturally
 *     to the right of the main menu container, just before the search-
 *     toggle. No absolute positioning needed.
 *   - The same `cta` menu block is also placed in the mobile_menu region
 *     so the items appear inside the hamburger drawer.
 *
 * Colors (CTA-local):
 *   orange       = #e8832a / hover #d26f18
 *   navy         = #1e3a6b / hover #13264a
 *   white        = #ffffff
 */

/* --- Pill button look (shared, all contexts) --------------------------- */
.page-header__cta a.menu__link--cta,
.mobile--menu a.menu__link--cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e8832a;
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 0.625rem 1.125rem 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(232, 131, 42, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.page-header__cta a.menu__link--cta::before,
.mobile--menu a.menu__link--cta::before {
  content: "";
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.page-header__cta a.menu__link--cta:not(.menu__link--cta-member)::before,
.mobile--menu a.menu__link--cta:not(.menu__link--cta-member)::before {
  background-color: rgba(255, 255, 255, 0.22);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/svg%3E");
}

.page-header__cta a.menu__link--cta:hover,
.page-header__cta a.menu__link--cta:focus,
.mobile--menu a.menu__link--cta:hover,
.mobile--menu a.menu__link--cta:focus {
  background: #d26f18;
  color: #fff !important;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(232, 131, 42, 0.35);
}

.page-header__cta a.menu__link--cta-member,
.mobile--menu a.menu__link--cta-member {
  background: #1e3a6b;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(30, 58, 107, 0.22);
}

.page-header__cta a.menu__link--cta-member::before,
.mobile--menu a.menu__link--cta-member::before {
  background-color: rgba(255, 255, 255, 0.18);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3' width='11' height='8' rx='1.2'/%3E%3Cpath d='M1.5 6h11'/%3E%3Cpath d='M4 8.8h2'/%3E%3C/svg%3E");
}

.page-header__cta a.menu__link--cta-member:hover,
.page-header__cta a.menu__link--cta-member:focus,
.mobile--menu a.menu__link--cta-member:hover,
.mobile--menu a.menu__link--cta-member:focus {
  background: #13264a;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(30, 58, 107, 0.32);
}

/* --- Desktop layout ---------------------------------------------------- */
@media (min-width: 960px) {
  #header.page-header {
    display: flex;
    align-items: stretch;
  }

  #header.page-header > .page-header__container {
    flex: 1 1 auto;
    min-width: 0;
  }

  #header.page-header > .page-header__cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* Match the menu-row vertical band inside the container so the pill
       centres on the same baseline as the menu items (not on the centre
       of the full 120px header). Menu items live at y=68 with height 55,
       so 25px top + 40px bottom padding mirrors that band. */
    padding-top: 25px;
    padding-bottom: 40px;
    /* Search-toggle is absolute at right: 40px from #header and is 59px
       wide. A 107px right margin leaves ~8px breathing gap to the toggle. */
    margin-right: 107px;
  }

  #header.page-header > .page-header__cta .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  #header.page-header > .page-header__cta .menu > li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* --- Tablet compacting (960-1279) --------------------------------------
   Menu items' subtitle is hidden and margins tightened to keep everything
   on a single row. margin-right on .page-header__cta stays at 107 so the
   CTA never overlaps the search-toggle hit-area. */
@media (min-width: 960px) and (max-width: 1319px) {
  #header .menu > li.menu-item .navigation__link-description {
    display: none;
  }

  #header .menu > li.menu-item {
    margin: 0 6px;
    padding-right: 12px;
  }

  #header .menu > li.menu-item .navigation__link-title {
    line-height: 1.3;
  }

  .page-header__cta a.menu__link--cta {
    padding: 0.5rem 0.9rem 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
}

/* --- Mobile / drawer --------------------------------------------------- */
@media (max-width: 959px) {
  #header.page-header > .page-header__cta {
    display: none;
  }

  .mobile--menu a.menu__link--cta,
  .mobile--menu .menu__link--cta {
    margin: 0.75em 1rem;
  }
}