/*
Theme Name: Refindustry
Theme URI: https://refindustry.com/
Description: Custom theme for Refindustry, the B2B media and company directory for the refrigeration and HVAC-R industry. Presentation only; business logic lives in the refindustry-core plugin.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: refindustry
*/

/* ============================================================
   WHAT IS LEFT IN HERE, AND WHY

   The design system (assets/css/tokens.css -> base.css -> components/ ->
   templates/) owns the look of the site. This file keeps only what that system
   does not own yet, so that nothing here can collide with a .rfi-* component:

   1. Cookie consent (step 15) and the For-you modal: shipped, accepted features
      that the design references do not cover. Stage-1 look, still functional.
   2. The four pages the design does not cover: the author page, the per-issue
      magazine page, the subscribe confirm/unsubscribe screens and the index
      fallback. They keep their Stage-1 layout scaffolding so they stay usable.
      Their CARDS, header, footer, rail and chips already come from the design
      system, because those are components.

   Everything that used to be here and now has a component is gone. As of the
   desktop design pass that includes every listing, every detail page, the company
   profile, the magazine, search and the static pages: their Stage-1 rules were
   removed with them, because a Stage-1 rule and a component rule on the same
   element is a race decided by enqueue order, and that is not a design system.
   When the last page above gets its design, this stylesheet's rules go with it and
   only the header stays.
   ============================================================ */

/* ---- layout scaffolding for the pages the design does not cover ---- */
/* .rfi-wrap already provides the page width and padding, so a nested container
   must not add a second one. */
.rfi-wrap .rfi-container { max-width: none; padding: 0; }
.rfi-layout { display: flex; gap: 24px; align-items: flex-start; }
.rfi-main { flex: 1 1 auto; min-width: 0; }
.rfi-layout > .rfi-rail { flex: 0 0 320px; }
@media (max-width: 900px) { .rfi-layout { display: block; } .rfi-layout > .rfi-rail { width: 100%; } }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.rfi-page-title { margin: 0 0 16px; font-size: 24px; font-family: 'Jost', sans-serif; font-weight: 500; }
/* Belt and braces for the JS hooks: the listing engine hides the count and Clear all
   with the hidden attribute, and the design's own rules already honour it. This
   catches any control that is not inside a designed panel. */
.rfi-clear-all[hidden], .rfi-results-count[hidden] { display: none; }

/* Stage-1 breadcrumbs (.rfi-crumbs is the designed one; this is the author and
   per-issue magazine pages, which still use template-parts/breadcrumbs.php). */
.rfi-breadcrumbs { font-size: 12.5px; color: #979797; margin: 0 0 16px; }
.rfi-breadcrumbs__sep { margin: 0 6px; }

/* ---- For-you modal (opened by news-listing.js; the flag is off by default) ---- */
.rfi-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.rfi-modal[hidden] { display: none; }
.rfi-modal__box { background: #fff; padding: 24px; border-radius: 8px; max-width: 420px; position: relative; }
.rfi-modal__actions { display: flex; gap: 12px; margin-top: 16px; }
.rfi-modal__close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 20px; cursor: pointer; }

/* ---- Cookie consent (step 15). Hidden until consent.js reveals it from the cookie. ---- */
.rfi-consent[hidden] { display: none; }
.rfi-consent__banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 12px rgba(0,0,0,.08); }
.rfi-consent__banner[hidden] { display: none; }
.rfi-consent__banner-inner { display: flex; align-items: center; gap: 24px; padding: 14px 16px; flex-wrap: wrap; }
.rfi-consent__text { flex: 1 1 380px; min-width: 260px; font-size: 14px; }
.rfi-consent__title { margin: 0 0 4px; font-size: 16px; }
.rfi-consent__text p { margin: 0; color: #333; }
.rfi-consent__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rfi-consent__btn { font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 4px; cursor: pointer; border: 1px solid #0b5cad; background: #fff; color: #0b5cad; }
.rfi-consent__btn--primary { background: #0b5cad; color: #fff; }
.rfi-consent__btn--ghost { border-color: #c7ccd1; color: #333; }
.rfi-consent__overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rfi-consent__overlay[hidden] { display: none; }
.rfi-consent__panel { background: #fff; border-radius: 6px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px; }
.rfi-consent__cats { list-style: none; margin: 16px 0; padding: 0; }
.rfi-consent__cat { padding: 12px 0; border-bottom: 1px solid #eee; }
.rfi-consent__cat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rfi-consent__cat-name { font-weight: 600; font-size: 15px; }
.rfi-consent__cat-state { font-size: 13px; color: #666; }
.rfi-consent__cat-desc { margin: 6px 0 0; font-size: 13px; color: #555; }
.rfi-consent__toggle { width: 18px; height: 18px; }
.rfi-consent__fallback { position: fixed; right: 16px; bottom: 16px; z-index: 999; background: #0b5cad; color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 24px; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.rfi-consent__fallback[hidden] { display: none; }