/* restore extras — generated by restore_04_polish.py */

/* Consent overlays: the restore ships no analytics or third-party tracking at all, so there
   is nothing to consent to. Their scripts are gone too, meaning the banner can never be
   dismissed and would cover the top of every page. Removing the markup is unreliable when a
   JS bundle re-renders it, so it is hidden here as well. */
.cookies-banner, .cookies-banner-content, .cookie-banner, .cookie-consent, .cookie-notice,
.cc-window, .cc-banner, #cookie-law-info-bar, #cookieChoiceInfo, .gdpr-banner,
#tarteaucitronRoot, .consent-overlay, .cookiebar {
  display: none !important;
}
body.cookie-banner-open, body.has-cookie-banner, html.cookies-open {
  overflow: auto !important;
}

/* Dead account/login modals left by the CMS (no backend on a static host) */
.modal-login, #loginModal, .login-modal { display: none !important; }

/* Carousel slots the platform's JS bundles would have filled at runtime: without a working
   bundle they stay as <img> elements with no src and render as broken-image icons. Nothing is
   lost by hiding them — they never had content in the restore. */
img:not([src]), img[src=""], img[src="#"] { display: none !important; }

/* The client's backlink block must read as the page's own copy. Where a theme only colours
   links inside specific containers, the anchor would otherwise look like plain text — inherit
   the surrounding colour but keep an underline so it is still visibly a link. */
.content-wraparea a { color: inherit; text-decoration: underline; }

/* A few px of horizontal overflow on phones (an absolutely-positioned login list, a wide footer
   logo) makes the whole page pannable sideways, which reads as broken.
   NB: use `clip`, never `hidden`, and never on html together with height:100%. `overflow:hidden`
   turns the element into a scroll container: on themes that set html{height:100%} it stops body's
   overflow propagating to the viewport, the window stops scrolling entirely and every
   scroll-driven behaviour (sticky nav, back-to-top, in-page anchors, PageDown/End) dies.
   `clip` suppresses the sideways pan without creating a scroll container. */
body { overflow-x: clip; }
/* ---- end generated block; anything below is preserved across re-runs ---- */

/* ---- authored legal pages (privacy / cookies) ------------------------------------------
   Wix lays every real page out as absolutely-positioned mesh components, so the site has no
   reusable flow-content wrapper class to borrow for a column of prose. This is that wrapper,
   and it is the ONLY thing declared here: all typography on those pages comes from the site's
   own rich-text classes (font_2 / font_8 / wixui-rich-text / .ku3DBC ul), so they inherit real
   Wix type instead of declaring their own. Geometry matches the authored 404 so the three
   pages we wrote read as one family.
   It lives in this shared stylesheet rather than in a per-page <style> block so the two
   documents cannot drift apart from each other.

   The measure is the site's real one, not a comfortable one we picked: the homepage's own body
   copy (#iapd0o6q, the "Who We Are" band) measures 980px starting at x=230 on a 1440 viewport,
   which is --site-width. box-sizing:border-box with 20px of side padding inside a 1020px box
   gives a 980px content column that lands on exactly that x=230 gridline, so the legal copy
   sits in the same column as the header, the footer and every other page - while still keeping
   text off the glass if the window is ever narrower than the declared viewport. */
.wen-legal{max-width:1020px;margin:0 auto;padding:78px 20px 104px;box-sizing:border-box}
.wen-legal .comp-k5piyadv{width:32px;margin:24px auto 34px}
.wen-legal h1{margin:0}
.wen-legal h2{margin:38px 0 14px}
.wen-legal p{margin:0 0 15px}
.wen-legal ul{margin:4px 0 18px}
.wen-legal li{margin:0 0 9px}

/* The footer links carry their own colour and underline in the site's span-inside-anchor
   idiom (see _footer_link), so nothing about them is declared here - only the gap that keeps
   the new row off the copyright line above it. */
.wen-footer-legal{margin-top:7px}


/* ---- visual finishing pass (looked at every page at 1440 and at phone width) -------------

   1. THE HOMEPAGE PHOTO STRIP (#iaz95uv7, Wix "Strip Showcase").
   Wix positioned it as a fixed 1628px table pulled 324px to the left, which only lines up on a
   viewport of exactly 1628px. On a 1440 screen the first and last photos are sliced off by the
   window edges; at the declared phone viewport two of the five are off-screen entirely and can
   never be seen. Worse, each cell is 302x512 while the localised image was a 250x140 thumbnail
   sitting in the middle of it, so the band read as ~350px of empty pale blue with five stamps
   floating in it. Making the table fluid keeps every photo on screen at every width, and letting
   the photos fill their cells is what the live widget did. The 20px border-spacing is the
   designer's own, so the pale blue survives as the gutter between panels and the band still
   reads as their band. `table#iaz95uv7` outranks Wix's own `#iaz95uv7` without !important, which
   matters because this stylesheet is not the last one the page loads.
   The pale-blue rectangle behind the photos is a separate 551px strip sharing the same grid cell,
   so it has to come down with them or the dead space simply moves below the photos; 380 + the
   20px gutter top and bottom is 420, and it keeps each panel at 264x380 on a 1440 viewport -
   the same 0.7 proportion the strip had at the 1922px width Wix laid it out for. */
[data-mesh-id="comp-lfo9hie51inlineContent-gridContainer"] > table#iaz95uv7 {
  margin-left: 0;
  left: 0;
}
[data-mesh-id="mediajc62czoh13inlineContent"] { min-height: 420px; }
table#iaz95uv7 { width: 100%; height: auto; table-layout: fixed; }
table#iaz95uv7 th { height: 380px; padding: 0; vertical-align: middle; }
table#iaz95uv7 th img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: 50% 50%;
}

/* 2. THE FOOTER ON A SHORT PAGE.
   #masterPage is a three-row grid (sticky header / main / footer) with no minimum height, so on
   the 404 - the shortest page on the site - the footer band stopped 342px above the bottom of the
   window with bare white underneath it, which reads as a page that failed to finish loading.
   The header is 151px and the footer 87px on every page of this site, so giving the middle row
   the remaining viewport height pins the footer to the bottom. min-height cannot shrink a long
   page, so every other page is untouched. */
#PAGES_CONTAINER { min-height: calc(100vh - 238px); }

/* 3. THE ORPHANED "RECENT POSTS" ROW.
   That widget is scoped to the article's own category, and Events & Science holds exactly three
   posts - so on each of those three pages it has only two siblings to show. The grid is
   `repeat(auto-fill, minmax(290px, 1fr))`, and auto-fill keeps the third track, so those pages
   ended with two cards pushed left and an empty column on the right: a row that reads as a card
   that failed to load. Centring the pair fixes it without inventing a third card - and the
   columns stay the width they compute to on a three-card page ((100% - two 34px gaps) / 3), so a
   card is the same size whichever post you are reading. auto-fit would have been the one-word
   fix and is wrong here: it collapses the empty track and stretches two cards across the full
   940px, which is exactly the inconsistency this avoids. */
.zHLEBV:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, calc((100% - 68px) / 3));
  justify-content: center;
}

/* 4. THE CATEGORY BAR HAD NO CURRENT STATE.
   All Posts / Events & Science / Food Authenticity & Safety render identically on all three
   listing pages, and the category pages reuse the main listing's "Highlights and News" heading -
   so a category page is indistinguishable from the full listing except that eight of the eleven
   articles have silently vanished. The markup was already correct: Wix stamps aria-current="page"
   and blog-navigation-link-active-color on the current item, and the theme then resolves that
   active colour to the same blue as the inactive ones, so it renders invisibly. Nothing needs
   adding to the HTML - the state just needs to be visible. currentColor keeps the rule on the
   site's own heading blue so it cannot drift from the label above it. */
.blog-navigation-link-active-color[aria-current="page"] {
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  padding-bottom: 3px;
}

/* 5. THE CATEGORY PAGES CHANGED SKIN ONE CLICK FROM THE FEED.
   /newswenou/ and /newswenou/categories/* are the same widget, the same rows, the same geometry
   (556px text column, 440px thumbnail) - and they still looked like two different sites, because
   Wix's theme carries a SEPARATE background colour for category pages. Probed: the app wrapper is
   `.blog-background-color` (#fff) on the feed and `.blog-background-category-color` (#f0faff) on a
   category, and the post cards are white either way, so the pale blue turned identical rows into
   floating cards. Only the field is repainted - the cards, the type and the spacing are untouched,
   so a visitor clicking a category tab now sees the same page with fewer articles in it, which is
   what a category is.
   Wix's own declaration is `.Mu0bmS .blog-background-category-color` (0,2,0) inside the page's
   199KB style block; three simple selectors clear it without !important, and the feed-page-root
   attribute stands in for the hashed .Mu0bmS so the rule cannot rot when another category page
   carries a different hash. */
[data-hook="feed-page-root"] .L5x0Fp.blog-background-category-color { background-color: #fff; }

/* --- HIT AREA AND MINIMUM TYPE SIZE ------------------------------------------------------------
   WCAG 2.5.8 puts the floor for anything a finger must hit at 24x24 CSS px and 2.5.5 the standard
   at 44. Every failure on this site is the same shape: a standalone link set `display:inline`, so
   its border box is the height of the glyphs (16-17px) rather than of the line box around them.
   Vertical padding on an INLINE box enlarges the border box, and with it the hit target, without
   changing the line box height - so the footer and the blog nav keep their exact spacing and only
   become hittable. The blog category nav is display:block and gets the same floor directly.

   The credit strip was set at 10px and the policy links at 11px, from inline font-size on the Wix
   spans. That is the "magnifying glass" copy the client named, and it is the smallest legal type
   on the page, so it goes to 12px - the floor, not a redesign. Inline styles can only be beaten
   with !important. */
a.wixui-rich-text__text { padding-block: 5px; }
nav.AsxoCK a.blog-navigation-container-color { padding-block: 4px; }
#comp-lfo9hiea span[style*="font-size:10px"],
#comp-lfo9hiea span[style*="font-size:11px"],
#SITE_FOOTER span[style*="font-size:10px"],
#SITE_FOOTER span[style*="font-size:11px"],
span.color_11.wixui-rich-text__text span[style*="font-size:10px"],
span[style*="font-size:10px"].wixui-rich-text__text,
span[style*="font-size:11px"].wixui-rich-text__text { font-size: 12px !important; }

/* ============================================================================================
   SECTION W - A PHONE GETS A PHONE LAYOUT (2026-08-19)
   ============================================================================================
   WHAT WAS WRONG. The build shipped <meta name="viewport" content="width=1020"> on all 18 pages,
   so a 390px phone rendered the whole desktop page and scaled it to 38%: every gate green, and
   body copy about 5px tall. The archived original declared width=device-width and its
   wix-viewer-model says isMobileFriendly:true, so the live site served a real mobile layout and
   ours did not - our regression, not a quirk of the capture.

   WHY device-width ALONE MADE IT WORSE. Wix hard-codes --site-width:980px and
   #site-root{min-width:var(--site-width)}, and its containers are overflow:hidden. Setting
   device-width without the rules below leaves every overflow check green - scrollWidth ==
   clientWidth == 390 - while the 1020px mesh is CLIPPED: body copy cut mid-sentence and the
   CONTACTS nav item sliced in half. The content is not pushed somewhere a gate can see it, it is
   simply gone. That is why an earlier round declined to touch the meta and said so.

   HOW THE MESH ACTUALLY WORKS, measured on this site rather than assumed. Every Wix container is
   a single-column CSS grid; each component is a grid child with justify-self:start, a fixed px
   width, margin-left:230px (the site margin at 1440) and a `left` offset - so two components side
   by side are two children of the SAME grid row separated only by `left`, and a component is
   placed vertically by margin-top. Turning that grid into a flex column and dropping
   left/margin-left/margin-top/width puts them one under another, full width, in document order.

   Wix's own mobile CSS is NOT usable: those rules are gated on body.device-mobile-optimized and
   address a separate 320px mobile DOM (#TINY_MENU) that a desktop capture does not contain.

   The route and four of the traps came from the sister site crescercomsabor.pt (same platform,
   same generation, restore-extras.css section E) and from memory wenou-wix-traps. Everything that
   names an id or a hashed Wix class was re-derived against THIS site - those names are generated
   per site and copying them across would silently do nothing.
   ============================================================================================ */
@media (max-width: 1023px) {

  /* W1. Release the 980px floor, or the page is clipped instead of reflowed. */
  #site-root { min-width: 0 !important; }
  #SITE_CONTAINER, #site-root, #masterPage, #SITE_PAGES, #PAGES_CONTAINER,
  #SITE_HEADER, #SITE_FOOTER, #soapAfterPagesContainer, #soapBeforePagesContainer,
  section[id^="comp-"], div[id^="comp-"], .G5K6X8, .c7cMWz, .vlM3HR, .PFkO7r, .hF1twx,
  [id^="pageBackground_"], [id^="bgMedia_"], [id^="bgLayers_"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* .PFkO7r and .hF1twx are the same trick on the blog templates: a 980px band centred with a
     margin-left that goes NEGATIVE below 980 and drags the whole column off the left edge
     (measured -295px on a post at 390). */
  .G5K6X8, .c7cMWz, .vlM3HR, .PFkO7r, .hF1twx, [id^="pageBackground_"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* W2. The mesh: one component per row, full width, document order. */
  [data-mesh-id$="inlineContent"],
  [data-mesh-id$="inlineContent-gridContainer"] {
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }
  [data-mesh-id$="-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: auto !important;
  }
  [data-mesh-id$="-gridContainer"] > * {
    grid-area: auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    min-width: 0 !important;
    align-self: auto !important;
    flex: 0 0 auto;
  }
  [data-mesh-id$="-gridContainer"] > *:not(.WzbAF8) {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    height: auto !important;
  }

  /* W2b. AN ICON IS NOT A COLUMN. .WzbAF8 is Wix's fixed-size image box - the six 42x42 LinkedIn
     marks beside the team biographies and the 130x30 accreditation badge. Stretched to 100% wide
     with height:auto, its inner img is height:100% of nothing and the box measures 0x0: the mark
     vanishes and its neighbours paint over the space it used to hold. It keeps its own size. */
  [data-mesh-id$="-gridContainer"] > .WzbAF8 { flex: 0 0 auto; align-self: flex-start !important; }
  .WzbAF8 { max-width: 100% !important; }

  /* W2d. AND A NEGATIVE BOTTOM MARGIN PULLS THE NEXT COMPONENT ON TOP OF IT. Wix wrote
     margin-bottom:-18px to -21px on these marks because on the desktop they sit BESIDE the name
     rather than above it; flattened into a column that margin drew the LinkedIn square straight
     across "Esther Batista" and "Margarida Batalha". Only these five components carry a negative
     margin worth caring about - enumerated over all 18 pages with _scripts/_lt_wen_negmargin.js,
     the only others being -1px and -7px - so the reset is aimed rather than a blanket
     margin-bottom:0, which would flatten the vertical rhythm the rest of the page depends on. */
  [data-mesh-id$="-gridContainer"] > .WzbAF8 { margin-bottom: 10px !important; }

  /* W2c. THE GALLERY STRIP IS AN HTML TABLE. Wix's table gallery puts each photograph in its own
     <th>; at 390 that is five 54px slivers of a picture. One row per photograph instead. */
  table.slvSuv, table.slvSuv tbody, table.slvSuv tr { display: block !important; width: 100% !important; }
  table.slvSuv th, table.slvSuv td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
  }
  table.slvSuv img { width: 100% !important; height: auto !important; object-fit: cover !important; }

  /* W3. Images: a Wix image component is a fixed box with an img at height:100%. */
  .wixui-image { height: auto !important; }
  .wixui-image > a, .wixui-image > wow-image, .wixui-image wow-image { height: auto !important; }
  .wixui-image img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* W4. THE NAVIGATION MEASURES 0 TALL. Wix positions the whole menu absolutely inside its
     component (nav and the items list are both position:absolute) and the component clips its
     overflow, so the moment the component is allowed to size itself it collapses and takes the
     six links with it. Put the nav back in flow and let the labels wrap onto as many rows as
     they need. */
  #DrpDwnMn0 { overflow: visible !important; height: auto !important; }
  #DrpDwnMn0 > nav, #DrpDwnMn0navContainer {
    position: static !important;
    height: auto !important;
    width: 100% !important;
  }
  #DrpDwnMn0itemsContainer {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    white-space: normal !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 4px 0 !important;
  }
  #DrpDwnMn0 li[id^="DrpDwnMn0"] {
    position: relative !important;
    display: block !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }
  #DrpDwnMn0 li a, #DrpDwnMn0 li > div { height: auto !important; padding: 8px 7px !important; }
  #DrpDwnMn0 li a { white-space: nowrap; }
  /* "Mais" is the desktop overflow control; with the menu wrapping there is nothing to overflow. */
  #DrpDwnMn0 li[id$="__more__"] { display: none !important; }

  /* W5. THE PHOTOGRAPHIC BANDS. A full-bleed band holds its picture in an absolutely positioned
     background layer, so it has no in-flow content and height:auto leaves it 0 tall - the
     photograph simply disappears, and no gate can see that it has. Each keeps the shape it had in
     the site's own 980px column. */
  #comp-lfo9hie4, #comp-jc7guf19, #comp-jc7guf2q { height: auto !important; aspect-ratio: 980 / 498; }
  #comp-lfo9hie82, #comp-k5o3heb3, #comp-k5o3hefc { height: auto !important; aspect-ratio: 980 / 552; }
  [id^="bgLayers_"], [id^="bgMedia_"] { height: 100% !important; }
  [id^="bgMedia_"] wow-image, [id^="bgMedia_"] wow-image img { height: 100% !important; width: 100% !important; }

  /* W6. Breathing room on the leaf content only - a full-bleed band paints its colour with an
     absolutely positioned inset:0 layer and would show white gutters if it were padded. */
  .wixui-rich-text, .MMl86N, .ku3DBC {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* W7. Justified type opens rivers in a 350px measure. */
  [style*="text-align:justify"] { text-align: left !important; }

  /* W8. THE FOOTER CLIPS ITS OWN CREDIT LINE. Wix gives the footer, its column strip and its
     rich-text block desktop heights, and puts the footer's inner column at position:absolute so it
     contributes nothing to the height. At 390 "(c) 2026 WeNou - All rights reserved" wraps onto a
     second line and is sliced in half by the bottom of the document - the last thing on the page,
     and the one a client scrolls to. Let the footer size itself. */
  #SITE_FOOTER, #SITE_FOOTER_WRAPPER, #SITE_FOOTER .vlM3HR,
  #SITE_FOOTER section[id^="comp-"], #SITE_FOOTER div[id^="comp-"],
  #SITE_FOOTER .CohWsy, #SITE_FOOTER .YzqVVZ, #SITE_FOOTER .V5AUxf,
  #SITE_FOOTER [id^="bgLayers_"], #SITE_FOOTER [id^="bgMedia_"],
  #SITE_FOOTER .MMl86N, #SITE_FOOTER .zQ9jDz {
    height: auto !important;
    min-height: 0 !important;
  }
  #SITE_FOOTER .vlM3HR { position: relative !important; }
  #SITE_FOOTER [id^="bgLayers_"] { position: absolute !important; height: 100% !important; }

  /* W9. The same treatment for the header, whose inner column is absolute for the same reason and
     would otherwise clip the two rows the wrapped menu now needs. */
  #SITE_HEADER, #SITE_HEADER .vlM3HR, #SITE_HEADER section[id^="comp-"],
  #SITE_HEADER div[id^="comp-"]:not(.WzbAF8), #SITE_HEADER .CohWsy, #SITE_HEADER .YzqVVZ {
    height: auto !important;
    min-height: 0 !important;
  }
  #SITE_HEADER .vlM3HR { position: relative !important; }
  #SITE_HEADER [id^="bgLayers_"] { position: absolute !important; height: 100% !important; }

  /* W11. A COMPONENT THE ARCHIVE PARKS OFF-CANVAS MUST STAY OFF-CANVAS.
     #comp-klo6r7py is the white-on-white "RI WeNou.pdf" paragraph on the three listing pages; the
     site's own stylesheet pushes it to left:-2220px, and an earlier round decided to leave it
     exactly as its author wrote it. Section W drops `left` on every mesh child in order to stack
     them, which dragged this one back into the page - white text on white, which qa_legibility
     then correctly reported as INVISIBLE TEXT at 1:1 on /newswenou/ at 390. It is the only
     component on any of the 18 pages with a large negative left (enumerated with
     _scripts/_lt_wen_offcanvas.js, not guessed), so naming it is exact rather than a special case
     waiting to be outgrown. */
  #comp-klo6r7py {
    position: absolute !important;
    left: -2220px !important;
    width: auto !important;
  }
}

/* --- W10. THE BLOG LISTING SHOWED PHOTOGRAPHS AND NO HEADLINES -------------
   The Wix Pro Gallery lays itself out in inline styles that no media query reaches: an absolutely
   positioned card ~940px wide, the picture floated left and the whole of the card's words - title,
   excerpt, date, reading time - in a box floated right. At 390 the card is still 940 wide, so the
   right-hand half of every card, which is all of its text, sits outside the viewport. Nothing is
   reported by an overflow check, because the gallery's own container clips it. This is the same
   de-positioning section W2 does to the mesh, applied to the gallery's own geometry. */
@media (max-width: 1023px) {
  [id^="pro-gallery-container-"], [id^="pro-gallery-margin-container-"] {
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .item-link-wrapper, .gallery-item-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }
  .gallery-item-container { overflow: visible !important; }
  .gallery-item-container > div[style*="float:left"] { float: none !important; }
  .gallery-item-wrapper, .gallery-item-content {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .gallery-item-common-info-outer, .gallery-item-common-info {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Both halves of a card are absolutely positioned; once their ancestors size themselves the
     card collapses to a 2px line unless they are put back in flow. */
  .gallery-item-content, .gallery-item-common-info {
    position: relative !important;
    height: auto !important;
  }
  .gallery-item-content picture, .gallery-item-content picture img {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }
  /* NOTE FOR THE NEXT WIX SITE: the sister site crescercomsabor.pt needed
     `.gallery-item-content picture:first-of-type{display:none}` here, because its Pro Gallery
     renders each photograph TWICE per card - a preload copy and the real one - which become two
     pictures side by side once the card is put back in flow. Counted on this site before copying
     the rule across: one <picture> per card, so the same rule would delete the ONLY photograph and
     leave a text-only listing. It is deliberately absent.
     ONE CARD, ONE PICTURE - re-check with a DOM count before adding it. */
  .post-list-item-wrapper { padding-top: 14px !important; padding-bottom: 34px !important; }

  /* The blog's own category bar is a fixed-width row; at 390 the third category
     ("Food Authenticity & Safety") sat past the right edge and the whole bar started at x=-3. */
  nav.blog-header__navigation, .blog-navigation-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }
  nav.blog-header__navigation ul, .blog-navigation-container ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
    padding-left: 4px !important;
  }
  /* The three tabs need two rows at 390; the row itself is a fixed 80px, so without height:auto
     above, "Food Authenticity & Safety" wrapped onto a second line that was clipped away and the
     page silently offered two categories instead of three. */
  nav.blog-header__navigation li { margin-right: 14px !important; height: 48px !important; }
}


/* --- SECTION X. Contrast and hit size, at every width ---------------------------------------
   Found by qa_legibility once the site had a phone layout worth measuring. None of these is
   caused by the reflow - every one of them reports identically at 1440, where section W does not
   apply - and the two colour values keep the site's own hue and saturation, moving only lightness,
   so a teal rule still writes in teal. */
:root {
  /* The site's #6DACB7 at its own hue (189) and saturation (34%), lightness 57% -> 39%.
     4.77:1 on white, against 2.55:1 for the original. */
  --wen-teal-ink: #427B85;
  /* The same teal as a PANEL, dark enough to carry the site's own near-white #F0FAFF at 4.69:1
     (and pure white at 4.97:1). Used only for the credit strip, which is the one band that paints
     itself in this colour and writes on it. */
  --wen-teal-panel: #407882;
}

/* X1. The six team role subtitles, "processalimentaire.com" in the COVID article, and every other
   run the Wix editor wrote as an inline #6DACB7. An attribute selector is what it takes: nothing
   else outranks a style attribute, and the case is the editor's choice, hence the i flag. */
[style*="color:#6DACB7" i], [style*="color: #6DACB7" i] { color: var(--wen-teal-ink) !important; }

/* X2. The credit strip at the foot of all 18 pages: #F0FAFF on #6DACB7 is 2.41:1 for 12-13px
   type. The type is the design - the band moves instead. Scoped to that band's own colour layer,
   so no other section changes. */
#bgLayers_mediajc62czo92 > .LWbAav { background-color: var(--wen-teal-panel) !important; }

/* X3. The five standalone links a finger cannot land on, all on the article template: the inline
   citation link, the category tag under the article, and the three share marks at 19x19.
   padding-block grows the hit box without moving the line; the share marks get a real minimum. */
a.Tp7c0d { padding-block: 5px; }

/* X4. The article body's own links are the SAME pale teal, set by the Ricos rich-text theme rather
   than by an inline style, so X1 could not reach them: "Know more at: processalimentaire.com" was
   2.55:1 and, with no underline either, indistinguishable from the sentence around it. Both are
   fixed, since a citation url used as its own label has to look like a link.

   ADDRESSED BY STRUCTURE, NOT BY CLASS. The first version of this rule named a.GKQb5, the class on
   the COVID article - and the next post along carried a._3mPCj for the identical element, because
   Wix generates the Ricos atomic classes per page. One post went green and the other kept a 19px
   citation link and a 2.55:1 "justice.gov". Every Ricos paragraph is <p id="viewer-...">, on every
   post, which is the thing they actually have in common. */
[id^="viewer-"] a, [id^="viewer-"] a span { color: var(--wen-teal-ink) !important; }
[id^="viewer-"] a {
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-block: 5px;
}
a.qXlEOR {
  min-width: 26px;
  min-height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}