/* Social Shields shared brand stylesheet.
   Served from https://socialshields.org/brand.css — link it from every *.socialshields.org site:
     <link rel="stylesheet" href="https://socialshields.org/brand.css">
   It sets the design tokens, loads the fonts, styles base elements and provides a few small components.
   It does not set a layout; each site keeps its own. See STYLE_GUIDE.md for the rules behind it. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700..800&family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@500;600&display=swap");

:root {
  /* Brand colors: Farmingdale State College green, one bright gold */
  --ss-green: #006f71;           /* hover on green, focus rings */
  --ss-green-dark: #006456;      /* headings, brand name, buttons, footer band */
  --ss-gold: #ffba00;            /* mascot body, footer rule, text selection */
  --ss-gold-dark: #856514;       /* gold as text, where a gold word is needed */
  --ss-green-soft: var(--ss-gold); /* old name for the mascot color; kept so existing sites do not break */

  /* Surfaces and text: neutral, no tint (light theme only, by choice) */
  --ss-bg: #f8f8f8;              /* page */
  --ss-hero-bg: #eeeeee;         /* hero or header band */
  --ss-bg-soft: #e4e4e4;         /* hover fills, selected states */
  --ss-card: #fdfdfd;            /* floating bars, chips */
  --ss-ink: #070707;             /* strongest text */
  --ss-fg: #1b1b1b;              /* body text */
  --ss-muted: #585858;           /* secondary text, labels */
  --ss-line: rgba(7, 7, 7, .1);  /* borders, dividers */

  /* Effects */
  --ss-shadow: 0 1px 1px rgba(7, 7, 7, .05), 0 2px 3px rgba(7, 7, 7, .04), 0 6px 12px rgba(7, 7, 7, .05);
  --ss-radius: 14px;             /* buttons, tiles */
  --ss-radius-lg: 22px;          /* cards, bars */
  --ss-ease: cubic-bezier(.2, .8, .2, 1);

  /* Type */
  --ss-head: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;   /* display */
  --ss-nav: "IBM Plex Serif", Georgia, "Times New Roman", serif;                          /* navigation, short emphasis */
  --ss-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ss-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Layout */
  --ss-measure: 1040px;
  color-scheme: light;
}

/* Base elements */
:root.ss, :root:has(.ss) { overscroll-behavior: none; }   /* no rubber-band past the page edges */
.ss, .ss body, body.ss {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-fg);
  font-family: var(--ss-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ss h1, .ss h2 {
  margin: 0;
  font-family: var(--ss-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ss-green-dark);
}
.ss h1 { font-size: clamp(2.9rem, 6.4vw, 4.75rem); line-height: 1; }
.ss h2 { font-size: 2rem; line-height: 1.1; }
.ss h3 { margin: 0; font: 600 19px/1.35 var(--ss-nav); color: var(--ss-ink); }
.ss p { margin: 0; text-wrap: pretty; }
.ss a { color: inherit; text-decoration: none; }
.ss a:focus-visible, .ss button:focus-visible { outline: 2px solid var(--ss-green); outline-offset: 2px; }
.ss ::selection { background: var(--ss-gold); color: var(--ss-ink); }
.ss code, .ss pre { font-family: var(--ss-mono); font-size: .8125em; font-weight: 500; }

/* Small components */
.ss-wrap { max-width: var(--ss-measure); margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.ss-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ss-muted); }
.ss-lede { font-size: 18px; max-width: 48ch; }
.ss-card { background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: var(--ss-radius-lg); box-shadow: var(--ss-shadow); }
.ss-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer; font: 600 14px var(--ss-body); background: var(--ss-green-dark); color: #fff; transition: transform .2s var(--ss-ease), background .2s; }
.ss-btn:hover { transform: translateY(-2px); background: var(--ss-green); }
.ss-btn:active { transform: none; }
.ss-btn--ghost, .ss-btn--ghost:hover { background: var(--ss-card); color: var(--ss-ink); border: 1px solid var(--ss-line); }
.ss-chip { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; background: var(--ss-card); border: 1px solid var(--ss-line); color: var(--ss-ink); font: 500 13px var(--ss-mono); }

/* Home link: a small shield that takes the visitor back to socialshields.org. Put it at the top-left of every subsite. */
.ss-home, .ss a.ss-home { display: inline-flex; align-items: center; gap: 10px; height: 48px; font-family: var(--ss-head); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; line-height: 1; color: var(--ss-green-dark); }
.ss-home img { width: 32px; height: 32px; }

/* Footer: a band in FSC green with a gold rule on top */
.ss-footer { background: var(--ss-green-dark); border-top: 4px solid var(--ss-gold); color: #fff; text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) { .ss *, .ss-btn { transition: none !important; } }