/* ========================================================================== SearchWP — inline header search field + results-page styling Loaded via functions.php (handle: twentytwenty-searchwp) ========================================================================== */ /* -------------------------------------------------------------------------- Inline header search field. Rendered as the last item in the nav row so it drops onto its own line, right-aligned, below the EN|GA + Login/Register controls. Visitors type directly on the page (SearchWP Live Search shows results as they type). -------------------------------------------------------------------------- */ .header-search-wrapper.header-search-inline { flex: 0 0 100%; display: flex; justify-content: flex-end; margin-top: 12px; } /* Two instances: desktop shows the one under the controls; mobile shows the one inside the hamburger menu. Hide the other at each breakpoint. */ .header-search--mobile { display: none !important; } .header-search-inline .searchwp-form { width: 250px; max-width: 100%; } /* Keep the header field simple — hide the "Advanced Search" toggle/filters. */ .header-search-inline .swp-toggle, .header-search-inline .searchwp-form-advanced-filters { display: none !important; } /* One seamless field: text input + magnifier submit (no "Search" text). */ .header-search-inline .searchwp-form .swp-flex--row { gap: 0 !important; } .header-search-inline .searchwp-form-input-container { flex: 1 1 auto; } .header-search-inline .swp-input { width: 100%; background: #fff; border: 1px solid #cfd4d8 !important; border-right: 0 !important; border-radius: 5px 0 0 5px !important; font-size: 15px; line-height: 1.4; padding: 10px 14px; } .header-search-inline .searchwp-form input[type="submit"].swp-button { flex: 0 0 auto; width: 50px; min-width: 50px; padding: 0 !important; font-size: 0 !important; color: transparent !important; background-color: #eef1f3 !important; border: 1px solid #cfd4d8 !important; border-left: 0 !important; border-radius: 0 5px 5px 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3a45' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important; cursor: pointer; transition: background-color .2s ease; } .header-search-inline .searchwp-form input[type="submit"].swp-button:hover, .header-search-inline .searchwp-form input[type="submit"].swp-button:focus { background-color: #e2e6e9 !important; } /* Remove SearchWP's built-in magnifier inside the input, and collapse any gap/margins so the input + magnifier button read as one attached field. */ .header-search-inline .swp-input, .header-search-inline .swp-input--search { background-image: none !important; padding-right: 14px !important; } .header-search-inline .searchwp-form-input-container::before, .header-search-inline .searchwp-form-input-container::after, .header-search-inline .swp-input::before, .header-search-inline .swp-input::after { content: none !important; display: none !important; } .header-search-inline .searchwp-form-input-container svg, .header-search-inline .searchwp-form-input-container img, .header-search-inline .searchwp-form-input-container [class*="icon"] { display: none !important; } .header-search-inline .searchwp-form .swp-flex--row, .header-search-inline .searchwp-form .swp-flex--gap-md { gap: 0 !important; } .header-search-inline .searchwp-form-input-container, .header-search-inline .swp-input, .header-search-inline .searchwp-form input[type="submit"].swp-button { margin: 0 !important; } /* The header field's live-search dropdown is appended to (same class as the results-page one). searchwp.js tags it with .hse-header-live-results and OWNS its position/width (pinned under the bar, same width, via inline !important styles re-applied on every panel update). CSS here only handles inner overflow and the scroll-close state. (2-class selector beats SearchWP's own overflow rule on -showing.) */ .searchwp-live-search-results.hse-header-live-results, .searchwp-live-search-results.hse-header-live-results.searchwp-live-search-results-showing { overflow-x: auto !important; /* anything wide scrolls inside the panel */ overflow-y: auto !important; box-sizing: border-box !important; min-width: 0 !important; /* SearchWP's min-width inflates past the bar */ } /* Hide result thumbnails in the live-search dropdown. */ .searchwp-live-search-result--img { display: none !important; } /* Closed on scroll (re-shown when the user types again). */ .searchwp-live-search-results.hse-hidden { display: none !important; } /* Page-level guard: the body-appended dropdown can never add a horizontal scrollbar to the page. */ body { overflow-x: hidden; } /* -------------------------------------------------------------------------- Smaller desktops: keep the (longer Irish) menu on a single row. The off-canvas hamburger menu starts at <=1199px. -------------------------------------------------------------------------- */ @media (min-width: 1200px) and (max-width: 1400px) { body .primary-menu { flex-wrap: nowrap; } body .primary-menu > li { margin: 0 4px 0 0; } body .primary-menu > li > a { padding: 10px 7px; } body .primary-menu > li.menu-item-has-children > a { padding: 10px 24px 10px 7px; } body .primary-menu > li.menu-item-has-children > .submenu-toggle { right: 7px; } .header-links-wrapper-link { margin-left: 8px; } } @media (min-width: 1200px) and (max-width: 1300px) { body .primary-menu > li > a { padding: 10px 5px; } body .primary-menu > li.menu-item-has-children > a { padding: 10px 22px 10px 5px; } body .primary-menu > li.menu-item-has-children > .submenu-toggle { right: 6px; } } /* -------------------------------------------------------------------------- Mobile / tablet: full-width field. -------------------------------------------------------------------------- */ @media (max-width: 1199px) { /* Swap instances: hide the desktop one, show the one inside the menu. */ .header-search--desktop { display: none !important; } /* The theme leaves .accessibilityWrap open, so it wraps EN|GA + accessibility + Login/Register AND our mobile search. It's a nowrap flex row; let it wrap and left-align everything (to match the left-aligned nav items). */ .accessibilityWrap { flex-wrap: wrap !important; width: 100% !important; justify-content: flex-start !important; align-items: center; padding: 0 20px !important; row-gap: 14px; } .header-links-wrapper { margin-left: 0 !important; } /* Full-width search on its own line, aligned to the same left edge. */ .header-search--mobile { display: block !important; flex: 0 0 100% !important; width: 100% !important; margin: 4px 0 0 !important; padding: 0 !important; justify-content: flex-start !important; } .header-search--mobile .searchwp-form, .header-search-inline .searchwp-form { width: 100% !important; max-width: 100% !important; } } /* -------------------------------------------------------------------------- Results page: brand crimson buttons (Search submit, Read More, Load More). Rendered by the plugin/theme, so !important guarantees the override. -------------------------------------------------------------------------- */ .swp-search-results .swp-result-item--button, .swp-load-more .swp-load-more-button, .swp-rp-main input[type="submit"].swp-button, .searchwp-form input[type="submit"].swp-button { background-color: #cd2653 !important; border: 1px solid #cd2653 !important; color: #fff !important; transition: all .25s ease-in-out; } .swp-search-results .swp-result-item--button:hover, .swp-search-results .swp-result-item--button:focus, .swp-load-more .swp-load-more-button:hover, .swp-load-more .swp-load-more-button:focus, .swp-rp-main input[type="submit"].swp-button:hover, .swp-rp-main input[type="submit"].swp-button:focus, .searchwp-form input[type="submit"].swp-button:hover, .searchwp-form input[type="submit"].swp-button:focus { background-color: #b21f47 !important; border-color: #b21f47 !important; color: #fff !important; } /* -------------------------------------------------------------------------- Results page: title size, description, centered Load More. (Client feedback: original title size was far too large.) -------------------------------------------------------------------------- */ .swp-result-item--info-container h2.entry-title, .swp-result-item--info-container h3.entry-title { font-size: 1.5rem; line-height: 1.4; margin: 0 0 6px; } /* Keep Read More / Load More buttons visually smaller than the titles. */ .swp-search-results .swp-result-item--button, .swp-load-more .swp-load-more-button { font-size: 14px !important; line-height: 1.2 !important; padding: 8px 18px !important; font-weight: 600; } /* "Search results for: …" page title — theme h1 is a huge 50px. */ .swp-rp-main .swp-rp-page-header .page-title, .swp-rp-main h1.page-title { font-size: 1.75rem !important; line-height: 1.3 !important; margin: 24px 0 4px !important; } /* "Showing 1 to 5 of 26 results" line (injected by searchwp.js). */ .hse-results-count { font-size: 14px; font-style: italic; font-weight: 600; color: #333; margin: 0 0 32px !important; /* theme p rules were collapsing this */ } /* -------------------------------------------------------------------------- Breadcrumbs (Yoast) on the results page — soft pill with a home icon, brand-green links, crimson hover, muted current item. -------------------------------------------------------------------------- */ .hse-breadcrumbs { display: inline-flex; align-items: center; margin: 0 0 20px; padding: 10px 22px 10px 16px; font-size: 14px; line-height: 1.3; background: #fff; border: 1px solid #e4e8eb; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } .hse-breadcrumbs::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-right: 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006152' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } .hse-breadcrumbs a { color: #006152; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: all .2s ease-in-out; } .hse-breadcrumbs a:hover, .hse-breadcrumbs a:focus { color: #cd2653; border-bottom-color: #cd2653; } .hse-breadcrumbs .breadcrumb_last { color: #6b7680; font-weight: 400; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; } /* "Home" pill: white at rest, theme red on hover (icon follows via currentColor). Used whenever Yoast can't supply a linked breadcrumb. */ .hse-results-home { display: inline-flex; align-items: center; margin: 0 0 20px; padding: 10px 24px 10px 18px; font-size: 14px; line-height: 1.2; font-weight: 600; color: #006152 !important; background-color: #fff; border: 1px solid #e4e8eb; border-radius: 999px; text-decoration: none !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: all .25s ease-in-out; } .hse-results-home__icon { width: 16px; height: 16px; margin-right: 8px; flex: 0 0 auto; } .hse-results-home:hover, .hse-results-home:focus { color: #fff !important; background-color: #cd2653; border-color: #cd2653; box-shadow: 0 4px 14px rgba(205, 38, 83, 0.35); } /* Header: breathing room under the second-row search field. */ @media (min-width: 1025px) { .site-header-inner { padding-bottom: 10px; } } /* Results page: space between header and content. */ main.site-main.swp-rp-main { margin-top: 3% !important; } .swp-result-item--desc { font-size: 15px; line-height: 1.6; color: #444; margin: 0 0 12px; } .swp-result-item--desc:empty { display: none; } .swp-load-more { text-align: center; }