/* MS_HEADER_PORTAL_V7 The header dropdown is moved to by JS. Therefore suggestion content cannot affect header dimensions, brand position or navigation layout. */ /* Keep the visible header search itself dimensionally stable. */ .header-search-shell { position: relative !important; flex: 0 1 420px !important; width: 420px !important; max-width: 420px !important; min-width: 240px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; box-sizing: border-box !important; overflow: visible !important; align-self: center !important; } .header-search-shell > .header-mini-search, .header-mini-search { position: relative !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; box-sizing: border-box !important; overflow: hidden !important; margin: 0 !important; } .header-mini-search > input { flex: 1 1 auto !important; min-width: 0 !important; width: 1% !important; max-width: 100% !important; box-sizing: border-box !important; } .header-mini-search > button { flex: 0 0 auto !important; white-space: nowrap !important; } /* Brand/nav may never be resized by search suggestion content. */ .site-header-inner > .site-brand, .pro-header-inner > .site-brand { flex: 0 0 auto !important; } .site-brand span { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .site-header-inner > .site-nav, .pro-header-inner > .site-nav { flex: 0 0 auto !important; } /* Runtime portal: this node is a direct child of body. */ body > .header-suggest-wrap.ms-header-suggest-portal { position: fixed !important; right: auto !important; bottom: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; pointer-events: none !important; z-index: 2147483000 !important; transform: none !important; } body > .header-suggest-wrap.ms-header-suggest-portal > .header-suggestions { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: none; width: 100% !important; min-width: 0 !important; max-width: 100% !important; max-height: var(--ms-header-suggest-max-height, 320px) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; background: #fff !important; color: #111827 !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; box-shadow: 0 18px 48px rgba(15, 23, 42, .16) !important; text-align: left !important; pointer-events: auto !important; } body > .header-suggest-wrap.ms-header-suggest-portal > .header-suggestions.is-open { display: block !important; } body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 12px 14px !important; box-sizing: border-box !important; font-size: 14px !important; line-height: 1.35 !important; color: inherit !important; cursor: pointer !important; border-bottom: 1px solid #f3f4f6 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal !important; overflow-wrap: normal !important; } body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item:last-child { border-bottom: 0 !important; } body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item:hover, body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item.is-active { background: #f3f4f6 !important; } /* Dark mode keeps the same geometry. */ .theme-dark body > .header-suggest-wrap.ms-header-suggest-portal > .header-suggestions, body.theme-dark > .header-suggest-wrap.ms-header-suggest-portal > .header-suggestions, .theme-auto.theme-runtime-dark body > .header-suggest-wrap.ms-header-suggest-portal > .header-suggestions, body.theme-auto.theme-runtime-dark > .header-suggest-wrap.ms-header-suggest-portal > .header-suggestions { background: #111827 !important; color: #e5e7eb !important; border-color: rgba(148, 163, 184, .28) !important; } .theme-dark body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item, body.theme-dark > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item, .theme-auto.theme-runtime-dark body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item, body.theme-auto.theme-runtime-dark > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item { border-bottom-color: rgba(148, 163, 184, .16) !important; } .theme-dark body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item:hover, body.theme-dark > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item:hover, .theme-dark body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item.is-active, body.theme-dark > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item.is-active, .theme-auto.theme-runtime-dark body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item:hover, body.theme-auto.theme-runtime-dark > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item:hover, .theme-auto.theme-runtime-dark body > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item.is-active, body.theme-auto.theme-runtime-dark > .header-suggest-wrap.ms-header-suggest-portal .suggestion-item.is-active { background: #1f2937 !important; } /* Main homepage/results autocomplete is deliberately left in normal layout. */ .hero-card > .suggest-wrap, .search-panel > .suggest-wrap { position: static !important; } @media (max-width: 1100px) and (min-width: 901px) { .header-search-shell { flex-basis: 320px !important; width: 320px !important; max-width: 320px !important; min-width: 200px !important; } } @media (max-width: 900px) { .header-search-shell { order: 3 !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .site-header-inner > .site-brand, .pro-header-inner > .site-brand, .site-header-inner > .site-nav, .pro-header-inner > .site-nav { min-width: 0 !important; } } @media (max-width: 600px) { .header-search-shell, .header-mini-search { display: none !important; } body > .header-suggest-wrap.ms-header-suggest-portal { display: none !important; } } /* MS_SEARCH_RESULTS_BRAND_FULL_V1 Never shorten the visible PornEcho brand on desktop/tablet header. Suggestion dropdown geometry remains controlled by the v7 portal rules. */ @media (min-width: 901px) { .site-header .site-brand, .site-header-inner > .site-brand, .pro-header-inner > .site-brand { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; overflow: visible !important; } .site-header .site-brand > span, .site-brand > span { display: block !important; width: auto !important; min-width: max-content !important; max-width: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: normal !important; } }