/*
  Theme Name: rehmonnya.org V2 Theme
  Author: Janeen Sawatzky & Rob Parrott
  Author URI: 
  Description: Custom theme for rehmonnya.org
  Version: 1.0 
*/


/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/

  A (more) Modern CSS Reset
  https://piccalil.li/blog/a-more-modern-css-reset/

*/

/*
  1. Use a more-intuitive box-sizing model.
*/

*, *::before, *::after {
    box-sizing: border-box;
  }

  /*
    2. Remove default margin
  */

  * {
    margin: 0;
  }

  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  
  /*
    5. Improve media defaults
  */
  
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /*
    6. Remove built-in form typography styles
  */
  
  input, button, textarea, select {
    font: inherit;
  }
  
  /*
    7. Avoid text overflows
  */
  
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /*
    8. Create a root stacking context (React)
  */
  #root, #__next {
    isolation: isolate;
  }

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/* Remove underline for links */

a, a:visited, a:hover {
    text-decoration: none;
}/*===============================
/* VARIABLES
/* ===============================*/

:root {
  --main-grid-min-width-mobile: 360px;
  --main-grid-min-width: 25ch; /* Minimum width for grid items */
  --main-grid-min-width-large: 35ch; /* Minimum width for grid items */

  --main-grid-gap: 16px; /* Gap between grid items */
  --main-grid-gap-large: 24px; /* Gap between grid items */

  --header-min-height: 80px;
  --box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3);
  --box-shadow-light: 0 2px 8px 1px rgba(212, 212, 212, 0.4);
  --box-shadow-soft: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --box-shadow-articles: inset rgba(242, 242, 242, 0.9) 0px 0px 0px 1px;
  --box-shadow-dark-BG:rgba(17, 17, 26, 0.2) 0px 4px 16px 0px inset, rgba(17, 17, 26, 0.08) 0px 8px 32px 0px inset;


  /*---- Typography ----*/
  --fs-root: 16px; /* Base font size */

  /* Font sizes calculated using the golden ratio */
  --fs-xxsmall: calc(var(--fs-small) / 1.33); /* = 12.64px */
  --fs-xsmall: calc(var(--fs-small) / 1.2); /* = 12.64px */
  --fs-small: calc(var(--fs-root) / 1.2); /* ≈ 14.22 px */
  --fs-normal: var(--fs-root); /* 16px */
  --fs-normal-title: 17.5px;
  --fs-medium: calc(var(--fs-root) * 1.2); /* ≈ 21.28 px */
  --fs-large: calc(var(--fs-medium) * 1.2); /* ≈ 20.25px */
  --fs-xlarge: calc(var(--fs-large) * 1.2); /* ≈ 22.78px */
  --fs-xxlarge: calc(var(--fs-xlarge) * 1.2); /* = 25.6275 */

  --font-family-sans: "IBM Plex Sans", sans-serif; /* complete */
  --font-family-sans-con: "Roboto Condensed", sans-serif;
  --font-family-serif: "Roboto Slab", serif;
  --font-family-OpenSans: "Open Sans", sans-serif;

  /*---- Spacing & Margins ----*/

  /* Padding Values (correlating with font sizes) */
  --padding-xxsmall: 0.5em;
  --padding-xsmall: 1em;
  --padding-small: clamp(6px, calc(var(--fs-small) / 2 + 1vw), 14px); /* Slightly increased */
  --padding-normal: clamp(10px, calc(var(--fs-normal) / 2 + 1vw), 18px); /* Slightly increased */
  --padding-medium: clamp(12px, calc(var(--fs-medium) / 2 + 1vw), 20px); /* Slightly increased */
  --padding-large: clamp(22px, calc(var(--fs-large) / 2 + 1vw), 34px); /* Slightly increased */
  --padding-block-section-heading:var(--main-grid-gap-large);

  /*---- Color Scheme ----*/
  --color-white-light: hsl(0, 0%, 98%); /* Light background or surface color */
  --color-white-light-accent: hsl(0, 0%, 93%);
  --color-about-gray: rgb(248, 249, 250);
  --color-gray-light: #e0e0e0; /* Light gray for borders or shadows #e0e0e0*/
  --color-gray-darker: rgba(199, 199, 199, 0.2);
  --color-gray-medium: #6c757d;
  --color-gray-dark: rgba(55, 55, 55, 1); /* Dark gray for text */
  --color-gray-dark-60: rgba(55, 55, 55, 0.6); /* Dark gray for text */
  --color-gray-dark-60-light: rgba(55, 55, 55, 0.1); /* Dark gray for text */
  --color-gray-dark-30: rgba(55, 55, 55, 0.3); /* Dark gray for text */

  --color-primary: #007bff; /* Primary action color */
  --color-secondary: #6c757d; /* Secondary action color */
  --color-background: var(--color-white-light); /* Default background */
  --color-background-dark: #28282a;
  --color-card-bg: var(--color-white-light); /* Background for cards */
  --color-text: var(--color-gray-dark); /* Default text color */
  --color-text-gray: rgb(230, 232, 234);
  --color-graph-blue: #242b42;
  --color-graph-orange: #d2723f;
  --color-panel-bg: #f9f9f9;

  --color-brand: rgb(255, 188, 64);
  --color-brand-light: rgba(255, 188, 64, 0.5);
  --color-brand-dark: hsl(39, 100%, 43%);
  --color-brand-medium: hsl(39, 100%, 49%);
  --gradient-background-light: linear-gradient(to right bottom, #ffffff, #fcfafc, #f9f6f8, #f8f1f3, #f3f3f3);
}
.pattern12 {
  background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 0px, transparent 2px);
  background-size: 12px;
}
.box-shadow-dark {
  /* inner glow 👇 */
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), /* shadow ring 👇 */ 0 0 0 1px hsla(0, 0%, 0%, 0.05),
    /* multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}

/*===============================
/* RESET
/* ===============================*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

button {
  border: none;
  outline: none;
  background-color: inherit;
  font-size: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
}

img {
  display: block;
  width: 100%;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

main a:hover,
footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

h1 {
  font-size: small;
  font-weight: 400;
  margin-top: 0.25em;
}

h2 {
  font-size: var(--fs-large);
  font-family: "Roboto Slab", "Open Sans", sans-serif;
}

h3 {
  font-size: var(--fs-normal-title);
  font-weight: 500;
  margin-top: var(--padding-xxsmall);
  font-family: "Roboto Slab", "System UI", sans-serif;
  line-height: 1.4;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  white-space: normal;
  letter-spacing: -0.36px;
}

h4 {
  font-size: var(--fs-medium);
  margin-block: var(--padding-normal);
}

h5 {
  font-size: var(--fs-normal);
  margin-block: var(--padding-small);
}

h6 {
  font-size: var(--fs-small);
  margin-block: var(--padding-small);
}

::selection {
  background-color: var(--color-brand);
}

/*===============================
/* BASIC
/* ===============================*/

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-sans);
  line-height: 1.4;
  font-size: var(--fs-normal);
  letter-spacing: normal;
  background-color: white;
  color: var(--color-text);

  word-break: normal;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

.wrapper {
  width: min(95%, 1200px);
  margin: 0 auto;
}

p {
  font-size: var(--fs-normal);
  margin-block: var(--padding-small);
  hyphens: auto;
  letter-spacing: 0;
  word-break: normal;
  /* padding-block: var(--padding-small); */
}

/* max 100 characters */
p.art-desc {
  font-size: var(--fs-normal);
  font-weight: 400;
  line-height: 1.5;
  margin-block: 0;
  margin-bottom: 10px;
  hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
}

span.art-date {
  font-size: var(--fs-small);
  color: var(--color-gray-dark);
  font-weight: 400;
}

/*===============================
/*  Layout - Default 
/* ===============================*/

header {
  box-shadow: var(--box-shadow-light);
  background-color: white;
}

section {
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

section {
  padding-block: calc(var(--main-grid-gap-large) * 2);
}

.section-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--main-grid-min-width), 1fr));
  gap: var(--main-grid-gap);
  background-color: white;
}



.section-grid > h2.section-title.border-tp {
  margin-block:var(--padding-block-section-heading);

}


article:not(.report, .horizontal-update, .odd-featured) {
  /* border-bottom: 1px dashed var(--color-gray-light); */
  padding-bottom: var(--main-grid-gap);
  padding-top: 0; /* Account for grid-gap and border */
  box-shadow: var(--box-shadow-soft);
  --wekit-box-shadow:var(--box-shadow-soft);
}



.article-content {
  display: flex;
  flex-direction: column;
  gap: var(--main-grid-gap);
}

article > img {
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: top center;
  max-width: 100%;
  height: auto;
}

img.update-img {
  object-position: bottom center;
}

/*---- SECTION LATEST NEW -----*/

section.latest-news {
  margin-top: 1.5em;
}

/* FEATURED POST */
.featured {
  grid-column: 1 / -1; /* Adjust to span the full width on smaller screens */
}

/* Increase default font-size for default*/
.featured > .article-content > h3 {
  font-size: var(--fs-large);
  font-weight: 500;
  line-height: 1.4;
}
/* Increase font-size for full width articles for default view */
section.latest-news > .section-grid article:nth-child(2) > .article-content > h3,
.latest-news > .section-grid article:nth-child(3) > .article-content > h3 {
  font-size: var(--fs-medium);
  
}

.latest-news > .section-grid > article > .article-content,
.latest-reports .section-grid > article > .article-content {
  display: flex;
  flex-direction: column;
  gap: var(--main-grid-gap);
  
}

/* indent title, text, and date for full-width articles with stacked image */
article.featured > .article-content,
.latest-news > .section-grid > article:nth-child(2) > .article-content,
.latest-news > .section-grid > article:nth-child(3) > .article-content,
.latest-updates .article-content {
  padding-inline: var(--padding-normal);
  
}

.layout-col-2-hide,
.img-hide {
  display: none;
}

.layout-col-2-show,
.img-show {
  display: block;
}

/*===============================
/*  LATEST UPDATES DATA
/* ===============================*/

section.latest-updates {
  background-color: var(--color-background);
}

/* VISUAL */


.update-row {
  width:100%;
  margin-top:2.5em;


}

.update-row h3, .col-2 > h3 {
  margin-bottom:1em;
  margin-left:.5em;
  margin-top:.5em;
}
.inner-flex {
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  width:100%;
  gap:1em;
}

.inner-flex .displacement-graphic{
  width:100%;
}

h3.update-data-title {
  font-weight: 900;
  font-size: var(--fs-xxlarge);
  font-family: var(--font-family-OpenSans);
  line-height: 1.2;
  letter-spacing: -0.16px;
  margin-bottom: 0.135em;
  margin-top: 8px;
}

.data-article {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: start;
  /* border: 7px solid var(--color-gray-dark); */
  /* background-color: var(--color-background); */
  padding: 1em;
  box-shadow: var(--box-shadow-soft);
  --wekit-box-shadow:var(--box-shadow-soft);
  gap: 0.15em;
}

.data-container {
  margin: 1.5em 0;
  display: flex;
  flex-direction: row;
  justify-self: flex-end;
  gap: 1em;
  justify-content: space-evenly;
  align-items: center;
}

.up-article-item {
  display: inline-block;
  text-align: center;
  font-weight: 500;
}

.up-article-item {
  position: relative;
  z-index: 1;
}

.up-icircle {
  display:inline-block;
  font-size:3.5rem;
  color: var(--color-graph-blue);
  stroke:0;
  position:relative;
}

.up-icircle-z {
  position:absolute;
  top:0;
  left:10px;
  font-size:3.5rem;
  z-index:-1;
  color: var(--color-gray-dark-60);

}

span.up-circle {
  position:relative;
  display: inline-block;
  width: 2.85em;
  height: 2.85em;
  background: hsl(226, 29%, 20%); /* Exact same as blue */
  background: hsl(226, 29%, 19%); /* Then maybe 1% less will do after trial and error */
  border-radius: 100%;


  padding-top: 1rem;
  margin:0 auto 0.5em auto;
  background-color: #272727;
  text-align: center;
  vertical-align: center;
  color: white;
  font-size: var(--fs-medium);
  font-weight: 800;
}


span.up-circle::before {
  position: absolute;
  content: "";
  width: 2.85em;
  height: 2.85em;
  background-color: var(--color-gray-dark-60);
  top: 0;
  left: 10%;
  border-radius: 50%;
  z-index: -1;
}

.update-data-count-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.05em;
  place-items: center;
  color: inherit;
  font-weight: 500;
  font-size: var(--fs-small);
}

.chart-data {
  width: 14em;
  padding: 0.4em;
  background-color: #e0e0e0;
}


/* ===============================
/*  HORIZONTAL SCROLL - Latest Reports
/* ==============================*/
/* Only for mobile and table*/
section.section-latest-reports {
  background-color: var(--color-background-dark);
  color: var(--color-text-gray);
 
  --webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0px 4px 8px, rgba(0, 0, 0, 0.05) 0px 8px 16px;

  box-shadow: inset rgba(0, 0,0, 0.1) 0px 4px 8px, rgba(0, 0, 0, 0.05) 0px 8px 16px;
 
}
section.section-latest-reports .wrapper > .section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--main-grid-gap);
  border-color: var(--color-text-gray);
}

section.section-latest-reports .more-link-container {
  border-color: var(--color-text-gray);
}

/* Horizontal grid layout */
.horizontal-grid {
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--main-grid-min-width)), 1fr));
  align-items: center;
  padding-block: var(--main-grid-gap-large);

  /*gap: var(--main-grid-gap-large); Adjust as needed */
  overflow-x: auto; /* Enable horizontal scrolling */
  -webkit-overflow-scrolling: touch;
  width: 100%; /* Ensure it takes up the full container width */
  gap: var(--main-grid-gap-large);
}

/* Ensure articles take up the correct width */
.horizontal-grid > article {
  cursor:pointer;
  aspect-ratio: 13/19;
 
  box-sizing: border-box;
  min-width: 240px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  scale:100%;
  transform-origin: center;
  border:0px solid transparent;
  transition:border 350ms ease-out, scale 350ms ease-out;
  transition-delay: 100ms;
  --webkit-transition-delay:200ms;
  
}
.horizontal-grid > article:first-child {
  transform-origin: left;
}
.horizontal-grid > article:last-child {
  transform-origin: right;
}

.horizontal-grid > article:hover {
  scale: 110%;
  border:4px solid rgba(0, 0, 0, 0.05);
  overflow:wrap;
  object-fit: fill;

}

/* Optionally, hide content inside articles (if needed) */
.horizontal-grid > article > .article-content-FIX {
  display: none;
}

/* Style arrows for the controls for vanilla carousel */
.controls-scroll {
  display: flex;
  flex-direction: row;
  gap: calc(var(--main-grid-gap) / 2);
  justify-content: right;
}

.controls-scroll > button.btn-controls > i {
  font-size: var(--fs-medium);
  padding: 0.5em;
  cursor: pointer;
  background-color: none;
  border-radius: 50%;
  transition: background-color 350ms ease;
  color: white;
}

.controls-scroll > button.btn-controls:hover > i {
  background-color: var(--color-text-gray);
  color: #222;
}

/*--- LATEST STATEMENTS ---*/

section.section-latest-statements {
  background-color: var(--color-about-gray);

}

/* section title spans 1 one column */
.section-latest-statements .section-title {
   grid-column: 1/-1;
}

.section-latest-statements > .wrapper > .section-grid {
  background-color: var(--color-background);
  padding-inline: var(--padding-small);
  padding-block: var(--padding-normal);
}

/*--- SECTION: ABOUT ---*/
.motto {
  
  width:70%;
  display:flex;
  flex-direction: column;

}
.small-motto, .large-motto {
  display:block;
  font-family: 'Roboto Slab', sans-serif;
  font-weight:500;
  text-align: center;
}

.small-motto {
  font-size: clamp(.7rem, 3vw, 1.3rem);
  letter-spacing: normal;
  font-weight: 400;
  margin-bottom:-5px;
}

.large-motto {
  font-size: clamp(1.6rem, 5vw, 3rem);   
  font-weight:900;
  line-height: 1.3;
  letter-spacing: -.004em;
  max-width: max(76%, 25ch);
  text-align: centre;
  margin: 0 auto; 
}



.section-about {
  background-color: var(--color-background);
  
}

/* Wrapper full-width for mobile*/
.section-about >.wrapper {
  width:100%;
}


/* .tagline { 
  letter-spacing: .01em;
  width: min(33ch, 85%);
  font-size: clamp(32px, calc(1.75rem + ((1vw - 3.2px) * 1.36)), 46px);
  text-align: center;
  margin: 0 auto;
  line-height: 1.23;
  font-weight: 800;
  font-family: var(--font-family-sans-con);
  word-wrap: break-word;
  hyphens: auto;
  --webkit-hyphens: auto;
  --moz-hyphens: auto;
  white-space: normal;
}*/

.underline_ws {
  position: relative;
  text-shadow: 3px 3px var(--color-background), 4px 5px var(--color-background), -3px -3px var(--color-background), -3px -3px var(--color-background);
  background-color: var(--color-background);
  transition: background-image 500ms ease-out, background-size 500ms ease-out;
}

.section-grid-about {
  margin-block: 2.5em 0;
  display:flex;
  flex-direction: column;
  gap:1em;
  background-color: inherit;
}

.motto {
  justify-self: center;
}

.activities {
  width:100%;
  text-align: center;
  background-color: white;
  padding: var(--main-grid-gap) calc(var(--main-grid-gap-large) * 2);
  box-shadow: var(--box-shadow-soft);
}



.activities > h4 {
  font-family: var(--font-family-sans-con);
  font-weight: 500;
  font-size: var(--fs-xlarge);
  letter-spacing: 0.06rem;
}

.i-about {
  font-size: 4rem;
  margin-block: var(--main-grid-gap);
}

/*===============================
/*  NEW UPDATE
/* ===============================*/
.new-update {
  background-color: var(--color-background);
}

.new-update .col-2 {
  display: flex;
  flex-direction: column;
  gap: var(--main-grid-gap);
}

article.horizontal-update {
  background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, transparent 0px, transparent 2px);
  background-size: 12;
  background-color: white;
  overflow: hidden;
  height: 180px;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1.5em;
  box-shadow: var(--box-shadow-soft);
  transition: all 450ms ease-in-out;

  > img {
    box-shadow: var(--box-shadow-soft);
    transition: all 450ms ease;
    width: 40%;
  }
}

article.horizontal-update:hover {
  background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 0px, transparent 2px);
}

article.horizontal-update .art-content {
  margin-top: 30px;
  margin-bottom: 15px;
  margin-right: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.horizontal-update h3 {
  font-size: 20px;
  letter-spacing: 0.035em;
  transition: color 350ms ease;
}
.title-featured {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.horizontal-update:hover h3 {
  color: var(--color-brand-dark);
}

.horizontal-update:hover img {
  transform: scale(105%);
}

.odd-featured > .art-content {
  padding: 1em;
  background-color: white;
}
.horizontal-update > .art-content div > p.art-desc {
  margin-block: 0;
  padding-block: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.003em;
}
.odd-featured > .art-content div > p.art-desc.long-desc {
  line-height: 1.7;
  font-weight: 400;
  font-size: 1rem;
}

.featured-tagline {
  font-size: 24px !important;
  font-style: italic;
  font-weight: 500 !important;
  padding-block: 0;
  margin-block: 1em !important;
  line-height: 1.3 !important;
}

.inner-element-container {
  border-top: 4px solid #242b42;
  border-bottom: 2px solid #242b42;
  padding: 2em 0.25em;
  margin: 2.5em 1.5em;
}
.featured-update-quote {
  font-weight: 500;
  font-size: 1.2em;
  position: relative;
  margin-bottom: 1em;
  padding-inline: 0.5em;
}
.featured-update-quote::before {
  content: "\201C";
  font-family: Arial, Helvetica, sans-serif;

  /*Font*/
  font-size: 8rem;
  font-weight: bolder;
  color: rgba(0, 0, 0, 0.1);

  /*Positioning*/
  position: absolute;
  left: 0;
  top: -69%;
  z-index: 1;
}

.quote-attr {
  margin-left: 2em;
}

.horizontal-update span.article-date,
.article-date-featured {
  display: block;
    font-weight: 300;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 0.25em;
  margin-top: 0.5em;
  transition: all 450ms ease;
}

.article-date-featured {
  display: inline-block;
  border-top: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 0.25em;
  margin-bottom: 2em;
}

.horizontal-update:hover span.article-date {
  border-top: 1px solid var(--color-brand-dark);
}

.horizontal-img-container {
  height: 190px;
  flex: 0 0 40%; /* Take up exactly 40% of the card width, no more, no less */
  background-color: white;
  overflow: hidden;
  display: grid;
  align-items: center;
  box-shadow: var(--box-shadow-soft);
  > img {
    transition: all 450ms ease;
    box-sizing: border-box;
    object-fit: cover;
  }
}

.not-chart {
  object-fit: cover;
}



.displacement-graphic {
  box-shadow: var(--box-shadow-soft);
  padding:.5em 1.5em;
  background-color: white;
  box-shadow: var(--box-shadow-articles);

}

.displacement-graphic a:hover {

  text-decoration:none;
}

.container-graphic {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: transparent;
  width: 100%;
  
  padding:1em 0;
  
}

.graphic-title {
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.06); */
  /* background-color: var(--color-graph-orange); */
  /* background-color:white; */
  /* text-align: center; */
  font-weight: 600;
  color: var(--color-text);
  font-size:14px;
  /* padding: 0.75em 0; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: bottom;
  padding:.5em 0 .5em 0;
  border-bottom:1px solid rgba(199, 199, 199, 0.2);
  

  
}

.graphic-title .article-date-data{
  margin-bottom:0;
  border-bottom:none;
  font-weight:300;
}

.icon-label {
  font-size: 2.2rem;
  color: var(--color-graph-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap:.75em;
  width:100%;
  padding-block:.5em;

  background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, transparent 0px, transparent 2px);
  background-size: 12;
  transform:scale(100%);
  transition:transform 350ms linear, background-image 350ms linear;
  
  
}

.icon-label:hover {
  transform:scale(110%);
  background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 0px, transparent 2px);
  box-shadow: var(--box-shadow-soft);
}

.label-inner-content {
  width:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
}

.i-label {
  display:inline-block;
  font-size: 14px;
  font-weight: 600;
}

.i-sublabel {
  display: inline-block;
  font-size: 14px;
  font-weight:normal;
  letter-spacing: .003em;
  color:var(--color-graph-blue);

}

.icon-label-value {
  color: var(--color-graph-orange);
  text-align: center;
  display:block;
  font-weight: bold;
  text-align:center;
  font-size:24px;
  margin-top:.25em;
  margin-bottom: -3px;
  display:inline-block;
}

/* Common styles for all articles */

/* Add any shared styles here */

/* Backgrounds for demonstration */

/* Featured Article - spans two columns */

/* Adjacent article - sits next to the featured article */

/* Update Reports */


/*========= STATEMENTS REDO ==========*/


article.horizontal-update.art-state {

  height:150px;
  > img {
    box-shadow: var(--box-shadow-soft);
    transition: all 450ms ease;
    width:420px;
    height:230px;
    
  }
}



/*===============================
/* UTILITY CLASSES
/* ===============================*/

.wrapper-full-width {
  width: 100%;
}

.d-grid {
  display: grid;
  gap: 2em;
}

.d-grid-col-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--main-grid-min-width)), 1fr));
}

.d-grid-12-col {
  grid-template-columns: repeat(12, 1fr);
}

.d-grid-2-col {
  grid-template-columns: 1fr 1fr;
}

.d-grid-full-100 {
  grid-column: 1/-1;
}

.d-grid-span-50 {
  grid-column: 1/-2;
}
.span-col-2 {
  grid-column: span 2;
}

.span-col-4 {
  grid-column: span 4;
}

.span-col-6 {
  grid-column: span 6;
}

.span-col-8 {
  grid-column: span 8;
}

.span-row-2 {
  grid-row: span 2;
}

.span-row-4 {
  grid-row: span 4;
}

.span-row-6 {
  grid-row: span 6;
}

.span-row-8 {
  grid-row: span 48;
}

.d-flex {
  display: flex;
  gap: var(--main-grid-gap);
}

.flex-col {
  flex-direction: row;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-space-around {
  justify-content: space-around;
}

.justify-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.align-items-text-top {
  vertical-align: text-top;
}
.align-self-center {
  align-self: center;
}

.align-self-start {
  align-self: self-start;
}



.align-self-end {
  align-self: end;
}
.min-content-width {
  width: min-content;
}

.img-3x4 {
  aspect-ratio: 3/4;
}

.img-16x9 {
  aspect-ratio: 16/9;
}

.img-13x19 {
  aspect-ratio: 13/19;
}

.border-tp {
  padding-block: var(--main-grid-gap-large) calc(var(--main-grid-gap) / 2);
  border-top: 2px solid var(--color-text);
  border-bottom: 4px solid var(--color-text);
  margin-bottom: var(--main-grid-gap);
}

.subtitle {
  font-size: var(--fs-medium); /* 16px */
  font-weight: 600;
  line-height: 1.2;
  max-width: 45ch;
}

.pb-sm {
  padding-bottom: var(--padding-small); /* Responsive padding based on small font size */
}

.small-text {
  font-size: var(--fs-small); /* ≈ 9.9px */
}

.fs-normal {
  font-size: var(--fs-normal);
}

.fw-normal {
  font-weight: normal;
}
.strong {
  font-weight: 500;
}

.stronger {
  font-weight: 600;
}

.xstrong {
  font-weight: 700;
}

.xxstrong {
  font-weight: 900;
}

.divider {
  margin: 0 var(--padding-xxsmall);
}

.more-link-container {
  margin-top: 1em;
  border-top: 2px solid #272727;
}

.more-link {
  margin-left: auto;
  width: fit-content;
  display: block;
  font-weight: 500;
  padding: calc(var(--padding-xxsmall) / 2) var(--padding-xxsmall);
  background-color: none;
  transition: background-color 350ms ease;
}


.more-link:hover {
  background-color: var(--color-brand);
  text-decoration: none;
}

 section.section-latest-reports .more-link:hover {
  background-color: var(--color-brand-dark);
}

.color-brand-text {
  color: var(--color-brand-dark);
}

.bg-w {
  background-color: white;
}

.bg-g {
  background-color: var(--color-background);
}

.bg-m {
  background-color: var(--color-gray-light);
}

.bg-d {
  background-color: var(--color-text);
}

/*--- SECTION: REPORTS ---*/
/* .section-latest-reports > .wrapper > .section-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  white-space: nowrap;
  overflow: hidden;
} */

.hide {
  display: none !important;
}

.show {
  display: none !important;
}

/* Animated Elements */

.anElem {
  opacity: 0;
  filter: blur(1px);

  transform: translateY(25%);
  transition: all 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.elAnimate {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.activities.item2.elAnimate {
  transition-delay: 200ms;
}

.activities.item3.elAnimate {
  transition-delay: 400ms;
}

/* About Animated underline */
span.underlineAn {
  background-image: linear-gradient(rgb(248, 249, 250), rgb(248, 249, 250)), linear-gradient(var(--color-brand-light), var(--color-brand-light));
  background-size: 100% 2px, 0 2px;
  background-position: 94% 94%, 0 94%;
  background-repeat: no-repeat;

  transition: background-size 450ms ease-in;
}



.underlineAnimate {
  background-size: 0 2px, 100% 2px !important;
  transition: linear-gradient 350ms ease;
  transition-delay: 250ms;
}

.underlineAnimate:nth-child(2) {
  transition-delay: 1000ms;
}

.underlineAnimate:nth-child(3) {
  transition-delay: 1500ms;
}


/*============================================================*/
/* FOOTER
=============================================================== */

footer {
  background-color: var(--color-background-dark);
  box-shadow: var(--box-shadow-dark-BG);
  -webkit-box-shadow: var(--box-shadow-dark-BG);
  padding-block: calc(var(--main-grid-gap-large) * 1.5);
}

/* Newsletter
============== */

.newsletter-container.footer-nl {
  color: rgba(255, 255, 255, 0.8);

  display: flex;
  flex-direction: column;
  gap: var(--main-grid-gap-large);
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--main-grid-gap-large);
}

/*--- section container is full width and light blue ---*/
.footer-nl-title-wrapper {
  text-align: center;
}

.footer-nl-title-wrapper h4 {
  margin-bottom: 0;
}

.footer-nl-title-wrapper > p {
  max-width: 40ch;
  text-align: center;
  font-size: var(--fs-normal);
  margin-block: 0;
}

section.nl-container .nl-box-container {
  padding: var(--main-grid-gap);
}

section.nl-container .nl-box {
  width: 60vw;
  margin: 0 auto;
  border: none;
  display: flex;
}

.footer-nl > .signup-container input {
  background-color: rgba(68, 68, 68, 0.9);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5em;
  outline: var(--color-gray-dark-60);
  transition: outline 350ms ease;
}

.footer-nl > .signup-container input:hover {
  outline: rgba(68, 68, 68, 0.7);
}

.footer-nl > .signup-container input:hover::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.footer-nl > .signup-container .btn-signup {
  background-color: var(--color-brand-dark);

  transition: background-color 250ms ease;
  cursor: pointer;
  border: none;   /* removes border */
}

.footer-nl > .signup-container .btn-signup:hover {
  background-color: var(--color-brand-medium);
}

/*--- UL footer menu ---*/

/* Remove default padding */
.footer-menu {
  margin-bottom: var(--spacing-md);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

/* Give frst li of each ul.footer0menu 1px bottom border, .25em bottom padding */
footer ul.footer-menu li:first-child {
  font-weight: bold;
  font-size: var(--fs-medium);
  padding-block: 0.5em;

  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* All footer-menu li except first-child */
.footer-menu > li:not(:first-child) {
  padding: 0.25em 0;
  /* display: none; */
}

/* Style anchor elements in each ul.footer-menu li */
footer a,
footer a:visited {
  color: var(--color-darkBG-darker);
  transition: color 300ms linear;
}

footer ul.footer-menu > li:first-child > a,
footer ul.footer-menu > li:first-child > a:visited {
  color: var(--color-darkBG-normal);
}

/* Add underline on hover */
footer a:hover {
  text-decoration: 0.5px solid underline;
  text-underline-offset: 5px;
  color: white;
}

/* Style nd-burma section */
footer .nd-wrap {
  color: #e0e0e0;
  font-size: var(--fs-small);
  margin: var(--main-grid-gap-large) auto 0 auto;
  display: flex;
  flex-direction: row;
  gap: var(--main-grid-gap);
  align-items: center;
  line-height: 1.2;
  max-width: 55ch;
  word-wrap: break-word;
}

footer ul.social-link > li > a > i {
  padding-right: var(--spacing-sm);
}

a.nd-link {
  min-width: 4em;
}

img.ndb-logo {
  max-height: 70px; /* Ensure the image does not exceed this height */
}

h4.ndb-title {
  vertical-align: 25%;
  font-size: var(--fs-base);
}

.ndb-desc p {
  font-size: var(--fs-sm);
  text-align: justify;
}

.copystatement {
  font-size: var(--fs-xsmall);
  color: #e0e0e0;
  text-align: center;
  padding-block: 1em;
  margin-bottom: 0;
}

/*===============================
/* MEDIA QUERIES
/* ===============================*/

@media (min-width: 526px) {
  /*---- AUTO COLUMNS: CHANGE FROM 1FR TO 2FR ----*/

  /* Changes .featured to 2 cols, but maintains 
  full width  */
  .featured {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--main-grid-gap);
  }

  /* Reverses order of columns, putting title on left-hand side */
  .latest-news .featured:first-of-type > .article-content,
  .section-latest-statements article.featured > .article-content {
    order: 1;
    display: grid;
    align-content: center;
  }

  .latest-news .featured:first-of-type > img,
  .section-latest-statements article.featured > img {
    order: 2;
  }

  article.featured > .article-content > h3 {
    font-size: var(--fs-large);
    line-height: 1.4;
    font-weight: 600;
  }

  /* REmove indent title, text, and date for full-width articles with stacked image */
  article.featured > .article-content,
  .latest-news > .section-grid > article:nth-child(2) > .article-content,
  .latest-news > .section-grid > article:nth-child(3) > .article-content,
  .latest-updates .article-content {
    padding-inline: 0px;
  }

  /*---- SECTION LATEST UPDATES----*/

  /* .latest-updates .featured:first-of-type {
    grid-template-columns: 2fr 1fr;
  } */
  article.latest-updates {
    grid-column: span 1;
  }

  .data-article {
    grid-column: span 1;
  }

  .up-featured {
    grid-column: span 2;
  }

  /*---- SECTION ABOUT ----*/

  .layout-col-2-1fr {
    grid-template-columns: 1/2;
  }

  .layout-col-2-block {
    display: block;
  }

  .layout-col-3-flex-row {
    display: flex !important;
    flex: row;
    gap: var(--main-grid-gap);
  }

  /*---- FOOTER ----*/
}

@media (max-width: 526px) {
  /* Hide img for article update on mobiles */
  .hide-mobile {
    display:none;
  }

  /* Add margin-left to compensate for flex gap */
  .horizontal-update img.hide-mobile ~ .art-content,
  .horizontal-update .horizontal-img-container.hide-mobile ~ .art-content {
    margin-left:1.5em;
  } 


  .subnav-sublist-item > a {

    display: inline-block;
    width: 100%;
    height: 100%;

  }


}

@media (min-width: 526px) and (max-width: 798px) {

  .layout-col-2-grid {
    grid-column: 1/-1;
    /* causing issues on 2 col resolution */
    /* display: grid; */
    grid-template-columns: 1fr 2fr;
    grid-gap: var(--main-grid-gap);
    justify-content: center;
  }

  article.layout-col-2-grid > .article-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--main-grid-gap);
  }

  .layout-col-2-hide {
    display: none;
  }
}
@media (max-width: 798px) {
  /* for a max width of 768, */
  .layout-col-1-grid {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: var(--main-grid-gap);
    justify-content: center;
    align-items: center;
  }
  /* Must come after layout-col-grid - hide statements*/
  .default-hide {
    display: none;
  }

  /* Remove margin on headings for h3 without a desc
  /* and remove for layout-col-2-grid  */
  .layout-col-1-grid .article-content > h3,
  article.layout-col-2-grid .article-content > h3 {
    margin-block: 0;
  }
  /*------ SECTION LATEST UPDATE --------*/
  /* Add margin if img is hidden - */
  .horizontal-update.horizontal-img-container > img.img-hide .horizontal-update.art-content,
  .horizontal-update > img.img-hide ~ .art-content {
    margin-left:1.5em;
  }

  /* Slightly indent single page sidebar titles on mobile */
  .sidebar-container h3.sidebar-title {

    padding-left: 1em;

  }

  /* Slightly indent footer menu items on mobile */
  .footer-menu > li:not(:first-child) {

    margin-left: 1em;    
  }

  /* Align HURFOM moto center on homeage for mobile/tablet */
  .motto {

    width: 100%;
    text-align:center;

  }

  /* Align "700,000+ in total" text on homepage displacement to center */
  .i-sublabel {

    text-align: center;
  }



}

@media (min-width: 799px) {
  /* Styles for laptops
  ( 3 col fp)
*/

  h3,
  h4,
  h5,
  h6 {
    margin-block: 0;
  }

  p {
    padding-block: calc(var(--padding-small) / 2);
    margin-block: calc(var(--padding-small) / 4);
    line-height: 1.5;
  }

  .wrapper {
    width: min(92%, 1200px);
  }

  img:has(+ .article-content) {
    margin-bottom: var(--padding-small);
  }

  .layout-col-3-hide {
    display: none;
  }

  .layout-col-3-show {
    display: block;
  }

  .layout-col-3-1fr {
    grid-column: span 1/2;
  }

  article {
    background-color: white;
  }

  article > .article-content {
    padding-inline: 0;
  }

  article.statement.featured > .article-content > h3,
  section.latest-news > .section-grid article:nth-child(2) > .article-content > h3,
  .latest-news > .section-grid article:nth-child(3) > .article-content > h3 {
    font-size: var(--fs-normal-title);
  }

  .up-featured {
    grid-row: span 1;
  }

  /* ===============================
/*  MIN 799px - SECTION LATEST UPDATES
/* ==============================*/

  /*--- LATEST STATEMENTS ---*/

 
  .col-3-min-width {
    width: min-content;
  }

  div.inner-wrapper {
    display: flex;
    flex-direction: row;
    gap: 2em;
  }

  .new-update .col-1 {
    box-shadow: var(--box-shadow-soft);
    width: 50%;
  }

  .new-update .col-2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--main-grid-gap-large);
  }




  /* ===============================
/*  MIN - 799px SECTION ABOUT
/* ==============================*/

/* Wrapper full-width for mobile*/
.section-about > .wrapper {
  width: min(95%, 1200px);
  margin: 0 auto;
}


  .section-grid-about {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top:2em;


  }
  

  .activities {
    background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, transparent 0px, transparent 2px);
    background-size: 12;
    background-color: var(--color-about-gray);
    padding: calc(var(--main-grid-gap-large) * 1.5) var(--main-grid-gap-large);
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 2em;
    transform:scale(100%);
    transition:transform 350ms linear, background-image 350ms linear;
  }

  .activities:hover {
    transform:scale(110%);
    background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 0px, transparent 2px);

  }

  .activities > h4 {
    font-family: var(--font-family-sans-con);
    font-size: var(--fs-large);
    font-weight: 500;
  }


  .i-about {
    font-size: 4rem;
    color: var(--color-text);
    display: inline-block;
  }

  /* ===============================
/*  SECTION FOOTER
/* ==============================*/

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--main-grid-gap-large);
    row-gap: var(--main-grid-gap-large);
  }

  /* NEWSLETTER - footer span 12 columns*/
  .footer-nl {
    grid-column: span 12;
    flex-direction: row !important;
    justify-content: center !important;
  }

  .footer-nl-title-wrapper {
    text-align: left;
  }
  .footer-nl-title-wrapper p {
    text-align: left;
    max-width: 45ch;
    font-size: var(--fs-small);
  }

  /* .footer-nl > .footer-signup > .newsletter-signup */
  .footer-nl > .footer-signup INPUT[type="email"] {
    width: 20em;
  }

  /* All footer-menu li except first-child */
  .footer-menu > li:not(:first-child) {
    display: block;
    padding-block: 0.25em;
  }

  .footer-grid > ul,
  .footer-grid ul.social-link-menu {
    grid-column: span 4;
  }

  .footer-menu {
    margin-bottom: 0;
  }
  .footer-grid div.nd-wrap {
    grid-column: span 12;
    align-self: end;
  }

  ul.social-icon-menu {
    justify-self: end;
    align-content: end;
  }

  .footer-grid p.copystatement {
    grid-column: span 12;
  }
}

@media (min-width: 1070px) {
  .latest-news > .section-grid > article:not(.featured) > .article-content,
  .section-latest-statements .section-grid > article:not(.featured) > .article-content {
    display: flex;
    flex-direction: column;
    gap: var(--main-grid-gap);
    padding-bottom: var(--fs-small);
    height: fit-content;
  }
  .latest-news > .section-grid > article:not(.featured) > .article-content,
  .section-latest-statements .section-grid > article > .article-content > span.art-date {
    margin-top: auto;
  }

  .featured {
    grid-column: 1/-2;
  }


  .latest-updates article.up-articles {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: var(--main-grid-gap);
  }

  /* Style large screens (4 col fp) */
  .layout-col-4-hide {
    display: none;
  }
  .layout-col-4-show {
    display: block;
  }

  .layout-col-4-row-2 {
    grid-row: span 4;
  }

  .col-4-pt {
    padding-top: var(--padding-xxsmall);
  }
  .inner-flex {
    flex-direction: row;
  
  }

  /*--- LATEST STATEMENTS ---*/

  /* section title spans 1 one column */
  .section-latest-statements .section-title {
    grid-column: 1/1;
  }
  /* Title spans 1 columm and 1 row, pushing all content in section right */
  .section-latest-statements .section-grid h2.section-title {

    grid-row: 1;
    margin-top: 0;
    width: min-content;
    height: fit-content;
    font-size: var(--fs-xxlarge);
    font-weight: 900;
    padding-block: var(--padding-medium);
  }

  /* Featured spans 1 col and no longer stacks content
  Pushed one column over to accomodate section title */

  article.statement.featured {
    grid-column: 1/2;
    grid-column-start: 2;
    display: block;
  }

  .section-latest-statements .section-grid article:nth-child(5) {
    grid-column-start: 2;
  }

  /* article.statement {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
  } */

  article.statement > .article-content > .art-desc {
    padding-block: 0;
  }

  article.statement > .article-content {
    background-color: white;
    padding-inline: var(--main-grid-gap);
  }

  /* ===============================
/*  SECTION FOOTER
/* ==============================*/

  section.nl-container .nl-box-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    padding-bottom: var(--spacing-md);
  }

  section.nl-container .nl-box-container h3 {
    grid-column: span 6;
    margin-bottom: 0;
  }

  section.nl-container .nl-box-container .nl-box {
    grid-column: span 6;
    width: 100%;
    height: fit-content;
  }

  .footer-grid > ul:not(ul.social-icon-menu) {
    grid-column: span 3;
  }

  .footer-grid div.nd-wrap {
    grid-column: 7/13;
  }
}
/* ===============================
/*  BASIC STYLE
/* ==============================*/

:root {
  --max-width-nav-margin: 52px;

  --color-menu-main-bg: hsl(0, 0%, 94%);
  --color-menu-accent-bg: hsl(0, 0%, 85%);
}

/* Transition on body padding when navbar hides */
body {
  padding-top: 60px; /* Initially no padding */
  transition: padding-top 0.3s ease; /* Smooth transition on padding */
}
header {
  background-color: white;
}

.top-header {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  height: 85px;
  z-index: 98;

  font-size: var(--fs-medium);
  padding-block: 0.5em;
  padding-inline: 0.751em;
}

.top-header > div.logo-wrapper {
  min-height: calc(var(--header-min-height) / 2);
  overflow: hidden;
  grid-column-start: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* .top-header > div.logo-wrapper > img { */

.top-header > div.logo-wrapper  img {
  object-fit: contain;
  object-position: center;
  width: 175px;
  transition: all 350ms ease;
}

.top-header > div.logo-wrapper > h1 {
  font-size: var(--fs-xsmall);
}

.top-header > .right-wrap {
  display: flex;
  gap: var(--main-grid-gap-large);
  width: var(--max-width-nav-margin);
  justify-self: end;
}

/* ===============================
/*  Primary Sticky Navigation
/* ==============================*/

.primary-nav-sticky {
  display: block;
  width: 100%;
  height: 85px;
  background-color: white;
}

/* Primary Nav is sticky */
nav.nav-primary-container {
  min-height: calc(var(--header-min-height) / 2);
  align-content: center;
  height: 100%;
}

.primary-nav {
  flex: 1;
  display: none;
}

nav.nav-primary-container > ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 101;
  gap: calc(var(--main-grid-gap-large) * 1.35);
  font-weight: 500;
  font-size: var(--fs-normal);
  font-family: var(--font-family-sans);
  text-transform: uppercase;
}

.nav-main-mobile {
  background-color: white;
  box-shadow: var(--box-shadow-light);
}

/*  Scroll
/* ===============================*/
/* Base styling for mobile sticky nav */
/* Ensure the navbar is positioned fixed at the top */
#mobile-sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sticky-nav-up {
  transform: translateY(-100%); /* Slide navbar out of view */
  opacity: 0;
}

.sticky-nav-down {
  transform: translateY(0); /* Slide navbar into view */
  opacity: 1;
  box-shadow: var(--box-shadow-light);
}

/* When navbar is hidden, add padding to the body */
body.sticky-nav-hidden {
  padding-top: 50px; /* Adjust this value to match the navbar's height */
}

/* ===============================
/*  Search
/* ==============================*/

.btn-search {
  position: relative;
  color: inherit;
}

button.btn-search:hover > i, button.btn-menu:hover > i {
  color: var(--color-brand-dark);
}

.dropdown-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 85%;
  padding: 1em;
  background-color: var(--color-about-gray);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 150ms linear;
  overflow: hidden;
}

.dropdown-panel {
  display: flex;
  flex-direction: row;
  /* gap: 1em; */
  align-items: center;
  width: 100%;

}

.dropdown-panel .input-form:first-child {
  flex-grow: 1;
  position: relative;
}


button.btn-filter {
  position:absolute;
  right:15px;
  top:8px;
}


.searchMenu-btn {
  background-color: var(--color-about-gray);
  padding: 0.425em 0.65em;
  outline:2px solid var(--color-text);
}



.searchMenu-btn:hover {
  background-color: var(--color-text);
  color:var(--color-about-gray);
}

.searchMenu-btn:hover > i {
  color:var(--color-about-gray)!important;
}

input[type="search"],
input[type="email"],
button.dropdown-placeholder  {
  appearance: auto;
  padding: 0.5em;
  font-size: large;
  outline: 2px solid var(--color-gray-dark-60);
  border: none;
  width: 100%;
}
input[type="search"]::placeholder,
input[type="email"]::placeholder,
button.dropdown-placeholder {
  color: #7d7f7c;
  transition: color 250ms linear;
}

input[type="search"]:hover::placeholder,
input[type="email"]:hover::placeholder,
button.dropdown-placeholder:hover,
button.dropdown-placeholder:has(+.advanced-search-list.show-menu:hover)  {
  color: var(--color-text);
}

input:focus-visible {
  outline: 2px solid var(--color-gray-dark);
  border-color: white;
  background-color: white;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="email"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 40em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0; /* Initially hidden */
  pointer-events: none; /* Initially not clickable */
  transition: all 300ms ease;
  margin-right:35px;
}

input[type="search"]:focus::-webkit-search-cancel-button,
input[type="email"]:focus::-webkit-search-cancel-button {
  opacity: 1; /* Make visible on focus */
  pointer-events: all; /* Make clickable on focus */
  cursor: pointer;
}

/* If you want it to show up normally, you can add a hover effect or change opacity on a different interaction */
input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: 0.3; /* Visible when hovering or focused */
  cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 0.5;
}

.search-filter {
  font-size: small;
}

.btn-filter > i {
  color: var(--color-text);
}
.btn-filter:hover > i {
  color: var(--color-gray-dark-60);
}

.search-filter.show-menu {
  max-height: 100vh;
  border-bottom:1px solid var(--color-white-light-accent);
  padding-bottom:1.5em;
  
}

.search-filter > ul {
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  gap:var(--main-grid-gap);

}

.search-filter.show-menu .search-filter-list {
  margin-block: var(--main-grid-gap-large) .75em;
  padding-bottom: .5em;
}
.sfl-option {
  background-color: var(--color-brand-light);
  padding: 0.25em 0.5em;
 
  font-size: 15px;
  &:hover {
    background-color: var(--color-brand);
  }
}

.sfl-text {
  font-weight: bold;
}



/* ADVANCED SEARCH OPTIONS */

.advanced-search-panel {

  top:0;
  right:0;
}

.advanced-search-dropdown {
  position:relative;
 

}

.btn-advanced {

  margin: 1em 0 .5em 0;
  font-size:17px;
  font-weight:400;
  display:flex;
  flex-direction: row;
  gap:.5em;
  justify-content: flex-start;
}

.dropdown-placeholder {
  width:100%;
  cursor: pointer;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom:1em;
  background-color: white;
  font-weight:300;
  
}
.advanced-search-list {
  position:absolute;
  top:110%;
  left:0;
  z-index:100;
  height:40vh;
  overflow:scroll;

  background-color: white;
  box-shadow: var(--box-shadow-light);
  border:1px solid rgba(0, 0, 0, 0.1);
  transition: outline 350ms ease;
}
.dropdown-placeholder:has(+.advanced-search-list.show-menu) {
  outline: 2px solid var(--color-gray-dark);
  background-color: var(--color-panel-bg);

}
.advanced-search-list > li {
  cursor: pointer;
  padding:.75em;
  color:#7d7f7c;
  transition:color 250ms ease, background-color 250ms ease;
  background-color: white;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
}

.advanced-search-list > li:hover {
  background-color: var(--color-panel-bg);
  color:black;
  border-bottom:1px solid var(--color-white-light-accent);
  border-top:1px solid var(--color-white-light-accent);

}
.dropdown-search-title {
  font-size:var(--fs-small);
  font-weight:400;
  
}

.search-item-selected {
  color:#000!important;
  font-weight:400!important;
  outline-color:var(--color-text)!important;

}

/* ===============================
/*  Sliding Navigation (Main Menu)
/* ==============================*/

.subnav-menu-container {
  width: 100vw;
  height: 90vh;
  position: absolute;
  top: calc(var(--header-min-height) * 1em);
  left: -100%;
  overflow: scroll;
  padding-bottom: var(--main-grid-gap);
  box-shadow: var(--box-shadow-light);
  background-color: white;

  visibility: hidden;
  opacity: 0.5;
  transition: all 150ms ease;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.subnav-header {
  height: auto;
  width: 100%;
  text-align: right;
  background-color: var(--color-text);
  padding: calc(var(--main-grid-gap) / 2);
}

.subnav-header > .btn-cancel > i {
  display: inline;
  width: fit-content;
  font-size: var(--fs-medium);
  color: var(--color-white-light);
  margin-right: var(--padding-small);
}

.subnav-header > .btn-cancel > i:hover {
  color: rgba(255, 255, 255, 0.85);
}

/*--- main nav search ---*/
.search-main {
  display: flex;
  flex-direction: row;
  gap: var(--main-grid-gap);
  justify-content: center;
  align-items: center;
  padding: var(--main-grid-gap-large);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}
.subnav-search {
  width: 280px;
}

/* Subnav main list with dropdowns*/
.subnav-mainmenu > li {
  padding: 0 0.5em;
}

.newsletter-container.subnav-nl input {
  width: 280px;
}

.newsletter-container.subnav-nl input[type="submit"] {
  border: none;
  cursor: pointer;
}


.subnav-mainmenu > li > button {
  width: 100%;
  border-bottom: 1px solid var(--color-white-light-accent);
  padding: 1em var(--padding-small) 1em 0.5em;
  background-color: inherit;
  transition: all 350ms ease-in-out;
}

/* Darken border if sibling has .showSubMenu */
.btn-subnav-menu:has(+ ul.showSubMenu) {
  border-bottom: 1px solid var(--color-gray-light);
  background-color: var(--color-white-light);
}

.subnav-mainmenu > li > button:hover {
  background-color: var(--color-white-light);
}

.dropdown-title-container {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-medium);
  font-weight: 600;
}

.dropdown-title-container > i {
  transition: all 350ms ease-in-out;
}

/* Hide dropdown menu */
.subnav-main-item-sublist {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  transition: all 350ms ease-in-out;
  z-index: -1000;
}
.subnav-main-item-sublist > li {
  font-size: var(--fs-normal);
  font-weight: 400;
  padding: 0.75em 1em;
  background-color: inherit;
  transition: all 350ms ease-in-out;
}

.subnav-main-item-sublist > li:hover {
  background-color: var(--color-white-light-accent);
}

.activeMenuSlide {
  left: 0;
  visibility: visible;
  opacity: 1;
}

.showSubMenu {
  visibility: visible;
  opacity: 1;
  max-height: 300px;
  z-index: 10000;
}

.caretAnimate {
  transform: rotate(180deg);
}

.newsletter-container.subnav-nl {
  margin-top: var(--main-grid-gap);
  text-align: center;
  background-color: var(--color-white-light);
  padding: var(--main-grid-gap-large) var(--main-grid-gap);
  border-top: 1px solid var(--color-white-light-accent);
}

.newsletter-container input {
  margin-bottom: calc(var(--main-grid-gap) / 2);
}

.newsletter-container > p.small-text {
  max-width:40ch;
  margin: 0 auto var(--main-grid-gap-large) auto;
}

.nl-title {
  display: inline-block;
  font-size: var(--fs-xlarge);
  font-weight: 900;
  text-align: center;
  font-family: "Roboto Slab", sans-serif;
}

.signup-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .35em;
}
.newsletter-signup {
  align-items: center;
  justify-content: center;
}

.btn-signup {
  padding: 0.5em var(--main-grid-gap);
  background-color: #272727;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  outline: 2px solid var(--color-gray-dark);
  letter-spacing: 0.01em;
  height: 42px;
  margin-bottom: 8px;
  transition: background-color 350ms ease;
}

.btn-signup:hover {
  background-color: hsl(0, 0%, 5%);
}

/* ===============================
/*  Sliding Navigation (Subnav)
/* ==============================*/

/* Primary Nav hidden as default until third breakpoint */
nav#nav-primary {
  display: block;
}
/*CHANGE TO DISPLAY NONE AFTER */

#subnav {
  display: block;
}

.no-scroll {
  overflow: hidden;
}

.social-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--main-grid-gap-large);
  margin: var(--main-grid-gap-large) 0;

  & .icon-social {
    font-size: var(--fs-large);
    color: #b21a12;
    transition:color 350ms ease;
    &:hover {
      color: hsl(3, 82%, 28%);

    }
  }
}

/* ===============================
/*  MEDIA QUERIES
/* ==============================*/
@media (min-width: 598px) {
  /* width of slide menu */
  .subnav-menu-container {
    width: 400px;
  }

  /*-- NEWSLETTER ---*/
  .signup-container:not(.footer-signup) {
    flex-direction: column;
  }
  /* CHANGE DEFAULT WIDTH ON NEWSLETTER BUTTONS */
  .newsletter-container.subnav-nl .btn-signup {
    width: 280px; /*4px to account for border on input */
    margin-bottom: 8px;
  }
}

/*----  BREAKPOINT 2: 2 COLUMNS  ----*/

@media (max-width: 798px) {
}

/* STATE/BEHAVIOUR */
.hide-menu {
  max-height: 100vh;
  visibility: hidden;
  right: -100%;
  opacity: 0;
  z-index: -100;
}

/* set ul to z-index -100 when hidden to not interfere with buttons */
ul.nav-primary-list.right-wrap.hide-menu {
  z-index: -1000;
}

.show-menu {
  max-height: 100vh;
  right: 0;
  visibility: visible;
  opacity: 1;
  transform-origin: right;
  z-index: 100;
}

/*===============================
/* MIN 799px (3 columns)
=================================*/

@media (min-width: 799px) {
  /* Change padding-top to account for primary subnave visibility*/
  body {
    padding-top: calc(50px + calc(var(--header-min-height) / 2)); /* Adjust this value to match the navbar's height */
  }

  /* Move primary nav below when main-mobile nav is in fixed position*/
  .nav-main-mobile.sticky-nav-down .top-header .primary-nav {
    display: none;
  }

  /* Move primary nav below when main-mobile nav is in fixed position*/
  .nav-main-mobile:not(.sticky-nav-down).position-fixed .top-header .primary-nav {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    justify-content: space-between;
    background-color: white;
    border-top: #eee 1px solid;
    border-bottom: #eee 1px solid;
    font-weight: 500;
  }

  .top-header {
    justify-content: space-between;
    align-items: center;
  }

  /*  Primary Nav logo align center at 3 col*/
  .top-header > div.logo-wrapper {
    justify-content: center;
    align-items: center;
  }

/*  .top-header > div.logo-wrapper > img { */

  .top-header > div.logo-wrapper  img {
    width: 200px;
  }
  .top-header > div.logo-wrapper > h1 {
    font-size: var(--fs-small);
    font-weight: 500;
  }

  /* Logo align left on sticky nav */
  .nav-main-mobile.sticky-nav-down .top-header > div.logo-wrapper {
    grid-column-start: 1;
    width: fit-content;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 0; /* Remove padding to center logo*/
  }
  .nav-main-mobile.sticky-nav-down .top-header > div.logo-wrapper > h1 {
    width: 300px;
    font-weight: 400;
  }

  .right-wrap {
    grid-column-start: 3;
  }



  /* Primary Nav hidden until third breakpoint */
  nav#nav-primary {
    display: block;
    justify-content: right;
  }


 

  .subnav-menu-container {
    top: 0;
    height: 100vh;
  }

  /*========================
  SEARCH */
  /* Max-height on search dropdown 250px */
  .dropdown-wrapper {

    height: unset;
    width: 400px;
    right: var(--main-grid-gap-large);
    top: 100%;
    transition: all 350ms ease;
  }
  .dropdown-wrapper:has(.advanced-search-list.show-menu) {
    height:800px;
  }
  .search-filter.show-menu {
    /* height: unset; */
    height:65px;
    transition: all 350ms ease;
  }
  .search-filter > ul {
    margin-top: 0;
  }
  .search-filter.show-menu .search-filter-list {
    margin-block: var(--main-grid-gap-large) .75em;
  }
  .hide-menu {
    max-height: 0;
    z-index: -2000;
  }
  .show-menu {
    max-height:600px;
    /* max-height: 250px;RETURN AFTER ADVANCED */ 
    transform-origin: top;
    z-index: 2000;
  }
}

@media (min-width: 1070px) {
  /* change grid columns to auto to evenly spacing between header items (4 c0ol) */
  .top-header {
    grid-template-columns: auto;
  }

  /* Display menu links when sticky nav visible */
  .nav-main-mobile.sticky-nav-down .top-header .primary-nav {
    display: block;
  }

  /* Logo align left on sticky nav */
  .nav-main-mobile:not(.sticky-nav-down).position-fixed .top-header div.logo-wrapper {
    margin-left: 85px; /* Remove padding to center logo*/
  }
}


    /*  SINGLE Page */

    p {
      font-size: 1.1rem;
      line-height: 2;
      font-family: var(--font-family-open-sans)
    }



    .wrapper-page-view {
      width: min(90%, 660px);
      margin: 0 auto;


    }

    h2.art-title-full {
      margin-block: 1em;
      font-size: var(--fs-xxlarge);
      font-family: 'Open Sans', sans-serif;
      line-height: 1.3;
      padding-bottom: .5em;
      padding-inline: .25em;
      border-bottom: 1px solid rgba(0, 0, 0, .09);
      word-wrap: break-word;
      hyphens: auto;
    }



    article.full-article {
      padding-block: 2em;
      margin-block: 2em;
    }



    .article-text {
      margin-top: 2em;

    }

    .wp-block-quote,
    .quotation {
      font-size: 2rem;
      position: relative;

      margin: 1em auto;
      border-top: 2px solid rgba(0, 0, 0, .05);
      border-bottom: 1px solid rgba(0, 0, 0, .05);
      padding-block: .5em;
      width: 90%;


    }

    .wp-block-quote p,
    .quotation p {
      font-size: inherit;
      line-height: 1.3;


    }

    .wp-block-quote::before,
    .quotation::before {
      content: "\201C";
      position: absolute;
      top: -15px;
      left: -20px;
      font-size: 3.9em;
      font-family: Helvetica, sans-serif;
      color: rgba(0, 0, 0, .08);
    }

    .tags-view {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1em;
      margin-block: 2em;
      border-top: 1px solid rgba(0, 0, 0, .09);
      border-bottom: 1px solid rgba(0, 0, 0, .09);

      padding-block: 3em;

    }

    .tag-item {


      padding: .5em 1em;
      color: hsl(0, 0%, 45%);
      background-color: var(--color-brand-light);
      cursor: pointer;
      transition: background-color 350ms ease;
      width: fit-content;

      &:hover {
        background-color: var(--color-brand);
        color: #272727;
      }
    }

    .related-articles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 2;
      column-gap: 1em;
      margin-top: 1em;
      justify-content: space-around;
    }

    .related-articles>h3>a {
      font-size: 1rem;
      font-weight: normal;

    }

    .credit {
      font-size: small;
    }

    .more-articles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--main-grid-min-width)), 1fr));
      width: 100%;

    }

    article.preview {
      background-color: var(--color-about-gray);
    }

    .more-articles>article>.art-content {

      padding-inline: 1em;
    }

    /*  SIDEBAR */

    ul.sidebar-list {
      /* background-color: white; */
      padding-block: 1.5em;
      background-color: white;

      >li {
        padding: .5em 2em;
        border-top: 1px solid rgba(0, 0, 0, .05);
        font-size: var(--fs-base);

      }



    }

    .article-preview-outer {
      background-color: var(--color-about-gray);
      width: 100%;
      padding-block: 2em;

      h2 {
        width: 80%;
        margin: 1em auto;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
      }

    }

    .article-preview-wrapper {

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--main-grid-min-width)), 1fr));
      width: 80%;
      column-gap: 2em;
      margin: 1em auto;


      img {
        aspect-ratio: 16/9;
      }
    }

    .article-preview-wrapper>article {
      background-color: unset;
      color: var(--color-text);
      box-shadow: var(--box-shadow-soft);

      background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, transparent 0px, transparent 2px);
      background-size: 0;
      transition: background-size 350ms ease, background-image 350ms ease;

    }

    .article-preview-wrapper>article:hover>.art-content {
      background-image: repeating-linear-gradient(36deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 0px, transparent 2px);
      background-size: 12;

    }

    .article-preview-wrapper>article>.art-content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: .5em;
      padding-block: 1em;
      padding-inline: 1.5em;
      background-color: white;
      height: 210px;
    }

    @media (min-width: 799px) {
      .page-view-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 4em;

      }


    }


    /* Category Page */

    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .cat-header {

      text-align: center;
    }

/* Pagination wrapper */
.navigation.pagination {
  margin: 2rem 0;
  text-align: center;
}

/* Links container */
.navigation.pagination .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* All page links */
.navigation.pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  text-decoration: none;
  font-size: 0.9rem;
  color: #333;
  transition: all 0.2s ease;
}

/* Hover + focus */
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers:focus {
  border-color: #0073aa;
  color: #0073aa;
}

/* Current page */
.navigation.pagination .page-numbers.current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
  font-weight: bold;
}

/* Prev / Next links */
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  font-weight: 600;
}

/* Make touch targets bigger */
@media (max-width: 480px) {
  .navigation.pagination .page-numbers {
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
  }
}

/* search */

/* Base form styling */
.searchandfilter {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  background-color: #f9f9f9;
  border-radius: 8px;
}

/* Reset list styling */
.searchandfilter ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Each form item */
.searchandfilter li {
  display: flex;
  flex-direction: column;
  flex: 1 1 280px; /* grow/shrink, min width for each item */
  min-width: 200px;
}

/* Headings */
.searchandfilter h4 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: #333;
}

/* Inputs, selects, and buttons */
.searchandfilter input[type="text"],
.searchandfilter input[type="date"],
.searchandfilter select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  box-sizing: border-box;
}

/* Submit button */
.searchandfilter input[type="submit"] {
  padding: 0.6rem 1.2rem;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.searchandfilter input[type="submit"]:hover {
  background-color: #005f8d;
}

/* Optional: spacing for date range pair */
.searchandfilter li:nth-last-child(2),
.searchandfilter li:nth-last-child(3) {
  flex: 1 1 150px;
}

.searchandfilter li:nth-last-child(1),
.searchandfilter li:nth-last-child(2) {

  padding-top: 28px;
}


/* Responsive behavior */
@media (max-width: 768px) {
  .searchandfilter ul {
    flex-direction: column;
  }

  .searchandfilter li {
    width: 100%;
    flex-basis: auto;
  }

  .searchandfilter li:nth-last-child(1),
  .searchandfilter li:nth-last-child(2),
  .searchandfilter li:nth-last-child(3) {

    flex-basis: auto;
    padding-top: 20px;
  }

  .searchandfilter input[type="submit"] {
    width: 100%;
  }
}