/* content.css - additive styles for generated content pages only.
 *
 * Loaded ONLY by pages under /services, /industries, /solutions, /resources,
 * /locations and the hubs. styles.css and theme-gold.css are untouched, so the
 * homepage and the original 7 pages cannot regress from anything in here.
 * Uses existing design tokens only: no new colours, no new fonts.
 */

/* ---- Breadcrumbs ---- */
.crumbs {
  margin-bottom: var(--s-4);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.crumbs li + li::before {
  content: "/";
  margin-right: var(--s-1);
  color: var(--line-strong);
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.crumbs a:hover {
  color: var(--baby);
  border-bottom-color: var(--baby);
}
.crumbs [aria-current="page"] {
  color: var(--text);
}

.hero-content {
  padding-bottom: var(--s-4);
}

/* ---- Prose ---- */
.prose {
  max-width: 72ch;
}
.prose h2 {
  margin-bottom: var(--s-3);
}
.prose h3 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  font-size: 1.15rem;
  color: var(--heading);
}
.prose p {
  margin-bottom: var(--s-3);
}
.prose ul,
.prose ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.25rem;
  color: var(--muted);
}
.prose li {
  margin-bottom: var(--s-2);
}
.prose strong {
  color: var(--text);
}
.prose a {
  color: var(--baby);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: var(--baby-soft);
}

/* ---- Direct answer card ---- */
.answer-card {
  max-width: 72ch;
  padding: var(--s-4) var(--s-6);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.answer-card p {
  margin: 0 0 var(--s-2);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.65;
}
.answer-card p:last-child {
  margin-bottom: 0;
}
.answer-card a {
  color: var(--baby);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Grids ----
   styles.css is mobile-first (.grid-2 goes 2-up at min-width:640, .grid-3 at
   min-width:900). Match that direction rather than fighting it with max-width
   overrides: single column is the base, columns are added upward. */
.grid-2,
.grid-3 {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Grid items default to min-width:auto, so an item whose min-content exceeds the
   container drags the whole track wider than the grid box and the page scrolls
   sideways. Nothing in a content card needs to be wider than its column. */
.grid-2 > *,
.grid-3 > * {
  min-width: 0;
}

/* .feature-list li is display:flex (styles.css). Inline <a> children become
   separate flex items and flex does not wrap between items, so a list item
   containing links reports a min-content equal to the SUM of its links. That was
   blowing the grid track out to 505px at 390px wide. The generator wraps item
   content in a single <span>; this lets that span shrink and wrap normally. */
.feature-list li > span {
  min-width: 0;
  flex: 1 1 auto;
}

/* Long URLs, DNS records and code samples must wrap rather than push the page.
   Applied to every <code> in the content area, not a hand-listed set of parents:
   the pages legitimately contain things like yourdomain.com/robots.txt and
   v=spf1 include:_spf.google.com, which are single unbreakable tokens wider than
   a 390px column. */
main code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.card-muted {
  background: var(--panel-2);
}

/* ---- Link cards ---- */
.link-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link-card:hover {
  transform: translateY(-3px);
  border-color: var(--baby);
}
.link-card h3 {
  color: var(--heading);
  margin-bottom: var(--s-2);
}
.link-card p {
  color: var(--muted);
  margin: 0;
}
/* Keyboard users must get the same affordance as mouse users. */
.link-card:focus-visible {
  outline: 2px solid var(--baby);
  outline-offset: 3px;
  border-color: var(--baby);
}

/* ---- Steps ---- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  max-width: 78ch;
}
.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
}
.step-n {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.9rem;
}
/* The content column is a grid item, so it defaults to min-width:auto and an
   unbreakable token inside it (a URL, a DNS record) would widen the whole track
   past the container. */
.steps li > div {
  min-width: 0;
}
.steps h3 {
  margin: 0 0 var(--s-1);
}
.steps p {
  margin: 0;
  color: var(--muted);
}

/* ---- Checklist ---- */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--s-3);
  color: var(--muted);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.check-list strong {
  color: var(--text);
  display: block;
  margin-bottom: 0.15rem;
}

/* ---- FAQ ---- */
.faq-list {
  max-width: 78ch;
  display: grid;
  gap: var(--s-2);
}
.faq-item {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  color: var(--heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--accent);
  flex: none;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--baby);
  outline-offset: -2px;
  border-radius: var(--r-md);
}
.faq-a {
  padding: 0 var(--s-4) var(--s-4);
  color: var(--muted);
}
.faq-a p {
  margin: 0 0 var(--s-2);
}
.faq-a p:last-child {
  margin-bottom: 0;
}
.faq-a a {
  color: var(--baby);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Trust / accuracy note ---- */
.trust-note {
  max-width: 72ch;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
}
.trust-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.trust-note a {
  color: var(--baby);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Reduced motion: reveals must never hide content ---- */
@media (prefers-reduced-motion: reduce) {
  .link-card,
  .link-card:hover {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Website project scope planner (/resources/website-project-scope-planner)
   ============================================================
   A questionnaire that returns FACTORS, never a price. Mobile-first, like the
   rest of this project. The summary is an <output> so assistive tech announces
   it when it updates; it is hidden only until there is something to say, and
   with JS off the questions remain fully readable content.
   ============================================================ */
.scope-planner { display: grid; gap: var(--s-4); }
.scope-q { border: 1px solid var(--line); border-radius: var(--r-md, 12px); padding: var(--s-3); margin: 0; background: var(--glass); }
.scope-q > legend { padding: 0 .4rem; font-weight: 600; color: var(--heading); font-size: 1.02rem; }
.scope-help { color: var(--muted); font-size: .9rem; margin: .2rem 0 var(--s-2); }
.scope-opts { display: grid; gap: .5rem; }

.scope-opt { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem; border-radius: var(--r-sm, 8px); cursor: pointer; border: 1px solid transparent; }
.scope-opt:hover { border-color: var(--glass-brd); }
/* Inputs stay real and visible: a custom control here would be more styling
   and less accessibility. Just give them room and a decent hit area. */
.scope-opt input { margin-top: .25rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--baby); }
.scope-opt-body { display: grid; gap: .15rem; }
.scope-opt-label { color: var(--text); font-weight: 500; }
.scope-opt-note { color: var(--faint); font-size: .86rem; line-height: 1.45; }
.scope-opt:focus-within { border-color: var(--baby); }
.scope-opt input:focus-visible { outline: 2px solid var(--baby); outline-offset: 2px; }

.scope-summary { display: block; border: 1px solid var(--glass-brd); border-radius: var(--r-md, 12px); padding: var(--s-4); background: linear-gradient(180deg, rgba(47,167,255,.07), rgba(47,167,255,0)); }
.scope-summary[hidden] { display: none; }
.scope-factors { display: grid; gap: .55rem; margin: var(--s-2) 0 var(--s-4); padding-left: 1.1rem; }
.scope-factors li { color: var(--text); line-height: 1.55; }
.scope-note { color: var(--faint); font-size: .84rem; margin-top: var(--s-2); }

@media (min-width: 900px) {
  .scope-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope-q { padding: var(--s-4); }
}

/* ============================================================
   Microsoft 365 Risk Check (/risk-check)
   ============================================================
   The page is a short conversion path, so the visual system stays open and
   typographic. Cards are reserved for the four actual concern choices and
   the form, rather than wrapping every section in another container.
   ============================================================ */
.risk-proof {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.risk-proof li {
  display: grid;
  gap: .2rem;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.risk-proof strong {
  color: var(--heading);
  font-size: 1.02rem;
}
.risk-proof span {
  color: var(--muted);
  font-size: .9rem;
}

.risk-options {
  display: grid;
  gap: var(--s-2);
}
.risk-option {
  padding: var(--s-4);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.risk-option-kicker {
  display: inline-block;
  margin-bottom: var(--s-1);
  color: var(--baby);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.risk-option p {
  margin: 0;
  color: var(--muted);
}

.risk-intake {
  scroll-margin-top: 7rem;
}
.risk-intake-grid {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
.risk-intake-copy {
  max-width: 42rem;
}
.risk-intake-copy > p {
  color: var(--muted);
}
.risk-boundary {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.risk-boundary .feature-list {
  margin: var(--s-2) 0;
}
.risk-boundary > p:last-child {
  margin-bottom: 0;
}
.risk-form-card {
  width: 100%;
  max-width: 44rem;
}
.risk-form-card > .muted {
  margin-bottom: var(--s-3);
}
.risk-form-card textarea {
  min-height: 105px;
}
.risk-context {
  margin: 0 0 var(--s-3);
  padding: .8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--glass-2);
  color: var(--text);
  font-size: .9rem;
}
.risk-context[hidden] {
  display: none;
}
.risk-inline-note {
  margin: .45rem 0 0;
  color: var(--faint);
  font-size: .82rem;
  line-height: 1.45;
}
.risk-consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: var(--s-2) 0 var(--s-3);
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.risk-consent input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--baby);
}
.risk-consent span {
  color: var(--text);
  font-size: .9rem;
  line-height: 1.5;
}
.risk-consent:focus-within {
  border-color: var(--baby);
}
.risk-consent input:focus-visible {
  outline: 2px solid var(--baby);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .risk-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .risk-proof li { padding: var(--s-2); border-right: 1px solid var(--line); }
  .risk-proof li:last-child { border-right: 0; }
  .risk-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .risk-intake-grid { grid-template-columns: minmax(0, .82fr) minmax(34rem, 1.18fr); }
  .risk-form-card { justify-self: end; }
}