/* ============================================================
   Roundup post styles — "Best Employee Scheduling Apps 2026"
   Scoped under .roundup so nothing here can leak into the rest
   of the site. Brand hexes are inlined; if home.css already
   exposes brand custom properties (e.g. --purple, --cyan,
   --yellow), feel free to swap the literals for those vars.

   Trio:  purple #5438dc · cyan #2ec0f9 · yellow #e0ca3c
   Ink #1a1a2e · off-white #fffeee · success #1a9e6a
   ============================================================ */

/* Force the brand typeface everywhere inside the roundup. The site theme sets
   its own font-family on headings (h2/h3) at higher specificity, which is why
   the hero text rendered in the wrong font — this overrides it. Uses the site's
   --font-sans token if present, else the literal Figtree stack. */
.roundup,
.roundup h1, .roundup h2, .roundup h3, .roundup h4,
.roundup p, .roundup div, .roundup span, .roundup a,
.roundup ul, .roundup ol, .roundup li, .roundup td, .roundup th {
  font-family: var(--font-sans, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}
.roundup * { box-sizing: border-box; }

/* Optional: warm off-white page canvas behind the article (brand --off-white
   #FFFEEE) instead of stark white. Apply to the post-content wrapper in your
   theme — selector will differ; this is a hint, not auto-applied. */
/* .post-content, .blog-single .content { background: #FFFEEE; } */

/* Defend against the site theme's global heading rules (the theme applies
   uppercase + dark color to h2/h3 inside post content, which is more specific
   than our single-class selectors). Reset transform + let our rules set color. */
.roundup h1, .roundup h2, .roundup h3, .roundup h4 { text-transform: none; }

/* ---------- Roundup hero graphic ---------- */
.roundup-herofig { margin: 2.4rem 0; }
.roundup-hero {
  position: relative; overflow: hidden; border-radius: 20px;
  background: linear-gradient(135deg, #5438dc 0%, #5438dc 50%, #3b1fa8 100%);
  box-shadow: 0 24px 60px rgba(26,26,46,.28);
  padding: 44px 44px 46px;
}
.roundup-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 30px 30px;
}
.roundup-hero > * { position: relative; }
.roundup-hero__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: #e0ca3c; margin-bottom: 13px;
}
.roundup-hero__title {
  font-size: 36px; font-weight: 900; line-height: 1.1; letter-spacing: -.8px;
  color: #fff !important; text-transform: none !important; margin: 0 0 4px; max-width: 660px;
}
.roundup-hero__sub { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.68); margin: 0 0 28px; }
.roundup-hero__winner {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.12); border: 1.5px solid #e0ca3c; border-radius: 14px;
  padding: 22px 24px; box-shadow: 0 0 0 4px rgba(224,202,60,.22); margin-bottom: 14px;
}
.roundup-hero__winner img { height: 42px; width: auto; }
.roundup-hero__pick {
  margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #1a1a2e; background: #e0ca3c;
  padding: 5px 11px; border-radius: 999px;
}
.roundup-hero__chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.roundup-chip {
  flex: 0 0 calc(25% - 9px);
  display: flex; align-items: center; justify-content: center; height: 54px;
  background: rgba(255,255,255,.94); border-radius: 11px;
  font-size: 16px; font-weight: 800; letter-spacing: -.3px;
}
.roundup-herofig figcaption {
  font-size: 13px; color: #6b7280; text-align: center; margin-top: 12px;
}

/* ---------- Brand cyan-checkmark list ---------- */
.roundup-checklist {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
}
.roundup-checklist li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 16px; font-weight: 500; color: #34344a; line-height: 1.5;
}
.roundup-checklist li .ck {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  background: #2ec0f9; color: #1a1a2e; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}

/* ---------- "In this guide" table of contents ---------- */
.roundup-toc {
  background: #fff; border: 1px solid #f0f0f5; border-radius: 16px;
  padding: 24px 28px; margin: 2rem 0 2.5rem; box-shadow: 0 8px 32px rgba(26,26,46,.05);
}
.roundup-toc__label {
  font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: #5438dc; margin-bottom: 16px;
}
.roundup-toc__list {
  margin: 0; padding-left: 20px; columns: 2; column-gap: 32px;
  font-size: 15px; font-weight: 600; line-height: 2.1;
}
.roundup-toc__list a { color: #34344a; text-decoration: none; }
.roundup-toc__list a:hover { color: #5438dc; }
.roundup-toc__sections {
  border-top: 1px solid #f0f0f5; margin-top: 16px; padding-top: 14px;
  font-size: 15px; font-weight: 600; display: flex; gap: 24px; flex-wrap: wrap;
}
.roundup-toc__sections a { color: #34344a; text-decoration: none; }
.roundup-toc__sections a:hover { color: #5438dc; }

/* ---------- Quick comparison table ---------- */
.roundup-tablewrap {
  overflow-x: auto; background: #fff; border: 1px solid #f0f0f5;
  border-radius: 16px; box-shadow: 0 8px 32px rgba(26,26,46,.06); margin: 1.5rem 0;
}
.roundup-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.roundup-table thead tr { background: #5438dc; }
.roundup-table th {
  text-align: left; padding: 15px 18px; font-size: 12px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
}
.roundup-table th.c { text-align: center; padding: 15px 14px; }
.roundup-table td { padding: 15px 18px; border-bottom: 1px solid #f0f0f5; color: #6b7280; }
.roundup-table tbody tr:last-child td { border-bottom: none; }
.roundup-table td.c { text-align: center; padding: 15px 14px; }
.roundup-table td.name { font-weight: 700; color: #1a1a2e; }
.roundup-table td.yes { font-weight: 800; color: #1a9e6a; }
.roundup-table td.c:not(.muted):not(.yes) { font-weight: 600; color: #1a1a2e; }
.roundup-table tr.is-featured { background: #ede9fe; }
.roundup-table tr.is-featured td.name { color: #5438dc; font-weight: 800; }

/* ---------- Ranked app cards ---------- */
.roundup-card {
  background: #fff; border: 1px solid #f0f0f5; border-radius: 18px;
  padding: 30px 32px; margin: 1.4rem 0; box-shadow: 0 8px 32px rgba(26,26,46,.05);
  scroll-margin-top: 80px;
}
.roundup-card.is-featured {
  position: relative; border: 1.5px solid #d9cffa;
  background: linear-gradient(160deg, #f3effe 0%, #ffffff 60%);
  box-shadow: 0 16px 50px rgba(84,56,220,.1); padding: 36px 38px;
}
.roundup-card__badge {
  position: absolute; top: -14px; left: 38px; background: #e0ca3c; color: #1a1a2e;
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
}
.roundup-card__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.roundup-card.is-featured .roundup-card__head { gap: 16px; margin-bottom: 6px; }
.roundup-card__rank {
  font-size: 36px; font-weight: 900; color: #c9c4e8; line-height: 1; letter-spacing: -1.5px;
}
.roundup-card.is-featured .roundup-card__rank { font-size: 48px; color: #5438dc; letter-spacing: -2px; }
.roundup-card__name { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: #1a1a2e; margin: 0; }
.roundup-card.is-featured .roundup-card__name { font-size: 28px; font-weight: 900; }
.roundup-card__tagline { font-size: 14px; font-weight: 700; color: #5438dc; margin: 3px 0 0; }
.roundup-card.is-featured .roundup-card__tagline { font-size: 15px; margin-top: 4px; }
/* prose injected via .Inner */
.roundup-card > p { font-size: 16px; line-height: 1.7; color: #34344a; margin: 14px 0 18px; }
.roundup-card.is-featured > p { font-size: 18px; line-height: 1.75; margin: 18px 0 22px; }

.roundup-card__cols { display: flex; gap: 30px; flex-wrap: wrap; }
.roundup-card.is-featured .roundup-card__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 6px;
}
.roundup-card__col { flex: 1; min-width: 200px; }
.roundup-card.is-featured .roundup-card__col {
  background: #fff; border: 1px solid #f0f0f5; border-radius: 14px; padding: 20px 22px;
}
.roundup-card__collabel {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 9px;
}
.roundup-card.is-featured .roundup-card__collabel { font-size: 12px; margin-bottom: 14px; }
.roundup-card__collabel.pros { color: #1a9e6a; }
.roundup-card__collabel.cons { color: #6b7280; }
.roundup-card__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.roundup-card.is-featured .roundup-card__col ul { gap: 9px; }
.roundup-card__col li { display: flex; gap: 8px; font-size: 14.5px; color: #34344a; line-height: 1.45; }
.roundup-card__col li .ck { color: #1a9e6a; font-weight: 900; flex-shrink: 0; }
.roundup-card__col li .dash { color: #c3c3cf; font-weight: 900; flex-shrink: 0; }
.roundup-card.is-featured .roundup-card__col li { color: #34344a; }

.roundup-card__bestfor {
  background: #ede9fe; border-radius: 12px; padding: 16px 20px; margin: 18px 0 24px;
  font-size: 15px; line-height: 1.6; color: #1a1a2e;
}
.roundup-card__bestfor strong { font-weight: 800; }

/* ---------- Buttons ---------- */
.roundup-cta-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: #2ec0f9; color: #1a1a2e; font-size: 16px; font-weight: 700;
  padding: 14px 26px; border-radius: 8px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.roundup-cta-btn:hover { background: #7dd8fc; transform: translateY(-1px); color: #1a1a2e; }
.roundup-cta-btn .chev { font-weight: 900; font-size: 18px; line-height: 1; }
.roundup-cta-btn--lg { font-size: 17px; padding: 15px 30px; }

/* ---------- Closing CTA band ---------- */
.roundup-ctaband {
  position: relative; overflow: hidden; border-radius: 20px; text-align: center;
  background: linear-gradient(135deg, #5438dc 0%, #5438dc 55%, #3b1fa8 100%);
  box-shadow: 0 20px 60px rgba(84,56,220,.25); padding: 50px 44px; margin: 3rem 0;
}
.roundup-ctaband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 30px 30px;
}
.roundup-ctaband > * { position: relative; }
.roundup-ctaband h2 { font-size: 34px; font-weight: 900; letter-spacing: -.6px; color: #fff !important; text-transform: none !important; margin: 0 0 10px; }
.roundup-ctaband > p { font-size: 17px; color: rgba(255,255,255,.78); margin: 0 auto 26px; max-width: 460px; }
.roundup-ctaband__fine { font-size: 13px; color: rgba(255,255,255,.6); margin: 20px 0 0 !important; }

/* ============================================================
   THEME-OVERRIDE ARMOR
   The site theme styles post-content descendants (e.g. `.content p`,
   `.content a`, `.content h3`) at a specificity that beats our single-class
   color rules — that's why the hero subtitle rendered dark and the TOC links
   came out underlined theme-blue. These !important re-assertions guarantee the
   brand colors win regardless of the theme. (Layout/size rules above are
   unaffected; this block is colors + link decoration only.)
   ============================================================ */
/* light text on purple */
.roundup-hero__eyebrow { color: #e0ca3c !important; }
.roundup-hero__sub { color: rgba(255,255,255,.68) !important; }
.roundup-hero__pick { color: #1a1a2e !important; }
.roundup-ctaband > p { color: rgba(255,255,255,.78) !important; }
.roundup-ctaband__fine { color: rgba(255,255,255,.6) !important; }
.roundup-herofig figcaption { color: #6b7280 !important; }

/* links: kill the theme's underline/blue inside the roundup chrome */
.roundup-toc a { color: #34344a !important; text-decoration: none !important; }
.roundup-toc a:hover { color: #5438dc !important; }
.roundup-toc__label { color: #5438dc !important; }
.roundup-cta-btn,
.roundup-cta-btn:hover,
.roundup-cta-btn:visited { color: #1a1a2e !important; text-decoration: none !important; }

/* card text */
.roundup-checklist li { color: #34344a !important; }
.roundup-checklist li .ck { color: #1a1a2e !important; }
.roundup-card > p { color: #34344a !important; }
.roundup-card__name { color: #1a1a2e !important; }
.roundup-card.is-featured .roundup-card__name { color: #1a1a2e !important; }
.roundup-card__tagline { color: #5438dc !important; }
.roundup-card__col li { color: #34344a !important; }
.roundup-card__collabel.pros { color: #1a9e6a !important; }
.roundup-card__collabel.cons { color: #6b7280 !important; }
.roundup-card__bestfor { color: #1a1a2e !important; }

/* heading SIZES/WEIGHTS — the theme sizes h2/h3 inside post content, which
   shrinks our card names/taglines and hero/CTA headings. `.roundup ` prefix +
   !important defeats the theme; the responsive block at the very end of this
   file re-overrides these for mobile (later source order wins). */
.roundup .roundup-hero__title { font-size: 36px !important; font-weight: 900 !important; line-height: 1.1 !important; }
.roundup .roundup-card__name { font-size: 25px !important; font-weight: 800 !important; line-height: 1.2 !important; }
.roundup-card.is-featured .roundup-card__name { font-size: 28px !important; font-weight: 900 !important; }
.roundup .roundup-card__tagline { font-size: 15px !important; font-weight: 700 !important; }
.roundup-card.is-featured .roundup-card__tagline { font-size: 16px !important; }
.roundup .roundup-card__rank { font-size: 36px !important; font-weight: 900 !important; line-height: 1 !important; }
.roundup-card.is-featured .roundup-card__rank { font-size: 48px !important; }
.roundup .roundup-ctaband h2 { font-size: 34px !important; font-weight: 900 !important; }

/* PROS / CONS row spacing — the theme collapses our card paragraph margin, so
   guarantee breathing room above the columns and below each label. */
.roundup .roundup-card__cols { margin-top: 22px !important; }
.roundup-card.is-featured .roundup-card__cols { margin-top: 26px !important; }
.roundup .roundup-card__collabel { margin-bottom: 12px !important; }
.roundup-card.is-featured .roundup-card__collabel { margin-bottom: 14px !important; }

/* table text */
.roundup-table th { color: #fff !important; }
.roundup-table td { color: #6b7280 !important; }
.roundup-table td.name { color: #1a1a2e !important; }
.roundup-table td.yes { color: #1a9e6a !important; }
.roundup-table td.c:not(.muted):not(.yes) { color: #1a1a2e !important; }
.roundup-table tr.is-featured td.name { color: #5438dc !important; }

/* ============================================================
   RESPONSIVE — kept LAST so its !important rules win over the armor block
   above on small screens (equal specificity → later source order wins).
   ============================================================ */
@media (max-width: 700px) {
  .roundup-hero { padding: 28px 22px 30px; border-radius: 16px; }
  .roundup-hero__eyebrow { font-size: 11px; letter-spacing: 2px; }
  .roundup .roundup-hero__title { font-size: 25px !important; }
  .roundup-hero__sub { font-size: 14px; margin-bottom: 22px; }
  .roundup-hero__winner { padding: 16px 18px; gap: 10px; flex-wrap: wrap; }
  .roundup-hero__winner img { height: 32px; }
  /* chips: 2 per row on mobile (flex container, so set flex-basis not grid) */
  .roundup-chip { flex: 0 0 calc(50% - 6px); height: 48px; font-size: 14px; }

  .roundup-toc { padding: 20px 20px; }
  .roundup-toc__list { columns: 1; line-height: 2; }

  .roundup-checklist { grid-template-columns: 1fr; }

  /* table stays horizontally scrollable inside its wrapper */
  .roundup-table { font-size: 14px; }
  .roundup-table th, .roundup-table td { padding: 12px 12px; }

  .roundup-card { padding: 24px 20px; border-radius: 14px; }
  .roundup-card.is-featured { padding: 28px 20px; }
  .roundup-card__badge { left: 20px; }
  .roundup .roundup-card__rank { font-size: 30px !important; }
  .roundup-card.is-featured .roundup-card__rank { font-size: 38px !important; }
  .roundup .roundup-card__name { font-size: 22px !important; }
  .roundup-card.is-featured .roundup-card__name { font-size: 24px !important; }
  .roundup-card > p { font-size: 15px; }
  .roundup-card.is-featured > p { font-size: 16px; }
  .roundup-card__cols { gap: 18px; }
  .roundup-card.is-featured .roundup-card__cols { grid-template-columns: 1fr; }

  .roundup-ctaband { padding: 36px 24px; border-radius: 16px; }
  .roundup .roundup-ctaband h2 { font-size: 26px !important; }
  .roundup-ctaband > p { font-size: 15px; }
  .roundup-cta-btn { font-size: 15px; padding: 13px 22px; }
  .roundup-cta-btn--lg { font-size: 15px; padding: 14px 24px; }
}

@media (max-width: 400px) {
  .roundup-chip { flex: 0 0 100%; }
}