@charset "UTF-8";
/*@use 'url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap")' as *;*/
/* =====================
   Hero Section
   ===================== */
#emee_index_hero {
  display: flex;
  width: 100%;
  position: absolute;
  left: 50%;
  right: 50%;
  top: -10px;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 569px;
  padding: 15px 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(267deg, rgba(0, 0, 0, 0) 5.35%, rgba(0, 0, 0, 0.35) 65.29%), url("../images/EMEE_heroImg.jpg") lightgray 50%/cover no-repeat;
  color: var(--color-text-inverse);
  text-align: center;
}

#emee_index_hero * {
  color: var(--color-text-inverse) !important;
  text-align: center !important;
}

#emee_index_hero h2 {
  font-family: var(--header-3-font) !important;
  font-size: 2rem;
  font-weight: 500;
  text-transform: uppercase;
}

#emee_index_hero [data-el=p] {
  max-width: 55rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--display-M-font);
  font-size: var(--display-M-size);
}

/* =====================
   Content Section
   ===================== */
#emee_index_content {
  position: static;
  margin-top: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 75px;
  align-self: stretch;
  box-sizing: border-box;
  height: auto;
}

#emee_index_content h1 {
  font-family: var(--header-1-font);
  font-size: var(--header-1-size);
  font-weight: var(--header-1-weight);
}

#emee_index_content p {
  font-family: var(--body-M-font);
  font-size: var(--body-M-size);
  line-height: var(--body-M-line);
  color: var(--neutral-950);
  max-width: 70ch;
}

/* =====================
   Section 1
   ===================== */
#emee_index_content,
#emee_index_section1,
#emee_index_section2,
#emee_index_section3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  align-self: center;
}

#emee_index_section1 [data-el=div] {
  width: auto !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#emee_index_section1 [data-el=list] {
  margin-bottom: 0;
}

#emee_index_s1header {
  margin-bottom: 0;
}

#emee_index_s1header h4 [data-el=p] {
  text-align: center;
  justify-content: center !important;
}

#emee_index_section1 [data-type=cards] [data-el=p],
#emee_index_section1 [data-type=cards] [data-el=p] {
  text-align: left !important;
  justify-content: flex-start;
  min-height: 4rem;
  margin-bottom: 0.5rem;
}

#emee_index_s1header h4 {
  font-family: var(--primarySerif) !important;
  font-size: var(--header-1-size);
  font-weight: var(--header-1-weight);
  color: var(--color-text);
  text-align: center;
}

#emee_index_section1 [data-el=p] {
  text-align: center;
  max-width: 46.875rem !important;
}

#emee_index_section1 [data-type=cards] {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-evenly;
  align-items: stretch;
}

#emee_index_section1 [data-type=cards] figure {
  max-width: fit-content;
  margin: 0;
  text-align: left;
  width: 300px;
  flex-direction: column;
  align-items: flex-start;
}

#emee_index_section1 figure {
  font-family: var(--header-2-font);
  font-size: var(--header-2-size);
  font-weight: var(--header-2-weight);
  color: var(--color-text);
}

/* Card Images are 300px wide */
/* and maintain aspect ratio */
#emee_index_section1 .card img {
  width: 360px;
  height: auto;
}

#index div[data-el=list][data-rend=simple] {
  font-family: var(--link-M-font);
  font-size: var(--link-M-size);
  font-weight: var(--link-M-weight);
  /*text-transform: var(--link-M-transform);*/
  color: var(--link-color);
  margin-left: 0;
  margin-top: 0;
}

#index div[data-el=list][data-rend=simple] > div[data-el=item] {
  margin: 0 0.725rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  margin-left: 0;
  list-style: none;
  position: relative;
  overflow: hidden;
}

/*body[data-cat-refs*=BornDig] main div[data-el=list]>div[data-el=item]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--teal-200);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

body[data-cat-refs*=BornDig] main div[data-el=list]>div[data-el=item]:hover::before {
  opacity: 0.2;
}*/
/* Section 2 */
#emee_index_section2 {
  width: 100%;
  max-width: 85vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
}

#emee_index_section2 figure {
  max-width: 30rem;
  width: 100%;
  margin: 0;
  height: auto;
  object-fit: cover;
}

#emee_index_s2header h5,
#emee_index_s2header[data-el=p] {
  text-align: left;
  max-width: 40vw;
}

#emee_index_section2 div {
  max-width: 30rem;
}

#emee_index_section2 h5 {
  font-family: var(--header-2-font);
  font-size: var(--header-2-size);
  font-weight: var(--header-2-weight);
  color: var(--color-text);
}

/* Section 3 */
#emee_index_s3header {
  width: 100%;
}

#emee_index_s3header [data-el=p] {
  text-align: left;
  max-width: 46.875rem !important;
}

#emee_index_section3 h4 {
  font-family: var(--header-2-font);
  font-size: var(--header-2-size);
  font-weight: var(--header-2-weight);
  color: var(--color-text);
}

#emee_index_section3 img {
  width: 100%;
  height: 9rem;
  max-height: 9rem;
  object-fit: cover;
  object-position: center;
  align-self: normal;
}

#emee_index_featuredcards {
  width: 100%;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#emee_index_section3 figure {
  width: auto;
  max-width: 15rem;
  display: flex;
  height: auto;
  max-height: 18rem;
  margin: 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  text-align: left;
}

#emee_index_featured1 {
  /* Styles for the featured content section */
  display: flex;
  min-width: 15.5625rem;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 0 0;
}

#emee_index_featured2 {
  /* Styles for the featured content section */
  display: flex;
  min-width: 15.5625rem;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 0 0;
}

#emee_index_featured3 {
  /* Styles for the featured content section */
  display: flex;
  min-width: 15.5625rem;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 0 0;
}

#emee_index_featured4 {
  /* Styles for the featured content section */
  display: flex;
  min-width: 15.5625rem;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 0 0;
}

#emee_index_section3 [data-type=cards] {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 38px;
}

#emee_index_featuredcards [data-el=p] {
  max-height: 5rem !important;
  align-self: stretch;
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  white-space: wrap;
  width: auto;
  display: flex;
}

.wasLink {
  margin-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: right;
}

.wasLink::after {
  padding-left: 0.5rem;
  content: "→";
}

/*
  EMEE Stylesheet
  Fonts: Noto Serif (headings), Open Sans (body)
  Author: [Emma Lam]
  Last updated: 2025-10-07
*/
/* Notes: 
   - This stylesheet is for the Early Modern England Encyclopedia (EMEE)
   - It includes styles for the layout, typography, and color scheme
   - The design is responsive and mobile-friendly
   - Future updates may include additional styles for new features
   ------
*/
/*Things added by pat*/
body[data-cat-refs*=BornDig] h2[data-el=head], body[data-cat-refs*=BornDig] h2 {
  color: var(--paraFontColor);
}

body[data-cat-refs*=BornDig] h3[data-el=head], body[data-cat-refs*=BornDig] h3 {
  color: var(--paraFontColor);
}

body main div[data-el=p] div[data-el=list] {
  font-size: var(--paraFontSize);
}

body main div[data-el=p] div[data-el=list] div[data-el=item] {
  margin-top: 0.25rem;
}

body main div[data-el=listBibl] {
  margin: var(--paraMargin);
}

/*Fonts added by pszpak*/
@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/NotoSerif-VariableFont.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/NotoSerif-Italic-VariableFont.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-VariableFont.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic-VariableFont.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
}
/* --------------------------------------------------------------------------
CSS Variable Declarations
   -------------------------------------------------------------------------- */
:root {
  /* --------------------------------------------------------------------------
   Color Palette
   -------------------------------------------------------------------------- */
  /* Neutral */
  --neutral-50: #ffffff;
  --neutral-100: #efefef;
  --neutral-200: #dcdcdc;
  --neutral-300: #bdbdbd;
  --neutral-400: #989898;
  --neutral-500: #7c7c7c;
  --neutral-600: #656565;
  --neutral-700: #525252;
  --neutral-800: #464646;
  --neutral-900: #3d3d3d;
  --neutral-950: #292929;
  /* Orange */
  --orange-50: #fdf7ef;
  --orange-100: #fbebd9;
  --orange-200: #f5d4b3;
  --orange-300: #eeb683;
  --orange-400: #e78f50;
  --orange-500: #e1712e;
  --orange-600: #d25924;
  --orange-700: #af441f;
  --orange-800: #923a22;
  --orange-900: #71301d;
  /* Yellow */
  --yellow-50: #fffbeb;
  --yellow-100: #fff5c6;
  --yellow-200: #ffe988;
  --yellow-300: #ffd949;
  --yellow-400: #ffc51f;
  --yellow-500: #faa406;
  --yellow-600: #de7b01;
  --yellow-700: #b85605;
  --yellow-800: #95420b;
  --yellow-900: #7a360d;
  /* Teal */
  --teal-50: #f5f8f8;
  --teal-100: #ddeae9;
  --teal-200: #bad5d4;
  --teal-300: #90b8b8;
  --teal-400: #689899;
  --teal-500: #4e7d7e;
  --teal-600: #3a5d5f;
  --teal-700: #344f51;
  --teal-800: #2c4243;
  --teal-900: #283839;
  /* Semantic Aliases */
  --color-surface: var(--neutral-50);
  --color-surface-secondary: var(--neutral-100);
  --color-text: var(--neutral-950);
  --color-text-secondary: var(--neutral-700);
  --color-text-inverse: var(--neutral-50);
  --color-primary: var(--orange-800);
  --color-primary-light: var(--orange-600);
  --color-primary-dark: var(--orange-900);
  --color-secondary: var(--teal-600);
  --color-secondary-light: var(--teal-400);
  --color-secondary-dark: var(--teal-700);
  --color-tertiary: var(--yellow-900);
  --color-tertiary-light: var(--yellow-700);
  --color-tertiary-dark: var(--yellow-800);
  --color-neutral: var(--neutral-500);
  --color-muted: var(--neutral-300);
  --color-footer-bg: var(--orange-800);
  --topnav-searchfield-button-bg-color-active: var(--color-primary) !important;
  /* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
  --primarySans: "Open Sans", sans-serif;
  --primarySerif: "Noto Serif", serif;
  --font-family-heading: var(--primarySerif);
  --font-family-body: var(--primarySans);
  --highlightColor: var(--orange-700) !important;
  --highlightColorNotActive: var(--orange-200);
  --highlightColorActive: var(--orange-800);
  /* Font Weights *
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* Font Sizes */
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  /* Colors */
  --color-accent: var(--color-secondary);
  --color-dark: var(--color-primary-dark);
  --color-light: var(--color-primary-light);
  /* Line heights and spacing */
  --line-height-base: 1.6;
  --line-height-heading: 1.2;
  --spacing-unit: 1rem;
  /* Borders and radii */
  --border-radius: 0.5rem;
  --border-color: var(--neutral-100);
  /* Highlight (e.g., for search or hovers) */
  --highlightColor: var(--color-accent);
  /* Body (Small( */
  --body-S-font: var(--primarySans);
  --body-S-size: 0.725rem;
  /* ~12px */
  --body-S-line: 135.714%;
  /* Body (Medium) */
  --body-M-font: var(--primarySans);
  --body-M-size: 14px;
  --body-M-line: 135.714%;
  /* Link (Medium) */
  --link-M-font: var(--primarySans);
  --link-M-size: 0.825rem;
  /* ~14px */
  --link-M-weight: 600;
  --link-M-transform: capitalize;
  --link-M-hover-color: var(--orange-700);
  /* Display (Medium) */
  --display-M-font: var(--primarySerif);
  --display-M-size: 1.615rem;
  /* ~26px */
  --display-M-style: normal;
  --display-M-weight: 400;
  --display-M-lineheight: normal;
  --display-M-spacing: -0.52px;
  /* Header (h1) */
  --header-1-font: var(--primarySerif);
  --header-1-size: 2.25rem;
  /* ~36px */
  --header-1-weight: 700;
  /* Header (h2) */
  --header-2-font: var(--primarySerif);
  --header-2-size: 1.5rem;
  /* ~24px */
  --header-2-weight: 700;
  /* Header (h3) */
  --header-3-font: var(--primarySans);
  --header-3-size: 23px;
  --header-3-weight: 400;
  /*--header-3-transform: capitalize;*/
  /* Header (h4) */
  --header-4-font: var(--primarySans);
  --header-4-size: 1rem;
  /* ~16px */
  --header-4-weight: 600;
  /*--header-4-transform: capitalize;*/
  --header-4-color: var(--color-neutral);
  /*These variables are primarily the same as the Lemdo-default however, custom variables have been inserted to replace.*/
  --topnav-bg-color: var(--neutral-50);
  --topBarHeight: 64px;
  --topnav-border-color: var(--neutral-200);
  --topnav-bg-color-desktop: var(--neutral-50);
  --topnav-closed-bg-color-mobile: rgba(45, 45, 45, 0.98);
  --topnav-open-bg-color-mobile: rgba(45, 45, 45, 0.98);
  --topnav-offset: 64px;
  --mobile-toggler-color: var(--neutral-600);
  --topnav-searchfield-weight: 400;
  --topnav-searchfield-button-bg-color: var(--neutral-200);
  --topnav-searchfield-button-bg-color-active: var(--highlightColor);
  --topnav-searchfield-button-weight: 500;
  --topnav-searchfield-button-hover-color: var(--neutral-50);
  --topnav-searchfield-button-font-color: var(--neutral-900);
  --clicky-font-family: var(--primarySans);
  --clicky-font-size: 1.138rem;
  --clicky-dropdown-border-color: var(--neutral-200);
  --clicky-dropdown-font-size: 1rem;
  --clicky-font-weight: 400;
  --clicky-font-style: normal;
  --clicky-color-inactive-desktop: var(--neutral-600);
  --clicky-color-active-desktop: var(--neutral-50);
  --clicky-color-inactive-mobile: #fff;
  --clicky-color-active-mobile: #fff;
  --clicky-button-bg-inactive: transparent;
  --clicky-text-decoration: none;
  --clicky-dropdown-inactive-desktop: var(--neutral-600);
  --clicky-dropdown-active-desktop: var(--neutral-50);
  --clicky-dropdown-active-bg: var(--highlightColor);
  --clicky-svg-inactive-desktop: var(--highlightColor);
  --clicky-svg-inactive-mobile: #fff;
  --ss-button-bg-color: var(--neutral-200);
  --ss-button-bg-color-active: var(--highlightColor);
  --ss-button-color: var(--neutral-900);
  --ss-button-color-active: var(--neutral-50);
  --ss-legend-font: var(--primarySans);
  --ss-legend-bg-color: var(--neutral-200);
  --lefNav-width: 225px;
  --leftNav-bg-color: var(--neutral-50);
  --leftNav-tabarea-bg-color: var(--neutral-100);
  --leftNav-tab-heading-color: var(--neutral-900);
  --leftNav-tab-heading-size: 1.138rem;
  --leftNav-tab-heading-font: var(--primarySans);
  --leftNav-tab-color: var(--neutral-600);
  --leftNav-tab-font: var(--primarySans);
  --leftNav-tab-weight: 600;
  --leftNav-tab-subheading-weight: 600;
  --leftNav-tab-subheading-size: 1.25rem;
  --leftNav-tab-subheading-color: var(--neutral-900);
  --leftNav-tab-body-size: 1rem;
  --leftNav-tab-body-weight: 400;
  --leftNav-tab-body-color: var(--neutral-900);
  --leftNav-tab-body-font: var(--primarySans);
  --leftNav-button-bg-color: var(--highlightColor);
  --leftNav-button-color: var(--neutral-50);
  --leftNav-border-color: var(--neutral-200);
  --popup-border-color: var(--neutral-200);
  --popup-bg-color: var(--neutral-50);
  --popupCloserHeight: 35px;
  --popup-closer-bg-color: var(--neutral-200);
  --noteHeaderFont: var(--primarySerif);
  --noteHeaderSize: 1.296rem;
  --noteHeaderMargin: 0 0 0 0;
  --noteHeaderColor: var(--neutral-900);
  --noteHeaderWeight: 600;
  --noteFont: var(--primarySerif);
  --noteSize: 1.138rem;
  --smallNoteSize: 0.938rem;
  --noteSize: 1.138rem;
  --noteColor: var(--neutral-900);
  --noteBqSize: 1.067rem;
  --noteBqMargin: 0.75rem 0 0.75rem 2rem;
  --noteBibl: 0.878rem;
  --noteH2size: 1.476rem;
  --noteH3size: var(--header-3-size);
  --noteH3margin: 0 0 0.25rem 0;
  --noteParaSmall: 0.938rem;
  --notePadding: 0 0 0 0.25rem;
  --glossFontSize: 1.138rem;
  --glossMargin: 0 0 0.75rem 0;
  --glossPadding: 0 0 0 0.25rem;
  --longCaptionFontSize: 0.937rem;
  --personMargin: 0.25rem 0.25rem 0.25rem 0;
  --personHeaderFont: var(--primarySerif);
  --personHeaderSize: 1rem;
  --personHeaderColor: var(--neutral-900);
  --personHeaderWeight: 400;
  --personHeaderMargin: 0 0 0 1rem;
  --bioMargin: 0.25rem;
  --bioHeaderFont: var(--primarySerif);
  --bioHeaderSize: 1.138rem;
  --bioHeaderColor: var(--neutral-900);
  --bioHeaderWeight: 700;
  --bioHeaderMargin: 0 0 0 0;
  --disambigHeaderFont: var(--primarySerif);
  --disambigHeaderWeight: 600;
  --disambigHeaderColor: var(--neutral-900);
  --disambigHeaderSize: 1.296rem;
  --disambigParaFont: var(--primarySerif);
  --disambigParaWeight: 400;
  --disambigParaSize: 1.138rem;
  --disambigParaColor: var(--neutral-900);
  --mainBgColor: var(--neutral-50);
  --offPageBgColor: var(--neutral-100);
  --annTextDecoration: underline;
  --annTextDecorationColor: var(--highlightColorNotActive);
  --annTextDecorationThickness: 3px;
  --annTextDecorationStyle: solid;
  --annSkipInk: none;
  --annTextOffset: from-font;
  --chainColor: var(--neutral-600);
  --chainColorActive: var(--neutral-50);
  --chainBg: transparent;
  --chainBgActive: var(--highlightColor);
  --link-color: var(--neutral-800);
  --link-hover-color: var(--highlightColor);
  --link-text-decoration-color: rgba(34, 34, 34, 0.3);
  --link-hover-text-decoration-color: var(--highlightColor);
  --appMarkerBgColor: var(--highlightColorNotActive);
  --appMarkerBgColorActive: var(--highlightColorActive);
  --codeFont: monospace;
  --codeColor: var(--neutral-950);
  --codeBgColor: var(--neutral-100);
  --codeFontSize: 1.067rem;
  --codePadding: 0.25rem;
  --identFontStyle: 1.067rem;
  --light: 400;
  --bodyText: var(--neutral-900);
  --figCaptionTextSize: 0.878rem;
  --figcaptionTextColor: var(--neutral-600);
  --figureBgColor: var(--neutral-100);
  --figureFloatWidth: 55%;
  --headingFontColor: var(--neutral-600);
  --h1Size: 3.213rem;
  --pageTitleSize: 2.645rem;
  --pageTitleSizeMobile: 1.793rem;
  --pageTitleSizeSans: 2.25rem;
  --h1LineHeight: 1.15;
  --pageTitleLineHeight: 1.15;
  --h1MarginBottom: 2rem;
  --pageTitleMarginBottom: 0.5rem;
  --h1Weight: 400;
  --pageTitleWeight: 400;
  --h2Size: 1.25rem;
  --h2MarginTitle: 0 0 1.5rem 0;
  --h2Margin: 0 0 0.5rem 0;
  --h2LineHeight: 1.15;
  --h2Weight: 500;
  --h3Size: 1.575rem;
  --h3Weight: 500;
  --h3Margin: 0 0 0.25rem 0;
  --h4Size: 1.476rem;
  --h4Weight: 500;
  --h4Margin: 0 0 0 0;
  --h5Size: 1.383rem;
  --h5Weight: 500;
  --h5Margin: 0 0 0 0;
  --stageMargin: 0.75rem 0 0.75rem 0;
  --paraMargin: 0 0 1rem 0;
  --listMargin: 0 0 0.25rem 0;
  --paraLineHeight: 1.5;
  --paraFontSize: 0.875rem;
  --paraFontSizeSans: 0.875rem;
  --paraFontWeightSans: 400;
  --paraFontColor: var(--neutral-900);
  --orphanedLineMargin: 0 0 0 2em;
  --tableFontSizeHeader: 1.067rem;
  --tableFontSize: 1.067rem;
  --tableFontSizePopup: 0.878rem;
  --tableFontWeightPopup: 400;
  --tocTwoColTableCellMin: 20vh;
  --nameValTableFirstColWidth: 15em;
  --tableMargin: 0 0 1.5rem 0;
  --table-border-color: #ebebeb;
  --headingAppendixSize: 2.041rem;
  --headingAppendixColor: #222222;
  --headingAppendixMargin: 0 0 0.75rem 0;
  --appendixSize: 0.6rem;
  --annotationMargin: 0 0 1.5rem 0;
  --listIndent: 0.75rem;
  --blockquoteFontSize: 0.875rem;
  --blockquoteMargin: 0 0 1.5rem 2rem;
  --blockquoteFooterFontSize: 1.15rem;
  --blockquoteParaMargin: 0.25rem 0.25rem 0.25rem 3rem;
  --blockquoteMaxWidth: 34rem;
  --videoWidth: 100%;
  --asspLinkMargin: 8rem;
  --assp-link-font-size: 0.75rem;
  --assp-link-font-size-mobile: 0.937rem;
  --collation-underline-color: #d6b5df;
  --modernFontSize: 0.875rem;
  --lineHeightPrimarySourceModern: 1.5;
  --lineHeightBornDig: 1.5;
  --pageTitleSize: 2.645rem;
  --pageTitleSizeMobile: 1.793rem;
  --h2primary: 1.25rem;
  --h2primaryMobile: 1.383rem;
  --stageFontSize: 1.215rem;
  --stageFontSizeMobile: 1.067rem;
  --paraFontSizePrimary: 1.215rem;
  --paraFontSizePrimaryMobile: 1.067rem;
  /*BornDigital Fonts*/
  --pageTitleSizeBornDig: 2.178rem;
  --pageTitleSizeBornDigMobile: 1.793rem;
  --h2SizeBornDig: 1.388rem;
  --h2SizeBornDigMobile: 1.215rem;
  --h3SizeBornDig: 1.138rem;
  --h3SizeBornDigMobile: 1.067rem;
  --paraFontSizeBornDig: .875rem;
  --paraFontSizeBornDigMobile: 1rem;
  --listIndentBornDig: 1.25rem;
  /*Footer*/
  --footer-bg-color: var(--orange-800);
  --footer-font-family: var(--primarySans);
  --footer-font-color: var(--neutral-50);
}

/* --------------------------------------------------------------------------
   GLOBAL STYLES
   -------------------------------------------------------------------------- */
main {
  max-width: none;
}

main div[data-el=p] {
  font-family: var(--primarySans);
  width: 100%;
}

/* Body */
body {
  margin: 0;
  padding: 0;
}

[data-el=div] {
  width: 100%;
}

/* Headings */
/*   h1,
  h2 {
    margin: 0;
    padding: 0;
    font-family: var(--primarySerif) !important;
    font-weight: 900 !important;
    color: var(--color-text);
  }

  h3,
  h4 {
    margin: 0;
    padding: 0;
    font-family: var(--primarySans);
    font-weight: 700;
    color: var(--color-text);
  } */
/* article h2 {
    font-family: var(--header-2-font);
    font-size: var(--h2SizeBornDig);
    font-weight: var(--header-2-weight);
    color: var(--header-2-color);
    letter-spacing: 0;
  } */
@media only screen and (min-width: 768px) {
  body[data-cat-refs*=BornDig] article > h2:first-of-type {
    font-size: var(--pageTitleSizeBornDig) !important;
    margin-top: 0;
  }
}
body[data-cat-refs*=BornDig] article > h2:first-of-type {
  font-size: var(--pageTitleSizeBornDig) !important;
  margin-top: 0;
}

/* Paragraphs */
p {
  margin: 0;
  padding: 0;
  font-family: var(--body-M-font);
  font-size: var(--body-M-size);
  line-height: var(--body-M-line);
}

/* Links */
a {
  font-family: var(--link-M-font);
  font-size: var(--link-M-size);
  /* Removed by Janelle; the bold links are distracting */
  /*font-weight: var(--link-M-weight);*/
  /*Removed by pat, there should be no reason to capitalize in the scss*/
  /* text-transform: var(--link-M-transform); */
  text-decoration: none;
}

a {
  position: relative;
  color: var(--link-M-color);
  /* base color */
  text-decoration: none;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  /* underline thickness */
  background-color: var(--link-M-hover-color);
  opacity: 0;
  transform: translateY(-4px);
  /* start slightly above */
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
}

html body[data-cat-refs*=BornDig] main a:link {
  color: var(--link-color);
  text-decoration-color: var(--link-text-decoration-color);
}

body[data-cat-refs*=BornDig] main a:hover {
  color: var(--link-hover-color);
  text-decoration-color: var(--link-hover-text-decoration-color);
}

/* Lists */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  font-family: var(--body-M-font);
  font-size: var(--body-M-size);
  line-height: var(--body-M-line);
  color: var(--color-text);
}

li,
[data-el=item] {
  width: auto;
}

li a {
  position: relative;
  font-weight: var(--link-M-weight);
}

li a:hover {
  color: var(--link-M-hover-color);
  text-decoration-color: var(--link-M-hover-color);
}

li a:hover::after,
[data-el=item]:hover::after {
  opacity: 1;
  transform: translateY(2px);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

th,
td {
  border: 1px solid var(--neutral-300);
  padding: 0.5rem 1rem;
  text-align: left;
}

th {
  background: var(--neutral-100);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
  Layout Containers
   -------------------------------------------------------------------------- */
/* Page Wrapper */
#pageWrapper {
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  width: 100%;
  background-color: var(--mainBgColor);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/*topBarWrapper*/
#banner img {
  height: 45px;
  width: auto;
  min-width: 150px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
  Navigation Bar
   -------------------------------------------------------------------------- */
#site-navigation {
  min-width: 550px;
  padding: 0 3rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
}

.navdropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.navdropdown span {
  min-height: 20px;
  min-width: 20px;
}

.nav-overlay {
  display: none;
}

.nav-list-btn {
  display: none;
}

/* Dropdown menu (hidden by default) */
.navdropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 180px;
  background: var(--neutral-50);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 0 0 4px 4px;
  z-index: 1100;
  padding: 0;
}

/* Show dropdown on hover */
.navdropdown:hover .dropdown-menu,
.navdropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 0.5em 1.25em;
  color: var(--link-M-color);
  font-family: var(--link-M-font);
  font-size: var(--link-M-size);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}

.dropdown-menu a:hover {
  background: var(--neutral-100);
  color: var(--color-primary);
}

span.lineContainer {
  width: 1.5rem !important;
  margin-right: 0.5rem;
}

#topBar button.topNavMobile {
  padding: 0 !important;
}

div#topBar:focus-within > header {
  display: flex;
}

@media only screen and (max-width: 1380px) {
  nav#site-navigation {
    padding: 0 2rem;
    gap: 12px;
  }
}
@media only screen and (max-width: 1024px) {
  #topBar {
    justify-content: center;
    padding: 15px 45px !important;
  }
  form#searchForm {
    width: inherit;
  }
  span.inputWrapper {
    display: flex;
    justify-content: space-between;
  }
  #searchForm {
    max-width: fit-content;
  }
  input#q {
    max-width: 10vw;
    min-width: 10vw;
    padding: 0 4px !important;
  }
  input#q:focus {
    width: 10vw;
  }
}
/* This is just to overwrite lemdo default*/
@media only screen and (min-width: 1000px) {
  input#submitSearch {
    margin-right: 0 !important;
  }
}
@media only screen and (max-width: 578px) {
  /* Mobile Button*/
  .topNavMobile mobile-nav-toggler {
    display: flex;
  }
  #site-navigation {
    display: none;
    min-width: 300px;
  }
  form#searchForm {
    border: none;
    width: fit-content;
  }
  input#q {
    display: none;
  }
  input#q:focus {
    width: fit-content !important;
    max-width: 10vw;
  }
  /* Ensure the site logo is always visible, even when input is focused */
  input#submitSearch {
    height: 2rem;
    border-radius: 0.5rem;
  }
  #submitSearch img {
    height: 36px !important;
    width: 36px !important;
    max-width: none;
  }
}
@media only screen and (max-width: 360px) {
  #topBar {
    width: 100vw;
    justify-content: space-between;
    padding: 0 !important;
    gap: 15px;
  }
  #site-navigation [data-state=closed] {
    display: none;
    min-width: 300px;
  }
  #submitSearch img {
    height: 36px !important;
    width: 36px !important;
    max-width: none;
    padding: 0;
  }
  #searchForm {
    display: none;
  }
}
/* --------------------------------------------------------------------------
  Search Field & Form
   -------------------------------------------------------------------------- */
#searchForm {
  margin-left: 0 !important;
  border: 1px solid var(--neutral-300);
  border-radius: 14px;
}

.inputWrapper {
  padding: 0 0.5em !important;
  border: none;
}

span.inputWrapper::after {
  display: none;
}

input#q {
  border: none;
  width: 10vw;
  margin: 0;
  background: none;
}

input#q:focus {
  outline: none;
  border: none;
}

input#submitSearch {
  border-radius: 14px;
}

@media only screen and (min-width: 768px) {
  input#q:focus {
    width: 10vw;
  }
}
/* --------------------------------------------------------------------------
  Sidebar Navigation
   -------------------------------------------------------------------------- */
#asideMain {
  position: fixed;
  padding: 1em;
  width: 18em;
  height: 30vh;
  min-height: 300px;
  border: 1px solid var(--leftNav-border-color) !important;
  border-radius: 10px 0 10px 10px;
}

#asideMain[data-state=closed] {
  transform: translate3d(-288px, 0, 0);
}

#leftNavButton {
  background-color: var(--color-primary) !important;
  height: 1.5em !important;
  width: 1.5em !important;
  font-size: 21px !important;
  right: -32px !important;
}

#leftNavButton.leftNavToggler.closed::after {
  display: inline-block;
  transform: translateX(-0.15px);
}

div#leftNavButton::after {
  content: url(../images/EMEE_asideInformation.svg) !important;
  height: 18px !important;
  width: 18px !important;
}

nav#tabNavContainer {
  background-color: white !important;
  border-bottom: 1px solid var(--border-color);
}

li.tabNavItem:hover::after,
li.tabNavItem:hover::before {
  background-color: var(--color-primary);
}

/* Mobile Menu */
@media only screen and (max-width: 768px) {
  nav#site-navigation[data-state=closed] {
    display: none !important;
  }
  /* nav#site-navigation[data-state="open"] {
    display: fixed !important;
    width: 100% !important;
    background: rgba(71, 71, 71, 0.98);
    position: fixed;
    top: var(--topBarHeight);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
  } */
  nav#site-navigation[data-state=open] .navdropdown {
    width: auto;
    text-align: center;
    margin: 0 auto;
  }
  /* nav#site-navigation[data-state="open"] .dropdown-menu {
    display: none;
  } */
  nav#site-navigation[data-state=open] a {
    color: var(--color-text-inverse);
    font-size: 1rem;
  }
  nav#site-navigation[data-state=open] span {
    display: none;
  }
}
/* --------------------------------------------------------------------------
  Main Content Area Styling
   -------------------------------------------------------------------------- */
#mainContainer[data-state=open],
#mainContainer[data-state=closed] {
  margin-top: var(--topBarHeight);
  transform: none !important;
  animation: none !important;
}

main#bornDigitalArticle div[data-el=lg],
main#bornDigitalArticle div[data-el=p] {
  width: 100%;
  max-width: none;
}

[data-el=body] {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}

div#mainContainer {
  max-width: none;
  margin: auto;
  padding: 0;
  display: flex;
  /*justify-content: center;*/
  align-content: center;
  min-height: 50vh;
}

#mainText {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}

bornDigitalArticle > article h2 {
  padding: 0 12vw;
}

article {
  width: 100%;
}

article:has(> div[data-el=text]) {
  padding: 0 15vw;
}

article div[data-el=list] {
  padding: 0;
}

@media only screen and (max-width: 1024px) {
  div#mainContainer {
    width: 100vw;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #documentWrapper {
    padding: 0 !important;
    width: 100vw;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/* --------------------------------------------------------------------------
 Popup and Tooltip Content
   -------------------------------------------------------------------------- */
#popup_container {
  left: auto;
}

.popup_closer {
  color: var(--color-primary);
}

.popup_closer:hover {
  background-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
Figure and Image Layout
-------------------------------------------------------------------------- */
figcaption {
  font-size: var(--figCaptionTextSize);
  color: var(--color-text-secondary);
  margin: auto;
  max-width: 46.875rem;
}

figure {
  width: 100%;
  margin: auto;
  justify-content: center;
}

/* --------------------------------------------------------------------------
 Static Search Support
   -------------------------------------------------------------------------- */
/*--------------------------------------------------------------------------
  topBar
  -------------------------------------------------------------------------- */
#topBar {
  margin: 0;
  width: 100%;
  max-width: none !important;
  height: var(--topBarHeight);
  padding: 0 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  top: 0;
}

/* --------------------------------------------------------------------------
   Header and Navigation
   -------------------------------------------------------------------------- */
footer {
  height: fit-content;
  background: var(--color-footer-bg);
  color: var(--color-bg);
  font-family: var(--body-M-font);
  padding: 15px 120px;
  text-align: left;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#footer-logo {
  width: 350px;
  height: auto;
  margin-bottom: 1rem;
}

.footerLinks ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5em;
  width: auto;
}

footer li a:hover {
  color: var(--color-text-inverse) !important;
  font-weight: var(--link-M-weight);
  text-decoration-color: var(--color-text-inverse);
  transition: color 0.3s, text-decoration-color 0.3s;
}

footer a:hover::after {
  background-color: var(--color-text-inverse);
}

.footerLinks a {
  list-style: none;
  font-family: var(--body-M-font);
  font-size: 18px;
  line-height: var(--body-M-line);
  color: var(--color-text-inverse);
  letter-spacing: 0.5px;
  font-weight: 500;
}

.sponsors p {
  font-family: var(--body-M-font);
  font-size: var(--body-S-size);
  line-height: var(--body-M-line);
  color: var(--color-text-inverse);
  font-weight: 600;
  text-align: center;
  margin: 0;
  padding: 0;
}

.sponsors ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: auto;
}

.footerBottomContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  border-top: var(--color-surface) 0.5px solid;
  padding-top: 1em;
}

.footerCompliance {
  display: flex;
  color: var(--color-text-inverse);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  padding-top: 1em;
}
.footerCompliance a.endingsE {
  font-size: 200%;
  letter-spacing: -2pt;
}

.footerTimestamp {
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  border-top: var(--color-surface) 0.5px solid;
  padding-top: 1em;
}
.footerTimestamp ul li {
  color: var(--color-text-inverse);
}

.footerTOSlinks ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.footerTOSlinks a {
  font-family: var(--body-M-font);
  font-size: var(--body-M-size);
  line-height: var(--body-M-line);
  color: var(--color-text-inverse);
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
  padding: 0;
}

.footerCopyright {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.footerCopyrightText {
  text-align: center;
  color: var(--color-text-inverse);
}

@media only screen and (max-width: 768px) {
  footer {
    width: 100vw;
    padding: 15px 30px;
  }
  .footerLinks ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  .footerLinks a {
    font-size: 16px;
  }
  .sponsors ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .footerBottomContent {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .footerTOSlinks ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .footerCopyright {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .clicky-menu ul[aria-hidden=false] {
    border: none;
    box-shadow: 0 4px 6px -1px rgba(10, 13, 18, 0.1), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
  }
  .clicky-menu ul[aria-hidden=false] li a {
    padding: 0.25rem 0.5rem;
  }
}
@media (min-width >= 768px) {
  .clicky-menu > li > button {
    height: 100%;
  }
}
@media only screen and (min-width: 1000px) {
  .clicky-menu button svg.arrow {
    fill: var(--clicky-svg-inactive-desktop);
  }
}
@media (max-width: 1000px) {
  .clicky-menu > li {
    margin-bottom: 0.75rem;
    color: green !important;
  }
}
@media (width <= 1000px) {
  .clicky-menu ul[aria-hidden=false] {
    padding: 0 0 0 1rem;
    margin-left: 1rem;
    margin-top: 0.5rem;
    border-left: 1px solid #fff;
  }
  .clicky-menu ul[aria-hidden=false] li > a {
    font-size: 1rem;
    padding: 0.25rem 0 0.25rem 0;
  }
}


/*# sourceMappingURL=emee.css.map */
