@import url('https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root {
    --primary-color: #6c6c6c;          /* dark grey */
    --secondary-color: #02a3c0;    /* teal */

    --heading-color: #6c6c6c;          /* h2, h4, h6 grey */
    --hover-color: #02a3c0;   /* teal */

    --button-color: #02a3c0;   /* teal */
    --background-color: #f5f0d1;    /* light yellow */

    --offer-blen-color: #346779;    /* dark blue*/
    --offer-emul-color: #8c8646;    /* olive*/
    --offer-sul-color: #4a9691;    /* green */
}

#tinymce { background-color: #fff; }
.ui-widget-overlay {     background-color: #fff;     }
body {   font-family: "Open Sans", sans-serif;  background-color: white; }
#skiptocontent a {   position: absolute;   left: -9999px; }
#skiptocontent a:focus {   left: 0; }

/* HEADER */
header .container { background-color: transparent; }
header.top-header  { background-color: #fff; padding: 20px 17px 20px 50px; }

/* Logo */
.banner-image img {  padding-top: 0; padding-bottom: 10px;  max-width: 300px; }
   @media screen and (max-width: 600px) { .top-header a img { padding-bottom:20px; }}
.top-header a img:hover { opacity: 1; }
a img:hover { opacity: 0.7; }

.navbar { padding: 1rem 1rem 0; float: right; }
nav .container { padding-left: 0; }
menu { background-image: none; }
.primary-menu .menu, .primary-menu .menu a, .primary-menu .menu a:hover, .primary-menu .menu a.active, .secondary-menu .menu, .secondary-menu .menu a { background-color: #fff;  background-image: none; letter-spacing: 5%;}

.primary-menu a {  font-family: "Anton", sans-serif; color: #777a7b;   padding: 0 10px;   text-transform: uppercase;  font-size: 1.8rem; }
.primary-menu a:hover,  .primary-menu a.active, .primary-menu .menu a.active {   color:var(--hover-color);   }
.menu a, .menu a:visited { color: #777a7b; }
 .menu a:hover,   .menu a.active  {  color:var(--hover-color); font-family: "Anton", sans-serif;}
.menu  { margin: 10px 20px; }

/* Secondary menu styles */
.secondary-menu {  padding: 0.5rem 0;  background-image: none; text-transform: uppercase; }
.secondary-menu .menu a {   color: #575757;     padding: 0 15px;     font-weight: 700;     }
.secondary-menu .menu a:hover, .secondary-menu .menu a.active {   color:var(--hover-color); }

/* Child menus */
.menu li li {  float: none; padding: 9px 10px 9px 0; }
.primary-menu-item ul {  position: absolute;  z-index: 999; }
.menu li > a:after {  font-family: "Font Awesome 6 Pro"; content: " \f107"; } 
.menu li > a:only-child:after { content: ''; }

.menu .details-slide.opened {   background-color: transparent; padding-left: 0; border: 1px solid #cecdcd;}
.menu .details-slide.opened ul.details-slide {   margin-left: 100px; width: max-content;}
.secondary-menu ul ul li { padding-left: 0; }
.secondary-menu ul ul { padding-left: 15px;}

/*mobile menu hamburger*/
.small-hidden-menu .xs-opener { color: #fff; border: none;  background-color:var(--secondary-color); margin-top: 30px; margin-right: 20px;  padding: 13px 15px;   }
.small-hidden-menu .xs-opener:hover { color: #fff; background-color:var(--primary-color); }
.fa-bars:before { color: #fff;  font-size: 2rem; }

/*mobile menu*/
.small-hidden-menu .details-slide.menu { right: 10px; left: unset; width: 40%;  background-color: #fff; margin-top: 170px;  padding: 20px; box-shadow: 0 0 0 rgba(0,0,0,0);   opacity: 0;   transform: translateY(-10px);    max-height: 0;   overflow: hidden;   transition: all 0.3s ease;}
.small-hidden-menu .details-slide.opened {  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1050; opacity: 1;   transform: translateY(0); max-height: 300px;}
.small-hidden-menu ul li { text-align: left; padding-left: 0; line-height: 2.5; }
.small-hidden-menu ul li > a:after  { display: none; }

#main-content {  background: #fff;  border-top: 1px solid #ddd;}
#middle-panel, #right-panel   { margin-top: 30px; margin-bottom: 30px;    }
#content-extra {     margin-bottom: 40px; }
#content-top { width:100%; }
#content-extra img { width:100%; }
@media screen and (max-width: 600px) {   #middle-panel { margin-bottom: 10px; }  
  #right-panel { margin-bottom: 0; }
  #content-top,  #content-bottom { padding: 0 15px; }
  #content-top { padding: 0 25px; } }


/* ----------------------------------------------------------
   Extra Content
   ---------------------------------------------------------- */

/* Hide the hero when its content section is empty */
.page-hero:has(.fd-section:empty) {     display: none; }

.page-hero {
    position: relative;
    overflow: hidden;
    background: #0293ad;
    padding: 4rem 0;
}

#content-extra .container {
    background: transparent;
    position: relative;
    z-index: 1;
}

#content-extra .page-hero-inner {
    max-width: 80%;
    margin: 0 auto;
}

#content-extra h1 {   font-size: 5.5rem;   margin: 0 0 1rem; color:#fff; }
    @media screen and (max-width: 768px) {       #content-extra h1     { font-size: 4rem; } }
    @media screen and (max-width: 576px) {   #content-extra h1 { font-size: 3rem; } }

#content-extra p {     line-height: 1.7; color:#fff; }
#content-extra p a { color:#fff; text-decoration: underline;}
#content-extra p a:hover { color:#ffffffba; text-decoration: none;}

/* Right-hand image: full-bleed, cropped to fill the right half of the section */
.page-hero-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 0;
}

.page-hero-image .cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stack below the text on smaller screens (matches col-lg-6 breakpoint) */
@media screen and (max-width: 991.98px) {
    .page-hero-image {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 300px;
        margin-top: 2rem;
    }
}

@media screen and (max-width: 576px) {
    .page-hero-image {
        height: 220px;
    }
}

.social { float:right; margin-bottom: 0px;     margin-right: 10px; }
.social a { color: #fff; font-size: 2.2em; text-decoration: none;}
.social a:hover { color: #e67724;  }

p, ul li, ol li {   color: #000; font-size: 1.15rem; }
p { line-height: 2.1;  }
ul li, ol li  { line-height: 1.8; margin-bottom: 0.7em; }
.intro { font-size: 1.5em; font-weight: 500; line-height: 1.8; margin: 1em 0; }
.box ol, .box ul { margin: 6px 10px 0 10px;     padding-left: 20px; }

h1, h2, h3, h4, h5 { font-family: "Anton", sans-serif; letter-spacing: 5%; }

h1 {     font-size: 3em;     color:var(--primary-color);  margin-bottom: 0.5em;     line-height: 1.2; }
h1 a, h1 a:visited { color:var(--primary-color);  }
h2 { font-size:1.8em; color:var(--heading-color);  margin-top:1em; margin-bottom:1em;  line-height: 1.3;} 
h2 a, h2 a:visited { color:var(--heading-color);}
h3 { font-size:1.6em; color:var(--primary-color);  margin-top: 1em; margin-bottom:0.4em; line-height: 1.4;}
h3 a, h3 a:visited { color:var(--primary-color);}
h4 { font-size:1.4em; color:var(--heading-color);   margin-top: 1.2em;  margin-bottom: 0.4em; line-height: 1.35;}
h4 a, h4 a:visited { color:var(--heading-color);  }
h5 { font-size:1.3em; color:var(--primary-color);  margin-bottom:0.4em; line-height: 1.4;}
h5 a, h5 a:visited { color:var(--primary-color); }
h6 { font-size:1.2em; color:var(--heading-color);  font-weight:700; margin-bottom:0.4em; margin-top: 1em; line-height: 1.4;}
h6 a, h6 a:visited { color:var(--heading-color);  }

a { color: #4055a0; text-decoration: none; }
a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {   text-decoration: none;   color: #4383c7; }
strong { color: inherit; }
a strong, a strong:visited { color: #428bca; }
a strong:hover, strong a:hover { color: #0a8de9; }

legend { font-size:1.2em; color:var(--secondary-color);  background-color:transparent;}
dt label { color:var(--primary-color);  }
.small { font-size: 1em; line-height: 1.4;}
.highlight { color:#F00; }

img.img-responsive.img-fluid {     padding: 30px 0; }

/* CUSTOM CLASSES */
/* BUTTONS — class is applied directly to the <a>, no wrapper spans */

a.button {
  font-family: "Anton", sans-serif; letter-spacing: 5%; 
display: block;
  width: 100%;
  text-align: center;
  color: var(--button-color);
  background-color: #fff;
  border: 2px solid var(--button-color);
  padding: 10px 30px;
  font-size: 1.3em;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
}

a.button:visited { color: var(--button-color); }
a.button:hover {   background-color: var(--button-color);   color: #fff; }

/* Small button — inherits .button, overrides a few properties */
a.button.button-small {
  display: inline-block;
  width: auto;
  color: #fff;
  border: none;
  padding: 6px 18px;
  font-size: 0.9em;
  background-color: var(--primary-color);
}

a.button.button-blen, a.button.button-blen:visited { color: var(--offer-blen-color); border: 2px solid var(--offer-blen-color);}
a.button.button-blen:hover {   background-color: var(--offer-blen-color);  color: #fff; }
a.button.button-emul, a.button.button-emul:visited { color: var(--offer-emul-color); border: 2px solid var(--offer-emul-color);}
a.button.button-emul:hover {   background-color: var(--offer-emul-color);  color: #fff; }
a.button.button-sul, a.button.button-suf:visited { color: var(--offer-sul-color); border: 2px solid var(--offer-sul-color);}
a.button.button-sul:hover {   background-color: var(--offer-sul-color);  color: #fff; }

a.button.button-small:hover, a.button.button-small:active {   background-color: var(--button-color);   color: #fff; }

/* Base style for all background boxes */
.background { background-color: #ececec; padding: 25px 30px;  margin: 1.5em 0 5px 0;  border-radius: 8px; }
.background-dark {  background-color:var(--background-color); }

.rule { border-bottom: 2px solid #aaaea7; padding-bottom: 10px; margin-bottom: 30px;}
.rule a, .rule a:visited   { text-decoration:none; }
.rule a:hover { color:#0392eb; text-decoration:none; }
.background.rule  { margin-bottom: 0; }
.caption { line-height:1.4; font-size:0.9em; }
figure.image figcaption {  border-bottom: none;  margin-bottom: 20px; } 
.paddingnone { padding-bottom: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; }
blockquote {   font-weight:500;  font-size:1.2rem; margin: 0.5em 0 1.5em 0;  padding-left: 30px; border-left: 4px solid #a09f9f; }
blockquote p {  color:#555; font-size:1.6em;}

/* ===================================================================
   OFFERING BOXES (Pacific Waste / Waste to Fuels / Consulting)
   =================================================================== */

.offering-row {   align-items: stretch;   padding-top: 2rem;
    padding-bottom: 4rem;   /* row-level: every column stretches to match the tallest */ }

/* Each Bootstrap column is also a flex container, so its child (.offering-box)    can be told to fill 100% of that stretched height. */
.offering-row > [class*="col-"] {   display: flex; }

.offering-box {
  display: flex;
  flex: 1 1 auto;              /* fill the full width of its column */
  align-items: center;         /* vertical centring */
  justify-content: center;     /* horizontal centring */
  width: 100%;
  min-height: 220px;           /* consistent box height — raise/lower to taste */
  padding: 40px 30px;
border-radius: 10px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.offering-box:hover,
.offering-box:focus {
  opacity: 0.7;
  text-decoration: none;
}

.offering-box h2 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  font-size: 3rem;
  line-height: 1.1;
  margin: 0;
}

/* Colour variants — swap hex values to match your exact brand palette */
.offering-blen { background-color: var(--offer-blen-color); }
.offering-emul   { background-color: var(--offer-emul-color); }
.offering-sul    { background-color: var(--offer-sul-color);}

/* ---------------------------------------------------------------
   Offering boxes Responsive
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .offering-box { min-height: 180px; padding: 30px 20px; }
  .offering-box h2 { font-size: 2rem; }
}

@media screen and (max-width: 576px) {
  .offering-box { min-height: 150px; }
  .offering-box h2 { font-size: 2rem; }
}

.video-wrapper { position: relative;  width: 100%;  padding-bottom: 56.25%; /* 16:9 aspect ratio*/
  height: 0;   overflow: hidden;   border-radius: 0px;    }
.video-wrapper iframe {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   border: 0; }

/* GallerySlideshow */
.carousel-inner { background-color:  #00000038;     padding-top: 30px; }
.slick-prev.slick-arrow { left: 35px; }

/* Site BUTTONS*/
.btn.green {  color: #028553;  border: 2px solid #028553;  background-color: #fff; padding: 3px 5px 1px 5px;}
.btn.green:hover, .btn.green:active {background-color: #028553; border: 2px solid #028553; }
.btn.blue {  color: #0381cc;  border: 2px solid #0381cc; background-color: #fff;     border-radius: 20px; }
.modal-header button.close {     border: none;     border-radius: 50px;     background-color: #b3c9e7; }
.modal-footer button.btn.btn-default.btn-primary { background-color: #397bb8;     border-color: #397bb8; }

.sharethis-inline-share-buttons{ padding-bottom: 20px;     padding-top: 10px; }


/* CARDS*/
.card { border: none; margin: 0 2% 2% 0; background-color: transparent;  width: 22%;  }
  @media screen and (max-width: 1200px) { .card  { width:30%; }}
    @media screen and (max-width: 992px) { .card  { width: 45%; }}
    @media screen and (max-width: 768px) { .card  { width: 70%; padding-bottom: 25px; }}
    @media screen and (max-width: 576px) { .card  { width: 80%; padding-bottom: 25px; }}

/* Card images */
.card.card-theme .signature-image, .card .signature-image {   object-fit: cover;   max-height: 14rem; }
.card-img:hover { opacity: 0.7; }
.card-img img.signature-image  {   padding-bottom: 0; }

/* Card body */
.card-body {   padding: 0.8rem 0 0 0;   height: 127px;   margin-bottom: 1rem; }
.card-body a { text-decoration: none; }
/* Card text */
p.card-text {   font-size: 1em;   line-height: 1.5; }
.card-theme p.card-text { display: none; }
.card-date { color: #cd5620; }
/* Card titles */
h5.card-title {   font-size: 1.5em;    line-height: 1.3;   margin-bottom: .5rem; font-weight:800; }
h5.card-title a { color: #5a5d64;  font-family: "Open Sans", sans-serif;  letter-spacing: 0;  font-weight: 800; }
h5.card-title a:hover { color:var(--secondary-color); }

/* BASIC CARDS sig-image-left with heading & text-right*/
.card.mb-3.basic-layout {   width: 100%; }
.basic-layout img {   max-height: 10rem;      }
.card.mb-3.basic-layout .signature-image {   max-height: 10rem;   margin-bottom: 5px; width: 100%; }
.card.mb-3.basic-layout .article-image .signature-image {   max-height: 10rem;   object-fit: cover; }
.card.mb-3.basic-layout h3 { margin-top: 0.2em;     margin-bottom: 0.1em; }
.content-header img.broadcast-image { width: 15px;     height: 15px; }
.basic-layout .content-header .unimod-site-name,.basic-layout .content-header .event-page-name {  display: block;  /* add the categories */ }
.basic-layout .content-header h4.unimod-site-name, .basic-layout .content-header h4.event-page-name { font-size: 1.1em; }
.card.basic-layout .card-body { padding: 0; }
.card-body { overflow: hidden; height: 10rem; }
.basic-category p.unimod-category { margin-bottom: 0.2em;  }

/* Text layout in basic layout */
article a p, #fd-content-broadcast p {   line-height: 1.75;   font-size: 1.05em; }

/*  INDEX LISTINGS  */
.pagination-form { margin-top: 0; }
.content-header { margin-bottom: 10px; }
.broadcast-module-name { margin-top: 0; }
p.article-text a { color: #000; }
article a { text-decoration: none; }
.read-more:hover { color: #007bff; }
img.bordered { border: 1px solid #ccc9c9; }
.heading-region a, .heading-slogan a { text-decoration: none; }

/* Signature image general */
.signature-image {   margin-top: 3px;   width: 100px; border: none; }

/* Special FD content styles */
#fd-content-broadcast p.unimod-site-name {     line-height: 1;     font-size: 0.9em;    margin-bottom: 6px; }

/* Event Search -  search words*/
#calForm input.form-control, #filter.form-control {    margin-bottom: 0rem; }
#calForm fieldset {  padding-left: 0px;   margin-bottom: 0px; }
.search-words {     border-bottom: 1px solid #babbbb;     padding-bottom: 10px;     margin-bottom: 50px; }
.search-words .btn {     font-weight: 500;     color: #636466; }
.search-words .btn:hover, .search-words .btn:focus {     color: #059c3c; }
/* for bootstrap 5 only */
.search-words .btn:hover, .search-words .btn:focus {  border: 1px solid #059c3c;   }

/* Event tabs and dropdowns */
#event-details .event-dates .dropdown.active a, #event-details .event-dates .dropdown.active .dropdown-menu .active a, #event-details .event-dates .active a  {     background-color: #fff; }
.dropdown-menu.show {     padding: 5px;     width: 170px; }
ul .dropdown-menu.show li {     line-height: 1.25; }

/*RHP Index listings*/
.box {     border: none; font-size: 1.3em; }
.box ol, .box ul {     margin: 7px 10px 0px 0px;     padding-left: 0px;     font-size: 0.9em;}
.latest-unimodule.box ul li::marker { color:#fff; }
.latest-event.box ul li p {  font-size: 1em; }
.latest-unimodule.box ul li, .latest-event.box ul li p { color:#000; font-weight: 500; line-height: 1.3;  border-bottom: 1px solid #d3cdcd; padding-bottom: 6px; margin-top:6px; }
.latest-unimodule.box ul li a, .latest-event.box ul li p a { color:#000; }
.box ol li a:hover, .box ul li a:hover, .latest-event.box ul li p a:hover {  text-decoration: none;  color: #036d8e; }
.events-siteID {  font-weight: 400; line-height: 1.6; }

#right-panel .unimod-author, #right-panel .unimod-date, #right-panel .row.row-cat-location {display: none;}
#right-panel .unimodule-page-name { font-size: 1.2em;     margin-bottom: 0em;}
#right-panel article h3 { font-size: 1.5em; }
#right-panel .unimod-links.content-header {    border: none;     padding: 0px;     margin: 0px; }
#right-panel #modules-holder .broadcast-image {   margin-left: 0px; }
#right-panel .signature-image {    width: 50px;  }
#right-panel .content-header h4 {   font-size: 1.2em; margin-top: 0em; padding-top: 0.5rem;}
#right-panel .broadcast-module-name {   font-size: 0.6em;  }
#right-panel article a p {     line-height: 1.6;     font-size: 0.9rem; }
#right-panel .unimod-header {     margin-bottom: 0px; }

#event-search-calendar td.day.new-day.active.selected {     background-color: #f7b61f; }

.bootstrap-modal-btn:hover { color: #428bca; }
.bootstrap-modal-btn:before { color: #084c71; font-family: "Font Awesome 5 Pro", sans-serif; content: "\f055"; margin-right: 5px; font-size: .9em; }
.broadcast-toggle-modal { margin-top: 0px; }
a.btn.broadcast-ignore { width: inherit;}
#modules-holder ol { margin-left: 5px;}

.details-opener.opened h1:before, .details-opener.opened h2:before, .details-opener.opened h3:before, .details-opener.opened h4:before, .details-opener.opened h5:before, .details-opener.opened h6:before, .details-opener.opened p:before { color: #028553; font-family: "Font Awesome 5 Pro"; content: "\f056"; margin-right: 5px;     font-size: 17px;}
.details-opener h1:before, .details-opener h2:before, .details-opener h3:before, .details-opener h4:before, .details-opener h5:before, .details-opener h6:before, .details-opener p:before { color: #095a8c; font-family: "Font Awesome 5 Pro"; content: "\f055"; margin-right: 5px;     font-size: 17px;}
.details-slide.opened    { border-bottom: 2px #aaaea7 solid;    margin-bottom: 40px; }

.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;  }

.rating_text {     float: right;     text-align: right;     font-size: 0.8em;     text-transform: uppercase;     font-weight: 600; }

/* FORMS */
#input-page_content .mce-tinymce, textarea, textarea.form-control, select, select.form-control, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {     border: 1px solid #C5C6C7; }

/* ALERTS */
.event-expired.alert.alert-danger.alert-dismissable p { margin-bottom: 0em; color: #b38899; }
.event-expired.alert.alert-danger.alert-dismissable .far.fa-exclamation-triangle { display:none; } 
.alert-danger {     --bs-alert-color: #842029;     --bs-alert-bg: #dbced3;     --bs-alert-border-color: #dbced3;     border-radius: 0;     padding: 5px; }
.event-expired.alert.alert-danger.alert-dismissable button.close {     border: none;     background-color: #dbced3; float: right;     border: solid #cf95ac 1px;     border-radius: 40px;     color: #cf95ac; }



#footer, #footer .container { background-color: #fff; }
#footer { padding-top: 30px; }
#footer p, #footer a { color: #333740; }

/* footer menus */
.footer-menu { border-top: 1px solid #cecdcd;}
.footer-menu ul.menu { padding-inline-start: 0; padding-left: 0; font-size: 0.8rem;   font-family: "Anton", sans-serif; letter-spacing: 5%;}

 #footer a:hover { color:#00c7f9; text-decoration:none;}
  #footer a.active { color:#00c7f9; }
#footer ul.menu { padding-left: 0px; }
#footer ul.menu .details-slide .primary-menu-item { border-bottom: solid 0px #fff; background-color: #fff;  color:#616060;}

.footer-menu .banner-image img {
    padding-top: 20px;
    padding-bottom: 0;
    float: right;
    max-width: 140px; }

@media print {        header, header *, #comment-form-hide-btn, #right-panel    {         display: none !important;     } }