/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Blocksy Child Theme
Author: ALGA Digital
Template: blocksy
Version: 1.0
*/

/* Add your custom CSS below */

@font-face {
  font-family: "DINNextW05-Regular";
  src: url("/wp-content/themes/blocksy-child/fonts/DINNextW05-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GlyphaLTW05-65Bold";
  src: url("/wp-content/themes/blocksy-child/fonts/GlyphaLTW05-65Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DINNextW05-Medium";
  src: url("/wp-content/themes/blocksy-child/fonts/DINNextW05-Medium.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* COLOURS VARIABLES */

  --colour-1: #00629b;
  --colour-2: #009fd9;
  --colour-3: #1965a3;
  --colour-4: #003e51;
  --colour-5: #db6b30;
  --colour-6: #ffac80;
  --colour-7: #9bcbeb;

  /* FONT FAMILIES VARIABLES */
  --font-family-base: "DINNextW05-Regular", sans-serif;
  --font-family-heading: "GlyphaLTW05-65Bold", serif;
  --font-family-medium: "DINNextW05-Medium", serif;
}

header * {
  font-family: var(--font-family-base) !important;
}

footer * {
  font-family: var(--font-family-base) !important;
}

.ct-drawer-canvas * {
  font-family: var(--font-family-base) !important;
}

.ct-drawer-canvas .ct-button {
  font-family: var(--font-family-base) !important;
}

body,
p {
  font-family: var(--font-family-base) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading) !important;
  font-weight: 700 !important;
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-family-medium) !important;
  /* font-weight: 600 !important; */
}

h1,
h2 {
  line-height: 48px !important;
}

.gf--klamflex--small--h3 h3 {
  font-size: 22px !important;
}

/* Not necessary because h3 size is 24px by default in blocksy */
/* .gf--klamflex--medium--h3 h3 {
  font-size: 24px !important;
} */

/* ===========================================
   DESKTOP ONLY (1025px+)
=========================================== */
/* should you wish for h3 tag to be .gf--klamflex--small--h3 on tab and mobile but large on desktop, then first apply .gf--klamflex--small--h3 then .gf--klamflex--large--h3 */
@media (min-width: 1025px) {
  /* Desktop-only styles here */
  .gf--klamflex--large--h3 h3 {
    /* we apply 32px to any h3 tag with this class but on desktop only */
    font-size: 32px !important;
  }
}

/* class to turn h3 title tag into regualr text */
.gf--klamflex--regular--text--h3 h3 {
  font-family: var(--font-family-base) !important;
}

/* H4 tags in the footer */
footer h4 {
  font-family: var(--font-family-medium) !important;

  /* Specifically h4 tags in footer to be 24px on desktop, the media queries reduce to 22px on tablet and mobile */
  font-size: 24px !important;
}

/* p tags in the footer */
footer p {
  font-size: 18px !important;
}

.ct-footer .ct-widget:not(:first-child) {
  margin-top: 0 !important;
}

footer span.contact-title {
  font-weight: 400 !important;
}

footer div.ct-contact-info-block li {
  justify-content: start !important;
  align-items: start !important;
}

footer div.ct-contact-info-block a.ct-icon-container {
  margin-top: 6px !important;
}

/* GF-Klamflex styled Links */

p.gf--klamflex--link-style-1 a {
  color: var(--colour-1) !important;
}

p.gf--klamflex--link-style-1 a:hover {
  color: var(--colour-2) !important;
}

.gf--klamflex--link-style-1 p a {
  color: var(--colour-1) !important;
}

.gf--klamflex--link-style-1 p a:hover {
  color: var(--colour-2) !important;
}

p.gf--klamflex--link-style-2 a {
  text-decoration: underline !important;
  color: var(--colour-2) !important;
  text-decoration-color: var(--colour-2) !important;
}

p.gf--klamflex--link-style-2 a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--colour-7) !important;
  color: var(--colour-7) !important;
}

.gf--klamflex--link-style-2 p a {
  text-decoration: underline !important;
  color: var(--colour-2) !important;
  text-decoration-color: var(--colour-2) !important;
}

.gf--klamflex--link-style-2 p a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--colour-7) !important;
  color: var(--colour-7) !important;
}

p.gf--klamflex--link-style-3 a {
  text-decoration: underline !important;
  color: var(--colour-7) !important;
  text-decoration-color: var(--colour-7) !important;
}

p.gf--klamflex--link-style-3 a:hover {
  text-decoration: underline !important;
  text-decoration-color: white !important;
  color: white !important;
}

.gf--klamflex--link-style-3 p a {
  text-decoration: underline !important;
  color: var(--colour-7) !important;
  text-decoration-color: var(--colour-7) !important;
}

.gf--klamflex--link-style-3 p a:hover {
  text-decoration: underline !important;
  text-decoration-color: white !important;
  color: white !important;
}

/* gf--klamflex--link-style-4 is intended for use in the footer as underline removal request has been made */
p.gf--klamflex--link-style-4 a {
  /* text-decoration: underline !important; */
  color: var(--colour-7) !important;
  /* text-decoration-color: var(--colour-7) !important; */
}

p.gf--klamflex--link-style-4 a:hover {
  /* text-decoration: underline !important; */
  text-decoration-color: white !important;
  color: white !important;
}

.gf--klamflex--link-style-4 p a {
  /* text-decoration: underline !important; */
  color: var(--colour-7) !important;
  /* text-decoration-color: var(--colour-7) !important; */
}

.gf--klamflex--link-style-4 p a:hover {
  /* text-decoration: underline !important; */
  /* text-decoration-color: white !important; */
  color: white !important;
}

/* Change any font to DINNextW05-Medium */
.gf--klamflex--font-medium-dinn {
  font-family: var(--font-family-medium) !important;
  font-weight: 600 !important;
}

/*Back to top button in blocksy*/
.ct-back-to-top {
  border: 2px solid var(--colour-2) !important;
  border-radius: 0 !important;
}

/* custom link button 1 */
.gf--klamflex--custom--btn--link--1 p {
  font-family: var(--font-family-medium) !important;
  font-weight: 600 !important;
}

.gf--klamflex--custom--btn--link--1:hover p {
  color: white !important;
}

.gf--klamflex--custom--btn--link--1:hover {
  background-color: var(--colour-2) !important;
}

@media (min-width: 1025px) {
  /* Desktop-only styles here */
  .gf--klamflex--custom--btn--link--1 div.elementor-icon svg {
    transition: transform 0.3s ease !important;
  }

  .gf--klamflex--custom--btn--link--1:hover div.elementor-icon svg {
    transform: translateX(-5px) !important;
  }
}

.gf--klamflex--custom--btn--link--1:hover div.elementor-icon svg {
  /* fill: red !important; */
}

.gf--klamflex--custom--btn--link--1:hover div.elementor-icon svg path {
  fill: white !important;
}

/* ===========================================
   GLOBAL / DESKTOP (1025px+)
=========================================== */

.gf--klamflex--gallery--project--title--h3 h3 {
  font-family: var(--font-family-heading) !important;
}

/* ===========================================
   TABLET & MOBILE (<=1024px)
=========================================== */

@media (max-width: 1024px) {
  footer h4 {
    /* 22px on tablet and mobile */
    font-size: 22px !important;
  }

  footer p {
    font-size: 16px !important;
  }

  footer figure.excellence-in-flow-footer-svg img {
    width: 170px !important;
  }

  .gf--klamflex--custom--btn--link--1:hover {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .gf--klamflex--custom--btn--link--1:hover p {
    color: var(--colour-2) !important;
    text-decoration: underline !important;
  }

  .gf--klamflex--custom--btn--link--1:hover div.elementor-icon svg path {
    fill: var(--colour-2) !important;
  }

  .gf--klamflex--gf--logo img {
    height: 27px !important;
  }

  h1,
  h2 {
    line-height: 35px !important;
  }
}

/* ===========================================
   MOBILE ONLY (<=767px)
=========================================== */

@media (max-width: 767px) {
  /* logo on offcanvas for mobile */

  a.site-logo-container {
    width: 100% !important;
    /* display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: start !important; */
  }

  div.ct-panel-content-inner a.site-logo-container img {
    /* background-color: red !important; */
    width: 100% !important;
  }
}

/* ===========================================
   TABLET ONLY (768px - 1024px)
=========================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet-only styles */
  a.site-logo-container {
    width: 100% !important;
    /* display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: start !important; */
  }
}

/* snippet to make search input box top aligned - blocksy */
#search-modal div.ct-panel-content {
  justify-content: start !important;
}

@media (max-width: 1024px) {
  #search-modal div.ct-panel-content {
    padding-top: 30px !important;
  }
}

/* centre elementor icons */

div.elementor-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* recommended bolt torque table / technical tables */
.technical-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.technical-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.technical-table th,
.technical-table td {
  padding: 8px 16px;
  text-align: left;
  white-space: nowrap;
}

.technical-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* Download page cards */

.gf--klamflex--download--card {
}

.gf--klamflex--download--icon {
}

.gf--klamflex--download--icon--text {
}

.gf--klamflex--download--card:hover .gf--klamflex--download--icon svg,
.gf--klamflex--download--card:hover .gf--klamflex--download--icon--text p {
  color: var(--colour-1) !important;
}

/* logo on offcanvas for mobile */
div.ct-panel-content-inner {
}

article.entry-card h2.entry-title {
  /* color: red !important; */
  font-family: var(--font-family-medium) !important;
  line-height: normal !important;
}

/* top icons for contact and vag group on desktop */

/* #header-menu-2 .top-contact,
#header-menu-2 .top-vag {
  position: relative;
}

#header-menu-2 .top-contact::before,
#header-menu-2 .top-vag::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  line-height: 1;
}

#header-menu-2 .top-contact::before {
  content: "☎";
}

#header-menu-2 .top-vag::before {
  content: "↗";
} */

#header-menu-2 .top-contact,
#header-menu-2 .top-vag {
  display: flex !important;
  align-items: center;
}

#header-menu-2 .top-contact::before,
#header-menu-2 .top-vag::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Contact icon */
#header-menu-2 .top-contact::before {
  /* subdomain dev */
  /* background-image: url("/wp-content/uploads/2026/08/Contact.svg"); */

  /* actual domain */
  background-image: url("/wp-content/uploads/2026/08/Contact.svg");
}

/* VAG Group icon */
#header-menu-2 .top-vag::before {
  /* subdomain dev */
  /* background-image: url("/wp-content/uploads/2026/08/language-select.svg"); */

  /* actual domain */
  background-image: url("/wp-content/uploads/2026/08/language-select.svg");
}

#header-menu-2 .top-contact::before,
#header-menu-2 .top-vag::before {
  transform: translateX(6px) !important;
}