/* Cipher Defense — site-wide styles
   Tokens pulled from README design_handoff_website/README.md "Design Tokens" */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-700: #ae1800;
  --color-accent-600: #dd2b0f;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --font-heading: 'Archivo', sans-serif;
  --font-body: 'Archivo', sans-serif;
  --radius-md: 0px;
}

* { box-sizing: border-box; }

/* Give anchor-linked sections clearance under the sticky nav so jump links
   (Learn More, footer service links, etc.) don't land underneath it. */
#shadow-ai, #cmmc, #faq,
#shadow-ai-risk, #cmmc-timeline, #public-sector, #mssp-programs, #board-reporting, #mid-market-readiness {
  scroll-margin-top: 78px;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

img { max-width: 100%; display: block; }

a {
  color: var(--color-accent-700);
}
a:hover { color: var(--color-accent); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
}

.hr {
  border: 0;
  border-top: 2px solid var(--color-divider);
}

/* Nav */
.cd-navlink {
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.cd-navlink:hover { color: var(--color-accent); }
.cd-navlink.is-active { color: var(--color-accent-700); }

/* Footer links */
.cd-footer-link {
  display: inline-block;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 0;
  margin: -8px 0;
}
.cd-footer-link:hover { color: var(--color-bg); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-divider);
}
.btn-secondary:hover { border-color: var(--color-text); color: var(--color-text); }
.btn-ghost {
  background: transparent;
  color: var(--color-accent-700);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--color-accent); }
.btn-block { width: 100%; }

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}
.tag-outline {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* Repeated section blocks */
.cd-feature + .cd-feature { border-top: 2px solid var(--color-divider); }
.cd-insight + .cd-insight { border-top: 2px solid var(--color-divider); }
.cd-value + .cd-value { border-top: 2px solid var(--color-divider); }
.cd-item + .cd-item { border-top: 1px solid var(--color-divider); }

/* Threat intel article cards */
.cd-article-card {
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cd-article-title { display: inline-block; color: var(--color-text); text-decoration: none; padding: 6px 0; margin: -6px 0; }
.cd-article-title:hover { color: var(--color-accent); }

/* Contact form */
.cd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd-field label { font-size: 13px; font-weight: 600; }
.cd-input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 2px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-md);
  /* <select> elements don't shrink below the width of their longest option
     by default, even inside a flex column with min-width:0 on the parent —
     that forces the whole form (and its grid ancestors) wider than the
     viewport on narrow phones. width:100% + min-width:0 lets it shrink and
     truncate/wrap instead of pushing the page into horizontal scroll. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cd-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Long selected option text (e.g. "Shadow AI & Governance Audits") was
   getting hard-clipped mid-word with no ellipsis once the select was forced
   to shrink. Truncate cleanly instead. Scoped to <select> only — applying
   white-space:nowrap to .cd-input broadly also hit the textarea, forcing
   "How can we help?" onto a single line instead of wrapping. */
select.cd-input {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Home page "From the threat intel desk" row — title and "Read" text
   turn accent-red together on hover, whether the cursor is over the
   title, the row's padding, or the "Read" text itself. Color lives here
   (not inline) so this hover rule doesn't need !important to win. */
.cd-insight-title { color: var(--color-text); transition: color 0.15s ease; }
.cd-insight-read { color: color-mix(in srgb, var(--color-text) 65%, transparent); transition: color 0.15s ease; }
.cd-insight:hover .cd-insight-title,
.cd-insight:hover .cd-insight-read {
  color: var(--color-accent);
}

/* Required-field validation state. Applied by contact.html's submit
   handler when a required field is empty at submit time — makes the
   miss visible (red border + inline message) instead of relying on
   the browser's easy-to-miss native tooltip. */
.cd-field.cd-invalid .cd-input {
  border-color: var(--color-accent);
}
.cd-field-error {
  display: none;
  font-size: 12px;
  color: var(--color-accent-700);
}
.cd-field.cd-invalid .cd-field-error {
  display: block;
}

/* Mobile nav */
@media (max-width: 860px) {
  [data-cd-nav-links] { display: none !important; }
  [data-cd-nav-burger] { display: flex !important; }

  /* Two-column layouts (hero/graphic splits and the 4-column footer) use a
     fixed-pixel minimum column width that doesn't fit on phone screens,
     which squeezes the text column down to almost nothing and forces
     word-by-word wrapping. Collapse them to a single column on narrow
     viewports instead. */
  [style*="grid-template-columns:minmax(0,1fr) minmax(280px"],
  [style*="grid-template-columns:minmax(0,1.1fr) minmax(280px"],
  [style*="grid-template-columns:minmax(280px,0.85fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(280px,0.8fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(140px,1fr))"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
  [style*="grid-template-columns:repeat(auto-fit, minmax(300px,1fr))"] {
    grid-template-columns: 1fr !important;
  }
  /* Collapsing to a single 1fr track isn't enough on its own — grid items
     default to min-width:auto, so a wide child (a form, a long heading, an
     input) still forces the track past the viewport width. Force every
     direct child of these collapsed grids to allow shrinking. */
  [style*="grid-template-columns:minmax(0,1fr) minmax(280px"] > *,
  [style*="grid-template-columns:minmax(0,1.1fr) minmax(280px"] > *,
  [style*="grid-template-columns:minmax(280px,0.85fr) minmax(0,1fr)"] > *,
  [style*="grid-template-columns:minmax(280px,0.8fr) minmax(0,1fr)"] > *,
  [style*="grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(140px,1fr))"] > *,
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] > *,
  [style*="grid-template-columns:repeat(auto-fit, minmax(300px,1fr))"] > * {
    min-width: 0 !important;
  }
  /* The CMMC section on the Services page explicitly pins its image and
     text to specific columns AND rows; with only one explicit column left,
     an unreset grid-row:1 on both items forces them to share a row, which
     makes the grid silently create a near-zero-width implicit second
     column instead of stacking them (the image collapses to a few px and
     reads as a stray mark next to the "02" label). Reset both, and use
     order so the text block always renders before the image on mobile
     regardless of which one is first in the markup. */
  [style*="grid-column:2"], [style*="grid-column:1"] {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  [style*="grid-column:2"] {
    order: 2 !important;
  }
  [style*="grid-column:1"] {
    order: 1 !important;
  }

  /* Home hero CTA row: three buttons of different visual weight (solid,
     outlined, ghost/text-only) wrapping onto their own lines reads as
     clutter, and the ghost link in particular looks like stray text next
     to two real buttons. Stack them full-width with equal weight instead,
     and give the ghost button a visible border so it reads as tappable.
     !important is needed throughout this block because every element on
     this site carries its layout as an inline style attribute, which
     otherwise beats a plain class rule regardless of source order. */
  .cd-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cd-cta-row .btn {
    justify-content: center !important;
  }
  .cd-cta-row .btn-ghost {
    border-color: var(--color-divider) !important;
  }

  /* Trust strip: give the tag row more breathing room from the sentence
     above it once they stack instead of sitting side by side. */
  .cd-trust-strip {
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* The tag pills wrap via flexbox, which packs each row independently by
     content width — a wider tag in row 1 (e.g. "Mid-Market") shifts row 2's
     starting position out of alignment with row 1 above it. Grid columns
     size per-column instead of per-row, so the two columns line up. */
  .cd-trust-tags {
    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    /* Center the tag block itself within the row instead of leaving it
       flush against the left edge under the sentence above it. */
    margin: 0 auto !important;
  }

  /* Section headers that pair a heading with a "view all" link
     (justify-content:space-between + align-items:flex-end) put the link
     hard against the heading when they wrap to their own line on mobile.
     Give the link its own row with real separation and let it size to its
     content instead of floating at the edge. */
  .cd-section-head {
    align-items: flex-start !important;
  }
  .cd-section-head-cta {
    margin-top: 4px !important;
    /* The link's bounding box is already flush with the heading's left
       edge, but .btn's 22px padding + 2px border push the visible text
       inward, so it visually reads as indented under the heading above
       it. Pull it back by that amount so the text lines up exactly. */
    margin-left: -24px !important;
  }

  /* Company page "What guides the work": a fixed 56–120px number column
     eats up to 43% of a 320px screen for a two-digit label, squeezing the
     heading and paragraph into a cramped ~136px column. Shrink the number
     column to just what "01/02/03" needs and give the rest to the text. */
  [style*="grid-template-columns:minmax(56px,120px) minmax(0,1fr)"] {
    grid-template-columns: 32px minmax(0,1fr) !important;
  }

  /* Services page CTAs ("Request a Shadow AI audit", "Start a readiness
     assessment") are inline-flex buttons that naturally left-align inside
     their block container. Center them on mobile. */
  .cd-service-cta {
    display: flex !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}