/* ==========================================================================
   Fresh Prints Supply Co. — Services page enhancement
   File: /wp-content/themes/fresh-print-theme/assets/css/fps-services.css
   Scope: .page-content on /services/  |  Brand: #fab528 / #1a1a1a / Outfit
   ========================================================================== */

:root{
  --fps-y:#fab528;        /* brand primary            */
  --fps-y-d:#e09f13;      /* darkened, AA on white    */
  --fps-y-txt:#8a6208;    /* text on amber tint       */
  --fps-ink:#1a1a1a;
  --fps-body:#4b5563;
  --fps-mut:#6b7280;
  --fps-line:#ececec;
  --fps-tint:#fff8e8;
  --fps-tint-line:#f6e2b4;
  --fps-radius:18px;
}

/* --------------------------------------------------------------------------
   1. PAGE HEADER
   Was: bare H1 on flat grey. Now: warm gradient, hairline rule, brand accent.
   -------------------------------------------------------------------------- */
.page-header{
  background:linear-gradient(180deg,#fff 0%,#faf9f7 100%);
  border-bottom:1px solid var(--fps-line);
  position:relative;
  padding-block:56px 44px;
}
.page-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg,var(--fps-y) 0 22%,transparent 22%);
}
.page-header .page-title{letter-spacing:-.02em;}
.page-breadcrumb{font-size:.875rem;color:var(--fps-mut);}
.page-breadcrumb a{
  color:var(--fps-mut); text-decoration:none;
  border-bottom:1px solid transparent; transition:.2s;
}
.page-breadcrumb a:hover{color:var(--fps-ink);border-color:var(--fps-y);}

/* --------------------------------------------------------------------------
   2. SECTION INTRO
   -------------------------------------------------------------------------- */
.fps-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fps-y-d);
  background:var(--fps-tint); border:1px solid var(--fps-tint-line);
  padding:.4rem .85rem; border-radius:999px; margin-bottom:1.1rem;
}
.fps-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--fps-y);
}
.fps-lead{
  font-size:1.0625rem; line-height:1.75; color:var(--fps-body);
  max-width:62ch; margin-inline:auto;   /* readable measure */
}

/* --------------------------------------------------------------------------
   3. SERVICE CARDS  (photo + copy merged into one card)
   -------------------------------------------------------------------------- */
.fps-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.5rem;
  max-width:1140px; margin-inline:auto; margin-bottom:4.5rem;
}
@media (max-width:1023px){ .fps-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:599px){  .fps-grid{grid-template-columns:1fr;gap:1.1rem;} }

.fps-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--fps-line);
  border-radius:var(--fps-radius); overflow:hidden;
  text-decoration:none; color:inherit; padding:0;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.fps-card:hover{
  transform:translateY(-6px);
  border-color:#f3d489;
  box-shadow:0 18px 40px -18px rgba(26,26,26,.28);
}

.fps-card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#f3f4f6;}
.fps-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.fps-card:hover .fps-card-media img{transform:scale(1.06);}
.fps-card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45));
}

.fps-chip{
  position:absolute; z-index:2; left:.85rem; bottom:.85rem;
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-radius:999px; padding:.32rem .62rem;
  font-size:.64rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fps-ink);
}
.fps-chip svg{width:14px;height:14px;color:var(--fps-y-d);}

.fps-card-body{
  padding:1.35rem 1.35rem 1.5rem;
  display:flex; flex-direction:column; flex:1; text-align:left;
}
.fps-card-body h3{
  font-size:1.1875rem; font-weight:700; color:var(--fps-ink);
  margin:0 0 .5rem; letter-spacing:-.01em;
}
.fps-card-body p{font-size:.9375rem;line-height:1.6;color:#5c6270;margin:0;}

.fps-more{
  margin-top:auto; padding-top:1.15rem;   /* pins CTA to card bottom */
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8125rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--fps-y-d);
}
.fps-more svg{width:15px;height:15px;transition:transform .25s;}
.fps-card:hover .fps-more svg{transform:translateX(4px);}

/* --------------------------------------------------------------------------
   4. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.fps-table-wrap{
  max-width:1140px; margin-inline:auto; margin-bottom:3rem;
  border:1px solid var(--fps-line); border-radius:var(--fps-radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04); overflow:hidden; background:#fff;
}
.fps-table-wrap table{width:100%;text-align:left;border-collapse:separate;border-spacing:0;}
.fps-table-wrap thead{background:#fafaf9;}
.fps-table-wrap thead th{
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:#8a8f98;
  padding:.95rem 1.5rem; border-bottom:1px solid var(--fps-line);
}
.fps-table-wrap tbody tr{transition:background .18s;}
.fps-table-wrap tbody tr + tr td{border-top:1px solid #f2f2f2;}
.fps-table-wrap tbody tr:hover{background:var(--fps-tint);}
.fps-table-wrap tbody td{
  padding:.95rem 1.5rem; font-size:.9375rem; color:#3f4553; vertical-align:middle;
}
.fps-table-wrap th:last-child,
.fps-table-wrap td:last-child{width:34%;}

.fps-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--fps-tint); border:1px solid var(--fps-tint-line);
  color:var(--fps-y-txt); font-weight:700; font-size:.8125rem;
  padding:.3rem .7rem; border-radius:999px; white-space:nowrap;
}
.fps-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fps-y);}

/* stack the table into cards on phones */
@media (max-width:599px){
  .fps-table-wrap thead{display:none;}
  .fps-table-wrap tbody tr{display:block;padding:.9rem 1.1rem;}
  .fps-table-wrap tbody tr + tr{border-top:1px solid #f2f2f2;}
  .fps-table-wrap tbody td{display:block;padding:.2rem 0;border:0;width:auto;}
}

/* --------------------------------------------------------------------------
   5. CTA
   FIX: the old button was .text-white on .bg-primary, but the theme's anchor
   colour rule won the cascade -> yellow text on a yellow background (invisible).
   Solid ink pill = 17.4:1 contrast, and it matches the header CTA.
   -------------------------------------------------------------------------- */
.fps-cta{
  max-width:1140px; margin-inline:auto;
  background:#fff; border:1px solid var(--fps-line);
  border-radius:20px; padding:2.5rem 1.75rem; text-align:center;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.fps-cta p{font-size:1.0625rem;color:var(--fps-body);margin:0 auto 1.5rem;max-width:52ch;}

.fps-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--fps-ink); color:#fff;
  font-weight:700; font-size:.9375rem; letter-spacing:.02em;
  padding:.9rem 1.9rem; border-radius:999px; text-decoration:none;
  box-shadow:0 10px 24px -12px rgba(26,26,26,.6);
  transition:background .22s, color .22s, transform .22s, box-shadow .22s;
}
.fps-btn:hover,.fps-btn:focus{
  background:var(--fps-y); color:var(--fps-ink);
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(250,181,40,.85);
}
.fps-btn svg{width:16px;height:16px;transition:transform .22s;}
.fps-btn:hover svg{transform:translateX(3px);}

.fps-cta-note{
  margin-top:1rem; font-size:.8125rem; color:#8a8f98;
  display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap;
}
.fps-cta-note span{display:inline-flex;align-items:center;gap:.35rem;}
.fps-cta-note span::before{content:"\2713";color:var(--fps-y-d);font-weight:700;}

/* --------------------------------------------------------------------------
   6. FOCUS + SCROLL REVEAL
   -------------------------------------------------------------------------- */
.fps-card:focus-visible,
.fps-btn:focus-visible{outline:3px solid var(--fps-y);outline-offset:3px;}

.fps-reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.fps-reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .fps-reveal{opacity:1 !important;transform:none !important;}
  .fps-card,.fps-card-media img,.fps-btn,.fps-more svg{transition:none !important;}
}

/* --------------------------------------------------------------------------
   7. SCREEN-READER-ONLY UTILITY
   This theme has no .sr-only rule, so the table caption was rendering as
   visible text instead of being hidden for assistive tech only.
   -------------------------------------------------------------------------- */
.fps-table-wrap .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}