/*

Use this as a template to work off of. It includes color variables,
typography scales and a responsive template.

*/

/* COLOURS-----------------

light blue: #73B0E0
dark blue: #1F396B
gray: #474B57
*/

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
  font-family: "Host Grotesk";
  src: url("/sites/default/files/fonts/HostGrotesk-Light.ttf")
    format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("/sites/default/files/fonts/HostGrotesk-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("/sites/default/files/fonts/HostGrotesk-SemiBold.ttf")
    format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("/sites/default/files/fonts/HostGrotesk-Bold.ttf") format("truetype");
  font-weight: 800; /* change to 800 only if file truly is 800 */
  font-style: normal;
  font-display: swap;
}

/* ===========================
   Responsive Typography (fluid)
   =========================== */

/* Root size scales with viewport; everything else uses rems */
html {
  /* ~16px on small screens → ~18px on desktop */
  font-size: clamp(16px, 1.1vw + 0.5rem, 18px);
}

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  font-family: "Host Grotesk", sans-serif;
  font-weight: 300;
  color: #474b57;
  line-height: 1.7;
}

p {
  margin-top: 0;
  font-size: 1rem;
} /* body copy follows root */
.intro-text p {
  font-weight: 600;
  line-height: 1.75;
  /* a touch larger than body, gentle slope */
  font-size: clamp(1.0625rem, 0.2vw + 1rem, 1.25rem);
}

.intro-text {
  text-align: center;
}

/* Headings (keep your colors/weights) */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.25em;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-family: "Host Grotesk", sans-serif;
  text-transform: none;
}

h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.75rem, 0.8vw + 2.5rem, 3.25rem);
} /* ~44–52px */
h2 {
  color: #1f396b;
  font-weight: 800;
  font-size: clamp(2.1rem, 0.6vw + 1.9rem, 2.5rem);
} /* ~34–40px */
h3 {
  color: rgba(33, 64, 113);
  font-weight: 600;
  font-size: clamp(1.7rem, 0.45vw + 1.55rem, 2rem);
} /* ~27–32px */
h4 {
  color: rgba(33, 64, 113);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.45rem, 0.35vw + 1.35rem, 1.7rem);
} /* ~23–27px */
h5 {
  color: #474b57;
  font-weight: 600;
  font-size: clamp(1.25rem, 0.25vw + 1.2rem, 1.5rem);
} /* ~20–24px */
h6 {
  color: #474b57;
  font-weight: 600;
  font-size: clamp(1.125rem, 0.2vw + 1.1rem, 1.25rem);
} /* ~18–20px */

/* ===========================
   Component-specific headings
   (replace px in old MQs)
   =========================== */

/* Hero/banner heading – big but fluid across breakpoints */
.view-banner .view-content h1,
.header-banner-front h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  /* scales from large mobile hero to desktop without jumps */
  font-size: clamp(2rem, 6.5vw + 0.25rem, 4.5rem);
}

/* Sub-featured block H2 – fluid, no hard px values */
#sub-featured .container-fluid .view-red-bottom-block h2 {
  line-height: 1.15;
  font-size: clamp(1.75rem, 3.5vw + 0.25rem, 3rem);
}

/* ===========================
   Media queries (typography only)
   Keep adjustments subtle; no absolute px
   =========================== */

/* Tablet and down: slightly more breathing room for big headings */
@media (max-width: 990px) {
  h1,
  h2 {
    letter-spacing: -0.01em;
  }
  .view-banner .view-content {
    width: min(90%, 1200px);
  } /* preserve your layout intent */
  /* Make intro text a nudge larger vs body on small screens for readability */
  .intro-text {
    font-size: clamp(1.125rem, 1.5vw + 1rem, 1.3125rem);
  }
}

/* Small tablets/large phones */
@media (max-width: 768px) {
  h1 {
    line-height: 1.15;
  }
  h2 {
    line-height: 1.2;
  }
}

/* Phones: keep banners readable; avoid cramming */
@media (max-width: 550px) {
  .view-banner .view-content h1,
  .header-banner-front h1 {
    /* same fluid idea, but lower cap and more line-height */
    font-size: clamp(1.875rem, 7.5vw + 0.25rem, 3rem);
    line-height: 1.2;
  }
}

/* Very small phones: prioritize legibility */
@media (max-width: 400px) {
  html {
    font-size: clamp(16px, 4.5vw, 17px);
  } /* slight bump to minimum copy size */
}

a.yellow-button {
  color: #fff;
  border: 2px solid rgba(33, 64, 113);
  background-color: rgba(33, 64, 113);
  padding: 10px 20px;
  font-weight: 600;
}
a.yellow-button:hover {
  background: #fff;
  color: rgba(33, 64, 113);
  border: 2px solid rgba(33, 64, 113);
}

/*
@media only screen and (min-width: 992px) {
.main-content .container  {
    width: 970px;
}
}
@media only screen and (min-width: 768px) {
    .main-content .container  {
        width: 750px;
    }
}

*/

/* --------------------------------------
-------------------- Footer
--------------------------------------- */
#footer-top {
  padding: 50px 0 0;
}
#footer-top .footer-top__container .row {
  display: flex;
  align-items: center;
}
#footer-top p {
  color: white;
}

#footer-top .paragraph--id--108 .paragraph__column {
  padding-bottom: 0;
}
#block-footercopyright {
  float: right;
  text-align: right;
}
/* --------------------------------------
-------------------- Menu
--------------------------------------- */

.logo {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5em;
}
@media (min-width: 975px) {
  .js-fixed .logo {
    height: 60px;
    max-width: 200px;
  }
}

.header-container ul.menu {
  margin: 1.5em 0 0 0;
}

.header-container ul.menu li.menuparent::after,
.header-container ul.menu li.sf-depth-1::after {
  content: "//";
  position: absolute;
  right: -5px;
  top: 15px;
  color: #474b57;
  font-size: initial;
}
.header-container ul.menu li a,
.header-container ul.menu li > span {
  padding: 15px;
  font-family: "Host Grotesk", sans-serif;
  color: #474b57;
  font-weight: 800;
  font-size: 1em;
}
.header-container ul.menu li a:hover,
.header-container ul.menu > li > a.is-active:hover,
.header-container ul.menu li > span:hover {
  background: none;
  color: rgba(33, 64, 113);
}

.header-container ul.sf-menu .sf-sub-indicator {
  display: none;
}

.header-container .sf-menu.menu ul[role="menu"] {
  background-color: rgba(51, 51, 51, 0.96);

  & > li > a {
    color: white;

    &:hover {
      color: #73b0e0;
    }
  }
}

.header-container ul.menu li a:hover,
.header-container ul.menu > li > a.is-active:hover,
.header-container ul.menu li > span:hover {
  color: #73b0e0;
}

/* Grids
-------------------------------------------------- */
/*
You can either apply these classes to the appropriate place
(typically in views-row if using views) or change the classes here.
This is not needed but gives you more flexibility with grids
over Bootstrap
*/

.fully-responsive-grid {
  /* using Grid */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* --------------------------------------
-------------------- Banner
--------------------------------------- */
.view-banner {
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.view-banner .view-content {
  width: 60%;
  margin: auto;
}
.view-banner h1 {
  text-align: left;
}
.view-banner h1 span {
  color: #73b0e0;
}

.clearfix.text-formatted.field.field--name-body.field__item
  > div:has(.header-banner-front) {
  position: relative;
}

.clearfix.text-formatted.field.field--name-body.field__item
  > div:has(.header-banner-front)
  > div:has(.header-banner-front) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-banner-front {
  /*position: absolute;
  top: 100px;
  left: 15%;*/
  width: 70%;
  /*margin: auto;
  display: inline-block;*/
  text-align: center;
}
/*@media (max-width: 1500px) {
  .header-banner-front {
    top: 100px;
  }
}*/
@media (max-width: 1400px) {
  .header-banner-front {
    /*top: 50px;*/
    width: 80%;
  }
}
@media (max-width: 1200px) {
  .header-banner-front {
    /*top: 50px;
    left: 5%;*/
    width: 90%;
  }
}
/*@media (max-width: 990px) {
}
@media (max-width: 768px) {
  .header-banner-front {
    top: 20px;
    left: 5%;
    width: 90%;
  }
}
@media (max-width: 600px) {
  .header-banner-front {
    top: 10px;
    position: relative;
  }
}*/

.view-content
  .views-row
  .views-field.views-field-field-banner-text
  .field-content
  h1,
.header-banner-front h1 {
  text-shadow: darkslategrey 1px 1px 2.5px;
}
.header-banner-front h1 {
  margin-block: 2rem;
}
@media (max-width: 600px) {
  .header-banner-front h1 {
    /*color: #474b57;*/
    margin-block: 0;
  }
}

.header-banner-front span {
  color: #1f396b;
}

.clearfix.banner__container
  > div.row
  > div:has(> div.banner__section div.header-banner-front) {
  padding-inline: 0;
}

.page-node-49 #banner .container-fluid {
  background: none;
}
.page-node-49 #banner .container-fluid .banner__container .col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

.page-node-49 .main-content__section {
  padding-top: 60px;
}

.paragraph--color--rgba-indigo-slight {
  background: rgba(115, 176, 224, 0.3);
  padding: 2%;
}

/* --------------------------------------
-------------------- Red Block
--------------------------------------- */

#sub-featured {
  background-image: url(/sites/default/files/2025-11/production-plastic-squares.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
#sub-featured .container-fluid {
  background: rgba(33, 64, 113, 0.67);
}

.page-node-49 #sub-featured .container-fluid {
  background: rgba(33, 64, 113, 0.67);
}

.page-node-54 #sub-featured,
.page-node-55 #sub-featured {
  background-image: none;
}

#sub-featured
  .container-fluid
  .view-red-bottom-block
  .view-content
  .field-content {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#sub-featured
  .container-fluid
  .view-red-bottom-block
  .view-content
  .field-content
  .field--name-bp-text {
  overflow-x: auto;
}
.page-node-54
  #sub-featured
  .container-fluid
  .view-red-bottom-block
  .view-content
  .field-content,
.page-node-55
  #sub-featured
  .container-fluid
  .view-red-bottom-block
  .view-content
  .field-content {
  display: none;
}
.page-node-51 .view-red-bottom-block {
  padding: 50px 0;
}
#sub-featured .container-fluid .view-red-bottom-block h2,
#sub-featured .container-fluid .view-red-bottom-block h2 > a,
#sub-featured .container-fluid .view-red-bottom-block p {
  color: white;
}

table,
table tr th {
  margin: auto;
  color: white;
}
table tr:last-child td,
table tr th {
  border-bottom: none;
}
table tr td,
table tr th {
  font-size: 17px;
  font-weight: 600;
}
table tr td {
  padding: 0px 15px 15px;
}
table tr th {
  padding: 12px 15px;
}
.field--name-bp-text li {
  color: black;
}
.view-id-red_bottom_block .view-content .views-row {
  width: 60%;
  margin: auto;
}

/* --------------------------------------
-------------------- Partner
--------------------------------------- */
.partner-view-block {
  margin-bottom: 50px;
  height: max-content;
  min-height: 100px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.header-container ul.menu.sf-accordion {
  margin-bottom: 15px;
}

#cboxTitle {
  background: #1f396baa;
  color: white;
}
.view-project-gallery .view-content ul li {
  width: 100%;
  float: none;
  padding: 0;
}
.view-project-gallery .view-content .field-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.view-project-gallery .view-content .field-content a {
  display: block;
  min-width: 0;
}
.view-project-gallery .view-content .field-content img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 991px) {
  .view-project-gallery .view-content .field-content {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 575px) {
  .view-project-gallery .view-content .field-content {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: 8px;
  }
}
.view-project-gallery .view-content h3 {
  text-align: center;
  background: #f2f2f2;
}
.map-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there. Remove the type of design you are not using (Mobile vs Desktop)
*/

/* Desktop First Design
----------------------------*/

@media (min-width: 990px) {
  .paragraph.paragraph--width--full > .paragraph__column,
  .paragraph.paragraph--width--medium > .paragraph__column,
  .paragraph.paragraph--width--narrow > .paragraph__column,
  .paragraph.paragraph--width--tiny > .paragraph__column,
  .paragraph.paragraph--width--wide > .paragraph__column,
  .paragraph > .paragraph__column {
    padding-left: 0;
  }

  .paragraph.paragraph--type--bp-columns .paragraph--type--bp-columns__2col {
    padding-left: 0;
  }
}

/* Larger than Desktop HD */
@media (max-width: 1200px) and (min-width: 768px) {
}

/* Larger than desktop */
@media (max-width: 1000px) {
}
@media (max-width: 990px) {
  .view-banner .view-content {
    width: 90%;
  }
  .header-container ul.menu li.menuparent::after,
  .header-container ul.menu li.sf-depth-1::after {
    content: "";
  }
}

@media (max-width: 767px) {
  .view-id-red_bottom_block .view-content .views-row {
    width: 80%;
  }
}

/* Larger than phablet (also point when grid becomes active) */
@media (max-width: 550px) {
  .view-id-red_bottom_block .view-content .views-row {
    width: auto;
  }

  #footer-top .footer-top__container .row {
    display: block;
  }
  #block-footercopyright {
    text-align: center;
  }
  #footer-top p {
    text-align: center;
  }
}

/* Larger than mobile */
@media (max-width: 400px) {
}