/*
 Theme Name:   Constructum Child
 Description:  Constructum Child Theme
 Theme URI:	   https://demo.artureanec.com/themes/constructum
 Author:       Artureanec
 Author URI:   https://demo.artureanec.com
 Template:     constructum
 Version:      1.0.0
 License: GNU  General Public License version 3.0
 License URI:  http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  constructum-child
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* NT 2026-09-28: accent #166574 instead of theme orange (parent theme.css hardcodes the old orange in this gradient) */
.elementor-widget-constructum_services_listing.view_type-3 .service-item .service-slider-item-link:after,
.elementor-widget-constructum_services_listing.view_type-5 .service-item .service-slider-item-link:after {
  background-image: linear-gradient(0deg, #166574, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0));
}

/* NT 2026-09-28: static language switcher in the header menu "Hlavné menu SK" (menu items .nt-lang-item, WPML stays off).
   SK = current (flag), EN (flag) and RU (letters only) are placeholders href="#" with class .nt-lang-placeholder,
   to be replaced by the WPML menu switcher later. Look as on stand 8083 (flag + code, dropdown). */
.nt-lang-item > a {
  white-space: nowrap;
}
.nt-lang-item .nt-lang-flag {
  display: inline-block !important;
  width: 18px !important;
  height: 12px !important;
  margin: 0 6px 0 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.nt-lang-item .nt-lang-code {
  vertical-align: middle;
}

/* NT 2026-09-28 QA round 2: language switcher opens on click/tap (js/nt-lang-switcher.js adds .nt-open), keyboard focus too.
   Same values as the theme hover rule (theme.css "li:hover > ul.sub-menu"), desktop menu only. */
.header-menu-container .main-menu > li.nt-lang-switcher.nt-open > ul.sub-menu,
.header-menu-container .main-menu > li.nt-lang-switcher:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: rotateX(0);
  -ms-transform: rotateX(0);
  transform: rotateX(0);
}
.header-menu-container .main-menu > li.nt-lang-switcher.nt-open > ul.sub-menu > li,
.header-menu-container .main-menu > li.nt-lang-switcher:focus-within > ul.sub-menu > li {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.nt-lang-switcher > a {
  cursor: pointer;
}

/* NT 2026-09-28: three buttons in the home banner (constructum_content_slider, Promo Text HTML):
   <div class="nt-hero-btns"><a class="nt-hero-btn nt-hero-btn--main">...</a><a class="nt-hero-btn">...</a>...</div>
   Size, radius, font and top offset copied from the standard slider button
   (theme.css: .constructum-content-slider-widget .owl-carousel.owl-theme .constructum-button / .constructum-content-wrapper-3). */
.nt-hero-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin: 45px 0 0;
}
/* the WYSIWYG editor may wrap links in <p> or add <br> */
.nt-hero-btns > p {
  display: contents;
}
.nt-hero-btns br {
  display: none;
}
body .nt-hero-btns a.nt-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 58px;
  padding: 13px 42px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 9999px;
  border-radius: 9999px;
  box-shadow: none;
  cursor: pointer;
  -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
body .nt-hero-btns a.nt-hero-btn:hover {
  color: #166574;
  border-color: #166574;
  background: transparent;
  text-decoration: none;
}
body .nt-hero-btns a.nt-hero-btn.nt-hero-btn--main {
  color: #1f1f1f;
  background: #166574;
  border-color: #166574;
}
body .nt-hero-btns a.nt-hero-btn.nt-hero-btn--main:hover {
  color: #1f1f1f;
  background: #0f4c57;
  border-color: #0f4c57;
}
body .nt-hero-btns a.nt-hero-btn:focus {
  outline: none;
}
body .nt-hero-btns a.nt-hero-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(22, 101, 116, 0.6);
}
@media only screen and (max-width: 767px) {
  .nt-hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body .nt-hero-btns a.nt-hero-btn {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: 10px 24px;
    white-space: normal;
  }
}

/* NT 2026-09-28: anchor #kontakt (banner button "Napíšte nám") stops below the fixed sticky header.
   html already has scroll-behavior: smooth from the theme; the admin bar offset is added by WP core. */
#kontakt {
  scroll-margin-top: 110px;
}

/* NT 2026-09-28 round 3: home banner (page 3974, slider a9d08a7, slide ebd58b8) gradient overlay.
   The slide Overlay control (add_bg_overlay / bg_overlay_color) is a solid colour only, so the gradient sits on the
   theme's own overlay layer .slider-item:before (absolute, full slide, under the text).
   From 1280px: people left, text right -> dark from the right edge, transparent before the faces.
   Up to 1279px: text at the bottom -> dark from the bottom, transparent over the faces. */
.elementor-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8:before {
  background-image: linear-gradient(to right, rgba(20, 20, 20, 0) 48%, rgba(20, 20, 20, 0.4) 55%, rgba(20, 20, 20, 0.72) 62%, rgba(20, 20, 20, 0.82) 100%);
}
@media (min-width: 1921px) {
  .elementor-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8:before {
    background-image: linear-gradient(to right, rgba(20, 20, 20, 0) 50%, rgba(20, 20, 20, 0.4) 56%, rgba(20, 20, 20, 0.72) 62%, rgba(20, 20, 20, 0.82) 100%);
  }
}
@media (max-width: 1600px) {
  .elementor-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8:before {
    background-image: linear-gradient(to right, rgba(20, 20, 20, 0) 42%, rgba(20, 20, 20, 0.4) 50%, rgba(20, 20, 20, 0.72) 58%, rgba(20, 20, 20, 0.82) 100%);
  }
}
@media (max-width: 1279px) {
  .elementor-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8:before {
    background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0) 34%, rgba(20, 20, 20, 0.72) 55%, rgba(20, 20, 20, 0.84) 100%);
  }
}
@media (max-width: 991px) {
  .elementor-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8:before {
    background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0) 36%, rgba(20, 20, 20, 0.72) 56%, rgba(20, 20, 20, 0.84) 100%);
  }
}
@media (max-width: 767px) {
  .elementor-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8:before {
    background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0) 38%, rgba(20, 20, 20, 0.72) 56%, rgba(20, 20, 20, 0.84) 100%);
  }
}
@media (max-width: 575px) {
  .elementor-3974 .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8:before {
    background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, 0.72) 56%, rgba(20, 20, 20, 0.84) 100%);
  }
}
/* laptop 1280-1600: the text column is narrower there, compact buttons keep the three in one row */
@media (min-width: 1280px) and (max-width: 1600px) {
  .nt-hero-btns {
    gap: 14px;
  }
  body .nt-hero-btns a.nt-hero-btn {
    padding: 13px 28px;
  }
}

/* NT 2026-09-28 preloader: image = Customizer > Additional settings > Page Loader > Page Loader Image
   (theme_mod page_loader_image = PK sign, attachment 10299, 512x512 PNG, shown 100x100 by the theme box).
   Theme .page-loader has no height (its inner block is absolute), so the image started at the screen middle
   and hung below it. Height = image box, the sign sits exactly in the centre. Theme pulse animation unchanged. */
.page-loader {
  height: 100px;
}

/* NT 2026-09-28: block below ported as is from stand 8083 (instalater) constructum-child/style.css */
/* NT 2026-09-26: icon image
   Widget Services Listing (Pages), grid: page field _page_icon_image replaces the Fontello icon.
   Image fills the same box as the Fontello icon (.service-icon = 1em x 1em, theme default 55px,
   follows the widget control "Icon Size"). Hover does not change the image. */
.service-listing-wrapper .service-item .service-item-icon.nt-service-icon-image .service-icon {
    line-height: 0;
}
.service-listing-wrapper .service-item .service-item-icon.nt-service-icon-image .service-icon img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* NT 2026-09-28 home services (page 3974, block 9f0446d, wrapper .nt-home-services, widget Services Listing (Pages)):
   from 768px (more than one card in a row) a card title takes the height of two lines and sits at its bottom,
   so the line under the titles (border of .service-item-link) is level in a row when one title wraps. */
@media (min-width: 768px) {
  .nt-home-services .service-grid-listing .service-item .service-post-title {
    display: flex;
    align-items: flex-end;
    min-height: 2lh;
  }
}

/* NT 2026-09-28 home steps (page 3974, widget constructum_step_carousel 087fb4a, 4 columns):
   992-1439px, where a step title can wrap, every step title takes the height of two lines,
   so the descriptions of all four steps start on one line. From 1440px all titles fit on one line. */
@media (min-width: 992px) and (max-width: 1439px) {
  .elementor-element-087fb4a .step-item .step-title {
    min-height: 2lh;
  }
}

/* NT 2026-09-28 footer contact form (HFE 5152, white card 54fbcfd, WPForms "Kontakt, pätička", form class nt-footer-form):
   fields keep the theme style (underline); the submit button is the gold pill of the main banner button (.nt-hero-btn--main).
   The theme sets background-color: transparent !important on WPForms submit buttons, hence !important here. */
body div.wpforms-container.wpforms-container-full.nt-footer-form .wpforms-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 58px;
  padding: 13px 42px;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: #1f1f1f;
  background-color: #166574 !important;
  background-image: none;
  border: 1px solid #166574;
  -webkit-border-radius: 9999px;
  border-radius: 9999px;
  -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
body div.wpforms-container.wpforms-container-full.nt-footer-form .wpforms-form button[type="submit"]:hover {
  color: #1f1f1f;
  background-color: #0f4c57 !important;
  border: 1px solid #0f4c57;
}
body div.wpforms-container.wpforms-container-full.nt-footer-form .wpforms-form button[type="submit"]:focus-visible {
  outline: 2px solid #1f1f1f;
  outline-offset: 3px;
}
body div.wpforms-container.wpforms-container-full.nt-footer-form .wpforms-form button[type="submit"]:after,
body div.wpforms-container.wpforms-container-full.nt-footer-form .wpforms-form button[type="submit"] svg {
  display: none;
}
/* consent checkbox: bigger box for a finger, the label stays clickable */
body div.wpforms-container.wpforms-container-full.nt-footer-form .wpforms-form .wpforms-field-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
@media only screen and (max-width: 767px) {
  body div.wpforms-container.wpforms-container-full.nt-footer-form .wpforms-form button[type="submit"] {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: 10px 24px;
  }
}

/* NT 2026-09-28 home round 9: "4,6 z 5 na Google" (a183734), "sme tu 24/7" (16c28da, footer 79bc068) switched from h2 to div.
   The div keeps the look of the kit H2 (.elementor-kit-4 h2: DM Sans 500, line-height 1em, letter-spacing -0.05em);
   the widget's own settings (size, colour, DM Mono of 16c28da) stay stronger. Rollback: remove this block. */
.elementor-element-a183734 .constructum-heading,
.elementor-element-16c28da .constructum-heading,
.elementor-element-79bc068 .constructum-heading {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.05em;
}

/* NT 2026-09-28 home round 9: banner on phones (<= 575 px, 390x844): shorter gaps inside the text stack, so H1, description
   and "Volajte 24/7" fit the first screen together with slider_height_mobile 920 (a9d08a7). Desktop unchanged. Rollback: remove. */
@media only screen and (max-width: 575px) {
  .elementor-element-a9d08a7 .content-slider-item-text {
    padding-top: 22px;
  }
  .elementor-element-a9d08a7 .nt-hero-btns {
    margin-top: 26px;
  }
}

/* NT 2026-09-28 404 buttons: child 404.php shows "Spat na uvod" and "Volajte 24/7" (tel:) side by side.
   Both links keep the stock class and colour (gold #166574 from the theme, hover untouched);
   the row wraps one under another when it does not fit. Rollback: remove this block. */
.error-404-container .error-404-inner .error-404-button.nt-404-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
}
