/*
Theme Name: SINUZ Elementor
Theme URI: https://sinuz.dk
Description: Child theme til SINUZ Elementor-sitet (hello-elementor + HFE).
Author: e-studio
Template: hello-elementor
Version: 1.0.5
Text Domain: sinuz-elementor
*/

/*
 * Strukturelle tokens — bruges af forside.css, admin-bar og HFE-workarounds.
 * Farver/typografi styres i Elementor Site Settings (kit).
 */
:root {
  --sand-light: #F1EFE8;
  --sand-mid: #D3D1C7;
  --sand-dark: #B4B2A9;
  --gray-mid: #888780;
  --gray-dark: #5F5E5A;
  --gray-deeper: #444441;
  --near-black: #575757;
  --white: #FAFAF8;
  /* Fallback — opdateres af nav-offset.js til faktisk header-højde */
  --nav-h: 60px;
  --nav-top: 0px;
  --banner-h: 0px;
  --page-top: var(--nav-h);
  --gutter: 3rem;
  /* Ydelses-ikoner — dæmpede accenter */
  --icon-vvs: #6b8f9c;
  --icon-vvs-bg: rgba(107, 143, 156, 0.14);
  --icon-vvs-border: rgba(107, 143, 156, 0.3);
  --icon-ventilation: #7a9e8e;
  --icon-ventilation-bg: rgba(122, 158, 142, 0.14);
  --icon-ventilation-border: rgba(122, 158, 142, 0.3);
  --icon-energi: #c4a574;
  --icon-energi-bg: rgba(196, 165, 116, 0.16);
  --icon-energi-border: rgba(196, 165, 116, 0.32);
  --icon-indeklima: #8ba4b4;
  --icon-indeklima-bg: rgba(139, 164, 180, 0.14);
  --icon-indeklima-border: rgba(139, 164, 180, 0.3);
  --icon-baeredygtighed: #6d8b62;
  --icon-baeredygtighed-bg: rgba(109, 139, 98, 0.14);
  --icon-baeredygtighed-border: rgba(109, 139, 98, 0.3);
  --icon-dgnb: #5c7a6a;
  --icon-dgnb-bg: rgba(92, 122, 106, 0.14);
  --icon-dgnb-border: rgba(92, 122, 106, 0.3);
  --icon-cts: #7b8c9a;
  --icon-cts-bg: rgba(123, 140, 154, 0.14);
  --icon-cts-border: rgba(123, 140, 154, 0.3);
  --icon-bygherrer: #9a8b7a;
  --icon-bygherrer-bg: rgba(154, 139, 122, 0.14);
  --icon-bygherrer-border: rgba(154, 139, 122, 0.3);
  --icon-commissioning: #8b7a9e;
  --icon-commissioning-bg: rgba(139, 122, 158, 0.13);
  --icon-commissioning-border: rgba(139, 122, 158, 0.28);
  --icon-projektledelse: #8a7f6e;
  --icon-projektledelse-bg: rgba(138, 127, 110, 0.14);
  --icon-projektledelse-border: rgba(138, 127, 110, 0.3);
  --icon-granskning: #6e7d8c;
  --icon-granskning-bg: rgba(110, 125, 140, 0.14);
  --icon-granskning-border: rgba(110, 125, 140, 0.3);
  --icon-kloak: #5f8a8a;
  --icon-kloak-bg: rgba(95, 138, 138, 0.14);
  --icon-kloak-border: rgba(95, 138, 138, 0.3);
  --icon-byggeledelse: #88967a;
  --icon-byggeledelse-bg: rgba(136, 150, 122, 0.14);
  --icon-byggeledelse-border: rgba(136, 150, 122, 0.3);
}

body.sinuz-el-site {
  overflow-x: hidden;
}

body.sinuz-el-site.no-banner {
  --banner-h: 0px;
}

/* Skjul Hello Elementors standard side-header */
body.sinuz-el-site .page-header {
  display: none;
}

body.sinuz-el-site .site-main {
  padding-left: 0;
  padding-right: 0;
}

/* Fixed nav — indhold skal starte under header (styres ikke i Elementor) */
body.sinuz-el-site #page,
body.sinuz-el-site .site,
body.sinuz-el-site main#content {
  padding-top: var(--page-top);
}

/* HFE plugin wrappers — masthead/footer reset (udenfor Elementor-træet) */
.ehf-header #masthead,
.ehf-header .site-header {
  background: transparent;
  padding: 0;
  max-width: 100%;
  width: 100%;
  box-shadow: none;
  position: relative;
  z-index: 101;
}

.ehf-footer .site-footer,
.ehf-footer footer.site-footer {
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

/* Draft banner — kun hvis aktiveret som HFE/Elementor-container */
.draft-banner,
.sinuz-hfe-banner-wrap.draft-banner {
  background: var(--near-black);
  color: var(--sand-mid);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 7px;
  text-transform: uppercase;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  min-height: var(--banner-h);
}

/* Glass-effekt — ikke tilgængelig i gratis Elementor */
.sinuz-hfe-nav-wrap.sinuz-main-nav {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sinuz-hfe-nav-wrap .nav-logo-main .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

.sinuz-hfe-nav-wrap .nav-logo-main .elementor-heading-title a:hover {
  opacity: 0.75;
}

/* ADMIN BAR — synk med fixed nav (WP bruger absolute admin bar under 600px) */
body.admin-bar {
  padding-top: 0;
  --nav-top: var(--wp-admin--admin-bar--height, 32px);
  --page-top: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 32px));
}

html {
  margin-top: 0 !important;
}

#wpadminbar {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  z-index: 99999;
}

body.admin-bar .draft-banner,
body.admin-bar .sinuz-hfe-banner-wrap.draft-banner {
  top: var(--nav-top);
}

body.admin-bar .sinuz-main-nav.elementor-element-59925a7e {
  top: var(--nav-top);
}

/*
 * HFE menu — plugin-defaults der ikke kan sættes i Elementor.
 * Typografi/farver styres i SINUZ Header; dette er kun layout-struktur.
 */
.sinuz-hfe-nav-wrap .elementor-widget-navigation-menu {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
}

.sinuz-hfe-nav-wrap .elementor-widget-container,
.sinuz-hfe-nav-wrap .hfe-nav-menu.hfe-layout-horizontal {
  width: auto;
}

.sinuz-hfe-nav-wrap .sinuz-hfe-logo-wrap,
.sinuz-hfe-nav-wrap .nav-logo.e-con {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.sinuz-hfe-nav-wrap .elementor-widget-navigation-menu .hfe-nav-menu-icon,
.sinuz-hfe-nav-wrap .hfe-nav-menu__toggle .hfe-nav-menu-icon {
  padding: 0;
  line-height: 0;
}

@media screen and (min-width: 1025px) {
  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
  .sinuz-hfe-nav-wrap nav.hfe-nav-menu__layout-horizontal > ul.hfe-nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item {
    margin-bottom: 0;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu a.hfe-menu-item,
  .sinuz-hfe-nav-wrap .hfe-nav-menu a.hfe-sub-menu-item {
    text-decoration: none;
    background: transparent;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    line-height: 24px;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item {
    line-height: 24px;
    font-size: 15px;
    min-height: 24px;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal .hfe-nav-menu a.hfe-menu-item {
    display: inline;
    line-height: 1.6;
    min-height: 0;
    height: auto;
    vertical-align: baseline;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__toggle {
    display: none;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal {
    visibility: visible;
    opacity: 1;
    height: auto;
    position: static;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    visibility: visible;
    opacity: 1;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --gutter: 1.5rem;
  }

  .sinuz-hfe-nav-wrap.sinuz-main-nav,
  .sinuz-hfe-nav-inner.e-con {
    overflow: visible;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu.hfe-layout-horizontal {
    position: relative;
    overflow: visible;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu.hfe-layout-horizontal > .hfe-nav-menu__layout-horizontal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Burger-ikon — lys på mørk nav */
  .sinuz-hfe-nav-wrap .hfe-nav-menu__toggle .hfe-nav-menu-icon,
  .sinuz-hfe-nav-wrap .hfe-nav-menu__toggle .hfe-nav-menu-icon svg {
    color: var(--white) !important;
    fill: var(--white) !important;
  }

  /* Åben mobilmenu — mørk panel under nav (matcher desktop-nav) */
  .sinuz-hfe-nav-wrap .hfe-active-menu.hfe-active-menu-full-width + .hfe-nav-menu__layout-horizontal,
  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 101;
    background: var(--near-black) !important;
    border-top: 0.5px solid rgba(180, 178, 169, 0.25);
    box-shadow: 0 12px 28px rgba(44, 44, 42, 0.22);
  }

  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal nav.hfe-nav-menu__layout-horizontal > ul.hfe-nav-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
  .sinuz-hfe-nav-wrap nav.hfe-nav-menu__layout-horizontal > ul.hfe-nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .sinuz-hfe-nav-wrap .hfe-nav-menu a.hfe-menu-item,
  .sinuz-hfe-nav-wrap .hfe-nav-menu a.hfe-sub-menu-item {
    display: block;
  }

  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal a.hfe-menu-item,
  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal a.hfe-sub-menu-item {
    color: var(--sand-light) !important;
    background: transparent !important;
    font-family: var(--e-global-typography-accent-font-family, 'DM Sans'), sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px var(--gutter) !important;
    border-bottom: 0.5px solid rgba(180, 178, 169, 0.25);
  }

  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal .menu-item:last-child a.hfe-menu-item {
    border-bottom: 0;
  }

  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal a.hfe-menu-item:hover,
  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal a.hfe-menu-item:focus-visible,
  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal .menu-item.current-menu-item a.hfe-menu-item,
  .sinuz-hfe-nav-wrap .hfe-active-menu + .hfe-nav-menu__layout-horizontal .menu-item.current-menu-ancestor a.hfe-menu-item {
    color: var(--white) !important;
    background: rgba(44, 44, 42, 0.45) !important;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --gutter: 1.25rem;
  }
}