/* =============================================================================
   sbc-definition-block.css

   What this file does:
   Styles the "Definition" page block: a dictionary entry (the question as a quiet heading, the term
   drawn large with its part of speech, two numbered sentences, optional "See also" links) and the
   plain answer variant for judgement questions, which keeps the same type and rules.

   Context of where it's used in the repo:
   Markup comes from templates/includes/definition_block_macros.html. Linked from
   templates/homepage-2.html; any page that uses the macros links this file. Brand values follow
   SBC-all-services/brand/README.md (Newsreader for the entry, Figtree for labels, one terracotta
   accent: the sense numbers). Tokens are scoped to the block so it works on pages whose :root
   variables are named differently.

   What it calls:
   Nothing. The page loads Newsreader (roman and italic, 400 and 500) and Figtree.

   What calls it:
   A <link rel="stylesheet"> on each page that uses the block.
   ============================================================================= */

.def-entry{
  --def-ink:#222222; --def-soft:#4A463E; --def-muted:#6F6A60; --def-forest:#1F3D33; --def-terracotta:#B86A50;
  --def-white:#FFFFFF; --def-line-strong:#D6D0C2; --def-rule:rgba(31,61,51,.13);
  --def-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --def-sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  max-width:860px; margin:0 auto; color:var(--def-ink);
}

/* The question is the H2 for search engines and AI tools; it sits quietly above the term */
.def-question{margin:0;font:500 1.05rem/1.35 var(--def-sans);color:var(--def-muted);letter-spacing:0}

/* The term and its part of speech are drawn from data attributes, so they are not page text */
.def-term{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:14px 0 0;padding-bottom:22px;border-bottom:1.5px solid var(--def-ink)}
.def-term::before{content:attr(data-term);font:500 var(--def-term-size)/.95 var(--def-serif);letter-spacing:-.025em;color:var(--def-ink)}
.def-term::after{content:attr(data-part-of-speech);font:italic 400 1.5rem/1 var(--def-serif);color:var(--def-muted)}
.def-term.is-short{--def-term-size:clamp(2.6rem, 5vw + 1rem, 5.4rem)}
.def-term.is-medium{--def-term-size:clamp(2.2rem, 3.6vw + 1rem, 4.4rem)}
.def-term.is-long{--def-term-size:clamp(1.9rem, 2.6vw + 1rem, 3.4rem)}

/* Two numbered senses; the numbers are the band's one terracotta accent */
.def-senses{list-style:none;margin:0;padding:0;counter-reset:def-sense}
.def-senses li{counter-increment:def-sense;display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 8px;padding:26px 0;border-bottom:1px solid var(--def-rule)}
.def-senses li::before{content:counter(def-sense) ".";font:italic 500 1.6rem/1.2 var(--def-serif);color:var(--def-terracotta)}
.def-senses p{margin:0;font:400 1.55rem/1.42 var(--def-serif);color:var(--def-ink)}
.def-detail{color:var(--def-soft)}

/* Other names, and what it is not: a dictionary's usage line */
.def-usage{margin:22px 0 0 64px;font:400 1.05rem/1.55 var(--def-sans);color:var(--def-soft);max-width:62ch}
.def-usage-label{font:italic 400 1.15rem/1 var(--def-serif);color:var(--def-muted)}

/* Related pages */
.def-see-also{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 0 64px;font:400 .95rem/1.3 var(--def-sans);color:var(--def-muted)}
.def-see-also a{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border:1px solid var(--def-line-strong);border-radius:999px;background:var(--def-white);color:var(--def-forest);font-weight:600;text-decoration:none;transition:border-color .2s ease,background .2s ease}
.def-see-also a:hover{border-color:var(--def-forest);background:rgba(31,61,51,.06)}
.def-see-also a:focus-visible{outline:2px solid var(--def-terracotta);outline-offset:2px}

/* The plain answer variant: the question takes the term's place, the answer keeps the senses' type */
.def-entry.is-answer .def-question{font:500 clamp(2.1rem, 2.6vw + 1rem, 3.4rem)/1.05 var(--def-serif);letter-spacing:-.015em;color:var(--def-ink);padding-bottom:22px;border-bottom:1.5px solid var(--def-ink);text-wrap:balance}
.def-answer p{margin:0;padding:26px 0;border-bottom:1px solid var(--def-rule);font:400 1.55rem/1.42 var(--def-serif);color:var(--def-ink)}
.def-answer p+p{color:var(--def-soft)}

@media (max-width:560px){
  .def-senses li{grid-template-columns:34px minmax(0,1fr);padding:20px 0}
  .def-senses li::before{font-size:1.3rem}
  .def-senses p,.def-answer p{font-size:1.25rem}
  .def-answer p{padding:20px 0}
  .def-term{gap:4px 12px;padding-bottom:18px}
  .def-term::after{font-size:1.25rem}
  .def-see-also,.def-usage{margin-left:0}
}