/* TRAC group styling */ 

:root { 
    --accent:#0b5f8a; 
    --bg:#f5f5f5; 

    --primary: #F9D616; 
    --primary-light: #f9d929; /* 8 % lighter - using https://www.terrific.tools/color/*/
    --primary-pale: #fceb8b; /* 50 % lighter */
    --primary-dark: #a9920f; /* 32 % darker */
    --primary-darkest: #7d6b0b; /* 50 % darker */

    --grey-light: #e9e9e9; /* 50 % lighter */
    --grey: #d3d3d3;
    --grey-dark: #8f8f8f; /* 32 % darker */
    --grey-darker: #6a6a6a; /* 50 % darker */
    --grey-black: #222222; /* 87 % darker */
}

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

html {
    overflow-x: hidden;
}

ul.diamond, footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-start: 0 ;
}

ul.diamond li {
    position: relative;
    padding-left: 2rem; 
    margin: 0.4rem 0;
}

ul.diamond li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 0.6rem;
    background: var(--primary-dark);
    clip-path: polygon(
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
        );
    }
    
    footer ul li {
        list-style: none;
        list-style-type: none;
        padding: 0;
    }
    
a {
    text-decoration:underline;
    transition: all .3s ease;
    transition-duration: 0.3s; 
    color: var(--primary-darkest);
    text-underline-offset: .16em;
    text-decoration-thickness: 0.5px;
}

a:hover, a:focus, a:focus-visible {
    color:var(--grey-black);
    text-decoration-thickness: 1.5px !important;
    text-decoration:underline;
    transition: all 0.3s;
}
.wp-block-button__link:hover {
        border-color: var(--primary-dark);
        text-decoration: none;
}
a:focus, a:focus-visible {
    background-color: var(--primary-pale);
}
header {
    a:focus, a:focus-visible {
    background: none !important;
    outline-style: none;
    color: var(--primary-pale);
}
}


/* theme specific */ 

body {
    margin: 0;
    overflow-x: hidden;
    background-image: url(wp-content/themes/hlm25/assets/DiagBG-05.svg);
    
    background-repeat: none;
    background-position: 0% 10%;
    background-size: cover;
    background-attachment: fixed;
}

header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color:rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    border-bottom: 4px solid #F9D616;
}
header, header a {
    color: #fff;
}
header a:hover {
    color: #F9D616;
    border-bottom: none;
}
header .current-menu-item {
    color: #F9D616;
 
}

.wp-block-image img, 
.wp-block-media-text__media img,
.wp-block-latest-posts__featured-image img {
    border-radius: 8px;
}
.wp-block-latest-posts__featured-image img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
}

main {
    margin-top: 0 !important;
}

/* Add spacing to the first block inside main */
main > *:first-child {
    margin-top: var(--wp--preset--spacing--20);
}

/* Fix margins on first custom HTML block - full viewport width */
main > *:first-child.capital-slider,
main > *:first-child section.capital-slider,
.capital-slider,
.capital-viewport,
.capital-track {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
}
.blur {
    backdrop-filter: blur(10px);
    -webkit-filter: blur(10px); /* For Safari */
}
.top-round {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.greyscale {
    filter: grayscale(1);
}
.whiteoverlay {
    background-color:rgba(245, 245, 245, 0.5) !important; 
    backdrop-filter: blur(10px) !important;
}

.page-numbers {
    padding: 4px;
    margin: 4px;
}
/* gsap accordion styles */

.accordion {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 4px;
    position: relative;
} 
.panel {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0 auto;

    border-radius: 4px;
}

.panel-header {
    cursor: pointer;
}

.spacer {
    height: 3px;
    position: absolute;
    width: 0;
    display: block;

}

.panel-content {
    position: relative;
    height: 0;
    margin: 0;
}
.item {
    display: block;
    width:100%;
    cursor: pointer;
}
.panel i {
    text-indent:0;  /* Keep paragraph text-indent setting from affecting icons */
    padding-right: 6px;
}
.panel span i {

    padding-right: 0; /* No padding on arrow icon */
}
.arrow {
    text-indent:0;  /* Keep paragraph text-indent setting from affecting icons */
    float: right;
    position: relative;
    right: 16px;
    font-weight: bold;
}



/* ===== Case Studies Carousel (GSAP) ===== */

/* Viewport: clips the moving track */
.cs-carousel-viewport {
  overflow: hidden;
  position: relative;
}

/* Track: single horizontal row, no wrap */
.cs-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--wp--preset--spacing--40, 1.5rem);
  will-change: transform;
}

/* Slides: fixed basis per breakpoint; prevent shrinking */
.cs-carousel-track > .cs-slide,
.cs-carousel-track > li,
.cs-carousel-track > .wp-block-post {
  flex: 0 0 80%;
  max-width: 80%;
}
.cs-carousel-track > li:focus {

    outline-style: none !important;
}

/* Show more per view on wider screens */
@media (min-width: 768px) {
  .cs-carousel-track > .cs-slide,
  .cs-carousel-track > li,
  .cs-carousel-track > .wp-block-post {
    flex-basis: 45%;
    max-width: 45%;
  }
}
@media (min-width: 1100px) {
  .cs-carousel-track > .cs-slide,
  .cs-carousel-track > li,
  .cs-carousel-track > .wp-block-post {
    flex-basis: 30%;
    max-width: 30%;
  }
}

/* Neutralize Gutenberg defaults on Post Template if used as track */
.wp-block-post-template.cs-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
}

/* Optional card styling for slides */
.cs-slide {
  background: var(--wp--preset--color--background, #fff);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .75rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  padding: 1rem;
  min-height: 100%;
}

/* Button row (optional) */
.cs-controls {
  display: flex;
  gap: .75rem;
  cursor: pointer;
  margin-top: 1rem;
  float: right;
}
.cs-navigate i {
    font-size: 200%;
}

/* ===== Sticky services content block ===== */

/* makes this section wider than the normal wp content area on desktop */
.force-fullwidth {
  width: 90vw;
  max-width: 90vw !important;
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
  margin-block-start: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* desktop layout: image on the left, text on the right */
.scroll-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible !important;
}

/* desktop image column — full viewport height with equal padding all round,
   so the pinned image sits dead-centre of the screen */
.sticky-image-wrapper {
  width: 50%;
  height: 100vh;
  padding: 4vw;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* keeps the image inside a clean cropped box */
.sticky-image-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: #fff;
}

/* image fills the box completely (cover crops the overflow) so the
   whitespace around it is exactly the wrapper padding on all sides
   (double selector beats core's .wp-block-image img { height: auto }) */
.sticky-image-container img,
.sticky-image-container .wp-block-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  margin: 0;
  padding: 0;
  border: 0;
}

/* desktop text column */
.text-content {
  width: 50%;
  padding: 8vw 6vw;
  background: #fff;
  box-sizing: border-box;
  margin: 0;
  overflow: visible !important;
}

/* adds space between each text section */
.content-section {
  margin-bottom: 15vh;
}

/* gutenberg image block inside the sticky image area: strip figure spacing
   and centre the image within the container */
.sticky-image-container .wp-block-image {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* per-section gutenberg image blocks only show on mobile; the pinned
   sticky image takes over on desktop */
@media (min-width: 1025px) {
  .content-section .section-image {
    display: none !important;
  }
}

/* mobile layout */
@media (max-width: 1024px) {

  /* controls the height of the pinned mobile image */
  :root {
    --mobile-image-height: clamp(260px, 70vw, 350px);
  }

  /* stops horizontal scrolling on mobile */
  html,
  body {
    overflow-x: hidden;
  }

  /* makes the section full width on mobile */
  .force-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* stacks the image above the text on mobile */
  .scroll-container {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* mobile image area that gets pinned to the top */
  .sticky-image-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--mobile-image-height) !important;
    min-height: var(--mobile-image-height) !important;
    max-height: var(--mobile-image-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 50;
    background: #fff;
    display: flex !important;
    flex-direction: column !important;
  }

  /* whitespace above pinned image that moves with it */
  .sticky-image-wrapper::before {
    content: '';
    display: block;
    height: 30px;
    width: 100%;
    background: #fff;
    flex-shrink: 0;
  }

  /* whitespace below pinned image that moves with it */
  .sticky-image-wrapper::after {
    content: '';
    display: block;
    height: 30px;
    width: 100%;
    background: #fff;
    flex-shrink: 0;
  }

  /* keeps the mobile image container the same size as the pinned area */
  .sticky-image-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--mobile-image-height) !important;
    min-height: var(--mobile-image-height) !important;
    max-height: var(--mobile-image-height) !important;
    margin: 0 !important;
    padding: 5px 5px !important;
    overflow: hidden !important;
    line-height: 0 !important;
    background: #fff;
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  /* makes the mobile image fill the width without leaving side gaps */
  .sticky-image-container img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* hide the desktop pinned image on mobile and show section-specific inline images instead */
  .sticky-image-wrapper {
    display: none !important;
  }

  .mobile-inline-image,
  .content-section .section-image {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 0 1.5rem 0 !important;
  }

  .mobile-inline-image img,
  .content-section .section-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0.5rem !important;
    margin: 0 !important;
  }

  /* keeps the text close to the pinned image on mobile */
  .text-content {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 18px 6vw 7vw 6vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 1;
    background: #fff;
  }

  /* adds whitespace gap above first section on mobile */
  .content-section:first-of-type {
    margin-top: 0 !important;
  }

  /* mobile spacing between sections */
  .content-section {
    margin-bottom: 12vh;
  }

  /* removes unwanted spacing from the wrapper GSAP creates when pinning */
  .pin-spacer {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

/* improvements for carousel interactivity */
.cs-carousel-viewport {
  /* hide overflow horizontally but allow menus/ shadows vertically */
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: pan-x; /* enable native swipe on touch devices */
}

.cs-carousel-track {
  cursor: grab; /* indicate draggable region */
}
.cs-carousel-track:active {
  cursor: grabbing;
}

/* ensure the prev/next controls are easier to target */
.cs-prev, .cs-next {
  user-select: none;
}
.cs-carousel-track img {
    border-radius: 4px;
}

/* fix for the mobile menu overlay behaviour where it was within the header and scrolled */
.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    background: #fff;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    min-height: 100dvh;
    padding: 2rem;
    box-sizing: border-box;
}
header,
.wp-block-template-part {
    overflow: visible !important;
}