/* ==================================================
   DESKTOP PAGE SPACING
   ================================================== */

@media screen and (min-width: 800px) {
    #page.site {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}


/* ==================================================
   MOBILE PAGE AND MENU
   ================================================== */

@media screen and (max-width: 799px) {
    #page.site {
        width: calc(100% - 40px) !important;
        margin: 20px auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Hide the mobile menu button */
    .menu-toggle {
        display: none !important;
    }

    /* Keep the menu permanently visible */
    #site-navigation .menu-main-container {
        display: block !important;
    }

    /* Two-column mobile menu */
    #site-navigation ul.menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        visibility: visible !important;
        opacity: 1 !important;
        margin: 10px 0;
        padding: 0;
    }

    /* Individual menu options */
    #site-navigation ul.menu li {
        display: block !important;
        float: none !important;
        position: relative;
        width: auto !important;
        margin: 0 !important;
        text-align: center;
    }

    /* Centre the final option */
    #site-navigation ul.menu li:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50% !important;
    }

    /* Compact menu links */
    #site-navigation ul.menu li a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 1.15;
        border: none !important;
    }

    /* Dividers with softly fading ends */
    #site-navigation ul.menu li:nth-child(odd):not(:last-child)::after {
        content: "";
        position: absolute;
        top: 5px;
        right: 0;
        bottom: 5px;
        width: 1px;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(100, 88, 97, 0.25) 35%,
            rgba(100, 88, 97, 0.25) 65%,
            transparent 100%
        );
    }
}


/* ==================================================
   CAPTION AND INSTAGRAM FEED:
   PHONES AND TABLETS
   ================================================== */

@media screen and (max-width: 1024px) {

    /* Keep the caption directly above the feed */
    .elementor-element-afb9def {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Full-width, left-aligned caption */
    .elementor-element-afb9def > .e-paragraph-base,
    .elementor-element-afb9def > .e-a251da7-790e1c7 {
        display: block !important;
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        text-align: left !important;
        box-sizing: border-box;
    }

    /* Full-width Instagram widget */
    .elementor-element-afb9def > .elementor-element-059bae9 {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Remove internal Instagram width and padding restrictions */
    .elementor-element-059bae9 .elementor-widget-container,
    .elementor-element-059bae9 #sb_instagram,
    .elementor-element-059bae9 #sbi_images {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Shared Instagram grid styling */
    .elementor-element-059bae9 #sbi_images {
        display: grid !important;
        gap: 4px !important;
    }

    .elementor-element-059bae9 #sbi_images .sbi_item {
        display: block !important;
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
}


/* ==================================================
   TABLET: FOUR PHOTOS PER ROW
   ================================================== */

@media screen and (min-width: 600px) and (max-width: 1024px) {
    .elementor-element-059bae9 #sbi_images {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}


/* ==================================================
   PHONE: THREE PHOTOS PER ROW
   ================================================== */

@media screen and (max-width: 599px) {
    .elementor-element-059bae9 #sbi_images {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Fix Hinnasto ja laskutus layout on tablets and phones */
@media screen and (max-width: 1024px) {
    .elementor-13 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 10px;
    }

    /* Allow the headings and texts to share one grid */
    .elementor-element-457ce8e,
    .elementor-element-457ce8e > .e-con-inner,
    .elementor-element-93bb3ef {
        display: contents !important;
    }

    /* Hinnasto heading */
    .elementor-element-457ce8e h2:nth-child(1) {
        order: 1;
    }

    /* Hinnasto prices */
    .elementor-element-93bb3ef > p:nth-child(1) {
        order: 2;
    }

    /* Laskutus heading */
    .elementor-element-457ce8e h2:nth-child(2) {
        order: 3;
        margin-top: 15px;
    }

    /* Laskutus information */
    .elementor-element-93bb3ef > p:nth-child(2) {
        order: 4;
    }

    /* Image underneath */
    .elementor-element-0f6552d {
        order: 5;
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-13 h2,
    .elementor-13 p {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }
}
/* Keep headings and their text aligned consistently */
.elementor-element-457ce8e h2,
.elementor-element-93bb3ef > p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
}
/* Align the desktop price and billing columns with their headings */
@media screen and (min-width: 1025px) {
    .elementor-element-93bb3ef {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* GLOBAL HEADING SIZES ON TABLETS */
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .elementor h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .elementor h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .elementor h3 {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    .elementor h4 {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }
}


/* GLOBAL HEADING SIZES ON PHONES */
@media screen and (max-width: 599px) {
    .elementor h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .elementor h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .elementor h3 {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }

    .elementor h4 {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }
}

/* Ota yhteyttä: teksti ja lomake allekkain tabletilla ja puhelimella */
@media (max-width: 1024px) {
  .elementor-page-53 .e-ad813b6-4f72baf {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Ota yhteyttä: align left text with the first form label */
@media (min-width: 1025px) {
  .elementor-page-53 .e-dc523a7-aaf0fc9 {
    padding-top: 30px !important;
  }
}
/* Contact page: remove the large gap on tablet and mobile */
@media (max-width: 1024px) {
  .elementor-page-53 .e-ad813b6-4f72baf {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }

  .elementor-page-53 .elementor-element-f97af1d {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin-top: 0 !important;
  }
}

/* Contact form send button */
.elementor-page-53 .wpcf7 input[type="submit"] {
  background-color: #49373C!important;
  color: #ffffff !important;
  border-color: #49373C !important;
}

/* Button when hovering */
.elementor-page-53 .wpcf7 input[type="submit"]:hover {
  background-color: #49373C!important;
  border-color: #ffffff!important;
}

.elementor-page-53 .wpcf7 input[type="submit"] {
  background: #634949 !important;
  border: 1px solid #634949 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  outline: none !important;
}

/* Contact form Send button */
.elementor-page-53 .wpcf7 input[type="submit"] {
  background: #49373C !important;
  border-color: #49373C !important;
  box-shadow: 0 4px 0 #634949 !important;
  color: #ffffff !important;
}

/* Hover */
.elementor-page-53 .wpcf7 input[type="submit"]:hover {
  background: #49373C !important;
  border-color: #49373C !important;
  box-shadow: 0 2px 0 #634949 !important;
  color: #ffffff !important;
}

/* Contact form text: same font as the Send button */
.elementor-page-53 .wpcf7 label,
.elementor-page-53 .wpcf7 input,
.elementor-page-53 .wpcf7 textarea,
.elementor-page-53 .wpcf7 select {
  font-family: "EB Garamond", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Tuntikäytännöt: subtitle colours */
.page-id-51 .e-cf403e1-c76f473 strong {
  color: #634949 !important;
}

/* Lähetä button hover colour */
.elementor-page-53 .wpcf7 input[type="submit"]:hover {
  background-color: #634949 !important;
  border-color: #634949 !important;
  box-shadow: 0 2px 0 #49373C !important;
  color: #ffffff !important;
}

/* Navigation menu hover */
.main-navigation a {
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
  color: #634949 !important;
  cursor: pointer;
}

/* Menu zoom effect */
.main-navigation a {
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
  transform: scale(1.08);
  color: #634949 !important;
}

/* Make the desktop menu wider */
@media (min-width: 1025px) {
  .main-navigation li {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}