.header-top-page {
  background: #141517;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  margin: 0;
  padding: 0;
  min-height: 40px;
}
.region-header-top {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  justify-content: space-between;
}
header div.header-page {
  /* padding-top/bottom (20px/10px) removed. The header is now a fixed bar of a
     known height, and that vertical padding shrank the row's CONTENT box to
     45px inside a 76px bar — which is why the nav could never fill the header
     and the active underline floated ~11px above the bottom edge. Vertical
     rhythm now comes from --header-height. */
  position: relative;
}
/* The old fixed dark header background and the .is-sticky logo swap were
   superseded by css/navigation/header.css, which drives the same two states
   from .main-header.scrolled / .mega-open instead of .is-sticky. They are
   removed rather than left in place: `header.site-header` (0,1,1) outranks
   `.main-header` (0,1,0), so keeping them would have pinned the header dark
   and stopped it going transparent over the hero. Logo swap now lives beside
   the rest of the header chrome in navigation/header.css. */


.sf-sub-indicator {
  font-size: 0.75rem;
  right: 0.85em;
}

/* Superfish Vert & Noraml Menu Sidebar Menu */
ul.sf-menu.sf-vertical,
.side-menu ul.navbar-nav {
  width: 100%;
  background-color: #F0F9FF;
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.sf-vertical li.sf-first .menuheading,
.side-menu li.nav-item:first-child .menuheading {
  margin: 0 0 0 0;
}

.sf-vertical .menuheading,
ul.sf-expanded.sf-accordion .menuheading,
div.sf-accordion-toggle.sf-style-default a,
.side-menu li.nav-item .menuheading {
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  font-size: 1.5rem;
  color: #333;
  padding: 0 0 .5rem 0;
}

ul.sf-menu.sf-style-default span.nolink,
ul.sf-menu.sf-style-default a, 
ul.sf-menu.sf-style-default a:visited,
.side-menu li.nav-item a,
.side-menu li.nav-item {
  color: #333;
}

div.sf-accordion-toggle.sf-style-default a span::after {
  display: none;
}

ul.sf-menu.sf-style-default li,
ul.sf-menu.sf-style-default li:hover,
ul.sf-menu.sf-style-default li.sfHover,
ul.sf-menu.sf-style-default a:focus,
ul.sf-menu.sf-style-default a:hover,
ul.sf-menu.sf-style-default span.nolink:hover,
ul.sf-menu.sf-style-default a.is-active {
  background: none;
}

ul.sf-menu.sf-vertical .menuparent:hover,
ul.sf-menu.sf-style-default a {
  color: #333;
  text-decoration: none;
}

.sf-vertical h2 {
  margin-top: 0;
  color: black;
}

.sf-vertical h2::after,
ul.sf-expanded.sf-accordion .menuheading::after {
  content: '';
  display: block;
  margin-left: 1px;
  margin-top: 1rem;
  border-top: #00a1d9 solid 3px;
  width: 33%;
}

.sf-vertical nav .nav > li,
ul.sf-menu.sf-vertical li, 
ul.sf-menu.sf-vertical li.sf-depth-2,
ul.sf-menu.sf-vertical li.sf-depth-3,
ul.sf-menu.sf-vertical .views-row,
.side-menu li.nav-item a,
.side-menu li.nav-item {
  font-weight: 700;
  line-height: 1.1;
  display: block;
}

/*
ul.sf-menu.sf-vertical nav li,
ul.sf-menu.sf-vertical li,
ul.sf-menu.sf-verticalli.sf-depth-2,
ul.sf-menu.sf-vertical li.sf-depth-3 {
  border-bottom: 1px solid #e1e1e1;
  float: none;
}
*/

ul.sf-menu.sf-vertical a, 
ul.sf-menu.sf-vertical span.nolink {
  padding: .5rem 0;
  border-bottom: none;
}

ul.sf-menu.sf-vertical a,
ul.sf-menu.sf-vertical .nolink,
ul.sf-menu.sf-style-default a:visited,
.side-menu li.nav-item a,
.side-menu li.nav-item span {
  display: block;
  border-bottom: 1px solid #e1e1e1;
}

.side-menu li.nav-item a {
  padding-left: 0;
  padding-right: 0;
}

.side-menu li.nav-item {
  padding: 0;
}

ul.sf-menu.sf-vertical .menuheading,
.side-menu li.nav-item span.menuheading {
  border-bottom: none !important;
}

ul.sf-menu.sf-vertical a.is-active {
  color: #35939a;
  text-decoration: none;
  border-bottom: none;
}

ul.sf-menu.sf-vertical li.sf-depth-2 a,
ul.sf-menu.sf-vertical li.sf-depth-3 a {
  padding: .7em .7em .7em .7em;
  border-bottom: none;
}

ul.sf-menu.sf-vertical .menuparent {
  cursor: pointer;
}

ul.sf-menu.sf-vertical li.sf-depth-2,
ul.sf-menu.sf-vertical li.sf-depth-3 {
  background-color: #f2f2f2;
}

ul.sf-menu li.menuparent ul {
  z-index: 2;
}

div.sf-accordion-toggle.sf-style-default a {
  margin: 0;
  background: #fff;
  padding: 1rem;
  position: relative;
  border: #00a1d9 solid 2px;
  width: 100%;
}

div.sf-accordion-toggle.sf-style-default a.sf-expanded {
  background: #fff;
  border-bottom: none;
}

ul.sf-expanded.sf-accordion {
  margin: 0;
  background: #fff;
  padding: 1rem;
  border: #00a1d9 solid 2px;
  border-top: none;
}

ul.sf-expanded.sf-accordion a,
ul.sf-expanded.sf-accordion span.nolink {
  padding: .75rem 0;
}

select.mobile-nav-select{
    margin-bottom: 1rem;
    border: 2px solid #009edb;
} 
.mobile-nav-select {
  font-weight: bold;
}


#block-un-logo {
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -1px;
}
#block-un-logo ul.wrap_logo li {
    display: table-cell;
    list-style: none;
    vertical-align: middle;
}
#block-un-logo ul.wrap_logo {
    padding: 0;
    display: table;
  }
ul.wrap_logo {
    font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #555555;
    font-size: 23px;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0.027em;
    margin: 0;
}
ul.wrap_logo img.logo {
    height: 77px;
    margin-right: 10px;
}
#block-un-logo ul.wrap_logo li:nth-child(2) {
    border-left: 1px solid;
    padding-left: 15px;
}
.un-site-name__second-line {
    font-size: 20px;
    font-weight: 300;
    display: block;
}
.region-nav-main{
    width: 100%;
}
ul.sf-menu::after {
    clear: both;
    content: "";
    height: 0;
    display: block;
    visibility: hidden;
  }
  ul.sf-menu li:hover > ul, ul.sf-menu li.sfHover > ul {
    left: 0;
    top: 2.3em;
}
.ui-widget-content {
    background: #fff;
    border-radius: 0;
}
.ui-icon, .ui-state-active .ui-icon {
    background: none;
    display: none;
}
/* Language Bar */
.region-navigation{
    position: relative;
}
.block-language-blocklanguage-interface ul{
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.block-language-blocklanguage-interface ul li{
    padding: 0 13px 0 10px;
    float: left;
}
.block-language-blocklanguage-interface ul li a.is-active{
    font-weight: bold;
}
#block-dropdownlanguage{
    display: none;
}

.view-homepage-featured .views-row{
    display: flex;
    width: 100%;
    gap: 2rem;
}
.view-homepage-featured .views-field-field-news-image-media{
    flex: 0 0 calc((100% - 2rem) * 0.735);    
}
.view-homepage-featured .views-field-nothing{
    flex: 0 0 calc((100% - 2rem) * 0.265);
}
.view-homepage-featured .views-field-field-news-image-media img{
    width: 100%;
}
.view-homepage-featured h2{
    margin-top: 0;
}
.hpf-learn-more{
    margin: 1rem 0 0 0;
}

/* Footer */
.footer {
    background: var(--phi-header-dark);
    width: 100%;
    margin-top: 0;
    padding: 0 20px;
    color: #fff;
}
.region-footer {
    max-width: 100%;
    margin: auto;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: none;
    padding-right: 15px;
    padding-left: 15px;
    color: #fff;
    display: flex;
    flex-direction: inherit !important;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid gray;
    color: rgba(255,255,255,0.70);
    font-size: .875rem;
}
.region-footer a{
    color: rgba(255,255,255,0.70);
}
a.sticky-social__link{
    color: rgba(255,255,255,.9);
}
a.sticky-social__link:hover{
    color: rgba(255,255,255,1) !important;
}
.social-sharing-buttons a{
    border-bottom: none !important;
}

ul[data-block="footer"] .nav-item:last-child .nav-link {
  padding-right: 0;
}


.footermenu{
    background: var(--phi-header-dark);
    padding: 60px 0;
}

.region-footer-menu h2,
.block-menu.navigation > h5{
    font-size: .875rem;
    color: var(--phi-orange);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}

.region-footer-menu ul{
    padding: 0;
}
.region-footer-menu ul li{
    list-style: none;
    list-style-image: none;
    display: block;
    padding-left: 0;
    position: relative;
}

.region-footer-menu ul li .nav-link{
    padding-left: 0;
}

.region-footer-menu{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: start;
  color: rgba(255,255,255,0.70);
  font-size: .875rem;
}
.region-footer a:hover,
.region-footer-menu a{
    color: rgba(255,255,255,0.70);
}
.region-footer a:hover,
.region-footer a:focus-visible,
.region-footer-menu a:hover,
.region-footer-menu a:focus-visible{
    color: #F57820;
}


.region-footer-menu > * { min-width: 0; }

.region-footer-menu > *:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.region-footer-menu > *:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.region-footer-menu > *:nth-child(3) { grid-column: 3; grid-row: 1; }
.region-footer-menu > *:nth-child(4) { grid-column: 3; grid-row: 2; }
.region-footer-menu > *:nth-child(5) { grid-column: 4; grid-row: 1 / span 2; }
.region-footer-menu > *:nth-child(6) { grid-column: 5; grid-row: 1 / span 2; }

/* Mobile: the 5 fixed columns leave ~70px per block, which the contact email
   ("prolific@phiheating.com") cannot fit in. It overflowed the page, and since
   an overflowing document widens the mobile layout viewport, the fixed header
   grew with it and pushed the hamburger off-screen. Reflow the columns and let
   long, unbreakable strings wrap. */
@media (max-width: 767px) {
  .region-footer-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .region-footer-menu > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .region-footer-menu a {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 480px) {
  .region-footer-menu {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-info__item {
  position: relative;
  padding-left: 2.25rem;   /* gutter the icon sits in */
  margin: 0 0 1.5rem;
}

.contact-info__item:last-child {
  margin-bottom: 0;
}

/* class doubled for specificity — beats most theme rules without !important */
.contact-info__icon.contact-info__icon {
  position: absolute;
  left: 0;
  top: 0.3em;
  display: inline-block;
  width: 1.25rem;
  text-align: center;
  line-height: 1;
  color: #F57820;
  font-size: 1.125rem;
}
.contact-info__item svg{
    width: 16px;
    height: 16px;
}

.contact-info__text a {
  display: inline !important;   /* undoes the theme's block links */
  color: inherit;
  text-decoration: none;
}
.contact-info__text,
.contact-info__item{
    display: block;
    padding-left: 30px;
}



.region-filters::after,
.statement-accordion .ui-accordion-content::after,
.field--name-field-videos-bulk .field__item{
    content: '';
    flex: auto;
}

/* `li span` alongside `li a`: a menu item pointing at route:<nolink> renders as
   a <span>, and Drupal puts the same .nav-link class on it. Without this the
   span kept Bootstrap's .nav-link vertical padding while the links had theirs
   zeroed here, so placeholder rows sat 44px apart against the links' 28px. The
   Environment column is entirely placeholders, which is where it showed. */
.region-footer-menu li a,
.region-footer-menu li span.nav-link {
    position: relative;
    display: block;
    padding: 0;
}

/* For Arabic Lang */
.lang-ar .block-language-blocklanguage-interface{
    position: absolute;
    left: 0;
    right: unset;
    top: 10px;
}
.lang-ar #block-searchform, .lang-ar .region-header .block-views-exposed-filter-blocksearch-page-1 {
    position: absolute;
    top: 40px;
    left: 15px;
    right: unset;
}
.lang-ar #block-azsiteindex {
    position: absolute;
    left: 15px;
    right: unset;
    top: 100px;
}
.lang-ar #block-un-logo ul.wrap_logo li:nth-child(2) {
    border-right: 1px solid;
    padding-right: 0;
    border-left: none;
    padding-left: 15px;
} 
.lang-ar #block-un-logo ul.wrap_logo li {
    padding-left: 15px;
}
.lang-ar .region-header .block-views-exposed-filter-blocksearch-page-1 .glyphicon-search, .lang-ar .filterssearch .bef-exposed-form.views-exposed-form button .glyphicon-search {
    padding-left: 100px;
    padding-right: 0;
}
.lang-ar .filterssearch .bef-exposed-form.views-exposed-form button {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.lang-ar .region-header .block-views-exposed-filter-blocksearch-page-1 .form-item-search input[type="text"]{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.lang-ar .region-header .block-views-exposed-filter-blocksearch-page-1 input.form-submit{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0;
    border-left: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
} 
.lang-ar .region-footer-menu ul li {
    list-style: none;
    list-style-image: none;
    display: block;
    margin-bottom: 10px;
    padding-right: 22px;
    padding-left: 0;
}
.lang-ar .region-header .block-views-exposed-filter-blocksearch-page-1 .form--inline .form-item {
    margin-left: 0;
}
.lang-ar .region-footer-menu ul li:before {
    margin-right: -20px;
    margin-left: 0;
}
.lang-ar  #block-un-mainmenu ul li.menuparent a, .lang-ar #block-un-mainmenu ul li .menuparent.nolink {
    padding: 10px 15px 10px 30px;
}

.lang-ar #kd-tabsmenu .tabitem {
    margin: 1rem 2rem 1rem 2rem;
}
.lang-ar #kd-tabsmenu .tabitem.active a.datetabhref::after{
content: "\f053";
  right: inherit;
  top: 20px;
  left: 0;
}
.lang-ar #kd-tabsmenu .tabitem:before {
    right: -2rem;
    left: inherit;
  }
.lang-ar #kd-tabsmenu .tabitem::after {
    right: -1.6rem;
    left: inherit;
}

.lang-ar .ln-arrow {
    position: absolute;
    right: inherit;
    left: 0;
}
.lang-ar .ln-arrow a::before {
    content: "\f053";
}
.lang-ar  .block-views-blockws25-latest-news-block-1 .views-field-field-date::before, .lang-ar .grey-list-view .views-field-field-date::before {
    right: 0;
    left: inherit;
}
.lang-ar .views-field-field-date, .lang-ar .dateicon {
    padding-left: 0;
    padding-right: 20px;
}
.lang-ar .featured-documents .views-field-nothing {
    padding-left: 0rem;
    padding-right: 2rem;
}
.lang-ar .engagement-list .docu-title {
    padding-left: 65px;
    padding-right: 0;
}
.lang-ar .engagement-list .download-icon-con {
    right: inherit;
    left: 20px;
}
.lang-ar .pi-headeritems > * {
    margin-left: 20px;
    margin-right: 0;
}
.lang-ar .programme-item-con .pichevron {
    position: absolute;
    right: inherit;
    left: 20px;
}
.lang-ar #tabsmenu > div:first-of-type {
    border-right: 12px solid #00a1d9;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-left: inherit;
    -webkit-border-top-left-radius: inherit;
    -webkit-border-bottom-left-radius: inherit;
    -moz-border-radius-topleft: inherit;
    -moz-border-radius-bottomleft: inherit;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
.lang-ar #tabsmenu > div:last-of-type {
    border-left: 12px solid #00a1d9;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-right: inherit;
    -webkit-border-top-right-radius: inherit;
    -webkit-border-bottom-right-radius: inherit;
    -moz-border-radius-topright: inherit;
    -moz-border-radius-bottomright: inherit;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

.lang-ar  .view-search .item-list ol {
    padding-right: 0;
}

.lang-ar .document-group-wrapper .download-icon-con {
    left: 20px;
    right: inherit;
}
.lang-ar .docu-list .views-field-nothing {
    padding: 20px 20px 20px 65px;
}
.lang-ar  .layout-container .views-exposed-form .form--inline .form-item {
    margin: 0 0 0 5px;
}
.lang-ar .sort-by-block {
    margin-left: 10px;
}

.lang-ar .grey-list-view .ln-arrow {
    left: 1rem;
}
.lang-ar .grey-list-view .views-field-field-date {
    right: 1rem;
}
.lang-ar .region-header [dir="rtl"] .form--inline .form-item {
    float: right;
    margin-right: 0;
    margin-left: 0;
}
.lang-ar .statement-accordion h3.ui-accordion-header::after {
    right: inherit;
    left: 0;
    transform: scaleX(-1);
}
.lang-ar .filterssearch .views-exposed-form .mb-3{
    margin-right: 0;
}

.lang-ar .ckeditor-accordion-container dt::before {
    left: unset;
    right: 0;
}
.lang-ar .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle {
    left: 11px;
    right: unset;
}
.lang-ar .ckeditor-accordion-container dt {
    padding-right: 20px;
}

/* Mobile menu toggle: brand orange bars, no button chrome.
   Was #009edb bars on an #f2f2f2 rounded box, absolutely positioned at
   right:80px/top:10px — the old header's placement. The current header lays
   the toggle out in its flex row, so the absolute positioning is dropped too;
   it is what pulled the control out of the bar. */
.responsive-menu-toggle-icon::before,
.responsive-menu-toggle-icon::after,
.responsive-menu-toggle-icon span.icon {
    background: var(--phi-orange);
}
.responsive-menu-toggle {
    background: none;
}
.responsive-menu-toggle-icon span.label {
    display: none;
}
.mm-panel,
.mm-navbar{
    background: #f3f3f3 !important;
}
/* :not(.white-btn) added — the Contact / Inquiry link in the off-canvas menu is
   a filled orange button (css/navigation/off-canvas-menu.css) and needs white
   text. The !important here was overriding it, and the alternative was a second
   !important in the newer file, which would leave two rules fighting. */
.mm-menu a:not(.white-btn),
.mm-menu a:active:not(.white-btn),
.mm-menu a:hover:not(.white-btn),
.mm-menu a:link:not(.white-btn),
.mm-menu a:visited:not(.white-btn) {
  text-decoration: none;
  color: #333333 !important;
}


.trust-bar {
  --trust-green: #14572B;
  --trust-label: #333333;
  --trust-rule: #d9d9d9;
  background: #ffffff;
  padding: 2.5rem 1.5rem;
}


.trust-bar-inner {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.trust-stat {
  flex: 0 1 auto;
  text-align: center;
  padding: 0 2.25rem;
}

/* dividers: a left border on everything but the first */
.trust-stat + .trust-stat {
  border-left: 1px solid var(--trust-rule);
}

.trust-stat-num {
  color: var(--trust-green);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.trust-stat-label {
  color: var(--trust-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}



.view-news-index .views-field-title h4::after, 
.view-events-index .views-field-title h4::after{
    content: '';
    display: block;
    margin-left: 1px;
    margin-top: 0.625rem;
    border-top: #00a1d9 solid 3px;
    width: 25%;
}

.views-field-field-date::before, .dateicon::before {
  content: "\f133";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 15px;
  vertical-align: middle;
  line-height: 35px;
  color: #333333;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
}
.views-field-field-date, .dateicon {
  font-weight: 500;
  font-size: 0.80rem;
  line-height: 1.1667;
  color: #333;
  letter-spacing: 0.77px;
  text-transform: uppercase;
}
.views-field-field-date, .dateicon {
  position: relative;
  font-weight: 500;
  font-size: 0.80rem;
  line-height: 1.1667;
  color: #333;
  letter-spacing: 0.77px;
  text-transform: uppercase;
  padding-left: 20px;
}




/* Latest News */
.block-views-blockws25-latest-news-block-1 .views-row{
    display: flex;
    padding-bottom: 2rem;
    margin: 2rem 0;
    border-bottom: 1px solid #eeeeee;
}
.block-views-blockws25-latest-news-block-1 .views-field-field-date{
    width: 180px;
    flex-shrink: 0
}
.block-views-blockws25-latest-news-block-1 .views-field-field-date::before,
.grey-list-view .views-field-field-date::before,
.blue.views-field-field-date::before{
    content: "\f133";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    vertical-align: middle;
    line-height: 0;
    color: #00a1d9;
    position: absolute;
    top: 7px;
    left: 0;
    transform: inherit;
}

.grey-list-view .views-field-field-news-image-media .field--type-image,
.force3x2 .field--type-image{
    position: relative;
    width: 100%;
    padding-top: 56.3%;
    overflow: hidden;
}
.grey-list-view .views-field-field-news-image-media img,
.force3x2 .field--type-image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.block-views-blockws25-latest-news-block-1 .views-field-field-ws25-news-image{
    width: 350px;
    flex-shrink: 0
}
.block-views-blockws25-latest-news-block-1 .views-field-nothing{
    flex-grow: 1;
    padding-left: 2rem;
}
.block-views-blocklatest-updates-h-block-1 .field-content.small-text,
.block-views-blocklatest-updates-h-block-2 .field-content.small-text,
.block-views-blocklatest-updates-h-block-3 .field-content.small-text{
    padding-left: 10px;
}
.block-views-blockws25-latest-news-block-1 .views-row{
    margin-bottom: 2rem;
}
.ln-arrow{
    position: absolute;
    right: 0;
}
.ln-arrow a{
    border: none;
}
.ln-arrow a::before{
        content: "\f054"; 
        font-family: "Font Awesome 5 Free"; 
        font-weight: 900; 
        font-size: 1.5rem;
        vertical-align: middle;
        line-height: 1;
        color: #00a1d9;
        position: relative;
        display: inline-block;
}
.ln-bodycon{
    padding-right: 2rem;
}
.ln-bodycon h3{
    margin-top: 0;
}

.smalltext{
    font-size: 0.80rem;
    line-height: 1.1667;
    color: #333;
    letter-spacing: 0.77px;
    font-weight: 700;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* News Page */
.grey-list-view .views-row{
    position: relative;
    background-color: #F8F8F8;
    padding: 1rem;
}
.grey-list-view.news-view .views-row{
    padding: 1rem 1rem 2.2rem 1rem;
}
.grey-list-view h3{
    font-size: 1.2rem;
    color: black;
}
.grey-list-view .ln-arrow{
    position: absolute;
    right: 1rem;
    z-index: 99;
    bottom: 10px;
}
.grey-list-view .views-field-field-date{
    position: absolute;
    bottom: 1rem;
}

.grey-list-view .views-field-body{
    margin-bottom: 1rem;
}
 
/* Events */

.dateitemv{
    font-weight: 500;
    font-size: 0.80rem;
    color: #333;
    /*letter-spacing: 0.77px;*/
    text-transform: uppercase;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}

.block-views-blocknews-image-date-block-1 .dateitemv,
.block-views-blockarticle-image-date-block-1 .dateitemv,
.view-event-image-date .dateitemv{
    background: #F8F8F8;
    padding: 1rem;
}
.grey-list-view .dateitemv{
    padding: 0;
    background: none;
}

.dateicon,
.timeicon,
.locationicon{
    padding-left: 1rem;
    position: relative;
    margin-right: .5rem;
}
.eventdate.timeicon,
.eventtime.timeicon{
    padding-left: 1.1rem;
}

.dateicon::before,
.event-date-time-para .field--name-field-event-date-para::before{
    content: "\f073";
    font-size: .9rem !important;
    font: var(--fa-font-solid);
    color: #00a1d9;
    padding-top: 5px;
    position: absolute;
    left: 0;
}
.timeicon::before,
.event-date-time-para .field--name-field-event-time-para::before{
    content: "\f017";
    font-size: .9rem !important;
    font: var(--fa-font-solid);
    color: #00a1d9;
    padding-top: 5px;
    position: absolute;
    left: 0; 
}
.locationicon::before,
.event-date-time-para .field--name-field-event-location-para::before{
    content: "\f3c5";
    font-size: .9rem !important;
    font: var(--fa-font-solid);
    color: #00a1d9;
    padding-top: 5px;
    position: absolute;
    left: 0; 
}

.event-date-time-para .paragraph {
    display: flex;
    flex-wrap: wrap;
}
.block-views-blockevents-block-1 .event-date-time-para .paragraph,
.block-views-blockevent-image-date-block-4 .event-date-time-para .paragraph{
    border-bottom: 1px solid #dedede;
}
.event-date-time-para .paragraph > * {
    position: relative;
    padding-left: 19px;
    margin-right: 12px;
}
.event-date-time-para .paragraph > *:last-child {
  margin-right: 0;
}

.event-date-time-para.eventcard .field--name-field-event-location-para{
    display: none;
}

.block-views-blockevent-image-date-block-2{
    margin-bottom: 2rem;
}
.block-views-blockevent-image-date-block-2 ul,
.addcalendar ul {
    list-style: none;
    margin: 10px 0;
    padding: 0 0 0 18px;
    position: relative;
}
.block-views-blockevent-image-date-block-2 li,
.addcalendar li {
    display: inline;
    padding: 0 10px;
    border-left: 1px solid;
}
.block-views-blockevent-image-date-block-2 li:first-child,
.addcalendar li:first-child{
    padding: 0 10px 0 0;
    border-left: none;
}
.block-views-blockevent-image-date-block-2 ul::before,
.addcalendar ul::before{
    content: "\f073";
    font-size: 15px;
    vertical-align: middle;
    line-height: 35px;
    color: #333333;
    position: absolute;
    font: var(--fa-font-regular);
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
}
.eventhaspassed {
    width: 100%;
    text-align: center;
    border: 2px solid #cecece;
    padding: 1rem;
    margin-bottom: 1rem;
}

.verticallist.news-verticallist .views-field-field-card-image-media {
  flex: 0 30%;
}
.verticallist.news-verticallist .views-field-nothing {
  flex: 0 67%;
}
.verticallist.news-verticallist .views-field-nothing h4,
.vert-list-view h4{
  margin-top: 6px;
  font-size: 1rem;
  margin-bottom: 0;
}
.verticallist.news-verticallist .view-content .views-row{
    padding-bottom: 1rem;
    margin: 0 0 1rem 0;
    display: flex;
}

.view-homepage-featured .views-field-nothing .field-content{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pc-label{
    font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #4d4d4d;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    margin-right: 6px;
}
.pc-label::before{
    content: '';
    margin-left: 0.1rem;
    margin-bottom: 1rem;
    padding-left: 6px;
    border-left: #999999 solid 3px;
}
.photo-credit-sq{
    display: flex;
    padding-top: .5rem;
}
.photo-credit-sq .field--name-field-photo-credit,
.banner-credit .field--name-field-photo-credit{
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #666666;
}
.hp-photo-details{
    margin-top: auto;
    font-size: .875rem;
    padding-top: 1rem;
    line-height: 20px;
}
.hp-photo-caption{
    font-size: .875rem;
    line-height: 20px;
}

.banner-credit{
    font-size: .875rem;
    line-height: 20px;
}
.news-tag-hp a{
  font-weight: 500;
  font-size: .85rem;
  line-height: 1.1667;
  color: #4d4d4d;
  font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform: uppercase;
  border: none;
  margin-bottom: .5rem;
}

 
.field--name-field-photo-credit .field__label{
    font-weight: normal;
}
.page-node-type-news .field--name-field-photo-credit{
    margin-top: -1rem;
    margin-bottom: 1rem;
}


ul.tickli.twocolul {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
ul.tickli li {
  list-style: none;
  display: block;
  margin-bottom: .5rem;
  padding-left: 10px;
  position: relative;
  break-inside: avoid-column;
}
ul.tickli li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-size: 1.2rem;
  vertical-align: middle;
  line-height: 20px;
  margin-left: -18px;
  position: absolute;
  font-weight: 900;
  color: var(--phi-orange);
  top: 2px;
  left: 0;
}


.field--name-field-key-feature-boxes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.field--name-field-key-feature-boxes .field__item .paragraph--type--key-features{
    background: var(--phi-gray-300);
    border-radius: .875rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.field--name-field-key-feature-boxes .field__item .field--name-field-title{
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--phi-orange);
}
.page-node-type-projects .field--name-field-key-feature-boxes .field__item .field--name-field-title{
    color: var(--phi-green);
}
.field--name-field-key-feature-boxes .field__item .field--name-field-description{
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
} 


.field--name-field-key-selling-point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--phi-secondary);
  border-radius: .875rem;
  padding: 1rem 1rem 1rem 3rem;
  border-left: 4px solid var(--phi-orange);
  position: relative;
}
.field--name-field-key-selling-point  p:last-child {
  margin-bottom: 0;
}
.field--name-field-key-selling-point::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--phi-orange);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.slick-thumbnail-tb .slick__arrow{
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.slick-thumbnail-tb:hover .slick__arrow{
    opacity: 1;
}
.slick-thumbnail-tb img{
    border-radius: .875rem;
}
.slick-thumbnail-tb .slick__slide img{
    border: none;
}
.slick-thumbnail-tb .slick--optionset--product-nav .slick-list .slick-track{
    padding-top: 0;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
    width: 100% !important;
}
.slick-thumbnail-tb .slick--optionset--product-nav .slick__slide{
    margin-right: 6px;
    cursor: pointer;
}
.slick-thumbnail-tb .slick--optionset--product-nav img{
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out;
}
.slick-thumbnail-tb .slick--optionset--product-nav .slick-current img,
.slick-thumbnail-tb .slick--optionset--product-nav img:hover{
    opacity: 1;
}
.related-products-section:not(:has(.view-has-result)) {
  display: none;
}
.block-views-blockproduct-taxonomy-block-2 .views-row{
    display: flex;
    gap: 1rem;
}
.block-views-blockproduct-taxonomy-block-2 .views-row a{
    border-bottom: none;
    font-size: .875rem;
    border-radius: 4px;
    background: var(--phi-header-dark);
    color: #fff;
    padding: 3px 8px;
}
/* Parent term, or the only term when the row has no parent. */
.block-views-blockproduct-taxonomy-block-2 .views-field-name-1 a,
.block-views-blockproduct-taxonomy-block-2 .views-row:not(:has(.views-field-name-1 a)) .views-field-name a{
    color: var(--phi-orange);
    background: #FDE4D2;
}
.row:not(:has(.product-image-col)) > .product-content-col {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

ol.breadcrumb{
    font-size: .875rem;
    color: gray;
}
ol.breadcrumb a{
    border-bottom: none !important;
    color: gray;
}
ol.breadcrumb li.breadcrumb-item:last-child{
    color: var(--bs-body-color);
}
ol.breadcrumb li.breadcrumb-item:not(:first-child)::before {
    --bs-breadcrumb-divider: "\203A";
}
.collapsecustom{
    margin-bottom: 1rem;
}

.block-social-sharing-buttons-block h2{
    font-size: 1.6rem;
}



@media only screen and (max-width: 1400px){

}
@media only screen and (max-width: 1200px){
    .site-header .block-menu,
    .site-header .responsive-menu-toggle label,
    .site-header .bef-exposed-form{
        display: none;
    }

}

/* Above 992px the horizontal mega menu is the navigation, so the off-canvas
   toggle must be hidden. This overrides the module's own generated breakpoint
   file (sites/default/files/css/responsive_menu_breakpoint.css), which switches
   at 1100px — that mismatch left 993–1100px with the mega menu already
   collapsed and no toggle yet, i.e. no navigation at all. The matching JS
   breakpoint lives in js/navigation/mega-menu.js. */
@media only screen and (min-width: 993px){
    .site-header .block-responsive-menu{
        display: none;
    }
}

@media only screen and (max-width: 992px){
    .site-header .block-responsive-menu{
        display: inline-block;
    }
    .responsive-menu-toggle {
        right: 20px;
        top: 10px;
    }
    .threecolumn.grey-list-view .view-content{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2%;
    }
    .view-homepage-featured .views-row {
        display: inherit;
    }
    .view-homepage-featured h2 {
        margin-top: 1rem;
    }
  .region-footer-menu { grid-template-columns: repeat(2, 1fr); }

  .region-footer-menu > *:nth-child(1) { order: 1; }
  .region-footer-menu > *:nth-child(6) { order: 2; }
    .trust-stat {
    flex: 0 0 33.333%;
    padding: 1rem 0.75rem;
  }
  .trust-stat + .trust-stat { border-left: 0; }
  .trust-stat-label { white-space: normal; }

  .view-products.threecolumn .view-content{
        grid-template-columns: repeat(2, 1fr);
    }

}
@media only screen and (max-width: 768px){
    #block-un-welcome p {
        padding-left: 15px;
        padding-right: 15px;
    }
    ul.wrap_logo {
        font-size: 20px;
    }
    .un-site-name__second-line {
        font-size: 18px;
        margin-top: 5px;
    }
    ul.wrap_logo img.logo {
        height: 65px;
        margin-right: 10px !important;
    }
      #block-un-logo ul.wrap_logo li:nth-child(2) {
        padding-left: 10px;
    }
    .block-language-blocklanguage-interface {
        display: none;
    }
    #block-dropdownlanguage {
        display: inherit;
        margin-right: 5px;
    }
    #block-un-footer ul.navbar-nav li a{
        padding: 7px;
        margin: 7px;
    }
    #block-un-footer ul.navbar-nav {
        columns: 2;
        column-gap: 20px;
        list-style-type: none;
        padding: 0;
        display: block;
    }
    #block-un-footer ul.navbar-nav li {
        padding: 0 0.45rem 0 0.45rem;
        border-right: none;
        break-inside: avoid;
        float: none;
        display: block;
        margin: 10px 0;
        text-align: center;
    }
    .container {
        max-width: 100%;
    }
    #block-un-logofooter .footerleft {
        float: unset;
        text-align: center;
    }
    #block-un-logofooter .footerright {
        float: unset;
        margin-top: 18px;
        text-align: center;
    }    

    
}
@media only screen and (max-width: 650px){
    .statement-accordion .ui-accordion-content .views-row{
        flex: 0 49%;
    }
    /* Removed: `.site-header .header-page.d-flex { display: block !important }`.
       It belonged to the pre-mega-menu header. With the current header it broke
       the mobile bar — the row stopped being a flex container, so the hamburger
       dropped out of the header and floated over the hero. The header layout is
       owned by navigation/header.css. */
    #block-un-logo{
        width: 100%;
    }
    #block-un-logo ul.wrap_logo {
        padding: 0;
        display: block;
    }
    #block-un-logo ul.wrap_logo li {
        display: block;
        text-align: center;
    }
    #block-un-logo ul.wrap_logo li:nth-child(2), #block-un-logo ul.wrap_logo li:nth-child(3) {
        border-left: none;
        padding-left: 0;
        margin-top: 20px;
    }
    #block-un-logo ul.wrap_logo li {
        display: block;
        text-align: center;
    }
    .ul.wrap_logo img.logo{
        margin-right: 0;
    }
    #block-un-logofooter .list-inline > li {
        margin-top: 1rem;
    }
    .region-footer-menu { grid-template-columns: 1fr; }

    .region-footer-menu > *:nth-child(6) { order: 0; }  /* back to natural spot */
    .region-footer-menu > *:nth-child(1) { order: 1; }
    /* Padding drops here, so the token the 16:9 hero subtracts drops with it.
       Two stats per row at this width, hence the taller stat block. */
    :root { --trust-bar-height: 190px; }
    .trust-bar { padding: 1.75rem 1rem; }
    .trust-stat { flex: 0 0 50%; }
    .trust-stat-num { font-size: 1.875rem; }
    .trust-stat-label { font-size: 0.75rem; }

}
@media only screen and (max-width: 550px){

}

/* Removed: the ≥1200px `.region-header-top { max-width: 96%; margin: 0 auto
   !important; padding: 0 3.75rem }` rule. It dated from when this region was a
   full-width strip that had to provide its own gutters. It now sits inside
   .utility-bar > .container, which already supplies the max-width and the 24px
   gutters, so the extra 96% + 60px padding indented the search button away
   from the right edge. Alignment lives in navigation/header.css. */

/* ===========================================================================
 * BUTTONS (mockup 008-D)
 *
 * The legacy .btn / .btn-primary rules that used to live in global.css have
 * since been removed; Bootstrap 5 supplies the base and picks up the orange
 * through --bs-primary. The named variants (.btn-default, .white-btn,
 * .green-btn) live in custom-classes.css.
 *
 * Drupal's own button classes are aliased onto these declarations rather than
 * restyled separately, so there is ONE set of rules per button treatment. No
 * parallel naming system (.btn-phi, .phi-btn) — the mockup's class names are
 * the contract.
 * ======================================================================== */

.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-cta-primary,
.button--primary,
.form-submit {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--phi-orange); color: white;
    padding: 14px 28px; border-radius: 8px;
    font-family: var(--display-font);
    font-size: 14px; font-weight: 700; text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.04em;
    transition: all 0.25s var(--ease); border: none; cursor: pointer;
}
.hero-cta-primary:hover,
.button--primary:hover,
.form-submit:hover {
    background: var(--phi-orange-hover); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245,120,32,0.35);
    color: white;
}
.hero-cta-primary svg { width: 16px; height: 16px; }

.hero-cta-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: rgba(255,255,255,0.85);
    padding: 14px 28px; border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.25);
    font-family: var(--display-font);
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: all 0.25s var(--ease); cursor: pointer;
}
.hero-cta-secondary:hover {
    border-color: rgba(255,255,255,0.5); color: white;
    background: rgba(255,255,255,0.06);
}

.below-hero {
    max-width: var(--container); margin: 0 auto; padding: 60px 24px;
}