/**
 * Typography & Text styles
 */

/* html is set to 62.5% so that all the REM measurements are based on 10px sizing. So basically 1.5rem = 15px */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.9em;
  line-height: 1.8;
  font-weight: 400;
  font-family: "Raleway", sans-serif;
  color: #FFFFFF;
  max-width: none;      
  margin: 0;            
}

/**
 * Links
 */

a {
  font-weight: normal;
  text-decoration: none; 
  color:#EF6D3D;
}


a:focus {
  outline: thin dotted;
}

small {
  font-size: 75%;
}

/**
 * Headings
 */
h1, h2, h3 {
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: 0.6em; /* less space */
  font-family: "Raleway", sans-serif; /* cleaner font */
  font-weight: 800; /* thinner look */
}


/** h1,
h2,
h3,
{
  line-height: 1;
  text-rendering: optimizeLegibility; /*  voodoo to enable ligatures and kerning | https://developer.mozilla.org/en-US/docs/CSS/text-rendering */
/**
margin-top: 0;
  margin-bottom: 1.3em;
  font-weight: 200;
}
h1 { font-size: 3.4rem; line-height: 1.25; letter-spacing: -.1rem; font-family: 'Indie Flower', serif;}
h2 { font-size: 2.8rem; line-height: 1.3;  letter-spacing: -.1rem; font-family: 'Indie Flower', serif;}
h3 { font-size: 2.4rem; line-height: 1.3;  letter-spacing: -.1rem; font-family: 'Indie Flower', serif;}
*/

/**
 * Paragraphs
 */
p {
  margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */
}

p + p {
}

/**
 * Quotes & Blockquotes
 */


q {
  quotes: '\00201C' '\00201D';
}


q:before {
  nt: open-quote;
}

q:after {
  content: close-quote;
}

blockquote {
  /*background-color: #F8F8F8;*/
  border-left: 2px solid #bbddd4;
  margin: 1.6em 10%;
  padding: .75em 1em;
  font-size: 1.6em;
}


blockquote p:last-child {
  margin-bottom: 0;  
}

/**
 * Layout styles
 */

/* Full size background image */
html, #container, .inner { background-color:transparent;}
html, body {
  height: 100%;           
  margin: 0;              
  padding: 0;
  background: url(background.jpg) center center no-repeat fixed;
  background-size: cover;
}
body {
  margin:25px auto;
}

/* Header spans menu + content */
header {
  display: flex;
  flex-direction: row;      
  align-items: flex-start;
  background: rgba(187, 221, 212, 0.3);
  color: #FFFFFF;
  padding: 25px;
  margin-left: 20px;
  margin-right: auto;
  box-sizing: border-box;
}

/* Make text area vertical inside header */
.header-text {
  display: flex;
  flex-direction: column;
  margin-left: 30px; 
  margin-top: 30px; 
}

/* Content only (not header) is limited */
#content {
  padding: 25px;
  background: rgba(187, 221, 212, 0.3);
  color: #FFFFFF;
  margin-left: 20px;            
  box-sizing: border-box;
}

#contact .icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  filter: invert(1);      /* makes black SVGs white */
  margin-right: 8px;      /* space between icon and text */
}

#contact a {
  margin-right: 15px;     /* spacing between icons */
  text-decoration: none;
  color: white;           /* email text also white */
}

#contact a:hover {
  text-decoration: underline;
}

/* Footer spans full width */
footer { 
  background: rgba(187, 221, 212, 0.3);
  padding: 25px;
  color: #FFFFFF;
  width: 100%;        
  margin: 20px;          
  box-sizing: border-box; 
}

header {
  width: calc(1000px + 200px);
  max-width: calc(1000px + 200px);
}

#content {
  width: 1000px;
  max-width: 1000px;
}

footer {
  width: calc(1000px + 200px);
  max-width: calc(1000px + 200px);
}

.outreach-conclusion {
  width: calc(1000px + 200px);
  max-width: 100%;
}

iframe {
  max-width:100%;
}


/* Wrapper for menu + content */
#page-wrapper {
  display: flex;
  flex-direction: row;   
  align-items: flex-start;
}

/* Menu fixed width */
ul.main-menu {
  width: 200px;
  margin: 0;
  padding: 20px 70px;    
  display: flex;
  flex-direction: column;
  list-style: none;
  box-sizing: border-box;
}

ul.main-menu li {
  margin-bottom: 1rem;
}

ul.main-menu li a {
  font-size: 1.1em;
  color: #bbddd4;
  text-decoration: none;
  border-bottom: solid transparent 3px; 
}

ul.main-menu li a:hover {
  color: #FFFFFF;
}

ul.main-menu li a.active {
  color: #FFFFFF;
  border-bottom-color: #EF6D3D;
}

/* Header and content stacking on small screens */
.header, .content, .footer {
  display: flex;
  flex-direction: column; 
}

.logo {
  max-width: 150px;   
  width: 100%;        
  height: auto;       
}

/* Utility classes */
.hide {
  display:none;
}
.show {
  display:block;
}

/* Outreach wrapper - align top */
.outreach-wrapper {
  display: flex;
  align-items: flex-start;   /* align top, not center */
  gap: 20px;
  margin-bottom: 10px;
}

.outreach-intro {
  flex: 2;
  font-size: 1em;
  text-align: justify;
  text-justify: inter-word;
}
.outreach-intro p:last-child {
  margin-bottom: 0em; /* remove extra bottom margin from last paragraph */
}
.outreach-image {
  flex: 1;
  align-self: flex-start; /* current default */
  margin-top: 20px;       /* pushes it down */
  text-align: center;
}

.outreach-image img {
  width: 80%;
  max-width: 400px; 
  height: auto;
  border-radius: 8px;
}

/* Full-width conclusion - same background as content */
.outreach-conclusion {
  margin-top: 10px;
  padding: 25px;
  background: transparent; /* same as header/content/footer */
  color: #fff;
  margin-left: 20px;
  box-sizing: border-box;
  text-align: justify;
  text-justify: inter-word;
}

/* Outreach items */
.outreach-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 0px;
}
.outreach-item p:last-child { margin-bottom: 0; /* remove extra bottom margin from last paragraph */ }
.outreach-item-text {
  flex: 2;
  font-size: 1em;
  width: 100%;   /* allow full width */
  text-align: justify;
  text-justify: inter-word;
}

.outreach-item-image {
  flex: 1;
  text-align: center;
  text-justify: inter-word;
  align-self: flex-start; /* current default */
  margin-top: 70px;       /* pushes it down */
  margin: 0; 
}

.outreach-item-image img {
  width: 80%;
  height: auto;
  border-radius: 8px;
    margin-top: 70px; /* pushes the image down relative to text */
}

.icon {
  width: 20px;
  height: 20px;
  margin: 0 8px;
  vertical-align: middle;
}

/* Social links row */
.social-links {
  margin-top: 10px;
}


.mobile-title { display: none; }

#back-to-top {
  position: fixed;
  bottom: 30px;          /* distance from bottom */
  left: 75px;            /* bottom left */
  z-index: 100;
  background-color: rgba(187, 221, 212, 0.5); /* match header/footer */
  color: #fff;
  border: none;
  font-size: 2.8rem;         /* bigger arrow */
     font-weight:900;
width: 70px;
height: 70px;
padding: 0;          /* let width/height define size */
  border-radius: 50%;         /* keep it circular */
  cursor: pointer;
  display: none;         /* hidden by default */
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  transition: background 0.3s, transform 0.2s;
}

#back-to-top:hover {
  background-color: rgba(187, 221, 212, 0.6);
  transform: translateY(-2px);
}

  .page-last-updated {
  margin-top: 60px;            /* creates vertical space from main text */
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.25);  /* subtle separator line */
  font-size: 1.2rem;           /* smaller text */
  text-align: right;           /* align to the right */
  color: rgba(255,255,255,0.65);
  font-style: italic;
}

/* ======= MOBILE RESPONSIVE MODIFICATIONS (PHONE) ======= */
@media (max-width: 768px) {
.desktop-title { display: none; }
.mobile-title { display: block; }

  header {
    flex-direction: column;
    align-items: center;
    margin: 0; /* ✅ align flush */
    width: 100%; 
    max-width: 100%;
    padding: 15px;
    background: rgba(187, 221, 212, 0.3); /* ✅ consistent background */
  }

  .header-text {
    text-align: center;
    margin-left: 0;
    margin-top: 15px;
  }

  header img {
    display: block;
    margin: 0 auto;
    max-width: 80%;
    height: auto;
  }
  
  /* Menu: centered horizontally */
  #page-wrapper {
 display: flex;
  flex-direction: column;
  align-items: center;  /* optional, centers content horizontally */
  width: 100%;          }

ul.main-menu { width: 100%; 
              padding: 10px 0; 
              display: flex; /* make it a flex container */ 
              flex-direction: row; 
              flex-wrap: wrap; /* allow items to move to the next line */ 
              justify-content: center; 
              gap: 15px; } 
  
ul.main-menu li a { font-size: clamp(1.1rem, 1vw + 1rem, 2rem); 
                   text-align: center; /* optional: center text on wrapped items */ }  
  
  #content {
    margin: 0 0 15px 0; /* ✅ flush left/right */
    width: 100%;        /* ✅ full width */
    max-width: 100%;
    padding: 15px;
    background: rgba(187, 221, 212, 0.3); /* ✅ consistent background */
    box-sizing: border-box;
  }

  .outreach-intro-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: justify;
    text-justify: inter-word;
    gap: 15px;
  }

  .outreach-intro {
    width: 100%;
    margin-bottom: 5px;
  }

    .outreach-image {
  display: flex;               /* turn container into flex */
  justify-content: center;     /* center its children (the img) horizontally */
  width: 100%;                 /* make sure container spans full width */
}

  .outreach-image img {
    width: 40%;
    height: auto;
    border-radius: 8px;
    display: block;     /* make it behave like a block */
    margin: 0 auto;     /* center horizontally */
  }

  .outreach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 10px;
  }

   .outreach-item figure figcaption {
    max-width: 95%;   /* keeps text readable */
    margin-left: auto;
    margin-right: auto;
    font-size: 0.75em;
  }
  
  .outreach-item figure {
    width: 95%;       /* not full screen, just a bit inset */
    margin: 0 auto;   /* center it */
  }
.outreach-item-text p {
  margin-bottom: 5px; /* reduce space between paragraphs */
}

  .outreach-item figure img {
    width: 100%;
    height: auto;
  }
  
  .outreach-item p:last-child { margin-bottom: 0; }

  
.outreach-item-image {
  display: flex;
  flex-direction: column;   /* stack image + text vertically */
  align-items: center;      /* center both horizontally */
  text-align: center;       /* center text content */
  margin: 0 auto;
}

.outreach-item-image img {
  display: block;
  width: 80%;
  max-width: 150px;
  height: auto;
    margin-top: 10px; /* pushes the image down relative to text */

}
  

  .outreach-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 5px;
  }

  .outreach-intro p:last-child {
    margin-bottom: 0;
  }

  .outreach-conclusion {
    width: 100%; /* ✅ span full width */
    max-width: 100%;
    margin: 10px 0 0 0;
    padding: 15px;
    background: transparent; /* ✅ consistent background */
    box-sizing: border-box;
    text-align: justify;
    text-justify: inter-word;
  }  

    .email-line {
    text-align: center;
    margin-bottom: 10px;
  }

  .social-links {
    display: flex;
    justify-content: center; /* center items horizontally */
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;       /* full width of parent */
    margin: 0 auto;    /* center if parent has auto margins */
  }

  .social-links a {
    display: inline-block;
  }

  #back-to-top {
  position: fixed;           /* stick to the viewport */
  bottom: 30px;              /* 30px above the bottom */
  right: 50px;               
  z-index: 9999;             /* stay on top of everything */
  
  width: 70px;
  height: 70px;
  border-radius: 50%;        /* perfect circle */
  
  background-color: rgba(187, 221, 212, 0.5);
  border: 2px solid rgba(0,0,0,0.3);
  color: #fff;
  font-size: 2.8rem;
  font-weight: 900;
  
  cursor: pointer;
  display: none;             /* hidden by default */
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  transition: background 0.3s, transform 0.2s;
  
  /* Center the arrow inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .page-last-updated {
  margin-top: 60px;            /* creates vertical space from main text */
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.25);  /* subtle separator line */
  font-size: 1.2rem;           /* smaller text */
  text-align: right;           /* align to the right */
  color: rgba(255,255,255,0.65);
  font-style: italic;
}
  
}

/* ======= TABLETS & SMALL LAPTOP WINDOWS ======= */
@media (min-width: 769px) and (max-width: 1200px) {
  header,
  #content,
  footer,
  .outreach-conclusion {
    width: 90%;        /* match all main blocks */
    max-width: 100%;   /* adapt to window */
    margin: 0 auto;    /* center */
    box-sizing: border-box;
  }
  .outreach-intro-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: justify;
    text-justify: inter-word;
    gap: 15px;
  }

  .outreach-intro {
    width: 100%;
    margin-bottom: 5px;
  }
  .outreach-intro p:last-child {
    margin-bottom: 0;
  }

  .outreach-image {
  display: flex;               /* turn container into flex */
  justify-content: center;     /* center its children (the img) horizontally */
  width: 100%;                 /* make sure container spans full width */
}

  .outreach-image img {
    width: 70%;
    height: auto;
    border-radius: 8px;
    display: block;     /* make it behave like a block */
    margin: 0 auto;     /* center horizontally */
  }

  .outreach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 10px;
  }

   .outreach-item figure figcaption {
    max-width: 95%;   /* keeps text readable */
    margin-left: auto;
    margin-right: auto;
    font-size: 0.75em;
  }
  
  .outreach-item figure {
    width: 95%;       /* not full screen, just a bit inset */
    margin: 0 auto;   /* center it */
  }

  .outreach-item figure img {
    width: 100%;
    height: auto;
  }

  
.outreach-item-text p {
  margin-bottom: 5px; /* reduce space between paragraphs */
}

.outreach-item-image {
  display: flex;
  flex-direction: column;   /* stack image + text vertically */
  align-items: center;      /* center both horizontally */
  text-align: center;       /* center text content */
  margin: 0 auto;
}

.outreach-item-image img {
  display: block;
  width: 80%;
  max-width: 150px;
  height: auto;
    margin-top: 10px; /* pushes the image down relative to text */

}
  

  /* Menu: centered horizontally */
  #page-wrapper {
 display: flex;
  flex-direction: column;
  align-items: center;  /* optional, centers content horizontally */
  width: 100%;          }

ul.main-menu { width: 100%; 
              padding: 10px 0; 
              display: flex; /* make it a flex container */ 
              flex-direction: row; 
              flex-wrap: wrap; /* allow items to move to the next line */ 
              justify-content: center; 
              gap: 15px; } 
  
ul.main-menu li a { font-size: clamp(1.1rem, 1vw + 1rem, 2rem); 
                   text-align: center; /* optional: center text on wrapped items */ }  
 #back-to-top {
  position: fixed;           /* stick to the viewport */
  bottom: 30px;              /* 30px above the bottom */
  right: 50px;               
  z-index: 9999;             /* stay on top of everything */
  
  width: 70px;
  height: 70px;
  border-radius: 50%;        /* perfect circle */
  
  background-color: rgba(187, 221, 212, 0.5);
  border: 2px solid rgba(0,0,0,0.3);
  color: #fff;
  font-size: 2.8rem;
  font-weight: 900;
  
  cursor: pointer;
  display: none;             /* hidden by default */
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  transition: background 0.3s, transform 0.2s;
  
  /* Center the arrow inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;
 }

    .social-links {
    display: flex;
    justify-content: center; /* center items horizontally */
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;       /* full width of parent */
    margin: 0 auto;    /* center if parent has auto margins */
  }

  .social-links a {
    display: inline-block;
  }

  .page-last-updated {
  margin-top: 60px;            /* creates vertical space from main text */
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.25);  /* subtle separator line */
  font-size: 1.2rem;           /* smaller text */
  text-align: right;           /* align to the right */
  color: rgba(255,255,255,0.65);
  font-style: italic;
}

}