/*
Theme Name: VCSLTD Business Hub
Template: generatepress
Version: 1.0
*/

/* =================================================================
   VCSLTD BUSINESS HUB — HOUSE STYLE
   Everything below styles the briefing content. The reading dials
   at the top are the four numbers we tune to your eyes; change
   those, not the rest.
   ================================================================= */

:root{
  /* ---- Reading dials (these are the ones we adjust) ---- */
  --reading-line-height: 1.85;       /* space between lines */
  --reading-letter-spacing: 0.012em; /* space between letters */
  --reading-paragraph-gap: 1.25rem;  /* space between paragraphs */
  --reading-width: 68ch;             /* comfortable line length */

  /* ---- Palette (warm, low-glare) ---- */
  --hub-bg: #f4f1ea;
  --hub-surface: #ffffff;
  --hub-ink: #2a2f36;
  --hub-ink-soft: #555c66;
  --hub-line: #e4ded2;
  --hub-accent: #3d6db5;
  --hub-good: #2f8f7f;
  --hub-warn: #d98a2b;
  --hub-alert: #cc4b3c;
  --hub-good-bg: #e7f2ef;
  --hub-warn-bg: #faf0df;
  --hub-alert-bg: #f9e7e4;
  --hub-accent-bg: #eaf0f8;
}

/* Load Lexend for the reading area */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600;700&display=swap');

/* ---- The reading container. Everything we render sits inside .hub ---- */
.hub{
  background:var(--hub-bg);
  color:var(--hub-ink);
  font-family:'Lexend', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:var(--reading-line-height);
  letter-spacing:var(--reading-letter-spacing);
  -webkit-font-smoothing:antialiased;
  padding:clamp(16px, 4vw, 48px) 0 64px;
}
.hub .wrap{
  max-width:var(--reading-width);
  margin:0 auto;
  padding:0 clamp(18px,5vw,28px);
}

/* ---- Header ---- */
.hub .eyebrow{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hub-accent); font-weight:600; margin-bottom:.5rem;
}
.hub h1{
  font-size:clamp(1.8rem, 5vw, 2.5rem); line-height:1.2;
  letter-spacing:-0.01em; margin:.1rem 0 .3rem; font-weight:700; color:var(--hub-ink);
}
.hub .dateline{ color:var(--hub-ink-soft); font-size:.95rem; margin-bottom:2rem; }

/* ---- Top summary card ---- */
.hub .brief{
  background:var(--hub-surface); border:1px solid var(--hub-line);
  border-left:5px solid var(--hub-accent);
  border-radius:14px; padding:clamp(18px,4vw,28px);
  margin-bottom:2.5rem; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.hub .brief h2{ margin:0 0 .6rem; font-size:1.15rem; font-weight:600; }
.hub .brief p{ margin:0 0 var(--reading-paragraph-gap); }
.hub .brief p:last-child{ margin-bottom:0; }

/* ---- Sections ---- */
.hub section{ margin-bottom:2.5rem; }
.hub h2.section{
  font-size:1.35rem; font-weight:700; letter-spacing:-0.01em;
  padding-bottom:.5rem; border-bottom:2px solid var(--hub-line);
  margin:0 0 1.2rem; color:var(--hub-ink);
}
.hub p{ margin:0 0 var(--reading-paragraph-gap); }

/* ---- Status pills ---- */
.hub .pill{
  display:inline-block; font-size:.82rem; font-weight:600;
  padding:.18em .7em; border-radius:999px; letter-spacing:.01em; vertical-align:middle;
}
.hub .pill.good{ background:var(--hub-good-bg); color:var(--hub-good); }
.hub .pill.warn{ background:var(--hub-warn-bg); color:var(--hub-warn); }
.hub .pill.alert{ background:var(--hub-alert-bg); color:var(--hub-alert); }

/* ---- Colour-coded callout rows ---- */
.hub .rows{ display:flex; flex-direction:column; gap:.9rem; }
.hub .row{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--hub-surface); border:1px solid var(--hub-line);
  border-radius:12px; padding:1rem 1.15rem;
}
.hub .row .bar{ width:4px; align-self:stretch; border-radius:4px; flex-shrink:0; }
.hub .row.good .bar{ background:var(--hub-good); }
.hub .row.warn .bar{ background:var(--hub-warn); }
.hub .row.alert .bar{ background:var(--hub-alert); }
.hub .row .body{ flex:1; }
.hub .row .title{ font-weight:600; margin-bottom:.15rem; }
.hub .row .meta{ color:var(--hub-ink-soft); font-size:.92rem; }
.hub .row .num{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- Tables ---- */
.hub table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.hub th,.hub td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--hub-line); }
.hub th{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hub-ink-soft); font-weight:600; }
.hub td.r,.hub th.r{ text-align:right; }
.hub tbody tr:last-child td{ border-bottom:none; }
.hub .total td{ font-weight:700; border-top:2px solid var(--hub-line); }

/* ---- Collapsible detail ---- */
.hub details{
  background:var(--hub-surface); border:1px solid var(--hub-line);
  border-radius:12px; padding:.4rem 1.15rem; margin-top:1rem;
}
.hub summary{ cursor:pointer; font-weight:600; padding:.6rem 0; list-style:none; }
.hub summary::-webkit-details-marker{ display:none; }
.hub summary::before{ content:"▸ "; color:var(--hub-accent); }
.hub details[open] summary::before{ content:"▾ "; }
.hub details .inner{ padding:.2rem 0 .8rem; }

/* ---- Footer ---- */
.hub .hub-foot{
  margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--hub-line);
  color:var(--hub-ink-soft); font-size:.82rem; line-height:1.7;
}

@media (prefers-reduced-motion:reduce){ .hub *{ transition:none !important; } }