/*
 Theme Name:   Hulsbosch
 Theme URI:    https://hulsbosch.com.au
 Description:  Divi 5 Child Theme for Hulsbosch Website
 Author:       Twisted Pear
 Author URI:   https://twistedpear.com.au
 Template:     Divi
 Version:      1.1.0
 Text Domain:  hulsbosch
*/

@import url('../Divi/style.css');

/* ============================================================
   GRAPHIK WEBFONTS
============================================================ */
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Thin-Web.eot'); src:url('fonts/Graphik-Thin-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Thin-Web.woff') format('woff'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-ThinItalic-Web.eot'); src:url('fonts/Graphik-ThinItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-ThinItalic-Web.woff') format('woff'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Extralight-Web.eot'); src:url('fonts/Graphik-Extralight-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Extralight-Web.woff') format('woff'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-ExtralightItalic-Web.eot'); src:url('fonts/Graphik-ExtralightItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-ExtralightItalic-Web.woff') format('woff'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Light-Web.eot'); src:url('fonts/Graphik-Light-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Light-Web.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-LightItalic-Web.eot'); src:url('fonts/Graphik-LightItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-LightItalic-Web.woff') format('woff'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Regular-Web.eot'); src:url('fonts/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Regular-Web.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-RegularItalic-Web.eot'); src:url('fonts/Graphik-RegularItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-RegularItalic-Web.woff') format('woff'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Medium-Web.eot'); src:url('fonts/Graphik-Medium-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Medium-Web.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-MediumItalic-Web.eot'); src:url('fonts/Graphik-MediumItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-MediumItalic-Web.woff') format('woff'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Semibold-Web.eot'); src:url('fonts/Graphik-Semibold-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Semibold-Web.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-SemiboldItalic-Web.eot'); src:url('fonts/Graphik-SemiboldItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-SemiboldItalic-Web.woff') format('woff'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Bold-Web.eot'); src:url('fonts/Graphik-Bold-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Bold-Web.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-BoldItalic-Web.eot'); src:url('fonts/Graphik-BoldItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-BoldItalic-Web.woff') format('woff'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Black-Web.eot'); src:url('fonts/Graphik-Black-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Black-Web.woff') format('woff'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-BlackItalic-Web.eot'); src:url('fonts/Graphik-BlackItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-BlackItalic-Web.woff') format('woff'); font-weight:900; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-Super-Web.eot'); src:url('fonts/Graphik-Super-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-Super-Web.woff') format('woff'); font-weight:950; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('fonts/Graphik-SuperItalic-Web.eot'); src:url('fonts/Graphik-SuperItalic-Web.eot?#iefix') format('embedded-opentype'),url('fonts/Graphik-SuperItalic-Web.woff') format('woff'); font-weight:950; font-style:italic; font-display:swap; }

/* ============================================================
   DESIGN TOKENS
   Verified via Figma MCP — April 2026
   File: hqse9ci8hHtsIMFTGxarpH / Node: 848:6507
============================================================ */
:root {
  --hb-color-bg:               #000000;
  --hb-color-bg-alt:           #404040;
  --hb-color-text-primary:     #FFFFFF;
  --hb-color-text-secondary:   rgba(255,255,255,0.5);
  --hb-color-text-muted:       #7F7F7F;
  --hb-color-border:           #C8C8C8;
  --hb-color-overlay-dark:     rgba(0,0,0,0.2);
  --hb-color-accent:           rgba(255,0,0,0.5);

  /* Nav pill — Figma node 1122:2941 */
  --hb-nav-pill-bg:            rgba(64,64,64,0.5);
  --hb-nav-pill-blur:          27px;
  --hb-nav-pill-radius:        4px;
  --hb-nav-pill-pad-x:         16px;
  --hb-nav-pill-pad-y:         8px;
  --hb-nav-pill-gap:           24px;
  --hb-nav-outer-pad:          24px;
  --hb-nav-height:             94px;

  /* Typography — Graphik Medium 500 only */
  --hb-font-family:            'Graphik','Helvetica Neue',Arial,sans-serif;
  --hb-font-weight:            500;
  --hb-text-xs:                14px;
  --hb-text-sm:                20px;
  --hb-text-md:                24px;
  --hb-text-lg:                32px;
  --hb-lh-tight:               1;
  --hb-lh-body:                1.2;
  --hb-lh-heading:             1.16;
  --hb-ls-wide:                0.08em;
  --hb-ls-normal:              0em;

  /* Spacing */
  --hb-space-1:  12px;
  --hb-space-2:  16px;
  --hb-space-3:  24px;
  --hb-space-4:  48px;
  --hb-space-5:  72px;
  --hb-space-6:  96px;
  --hb-space-7:  144px;
  --hb-space-8:  240px;

  /* Layout */
  --hb-content-width:        1440px;
  --hb-hero-body-max-width:  820px;
}

/* ============================================================
   BASE
============================================================ */
body {
  background-color: var(--hb-color-bg) !important;
  color: var(--hb-color-text-primary);
  font-family: var(--hb-font-family) !important;
  font-weight: var(--hb-font-weight);
}

/* ============================================================
   LAYOUT
============================================================ */
.et_pb_row {
  max-width: var(--hb-content-width) !important;
}

.et_pb_section {
  background-color: var(--hb-color-bg);
  padding-top: var(--hb-space-7) !important;
  padding-bottom: var(--hb-space-7) !important;
}

.et_pb_section:last-of-type {
  padding-bottom: var(--hb-space-8) !important;
}

/* ============================================================
   NAVIGATION
   Frosted glass pill floating over page content
   Source: Figma node 1122:2940 / 1122:2941
============================================================ */
#main-header {
  background-color: transparent !important;
  box-shadow: none !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--hb-nav-outer-pad);
  height: var(--hb-nav-height);
}

/* The pill container */
#main-header .et_pb_menu,
#main-header .et_menu_container,
.et_pb_menu_0 .et_pb_menu__menu {
  background-color: var(--hb-nav-pill-bg) !important;
  backdrop-filter: blur(var(--hb-nav-pill-blur));
  -webkit-backdrop-filter: blur(var(--hb-nav-pill-blur));
  border-radius: var(--hb-nav-pill-radius);
  padding: var(--hb-nav-pill-pad-y) var(--hb-nav-pill-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}

/* Nav links */
#main-header .nav li a,
#main-header .et_pb_menu .nav li a {
  font-family: var(--hb-font-family) !important;
  font-weight: var(--hb-font-weight);
  font-size: var(--hb-text-sm) !important;
  letter-spacing: var(--hb-ls-normal);
  color: var(--hb-color-text-primary) !important;
  line-height: 1;
  white-space: nowrap;
}

#main-header .nav,
#main-header .et_pb_menu nav ul {
  display: flex;
  gap: var(--hb-nav-pill-gap);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6,
.et_pb_text, .et_pb_blurb_content, .et_pb_module {
  font-family: var(--hb-font-family) !important;
  font-weight: var(--hb-font-weight);
  color: var(--hb-color-text-primary);
}

h1, .et_pb_text h1 {
  font-size: var(--hb-text-lg);
  line-height: var(--hb-lh-heading);
  letter-spacing: var(--hb-ls-normal);
}

h2, .et_pb_text h2 {
  font-size: var(--hb-text-md);
  line-height: var(--hb-lh-heading);
  letter-spacing: var(--hb-ls-normal);
}

p, .et_pb_text p {
  font-size: var(--hb-text-sm);
  line-height: var(--hb-lh-body);
  letter-spacing: var(--hb-ls-normal);
}

/* ============================================================
   HERO
   Source: Figma node 1109:1480
============================================================ */
.hb-hero {
  padding: var(--hb-space-7) 0;
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-4);
}

.hb-hero-headline {
  font-size: var(--hb-text-lg);
  line-height: var(--hb-lh-heading);
  color: var(--hb-color-text-primary);
  font-weight: var(--hb-font-weight);
}

.hb-hero-body {
  font-size: var(--hb-text-lg);
  line-height: var(--hb-lh-heading);
  color: var(--hb-color-text-secondary);
  max-width: var(--hb-hero-body-max-width);
  font-weight: var(--hb-font-weight);
}

/* ============================================================
   UTILITIES
============================================================ */
.hb-text-secondary { color: var(--hb-color-text-secondary); }
.hb-text-muted      { color: var(--hb-color-text-muted); }
.hb-label {
  font-size: var(--hb-text-xs);
  letter-spacing: var(--hb-ls-wide);
  line-height: var(--hb-lh-tight);
}

/* ============================================================
   FOOTER
============================================================ */
#main-footer {
  background-color: var(--hb-color-bg) !important;
  color: var(--hb-color-text-secondary);
  font-family: var(--hb-font-family);
}

#main-footer a { color: var(--hb-color-text-secondary) !important; }
#footer-bottom .et-social-icons { display: none; }