/*
Theme Name:     Hostadum v3
Theme URI:      n/a
Template:       kadence
Author:         Pro Author
Author URI:     https://www.hostadum.fi/
Description:    Hostadum lapsiteema, pohjalla Kadence
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

.jakaja-kuva {
  margin-top: -4em;
  z-index: 9999999;
}

.jakajan-tausta {
  margin-top: 3em;
  z-index: 100;
}

@media (max-width: 767px) {
  .heroon.wp-block-kadence-iconlist ul.kt-svg-icon-list li.kt-svg-icon-list-item-wrap:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc) {
    display: flex;
    flex-direction: column;
  }
}

/* =========================================================
   UP-QUALITY - Hostadum v3 / KadenceWP
   ========================================================= */

:root {
  --upq-bg: #0f1724;
  --upq-bg-dark: #070b12;
  --upq-text: #f5f5f5;
  --upq-muted: #b8beca;
  --upq-accent: #c8783a;
  --upq-accent-hover: #a95f2b;
  --upq-border: rgba(255, 255, 255, 0.14);
  --upq-heading-font: "Copperplate Gothic Light", Copperplate, "Copperplate Gothic", serif;
}

/* =========================================================
   HERO
   ========================================================= */

.wp-block-kadence-rowlayout.upq-hero {
  position: relative;
  min-height: 690px;
  padding: 95px 6vw 115px;
  overflow: hidden;
  color: #ffffff;
  background-size: cover;
  background-position: center center;
}

.upq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 14, 28, 0.88) 0%,
    rgba(8, 14, 28, 0.70) 45%,
    rgba(8, 14, 28, 0.84) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.upq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46vw;
  height: 44%;
  background: var(--upq-accent);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  z-index: 2;
  pointer-events: none;
}

.upq-hero .kt-row-column-wrap {
  position: relative;
  z-index: 3;
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
}

.upq-hero-left > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 700px;
  min-height: 280px;
  padding: 64px 72px 58px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.upq-hero-left h1 {
  margin: 0 0 34px;
  color: #ffffff;
  font-family: var(--upq-heading-font);
  font-size: clamp(36px, 3.25vw, 52px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.upq-hero-right > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
  padding-left: 40px;
}

.upq-hero-heading {
  margin: 0 0 100px;
  color: #ffffff;
  font-family: var(--upq-heading-font);
  font-size: clamp(32px, 2.65vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.upq-hero-text {
  max-width: 620px;
  margin: 0;
  color: #ffffff;
  font-family: var(--upq-heading-font);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.upq-hero .wp-block-button.upq-btn > .wp-block-button__link,
.upq-section .wp-block-button.upq-btn > .wp-block-button__link,
.upq-hero .kb-button,
.upq-section .kb-button {
  padding: 16px 32px;
  color: #ffffff;
  background: var(--upq-accent);
  border: 1px solid var(--upq-accent);
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--upq-heading-font);
  font-weight: 300;
  letter-spacing: 0.045em;
  text-transform: none;
}

.upq-hero .wp-block-button.upq-btn > .wp-block-button__link:hover,
.upq-section .wp-block-button.upq-btn > .wp-block-button__link:hover,
.upq-hero .kb-button:hover,
.upq-section .kb-button:hover {
  color: #ffffff;
  background: var(--upq-accent-hover);
  border-color: var(--upq-accent-hover);
}

/* =========================================================
   SECTIONS
   ========================================================= */

.upq-section {
  padding: 80px 6vw;
  color: var(--upq-text);
  background: var(--upq-bg);
}

.upq-section .kt-row-column-wrap {
  max-width: 1220px;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
}

.upq-section h2 {
  margin: 0 0 28px;
  color: #ffffff;
  font-family: var(--upq-heading-font);
  font-size: clamp(34px, 3vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.upq-section h3 {
  color: #ffffff;
  font-family: var(--upq-heading-font);
}

.upq-section p {
  color: var(--upq-muted);
  line-height: 1.75;
}

/* =========================================================
   HUOLLOT JA KORJAUKSET
   ========================================================= */

.upq-service {
  padding-top: 95px;
  padding-bottom: 55px;
}

.upq-service-left > .kt-inside-inner-col {
  padding-right: 40px;
}

.upq-service-image img,
.upq-company-image img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border: 1px solid var(--upq-border);
  border-radius: 10px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

/* =========================================================
   INTRO
   ========================================================= */

.upq-intro {
  padding-top: 25px;
  padding-bottom: 35px;
}

.upq-wide-text {
  max-width: 1000px;
  margin-bottom: 18px;
  color: var(--upq-muted);
  font-size: 20px;
  line-height: 1.8;
}

/* =========================================================
   CARDS
   ========================================================= */

.upq-card-row {
  padding-top: 30px;
  padding-bottom: 90px;
}

.upq-card > .kt-inside-inner-col {
  min-height: 220px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--upq-border);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.upq-card h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.upq-card p {
  margin: 0;
  color: var(--upq-muted);
}

/* =========================================================
   TEKNINEN TYÖAPU
   ========================================================= */

.upq-company {
  padding-top: 95px;
  padding-bottom: 85px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.upq-company-title h2 {
  font-size: clamp(34px, 3vw, 52px);
}

.upq-company-text p {
  color: var(--upq-muted);
  font-size: 20px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

/* =========================================================
   ALOJA-LAATIKKO
   ========================================================= */

.upq-industries {
  padding-top: 0;
  padding-bottom: 90px;
}

.upq-industry-box > .kt-inside-inner-col {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  padding: 34px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--upq-border);
  border-left: 4px solid var(--upq-accent);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.upq-industry-box h3 {
  margin-top: 0;
  margin-bottom: 22px;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.upq-industry-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.upq-industry-box li {
  position: relative;
  padding: 10px 0 10px 22px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.upq-industry-box li:last-child {
  border-bottom: 0;
}

.upq-industry-box li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--upq-accent);
  border-radius: 50%;
}

/* =========================================================
   CTA
   ========================================================= */

.upq-cta {
  background: var(--upq-bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.upq-contact-box > .kt-inside-inner-col {
  padding: 34px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--upq-border);
  border-radius: 16px;
}

.upq-contact-box p {
  color: var(--upq-muted);
  font-size: 19px;
}

/* =========================================================
   SIMPLE FOOTER ONLY
   ========================================================= */

.site-footer {
  background: #070b12;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer p,
.site-footer a {
  color: #b8beca;
}

.site-footer a:hover {
  color: var(--upq-accent);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .upq-hero,
  .upq-section {
    padding-right: 24px;
    padding-left: 24px;
  }

  .upq-hero {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 90px;
  }

  .upq-hero::after {
    width: 78vw;
    height: 22%;
  }

  .upq-hero-left > .kt-inside-inner-col {
    min-height: auto;
    padding: 42px 28px;
  }

  .upq-hero-left h1 {
    font-size: clamp(30px, 9vw, 40px);
    white-space: nowrap;
  }

  .upq-hero-right > .kt-inside-inner-col {
    min-height: auto;
    padding-top: 40px;
    padding-left: 0;
  }

  .upq-hero-heading {
    margin: 0 0 28px;
    font-size: 29px;
  }

  .upq-hero-text {
    font-size: 18px;
  }

  .upq-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .upq-section h2,
  .upq-company-title h2 {
    font-size: 31px;
  }

  .upq-wide-text,
  .upq-company-text p {
    font-size: 17px;
  }

  .upq-service-left > .kt-inside-inner-col {
    padding-right: 0;
  }

  .upq-card > .kt-inside-inner-col,
  .upq-industry-box > .kt-inside-inner-col,
  .upq-contact-box > .kt-inside-inner-col {
    padding: 24px;
  }
}

/* =========================================================
   UP-QUALITY - Yhteystiedot / KadenceWP
   ========================================================= */

.wp-block-kadence-rowlayout.upq-contact-hero {
  position: relative;
  min-height: 360px;
  padding: 8vw 6vw 70px;
  overflow: hidden;
  color: #ffffff;
  background-size: cover;
  background-position: center center;
}

.upq-contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 15, 23, 0.50) 0%,
    rgba(11, 15, 23, 0.75) 50%,
    rgba(7, 11, 18, 1) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.upq-contact-hero .kt-row-column-wrap {
  position: relative;
  z-index: 2;
  max-width: 1220px;
  margin-right: auto;
  margin-left: auto;
}

.upq-contact-hero h1 {
  margin: 0;
  color: #ffffff;
  font-family: var(--upq-heading-font);
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.upq-contact-section {
  padding: 48px 6vw;
  color: #ffffff;
  background: #070b12;
}

.upq-contact-section .kt-row-column-wrap {
  max-width: 1220px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  align-items: stretch;
  background: #070b12;
  border-radius: 5px;
}

.upq-contact-image-col > .kt-inside-inner-col,
.upq-contact-form-col > .kt-inside-inner-col {
  height: 100%;
}

.upq-contact-image {
  height: 100%;
  margin: 0;
}

.upq-contact-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.upq-contact-form-col > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
}

.upq-contact-form-col h2 {
  margin: 0 0 18px;
  color: #ffffff;
  font-family: var(--upq-heading-font);
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.upq-contact-form-col p {
  margin-bottom: 28px;
  color: #b8beca;
  line-height: 1.7;
}

/* Gravity Forms dark style */

.upq-contact-form-col .gform_wrapper,
.upq-contact-form-col .gform_wrapper form {
  color: #ffffff;
}

.upq-contact-form-col .gform_wrapper label,
.upq-contact-form-col .gform_wrapper legend {
  color: rgba(255, 255, 255, 0.70);
  font-weight: 500;
}

.upq-contact-form-col .gform_wrapper input[type="text"],
.upq-contact-form-col .gform_wrapper input[type="email"],
.upq-contact-form-col .gform_wrapper input[type="tel"],
.upq-contact-form-col .gform_wrapper textarea,
.upq-contact-form-col .gform_wrapper select {
  padding: 14px 16px;
  color: #ffffff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
}

.upq-contact-form-col .gform_wrapper input::placeholder,
.upq-contact-form-col .gform_wrapper textarea::placeholder {
  color: rgba(255, 255, 255, 0.50);
}

.upq-contact-form-col .gform_wrapper input:focus,
.upq-contact-form-col .gform_wrapper textarea:focus,
.upq-contact-form-col .gform_wrapper select:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.30);
  outline: none;
}

.upq-contact-form-col .gform_wrapper .gform_footer input[type="submit"],
.upq-contact-form-col .gform_wrapper .gform_footer button,
.upq-contact-form-col .gform_wrapper .gform_button {
  margin-top: 18px;
  padding: 14px 32px;
  color: #ffffff;
  background: var(--upq-accent);
  border: 0;
  border-radius: 0;
  font-family: var(--upq-heading-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.upq-contact-form-col .gform_wrapper .gform_footer input[type="submit"]:hover,
.upq-contact-form-col .gform_wrapper .gform_footer button:hover,
.upq-contact-form-col .gform_wrapper .gform_button:hover {
  color: #ffffff;
  background: var(--upq-accent-hover);
}

/* UP-QUALITY / dark form error styling */

.upq-contact-form-col .gform_wrapper .gform_validation_errors {
  padding: 18px 20px;
  background: rgba(255, 107, 87, 0.08);
  border: 1px solid rgba(255, 107, 87, 0.45);
  border-radius: 10px;
  box-shadow: none;
}

.upq-contact-form-col .gform_wrapper .gform_validation_errors h2,
.upq-contact-form-col .gform_wrapper .validation_message,
.upq-contact-form-col .gform_wrapper .gfield_validation_message,
.upq-contact-form-col .gform_wrapper .gfield_required,
.upq-contact-form-col .gform_wrapper .gform-field-label .gfield_required {
  color: #ff6b57;
}

.upq-contact-form-col .gform_wrapper .gfield_validation_message,
.upq-contact-form-col .gform_wrapper .validation_message {
  font-weight: 500;
}

.upq-contact-form-col .gform_wrapper .gfield_error input,
.upq-contact-form-col .gform_wrapper .gfield_error textarea,
.upq-contact-form-col .gform_wrapper .gfield_error select {
  border-color: #ff6b57;
  box-shadow: 0 0 0 1px rgba(255, 107, 87, 0.25);
}

.upq-contact-form-col .gform_wrapper .gfield_label,
.upq-contact-form-col .gform_wrapper .gform-field-label {
  color: #d9dde5;
}

.upq-contact-form-col .gform_wrapper .gfield_required {
  color: #ff8a78;
}

@media (max-width: 767px) {
  .upq-contact-hero {
    min-height: 260px;
    padding: 80px 24px 48px;
  }

  .upq-contact-hero h1 {
    font-size: 34px;
  }

  .upq-contact-section {
    padding: 36px 24px;
  }

  .upq-contact-image img {
    min-height: 260px;
  }

  .upq-contact-form-col > .kt-inside-inner-col {
    padding: 40px 22px;
  }

  .upq-contact-form-col h2 {
    font-size: 30px;
  }

  .upq-contact-form-col .gform_wrapper input[type="text"],
  .upq-contact-form-col .gform_wrapper input[type="email"],
  .upq-contact-form-col .gform_wrapper input[type="tel"],
  .upq-contact-form-col .gform_wrapper textarea,
  .upq-contact-form-col .gform_wrapper select {
    font-size: 14px;
  }
}