/* ═══════════════════════════════════════════════════
   OCTARINE — brief.css
   The inline "Define the brief" block on case study pages.
   Heading size: --brief-heading in /style.css (shared with the footer).
   Markup: /includes/brief-block.php (used by /includes/brief.php on case
   studies AND by the reveal footer, /includes/footer-brief.php), so the two
   are identical. Script: /assets/js/brief.js
   Change the block here only; never restyle it per page or in the footer CSS.
═══════════════════════════════════════════════════ */

/* Case study wrapper (same box as .cs-wrap, which footer pages do not load) */
.brief-wrap { max-width: 1080px; margin: 0 auto 3.5rem; padding: 0 var(--gutter); box-sizing: border-box; width: 100%; }
.brief-eyebrow { font-family: var(--font-nav); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--section-text, #888); text-align: center; margin: 0 0 1rem; }

.brief-section { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; width: 100%; }
.brief-section-heading { font-family: var(--font-heading); font-size: var(--brief-heading); font-weight: 400; color: var(--section-text-strong); line-height: 1; letter-spacing: -0.02em; margin-top: -1.1rem; }
.brief-section-heading em { font-style: italic; font-weight: 300; }
.brief-input-row { display: flex; align-items: center; gap: 0.75rem; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); border-radius: 999px; padding: 0.6rem 0.6rem 0.6rem 1.75rem; width: 100%; max-width: 620px; }
body[data-theme="dusk"] .brief-input-row { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.brief-i-need { font-family: var(--font-nav); font-size: 0.88rem; font-weight: 400; color: var(--section-text); white-space: nowrap; flex-shrink: 0; }
.brief-selected { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1; min-height: 28px; align-items: center; }
.brief-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-nav); font-size: 0.68rem; font-weight: 500; color: #fff; background: rgba(255,107,2,0.22); border: 1px solid rgba(255,107,2,0.4); border-radius: 999px; padding: 0.2rem 0.55rem; }
.brief-tag-remove { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 0.8rem; padding: 0 0 0 0.1rem; line-height: 1; display: flex; align-items: center; }
.brief-tag-remove:hover { color: #fff; }
.brief-next { font-family: var(--font-nav); font-size: 0.8rem; font-weight: 500; color: var(--section-text); white-space: nowrap; flex-shrink: 0; text-decoration: none; margin-left: auto; padding: 0.55rem 1.25rem; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); transition: color 0.2s, border-color 0.2s; }
body[data-theme="dusk"] .brief-next { border-color: rgba(255,255,255,0.15); }
.brief-next:hover { color: var(--section-text-strong); border-color: var(--section-text-strong); }
.brief-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.5rem; width: 100%; }
.brief-service-btn { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-nav); font-size: 0.78rem; font-weight: 400; color: var(--section-text); background: none; border: none; border-bottom: 1px solid rgba(0,0,0,0.08); cursor: pointer; padding: 0.65rem 0; text-align: left; width: 100%; transition: color 0.2s; }
body[data-theme="dusk"] .brief-service-btn { border-bottom-color: rgba(255,255,255,0.08); }
.brief-service-btn:hover { color: var(--section-text-strong); }
.brief-service-btn.is-selected { color: var(--brand-orange); }
.brief-svc-icon { width: 10px; height: 10px; stroke: var(--brand-orange); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.brief-svc-name { flex: 1; }
.brief-plus { color: var(--section-eyebrow); font-weight: 300; font-size: 1rem; flex-shrink: 0; transition: color 0.2s; }
.brief-service-btn:hover .brief-plus { color: var(--section-text-strong); }
.brief-service-btn.is-selected .brief-plus { color: var(--brand-orange); }
@media (max-width: 700px) {
  .brief-services { grid-template-columns: 1fr 1fr; }
  .brief-input-row { padding-left: 1.25rem; }
}
@media (max-width: 440px) {
  .brief-services { grid-template-columns: 1fr; }
}

/* ═══ In the reveal footer ═══
   Same block, same width. The footer is always dark, so it always uses the
   Night values above, whatever the site theme. Nothing else differs. */
.site-footer .brief-wrap { max-width: calc(1080px - 2 * var(--gutter)); padding: 0; margin: 0 auto; }
.site-footer .brief-section {
  --section-text: rgba(255,255,255,0.7);
  --section-text-strong: rgba(255,255,255,0.95);
  --section-eyebrow: rgba(255,255,255,0.5);
}
.site-footer .brief-input-row { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.site-footer .brief-next { border-color: rgba(255,255,255,0.15); }
.site-footer .brief-service-btn { border-bottom-color: rgba(255,255,255,0.08); }