/*
Theme Name:   Hello Elementor Child - Nielco IT
Description:  Child-tema til Hello Elementor for nielcoit.dk. Indeholder sitets faelles CSS (header, mobilmenu, panelplacering, blogfilter m.m.), som tidligere laa i header- og footer-skabelonernes Tilpasset CSS i Elementor.
Author:       Nielco IT
Template:     hello-elementor
Version:      1.0.1
Text Domain:  hello-elementor-child
*/

/* =====================================================================
   HEADER (flyttet fra header-skabelonen 91079)
   ===================================================================== */

/* Sticky header som paa nielcoit.dk: gennemsigtig oeverst, moerk og lavere med mindre logo efter scroll (kun desktop, kraever scroll-drevne animationer) */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1025px) {
    .elementor-element-4850f03b {
      position: fixed !important;
      top: var(--wp-admin--admin-bar--height, 0px) !important;
      left: 0;
      right: 0;
      z-index: 999 !important;
      min-height: 0 !important;
      animation: ni-hdr-bar linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 80px;
    }
    .elementor-91079 [data-id="1c09ec60"] {
      animation: ni-hdr-logo linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 80px;
    }
    .elementor-element-44cf47c0 .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
      animation: ni-hdr-nav linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 80px;
    }
  }
}
@keyframes ni-hdr-bar {
  from { background-color: rgba(40, 44, 53, 0); box-shadow: 0 0 7px rgba(0, 0, 0, 0); padding-top: 6px; padding-bottom: 6px; }
  to { background-color: #282C35; box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); padding-top: 5px; padding-bottom: 5px; }
}
@keyframes ni-hdr-logo {
  from { width: 238px; }
  to { width: 182px; }
}
@keyframes ni-hdr-nav {
  from { padding-top: 20px; padding-bottom: 20px; }
  to { padding-top: 8px; padding-bottom: 8px; }
}

/* Mobilmenu som paa nielcoit.dk: fuld skaerm, store hvide punkter, +/- knap ved undermenuer */
@media (max-width: 1024px) {
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown {
    background-color: #1A1A2E !important;
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    min-height: calc(100vh - 100px);
    padding: 15px 15px 40px !important;
    box-shadow: none !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown ul.sub-menu {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown li {
    border: 0 !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a.elementor-item,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a.elementor-sub-item,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a.highlighted,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a:focus {
    position: relative;
    color: #ffffff !important;
    background-color: transparent !important;
    font-family: var(--ni-font-body), Nunito, sans-serif !important;
    font-weight: 600 !important;
    border: 0 !important;
    text-decoration: none !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown > ul > li > a {
    font-size: 24px !important;
    line-height: 33.6px !important;
    padding: 14px 50px 14px 20px !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown > ul > li > ul > li > a {
    font-size: 20px !important;
    line-height: 28px !important;
    padding: 14px 50px 14px 40px !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown > ul > li > ul > li > ul > li > a {
    font-size: 18px !important;
    line-height: 25.2px !important;
    padding: 14px 50px 14px 60px !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown > ul > li > ul > li > ul > li > ul > li > a {
    font-size: 18px !important;
    line-height: 25.2px !important;
    padding: 14px 20px 14px 80px !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a.elementor-item-active,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a.elementor-item-active:focus {
    color: #B8A494 !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown .sub-arrow {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown .sub-arrow svg,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown .sub-arrow i {
    display: none !important;
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown .sub-arrow::before {
    content: "+";
    font-family: var(--ni-font-body), Nunito, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a.highlighted > .sub-arrow,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a[aria-expanded="true"] > .sub-arrow {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a.highlighted > .sub-arrow::before,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown a[aria-expanded="true"] > .sub-arrow::before {
    content: "\2212";
  }
}

/* =====================================================================
   FAELLES RETTELSER (flyttet fra footer-skabelonen 91080)
   ===================================================================== */

/* Lange ord i overskrifter brydes i stedet for at gaa ud over kanten (som paa nielcoit.dk) */
.elementor h1, .elementor h2, .elementor h3, .elementor h4 {
  overflow-wrap: break-word;
}

/* Mobil: tekstpanelet starter lige under menuen, ligesom paa nielcoit.dk.
   Topbilledet er 140px hoejt paa mobil; sektionen efter det traekkes op til 64px fra toppen. */
@media (max-width: 767px) {
  .elementor > .e-con:first-child + .ni-section {
    margin-top: -76px !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 1;
  }
}

/* Tablet: tekstpanelet starter 72px fra toppen (lige under menuen). Topbilledet er 18,229% af bredden.
   Blogindlaeg (fuld bredde moerk sektion) styres i indlaegsskabelonen i stedet. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor > .e-con:first-child + .ni-section:not(.elementor-element-24bcc4e4) {
    margin-top: min(0px, calc(72px - 18.229%)) !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 1;
  }
}

/* Hele menuen vises fra 981px som paa nielcoit.dk (burgermenu kun under 981px) */
@media (min-width: 981px) and (max-width: 1024px) {
  .elementor-element-44cf47c0 .elementor-nav-menu--main { display: flex !important; }
  .elementor-element-44cf47c0 .elementor-menu-toggle,
  .elementor-element-44cf47c0 nav.elementor-nav-menu--dropdown { display: none !important; }
}

/* Blogfilteret (plugin) i sidens skrifttyper som paa nielcoit.dk */
.nielcoit-filter-bar, .nielcoit-filter-btn, .nielcoit-filter-count, .nielcoit-load-more, .nielcoit-filtered-posts {
  font-family: var(--ni-font-body), Nunito, sans-serif;
}
.nielcoit-post-title, .nielcoit-post-title a {
  font-family: var(--ni-font-heading), "Noto Sans", sans-serif;
  font-weight: 700;
}
/* Reserver plads til indlaeggene, indtil plugin'et har hentet dem, saa siden ikke hopper */
.e-con:has(> .nielcoit-filter-bar):not(:has(.nielcoit-filtered-posts)) > .nielcoit-filter-bar { margin-bottom: 1150px; }
@media (max-width: 1024px) {
  .e-con:has(> .nielcoit-filter-bar):not(:has(.nielcoit-filtered-posts)) > .nielcoit-filter-bar { margin-bottom: 990px; }
}
@media (max-width: 767px) {
  .e-con:has(> .nielcoit-filter-bar):not(:has(.nielcoit-filtered-posts)) > .nielcoit-filter-bar { margin-bottom: 2240px; }
}

/* =====================================================================
   FORSIDEN (version 1.0.1)
   ===================================================================== */

/* Hero-overskriften paa mobil: Arimo (webskrift med Arials bredder) og fast bredde,
   saa linjerne altid knaekker efter "IT-raadgivning," og ikke ved bindestregen i "IT-sikkerhed".
   Uden webskriften bruger Android Roboto, som er smallere, og saa passer "IT-" op paa foerste linje. */
@media (max-width: 767px) {
  .elementor-7 [data-id="53da6f91"] {
    font-family: Arimo, Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    max-width: 180px !important;
  }
}

/* De tre bokse under hero: knappen staar ved siden af ikonet, naar boksen er bred nok
   til knapteksten paa een linje; ellers under ikonet. Maales paa den enkelte boks,
   saa det ogsaa virker paa mobil, hvor boksene staar under hinanden. */
.elementor-7 [data-id="b461dcf"],
.elementor-7 [data-id="376b6d23"],
.elementor-7 [data-id="19c062c6"] {
  container-type: inline-size;
  grid-template-rows: auto 1fr !important;
}
@container (min-width: 300px) {
  .elementor-7 [data-id="5ff04f81"],
  .elementor-7 [data-id="3e177a25"],
  .elementor-7 [data-id="6d4ffc3f"] {
    grid-row: 1 / span 2;
  }
  .elementor-7 [data-id="5c89f589"],
  .elementor-7 [data-id="2eb74aec"],
  .elementor-7 [data-id="66794c86"] {
    grid-column: 2 !important;
  }
}