/* P2R Consortium — Typography & Color System (Montserrat + Calluna)
   Palette from provided swatches; Avenir → Montserrat
   Levels 1–10 match the Word spec (alignment, casing, backgrounds)
*/

/* Google Fonts: Montserrat */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap");

/* Optional: Self-host Calluna if licensed */
@font-face {
  font-family: 'Calluna';
  src: url('fonts/Calluna-Regular-webfont.woff2') format('woff2'),
       url('fonts/Calluna-Regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ===== Design Tokens ===== */
:root{
  /* Brand Colors (exact from your palette) */
  --p2r-charcoal: #393E46; /* dark gray/charcoal */
  --p2r-lilac:    #ADA7C9; /* light purple */
  --p2r-blue:     #0C69A8; /* mid blue */
  --p2r-sky:      #1D8ED2; /* lighter/bright blue */
  --p2r-stone:    #E0E1DD; /* light gray */
  --p2r-cloud:    #FFFFFF; /* white */
  --p2r-ink:      #000000; /* black */

  /* Typography stacks */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: "Calluna", "Merriweather", Georgia, "Times New Roman", serif;

  /* Sizes (px) */
  --fs-40: 40px;
  --fs-29: 29px;
  --fs-24: 24px;
  --fs-22: 22px;
  --fs-19: 19px;
  --fs-16: 16px;
  --fs-13: 13px;
  --fs-11: 11px;

  /* Line-height & rhythm */
  --lh-tight: 1.2;
  --lh-normal: 1.5;

  /* Common spacing */
  --pad-sm: 0.25em 0.6em;
  --pad-md: 0.35em 0.6em;
  --pad-lg: 0.75em 1em;
}

/* ===== Utilities ===== */
.is-right  { text-align: right; }
.is-left   { text-align: left; }
.is-center { text-align: center; }

.on-blue   { background: var(--p2r-blue); color: var(--p2r-cloud); }
.on-sky    { background: var(--p2r-sky);  color: var(--p2r-cloud); }
.on-stone  { background: var(--p2r-stone); }
.on-charcoal-5 { background: rgba(57,62,70,0.05); } /* 5% charcoal tint */

.block-start { display:block; margin: 0.6em 0; }
.sp-1em { margin-block: 1em; }

/* Blue section H2 — Calluna Regular for H2 inside blue audience sections */
section.bg-p2r-blue h2 {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* Navigation bar labels — Calluna Regular */
header a,
header nav a,
header .text-p2r-charcoal,
header .text-p2r-blue,
header .text-gray-700,
header .font-medium,
header .font-semibold {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
}

/* ===== Heading / Body Levels ===== */

/* Level 1 — Montserrat Bold, Title Case, Right, white 40px on charcoal 5% bg */
.level-1{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  color: var(--p2r-cloud);
  text-align: right;
  background: rgba(57,62,70,0.05);
  padding: var(--pad-md);
  margin: 0.8em 0;
}

/* Level 1b — Montserrat Bold, Title Case, Left, black 40px */
.level-1b{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  color: var(--p2r-ink);
  text-align: left;
  margin: 0.8em 0;
}

/* Level 1b White — Same as 1b but with white text for hero sections */
.level-1b-white{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  color: var(--p2r-cloud);
  text-align: left;
  margin: 0.8em 0;
}

/* Hero Classes - V3 Reference Styling */
.heroMain {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #fff;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  margin: 0;
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
}

.heroSubordinate {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
}

/* Hero Partner Classes - black text, no background */
.heroMainPartner {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #000;
  letter-spacing: 0.2px;
  margin: 0;
  margin-top: 100px;
  display: block;
}

.heroSubordinatePartner {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: #000;
  margin: 0;
  display: block;
}

.p2rHeroPartner {
  height: 500px;
}

/* Hero Calendar Classes - Montserrat font */
.heroMainCalendar {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #fff;
  letter-spacing: 0.2px;
  margin: 0;
  display: block;
}

.heroSubordinateCalendar {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  margin: 0;
  display: block;
}

/* Hero Community Classes - right aligned, anchored to bottom */
.heroMainCommunity {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #fff;
  letter-spacing: 0.2px;
  margin: 0;
  margin-bottom: 12px;
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
  text-align: right;
}

.heroSubordinateCommunity {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
  text-align: right;
}

/* Hero Safety Classes - right aligned, anchored to bottom */
.heroMainSafety {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #fff;
  letter-spacing: 0.2px;
  margin: 0;
  margin-bottom: 12px;
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
  text-align: right;
}

.heroSubordinateSafety {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
  text-align: right;
}

/* Hero Researcher Classes - right aligned, anchored to bottom */
.heroMainResearcher {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #fff;
  letter-spacing: 0.2px;
  margin: 0;
  margin-bottom: 12px;
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
  text-align: right;
}

.heroSubordinateResearcher {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  background-color: rgba(57, 62, 70, 0.95);
  padding: 0.75em 1em;
  display: block;
  text-align: right;
}

/* Hero About Classes - black text, no background (like Partners) */
.heroMainAbout {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #000;
  letter-spacing: 0.2px;
  margin: 0;
  margin-top: 100px;
  display: block;
}

.heroSubordinateAbout {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: #000;
  margin: 0;
  display: block;
}

/* Hero Impact Classes - black text, no background (like Partners) */
.heroMainImpact {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: #000;
  letter-spacing: 0.2px;
  margin: 0;
  margin-top: 100px;
  display: block;
}

.heroSubordinateImpact {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  color: #000;
  margin: 0;
  display: block;
}

/* Level 2 — Montserrat Bold, Title Case, Left, white 29px on blue bg */
.level-2{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-29);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-cloud);
  background: var(--p2r-blue);
  /* padding: var(--pad-md); */
  margin: 0.8em 0;
  margin-top: 0px;
}

/* Level 2 Not On Blue — Montserrat Bold, Title Case, Left, blue 29px with blue underline */
.level2NotOnBlue{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-29);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-blue);
  margin: 0.8em 0;
  margin-top: 0.5em;
  padding-bottom: 0.5em;
  position: relative;
  display: inline-block;
}

.level2NotOnBlue::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 3px;
  background: var(--p2r-blue);
}

/* Level 3 — Montserrat, sentence case, Right, white 24px on charcoal 5% bg */
.level-3{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  text-align: right;
  color: var(--p2r-cloud);
  background: rgba(57,62,70,0.05);
  padding: var(--pad-md);
  margin: 0.8em 0;
}

/* Level 3b — Montserrat, sentence case, Left, black 24px */
.level-3b{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-ink);
  margin: 0.8em 0;
}

/* Level 3c — Montserrat, sentence case, Right, white 24px on blue */
.level-3c{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  text-align: right;
  color: var(--p2r-cloud);
  background: var(--p2r-blue);
  padding: var(--pad-md);
  margin: 0.8em 0;
}

/* Level 4 — Calluna, sentence case, Left, white 19px on blue */
.level-4{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-19);
  line-height: var(--lh-normal);
  text-align: left;
  color: var(--p2r-cloud);
  background: var(--p2r-blue);
  padding: 0.3em 0.6em;
  margin: 0.75em 0;
}

/* Level 4b — Calluna, sentence case, Left, charcoal 19px on transparent */
.level-4b{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-19);
  line-height: var(--lh-normal);
  text-align: left;
  color: var(--p2r-charcoal);
  background: transparent; /* pair with white or stone section bg */
  margin: 0.75em 0;
}
.level-4b-white{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-19);
  line-height: var(--lh-normal);
  text-align: left;
  color: var(--p2r-cloud);
  background: transparent; /* pair with white or stone section bg */
  margin: 0.75em 0;
}

/* Level 5 — Montserrat Bold, Title Case, Left, black 22px */
.level-5{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-22);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-ink);
  margin: 0.7em 0;
}

/* Level 5b — Montserrat Bold, Title Case, Left, white 22px on blue */
.level-5b{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-22);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-cloud);
  background: var(--p2r-blue);
  padding: 0.3em 0.6em;
  margin: 0.7em 0;
}

/* Level 5c — Montserrat Bold, Title Case, Left, black 19px */
.level-5c{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-ink);
  margin: 0.6em 0;
}

/* Level 5c White — Montserrat Bold, Title Case, Left, white 19px for tiles */
.level-5c-white{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-cloud);
  margin: 0.6em 0;
}

/* Tile Label — Montserrat Bold, Title Case, Left, white text with 20% black background for tiles */
.tileLabel{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: var(--lh-tight);
  text-align: left;
  color: white;
  background: rgba(0, 0, 0, 0.2);
  margin: 0.6em 0;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

/* Level 6 — Calluna, Title Case, Left, blue 19px with 2" lilac underline (1pt) */
.level-6{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-19);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--p2r-blue);
  position: relative;
  margin: 0.8em 0 1.1em;
}
.level-6::after{
  content:"";
  display:block;
  width:2in;        /* 2-inch underline per spec */
  height:1.33px;    /* ≈1pt */
  background: var(--p2r-lilac);
  margin-top: 0.35em;
}

/* Level 7 — MONTSERRAT UPPERCASE, Left, white 16px on blue (expandable heads) */
.level-7{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-align: left;
  color: var(--p2r-cloud);
  background: var(--p2r-blue);
  padding: var(--pad-sm);
  margin: 0.6em 0;
}

/* Level 8 — Body: Montserrat, Left, black 16px */
.body-8{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  text-align: left;
  color: var(--p2r-ink);
  margin: 0.6em 0;
}

/* Level 8b — Body on blue background (spec says black on blue) */
.body-8b{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  text-align: left;
  color: var(--p2r-ink);        /* Spec: black on blue */
  background: var(--p2r-blue);
  padding: var(--pad-lg);
  border-radius: 4px;
  margin: 0.6em 0;
}
/* Optional accessible variant (white on blue) */
.body-8b.alt{ color: var(--p2r-cloud); }

/* Level 9 — Calluna, Title Case, Center, charcoal 11px (nav headings) */
.level-9{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  text-align: center;
  color: var(--p2r-charcoal);
  margin: 0.4em 0;
}

/* Level 10 — Montserrat, sentence case, Left, black 13px (sub-footer/captions) */
.level-10{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  text-align: left;
  color: var(--p2r-ink);
  opacity: 0.9;
  margin: 0.4em 0;
}

/* ===== Suggested Section Background Helpers ===== */
.bg-white  { background: var(--p2r-cloud); }
.bg-stone  { background: var(--p2r-stone); }
.bg-blue   { background: var(--p2r-blue);  color: var(--p2r-cloud); }
.bg-sky    { background: var(--p2r-sky);   color: var(--p2r-cloud); }
.bg-char-5 { background: rgba(57,62,70,0.05); }

/* ===== Semantic bindings (optional; keeps spacing tidy) ===== */
h1.level-1, h1.level-1b,
h2.level-2,
h3.level-3, h3.level-3b, h3.level-3c,
h4.level-4, h4.level-4b,
h5.level-5, h5.level-5b, h5.level-5c,
h6.level-6 { margin-top: 0.9em; }

/* ===== Global Font Override ===== */
body {
  font-family: var(--font-sans) !important;
}

/* Update existing Bebas references to use Montserrat bold */
.font-bebas {
  font-family: var(--font-sans) !important;
  font-weight: 700;
}

.pansameheight{
  min-height: 100px;
}

/* Override Tailwind's py-16 padding for tighter spacing */
.py-16 {
  padding-top: 0.1rem !important;
  padding-bottom: 10px !important;
}

/* Calendar day header - white text with less padding */
.dayWhite {
  color: var(--p2r-cloud) !important;
  padding: 0.25rem 0.5rem !important;
}

/* Hero section margin */
.p2rHero {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-bottom: 15px !important;
  padding-top: 10px !important;
}

/* Force white text */
.p2rWhiteText {
  color: #ffffff !important;
}

/* Sidebar tile max height */
.sidebarTile {
  max-height: 220px;
}

.sidebarTile div {
  max-height: 220px;
}
.floatbut{
  padding-top: 20px;
}
.noHero{
  padding-top: 0rem !important;
}

/* About FAQ Title - smaller font to match Title of Project 2 */
.aboutFaqTitle {
  font-size: var(--fs-16) !important;
}

/* Tile Label Text - force Calluna font on tile row labels */
.tileLabelText {
  font-family: var(--font-serif) !important;
}