/*
  Site components.
  Extracted from the former base-202309.css baseline on 2026-09-04.
  The normalize / reset / base-typography half was removed - Automatic.css
  now provides the reset, typography scale, spacing and colour system.
  What remains here is site-specific: containers, header, navigation,
  menus, icon classes, modal, slider and their breakpoints.
*/

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


/*
---------- IDW Utilities ------------------------------------- */

html {
    overflow-x: hidden;
}

body {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    overflow: hidden;
    width:100%;
    max-width:2560px;
    margin:0 auto;
}

.sr-only {
  display:none;
}

.visually-hidden { 
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

main {
  position: relative;
  transition:all .5s ease;
}

img {
  max-width: 100%;
  height: auto;
}

section, div, aside {
	box-sizing:border-box;
}

figure {
  max-width:100%;
}

aside ul {
  list-style: none;
  padding: 0;
}

section, .container, .container-wide, .container-fullwidth {
	position: relative;
	margin:0 auto;
}

/* Width comes from Automatic.css (Layout > Content Width, --content-width).
   The gutter is supplied by the section, so no inline padding here. */
.container {
  width: 100%;
  max-width: var(--content-width, 1366px);
  margin-inline: auto;
}

.row-flex {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.container-wide {
	width: 100%;
	max-width: 2040px;
  padding:0 60px;
  margin:0 auto;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.container-fullwidth {
	width: 100%;
	max-width: 100%;
  padding:0 60px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

figure {
  margin: 0;
}

/* gravity forms */
.content .gform_fields li {
  padding-left: 0;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), textarea {
  border: 1px solid #c6c6c6;
  padding: 0.625rem;
}



/* Utility
---------------------------------------------------------------------------------------------------- */
html.no-scroll {
  margin: 0;
  height: 100%;
}

.desktop {
    display: inline-block;
}

.tablet-down, .mobile-only {
    display: none!important;
}

.disabled {
  display: none!important;
}

.entry-author {
    display: none;
}

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

.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom:2.25rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom:2.25rem;
}

.aligncenter {
  margin:0 auto;
}

.page-content p:after {
    content:"";
    display: block;
    clear: both;
    float: none;
}

.page-content .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.one-half { width: 100%; max-width:48%; }
.one-third { width: 100%; max-width: 31%; }
.one-fourth { width: 100%; max-width:23%; }
.one-sixth { width: 100%; max-width:15%; }
.two-thirds { width: 100%; max-width: 67%; }
.three-fourths { width: 100%; max-width:75%; }

.row-flex {
  display: flex;
  align-items: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
}

.col-2 {
  width: 100%;
  max-width: 48%;
}

.col-3 {
  width: 100%;
  max-width: 31%;
  margin-bottom: 1.875rem;
}

.col-4 {
  width: 100%;
  max-width: 23%;
}

/* flex utilities */
.fwrap {
  flex-wrap: wrap;
}

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

.ai-stretch {
  align-items: stretch;
}

.jc-start {
  justify-content: flex-start;
}

.jc-end {
  justify-content: flex-end;
}

.fit-cover {
  height:100%;
  object-fit:cover;
}


.prev-slide, .next-slide {
  width: 34px;
  position: relative;
  display: inline-block;
  border: none;
  height: 14px;
  margin-right: 0.625rem;
}

.round {
	border-radius: 50%;
}

.bg-gray {
  background: #e6e6e6;
}

.prev-slide:hover, .next-slide:hover {
  border: none;
}

.prev-slide:after, .next-slide:after {
  content: "";
  height: 1px;
  background-color: #505050;
  right: 0;
  top: 50%;
  width: 27px;
  position: absolute;
}

.arrow-prev {
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right: 7px solid #505050;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.next-slide {
  width: 94px;
  margin-left: 0.625rem;
  margin-right: 0;
}

.next-slide:after {
  left: 0;
  width: 87px;
}


.arrow-next {
  width: 0; 
  height: 0; 
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent; 
  border-left: 7px solid #505050;
  display: block;
  position: absolute;
  right: 0;
  top:0;
}

.services .slidenumber {
  width: 0.375rem;
  display: inline-block;
}


/* social blog */
.blog-content {
  width: 920px;
}

.blog-sidebar {
  width: 320px;
}

.blog-listing article {
  display:flex;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.blog-listing .img-container {
  width: 33%;
}

.blog-listing .content-container {
  width: 64%;
}

.nav-previous, .nav-next {

}

.content .content-col-2 {
  max-width:48%;
  width:100%;
  text-align:center;
}

.content .content-col-2 img, .content .content-col-2 figure {
  width:100%!important;
  height:auto;
}

.content .content-col-3 {
  max-width:31%;
  width:100%;
  text-align:center;
}

.content p, .content ul, .content h2, .content h3, .content h4 {
  width:100%;
}

.wp-caption-text {
  text-align: center;
}




/*
---------- MEDIA QUERIES -----------------------*/

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* iPad, tablet Horizontal */
@media screen and (max-width:1319px){
}


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

}


/* iPad, tablet Vertical */
@media screen and (max-width:1023px){


    .desktop {
        display: none!important;
    }
    
    .tablet-down {
        display: initial!important;
    }

    .page-content .row {
        flex-wrap: wrap;
    }

    .one-half { width: 100%; max-width:48%; }
    .one-third { width: 100%; max-width: 31%; }
    .one-fourth { width: 100%; max-width:48%; }
    .one-sixth { width: 100%; max-width:31%; }
    .two-thirds { width: 100%; max-width: 67%; }
    .three-fourths { width: 100%; max-width:48%; }

    .col-2 {
      width: 100%;
      max-width: 48%;
    }
    
    .col-3 {
      width: 100%;
      max-width: 31%;
    }
    
    .col-4 {
      width: 100%;
      max-width: 48%;
    }

    .alignleft, .alignright {
        width:100%;
        max-width: 48%;
    }

    .alignleft {
      margin-right:20px;
    }

    .alignright {
      margin-left:20px;
    }

}



/* Phone vertical */
@media screen and (max-width:767px){
  

    .mobile-only {
        display: block;
    }

    /* all columns to full width */
    .one-half,.one-third, .one-fourth, .one-sixth, .two-thirds, .three-fourths, .col-2, .col-3, .col-4, .content-col-2, .content-col-3 { 
        width:100%;
        max-width: 100%;
    }

    .alignleft, .alignright, .alignleft img, .alignright img {
        width:100%;
        max-width: 100%;
        float: none;
        clear: both;
        margin-left:0;
        margin-right:0;
    }

    .content .content-col-2, .content .content-col-3 {
        text-align:center;
    }
  
}

/*
---------- Section / container relationship -------------------
   Automatic.css owns BOTH halves of the page shell:
     - the gutter, via padding-inline: var(--gutter) on every top-level
       <section> (fluid, 16px at mobile up to 80px at desktop)
     - the width cap, via --content-width (Layout > Content Width)
   .container therefore only centres and caps; it carries no padding of
   its own, and no per-breakpoint padding either. Change the gutter and
   the content width in the ACSS dashboard, never here.               */