/* ==========================================================================
   Socioanalysis – Journal of Group Relations Australia
   Style sheet: typography and colours only (no layout rules)

   Colours from the journal cover: --sa-teal, --sa-teal-panel, --sa-white
   Colours added for the web (not on the cover): --sa-teal-deep, --sa-ink,
   --sa-mist, --sa-muted, --sa-teal-tint
   Contrast ratios are listed in the brand style guide.
   ========================================================================== */

/* Optional free fallback font (Libre Franklin, SIL Open Font Licence).
   Remove the comment markers to load it from Google Fonts. Without it,
   visitors see Franklin Gothic if installed, otherwise Arial. */
/* @import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&display=swap"); */

/* Franklin Gothic is a licensed typeface. These rules use it only where it is
   already installed on the visitor's device, and never download it. Declaring
   the weights here stops browsers from faking bold on Franklin Gothic Demi. */
@font-face{
  font-family:"Socioanalysis Heading";
  src:local("Franklin Gothic Demi"),local("FranklinGothic-Demi"),local("Libre Franklin SemiBold"),local("LibreFranklin-SemiBold");
  font-weight:600;
}
@font-face{
  font-family:"Socioanalysis Text";
  src:local("Franklin Gothic Book"),local("FranklinGothic-Book"),local("Libre Franklin"),local("LibreFranklin-Regular");
  font-weight:400;
}

:root{
  /* colour: from the cover */
  --sa-teal:#007582;
  --sa-teal-panel:#278C94;
  --sa-white:#FFFFFF;
  /* colour: added for the web */
  --sa-teal-deep:#005A64;
  --sa-ink:#1B2B2D;
  --sa-muted:#52646A;
  --sa-mist:#EEF3F3;
  --sa-teal-tint:#E6F2F3;

  /* type */
  --sa-font-heading:"Socioanalysis Heading","Libre Franklin",Arial,Helvetica,sans-serif;
  --sa-font-text:"Socioanalysis Text","Libre Franklin",Arial,Helvetica,sans-serif;
  --sa-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- base text ---------- */
html{font-size:100%}
body{
  font-family:var(--sa-font-text);
  font-size:1rem;
  font-weight:400;
  line-height:1.6;
  color:var(--sa-ink);
  background-color:var(--sa-white);
  -webkit-font-smoothing:antialiased;
}

/* ---------- headings ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--sa-font-heading);font-weight:600}
h1{font-size:2.5rem;font-size:clamp(2rem,1.4rem + 2.4vw,2.75rem);line-height:1.12;color:var(--sa-teal)}
h2{font-size:1.75rem;font-size:clamp(1.5rem,1.2rem + 1.2vw,1.875rem);line-height:1.2;color:var(--sa-teal)}
h3{font-size:1.4rem;line-height:1.3;color:var(--sa-teal)}
h4{font-size:1.15rem;line-height:1.35;color:var(--sa-teal)}
h5,h6{font-size:1rem;line-height:1.4;color:var(--sa-ink)}

/* ---------- text elements ---------- */
strong,b,th{font-weight:600}
em,i,cite{font-style:italic}
small,figcaption,caption{font-size:.875rem;line-height:1.5;color:var(--sa-muted)}
blockquote{font-style:italic;color:var(--sa-teal-deep)}
code,kbd,samp,pre{font-family:var(--sa-font-mono);font-size:.9em;color:var(--sa-teal-deep);background-color:var(--sa-mist)}
mark{color:var(--sa-ink);background-color:var(--sa-teal-tint)}
th{font-family:var(--sa-font-heading);color:var(--sa-teal);text-align:left}

/* ---------- links ---------- */
a{color:var(--sa-teal);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
a:visited{color:var(--sa-teal-deep)}
a:hover{color:var(--sa-teal-deep);text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--sa-teal-deep);outline-offset:2px}

/* ---------- selection ---------- */
::selection{color:var(--sa-white);background-color:var(--sa-teal)}

/* ---------- optional classes ---------- */
.sa-lead{font-size:1.25rem;line-height:1.5;color:var(--sa-ink)}
.sa-muted{color:var(--sa-muted)}
.sa-text-teal{color:var(--sa-teal)}
.sa-text-deep{color:var(--sa-teal-deep)}

/* Text on the cover teal. Use white for all sizes (contrast 5.4:1). */
.sa-on-teal{color:var(--sa-white);background-color:var(--sa-teal)}
.sa-on-teal h1,.sa-on-teal h2,.sa-on-teal h3,.sa-on-teal h4,.sa-on-teal h5,.sa-on-teal h6{color:var(--sa-white)}
.sa-on-teal .sa-lead{color:var(--sa-white)}
.sa-on-teal small,.sa-on-teal .sa-muted{color:var(--sa-teal-tint)}
.sa-on-teal a,.sa-on-teal a:visited{color:var(--sa-white)}
.sa-on-teal a:hover{color:var(--sa-teal-tint)}
.sa-on-teal a:focus-visible{outline-color:var(--sa-white)}
.sa-on-teal ::selection{color:var(--sa-teal);background-color:var(--sa-white)}

/* Text on the lighter panel teal. Large text only (contrast 4.0:1, which
   meets the standard for text of about 24px or 19px bold and above). */
.sa-on-panel{color:var(--sa-white);background-color:var(--sa-teal-panel)}

/* Light backgrounds */
.sa-bg-mist{background-color:var(--sa-mist)}
.sa-bg-tint{background-color:var(--sa-teal-tint)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}