/* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01R ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-intro { margin: 0 !important; background: #f4f7fc !important; border-top: 1px solid #e3e9f0 !important; border-bottom: 1px solid #dfe6ee !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-copy { max-width: 930px; margin: 0 !important; padding: 0 0 0 18px !important; border-left: 2px solid rgba(66,103,178,0.58) !important; text-align: left !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-kicker { display: block; margin: 0 0 7px; color: var(--fff-brand-blue); font-family: var(--fff-font-navigation); font-size: 0.68rem; font-weight: 750; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; } body.fff-category-archive-v2-page .fff-category-archive-v2-copy h1 { margin: 0 0 9px !important; padding: 0 !important; color: #111827 !important; font-family: var(--fff-font-heading) !important; font-size: clamp(1.85rem,2.8vw,2.7rem) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.026em !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-lede { max-width: 820px; color: #56616e !important; font-family: var(--fff-font-body) !important; font-size: 0.94rem !important; font-weight: 420 !important; line-height: 1.58 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-main { background: #fff !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-breadcrumbs { margin: 0 0 14px !important; color: #818993 !important; font-family: var(--fff-font-navigation) !important; font-size: 0.72rem !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-description { max-width: 1040px; margin: 0 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-description, body.fff-category-archive-v2-page .fff-category-archive-v2-description p { color: #505963 !important; font-family: var(--fff-font-body) !important; font-size: 0.92rem !important; font-weight: 400 !important; line-height: 1.65 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-description p:last-child { margin-bottom: 0 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search { width: 100%; margin: 0 !important; padding: 7px !important; background: #fff !important; border: 1px solid #dfe3e8 !important; border-radius: var(--fff-radius-control) !important; box-shadow: 0 6px 24px rgba(17,24,39,0.045) !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-heading { margin: 0 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-heading span { display: block; margin: 0 0 4px; color: #7a828c; font-family: var(--fff-font-navigation); font-size: 0.64rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; } body.fff-category-archive-v2-page .fff-category-archive-v2-heading h2 { margin: 0 !important; padding: 0 !important; color: #171a1d !important; font-family: var(--fff-font-heading) !important; font-size: clamp(1.35rem,1.9vw,1.8rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.018em !important; } /* GRID */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .et_pb_salvattore_content[data-columns]::before { content: "4 .column.size-1of4" !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .et_pb_salvattore_content { margin-left: -12px !important; margin-right: -12px !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .column { float: left !important; width: 25% !important; max-width: none !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; } /* ARTICLES */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog article.et_pb_post { display: block !important; width: 100% !important; margin: 0 0 34px !important; padding: 0 0 24px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #e1e5e9 !important; border-radius: 0 !important; box-shadow: none !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .et_pb_image_container { width: 100% !important; aspect-ratio: 16 / 9; margin: 0 0 14px !important; overflow: hidden !important; background: #f1f3f5 !important; border-radius: var(--fff-radius-control) !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .entry-featured-image-url { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .entry-featured-image-url img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; transition: transform 430ms cubic-bezier(0.22,1,0.36,1), opacity 180ms ease !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog article.et_pb_post:hover .entry-featured-image-url img { opacity: 0.95; transform: scale(1.018); } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .entry-title { display: -webkit-box; overflow: hidden; min-height: 2.66em; margin: 0 0 7px !important; padding: 0 !important; font-family: var(--fff-font-heading) !important; font-size: 1.03rem !important; font-weight: 650 !important; line-height: 1.33 !important; letter-spacing: -0.012em !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .entry-title a { color: #171a1d !important; text-decoration: none !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .entry-title a:hover { color: #8f1a0f !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-meta { min-height: 1.9em; margin: 0 0 8px !important; color: #747b83 !important; font-family: var(--fff-font-navigation) !important; font-size: 0.62rem !important; line-height: 1.4 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-meta .author { display: none !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-meta a { color: #68727c !important; text-decoration: none !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner p { display: -webkit-box !important; overflow: hidden !important; margin: 0 !important; color: #535b63 !important; font-family: var(--fff-font-body) !important; font-size: 0.8rem !important; line-height: 1.55 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .more-link { display: inline-flex !important; margin: 10px 0 0 !important; padding: 0 !important; color: var(--fff-brand-blue) !important; font-family: var(--fff-font-navigation) !important; font-size: 0.67rem !important; font-weight: 650 !important; line-height: 1.3 !important; text-decoration: none !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .more-link::after { content: " →"; margin-left: 3px; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .more-link:hover { color: var(--fff-brand-red) !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .pagination { margin-top: 26px !important; padding-top: 17px !important; border-top: 1px solid #e2e5e8; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .pagination a { color: #353a40 !important; font-family: var(--fff-font-navigation) !important; font-size: 0.78rem !important; font-weight: 650 !important; text-decoration: none !important; } /* LAPTOP */ @media (max-width: 1279px) and (min-width: 981px) { body.fff-category-archive-v2-page .fff-category-archive-v2-blog .et_pb_salvattore_content[data-columns]::before { content: "3 .column.size-1of3" !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .column { width: 33.333333% !important; } } /* TABLET */ @media (max-width: 980px) and (min-width: 681px) { body.fff-category-archive-v2-page .fff-category-archive-v2-blog .et_pb_salvattore_content[data-columns]::before { content: "2 .column.size-1of2" !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .column { width: 50% !important; } } /* MOBILE */ @media (max-width: 680px) { body.fff-category-archive-v2-page .fff-category-archive-v2-copy { padding-left: 13px !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-copy h1 { font-size: 1.62rem !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-lede { font-size: 0.86rem !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-description, body.fff-category-archive-v2-page .fff-category-archive-v2-description p { font-size: 0.86rem !important; line-height: 1.55 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .et_pb_salvattore_content[data-columns]::before { content: "1 .column.size-1of1" !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .column { float: none !important; width: 100% !important; padding: 0 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .entry-title { min-height: 0; font-size: 1.08rem !important; -webkit-line-clamp: initial; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-meta { min-height: 0; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner p { font-size: 0.86rem !important; } } /* ACCESSIBILITY */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog a:focus-visible, body.fff-category-archive-v2-page .fff-category-archive-v2-search a:focus-visible, body.fff-category-archive-v2-page .fff-category-archive-v2-search button:focus-visible, body.fff-category-archive-v2-page .fff-category-archive-v2-search input:focus-visible, body.fff-category-archive-v2-page .fff-category-archive-v2-search select:focus-visible { outline: 2px solid var(--fff-brand-red) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { body.fff-category-archive-v2-page .fff-category-archive-v2-blog * { transition: none !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01D SearchWP Form 6 visual alignment with Search V2. Presentation only. ========================================================= */ /* ========================================================= 1. FORM FRAME ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-search { width: 100% !important; margin: 0 !important; padding: 10px !important; background: #ffffff !important; border: 1px solid #dde3e8 !important; border-radius: var(--fff-radius-control) !important; box-shadow: 0 5px 20px rgba(17,24,39,0.045) !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search .et_pb_code_inner { width: 100% !important; } /* ========================================================= 2. SEARCHWP FORM ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form { width: 100% !important; margin: 0 !important; font-family: var(--fff-font-body) !important; } /* ========================================================= 3. TEXT / SEARCH / SELECT FIELDS ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="text"], body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="search"], body.fff-category-archive-v2-page .fff-category-archive-v2-search select { min-height: 44px !important; padding: 0 13px !important; color: #30363d !important; background: #ffffff !important; border: 1px solid #d9e0e6 !important; border-radius: var(--fff-radius-control) !important; box-shadow: none !important; font-family: var(--fff-font-body) !important; font-size: 0.82rem !important; font-weight: 400 !important; line-height: 1.2 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="text"]::placeholder, body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="search"]::placeholder { color: #8a929b !important; opacity: 1 !important; } /* ========================================================= 4. MAIN SEARCH BUTTON ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-search button[type="submit"], body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="submit"] { min-height: 44px !important; padding: 0 28px !important; color: #ffffff !important; background: var(--fff-navigation-red) !important; border: 1px solid var(--fff-navigation-red) !important; border-radius: var(--fff-radius-control) !important; box-shadow: none !important; font-family: var(--fff-font-action) !important; font-size: 0.72rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.025em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background-color 160ms ease, border-color 160ms ease !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search button[type="submit"]:hover, body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="submit"]:hover { color: #ffffff !important; background: #8f1a0f !important; border-color: #8f1a0f !important; box-shadow: none !important; transform: none !important; } /* ========================================================= 5. QUICK / POPULAR SEARCHES ========================================================= */ /* * SearchWP Form 6 outputs the popular-search terms as links. * Keep selectors deliberately broad but scoped strictly to * this Archive V2 search component. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 27px !important; margin: 3px 3px 3px 0 !important; padding: 4px 10px !important; color: #46515c !important; background: #f8f9fa !important; border: 1px solid #dfe4e8 !important; border-radius: 999px !important; box-shadow: none !important; font-family: var(--fff-font-navigation) !important; font-size: 0.66rem !important; font-weight: 550 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap !important; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search form a:hover { color: #8f1a0f !important; background: #ffffff !important; border-color: rgba(171,41,27,0.32) !important; text-decoration: none !important; } /* ========================================================= 6. QUICK SEARCH AREA SPACING ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form [class*="quick"], body.fff-category-archive-v2-page .fff-category-archive-v2-search form [class*="popular"] { margin-top: 9px !important; padding-top: 9px !important; border-top: 1px solid #e6eaee !important; color: #737c86 !important; font-family: var(--fff-font-navigation) !important; font-size: 0.64rem !important; line-height: 1.5 !important; } /* ========================================================= 7. ACCESSIBILITY ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-search input:focus, body.fff-category-archive-v2-page .fff-category-archive-v2-search select:focus { border-color: #8d9fb1 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(66,103,178,0.11) !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search a:focus-visible, body.fff-category-archive-v2-page .fff-category-archive-v2-search button:focus-visible, body.fff-category-archive-v2-page .fff-category-archive-v2-search input:focus-visible, body.fff-category-archive-v2-page .fff-category-archive-v2-search select:focus-visible { outline: 2px solid var(--fff-navigation-red) !important; outline-offset: 2px !important; } /* ========================================================= 8. MOBILE ========================================================= */ @media (max-width: 680px) { body.fff-category-archive-v2-page .fff-category-archive-v2-search { padding: 7px !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="text"], body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="search"], body.fff-category-archive-v2-page .fff-category-archive-v2-search select, body.fff-category-archive-v2-page .fff-category-archive-v2-search button[type="submit"], body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="submit"] { min-height: 43px !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search button[type="submit"], body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="submit"] { width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search form a { min-height: 28px !important; margin: 3px 3px 3px 0 !important; padding: 4px 9px !important; font-size: 0.65rem !important; } } /* ========================================================= 9. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body.fff-category-archive-v2-page .fff-category-archive-v2-search button, body.fff-category-archive-v2-page .fff-category-archive-v2-search input, body.fff-category-archive-v2-page .fff-category-archive-v2-search a { transition: none !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01E Stabilise card heights inside Divi Salvattore columns. ========================================================= */ /* --------------------------------------------------------- META / CATEGORIES Reserve exactly two lines for every card so a post with more category names does not push the next row downward. --------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-meta { display: -webkit-box !important; overflow: hidden !important; height: 2.8em !important; min-height: 2.8em !important; max-height: 2.8em !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* --------------------------------------------------------- EXCERPT Reserve three lines consistently. This prevents shorter excerpts from creating uneven vertical stacks. --------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner { min-height: 3.72em !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner p { height: 3.72em !important; min-height: 3.72em !important; max-height: 3.72em !important; } /* --------------------------------------------------------- READ MORE Keep the link in a consistent vertical position. --------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .more-link { min-height: 0.9em !important; } /* --------------------------------------------------------- MOBILE A single-column archive does not need artificial vertical alignment. Restore natural content height. --------------------------------------------------------- */ @media (max-width: 680px) { body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-meta { display: block !important; overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; -webkit-line-clamp: initial; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner { min-height: 0 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner p { height: auto !important; min-height: 0 !important; max-height: none !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01F Correct 01E excerpt slot: reserve three lines on the wrapper without clipping the paragraph itself. ========================================================= */ /* * 0.8rem × 1.55 line-height × 3 lines = 3.72rem. * * Reserve that space on the container. Short excerpts * therefore occupy the same vertical slot as long ones. */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner { min-height: 3.72rem !important; } /* * Do NOT force the paragraph itself to 3.72em. * The existing 3-line clamp handles long excerpts cleanly. */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner p { height: auto !important; min-height: 0 !important; max-height: none !important; } /* * Single-column mobile needs no artificial card alignment. */ @media (max-width: 680px) { body.fff-category-archive-v2-page .fff-category-archive-v2-blog .post-content-inner { min-height: 0 !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01G Dynamic counter Pagination V2 Mobile keyword field full width ========================================================= */ /* ========================================================= 1. ARCHIVE COUNT ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-heading-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-heading-meta > span { display: inline-flex !important; margin: 0 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-heading-meta > span:first-child { color: #7a828c; font-family: var(--fff-font-navigation); font-size: 0.64rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; } body.fff-category-archive-v2-page .fff-category-archive-v2-count { color: #8b939b !important; font-family: var(--fff-font-navigation) !important; font-size: 0.66rem !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-count::before { content: "•"; margin-right: 8px; color: #bcc2c8; } /* ========================================================= 2. PAGINATION V2 ========================================================= */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi, body.fff-category-archive-v2-page .fff-category-archive-v2-blog .pagination { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 5px !important; width: 100% !important; margin: 26px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid #e1e5e9 !important; font-family: var(--fff-font-navigation) !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi .pages { margin: 0 8px 0 0 !important; padding: 0 !important; color: #7b838c !important; background: transparent !important; border: 0 !important; font-size: 0.7rem !important; font-weight: 500 !important; line-height: 30px !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi a, body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi span.current { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 5px 9px !important; color: #4f5963 !important; background: #f8f9fa !important; border: 1px solid #dfe4e8 !important; border-radius: 999px !important; box-shadow: none !important; font-size: 0.69rem !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi span.current { color: #ffffff !important; background: var(--fff-navigation-red) !important; border-color: var(--fff-navigation-red) !important; font-weight: 700 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi a:hover { color: #8f1a0f !important; background: #ffffff !important; border-color: rgba(171,41,27,0.35) !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi .nextpostslink, body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi .previouspostslink { padding-left: 12px !important; padding-right: 12px !important; } /* ========================================================= 3. MOBILE SEARCH FIELD — FULL WIDTH ========================================================= */ @media (max-width: 680px) { /* * SearchWP Form 6 keeps the desktop column width when * the keyword field wraps onto the second line. * * Expand the container carrying the keyword input across * the complete form width. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container:has(input[type="search"]), body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container:has(input[type="text"]), body.fff-category-archive-v2-page .fff-category-archive-v2-search form *:has(> input[type="search"]), body.fff-category-archive-v2-page .fff-category-archive-v2-search form *:has(> input[type="text"]) { flex: 1 0 100% !important; width: 100% !important; max-width: 100% !important; grid-column: 1 / -1 !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="search"], body.fff-category-archive-v2-page .fff-category-archive-v2-search input[type="text"] { display: block !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* * Keep a small visual separation when the keyword input * forms its own second line. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container:has(input[type="search"]), body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container:has(input[type="text"]) { margin-top: 7px !important; } /* Pagination remains compact on small screens. */ body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi, body.fff-category-archive-v2-page .fff-category-archive-v2-blog .pagination { justify-content: flex-start !important; } body.fff-category-archive-v2-page .fff-category-archive-v2-blog .wp-pagenavi .pages { flex: 0 0 100%; margin: 0 0 5px !important; line-height: 1.4 !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01H Mobile SearchWP layout correction. Desired mobile structure: [ Category ] [ Search ] [ Keyword ] ========================================================= */ @media (max-width: 680px) { /* * Undo the overly broad sizing introduced in 01G. * Category and Search button must keep the native * SearchWP first-row layout. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container { max-width: none; } /* * Restore ordinary sizing for containers other than * the keyword field. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container:not(:has(input[type="search"])):not(:has(input[type="text"])) { flex: initial !important; width: auto !important; max-width: none !important; grid-column: auto !important; margin-top: 0 !important; } /* * Only the immediate container of the keyword field * spans the complete second row. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container:has(> input[type="search"]), body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container:has(> input[type="text"]) { flex: 1 0 100% !important; width: 100% !important; max-width: 100% !important; grid-column: 1 / -1 !important; margin-top: 7px !important; box-sizing: border-box !important; } /* * The keyword input itself fills only its own container. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container > input[type="search"], body.fff-category-archive-v2-page .fff-category-archive-v2-search form .searchwp-form-input-container > input[type="text"] { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* * Explicitly prevent the Search button from inheriting * full-row behaviour. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search form button[type="submit"], body.fff-category-archive-v2-page .fff-category-archive-v2-search form input[type="submit"] { width: auto !important; max-width: none !important; flex: 0 0 auto !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01I SearchWP Form 6 — definitive mobile layout. ROW 1: [ Category ][ Search ] ROW 2: [ Keyword ] ROW 3: Popular searches ========================================================= */ @media (max-width: 680px) { /* * SearchWP keeps the category select and keyword input * inside one input container, while the submit control * sits alongside that container. * * Flatten only that input container into the form grid. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 { display: grid !important; grid-template-columns: minmax(0, 1fr) 108px !important; grid-auto-flow: row !important; column-gap: 8px !important; row-gap: 8px !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* * Make Select and Keyword direct grid participants. * This supersedes the 01G / 01H mobile flex rules. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .searchwp-form-input-container { display: contents !important; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; } /* * ROW 1 / COLUMN 1 * Category selector. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 .searchwp-form-input-container > .swp-select { grid-column: 1 !important; grid-row: 1 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; box-sizing: border-box !important; border-radius: var(--fff-radius-control) !important; } /* * ROW 1 / COLUMN 2 * Search button. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > input[type="submit"], body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > button[type="submit"] { grid-column: 2 !important; grid-row: 1 !important; position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 108px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; transform: none !important; } /* * ROW 2 — FULL WIDTH * Keyword field only. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 .searchwp-form-input-container > .swp-input { grid-column: 1 / -1 !important; grid-row: 2 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; box-sizing: border-box !important; border-radius: var(--fff-radius-control) !important; } /* * ROW 3 — QUICK SEARCHES */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .searchwp-form-quick-search { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; max-width: 100% !important; margin: 4px 0 0 !important; box-sizing: border-box !important; } /* * Any additional visible SearchWP utility block goes * full width rather than competing with Row 1. */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > :not(.searchwp-form-input-container):not(input[type="submit"]):not(button[type="submit"]):not(.searchwp-form-quick-search) { grid-column: 1 / -1 !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01J Mobile SearchWP Form 6. Based on verified real DOM. ROW 1 : Category 50% | Search 50% ROW 2 : Keyword 100% ROW 3 : Popular searches ========================================================= */ @media (max-width: 680px) { /* ------------------------------------------------------- RESET 01I FORM GRID The FORM itself is not the layout row. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------- OUTER SEARCHWP COLUMN ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------- THE REAL FORM ROW This is the actual parent of: input-container + submit button. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col > .swp-flex--row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 44px 44px !important; column-gap: 8px !important; row-gap: 8px !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------- FLATTEN THE INPUT CONTAINER Select + keyword become direct participants of the verified .swp-flex--row grid. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col > .swp-flex--row > .searchwp-form-input-container { display: contents !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- ROW 1 / LEFT 50% CATEGORY ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 .searchwp-form-input-container > select.swp-select { grid-column: 1 !important; grid-row: 1 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 13px !important; box-sizing: border-box !important; } /* ------------------------------------------------------- ROW 1 / RIGHT 50% SEARCH BUTTON ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col > .swp-flex--row > input.search-submit[type="submit"] { grid-column: 2 !important; grid-row: 1 !important; position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; transform: none !important; } /* ------------------------------------------------------- ROW 2 / FULL WIDTH KEYWORD ONLY ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 .searchwp-form-input-container > input.swp-input--search[type="search"] { grid-column: 1 / -1 !important; grid-row: 2 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 13px !important; box-sizing: border-box !important; } /* ------------------------------------------------------- QUICK SEARCHES Stay naturally beneath the two-row search grid. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col > .searchwp-form-quick-search { display: block !important; width: 100% !important; max-width: 100% !important; margin: 10px 0 0 !important; box-sizing: border-box !important; } } /* ========================================================= FAIR FUTURE FOUNDATION CATEGORY ARCHIVE V2 - BUILD 01K Mobile SearchWP visual cleanup. One container only — no boxes inside boxes. ========================================================= */ @media (max-width: 680px) { /* ------------------------------------------------------- OUTER ARCHIVE SEARCH FRAME This becomes the single visible container. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search { padding: 10px !important; background: #ffffff !important; border: 1px solid #dfe4e8 !important; border-radius: var(--fff-radius-control) !important; box-shadow: 0 5px 18px rgba(17,24,39,0.035) !important; } /* ------------------------------------------------------- SEARCHWP INTERNAL WRAPPERS Remove all secondary box styling. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6, body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col, body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col > .swp-flex--row { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ------------------------------------------------------- MAIN TWO-ROW SEARCH AREA Give fields breathing room without creating another box. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col > .swp-flex--row { column-gap: 9px !important; row-gap: 9px !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------- FIELDS Slightly quieter borders. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 select.swp-select, body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 input.swp-input--search { background: #ffffff !important; border: 1px solid #d9e0e6 !important; border-radius: var(--fff-radius-control) !important; box-shadow: none !important; } /* ------------------------------------------------------- QUICK SEARCHES A section, not another framed card. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 > .swp-flex--col > .searchwp-form-quick-search { width: 100% !important; margin: 12px 0 0 !important; padding: 11px 0 1px !important; background: transparent !important; border: 0 !important; border-top: 1px solid #e4e8ec !important; border-radius: 0 !important; box-shadow: none !important; } /* ------------------------------------------------------- QUICK SEARCH LABEL ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 .searchwp-form-quick-search > span { display: inline-block !important; margin: 2px 5px 5px 0 !important; color: #707983 !important; font-family: var(--fff-font-navigation) !important; font-size: 0.76rem !important; line-height: 1.35 !important; } /* ------------------------------------------------------- PILLS Keep them light and give the cluster more air. ------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-category-archive-v2-search #searchwp-form-6 .searchwp-form-quick-search a { margin: 3px 3px 3px 0 !important; padding: 5px 10px !important; background: #f8f9fa !important; border: 1px solid #dfe4e8 !important; border-radius: 999px !important; box-shadow: none !important; } } /* ========================================================== FAIR FUTURE FOUNDATION QUICK DONATE - ARCHIVE POLISH V1 Archive-only presentation refinement. Goals: - stronger editorial balance - three-column amount grid - remove orphan centred buttons - better typography and spacing - visual language consistent with Archive V2 ========================================================== */ /* ---------------------------------------------------------- SECTION ---------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-donate-quick-section { background: #f3f6fa !important; padding: clamp(3rem, 5vw, 4.5rem) 0 !important; border-top: 1px solid #e3e8ef; border-bottom: 1px solid #e3e8ef; } /* * Replace Divi's floating 3/5 + 2/5 layout with a controlled * two-column grid. */ body.fff-category-archive-v2-page .fff-donate-quick-section .et_pb_row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(430px, 1.08fr) !important; gap: clamp(2.5rem, 5vw, 5rem) !important; align-items: start !important; width: min(90%, 1080px) !important; max-width: 1080px !important; margin: 0 auto !important; padding: 0 !important; } body.fff-category-archive-v2-page .fff-donate-quick-section .et_pb_column { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- LEFT EDITORIAL COLUMN ---------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-donate-quick-text { align-self: center !important; max-width: 610px; } body.fff-category-archive-v2-page .fff-donate-quick-text .et_pb_text_inner { text-align: left !important; color: #45546a !important; } body.fff-category-archive-v2-page .fff-donate-quick-text h3 { margin: 0 0 1rem !important; padding: 0 !important; font-family: var(--fff-font-heading) !important; font-size: clamp(1.35rem, 1.65vw, 1.62rem) !important; line-height: 1.32 !important; font-weight: 700 !important; letter-spacing: -0.018em !important; text-align: left !important; color: #17243a !important; } body.fff-category-archive-v2-page .fff-donate-quick-text p { margin: 0 0 1.05rem !important; padding: 0 !important; font-family: var(--fff-font-body) !important; font-size: clamp(0.97rem, 1vw, 1.02rem) !important; line-height: 1.7 !important; font-weight: 400 !important; text-align: left !important; color: #4b5a6f !important; } body.fff-category-archive-v2-page .fff-donate-quick-text p:last-child { display: inline-block; margin: 0.3rem 0 0 !important; padding-top: 0.8rem !important; border-top: 1px solid #dce3ec; font-family: var(--fff-font-navigation) !important; font-size: 0.78rem !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: 0.025em !important; color: #718095 !important; } /* ---------------------------------------------------------- DONATION PANEL ---------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-donate-quick { position: relative; box-sizing: border-box; width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(1.3rem, 2vw, 1.7rem) !important; background: #ffffff !important; background-image: none !important; border: 1px solid #dfe5ed !important; border-radius: 8px !important; box-shadow: 0 12px 34px rgba(20, 37, 63, 0.065) !important; overflow: hidden; } /* * Existing colourful top accent becomes Archive V2 blue. */ body.fff-category-archive-v2-page .fff-donate-quick::before { content: "" !important; position: absolute !important; z-index: 2; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 3px !important; background: #2857a4 !important; background-image: none !important; } /* ---------------------------------------------------------- FORM HEADING ---------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-donate-quick__head { margin: 0 0 1rem !important; padding: 0 !important; } body.fff-category-archive-v2-page .fff-donate-quick__title { margin: 0 0 0.55rem !important; padding: 0 !important; font-family: var(--fff-font-heading) !important; font-size: clamp(1.15rem, 1.35vw, 1.34rem) !important; line-height: 1.35 !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: #17243a !important; } body.fff-category-archive-v2-page .fff-donate-quick__desc { max-width: 62ch; margin: 0 !important; padding: 0 !important; font-family: var(--fff-font-body) !important; font-size: 0.91rem !important; line-height: 1.58 !important; font-weight: 400 !important; color: #556579 !important; } /* ========================================================== DONATION AMOUNT GRID ========================================================== */ body.fff-category-archive-v2-page .fff-donate-quick__grid { display: grid !important; grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; gap: 0.65rem !important; width: 100% !important; margin: 1.15rem 0 0 !important; padding: 0 !important; } /* * Remove any previous nth-child positioning / widths. */ body.fff-category-archive-v2-page .fff-donate-quick__grid > .fff-donate-quick__btn:not( .fff-donate-quick__btn--wide ) { grid-column: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } body.fff-category-archive-v2-page .fff-donate-quick__btn, body.fff-category-archive-v2-page .fff-donate-quick__btn:visited { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; min-height: 46px !important; padding: 0.7rem 0.65rem !important; border: 1px solid #d7dee8 !important; border-radius: 5px !important; background: #ffffff !important; box-shadow: none !important; font-family: var(--fff-font-action) !important; font-size: 0.96rem !important; line-height: 1 !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; color: #17243a !important; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease !important; } body.fff-category-archive-v2-page .fff-donate-quick__btn:hover, body.fff-category-archive-v2-page .fff-donate-quick__btn:focus { background: #2857a4 !important; border-color: #2857a4 !important; color: #ffffff !important; transform: translateY(-1px); } body.fff-category-archive-v2-page .fff-donate-quick__btn--wide { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* ---------------------------------------------------------- SECURITY NOTE ---------------------------------------------------------- */ body.fff-category-archive-v2-page .fff-donate-quick__note { margin: 1rem 0 0 !important; padding: 0.8rem 0.9rem !important; background: #f5f7fa !important; border: 0 !important; border-left: 3px solid #2857a4 !important; border-radius: 0 var(--fff-radius-control) var(--fff-radius-control) 0 !important; font-family: var(--fff-font-body) !important; font-size: 0.78rem !important; line-height: 1.55 !important; font-weight: 400 !important; color: #5b6a7e !important; } body.fff-category-archive-v2-page .fff-donate-quick__note strong { font-weight: 700 !important; color: #344760 !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { body.fff-category-archive-v2-page .fff-donate-quick-section { padding: 2.8rem 0 !important; } body.fff-category-archive-v2-page .fff-donate-quick-section .et_pb_row { grid-template-columns: 1fr !important; gap: 2rem !important; width: min(90%, 760px) !important; } body.fff-category-archive-v2-page .fff-donate-quick-text { max-width: none; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { body.fff-category-archive-v2-page .fff-donate-quick-section { padding: 2.2rem 0 !important; } body.fff-category-archive-v2-page .fff-donate-quick-section .et_pb_row { width: 90% !important; gap: 1.6rem !important; } body.fff-category-archive-v2-page .fff-donate-quick-text h3 { font-size: 1.27rem !important; } body.fff-category-archive-v2-page .fff-donate-quick-text p { font-size: 0.95rem !important; line-height: 1.65 !important; } body.fff-category-archive-v2-page .fff-donate-quick { padding: 1.15rem !important; border-radius: 6px !important; box-shadow: none !important; } body.fff-category-archive-v2-page .fff-donate-quick__grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 0.55rem !important; } body.fff-category-archive-v2-page .fff-donate-quick__btn { min-height: 44px !important; font-size: 0.92rem !important; } } /* ---------------------------------------------------------- VERY SMALL PHONES ---------------------------------------------------------- */ @media (max-width: 420px) { body.fff-category-archive-v2-page .fff-donate-quick__grid { grid-template-columns: 1fr !important; } body.fff-category-archive-v2-page .fff-donate-quick__btn--wide { grid-column: auto !important; } } /* Selected category archive photographs. */ body.fff-category-archive-v2-page .fff-category-archive-v2-copy:has(.fff-archive-intro-layout){max-width:none!important} .fff-archive-intro-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:center} .fff-archive-intro-text{min-width:0} .fff-archive-intro-media{margin:0} .fff-archive-intro-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px} @media(max-width:980px){.fff-archive-intro-layout{grid-template-columns:minmax(0,1fr) 260px;gap:28px}} @media(max-width:680px){.fff-archive-intro-layout{grid-template-columns:1fr;gap:20px}.fff-archive-intro-media{width:100%;max-width:320px}}