/* ==========================================================================
   GPM Phase 2: Netflix-inspired sidebar layout
   Adapts Netflix's Hawkins design tokens to the Copenhagen theme.
   ========================================================================== */

/* Netflix Hawkins design tokens (subset needed for sidebar + nav) */
:root {
  --gpm-space-0: 4px;
  --gpm-space-1: 8px;
  --gpm-space-2: 12px;
  --gpm-space-3: 16px;
  --gpm-space-4: 20px;
  --gpm-space-5: 24px;
  --gpm-space-6: 32px;
  --gpm-space-7: 48px;

  --gpm-font-size-1: 12px;
  --gpm-font-size-2: 13px;
  --gpm-font-size-3: 14px;
  --gpm-font-size-4: 16px;
  --gpm-font-size-5: 18px;
  --gpm-font-size-6: 20px;
  --gpm-font-size-7: 24px;

  --gpm-font-weight-0: 400;
  --gpm-font-weight-1: 600;
  --gpm-font-weight-2: 700;

  --gpm-border-radius-0: 4px;
  --gpm-border-radius-1: 6px;

  --gpm-box-shadow-gray-3: 0 8px 16px 0 rgba(0,0,0,0.10), 0 0 2px 0 rgba(0,0,0,0.10);

  --gpm-color-white: #FFFFFF;
  --gpm-color-black: #0F0F0F;
  --gpm-color-gray-1: #2F3941;
  --gpm-color-gray-2: #6D6D6E;
  --gpm-color-gray-3: #9a9a9b;
  --gpm-color-gray-4: #e5e5e5;
  --gpm-color-gray-5: #f7f8fa;
  --gpm-color-brand: #D4AE37;
  --gpm-color-accent: #232F3E; /* Netflix-style accent for key CTAs if desired */

  --gpm-sidebar-width: 260px;
  --gpm-sidebar-collapsed-width: 44px;
  --gpm-topbar-height: 56px;
  --gpm-footer-height: 72px;
}

/* ==========================================================================
   Full-page layout: sidebar + main
   We wrap Copenhagen's existing main content in a main column to the right
   of a fixed sidebar. Triggered by presence of .gpm-sidebar in the DOM
   (server-rendered in header.hbs) so layout applies on first paint.
   ========================================================================== */

body:has(.gpm-sidebar) {
  padding-left: var(--gpm-sidebar-width);
  padding-top: var(--gpm-topbar-height);
  background-color: var(--gpm-color-white);
}

/* Fallback for browsers without :has() support — JS adds the class */
body.gpm-phase2-layout {
  padding-left: var(--gpm-sidebar-width);
  padding-top: var(--gpm-topbar-height);
  background-color: var(--gpm-color-white);
}

/* The portal chrome blocks carry the live portal's own .header and .footer, and
   the sidebar is in the DOM on portal pages too, so they are excluded here. */
body:has(.gpm-sidebar) .header:not(.portal-chrome-header .header),
body.gpm-phase2-layout .header:not(.portal-chrome-header .header) {
  display: none;
}

body:has(.gpm-sidebar) .footer:not(.portal-chrome-footer .footer),
body.gpm-phase2-layout .footer:not(.portal-chrome-footer .footer) {
  margin-left: 0;
  background: var(--gpm-color-gray-5);
  /* Same height and top border as .gpm-sidebar-footer, so at the bottom of the page the two read as one bar. */
  box-sizing: border-box;
  min-height: var(--gpm-footer-height);
  padding: 0;
  border-top: 1px solid var(--gpm-color-gray-4);
  display: flex;
  align-items: center;
}

body:has(.gpm-sidebar) .footer:not(.portal-chrome-footer .footer) .footer-inner,
body.gpm-phase2-layout .footer:not(.portal-chrome-footer .footer) .footer-inner {
  width: 100%;
  align-items: center;
}

/* Osano pins its cookie button bottom left, which on GPM pages covers the sidebar's Privacy Notice link.
   Portal pages have no sidebar and keep the live position. */
@media (min-width: 901px) {
  body:has(.gpm-sidebar):not(:has(.portal-page-marker)) .osano-cm-widget {
    left: calc(var(--gpm-sidebar-width) + var(--gpm-space-3));
  }
  body.gpm-sidebar-collapsed:has(.gpm-sidebar):not(:has(.portal-page-marker)) .osano-cm-widget {
    left: calc(var(--gpm-sidebar-collapsed-width) + var(--gpm-space-3));
  }
}

.gpm-footer-links {
  margin-left: auto;
  padding-left: var(--gpm-space-4);
}

/* ==========================================================================
   Sidebar shell
   ========================================================================== */

.gpm-sidebar {
  position: fixed;
  top: var(--gpm-topbar-height);
  left: 0;
  width: var(--gpm-sidebar-width);
  height: calc(100vh - var(--gpm-topbar-height));
  background-color: var(--gpm-color-white);
  border-right: 1px solid var(--gpm-color-gray-4);
  box-shadow: var(--gpm-box-shadow-gray-3);
  display: flex;
  flex-direction: column;
  z-index: 100;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: var(--gpm-font-size-3);
  color: var(--gpm-color-gray-1);
  transition: width 0.18s ease, box-shadow 0.18s ease;
}

/* Global language control: first interactive setting in the sidebar. */
.gpm-sidebar-language {
  /* First row of the sidebar now, so it shares its right edge with the
     absolutely placed collapse toggle. */
  padding: var(--gpm-space-4) 48px var(--gpm-space-3) var(--gpm-space-5);
  border-bottom: 1px solid var(--gpm-color-gray-4);
  background: var(--gpm-color-white);
}

.gpm-sidebar-language-label {
  margin: 0 0 var(--gpm-space-1);
  font-size: var(--gpm-font-size-1);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.weglot-sidebar {
  display: flex;
  align-items: center;
  min-height: 38px;
  width: 100%;
}

.weglot-sidebar > *,
.weglot-sidebar .country-selector,
.weglot-sidebar .wg-default,
.weglot-sidebar [class*="country-selector"] {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.weglot-sidebar select {
  width: 100%;
  min-height: 36px;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: 4px;
  background: var(--gpm-color-white);
  color: var(--gpm-color-gray-1);
  font: inherit;
  font-weight: var(--gpm-font-weight-1);
}

.gpm-sidebar-collapse-toggle {
  position: absolute;
  top: 14px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: 50%;
  background: var(--gpm-color-white);
  color: var(--gpm-color-gray-2);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.18s ease;
}

.gpm-sidebar-collapse-toggle:hover,
.gpm-sidebar-collapse-toggle:focus-visible {
  color: var(--gpm-color-brand);
  background: var(--gpm-color-gray-5);
  outline: none;
}

@media (min-width: 901px) {
  body.gpm-sidebar-collapsed:has(.gpm-sidebar),
  body.gpm-phase2-layout.gpm-sidebar-collapsed {
    padding-left: var(--gpm-sidebar-collapsed-width);
  }

  body.gpm-sidebar-collapsed .gpm-sidebar {
    width: var(--gpm-sidebar-collapsed-width);
    box-shadow: none;
  }

  body.gpm-sidebar-collapsed .gpm-sidebar > *:not(.gpm-sidebar-collapse-toggle) {
    display: none !important;
  }

  body.gpm-sidebar-collapsed .gpm-sidebar-collapse-toggle {
    right: 7px;
    transform: rotate(180deg);
  }
}

/* Production switcher at sidebar top */

.gpm-sidebar-production-section {
  padding: var(--gpm-space-3) var(--gpm-space-5) var(--gpm-space-2);
  border-bottom: 1px solid var(--gpm-color-gray-4);
}

.gpm-sidebar-production-label {
  font-size: var(--gpm-font-size-1);
  font-weight: var(--gpm-font-weight-0);
  color: var(--gpm-color-gray-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--gpm-space-1);
}

.gpm-sidebar-production-button {
  display: flex;
  align-items: center;
  gap: var(--gpm-space-1);
  width: 100%;
  padding: var(--gpm-space-1) 0;
  background: transparent;
  border: none;
  font: inherit;
  font-weight: var(--gpm-font-weight-1);
  font-size: var(--gpm-font-size-4);
  color: var(--gpm-color-gray-1);
  cursor: pointer;
  text-align: left;
}

.gpm-sidebar-production-button:hover {
  color: var(--gpm-color-brand);
}

.gpm-sidebar-production-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gpm-sidebar-production-caret {
  flex-shrink: 0;
  transition: transform 0.15s;
  color: var(--gpm-color-gray-2);
}

.gpm-sidebar-production-button[aria-expanded="true"] .gpm-sidebar-production-caret {
  transform: rotate(180deg);
}

.gpm-sidebar-production-meta {
  font-size: var(--gpm-font-size-1);
  color: var(--gpm-color-gray-2);
  margin: 0;
  padding-top: 2px;
}

/* Signed-out region/vertical fallback picker */
.gpm-sidebar-fallback {
  padding: var(--gpm-space-2) var(--gpm-space-5) var(--gpm-space-3);
  border-bottom: 1px solid var(--gpm-color-gray-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gpm-space-1) var(--gpm-space-2);
}

/* Heading spans the full width; the two fields sit side by side below it. */
.gpm-sidebar-fallback > .gpm-sidebar-production-label {
  flex: 0 0 100%;
  margin: 0 0 2px;
}

.gpm-fallback-field {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gpm-fallback-field-label {
  font-size: 10px;
  color: var(--gpm-color-gray-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Custom content-vertical dropdown: themed trigger + floating listbox. A native
   select's OPEN list is OS-drawn and unstylable, hence the custom control. */

.gpm-fallback-dropdown {
  position: relative;
}

.gpm-fallback-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--gpm-color-gray-1);
  background: var(--gpm-color-gray-5);
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.gpm-fallback-trigger:hover {
  border-color: var(--gpm-color-gray-2);
  background: #fff;
}

.gpm-fallback-trigger:focus-visible {
  outline: none;
  border-color: var(--gpm-color-brand);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(212, 174, 55, 0.25);
}

.gpm-fallback-trigger[aria-expanded="true"] {
  border-color: var(--gpm-color-brand);
  background: #fff;
}

.gpm-fallback-trigger[aria-expanded="true"] .gpm-fallback-trigger-chevron {
  transform: rotate(180deg);
}

.gpm-fallback-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gpm-fallback-trigger-chevron {
  flex-shrink: 0;
  color: var(--gpm-color-gray-2);
  transition: transform 120ms ease;
}

.gpm-fallback-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(47, 57, 65, 0.16);
}

.gpm-fallback-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--gpm-color-gray-1);
  border-radius: 5px;
  cursor: pointer;
}

.gpm-fallback-option:hover,
.gpm-fallback-option:focus-visible {
  background: var(--gpm-color-gray-5);
  outline: none;
}

.gpm-fallback-option.is-selected {
  font-weight: var(--gpm-font-weight-1);
}

.gpm-fallback-option-check {
  flex: 0 0 12px;
  color: var(--gpm-color-brand);
  font-size: 11px;
}

/* Production dropdown menu (when multiple productions) */

.gpm-sidebar-production-menu {
  position: absolute;
  left: var(--gpm-space-5);
  right: var(--gpm-space-5);
  margin-top: var(--gpm-space-1);
  background: var(--gpm-color-white);
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: var(--gpm-border-radius-1);
  box-shadow: var(--gpm-box-shadow-gray-3);
  list-style: none;
  padding: var(--gpm-space-0) 0;
  z-index: 110;
  max-height: 300px;
  overflow-y: auto;
}

.gpm-sidebar-production-menu li {
  margin: 0;
  padding: 0;
}

.gpm-sidebar-production-menu-button {
  display: flex;
  align-items: center;
  gap: var(--gpm-space-1);
  width: 100%;
  padding: var(--gpm-space-1) var(--gpm-space-3);
  background: transparent;
  border: none;
  font: inherit;
  color: var(--gpm-color-gray-1);
  cursor: pointer;
  text-align: left;
}

.gpm-sidebar-production-menu-button:hover {
  background: var(--gpm-color-gray-5);
}

.gpm-sidebar-production-menu-button.is-active {
  background: #F0F7FF;
}

.gpm-sidebar-production-check {
  width: 14px;
  color: var(--gpm-color-brand);
  font-weight: var(--gpm-font-weight-2);
}

.gpm-sidebar-production-menu-name {
  flex: 1;
  font-weight: var(--gpm-font-weight-1);
  font-size: var(--gpm-font-size-3);
}

.gpm-sidebar-production-menu-meta {
  font-size: var(--gpm-font-size-1);
  color: var(--gpm-color-gray-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Nav list inside sidebar */

.gpm-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--gpm-space-2) 0;
}

.gpm-sidebar-nav-heading {
  font-size: var(--gpm-font-size-1);
  font-weight: var(--gpm-font-weight-0);
  color: var(--gpm-color-gray-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--gpm-space-2) var(--gpm-space-5);
  margin: 0;
}

.gpm-sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Glossary closes the policy list on its own, set off from Post Production. */
.gpm-sidebar-nav-list--trailing {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gpm-color-gray-4);
}

.gpm-sidebar-nav-item {
  margin: 0;
  padding: 0;
}

.gpm-sidebar-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gpm-space-2) var(--gpm-space-5);
  color: var(--gpm-color-gray-1);
  text-decoration: none;
  font-size: var(--gpm-font-size-3);
  font-weight: var(--gpm-font-weight-0);
  line-height: 1.3;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-left-color 0.15s;
}

.gpm-sidebar-nav-link:hover {
  background: var(--gpm-color-gray-5);
  color: var(--gpm-color-brand);
  text-decoration: none;
}

.gpm-sidebar-nav-link.is-active {
  background: var(--gpm-color-gray-5);
  color: var(--gpm-color-brand);
  font-weight: var(--gpm-font-weight-1);
  border-left-color: var(--gpm-color-brand);
}

.gpm-sidebar-nav-link svg {
  width: 12px;
  height: 12px;
  color: var(--gpm-color-gray-3);
}

/* Sidebar profile at bottom */

.gpm-sidebar-footer {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  column-gap: var(--gpm-space-2);
  row-gap: var(--gpm-space-0);
  box-sizing: border-box;
  height: var(--gpm-footer-height);
  flex-shrink: 0;
  padding: 0 var(--gpm-space-5);
  border-top: 1px solid var(--gpm-color-gray-4);
  background: var(--gpm-color-gray-5);
  font-size: var(--gpm-font-size-2);
}

.gpm-sidebar-contact {
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-brand);
  text-decoration: none;
}

.gpm-sidebar-contact:hover,
.gpm-sidebar-contact:focus-visible {
  text-decoration: underline;
}

/* Legal links close out the sidebar footer. Lives INSIDE .gpm-sidebar-footer and
   takes a full row beneath Contact Us, so the footer stays one grey bar with one
   top border instead of two stacked bars. No background or border of its own by
   design; the footer block supplies both, and its bottom padding keeps this off
   the viewport edge, since .gpm-sidebar is exactly 100vh with nothing below. */
.gpm-sidebar-legal {
  flex-basis: 100%;
}

.gpm-sidebar-legal-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--gpm-font-size-1);
  color: var(--gpm-color-gray-2);
  text-decoration: none;
}

.gpm-sidebar-legal-link:hover,
.gpm-sidebar-legal-link:focus-visible {
  color: var(--gpm-color-gray-1);
  text-decoration: underline;
}

.gpm-sidebar-legal-icon {
  flex-shrink: 0;
  opacity: 0.75;
}

/* ==========================================================================
   Hidden banner - we move this info to the sidebar
   Keep the old banner styling for fallback but hide it by default when
   the sidebar is active.
   ========================================================================== */

body.gpm-phase2-layout .gpm-phase2-banner {
  display: none;
}

/* ==========================================================================
   Main content column
   ========================================================================== */

body.gpm-phase2-layout:not(.portal-page) .container,
body.gpm-phase2-layout .container-divider {
  max-width: 100%;
  margin: 0;
}

body.gpm-phase2-layout:not(.portal-page) .container {
  padding: var(--gpm-space-5) var(--gpm-space-6);
}

/* Hero region for the production landing */

.gpm-production-hero {
  position: relative;
  background: #000;
  color: var(--gpm-color-white);
  padding: var(--gpm-space-7) var(--gpm-space-6);
  margin: 0 0 var(--gpm-space-6);
  border-radius: 0;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.gpm-production-hero[hidden] {
  display: none;
}

.gpm-production-hero.gpm-hero-has-image {
  min-height: 360px;
  justify-content: center;
  background-color: #0a0a0c;
}

.gpm-production-hero-inner {
  /* Match the centering + width of .gpm-quick-links-inner below the hero
     so the title/meta/search column visually aligns with the cards grid
     instead of hugging the sidebar edge. */
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.gpm-production-hero-subtitle {
  font-size: var(--gpm-font-size-2);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 var(--gpm-space-2);
}

.gpm-production-hero-title {
  font-size: 36px;
  font-weight: var(--gpm-font-weight-2);
  line-height: 1.1;
  margin: 0 0 var(--gpm-space-3);
  color: var(--gpm-color-white);
}

.gpm-production-hero-meta {
  font-size: var(--gpm-font-size-3);
  opacity: 0.85;
  display: flex;
  gap: var(--gpm-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--gpm-space-4);
}

.gpm-production-hero-meta span::after {
  content: "•";
  margin-left: var(--gpm-space-3);
  opacity: 0.5;
}

.gpm-production-hero-meta span:last-child::after {
  content: "";
}

.gpm-production-hero-blurb {
  font-size: var(--gpm-font-size-4);
  line-height: 1.55;
  opacity: 0.92;
  max-width: 720px;
}

.gpm-production-hero-search {
  margin-top: var(--gpm-space-5);
  display: flex;
  align-items: center;
  gap: var(--gpm-space-2);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-2) var(--gpm-space-3);
  max-width: 520px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.gpm-production-hero-search-icon {
  color: var(--gpm-color-gray-2);
  flex-shrink: 0;
}

.gpm-production-hero-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: var(--gpm-font-size-4);
  color: var(--gpm-color-gray-1);
  padding: 4px 0;
}

.gpm-production-hero-search-input::placeholder {
  color: var(--gpm-color-gray-3);
}

/* ==========================================================================
   Quick-links grid below the hero
   ========================================================================== */

.gpm-quick-links {
  padding: var(--gpm-space-7) var(--gpm-space-6) var(--gpm-space-7);
  background: var(--gpm-color-white);
}

.gpm-quick-links-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.gpm-quick-links-heading {
  font-size: var(--gpm-font-size-6);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-1);
  margin: 0 0 var(--gpm-space-5);
}

.gpm-quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gpm-space-3);
}

.gpm-quick-link-card {
  display: flex;
  flex-direction: column;
  padding: var(--gpm-space-4) var(--gpm-space-5);
  background: var(--gpm-color-white);
  border: 1px solid var(--gpm-color-gray-4);
  border-top: 3px solid var(--gpm-color-brand);
  border-radius: var(--gpm-border-radius-1);
  text-decoration: none;
  color: var(--gpm-color-gray-1);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  min-height: auto;
}

.gpm-quick-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-decoration: none;
  color: var(--gpm-color-gray-1);
}

.gpm-quick-link-section {
  font-size: 11px;
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.gpm-quick-link-title {
  font-size: var(--gpm-font-size-4);
  font-weight: var(--gpm-font-weight-1);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: var(--gpm-space-2);
}

.gpm-quick-link-arrow {
  display: inline-block;
  color: var(--gpm-color-brand);
  font-size: var(--gpm-font-size-4);
  margin-left: auto;
  transition: transform 0.15s;
  opacity: 0.6;
}

.gpm-quick-link-card:hover .gpm-quick-link-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* ==========================================================================
   Hide the default homepage flash before JS loads.
   We pre-hide the default Copenhagen homepage hero + cards, and JS shows them
   back if user is anonymous / has no production.
   ========================================================================== */

[data-gpm-default-hero],
[data-gpm-default-home] {
  visibility: hidden;
}

/* When the page is fully evaluated by JS, the data-gpm-default-* attributes
   will either be hidden (production user) or have data-gpm-show-default
   added by JS to make them visible. */
[data-gpm-default-hero][data-gpm-show-default],
[data-gpm-default-home][data-gpm-show-default] {
  visibility: visible;
}

/* Override: production hero is always visible when shown */
.gpm-production-hero[hidden] {
  display: none;
}

/* ==========================================================================
   Section that got fully filtered — dimmed indicator from previous version
   ========================================================================== */

.section-tree .section[style*="opacity: 0.35"] .article-list {
  pointer-events: none;
}

/* ==========================================================================
   Responsive: collapse sidebar on narrow screens
   ========================================================================== */

@media (max-width: 900px) {
  body:has(.gpm-sidebar),
  body.gpm-phase2-layout {
    padding-left: 0;
  }

  /* Off canvas until the topbar menu button opens it. visibility keeps the
     hidden links out of the tab order, and waits for the slide to finish. */
  .gpm-sidebar {
    height: calc(100vh - var(--gpm-topbar-height));
    height: calc(100dvh - var(--gpm-topbar-height));
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: none;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }

  body.gpm-sidebar-open .gpm-sidebar {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, visibility 0s;
  }

  .gpm-sidebar-nav {
    overscroll-behavior: contain;
  }

  body.gpm-sidebar-open {
    overflow: hidden;
  }

  /* Tap target for closing. It sits under the sidebar (z-index 100) and the topbar (200). */
  body.gpm-sidebar-open::after {
    content: "";
    position: fixed;
    inset: var(--gpm-topbar-height) 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }

  .gpm-sidebar-collapse-toggle {
    display: none;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .gpm-sidebar,
  body.gpm-sidebar-open .gpm-sidebar {
    transition: none;
  }
}

/* ==========================================================================
   Article TOC (auto-generated for articles with 3+ headings)
   ========================================================================== */

.gpm-article-toc {
  background: var(--gpm-color-gray-5);
  border: 1px solid var(--gpm-color-gray-4);
  border-left: 3px solid var(--gpm-color-brand);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-3) var(--gpm-space-4);
  margin: 0 0 var(--gpm-space-5);
  font-size: var(--gpm-font-size-3);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.gpm-article-toc-heading {
  font-size: var(--gpm-font-size-1);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--gpm-space-2);
}

.gpm-article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nested list inside a parent li — provides the visual hierarchy. Each
   level of nesting indents further automatically (no per-level CSS rules
   needed). */
.gpm-article-toc-list-nested {
  list-style: none;
  margin: 4px 0 4px var(--gpm-space-3);
  padding: 0;
  border-left: 1px solid var(--gpm-color-gray-4);
  padding-left: var(--gpm-space-3);
}

.gpm-article-toc-item {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Slightly smaller text for deeper headings so the eye can tell levels
   apart even when the nesting line is faint. */
.gpm-article-toc-h3 .gpm-article-toc-link,
.gpm-article-toc-header .gpm-article-toc-link {
  font-size: 13px;
}

.gpm-article-toc-h4 .gpm-article-toc-link {
  font-size: 12px;
  opacity: 0.85;
}

.gpm-article-toc-link {
  display: block;
  padding: 4px 0;
  color: var(--gpm-color-gray-1);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--gpm-space-1);
  margin-left: calc(-1 * var(--gpm-space-1) - 2px);
  transition: color 0.1s, border-left-color 0.1s;
}

.gpm-article-toc-link:hover {
  color: var(--gpm-color-brand);
  text-decoration: none;
}

.gpm-article-toc-link.is-active {
  color: var(--gpm-color-brand);
  font-weight: var(--gpm-font-weight-1);
  border-left-color: var(--gpm-color-brand);
}

/* Scroll-to-anchor with offset for sticky headers */
.article-body h2,
.article-body h3 {
  scroll-margin-top: var(--gpm-space-5);
}

/* ==========================================================================
   Sidebar tree nav (expandable category -> articles)
   ========================================================================== */

.gpm-sidebar-nav-cat {
  margin-bottom: 2px;
}

.gpm-sidebar-nav-cat-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--gpm-space-2) var(--gpm-space-5);
  text-align: left;
  font: inherit;
  font-size: var(--gpm-font-size-3);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-1);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-left-color 0.15s, color 0.15s;
}

.gpm-sidebar-nav-cat-header:hover {
  background: var(--gpm-color-gray-5);
  color: var(--gpm-color-brand);
}

.gpm-sidebar-nav-direct-link {
  text-decoration: none;
}

.gpm-sidebar-nav-cat.is-single-article > .gpm-sidebar-nav-direct-link.is-active {
  background: var(--gpm-color-gray-5);
  border-left-color: var(--gpm-color-brand);
  color: var(--gpm-color-brand);
}

.gpm-sidebar-nav-cat.is-expanded > .gpm-sidebar-nav-cat-header {
  background: var(--gpm-color-gray-5);
  border-left-color: var(--gpm-color-brand);
  color: var(--gpm-color-brand);
}

.gpm-sidebar-nav-cat-label {
  flex: 1;
}

.gpm-sidebar-nav-caret {
  flex-shrink: 0;
  color: var(--gpm-color-gray-3);
  transition: transform 0.15s;
  display: inline-flex;
}

.gpm-sidebar-nav-cat.is-expanded > .gpm-sidebar-nav-cat-header .gpm-sidebar-nav-caret {
  transform: rotate(180deg);
}

.gpm-sidebar-nav-children {
  display: none;
  padding: var(--gpm-space-1) 0 var(--gpm-space-2);
  background: var(--gpm-color-white);
}

.gpm-sidebar-nav-cat.is-expanded > .gpm-sidebar-nav-children {
  display: block;
}

.gpm-sidebar-nav-section-heading {
  font-size: 11px;
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--gpm-space-1) var(--gpm-space-5) 4px;
  margin: var(--gpm-space-1) 0 0;
}

.gpm-sidebar-nav-articles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gpm-sidebar-nav-article-item {
  margin: 0;
  padding: 0;
}

.gpm-sidebar-nav-article-link {
  display: block;
  padding: 6px var(--gpm-space-5) 6px calc(var(--gpm-space-5) + var(--gpm-space-2));
  font-size: var(--gpm-font-size-2);
  color: var(--gpm-color-gray-2);
  text-decoration: none;
  border-left: 3px solid transparent;
  margin-left: 0;
  line-height: 1.35;
  transition: color 0.1s, background 0.1s, border-left-color 0.1s;
}

.gpm-sidebar-nav-article-link:hover {
  color: var(--gpm-color-brand);
  background: var(--gpm-color-gray-5);
  text-decoration: none;
}

.gpm-sidebar-nav-article-link.is-active {
  color: var(--gpm-color-brand);
  background: var(--gpm-color-gray-5);
  font-weight: var(--gpm-font-weight-1);
  /* No brand-colored left border — the parent category header already
     carries one when expanded; doubling it visually collapses the hierarchy
     when article and category share a name (e.g. Casting → Casting). */
  border-left-color: transparent;
}

/* ==========================================================================
   Sidebar — Production Operations CTAs
   --------------------------------------------------------------------------
   Surfaces intake-form links in the sidebar so signed-in users don't need
   to know URLs by heart. Sits between the category nav and the profile
   section. Only rendered for signed-in users (the JS gates on `user`).
   ========================================================================== */

.gpm-sidebar-ops {
  margin: var(--gpm-space-4) 0 var(--gpm-space-3);
  padding: var(--gpm-space-3) var(--gpm-space-5) 0;
  border-top: 1px solid var(--gpm-color-gray-4);
}

.gpm-sidebar-ops-heading {
  font-size: 11px;
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--gpm-space-2);
}

.gpm-sidebar-ops-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gpm-sidebar-ops-item {
  margin: 0;
  padding: 0;
}

.gpm-sidebar-ops-link {
  display: flex;
  align-items: center;
  gap: var(--gpm-space-2);
  padding: 7px 0;
  font-size: var(--gpm-font-size-2);
  color: var(--gpm-color-gray-1);
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.1s;
}

.gpm-sidebar-ops-link svg {
  flex-shrink: 0;
  color: var(--gpm-color-brand);
}

.gpm-sidebar-ops-link:hover {
  color: var(--gpm-color-brand);
  text-decoration: none;
}

/* ==========================================================================
   Override default purple :visited color across the help center.
   Applied unconditionally (not gated by body.gpm-phase2-layout) to prevent
   a flash of purple visited links during initial paint before JS adds the
   layout class.
   ========================================================================== */

a:visited {
  color: inherit;
}

.gpm-sidebar-nav-article-link:visited,
.gpm-sidebar-nav-cat-header:visited {
  color: inherit;
}

.article-body a:visited,
.article a:visited {
  color: var(--gpm-color-brand);
}

.gpm-article-toc-link:visited {
  color: var(--gpm-color-gray-1);
}

/* ==========================================================================
   Hide redundant breadcrumbs since the sidebar is the navigation. Keep the
   sub-nav available only for page-level search where templates provide it.
   ========================================================================== */

body:has(.gpm-sidebar) .breadcrumbs,
body.gpm-phase2-layout .breadcrumbs {
  display: none;
}

body:has(.gpm-sidebar) .sub-nav,
body.gpm-phase2-layout .sub-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 1rem 0;
  padding: 0;
  min-height: 0;
}

body:has(.gpm-sidebar) .sub-nav > :not(.search-container),
body.gpm-phase2-layout .sub-nav > :not(.search-container) {
  display: none;
}

/* Keep search visible on category/section pages. */
body:has(.gpm-sidebar) .sub-nav .search-container,
body.gpm-phase2-layout .sub-nav .search-container {
  display: block;
  margin-left: auto;
}

/* ==========================================================================
   Hide intermediate "Articles in this section" sidebar that Copenhagen
   shows on article pages, since our left sidebar covers it.
   ========================================================================== */

body:has(.gpm-sidebar) .article-sidebar,
body.gpm-phase2-layout .article-sidebar {
  display: none;
}

body:has(.gpm-sidebar) .article-container,
body.gpm-phase2-layout .article-container {
  display: block;
}

/* ==========================================================================
   FIXES applied in iteration 6
   ========================================================================== */

/* Hide the Copenhagen "Articles in this section" sidebar IMMEDIATELY
   without waiting for the JS to add the body class. This prevents the flash
   of that sidebar appearing on initial page load. */
.article-container .article-sidebar {
  display: none !important;
}

/* Restore article-container to a single column (no left aside) */
.article-container {
  display: block !important;
  grid-template-columns: none !important;
}

/* Make article main content fill the available width.
   Copenhagen has max-width caps that look weird in our wider sidebar layout. */
body:has(.gpm-sidebar):not(:has(.portal-page-marker)) .container,
body:has(.gpm-sidebar) .article-container,
body:has(.gpm-sidebar) .article,
body.gpm-phase2-layout:not(.portal-page) .container,
body.gpm-phase2-layout .article-container,
body.gpm-phase2-layout .article {
  max-width: 100%;
  width: 100%;
}

body:has(.gpm-sidebar) .article,
body.gpm-phase2-layout .article {
  padding: 0 var(--gpm-space-3);
}

body:has(.gpm-sidebar) .article-body,
body.gpm-phase2-layout .article-body {
  max-width: 920px;
}

/* Article hero spacing on article pages */
body:has(.gpm-sidebar) .article-header,
body.gpm-phase2-layout .article-header {
  margin-bottom: var(--gpm-space-5);
  padding-bottom: var(--gpm-space-3);
  border-bottom: 1px solid var(--gpm-color-gray-4);
}

/* Polish the article body's pre-existing TOC (the .article-toc class
   that prod-pulled articles include) so it matches our auto-TOC styling */
.article-body .article-toc,
.article .article-toc {
  background: var(--gpm-color-gray-5);
  border: 1px solid var(--gpm-color-gray-4);
  border-left: 3px solid var(--gpm-color-brand);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-3) var(--gpm-space-4);
  margin: 0 0 var(--gpm-space-5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   Article-body tables
   --------------------------------------------------------------------------
   Most table HTML in our article bodies comes from one of two sources:
     1. Mammoth converting a Word .docx <table> during SharePoint auto-ingest
        — produces a bare <table><tr><td>...</td></tr></table> with no class
     2. Zendesk's admin WYSIWYG editor — also produces bare <table> with
        sometimes busted inline widths (e.g. prod's DEMO Casting article has
        two cells at width:57% which sums to 114%)
   Neither matches Copenhagen's .table-class CSS. Style bare <table> directly
   so SMEs get a clean rendered table without any extra classes or markup.
   ========================================================================== */

/* ============================================================================
   GPM Article Hero — top-of-page banner for article pages
   ----------------------------------------------------------------------------
   Same solid black as the home page's production hero so article pages
   feel intentional and on-brand. Holds the article title and metadata.
   The original .article-header inside <article> is hidden because
   the hero shows the title now (avoiding duplicate H1).
   ========================================================================== */

.gpm-article-hero {
  position: relative;
  background: #000;
  color: #fff;
  padding: 56px 32px;
  margin: 0 0 32px 0;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.gpm-article-hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.gpm-article-hero-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
}

.gpm-article-hero-title {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  max-width: 900px;
}

.gpm-article-hero-meta {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}

/* Hide the article-header h1 + author since the hero shows the title now */
body:has(.gpm-sidebar) .article .article-header,
body.gpm-phase2-layout .article .article-header {
  display: none;
}

/* The container-divider 1px gray line + 20px margin would create a visible
   gap above our flush-to-top hero; hide it on article pages. The inline
   `style="display:none"` on the article_page.hbs element handles the case
   where this CSS rule's `.article-page` body class doesn't actually apply
   in this Zendesk install. */
body:has(.gpm-sidebar) .container-divider,
body.gpm-phase2-layout .container-divider {
  display: none !important;
}

/* Pull the article hero flush to the top of the main content area —
   override any padding/margin our gpm-phase2 layout adds to body > main. */
body:has(.gpm-sidebar) .gpm-article-hero,
body.gpm-phase2-layout .gpm-article-hero {
  margin-top: 0 !important;
}

/* On article pages, kill the top padding on the main content wrapper so
   the hero touches the very top edge. Other pages keep their padding. */
body:has(.gpm-article-hero) > main,
body:has(.gpm-article-hero) > .main {
  padding-top: 0 !important;
}

@media (max-width: 767px) {
  .gpm-article-hero {
    padding: 32px 20px;
    margin-bottom: 24px;
    min-height: 160px;
  }
  .gpm-article-hero-title {
    font-size: 26px;
  }
}



/* ==========================================================================
   Nested article lists
   --------------------------------------------------------------------------
   Copenhagen's base CSS (theme/copenhagen/style.css) zeros margins on nested
   lists with a rule like:
       .article-body ul > ul, .article-body li > ul, ... { margin: 0; }
   That kills the visual hierarchy for our migrated articles, which often
   have 3-4 levels of bullet nesting (e.g. the Assets policy). Override so
   each nested level gets proper left-indent + a different bullet glyph.
   ========================================================================== */

.article-body ul ul,
.article-body ul ol,
.article-body ol ul,
.article-body ol ol {
  /* !important needed because Copenhagen's base rule for `li > ul` matches
     too and is loaded after our theme's main rules in some Zendesk render
     orders. */
  margin: 4px 0 4px 24px !important;
  padding-left: 0;
}

/* Bullet variation per depth so readers can tell levels apart visually
   (matches the multi-level numPr we set up in migrate_article.py). */
.article-body ul             { list-style-type: disc; }
.article-body ul ul          { list-style-type: circle; }
.article-body ul ul ul       { list-style-type: square; }
.article-body ul ul ul ul    { list-style-type: disc; }


.article-body table {
  /* Override inline widths the Zendesk editor sometimes injects (e.g. 114%
     totals). table-layout:auto + width:100% lets the browser distribute. */
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
  margin: var(--gpm-space-4) 0;
  font-size: var(--gpm-font-size-3);
  background: var(--gpm-color-white);
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: var(--gpm-border-radius-1);
  overflow: hidden;
}

.article-body table th,
.article-body table td {
  /* Reset any inline width Zendesk injected — let the browser size them. */
  width: auto !important;
  height: auto !important;
  padding: var(--gpm-space-2) var(--gpm-space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gpm-color-gray-4);
  line-height: 1.5;
}

.article-body table tr:last-child td {
  border-bottom: none;
}

/* Header row: real <th> elements OR the first <tr> when authors only used
   <td> with bold text (Mammoth's default for Word tables with header rows). */
.article-body table th,
.article-body table thead td,
.article-body table tr:first-child td {
  background: var(--gpm-color-gray-5);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-1);
  border-bottom: 2px solid var(--gpm-color-gray-4);
}

/* Don't double-bold things inside a header cell that already wraps content
   in <strong> or <h4>. */
.article-body table th strong,
.article-body table tr:first-child td strong,
.article-body table th h4,
.article-body table tr:first-child td h4 {
  font-weight: var(--gpm-font-weight-1);
  margin: 0;
  font-size: inherit;
}

/* Headings inside non-header cells (some authors put <h4> in body cells —
   prod Casting article does this) — render as bold body text, not a heading
   that breaks the visual rhythm of the table. */
.article-body table td h4 {
  margin: 0;
  font-size: inherit;
  font-weight: var(--gpm-font-weight-1);
}

.article-body table td p {
  margin: 0 0 var(--gpm-space-1);
}

.article-body table td p:last-child {
  margin-bottom: 0;
}

/* Zebra striping for readability on long tables */
.article-body table tbody tr:nth-child(even) td {
  background: rgba(247, 248, 250, 0.5);
}

/* Don't zebra-stripe the auto-detected first-row header */
.article-body table tr:first-child td {
  background: var(--gpm-color-gray-5);
}

/* Mobile: stack horizontally with horizontal scroll instead of breaking */
@media (max-width: 720px) {
  .article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.article-body .article-toc p strong,
.article .article-toc p strong {
  font-size: var(--gpm-font-size-1);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: var(--gpm-space-2);
}

.article-body .article-toc p,
.article .article-toc p {
  margin: 0 0 var(--gpm-space-1);
}

.article-body .article-toc ul,
.article .article-toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.article-body .article-toc li,
.article .article-toc li {
  margin: 0;
  padding: 4px 0;
}

.article-body .article-toc a,
.article .article-toc a {
  color: var(--gpm-color-gray-1);
  text-decoration: none;
}

.article-body .article-toc a:hover,
.article .article-toc a:hover {
  color: var(--gpm-color-brand);
}


/* ==========================================================================
   Anonymous / no-production landing hero
   Shown for signed-out users and signed-in users without a production.
   Uses the same solid black as the production hero so the visual language
   stays consistent across logged-in / logged-out states.
   ========================================================================== */

.gpm-anonymous-hero {
  position: relative;
  background: #000;
  color: var(--gpm-color-white);
  padding: var(--gpm-space-8) var(--gpm-space-6) var(--gpm-space-7);
  margin: 0 0 var(--gpm-space-7);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 4px solid #D4AE37;
}

/* Override the default Copenhagen .hero stock background image when our
   anonymous hero is used. */
.gpm-anonymous-hero[data-gpm-default-hero] {
  background-image: none;
}

.gpm-anonymous-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.gpm-anonymous-hero-eyebrow {
  font-size: var(--gpm-font-size-2);
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 1;
  font-weight: var(--gpm-font-weight-1);
  margin: 0 0 var(--gpm-space-2);
  color: var(--gpm-color-brand);
}

.gpm-anonymous-hero-title {
  font-size: 44px;
  font-weight: var(--gpm-font-weight-2);
  line-height: 1.1;
  margin: 0 0 var(--gpm-space-3);
  color: var(--gpm-color-white);
}

.gpm-anonymous-hero-blurb {
  font-size: var(--gpm-font-size-4);
  line-height: 1.55;
  opacity: 0.88;
  margin: 0 auto var(--gpm-space-5);
  max-width: 560px;
  color: var(--gpm-color-white);
}

.gpm-anonymous-hero-search {
  display: flex;
  align-items: center;
  gap: var(--gpm-space-2);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-2) var(--gpm-space-3);
  max-width: 520px;
  margin: 0 auto var(--gpm-space-4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.gpm-anonymous-hero-search-icon {
  color: var(--gpm-color-gray-2);
  flex-shrink: 0;
}

.gpm-anonymous-hero-search .search,
.gpm-anonymous-hero-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font: inherit;
  font-size: var(--gpm-font-size-4);
  color: var(--gpm-color-gray-1);
  width: 100%;
}

.gpm-anonymous-hero-search input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: var(--gpm-font-size-4);
  color: var(--gpm-color-gray-1);
  width: 100%;
}

.gpm-anonymous-hero-cta {
  font-size: var(--gpm-font-size-3);
  opacity: 0.85;
  margin: 0;
  color: var(--gpm-color-white);
}

.gpm-anonymous-hero-signin {
  color: var(--gpm-color-white);
  text-decoration: underline;
  font-weight: var(--gpm-font-weight-2);
}

.gpm-anonymous-hero-signin:hover {
  opacity: 0.85;
}

/* Signed-out Introduction: the sign-in hero replaces the article hero. */
.gpm-intro-anon-hero + .gpm-article-hero {
  display: none;
}

/* Hide the original Copenhagen .hero rules' background art when our anonymous
   hero is in use — belt-and-suspenders for the ::before pseudo-element used
   in the upstream theme. */
/* (Removed the blanket ::before/::after hide — pseudo-elements are now used
   for the hero depth treatment in the UI polish section below.) */

/* ==========================================================================
   Recent activity heading polish
   ========================================================================== */

.gpm-recent-activity-heading {
  font-size: var(--gpm-font-size-5);
  font-weight: var(--gpm-font-weight-2);
  margin: var(--gpm-space-6) 0 var(--gpm-space-3);
  color: var(--gpm-color-gray-1);
  text-align: left;
}


/* ==========================================================================
   Sticky footer — keep footer anchored to viewport bottom on short pages
   (especially the homepage now that we removed Community + Recent activity).
   ========================================================================== */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The Copenhagen template wraps page content in a few outer divs. Force the
   main column to grow so the footer is pushed to the bottom even on short
   pages. The :has() selector targets the body's main child only when the
   home_page.hbs container is present. */
body > .main,
body > main,
.main-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Inside main, the .container holding the categories grid should not stretch
   weirdly — let it sit at its natural height with a comfortable bottom gap. */
.container[data-gpm-default-home] {
  padding-bottom: var(--gpm-space-7);
  padding-top: var(--gpm-space-6);
  width: 100%;
  max-width: none;
}

/* Center the entire content block within the available main area, matching
   the signed-in quick-links layout (which uses .gpm-quick-links-inner). */
.container[data-gpm-default-home] .knowledge-base {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gpm-space-5);
}

/* Landing page (Chad, 2026-07-31): orientation instead of nav-duplicating
   cards. The vertical cards are functional - they drive the content-vertical
   filter - and the two-column block below carries the intro and sign-in hook. */

.gpm-home-verticals-title {
  font-size: var(--gpm-font-size-5);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-1);
  margin: 0 0 var(--gpm-space-1);
}

.gpm-home-verticals-sub {
  font-size: 14px;
  color: var(--gpm-color-gray-2);
  margin: 0 0 var(--gpm-space-4);
}

.gpm-vertical-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gpm-space-3);
}

.gpm-vertical-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--gpm-space-4) var(--gpm-space-4) var(--gpm-space-5);
  font: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid var(--gpm-color-gray-4);
  border-top: 3px solid var(--gpm-color-brand);
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.gpm-vertical-card:hover {
  box-shadow: 0 6px 18px rgba(47, 57, 65, 0.12);
  transform: translateY(-2px);
}

.gpm-vertical-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 174, 55, 0.35);
}

.gpm-vertical-card.is-selected {
  border-color: var(--gpm-color-brand);
  box-shadow: 0 0 0 1px var(--gpm-color-brand);
}

.gpm-vertical-card-title {
  font-size: 16px;
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-1);
}

.gpm-vertical-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gpm-color-gray-2);
}

.gpm-home-verticals-clear {
  margin: var(--gpm-space-3) 0 0;
  font-size: 13px;
  color: var(--gpm-color-gray-2);
}

.gpm-vertical-clear-btn {
  font: inherit;
  font-size: 13px;
  color: var(--gpm-color-brand);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.gpm-home-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--gpm-space-6);
  margin-top: var(--gpm-space-7);
  padding-top: var(--gpm-space-6);
  border-top: 1px solid var(--gpm-color-gray-4);
}

@media (max-width: 900px) {
  .gpm-home-columns {
    grid-template-columns: 1fr;
  }
}

.gpm-home-intro {
  max-width: 640px;
}

.gpm-home-intro-title {
  font-size: var(--gpm-font-size-5);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-gray-1);
  margin: 0 0 var(--gpm-space-4);
}

.gpm-home-intro p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gpm-color-gray-1);
  margin: 0 0 var(--gpm-space-3);
}

.gpm-home-intro p:last-child {
  color: var(--gpm-color-gray-2);
}

.gpm-home-aside {
  padding: var(--gpm-space-5);
  background: var(--gpm-color-gray-5);
  border-radius: 8px;
  align-self: start;
}

.gpm-home-aside-title {
  font-size: 13px;
  font-weight: var(--gpm-font-weight-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gpm-color-gray-1);
  margin: 0 0 var(--gpm-space-2);
}

.gpm-home-aside p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gpm-color-gray-1);
  margin: 0 0 var(--gpm-space-4);
}

.gpm-home-aside p:last-child {
  margin-bottom: 0;
}

.gpm-home-aside-signin {
  color: var(--gpm-color-brand);
  font-weight: var(--gpm-font-weight-1);
}

.container[data-gpm-default-home] .blocks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gpm-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1100px;
}

.container[data-gpm-default-home] .blocks-item {
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  display: block;
  /* Copenhagen's stock .blocks-item adds a 1px brand-colored border on the
     OUTER li. We render the visible card border on the inner .blocks-item-link
     instead, so zero out the outer one — otherwise short cards (1-line
     descriptions) show a doubled bottom border when flexbox stretches them
     to match a taller sibling in the same row. */
  border: none !important;
}

.container[data-gpm-default-home] .blocks-item-link {
  display: flex;
  flex-direction: column;
  padding: var(--gpm-space-4) var(--gpm-space-5);
  background: var(--gpm-color-white);
  border: 1px solid var(--gpm-color-gray-4);
  border-top: 3px solid var(--gpm-color-brand);
  border-radius: var(--gpm-border-radius-1);
  text-decoration: none;
  color: var(--gpm-color-gray-1);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
}

.container[data-gpm-default-home] .blocks-item-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: var(--gpm-color-gray-1);
}

/* Arrow indicator on the right, matching signed-in quick-link cards. */
.container[data-gpm-default-home] .blocks-item-link::after {
  content: "→";
  position: absolute;
  top: var(--gpm-space-3);
  right: var(--gpm-space-3);
  color: var(--gpm-color-brand);
  font-size: var(--gpm-font-size-3);
  opacity: 0.55;
  transition: transform 0.15s, opacity 0.15s;
}

.container[data-gpm-default-home] .blocks-item-link:hover::after {
  transform: translateX(4px);
  opacity: 1;
}

.container[data-gpm-default-home] .blocks-item-title {
  display: block;
  font-size: var(--gpm-font-size-4);
  font-weight: var(--gpm-font-weight-1);
  line-height: 1.3;
  color: var(--gpm-color-gray-1);
  margin: 0 0 4px;
  padding-right: var(--gpm-space-5);
}

.container[data-gpm-default-home] .blocks-item-description {
  display: block;
  font-size: var(--gpm-font-size-2);
  color: var(--gpm-color-gray-2);
  line-height: 1.3;
  padding-right: var(--gpm-space-5);
}

.container[data-gpm-default-home] .blocks-item-description:empty {
  display: none;
}

footer,
.footer {
  flex-shrink: 0;
}


/* ==========================================================================
   Category page — hero band + sectioned article lists
   ========================================================================== */

/* Top-level wrapper — replaces Copenhagen's nested container/category-container
   wrappers so the hero and section-tree share the same layout parent. */
.gpm-category-page {
  width: 100%;
}

.gpm-category-hero {
  background: #000;
  color: var(--gpm-color-white);
  padding: var(--gpm-space-6) var(--gpm-space-5) var(--gpm-space-7);
  margin: 0 0 var(--gpm-space-5);
}

.gpm-category-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.gpm-category-hero-breadcrumbs {
  font-size: var(--gpm-font-size-2);
  opacity: 0.75;
  margin-bottom: var(--gpm-space-3);
}

.gpm-category-hero-breadcrumbs:empty {
  display: none;
}

.gpm-category-hero-breadcrumbs a,
.gpm-category-hero-breadcrumbs .breadcrumbs a,
.gpm-category-hero-breadcrumbs ol,
.gpm-category-hero-breadcrumbs li {
  color: var(--gpm-color-white);
  text-decoration: none;
  opacity: 0.85;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}

.gpm-category-hero-breadcrumbs a:hover {
  opacity: 1;
  text-decoration: underline;
}

.gpm-category-hero-title {
  font-size: 36px;
  font-weight: var(--gpm-font-weight-2);
  line-height: 1.15;
  margin: 0 0 var(--gpm-space-2);
  color: var(--gpm-color-white);
}

.gpm-category-hero-description {
  font-size: var(--gpm-font-size-4);
  line-height: 1.55;
  opacity: 0.9;
  margin: 0 0 var(--gpm-space-5);
  max-width: 720px;
  color: var(--gpm-color-white);
}

.gpm-category-hero-search {
  display: flex;
  align-items: center;
  gap: var(--gpm-space-2);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-2) var(--gpm-space-3);
  max-width: 520px;
  height: 48px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  flex-wrap: nowrap;
  overflow: hidden;
}

.gpm-category-hero-search-icon {
  color: var(--gpm-color-gray-2);
  flex-shrink: 0;
}

/* The Zendesk {{search}} helper renders a form > input. Make both transparent
   so they don't break the visual treatment of the hero search bar. */
.gpm-category-hero-search form,
.gpm-category-hero-search .search {
  flex: 1;
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  margin: 0;
  padding: 0;
  height: 100%;
}

.gpm-category-hero-search input,
.gpm-category-hero-search input[type="search"],
.gpm-category-hero-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font: inherit;
  font-size: var(--gpm-font-size-4);
  color: var(--gpm-color-gray-1);
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

/* Main content column — same width and centering as the hero inner */

.gpm-category-main {
  width: 100%;
}

.gpm-section-tree {
  display: flex;
  flex-direction: column;
  gap: var(--gpm-space-5);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gpm-space-5) var(--gpm-space-7);
  width: 100%;
}

.gpm-category-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gpm-space-3);
  padding: 0 0 var(--gpm-space-2);
  border-bottom: 2px solid var(--gpm-color-gray-1, #1a1a1a);
  margin-bottom: var(--gpm-space-2);
}

.gpm-category-section-title {
  font-size: var(--gpm-font-size-5);
  font-weight: var(--gpm-font-weight-2);
  margin: 0;
  color: var(--gpm-color-gray-1);
}

.gpm-category-section-title a {
  color: inherit;
  text-decoration: none;
}

.gpm-category-section-title a:hover {
  text-decoration: underline;
}

.gpm-category-section-count {
  font-size: var(--gpm-font-size-2);
  color: var(--gpm-color-gray-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Article list — clean rows with hover */

.gpm-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gpm-article-list-item {
  border-bottom: 1px solid var(--gpm-color-gray-5, #f0f0f0);
}

.gpm-article-list-item:last-child {
  border-bottom: none;
}

.gpm-article-list-link {
  display: flex;
  align-items: center;
  gap: var(--gpm-space-2);
  padding: var(--gpm-space-3) var(--gpm-space-2);
  color: var(--gpm-color-gray-1);
  text-decoration: none;
  font-size: var(--gpm-font-size-4);
  transition: background 0.15s ease, padding-left 0.15s ease;
  border-radius: var(--gpm-border-radius-1);
}

.gpm-article-list-link:hover {
  background: var(--gpm-color-gray-6, #fafafa);
  color: var(--gpm-color-link, #1f73b7);
  padding-left: var(--gpm-space-3);
}

.gpm-article-list-title {
  flex: 1;
}

.gpm-article-list-icon-star {
  color: #ffb800;
  flex-shrink: 0;
}

.gpm-article-list-icon-lock {
  color: var(--gpm-color-gray-2);
  flex-shrink: 0;
}

.gpm-article-list-icon-arrow {
  color: var(--gpm-color-gray-3, #999);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gpm-article-list-link:hover .gpm-article-list-icon-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.gpm-article-list-item--promoted .gpm-article-list-link {
  background: rgba(255, 184, 0, 0.04);
}

.gpm-section-see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--gpm-space-1);
  padding: var(--gpm-space-3) 0 0;
  color: var(--gpm-color-link, #1f73b7);
  text-decoration: none;
  font-size: var(--gpm-font-size-3);
  font-weight: var(--gpm-font-weight-2);
}

.gpm-section-see-all:hover {
  text-decoration: underline;
}

.gpm-section-empty {
  padding: var(--gpm-space-3) 0;
  margin: 0;
  font-size: var(--gpm-font-size-3);
  color: var(--gpm-color-gray-2);
  font-style: italic;
}


/* ==========================================================================
   Browse other topics — sits at the bottom of category pages
   ========================================================================== */

.gpm-other-topics {
  max-width: 1080px;
  margin: var(--gpm-space-7) auto 0;
  padding: var(--gpm-space-6) var(--gpm-space-5) var(--gpm-space-7);
  border-top: 1px solid var(--gpm-color-gray-5, #f0f0f0);
  width: 100%;
  box-sizing: border-box;
}

.gpm-other-topics-title {
  font-size: var(--gpm-font-size-5);
  font-weight: var(--gpm-font-weight-2);
  color: var(--gpm-color-gray-1);
  margin: 0 0 var(--gpm-space-4);
  text-align: left;
}

.gpm-other-topics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gpm-space-3);
  width: 100%;
}

.gpm-other-topics-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gpm-other-topics-item[data-is-current="true"] {
  display: none !important;
}

.gpm-other-topics-link {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gpm-space-1);
  padding: var(--gpm-space-4);
  border: 1px solid var(--gpm-color-gray-4, #e5e5e5);
  border-radius: var(--gpm-border-radius-2, 8px);
  background: var(--gpm-color-white);
  text-decoration: none !important;
  color: var(--gpm-color-gray-1);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

.gpm-other-topics-link:hover {
  border-color: #D4AE37;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-decoration: none !important;
}

.gpm-other-topics-name {
  display: block;
  font-size: var(--gpm-font-size-4);
  font-weight: var(--gpm-font-weight-2);
  color: var(--gpm-color-gray-1);
  padding-right: var(--gpm-space-4);
}

.gpm-other-topics-description {
  display: block;
  font-size: var(--gpm-font-size-3);
  color: var(--gpm-color-gray-2);
  line-height: 1.45;
  margin-top: var(--gpm-space-1);
}

.gpm-other-topics-arrow {
  color: var(--gpm-color-gray-3, #999);
  position: absolute;
  top: var(--gpm-space-4);
  right: var(--gpm-space-4);
  opacity: 0.6;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gpm-other-topics-link:hover .gpm-other-topics-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: #D4AE37;
}

/* ============================================================================
   BEGIN tech menu / preferred vendors styles - ported from prod theme.

   Used by templates/section_pages/tech_menu.hbs and
   templates/section_pages/preferred_vendors.hbs (and the matching category
   page). Powered by Vue.js components in script-techMenuList.js +
   script-preferredvendorsList.js, which read the JSON blob from the relevant
   Zendesk Dynamic Content variable and render a filterable tile grid.

   The .hero-preferred-vendors background image reference at the top points
   to a Sass-compiled asset variable ($assets-...) which Zendesk substitutes
   at theme upload time with the actual asset URL.
   ============================================================================ */
.hero-tech-menu {
  margin-bottom: 0;
}

.tech-menu-wrapper {
  padding: 20px 15px;
  margin-top: 40px;
}

.tech-menu-oa-wrapper {
  width: 65%;
}

.tech-menu-heading {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #D4AE37;
  text-transform: uppercase;
}

.tech-menu-oa-heading {
  padding: 50px 40px;
}

.tech-menu-oa-heading span {
  font-size: 24px;
  color: #000;
}

.tech-menu-oa-heading p {
  font-size: 18px;
}

.tech-menu-oa-heading li {
  list-style-image: url($assets-check-mark-yellow-svg);
  font-size: 18px;
  margin: auto;
}

.tech-menu-oa-heading li::marker {
  font-size: 250%;
}

.tech-menu-legend {
  border-radius: 5px;
  padding: 15px;
  background: #f5f5f7;
  width: 66%;
  margin: 25px auto;
  display: flex;
  margin-left: 0;
}

.tech-menu-legend img {
  width: 85px;
  margin-right: 20px;
}

.tech-menu-legend span {
  font-size: 16px;
}

.tech-menu-list-wrapper {
  position: relative;
  margin-top: 100px;
}

.tech-menu-list-wrapper h2 {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 150% text-align:center;
}

.tech-menu-header {
  padding: 20px;
  height: 90px;
  position: relative;
}

.tech-menu-filter-wrapper {
  border-radius: 16px;
  background: #f9f8f8;
  padding: 40px;
  margin-bottom: 56px;
}

.tech-menu-filter-wrapper > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tech-menu-filter-wrapper > div .tech-menu-filter {
  order: 1;
  max-width: calc(100% - 322px);
}

.tech-menu-filter-wrapper > div .tech-menu-header {
  order: 2;
  min-width: 322px;
  padding: 0px;
}

.tech-menu-filter-wrapper > div .tech-menu-list {
  order: 3;
  width: 100%;
}

.tech-menu-header input {
  width: 300px;
  border-radius: 8px;
  border: 1px solid var(--swatch-gray-300, #BBC0C1);
  background-color: var(--swatch-white, #FFF);
  background-image: url($assets-icon-search-svg);
  background-repeat: no-repeat;
  background-position: 8px center;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15) inset;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 36px;
  padding: 8px 9px 9px 29px;
  color: #6C7778;
}

.tech-menu-header input:focus {
  border: 1px solid #000;
  color: #3D4452;
  outline: 0;
  box-shadow: none;
}

.tech-menu-title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  display: none;
}

.tech-menu-filter {
  padding: 0 0px;
}

.tech-menu-filter button:first-of-type {
  border-radius: 4px 0px 0px 4px;
}

.tech-menu-filter button:last-of-type {
  border-radius: 0px 4px 4px 0px;
  border-right: 1px solid #868896;
}

.tech-menu-filter button {
  background-color: #fff;
  cursor: pointer;
  transition: all .25s;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 6px 16px;
  height: 36px;
  line-height: 48px;
  border: none;
  color: #868896;
  transition: all .25s;
  position: relative;
  font-weight: bold;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.1px;
  text-transform: capitalize;
  border: 1px solid #868896;
  border-right: 0px none;
}

.tech-menu-filter button:hover {
  background-color: #000000;
  color: #fff;
}

.tech-menu-filter button img {
  width: 140px;
}

.tech-menu-list {
  column-count: 3;
  column-gap: 13px;
  max-width: 100%;
}

.preferred-vendors-list {
  padding: 60px 10px;
  column-count: 3;
  column-gap: 8em;
  max-width: 90%;
}

.tech-menu-oa-list {
  column-gap: 6em;
}

.tech-menu-item {
  background: #fff;
  border-radius: 7px;
  padding: 12px;
  max-width: 354px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 13px;
}

.tech-menu-item .tech-menu-item-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tech-menu-oa-item {
  width: 235px;
}

.tech-menu-item-header {
  display: flex;
  justify-content: space-between;
}

.tech-menu-item-body .description {
  margin-top: 20px;
}

.tech-menu-item-body .region {
  margin-top: 20px;
}

.tech-menu-item-body a {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 171.429% */
  letter-spacing: -0.1px;
  text-transform: capitalize;
  color: #1A98FF;
  text-decoration: none;
}

.tech-menu-item-body a:hover {
  color: #000000;
  text-decoration: underline;
}

.tech-menu-logo-title {
  font-weight: bold;
  color: #1A202B;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: .5px;
}

.tech-menu-logo-title img {
  height: 45px;
}

.tech-menu-oa-logo-title img {
  height: 30px;
}

.original-access-logo img {
  width: 50px;
}
.original-access-logo {
    padding-bottom: 10px;
}

.original-access-oa-logo img {
  width: 35px;
}

.price-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.price {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: -0.1px;
  text-transform: capitalize;
  color: #fff;
  border-radius: 4px;
  margin-right: 4px;
  margin-bottom: 24px;
  height: 20px;
  padding: 0px 8px;
}

.price-wrapper:empty,
.price:empty {
  display: none;
}

.price-wrapper .free {
  background-color: #1A98FF;
}

.price-wrapper .discounted {
  background-color: #494b9f;
}

.filter-active {
  background: #000000 !important;
  color: #fff !important;
}

/* end of tech menu cstom page */

/* --- original-access-logo block from prod style.css ~line 128 --- */
#original-access-logo {
  background-image: url($assets-logo-original-access-svg);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #E6E7F0;
  border-radius: 4px;
  height: 20px;
  width: 106px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* END tech menu / preferred vendors styles */

/* ============================================================================
   GPM Phase 2 — overrides for the ported tech-menu / preferred-vendors layout.

   The prod-extracted CSS above uses CSS multi-column (`column-count: 3`) with
   per-component spacing tuned to the prod theme's flex structure. Overlaid
   on Copenhagen our wrapper has slightly different parent widths/padding,
   which leaves the tiles too sparse and the filter row collapsed in odd
   positions. These rules use CSS grid instead — predictable, no flex order
   gymnastics, and the spacing reads cleanly at our viewport widths.
   ============================================================================ */

/* Tile grid — CSS grid replaces the multi-column flow */
.tech-menu-list,
.preferred-vendors-list {
  column-count: unset !important;
  column-gap: unset !important;
  padding: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}

/* Individual tile — consistent card with a fixed minimum height so logos and
   descriptions of varying lengths line up across rows. */
.tech-menu-item,
.tech-menu-oa-item {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  break-inside: avoid;
  margin: 0 !important;
}

/* Tile logo — clamp size so a 4000x4000 SME paste doesn't take over the tile */
.tech-menu-logo-title img,
.tech-menu-oa-logo-title img {
  max-width: 160px !important;
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 12px;
}

.tech-menu-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tech-menu-item-body .description {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #2f3941;
  margin-bottom: 12px;
}

.tech-menu-item-body .region {
  font-size: 13px;
  color: #68737d;
  margin-bottom: 12px;
}

/* Filter + search row at the top of the grid wrapper.
   The Vue components render a single root div containing .tech-menu-header,
   .tech-menu-filter, and .tech-menu-list as siblings. We style the whole
   thing as a vertical stack — header on top, filter row, then the grid. */
.tech-menu-filter-wrapper {
  padding: 24px !important;
  margin-bottom: 32px !important;
  border-radius: 12px !important;
  background: #f9f8f8 !important;
}

.tech-menu-filter-wrapper > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Override the prod calc(100% - 322px) cap that can collapse the filter row */
.tech-menu-filter-wrapper > div .tech-menu-filter,
.tech-menu-filter-wrapper > div .tech-menu-header,
.tech-menu-filter-wrapper > div .tech-menu-list {
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  order: unset !important;
}

/* Header (search box row) */
.tech-menu-header {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  padding: 0 !important;
}

.tech-menu-header input {
  max-width: 320px;
  width: 100%;
  padding: 10px 16px !important;
  border: 1px solid #d8dcde !important;
  border-radius: 8px !important;
  font-size: 14px;
}

.tech-menu-header input:focus {
  border-color: #D4AE37 !important;
  outline: none !important;
}

/* Filter row */
.tech-menu-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tech-menu-filter button {
  background-color: #fff !important;
  border: 1px solid #868896 !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  margin: 0 !important;
}

.tech-menu-filter button:first-of-type {
  border-radius: 6px 0 0 6px !important;
}

.tech-menu-filter button:last-of-type {
  border-radius: 0 6px 6px 0 !important;
  border-right: 1px solid #868896 !important;
}

.tech-menu-filter button:hover {
  background-color: #f4f4f4 !important;
}

.tech-menu-filter button.filter-active {
  background-color: #D4AE37 !important;
  color: #fff !important;
  border-color: #D4AE37 !important;
}

.tech-menu-filter button img {
  height: 20px;
  width: auto;
}

/* Hide the auto-generated H2 if the script renders it empty (some pages
   don't supply a title to the component). */
.tech-menu-list-wrapper h2:empty {
  display: none;
}

.tech-menu-list-wrapper {
  margin-top: 32px !important;
}

/* Originals Access badge inside a tile (top-right corner) */
.original-access-logo,
.original-access-oa-logo {
  margin-bottom: 8px;
}
.original-access-logo img,
.original-access-oa-logo img {
  max-height: 18px;
  width: auto;
}

/* Mobile / narrow viewport */
@media (max-width: 640px) {
  .tech-menu-list,
  .preferred-vendors-list {
    grid-template-columns: 1fr !important;
  }
  .tech-menu-filter {
    overflow-x: auto;
  }
  .tech-menu-filter button {
    flex-shrink: 0;
  }
}

/* ============================================================================
   GPM Phase 2 — second-pass layout fixes (after first deploy showed issues):
     1. OA badge gray rectangle: $assets-* Sass var doesn't resolve in
        api_version 4. Use the --gpm-oa-logo-url CSS custom property set
        by the page template instead.
     2. 7-column grid at wide viewports — cap at 3 columns max.
     3. Filter buttons + search box on separate rows — combine into one row.
     4. Big gap between hero and content — reduce wrapper top margin.
   ============================================================================ */

/* (1) OA badge — feed background image from a CSS variable that the page
       template populates via {{asset}}. Falls back to a transparent box if
       the variable isn't defined (e.g., on non-tech-menu pages). */
#original-access-logo {
  background-image: var(--gpm-oa-logo-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  height: 18px !important;
  width: 110px !important;
}

/* (2) Cap grid at 3 columns max even on very wide viewports */
.tech-menu-list,
.preferred-vendors-list {
  grid-template-columns: 1fr !important;
}

@media (min-width: 700px) {
  .tech-menu-list,
  .preferred-vendors-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1100px) {
  .tech-menu-list,
  .preferred-vendors-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* (3) Filter buttons + search side-by-side using grid areas — overrides the
       earlier flex-column rule. The Vue component's internal title (an
       empty <h2>) also gets hidden inside the filter row layout. */
.tech-menu-filter-wrapper > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "filter search"
    "list   list" !important;
  gap: 16px 24px !important;
  align-items: center;
}

.tech-menu-filter-wrapper > div .tech-menu-filter   { grid-area: filter; }
.tech-menu-filter-wrapper > div .tech-menu-header   { grid-area: search; justify-content: flex-end !important; }
.tech-menu-filter-wrapper > div .tech-menu-list,
.tech-menu-filter-wrapper > div .preferred-vendors-list { grid-area: list; }

/* On narrow viewports, stack vertically */
@media (max-width: 768px) {
  .tech-menu-filter-wrapper > div {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "search"
      "filter"
      "list" !important;
  }
}

/* The Vue template's internal <h2> for "Tech Menu" / "Preferred Vendors" is
   redundant with our hero <h1> above. Hide it. */
.tech-menu-title {
  display: none !important;
}

/* (4) Reduce vertical gap between hero and content */
.tech-menu-wrapper {
  margin-top: 24px !important;
  padding: 16px 0 !important;
}

.gpm-article-hero.hero-tech-menu,
.gpm-article-hero.hero-preferred-vendors {
  min-height: 160px !important;
  padding: 32px 24px !important;
}

.tech-menu-list-wrapper {
  margin-top: 16px !important;
}

/* Tighten the mid-page legend bar so it doesn't dominate the page */
.tech-menu-legend {
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  background: #f9f8f8;
  border-radius: 8px;
}
.tech-menu-legend img {
  max-height: 32px !important;
  width: auto !important;
}

/* ============================================================================
   GPM menu pages — clean rewrite (third pass).

   Self-contained styles for the from-scratch markup in section_page.hbs's
   tech_menu and preferred_vendors layouts. Uses the .gpm-menu-* prefix so
   nothing here collides with prod's .tech-menu-* or .preferred-vendors-*
   classes (which are still emitted by the Vue components for the inner
   tile grid; those are styled separately via overrides at the bottom).

   Page-level container is capped at 1200px so on a 4K monitor the content
   doesn't span the entire viewport. All spacing is on a 4/8/16/24/32/40px
   scale for visual rhythm.
   ============================================================================ */

.gpm-menu-page {
  --gpm-page-max-width: 1200px;
  --gpm-page-padding: 24px;
  background: #fff;
}

/* Hero — solid black band with the section title */
.gpm-menu-hero {
  background: #000;
  padding: 40px var(--gpm-page-padding);
  margin: 0;
  text-align: center;
}

.gpm-menu-hero-title {
  color: #fff !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Page content area — capped width, generous side padding on narrow screens */
.gpm-menu-content {
  max-width: var(--gpm-page-max-width);
  margin: 0 auto;
  padding: 32px var(--gpm-page-padding) 64px;
}

/* Intro paragraph — narrower than the page width so it reads well */
.gpm-menu-intro {
  max-width: 760px;
  margin: 0 auto 24px !important;
  text-align: center;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #2f3941 !important;
}

.gpm-menu-intro strong {
  color: #D4AE37;
}

/* Originals Access info pill — for tech menu page */
.gpm-menu-oa-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fef7e7;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 auto 32px;
  max-width: 760px;
  font-size: 14px;
  color: #2f3941;
}

.gpm-menu-oa-bar img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

/* Confidential note — for preferred vendors page */
.gpm-menu-confidential-note {
  background: #fff4e8;
  border: 1px solid #ff6600;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 auto 32px;
  max-width: 760px;
  font-size: 14px;
  color: #ff6600;
  text-align: left;
}

/* Vue component mount wrapper — no padding, the inner tile grid wrapper has its own */
.gpm-menu-grid-wrapper {
  margin-top: 16px;
}

/* ----------------------------------------------------------------------------
   Inner tile grid — the Vue component renders into here. We override prod's
   .tech-menu-* classnames since they're emitted by the component template.
   These rules use higher specificity (.gpm-menu-grid-wrapper prefix) to win
   over the prod-extracted CSS without resorting to !important everywhere.
   ---------------------------------------------------------------------------- */

/* The Vue component's outermost div */
.gpm-menu-grid-wrapper > div {
  display: block !important;
}

/* Header row: the Vue template renders <div class="tech-menu-header">
   containing a title + search input. We hide the title (it duplicates the
   hero) and style the search input as the primary control. */
.gpm-menu-grid-wrapper .tech-menu-header {
  display: flex !important;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0 !important;
}

.gpm-menu-grid-wrapper .tech-menu-title {
  display: none !important;
}

.gpm-menu-grid-wrapper .tech-menu-header input {
  flex: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 12px 16px !important;
  border: 1px solid #d8dcde !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  color: #2f3941 !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gpm-menu-grid-wrapper .tech-menu-header input::placeholder {
  color: #87929d;
  opacity: 1;
}

.gpm-menu-grid-wrapper .tech-menu-header input:focus {
  outline: none !important;
  border-color: #D4AE37 !important;
  box-shadow: 0 0 0 3px rgba(23, 73, 77, 0.15) !important;
}

/* Filter row: pill-button group */
.gpm-menu-grid-wrapper .tech-menu-filter {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px !important;
  padding: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
}

.gpm-menu-grid-wrapper .tech-menu-filter button {
  background: #fff !important;
  border: 1px solid #d8dcde !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500;
  color: #2f3941 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0 !important;
  white-space: nowrap;
}

.gpm-menu-grid-wrapper .tech-menu-filter button:hover {
  border-color: #D4AE37 !important;
  background: #f4f7f7 !important;
}

.gpm-menu-grid-wrapper .tech-menu-filter button.filter-active {
  background: #D4AE37 !important;
  border-color: #D4AE37 !important;
  color: #fff !important;
}

.gpm-menu-grid-wrapper .tech-menu-filter button img {
  height: 18px;
  width: auto;
  vertical-align: middle;
}

/* Tile grid */
.gpm-menu-grid-wrapper .tech-menu-list,
.gpm-menu-grid-wrapper .preferred-vendors-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  column-count: unset !important;
  column-gap: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

@media (min-width: 700px) {
  .gpm-menu-grid-wrapper .tech-menu-list,
  .gpm-menu-grid-wrapper .preferred-vendors-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .gpm-menu-grid-wrapper .tech-menu-list,
  .gpm-menu-grid-wrapper .preferred-vendors-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Individual tile */
.gpm-menu-grid-wrapper .tech-menu-item {
  background: #fff !important;
  border: 1px solid #e9ebed !important;
  border-radius: 12px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gpm-menu-grid-wrapper .tech-menu-item:hover {
  border-color: #D4AE37 !important;
  box-shadow: 0 2px 8px rgba(23, 73, 77, 0.08) !important;
}

/* Tile header (logo + price + OA badge) */
.gpm-menu-grid-wrapper .tech-menu-item-header {
  margin-bottom: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gpm-menu-grid-wrapper .tech-menu-logo-title {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
}

.gpm-menu-grid-wrapper .tech-menu-logo-title img {
  max-width: 140px !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.gpm-menu-grid-wrapper .tech-menu-logo-title > div {
  font-weight: 600;
  color: #2f3941;
  font-size: 16px;
  line-height: 1.3;
}

/* Originals Access badge inside a tile */
.gpm-menu-grid-wrapper .original-access-logo {
  align-self: flex-start;
}

.gpm-menu-grid-wrapper #original-access-logo {
  background-image: var(--gpm-oa-logo-url) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  background-color: transparent !important;
  display: inline-block !important;
  height: 18px !important;
  width: 110px !important;
  border-radius: 0 !important;
}

/* Tile body */
.gpm-menu-grid-wrapper .tech-menu-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gpm-menu-grid-wrapper .tech-menu-item-body .description {
  flex: 1;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #49545c !important;
  margin: 0 0 12px !important;
}

.gpm-menu-grid-wrapper .tech-menu-item-body .region {
  font-size: 12px !important;
  color: #68737d !important;
  margin: 0 0 12px !important;
  font-weight: 500;
}

.gpm-menu-grid-wrapper .tech-menu-item-body p {
  margin: 0 0 6px !important;
}

.gpm-menu-grid-wrapper .tech-menu-item-body a {
  color: #1f73b7 !important;
  font-size: 13px !important;
  text-decoration: none;
  font-weight: 500;
}

.gpm-menu-grid-wrapper .tech-menu-item-body a:hover {
  text-decoration: underline;
  color: #144a75 !important;
}

/* Price tag (rare in tech menu, used by some prod data) */
.gpm-menu-grid-wrapper .price-wrapper {
  margin: 0 0 4px !important;
}

.gpm-menu-grid-wrapper .price {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

.gpm-menu-grid-wrapper .price.free { background: #228f67; }
.gpm-menu-grid-wrapper .price.discounted { background: #4d39c1; }

/* Mobile adjustments */
@media (max-width: 640px) {
  .gpm-menu-hero { padding: 24px var(--gpm-page-padding); }
  .gpm-menu-hero-title { font-size: 24px !important; }
  .gpm-menu-content { padding: 24px var(--gpm-page-padding) 48px; }
  .gpm-menu-grid-wrapper .tech-menu-filter { gap: 6px; }
  .gpm-menu-grid-wrapper .tech-menu-filter button {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
}

/* ============================================================================
   Tile grid embedded inside the article page body.

   The article-page container has its own width/padding/font conventions
   (Copenhagen's .article-content wraps body content in a narrower column
   with reading-friendly typography). Our tile grid wants a wider canvas
   and edge-to-edge layout. Break the wrapper out of the article column.
   ============================================================================ */

.article-content > .gpm-menu-grid-wrapper {
  /* Reset any inherited typography that would affect filter/tile text */
  font-size: 14px;
  line-height: 1.5;
  /* Ensure the grid can use the full width of the article-content container */
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* The article-content typography rules can give descendant <p> tags large
   margins. Reset so tile body paragraphs stack tightly. */
.article-content > .gpm-menu-grid-wrapper p {
  margin: 0 0 6px;
  font-size: inherit;
  line-height: inherit;
}

/* Copenhagen's .article-body styles can override our tile borders. Re-pin. */
.article-content > .gpm-menu-grid-wrapper .tech-menu-item {
  background: #fff !important;
  border: 1px solid #e9ebed !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* Search input + filter buttons inside article column — keep them readable */
.article-content > .gpm-menu-grid-wrapper .tech-menu-header input {
  font-size: 14px !important;
}

.article-content > .gpm-menu-grid-wrapper .tech-menu-filter button {
  font-size: 13px !important;
}

/* ============================================================================
   Tech Menu / Preferred Vendors INSIDE article page.

   When the .gpm-menu-page wrapper renders inside .article-content (which
   has Copenhagen's narrower reading-column padding), we want it to break
   out and use the full container width — same edge-to-edge feel as the
   section-page version. Also hide article-page chrome that competes with
   the tile grid (sidebar, attachments list, content tags).

   The .gpm-menu-page--in-article modifier scopes these resets so they
   only apply to the table-driven articles, not all articles.
   ============================================================================ */

/* Break out of article-content's reading column to use the article container's
   full width. Negative margins counter the article-content's horizontal padding. */
.gpm-menu-page--in-article {
  margin-left: calc(-1 * var(--article-content-padding-x, 0));
  margin-right: calc(-1 * var(--article-content-padding-x, 0));
}

.gpm-menu-page--in-article .gpm-menu-content {
  /* keep it max-width 1200 like section-page version, but no extra side
     padding since article-content already has padding */
  padding: 16px 0 48px;
}

/* Hide the article-page sidebar (section's article list) — these table-
   driven sections have only one "article" anyway, so the sidebar is just
   noise. Uses :has() so it only applies to articles with our wrapper. */
.article-container:has(.gpm-menu-page--in-article) .article-sidebar {
  display: none;
}

/* Make the article-content area span full width when our wrapper is inside,
   since we just hid the sidebar */
.article-container:has(.gpm-menu-page--in-article) .article-content,
.article-container:has(.gpm-menu-page--in-article) .article-info {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 !important;
}

/* Hide the duplicate article-header H1 (we already have the gpm-article-hero
   showing the title) so the page doesn't repeat itself */
.article-container:has(.gpm-menu-page--in-article) .article-header {
  display: none;
}

/* Hide the article-author block (created/edited dates etc.) */
.article-container:has(.gpm-menu-page--in-article) .article-author {
  display: none;
}

/* Hide attachments list at the bottom — the placeholder article's
   inline-image attachments would otherwise show up as a confusing list */
.article-container:has(.gpm-menu-page--in-article) .article-attachments {
  display: none;
}

/* Hide the article body for table-driven content articles. The .gpm-menu-page
   wrapper renders below, providing intro copy + the tile grid. Hiding the
   stale article body avoids showing the redundant placeholder text. */
.article-content:has(.gpm-menu-page--in-article) > .article-body {
  display: none !important;
}

/* Hide the article-page sub-nav (breadcrumbs + page-level search) for
   table-driven content articles. The Vue tile grid has its own filter
   search, and showing both creates two near-identical search boxes with
   no visual distinction — testers find this confusing. The page-level
   search is also redundant here since the page is a single-purpose grid. */
.container:has(.gpm-menu-page--in-article) > .sub-nav {
  display: none !important;
}


/* ==========================================================================
   Amazon MGM Studios brand typography
   Ember Modern Display = headings/display, Ember Modern Text = body.
   @font-face is declared in document_head.hbs (needs {{asset}} for url()).
   !important guards against Copenhagen's $heading_font/$text_font base rules.
   ========================================================================== */
body,
.gpm-sidebar,
.gpm-sidebar-nav-link,
.gpm-sidebar-production-button,
button, input, select, textarea,
.article-body, p, li, td, th, dd, dt {
  font-family: 'Ember Modern Text', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.gpm-sidebar-nav-heading,
.gpm-sidebar-production-label,
.gpm-production-hero-title,
.gpm-article-hero-title,
.gpm-menu-hero-title,
.gpm-anonymous-hero-title {
  font-family: 'Ember Modern Display', 'Ember Modern Text', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}


/* Feedback comment popout under the hero votes: white-on-dark, matching the
   hero treatment so it reads as part of the page-level feedback control. */
.gpm-feedback-popout {
  margin-top: 12px;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
}
.gpm-feedback-label {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.gpm-feedback-text {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
  box-sizing: border-box;
}
.gpm-feedback-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.gpm-feedback-send {
  background: var(--gpm-color-brand);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.gpm-feedback-send:hover { filter: brightness(1.08); }
.gpm-feedback-dismiss {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
}
.gpm-feedback-status {
  margin: 8px 0 0;
  color: #fff;
  font-size: 13px;
}


/* ==========================================================================
   Article page layout overhaul — best-practice docs layout
   - sticky right-hand "On this page" rail fills the previously empty space
   - search rendered as a normal left-aligned bar (was floating far right)
   - language switcher removed from the hero (footer already provides one)
   ========================================================================== */

/* Center the article within the space to the right of the fixed sidebar so
   ultra-wide screens don't leave a lopsided empty right margin. */
body:has(.gpm-sidebar) .article,
body.gpm-phase2-layout .article {
  max-width: 1240px;
  margin: 0 auto;
}

/* Search: stop the margin-left:auto float; align it with the content. */
body:has(.gpm-sidebar) .sub-nav,
body.gpm-phase2-layout .sub-nav {
  justify-content: flex-start;
}
body:has(.gpm-sidebar) .sub-nav .search-container,
body.gpm-phase2-layout .sub-nav .search-container {
  margin-left: 0 !important;
  width: 100%;
  max-width: 560px;
}

/* Two-column article layout: content on the left, sticky TOC on the right. */
.article-info.gpm-has-toc-rail {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--gpm-space-7);
}
.article-info.gpm-has-toc-rail .gpm-article-toc {
  flex: 0 0 264px;
  width: 264px;
  margin: 0;
  position: sticky;
  top: var(--gpm-space-4);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.article-info.gpm-has-toc-rail .article-content {
  flex: 1 1 auto;
  min-width: 0;
}
.article-info.gpm-has-toc-rail .article-body {
  max-width: 100%;
}

/* Collapse to a single column on narrower viewports. */
@media (max-width: 1100px) {
  .article-info.gpm-has-toc-rail {
    flex-direction: column;
  }
  .article-info.gpm-has-toc-rail .gpm-article-toc {
    position: static;
    width: 100%;
    flex: none;
    max-height: none;
    margin-bottom: var(--gpm-space-5);
  }
}


/* ==========================================================================
   Persistent sidebar search (replaces the orphaned in-content search)
   ========================================================================== */
.gpm-sidebar-search {
  margin: var(--gpm-space-2) var(--gpm-space-5) var(--gpm-space-3);
}
.gpm-sidebar-search-field {
  display: flex;
  align-items: center;
  gap: var(--gpm-space-1);
  padding: 8px 10px;
  background: var(--gpm-color-gray-5);
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: var(--gpm-border-radius-1);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.gpm-sidebar-search-field:focus-within {
  border-color: var(--gpm-color-brand);
  box-shadow: 0 0 0 3px rgba(212, 174, 55, 0.18);
}
.gpm-sidebar-search-icon { color: var(--gpm-color-gray-2); flex-shrink: 0; }
.gpm-sidebar-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: var(--gpm-font-size-3);
  color: var(--gpm-color-gray-1);
}
.gpm-sidebar-search input::placeholder { color: var(--gpm-color-gray-3); }
.gpm-sidebar-search-all {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 6px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: var(--gpm-border-radius-0);
  color: var(--gpm-color-brand);
  font: inherit;
  font-size: var(--gpm-font-size-1);
  font-weight: var(--gpm-font-weight-1);
  cursor: pointer;
  line-height: 1.3;
}
.gpm-sidebar-search-all:hover { background: var(--gpm-color-gray-5); }
.gpm-sidebar-search-all[hidden] { display: none; }

/* Search now lives in the sidebar — hide the old in-content sub-nav entirely. */
body:has(.gpm-sidebar) .sub-nav,
body.gpm-phase2-layout .sub-nav {
  display: none !important;
}

/* ==========================================================================
   TOC link colors — neutral at rest, gold on hover / active section.
   Higher specificity than `.article a:visited { color: brand }` so same-page
   anchor links don't render gold by default.
   ========================================================================== */
.article .gpm-article-toc .gpm-article-toc-link,
.article .gpm-article-toc .gpm-article-toc-link:visited {
  color: var(--gpm-color-gray-1);
}
.article .gpm-article-toc .gpm-article-toc-link:hover,
.article .gpm-article-toc .gpm-article-toc-link.is-active,
.article .gpm-article-toc .gpm-article-toc-link.is-active:visited {
  color: var(--gpm-color-brand);
}


/* ==========================================================================
   Kill the native search "clear" (×) control that flashes in search fields
   ========================================================================== */
.gpm-sidebar-search input::-webkit-search-cancel-button,
.gpm-sidebar-search input::-webkit-search-decoration,
.gpm-topbar-search input::-webkit-search-cancel-button,
.gpm-topbar-search input::-webkit-search-decoration,
.gpm-production-hero-search-input::-webkit-search-cancel-button,
.gpm-production-hero-search-input::-webkit-search-decoration,
.gpm-anonymous-hero-search input::-webkit-search-cancel-button,
.gpm-anonymous-hero-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* ==========================================================================
   Production hero — balanced two-column layout with a details card so the
   right side is used instead of sitting empty.
   ========================================================================== */
.gpm-production-hero-inner {
  display: flex;
  gap: var(--gpm-space-7);
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.gpm-production-hero-main { flex: 1 1 auto; max-width: 620px; }
.gpm-production-hero-card {
  flex: 0 0 280px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 174, 55, 0.45);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-4) var(--gpm-space-5);
}
.gpm-production-hero-card-label {
  margin: 0 0 var(--gpm-space-3);
  font-size: var(--gpm-font-size-1);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-brand);
}
.gpm-production-hero-facts { margin: 0; display: grid; gap: var(--gpm-space-2); }
.gpm-production-hero-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--gpm-space-3);
  padding-bottom: var(--gpm-space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.gpm-production-hero-facts > div:last-child { border-bottom: none; padding-bottom: 0; }
.gpm-production-hero-facts dt { color: rgba(255, 255, 255, 0.65); font-size: var(--gpm-font-size-2); }
.gpm-production-hero-facts dd {
  margin: 0;
  color: #fff;
  font-weight: var(--gpm-font-weight-1);
  font-size: var(--gpm-font-size-3);
  text-transform: capitalize;
}
@media (max-width: 900px) {
  .gpm-production-hero-inner { flex-direction: column; align-items: flex-start; }
  .gpm-production-hero-card { width: 100%; flex: none; }
}


/* ==========================================================================
   UI polish v2 — hero depth + airier cards (inspired by the Netflix manual)
   ========================================================================== */

/* Hero depth: a soft gold spotlight + a faint oversized wordmark watermark,
   so the hero reads "premium manual" rather than a flat color block.
   (Pure CSS + existing brand asset — no photography needed.) */
.gpm-production-hero,
.gpm-anonymous-hero {
  overflow: hidden;
}
.gpm-production-hero::after,
.gpm-anonymous-hero::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -28px;
  z-index: 0;
  pointer-events: none;
  width: 640px;
  height: 130px;
  background: var(--gpm-wordmark-white) no-repeat right bottom / contain;
  opacity: 0.05;
}
/* Keep hero content above the decorative layers. */
.gpm-production-hero-inner,
.gpm-anonymous-hero-inner {
  position: relative;
  z-index: 1;
}

/* Cards: taller, airier, soft shadow at rest + a clear lift on hover
   (matches the Netflix manual's home-category-block treatment). */
.gpm-quick-link-card,
.container[data-gpm-default-home] .blocks-item-link {
  min-height: 148px;
  justify-content: space-between;
  padding: var(--gpm-space-5);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.05);
}
.gpm-quick-link-card:hover,
.container[data-gpm-default-home] .blocks-item-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.gpm-quick-links-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gpm-space-5);
}


/* ==========================================================================
   UI polish v3 — site-wide
   ========================================================================== */

/* --- Browse cards: icon badge + clean vertical rhythm --- */
.gpm-quick-link-card { justify-content: flex-start; }
.gpm-quick-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gpm-border-radius-1);
  background: rgba(212, 174, 55, 0.12);
  color: var(--gpm-color-brand);
  margin-bottom: var(--gpm-space-3);
}
.gpm-quick-link-card .gpm-quick-link-section { margin-top: auto; }

/* --- Article reading experience (applies to every article) --- */
.article-body {
  font-size: 16px;
  line-height: 1.7;
  color: #2b2b2b;
}
.article-body h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gpm-color-gray-4);
}
.article-body h3 { font-size: 20px; font-weight: 700; margin: 30px 0 8px; }
.article-body h4 { font-size: 16px; font-weight: 700; margin: 22px 0 6px; }
.article-body p { margin: 0 0 16px; }
.article-body a,
.article-body a:visited {
  color: #6b5410;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: var(--gpm-color-brand); }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 24px; }
.article-body li { margin: 5px 0; }
.article-body blockquote {
  margin: 22px 0;
  padding: 12px 20px;
  border-left: 4px solid var(--gpm-color-brand);
  background: var(--gpm-color-gray-5);
  border-radius: 0 var(--gpm-border-radius-1) var(--gpm-border-radius-1) 0;
  color: #444;
}
.article-body hr { border: 0; border-top: 1px solid var(--gpm-color-gray-4); margin: 32px 0; }

/* --- Sidebar active/hover: readable dark text + gold tint + gold rail --- */
.gpm-sidebar-nav-link:hover {
  background: var(--gpm-color-gray-5);
  color: var(--gpm-color-gray-1);
}
.gpm-sidebar-nav-link.is-active {
  background: rgba(212, 174, 55, 0.12);
  color: var(--gpm-color-gray-1);
  font-weight: var(--gpm-font-weight-1);
  border-left-color: var(--gpm-color-brand);
}

/* --- Hero depth: the ghost wordmark alone; the gold glow is gone so the hero
   reads as the same solid black as the topbar --- */
.gpm-production-hero::after,
.gpm-anonymous-hero::after {
  opacity: 0.09;
  width: 740px;
  height: 150px;
}


/* --- Sidebar category icons (site-wide, so every page shows the icon) --- */
.gpm-sidebar-nav-cat-label { flex: 1; text-align: left; }
.gpm-sidebar-nav-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  color: var(--gpm-color-gray-3);
  transition: color 0.12s;
}
.gpm-sidebar-nav-cat-icon svg { width: 18px; height: 18px; }
.gpm-sidebar-nav-cat-header:hover .gpm-sidebar-nav-cat-icon,
.gpm-sidebar-nav-cat.is-expanded > .gpm-sidebar-nav-cat-header .gpm-sidebar-nav-cat-icon {
  color: var(--gpm-color-brand);
}


/* ==========================================================================
   Search results page — bring it into the GPM theme (was raw Copenhagen)
   ========================================================================== */
body:has(.gpm-sidebar) .search-results,
body.gpm-phase2-layout .search-results {
  max-width: 1180px;
  margin: var(--gpm-space-6) auto 0;
  padding: 0 var(--gpm-space-4) var(--gpm-space-8);
  display: flex;
  flex-direction: row-reverse;      /* results on the left, filters on the right */
  gap: var(--gpm-space-7);
  align-items: flex-start;
}
.search-results-column { flex: 1 1 auto; min-width: 0; }
.search-results-sidebar { flex: 0 0 230px; }

.search-results-column > h1,
.search-results-subheading {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 var(--gpm-space-4);
}
.search-results-column > h1 {
  padding-bottom: var(--gpm-space-2);
  border-bottom: 1px solid var(--gpm-color-gray-4);
}

.search-results-list { list-style: none; margin: 0; padding: 0; }
.search-results-list > li {
  background: var(--gpm-color-white);
  border: 1px solid var(--gpm-color-gray-4);
  border-left: 3px solid var(--gpm-color-brand);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-4) var(--gpm-space-5);
  margin-bottom: var(--gpm-space-3);
  transition: box-shadow 0.15s, transform 0.15s;
}
.search-results-list > li:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.search-result-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.search-result-title a { color: var(--gpm-color-gray-1); text-decoration: none; }
.search-result-title a:hover { color: var(--gpm-color-brand); }
.search-result-body { color: var(--gpm-color-gray-2); line-height: 1.6; }
.search-results em { background: rgba(212, 174, 55, 0.22); font-style: normal; border-radius: 2px; padding: 0 2px; }
.search-result-meta-container { color: var(--gpm-color-gray-3); font-size: var(--gpm-font-size-2); }
/* keep per-result breadcrumbs (un-hide; the global rule hides all .breadcrumbs) */
.search-results .search-result-breadcrumbs {
  display: flex !important;
  flex-wrap: wrap;
  color: var(--gpm-color-gray-3);
  font-size: var(--gpm-font-size-2);
  margin-top: 4px;
}

/* filters sidebar */
.search-results-sidebar .sidenav-title {
  font-size: var(--gpm-font-size-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gpm-color-gray-2);
}
.search-results-sidebar .sidenav-item.current,
.search-results-sidebar .sidenav-item[aria-current="page"] {
  color: var(--gpm-color-brand);
  font-weight: var(--gpm-font-weight-1);
}

/* no-results empty state */
.no-results { text-align: center; padding: var(--gpm-space-8) var(--gpm-space-4); color: var(--gpm-color-gray-2); }
.no-results .headline { font-size: 20px; font-weight: 700; color: var(--gpm-color-gray-1); margin-top: var(--gpm-space-4); }
.no-results a { color: var(--gpm-color-brand); font-weight: var(--gpm-font-weight-1); }

@media (max-width: 1000px) {
  body:has(.gpm-sidebar) .search-results,
  body.gpm-phase2-layout .search-results { flex-direction: column; }
  .search-results-sidebar { flex: none; width: 100%; }
}

/* ==========================================================================
   Branded 404 / error page (was bare default)
   ========================================================================== */
.error-page {
  max-width: 620px;
  margin: var(--gpm-space-9) auto;
  padding: var(--gpm-space-7) var(--gpm-space-6);
  text-align: center;
}
.error-page h1 { font-size: 40px; font-weight: 800; color: var(--gpm-color-gray-1); margin: 0 0 var(--gpm-space-3); }
.error-page h2 { font-size: 20px; font-weight: 600; color: var(--gpm-color-gray-1); margin: 0 0 var(--gpm-space-2); }
.error-page p { color: var(--gpm-color-gray-2); margin: 0 0 var(--gpm-space-4); }
.error-page a {
  display: inline-block;
  margin-top: var(--gpm-space-3);
  padding: 10px 22px;
  background: var(--gpm-color-brand);
  color: #000;
  border-radius: var(--gpm-border-radius-0);
  text-decoration: none;
  font-weight: var(--gpm-font-weight-1);
}


/* ==========================================================================
   Intake / "Author a GPM article" request form page (was raw Copenhagen)
   Form is React-rendered into #new-request-form, so we style via CSS.
   ========================================================================== */
body:has(.gpm-sidebar) .container:has(#new-request-form),
body.gpm-phase2-layout .container:has(#new-request-form) {
  max-width: 820px;
  margin: var(--gpm-space-6) auto 0;
  padding: 0 var(--gpm-space-4) var(--gpm-space-8);
}
.container:has(#new-request-form) > h1 {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 var(--gpm-space-4);
  color: var(--gpm-color-gray-1);
}
#main-content.form {
  background: var(--gpm-color-white);
  border: 1px solid var(--gpm-color-gray-4);
  border-top: 3px solid var(--gpm-color-brand);
  border-radius: var(--gpm-border-radius-1);
  padding: var(--gpm-space-6);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.05);
}

/* Field labels + inputs */
#new-request-form label { font-weight: var(--gpm-font-weight-1); }
#new-request-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
#new-request-form textarea,
#new-request-form select {
  border-radius: var(--gpm-border-radius-0);
}
#new-request-form input:not([type="checkbox"]):not([type="radio"]):focus,
#new-request-form textarea:focus,
#new-request-form select:focus,
#new-request-form [contenteditable="true"]:focus {
  border-color: var(--gpm-color-brand) !important;
  box-shadow: 0 0 0 3px rgba(212, 174, 55, 0.18) !important;
  outline: none !important;
}

/* Submit button → brand gold with black text */
#main-content.form button[type="submit"],
#new-request-form button[type="submit"] {
  background: var(--gpm-color-brand) !important;
  border-color: var(--gpm-color-brand) !important;
  color: #000 !important;
  font-weight: var(--gpm-font-weight-1) !important;
}
#main-content.form button[type="submit"]:hover,
#new-request-form button[type="submit"]:hover {
  background: #c19a2e !important;
  border-color: #c19a2e !important;
}

/* ==========================================================================
   GPM topbar: the production portal's global nav, mirrored above the manual
   so the demo shows the manual living inside the wider portal. Full-width and
   fixed; the sidebar and content sit below it (see --gpm-topbar-height offsets).
   ========================================================================== */
.gpm-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gpm-topbar-height);
  background: #000;
  color: #fff;
  z-index: 200;
  display: flex;
  align-items: center;
}
.gpm-topbar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 0 24px;
}
.gpm-topbar-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.gpm-topbar-logo img {
  height: 30px;
  width: auto;
  display: block;
}
/* Search sits by the logo, as on the live portal, and gives up width to the
   tabs before anything else does. */
.gpm-topbar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  flex: 0 1 300px;
  min-width: 160px;
}
.gpm-topbar-search svg {
  flex: 0 0 auto;
  color: #6b7280;
}
.gpm-topbar-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  width: 100%;
  color: #111;
}
.gpm-topbar-nav {
  margin-left: auto;
  flex: 0 0 auto;
}
.gpm-topbar-nav-list {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gpm-topbar-nav-list > li {
  position: relative;
}
.gpm-topbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
  white-space: nowrap;
  padding: 6px 0;
}
.gpm-topbar-nav a:hover,
.gpm-topbar-nav a:focus,
.gpm-topbar-nav a.is-active {
  opacity: 1;
}
/* The section you are in carries the portal's gold underline. */
.gpm-topbar-nav a.is-active {
  box-shadow: inset 0 -2px 0 var(--gpm-color-brand);
}
.gpm-topbar-nav-caret {
  flex: 0 0 auto;
}
/* Resources only opens its menu. Chad asked to drop the link to the old
   /p/resources page, so the label is a button styled like the other tabs. */
.gpm-topbar-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
  white-space: nowrap;
  cursor: pointer;
}
.gpm-topbar-nav-toggle:hover,
.gpm-topbar-nav-toggle:focus,
.gpm-topbar-nav-dropdown:focus-within .gpm-topbar-nav-toggle {
  opacity: 1;
}
/* Resources opens on hover or keyboard focus, no JS. It hangs off the bottom
   edge of the fixed bar, so the bar must never clip overflow. */
.gpm-topbar-nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #000;
  border: 1px solid #333;
  border-top-color: var(--gpm-color-brand);
  z-index: 201;
}
.gpm-topbar-nav-dropdown:hover .gpm-topbar-nav-menu,
.gpm-topbar-nav-dropdown:focus-within .gpm-topbar-nav-menu {
  display: block;
}
.gpm-topbar-nav-menu a {
  display: block;
  padding: 9px 16px;
  font-weight: 600;
  opacity: 0.9;
}
.gpm-topbar-nav-menu a:hover,
.gpm-topbar-nav-menu a:focus {
  background: #222;
}
.gpm-topbar-user {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpm-topbar-button {
  color: #fff !important;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 7px 16px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.gpm-topbar-button:hover,
.gpm-topbar-button:focus {
  background: #fff;
  color: #000 !important;
}

/* Below 1200px the tabs go, the logo still links back to the portal. */
@media (max-width: 1200px) {
  .gpm-topbar-nav,
  .gpm-topbar-user {
    display: none;
  }
  .gpm-topbar-search {
    flex: 1 1 auto;
    margin-left: 0;
  }
  .gpm-topbar-button {
    margin-left: auto;
  }
}
@media (max-width: 900px) {
  .gpm-topbar-button {
    display: none;
  }
  .gpm-topbar-search {
    min-width: 0;
  }
  .gpm-topbar-inner {
    gap: 12px;
    padding: 0 12px 0 6px;
  }
}

/* Hidden on wide screens, where the sidebar is always in view. */
.gpm-topbar-menu {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.gpm-topbar-menu:hover,
.gpm-topbar-menu:focus-visible {
  background: #222;
  outline: none;
}
.gpm-topbar-menu:focus-visible {
  box-shadow: 0 0 0 2px var(--gpm-color-brand);
}
@media (max-width: 900px) {
  .gpm-topbar-menu {
    display: inline-flex;
  }
}

/* "Was this article helpful" in the hero, under the Updated line: white text and
   outline thumb icons (matching the prod portal) on the dark hero, so it reads as
   page-level feedback rather than part of the article body. */
.gpm-article-hero .gpm-hero-votes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.gpm-article-hero .gpm-hero-votes .article-votes-question {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.gpm-article-hero .gpm-hero-votes .article-votes-controls {
  display: inline-flex;
  gap: 8px;
}
.gpm-hero-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.gpm-hero-vote:hover,
.gpm-hero-vote:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}
.gpm-hero-vote.is-voted {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.gpm-article-hero .gpm-hero-votes .article-votes-count {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* Print or Download sits top right in the article hero, like the prod portal. */
.gpm-print-button {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.gpm-print-button:hover,
.gpm-print-button:focus-visible {
  background: #fff;
  color: #000;
}
.gpm-print-button[hidden] {
  display: none;
}
.gpm-print-header {
  display: none;
}
@media (max-width: 767px) {
  .gpm-print-button {
    position: static;
    margin-top: 16px;
  }
}
@media (min-width: 768px) {
  .gpm-article-hero-inner:has(.gpm-print-button:not([hidden])) .gpm-article-hero-title {
    padding-right: 200px;
  }
}

@media print {
  body:has(.gpm-sidebar),
  body.gpm-phase2-layout {
    padding: 0 !important;
  }
  .gpm-topbar,
  .gpm-sidebar,
  .gpm-article-hero,
  .sub-nav,
  .article-sidebar,
  .gpm-article-toc,
  .article-footer,
  .article-votes,
  .article-more-questions,
  .article-return-to-top,
  .article-comments,
  .article-attachments,
  .content-tags,
  .gpm-feedback-popout,
  .footer,
  iframe {
    display: none !important;
  }
  .gpm-print-header {
    display: block;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #000;
    color: #000;
  }
  .gpm-print-logo {
    height: 12px;
    width: auto;
    margin-bottom: 16px;
  }
  .gpm-print-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
  }
  .gpm-print-meta {
    margin: 0;
    font-size: 11px;
  }
  .article-info.gpm-has-toc-rail,
  .article-container,
  .article,
  .article-body {
    display: block !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* Manual Changelog digest (Option C). Scoped to the .cl-* classes the
   changelog article body uses. Maps the mockup's local palette onto the
   theme variables so brand/nav colours stay in sync with the rest of GPM. */
.cl-title {
  font-size: 30px;
  margin: 0 0 6px;
  font-weight: var(--gpm-font-weight-2);
}
.cl-intro {
  color: var(--gpm-color-gray-2);
  font-size: var(--gpm-font-size-4);
  margin: 0 0 30px;
  line-height: 1.5;
}
.cl-section-label {
  font-size: var(--gpm-font-size-2);
  font-weight: var(--gpm-font-weight-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gpm-color-accent);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cl-section-label::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--gpm-color-brand);
}
.cl-cards {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}
.cl-card {
  border: 1px solid var(--gpm-color-gray-4);
  border-left: 4px solid var(--gpm-color-brand);
  border-radius: var(--gpm-border-radius-0);
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(212, 174, 55, .05), var(--gpm-color-white));
}
.cl-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cl-card-article {
  font-size: var(--gpm-font-size-5);
  font-weight: var(--gpm-font-weight-2);
  color: var(--gpm-color-accent);
  text-decoration: none;
}
.cl-card-article:hover {
  color: var(--gpm-color-brand);
  text-decoration: underline;
}
.cl-card-date {
  font-size: var(--gpm-font-size-1);
  color: var(--gpm-color-gray-2);
  white-space: nowrap;
}
.cl-card-topic {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-accent);
  background: var(--gpm-color-gray-5);
  border: 1px solid var(--gpm-color-gray-4);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.cl-card-summary {
  font-size: var(--gpm-font-size-3);
  line-height: 1.55;
  margin: 0 0 8px;
}
.cl-card-meta {
  font-size: var(--gpm-font-size-1);
  color: var(--gpm-color-gray-2);
}
.cl-minor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gpm-color-gray-4);
}
.cl-minor-item {
  display: grid;
  grid-template-columns: 88px 220px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid var(--gpm-color-gray-4);
  font-size: var(--gpm-font-size-3);
}
.cl-minor-date {
  color: var(--gpm-color-gray-2);
  font-size: var(--gpm-font-size-1);
  white-space: nowrap;
  width: 88px;
  flex-shrink: 0;
}
.cl-minor-article a {
  color: var(--gpm-color-accent);
  font-weight: var(--gpm-font-weight-1);
  text-decoration: none;
}
.cl-minor-article a:hover {
  color: var(--gpm-color-brand);
  text-decoration: underline;
}
.cl-minor-text {
  color: var(--gpm-color-gray-1);
}
.cl-section-note {
  font-size: var(--gpm-font-size-2);
  color: var(--gpm-color-gray-2);
  margin: 0 0 14px;
}
@media (max-width: 640px) {
  .cl-minor-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Item 5: duplicate first-heading hide. gpm-phase2.js adds this class to the
   first article-body heading when it repeats the hero title. Hidden on screen
   and on paper so the title shows once in each. */
.article-body .gpm-dupe-title-hidden {
  display: none !important;
}
@media print {
  .article-body .gpm-dupe-title-hidden {
    display: none !important;
  }
}

/* Item 6: changelog collapse controls and the moved card date.
   The major card now leads with its date on the left, like the minor rows,
   then the article link. gpm-phase2.js (and the preview's inline copy) tag
   items older than 90 days with .cl-aged and inject the controls below. */
.cl-card-top {
  justify-content: flex-start;
}
.cl-card-top .cl-card-date {
  order: 0;
}
.cl-card-top .cl-card-article {
  order: 1;
}
.cl-aged {
  display: none;
}
.cl-show-older {
  display: inline-block;
  margin: 0 0 28px;
  padding: 8px 16px;
  font-size: var(--gpm-font-size-2);
  font-weight: var(--gpm-font-weight-1);
  color: var(--gpm-color-accent);
  background: var(--gpm-color-white);
  border: 1px solid var(--gpm-color-gray-4);
  border-radius: var(--gpm-border-radius-0);
  cursor: pointer;
}
.cl-show-older:hover {
  border-color: var(--gpm-color-brand);
  color: var(--gpm-color-brand);
}
.cl-empty-note {
  font-size: var(--gpm-font-size-3);
  color: var(--gpm-color-gray-2);
  margin: 0 0 20px;
}

/* ==========================================================================
   Item 1: Portal pages inside the GPM theme.
   The home page and the ported portal templates (17 total) must look like the
   live Amazon Studios portal, not like a GPM manual page. Each of those
   templates carries <div class="portal-page-marker" hidden> as its first node.
   Under that marker we hide the GPM chrome (topbar, left sidebar, GPM header
   and footer), undo the sidebar/topbar body offsets, show the live portal
   header and footer that header.hbs / footer.hbs render (hidden elsewhere),
   and let the main column run full width. The live look itself comes from
   portal-style.css, which only these templates load.

   :has() drives the no-flash path; .portal-page (added by the document_head
   fallback script) covers engines without :has(). ========================== */

body:has(.portal-page-marker),
body.portal-page {
  padding-left: 0 !important;
  padding-top: 0 !important;
}

body:has(.portal-page-marker) .gpm-topbar,
body:has(.portal-page-marker) .gpm-sidebar,
body:has(.portal-page-marker) > .header,
body:has(.portal-page-marker) .footer:not(.portal-chrome-footer .footer),
body.portal-page .gpm-topbar,
body.portal-page .gpm-sidebar,
body.portal-page > .header,
body.portal-page .footer:not(.portal-chrome-footer .footer) {
  display: none !important;
}

/* The sticky-footer layout stretches main to the viewport on tall screens. The
   portal home ends on black (tiles band, then footer), so the stretch is black
   too, otherwise a white band shows between the tiles and the footer. */
body:has(.portal-page-marker):has(.homepage) > main {
  background: #000;
}

/* The live portal header/footer blocks are hidden everywhere by default and
   only revealed on a portal page, so GPM pages never show them. */
.portal-chrome-header,
.portal-chrome-footer {
  display: none;
}
body:has(.portal-page-marker) .portal-chrome-header,
body:has(.portal-page-marker) .portal-chrome-footer,
body.portal-page .portal-chrome-header,
body.portal-page .portal-chrome-footer {
  display: block;
}

/* The GPM full-width .container rules above skip portal pages, so the live
   portal's 1170px container from portal-style.css applies there. */

/* Keep GPM's global body padding and gpm-phase2 chrome rules from bleeding into
   the portal content. portal-style.css is the authority on a portal page. */
body:has(.portal-page-marker),
body.portal-page {
  background: #fff;
}