/*
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
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* =========================================================
   Existing Hostadum styles
   ========================================================= */

.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;
  }
}

/* =========================================================
   Miika Boren - Design tokens
   ========================================================= */

:root {
  --mb-bg: #F7F4EE;
  --mb-surface: #FFFFFF;
  --mb-primary: #1E4E5F;
  --mb-primary-dark: #163946;
  --mb-accent: #D88A1D;
  --mb-text: #1F2933;
  --mb-muted: #5F6B73;
  --mb-border: #DDD6CC;
}

/* =========================================================
   Global typography
   ========================================================= */

body {
  font-family: "Source Sans 3", Arial, sans-serif;
  color: var(--mb-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.wp-block-button__link,
.kb-button {
  font-family: "Montserrat", Arial, sans-serif;
}

/* =========================================================
   Miika Boren - Hero
   ========================================================= */

.mb-hero {
  background: linear-gradient(
    90deg,
    var(--mb-bg) 0%,
    var(--mb-bg) 58%,
    #ffffff 58%,
    #ffffff 100%
  );
  border-bottom: 1px solid var(--mb-border);
}

.mb-hero .kt-inside-inner-col {
  position: relative;
}

.mb-hero .mb-hero-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  color: var(--mb-primary);
  letter-spacing: -0.045em;
  font-size: clamp(3.8rem, 7vw, 5.8rem);
  line-height: 1;
  margin-bottom: 1rem;
}

.mb-hero .mb-hero-kicker {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  color: var(--mb-primary);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.35;
  margin-bottom: 1.25rem;
}

.mb-hero .mb-hero-text {
  font-family: "Source Sans 3", Arial, sans-serif;
  color: var(--mb-text);
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 1.75rem;
}

.mb-hero .mb-hero-note {
  font-family: "Source Sans 3", Arial, sans-serif;
  color: var(--mb-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1.25rem;
}

.mb-hero .mb-hero-image img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(31, 41, 51, 0.18);
  object-fit: cover;
  object-position: center top;
}

/* =========================================================
   Miika Boren - Hero buttons
   ========================================================= */

.mb-hero .kb-buttons-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mb-hero .kb-button,
.mb-hero .wp-block-button__link {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  border-radius: 999px;
  transition: all 0.2s ease;
  text-decoration: none;
  padding: 14px 24px;
  line-height: 1.2;
}

.mb-hero .mb-hero-primary.kb-button,
.mb-hero .mb-hero-primary .kb-button,
.mb-hero .mb-hero-primary.wp-block-button__link,
.mb-hero .mb-hero-primary .wp-block-button__link {
  background: var(--mb-primary);
  color: #ffffff;
  border: 2px solid var(--mb-primary);
}

.mb-hero .mb-hero-primary.kb-button:hover,
.mb-hero .mb-hero-primary .kb-button:hover,
.mb-hero .mb-hero-primary.wp-block-button__link:hover,
.mb-hero .mb-hero-primary .wp-block-button__link:hover {
  background: var(--mb-accent);
  border-color: var(--mb-accent);
  color: var(--mb-text);
}

.mb-hero .mb-hero-secondary.kb-button,
.mb-hero .mb-hero-secondary .kb-button,
.mb-hero .mb-hero-secondary.wp-block-button__link,
.mb-hero .mb-hero-secondary .wp-block-button__link {
  background: transparent;
  color: var(--mb-primary);
  border: 2px solid var(--mb-primary);
}

.mb-hero .mb-hero-secondary.kb-button:hover,
.mb-hero .mb-hero-secondary .kb-button:hover,
.mb-hero .mb-hero-secondary.wp-block-button__link:hover,
.mb-hero .mb-hero-secondary .wp-block-button__link:hover {
  background: var(--mb-primary);
  color: #ffffff;
}

/* =========================================================
   Miika Boren - Cards section
   ========================================================= */

.mb-cards-section {
  background: var(--mb-bg);
}

.mb-card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(31, 41, 51, 0.09);
}

.mb-card .kt-inside-inner-col {
  padding: 34px 30px 30px;
}

.mb-card h2,
.mb-card h3 {
  color: var(--mb-primary);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
  margin-bottom: 16px;
}

.mb-card h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  border-radius: 99px;
  background: var(--mb-accent);
}

.mb-card p {
  color: var(--mb-text);
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
}

.mb-card .mb-card-link {
  margin-top: 20px;
  margin-bottom: 0;
}

.mb-card a {
  color: var(--mb-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mb-card a:hover {
  color: var(--mb-accent);
}

/* =========================================================
   Header / navigation
   ========================================================= */

/*
   Navin värit ja headerin tausta asetetaan Kadencesta:
   Ulkoasu → Mukauta → Header

   CSS ei pakota navin värejä.
   Tämä estää Customizerin ja CSS:n tappelemisen keskenään.
*/

/* =========================================================
   Miika Boren - About row
   ========================================================= */

.mb-about-section {
  background: #ffffff;
}

.mb-eyebrow {
  color: var(--mb-accent);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.mb-section-title {
  color: var(--mb-primary);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 1.2rem;
}

.mb-section-text {
  color: var(--mb-text);
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 760px;
}

/* =========================================================
   Miika Boren - Service CTA row
   ========================================================= */

.mb-service-cta {
  background: var(--mb-primary);
}

.mb-cta-title {
  color: #ffffff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 1rem;
}

.mb-cta-text {
  color: rgba(255, 255, 255, 0.88);
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1.65;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.mb-cta-buttons {
  margin-top: 1.75rem;
}

.mb-cta-button .wp-block-button__link {
  background: var(--mb-accent);
  color: var(--mb-text);
  border: 2px solid var(--mb-accent);
  border-radius: 999px;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  padding: 14px 24px;
  text-decoration: none;
}

.mb-cta-button .wp-block-button__link:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--mb-primary);
}

/* =========================================================
   Miika Boren - Contact row
   ========================================================= */

.mb-contact-section {
  background: var(--mb-bg);
}

.mb-contact-box,
.mb-form-box {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(31, 41, 51, 0.08);
}

.mb-contact-box .kt-inside-inner-col,
.mb-form-box .kt-inside-inner-col {
  padding: 34px 30px;
}

.mb-contact-detail {
  color: var(--mb-text);
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.65;
  margin-top: 1.5rem;
}

.mb-contact-detail a {
  color: var(--mb-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mb-contact-detail a:hover {
  color: var(--mb-accent);
}

.mb-form-title {
  color: var(--mb-primary);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

/* =========================================================
   Gravity Forms - Miika Boren style
   ========================================================= */

.mb-form-box .gform_wrapper {
  font-family: "Source Sans 3", Arial, sans-serif;
  color: var(--mb-text);
}

.mb-form-box .gform_fields {
  row-gap: 18px;
}

.mb-form-box .gfield_label {
  color: var(--mb-primary);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 6px;
}

.mb-form-box input,
.mb-form-box textarea,
.mb-form-box select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  background: #ffffff;
  color: var(--mb-text);
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1rem;
}

.mb-form-box textarea {
  min-height: 140px;
}

.mb-form-box input:focus,
.mb-form-box textarea:focus,
.mb-form-box select:focus {
  outline: 2px solid var(--mb-accent);
  outline-offset: 2px;
  border-color: var(--mb-accent);
}

.mb-form-box .gform_required_legend,
.mb-form-box .gfield_description,
.mb-form-box .gform_validation_errors,
.mb-form-box .validation_message {
  font-family: "Source Sans 3", Arial, sans-serif;
}

.mb-form-box .gfield_required,
.mb-form-box .validation_message {
  color: var(--mb-accent);
}

.mb-form-box .gform_footer {
  margin-top: 22px;
  padding-bottom: 0;
}

.mb-form-box .gform_button,
.mb-form-box input[type="submit"],
.mb-form-box button[type="submit"] {
  background: var(--mb-primary);
  color: #ffffff;
  border: 2px solid var(--mb-primary);
  border-radius: 999px;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  padding: 14px 24px;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mb-form-box .gform_button:hover,
.mb-form-box input[type="submit"]:hover,
.mb-form-box button[type="submit"]:hover {
  background: var(--mb-accent);
  border-color: var(--mb-accent);
  color: var(--mb-text);
}

/* Gravity Forms submit button - fallback */

.mb-form-box .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.mb-form-box .gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.mb-form-box .gform_wrapper.gravity-theme .gform_button,
.mb-form-box form input[type="submit"] {
  background-color: var(--mb-primary);
  color: #ffffff;
  border: 2px solid var(--mb-primary);
  border-radius: 999px;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 14px 26px;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mb-form-box .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.mb-form-box .gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:hover,
.mb-form-box .gform_wrapper.gravity-theme .gform_button:hover,
.mb-form-box form input[type="submit"]:hover {
  background-color: var(--mb-accent);
  border-color: var(--mb-accent);
  color: var(--mb-text);
}

.mb-form-box .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus,
.mb-form-box .gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:focus,
.mb-form-box .gform_wrapper.gravity-theme .gform_button:focus,
.mb-form-box form input[type="submit"]:focus {
  outline: 2px solid var(--mb-accent);
  outline-offset: 3px;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
  .mb-hero {
    background: var(--mb-bg);
  }

  .mb-hero .mb-hero-title {
    font-size: 3rem;
    line-height: 1.05;
  }

  .mb-hero .mb-hero-kicker {
    font-size: 1.2rem;
  }

  .mb-hero .mb-hero-text {
    font-size: 1.08rem;
  }

  .mb-hero .mb-hero-image img {
    border-radius: 18px;
  }

  .mb-card .kt-inside-inner-col,
  .mb-contact-box .kt-inside-inner-col,
  .mb-form-box .kt-inside-inner-col {
    padding: 28px 24px;
  }

  .mb-section-title,
  .mb-cta-title {
    font-size: 2rem;
  }
}