/* =========================================================================
   RFP Components — Reumatiker Forskningspartner
   Design system component styles adapted from ui_kit/styles.css
   All component classes use rfp- prefix.
   Responsive: @media replaces .frame-mobile/.frame-tablet selectors.
   ========================================================================= */

/* ---------- Dölj header för ej inloggade ---------- */
body:not(.logged-in) #masthead,
body:not(.logged-in) .site-header,
body:not(.logged-in) #header { display: none !important; }

/* ---------- Användarinitialer (meny) ---------- */
.rfp-user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-green-100);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.rfp-btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--t-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
}
.rfp-btn-l { padding: 14px 30px; font-size: 16px; }
.rfp-btn-m { padding: 11px 22px; font-size: 14px; }
.rfp-btn-s { padding: 8px 16px; font-size: 12px; min-height: 36px; }

.rfp-btn.rfp-btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.rfp-btn.rfp-btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.rfp-btn.rfp-btn-primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.rfp-btn.rfp-btn-secondary { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }
.rfp-btn.rfp-btn-secondary:hover { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); }

.rfp-btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.rfp-btn-danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }

.rfp-btn-text {
  background: transparent; color: var(--color-primary); padding: 8px 4px;
  min-height: 36px; text-decoration: underline; text-underline-offset: 3px; border-color: transparent;
}
.rfp-btn-block { width: 100%; }

/* ---------- Section layout ---------- */
.rfp-block { padding: 64px 0; }
.rfp-block + .rfp-block { border-top: 1px solid var(--color-gray-300); }
.rfp-block.alt { background: var(--color-gray-100); }

.rfp-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 32px; gap: 16px; flex-wrap: wrap;
}
.rfp-section-head h2 { margin: 0; }
.rfp-section-head .rfp-section-more {
  color: var(--color-primary); font-weight: var(--fw-bold);
  text-decoration: underline; text-underline-offset: 3px; font-size: 15px; white-space: nowrap;
}

/* ---------- Hero ---------- */
.rfp-hero {
  background: var(--color-green-100);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.rfp-hero h1 { color: var(--color-green-900); max-width: 720px; margin-bottom: 16px; }
.rfp-hero p { font-size: 19px; color: var(--color-text-primary); max-width: 640px; margin-bottom: 28px; line-height: 1.5; }
.rfp-hero-accent {
  position: absolute; top: 50%; right: -100px; transform: translateY(-50%);
  width: 380px; height: 380px; border-radius: 50%;
  background: var(--color-green-300); opacity: 0.4; pointer-events: none;
}

/* ---------- Welcome shortcode ---------- */
.rfp-valkomst h2 { font-size: 26px; margin: 0 0 4px; color: var(--color-green-900); font-weight: var(--fw-bold); }
.rfp-valkomst p  { margin: 0; color: var(--color-text-primary); font-size: 15px; }
.rfp-valkomst a  { color: var(--color-primary); font-weight: var(--fw-semibold); }

/* ---------- Welcome banner ---------- */
.rfp-welcome {
  background: var(--color-green-100);
  padding: 28px 0;
  border-bottom: 1px solid #cbe6d4;
}
.rfp-welcome h2 { font-size: 26px; margin: 0 0 4px; color: var(--color-green-900); }
.rfp-welcome p { margin: 0; color: var(--color-text-primary); font-size: 15px; }

/* ---------- Info columns (3-up) ---------- */
.rfp-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rfp-info-col .rfp-icon-wrap {
  width: 56px; height: 56px; border-radius: 50%; background: var(--color-green-100);
  color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.rfp-info-col h3 { font-size: 22px; margin-bottom: 10px; }
.rfp-info-col p { font-size: 16px; }

/* ---------- Cards grid ---------- */
.rfp-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rfp-cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ---------- Project card ---------- */
.rfp-proj-card {
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; transition: var(--t-standard);
  text-decoration: none; color: inherit;
}
.rfp-proj-card:hover { box-shadow: var(--shadow-card); border-color: #c5c5c5; color: inherit; }
.rfp-proj-card-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.rfp-proj-card h3 { font-size: 20px; margin: 0; line-height: 1.25; color: var(--color-text-primary); }
.rfp-proj-card p { margin: 0; font-size: 15px; line-height: 1.5; }
.rfp-proj-card-meta {
  font-size: 13px; color: var(--color-text); margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--color-gray-300); display: flex; justify-content: space-between; align-items: center;
}
.rfp-proj-card-meta strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.rfp-deadline-passed { color: var(--color-danger); font-weight: var(--fw-semibold); }
.rfp-proj-card-more { color: var(--color-primary); font-weight: var(--fw-bold); font-size: 14px; }

/* ---------- Filter bar (projektarkiv) ---------- */
.rfp-filter-bar {
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-md);
  padding: 20px 24px; margin-bottom: 16px;
}
.rfp-filter-form {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 12px; align-items: end;
}
.rfp-filter-field { display: flex; flex-direction: column; gap: 6px; }
.rfp-filter-field-btn { justify-content: flex-end; }
.rfp-filter-field-btn .rfp-btn { height: 42px; min-height: 42px; padding-top: 0; padding-bottom: 0; }
.rfp-filter-label { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--color-text-label); }

/* Search input */
.rfp-search-wrap { position: relative; }
.rfp-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-placeholder); pointer-events: none;
}
.rfp-search-input {
  width: 100%; height: 42px; padding: 0 12px 0 40px;
  border: 1px solid var(--color-gray-700); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 15px; color: var(--color-text-primary);
  background: #fff; -webkit-appearance: none; appearance: none;
}
.rfp-search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-green-300); }
.rfp-search-input::placeholder { color: var(--color-text-placeholder); }
/* Hide native browser search icon/clear button */
.rfp-search-input::-webkit-search-decoration,
.rfp-search-input::-webkit-search-cancel-button,
.rfp-search-input::-webkit-search-results-button,
.rfp-search-input::-webkit-search-results-decoration { display: none; }

/* Select with custom chevron */
.rfp-select-wrap { position: relative; }
.rfp-filter-select {
  height: 42px; padding: 0 36px 0 12px;
  border: 1px solid var(--color-gray-700); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 15px; color: var(--color-text-primary);
  background: #fff; cursor: pointer; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.rfp-filter-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-green-300); }
.rfp-select-chevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-text); pointer-events: none;
}

.rfp-filter-stats { font-size: 14px; color: var(--color-text); padding: 4px 4px 20px; gap: 5px; }
.rfp-count-num { font-weight: var(--fw-bold); color: var(--color-text-primary); margin-right: 2px; }
.rfp-filter-checkbox { grid-column: 1 / -1; padding-top: 4px; }
.rfp-checkbox-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); color: var(--color-text); cursor: pointer;
}
.rfp-checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0;
}

.rfp-empty-state {
  grid-column: 1 / -1; padding: 48px; text-align: center;
  background: var(--color-bg-soft); border-radius: var(--radius-lg); color: var(--color-text);
}

@media (max-width: 1024px) {
  .rfp-filter-form { grid-template-columns: 1fr 1fr; }
  .rfp-filter-field-btn { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 580px) {
  .rfp-filter-form { grid-template-columns: 1fr; }
  .rfp-filter-field-btn .rfp-btn { width: 100%; justify-content: center; }
}

/* ---------- Pills ---------- */
.rfp-pill {
  display: inline-flex; align-items: center; padding: 3px 12px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.4;
}
.rfp-pill-green { background: var(--color-green-100); color: var(--color-green-900); }
.rfp-pill-gray  { background: var(--color-gray-300);  color: var(--color-text-primary); }
.rfp-pill-red   { background: #fde2e3; color: var(--color-danger-active); }

/* ---------- News card (for homepage grid) ---------- */
.rfp-news-card {
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: var(--t-standard);
  text-decoration: none; color: inherit;
}
.rfp-news-card:hover { box-shadow: var(--shadow-card); color: inherit; }
.rfp-news-card-thumb {
  aspect-ratio: 16/9; background: var(--color-green-100);
  position: relative; overflow: hidden;
}
.rfp-news-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rfp-news-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.rfp-news-card-date { font-size: 13px; color: var(--color-text); }
.rfp-news-card h3 { font-size: 19px; margin: 0; line-height: 1.3; }
.rfp-news-card p { font-size: 14px; margin: 0; }

/* ---------- CTA section ---------- */
.rfp-cta { background: var(--color-primary); color: #fff; padding: 64px 0; text-align: center; }
.rfp-cta h2 { color: #fff; margin-bottom: 12px; }
.rfp-cta p { color: var(--color-green-100); font-size: 18px; max-width: 580px; margin: 0 auto 28px; }
.rfp-cta .rfp-btn-primary {
  background: #fff; color: var(--color-primary); border-color: #fff;
}
.rfp-cta .rfp-btn-primary:hover {
  background: var(--color-green-100); color: var(--color-green-900); border-color: var(--color-green-100);
}

/* ---------- Calendar ---------- */
.rfp-calendar {
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-lg); overflow: hidden;
}
.rfp-cal-event {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid var(--color-gray-300); align-items: center;
  text-decoration: none; color: inherit;
}
.rfp-cal-event:last-child { border-bottom: 0; }
.rfp-cal-event:hover { background: var(--color-gray-100); color: inherit; }
.rfp-cal-date {
  background: var(--color-green-100); color: var(--color-green-900);
  border-radius: 8px; padding: 8px 0; text-align: center;
}
.rfp-cal-date .d { display: block; font-size: 22px; font-weight: var(--fw-bold); line-height: 1; }
.rfp-cal-date .m { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; font-weight: var(--fw-semibold); }
.rfp-cal-info h4 { margin: 0 0 4px; font-size: 16px; }
.rfp-cal-when { font-size: 13px; color: var(--color-text); }
.rfp-cal-when strong { color: var(--color-text-primary); }
.rfp-cal-arrow { color: var(--color-primary); font-weight: var(--fw-bold); }

/* ---------- Quick links ---------- */
.rfp-quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rfp-qlink {
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-lg);
  padding: 22px 24px; display: flex; align-items: center; gap: 16px;
  text-decoration: none; color: var(--color-text-primary); transition: var(--t-standard);
}
.rfp-qlink:hover { background: var(--color-green-100); border-color: var(--color-green-300); color: var(--color-text-primary); }
.rfp-qlink-icon {
  width: 44px; height: 44px; border-radius: 8px; background: var(--color-green-100);
  color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.rfp-qlink:hover .rfp-qlink-icon { background: #fff; }
.rfp-qlink h4 { margin: 0 0 2px; font-size: 16px; }
.rfp-qlink p { margin: 0; font-size: 13px; color: var(--color-text); }

/* ---------- Form fields ---------- */
.rfp-field label {
  display: block; font-size: 12px; color: var(--color-text-label); margin-bottom: 6px; font-weight: var(--fw-semibold);
}
.rfp-field select,
.rfp-field input,
.rfp-field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 16px;
  padding: 10px 12px; border: 1px solid var(--color-gray-700); border-radius: var(--radius-sm);
  color: var(--color-text-primary); background: #fff; min-height: 44px;
}
.rfp-field textarea { min-height: 96px; resize: vertical; }
.rfp-field select:focus,
.rfp-field input:focus,
.rfp-field textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-green-300);
}
.rfp-field input::placeholder { color: var(--color-text-placeholder); }
.rfp-results-count { font-size: 14px; color: var(--color-text); padding: 4px 4px 16px; }
.rfp-results-count strong { color: var(--color-text-primary); }

/* ---------- Back link ---------- */
.rfp-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-primary); font-weight: var(--fw-semibold);
  text-decoration: none; font-size: 14px; padding: 24px 0 0;
}
.rfp-back-link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* ---------- Single project layout ---------- */
.rfp-proj-head { padding: 24px 0 32px; }
.rfp-proj-head h1 { margin: 16px 0; }

.rfp-proj-meta-bar {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding: 16px 0; border-top: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--color-gray-300);
}
.rfp-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text); }
.rfp-meta-item strong { color: var(--color-text-primary); }

.rfp-proj-body { display: grid; grid-template-columns: 1fr 320px; gap: 48px; padding: 32px 0 64px; }
.rfp-proj-main { min-width: 0; }
.rfp-proj-body h2 { font-size: 24px; margin: 28px 0 12px; }
.rfp-proj-body h2:first-child { margin-top: 0; }
.rfp-proj-body p { font-size: 16px; }

/* BuddyBoss sets overflow-x:hidden on body+.site (specificity 0,2,1).
   Match that specificity so the child theme rule wins in cascade order. */
body.single-forskningsprojekt .site { overflow-x: clip; }

.rfp-proj-aside { position: sticky; top: 128px; align-self: start; }
.rfp-card-anmal {
  background: var(--color-green-100); border: 1px solid var(--color-green-300);
  border-radius: var(--radius-lg); padding: 24px;
}
.rfp-card-anmal h3 { font-size: 18px; margin-bottom: 8px; color: var(--color-green-900); }
.rfp-card-anmal > p { font-size: 14px; margin: 0 0 16px; }
.rfp-card-anmal .rfp-anmal-deadline {
  font-size: 13px; color: var(--color-text);
  margin-top: 20px; margin-bottom: 0;
}
.rfp-card-anmal .rfp-anmal-deadline strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

.rfp-btn.rfp-btn-disabled {
  background: rgba(255,255,255,0.55);
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-400);
  cursor: not-allowed;
}
.rfp-btn.rfp-btn-disabled:hover,
.rfp-btn.rfp-btn-disabled:focus {
  background: rgba(255,255,255,0.55);
  color: var(--color-gray-600);
  border-color: var(--color-gray-400);
}

/* ---------- Video list ---------- */
.rfp-video-list { display: grid; gap: 16px; margin-top: 16px; }
.rfp-video-embed-wrap {
  aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; position: relative;
}
.rfp-video-embed-wrap iframe,
.rfp-video-embed-wrap object,
.rfp-video-embed-wrap embed,
.rfp-video-embed-wrap video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.rfp-video-item h4 { margin: 12px 0 4px; font-size: 16px; }
.rfp-video-item p { font-size: 14px; margin: 0; }

/* ---------- Document list ---------- */
.rfp-doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rfp-dok-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 56px; border-radius: 4px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.04em;
  background: #767676;
}
.rfp-dok-badge--pdf  { background: #da1e28; }
.rfp-dok-badge--doc,
.rfp-dok-badge--docx { background: #185abd; }
.rfp-dok-badge--xls,
.rfp-dok-badge--xlsx { background: #107c41; }
.rfp-dok-badge--ppt,
.rfp-dok-badge--pptx { background: #c43e00; }
.rfp-doc-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px;
  padding: 14px 16px; background: #fff; border: 1px solid var(--color-gray-500);
  border-radius: var(--radius-md); align-items: center;
  text-decoration: none; color: inherit;
}
.rfp-doc-item:hover { background: var(--color-bg-soft); color: inherit; }
.rfp-doc-item > div { min-width: 0; }
.rfp-doc-item h4 { margin: 0 0 2px; font-size: 15px; overflow-wrap: anywhere; word-break: break-word; }
.rfp-doc-size { font-size: 12px; color: var(--color-gray-700); }

/* ---------- Blanketer & riktlinjer ---------- */
.rfp-br-search-bar {
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-lg);
  padding: 16px 20px; display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: end; margin-bottom: 32px;
}
.rfp-br-search-bar .rfp-filter-label { display: block; margin-bottom: 6px; }
.rfp-br-sektion { margin-bottom: 40px; }
.rfp-br-sektion h2 {
  font-size: 34px; margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--color-gray-300);
  color: var(--color-text-primary);
}
.rfp-br-tom { font-size: 15px; color: var(--color-text); margin: 0; }
.rfp-br-no-results {
  padding: 48px 24px; text-align: center;
  background: var(--color-gray-100); border-radius: var(--radius-lg);
  color: var(--color-text); font-size: 15px; margin-top: 8px;
}

/* ---------- Login ---------- */
.rfp-login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 600px; padding: 48px 24px; background: var(--color-gray-100);
}
.rfp-login-card {
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-lg);
  padding: 40px; width: 100%; max-width: 440px;
}
.rfp-logo-wrap { text-align: center; margin-bottom: 24px; }
.rfp-logo-wrap img { height: 40px; }
.rfp-login-card h2 { text-align: center; font-size: 24px; margin-bottom: 8px; }
.rfp-subtitle { text-align: center; font-size: 14px; color: var(--color-text); margin-bottom: 28px; }
.rfp-login-card .rfp-field { margin-bottom: 16px; }
.rfp-login-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.rfp-forgot { text-align: center; font-size: 14px; }

/* ---------- Modal (design system names — separate from legacy rfp-modal-overlay) ---------- */
.rfp-modal-backdrop {
  position: fixed; inset: 0; background: rgba(36,36,36,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 24px;
}
.rfp-modal-ds {
  background: #fff; border-radius: var(--radius-md); padding: 32px;
  width: 100%; max-width: 540px; max-height: 90vh; overflow: auto;
  box-shadow: var(--shadow-card);
}
.rfp-modal-ds h3 { margin: 0 0 8px; font-size: 24px; }
.rfp-modal-ds .rfp-modal-lead { color: var(--color-text); margin-bottom: 24px; }
.rfp-modal-ds .rfp-field { margin-bottom: 16px; }
.rfp-modal-ds .rfp-modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }

/* ---------- Role banner (Granskningsrådet) ---------- */
.rfp-role-banner {
  background: var(--color-green-900); color: var(--color-green-100);
  padding: 12px 0; font-size: 14px; text-align: center;
}
.rfp-role-banner strong { color: #fff; }

/* ---------- News list (archive) ---------- */
.rfp-news-list { display: flex; flex-direction: column; gap: 16px; }
.rfp-news-row {
  display: grid; grid-template-columns: 240px 1fr; gap: 24px;
  background: #fff; border: 1px solid var(--color-gray-500); border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: inherit; transition: var(--t-standard);
}
.rfp-news-row:hover { box-shadow: var(--shadow-card); color: inherit; }
.rfp-news-row-thumb {
  background: linear-gradient(135deg, var(--color-green-100) 0%, var(--color-green-300) 100%);
  overflow: hidden; height: 160px;
}
.rfp-news-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rfp-news-row-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.rfp-news-row-date { font-size: 13px; color: var(--color-text); }
.rfp-news-row h3 { margin: 0; font-size: 20px; }
.rfp-news-row p { margin: 0; font-size: 14px; }

/* ---------- Pagination ---------- */
.rfp-pagination {
  display: flex; justify-content: center; align-items: center; gap: 6px; padding: 32px 0;
}
.rfp-pagination a,
.rfp-pagination span {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--color-text-primary);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 14px; text-decoration: none;
}
.rfp-pagination a:hover { background: var(--color-green-100); }
.rfp-pagination .current { background: var(--color-primary); color: #fff; }

/* ---------- Back link ---------- */
.rfp-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--color-primary); text-decoration: none;
  margin-bottom: 24px;
}
.rfp-back-link:hover { text-decoration: underline; color: var(--color-primary-hover); }

/* ---------- Article (single news) ---------- */
.rfp-article { max-width: 760px; margin: 0 auto; padding: 32px 0; }
.rfp-article h1 { font-size: 38px; margin: 16px 0; overflow-wrap: break-word; hyphens: auto; }
.rfp-article-meta {
  font-size: 13px; color: var(--color-text); margin-bottom: 28px;
  padding-bottom: 16px; border-bottom: 1px solid var(--color-gray-300);
}
.rfp-article-featured { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; }
.rfp-article-featured img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rfp-article-content p { font-size: 17px; line-height: 1.6; margin-bottom: 16px; }
.rfp-article-content h2 { font-size: 26px; margin: 32px 0 12px; }
.rfp-article-content h3 { font-size: 20px; margin: 24px 0 10px; }
.rfp-article-content img { max-width: 100%; border-radius: var(--radius-md); margin: 8px 0; }
.rfp-article-content ul, .rfp-article-content ol { font-size: 17px; line-height: 1.6; padding-left: 24px; margin-bottom: 16px; }

/* ---------- Blanketter/docs section ---------- */
.rfp-docs-section { margin-bottom: 40px; }
.rfp-docs-section h2 { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--color-green-100); }
.rfp-intro { font-size: 17px; max-width: 720px; margin-bottom: 32px; }

/* ---------- 404-sida ---------- */
body.error404 a.button { color: #fff !important; }

/* ---------- Mobile drawer ---------- */
.rfp-drawer {
  position: fixed; inset: 0; background: rgba(36,36,36,0.5);
  z-index: 200; display: flex; justify-content: flex-end;
}
.rfp-drawer-panel {
  background: #fff; width: 280px; height: 100%; padding: 24px; overflow: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.rfp-drawer-panel a {
  padding: 12px 14px; border-radius: 6px; font-size: 16px;
  color: var(--color-text-primary); text-decoration: none; font-weight: var(--fw-semibold);
  display: block;
}
.rfp-drawer-panel a:hover,
.rfp-drawer-panel a.current { background: var(--color-green-100); color: var(--color-green-900); }
.rfp-drawer-close {
  align-self: flex-end; width: 40px; height: 40px;
  border: 0; background: transparent; cursor: pointer; min-height: 44px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1024px) {
  .rfp-cards-3 { grid-template-columns: 1fr 1fr; }
  .rfp-quick-links { grid-template-columns: 1fr 1fr; }
  .rfp-proj-body { grid-template-columns: 1fr; }
  .rfp-proj-aside { position: static; }
  .rfp-news-row { grid-template-columns: 1fr; }
  .rfp-news-row-thumb { height: auto; aspect-ratio: 16/7; }
}

@media (max-width: 767px) {
  .rfp-hero { padding: 48px 0; }
  .rfp-hero-accent { display: none; }
  .rfp-block { padding: 40px 0; }
  .rfp-cols-3 { grid-template-columns: 1fr; }
  .rfp-cards-3 { grid-template-columns: 1fr; }
  .rfp-cards-2 { grid-template-columns: 1fr; }
  .rfp-article h1 { font-size: 28px; }
  .rfp-cta { padding: 48px 0; }
}

@media (max-width: 580px) {
  .rfp-login-card { padding: 24px; }
  .rfp-modal-ds { padding: 24px; }
  .rfp-quick-links { grid-template-columns: 1fr; }
  .rfp-cal-event { grid-template-columns: 56px 1fr; }
  .rfp-cal-arrow { display: none; }
  .rfp-doc-item { grid-template-columns: 48px minmax(0, 1fr); row-gap: 10px; }
  .rfp-doc-item .rfp-btn { grid-column: 1 / -1; justify-self: stretch; }
}