/*
Theme Name: studiomarii
Theme URI: 
Author: Chris
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studiomarii
Tags: 
*/

/* --------------------------------------------------------------------------
   Responsive breakpoints (mobile-first, min-width)
   640px  — small tablets / large phones
   768px  — tablets
   1024px — small laptops / landscape tablets
   1280px — desktops
   1536px — wide / large desktops
   -------------------------------------------------------------------------- */

/* No grey/blue flash on tap (WebKit); keyboard users still get :focus-visible from components */
html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    a {
        transition: none;
    }

    a:hover {
        transform: none;
    }
}

:focus:not(:focus-visible) {
    outline: none;
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: transform 0.25s ease;
}

a:hover {
    transform: scale(1.03);
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #fff;
    box-shadow: none;
    transition:
        transform 0.3s ease,
        background-color 0.28s ease,
        color 0.28s ease,
        box-shadow 0.28s ease;
}

/*
 * Bar nav (desktop inline + closed mobile): hero = white, solid = black.
 * Same <ul> may live inside #modal-1; black nav only when #modal-1.has-modal-open.
 */
header:not(.header--solid) .wp-block-navigation .wp-block-navigation-item__content,
header:not(.header--solid) .wp-block-navigation .wp-block-navigation-item__label,
header:not(.header--solid) .wp-block-navigation a,
header:not(.header--solid) .wp-block-navigation ul.has-text-color .wp-block-navigation-item__content,
header:not(.header--solid) .wp-block-navigation ul.has-text-color .wp-block-navigation-item__label,
header:not(.header--solid) .wp-block-navigation ul.has-text-color a,
header:not(.header--solid) .wp-block-navigation ul.has-custom-white-color .wp-block-navigation-item__content,
header:not(.header--solid) .wp-block-navigation ul.has-custom-white-color .wp-block-navigation-item__label,
header:not(.header--solid) .wp-block-navigation ul.has-custom-white-color a {
    color: #fff !important;
}

header.header--solid .wp-block-navigation .wp-block-navigation-item__content,
header.header--solid .wp-block-navigation .wp-block-navigation-item__label,
header.header--solid .wp-block-navigation a,
header.header--solid .wp-block-navigation ul.has-text-color .wp-block-navigation-item__content,
header.header--solid .wp-block-navigation ul.has-text-color a,
header.header--solid .wp-block-navigation ul.has-custom-white-color .wp-block-navigation-item__content,
header.header--solid .wp-block-navigation ul.has-custom-white-color a {
    color: #000 !important;
}

header .wp-block-site-logo img,
header .custom-logo-link img,
header img.custom-logo {
    transition: filter 0.28s ease;
}

/* While sliding off-screen, keep hero look so solid theme never flashes on hide. */
header.is-header-hidden {
    transform: translateY(-100%) !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}

header.is-header-hidden .wp-block-navigation .wp-block-navigation-item__content,
header.is-header-hidden .wp-block-navigation .wp-block-navigation-item__label,
header.is-header-hidden .wp-block-navigation a {
    color: #fff !important;
}

header.is-header-hidden .wp-block-site-logo img,
header.is-header-hidden .custom-logo-link img,
header.is-header-hidden img.custom-logo {
    filter: none !important;
}

header.is-header-hidden .wp-block-navigation__responsive-container-open svg,
header.is-header-hidden .wp-block-navigation__responsive-container-close svg {
    fill: #fff;
}

/* Scrolled away from top: white bar, dark nav + logo (when bar is visible). */
header.header--solid {
    background-color: #fff;
    color: #000;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

header.header--solid .wp-block-site-logo img,
header.header--solid .custom-logo-link img,
header.header--solid img.custom-logo {
    filter: brightness(0);
}

header.header--solid .wp-block-navigation__responsive-container-open svg,
header.header--solid .wp-block-navigation__responsive-container-close svg {
    fill: #000;
}

/* Fullscreen nav open: #modal-1 gets .has-modal-open (WP) — force black links + close. */
#modal-1.has-modal-open .wp-block-navigation-item__content,
#modal-1.has-modal-open .wp-block-navigation-item__label,
#modal-1.has-modal-open a,
#modal-1.has-modal-open ul.has-text-color .wp-block-navigation-item__content,
#modal-1.has-modal-open ul.has-text-color .wp-block-navigation-item__label,
#modal-1.has-modal-open ul.has-text-color a,
#modal-1.has-modal-open ul.has-custom-white-color .wp-block-navigation-item__content,
#modal-1.has-modal-open ul.has-custom-white-color .wp-block-navigation-item__label,
#modal-1.has-modal-open ul.has-custom-white-color a,
#modal-1.has-modal-open #modal-1-content .wp-block-navigation-item__content,
#modal-1.has-modal-open #modal-1-content a {
    color: #000 !important;
}

#modal-1.has-modal-open .wp-block-navigation__responsive-container-close svg {
    fill: #000;
}

#modal-1 {
    padding-inline: 24px;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    header {
        transition: none;
    }

    header .wp-block-site-logo img,
    header .custom-logo-link img,
    header img.custom-logo {
        transition: none;
    }
}

footer {
    display: flex;
    justify-content: center;
}

.footer {
    display: flex;
    width: 100%;
    max-width: 1280px;
    align-items: baseline;
    justify-content: space-between;
}

.container {
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding-inline: 24px;
}

@media (max-width: 767px) {
    .faq_answer_container {
        display: none !important;
    }

    .mapouter {
        display: none !important;
    }

    h2 {
        font-size: 48px !important;
    }

    .footer {
        flex-direction: column;
        padding: 0 20px;
    }

    .footer h2 {
        font-size: 32px !important;
    }

    .hero .content p {
        font-size: 16px !important;
    }

    .aboutus {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
        box-shadow: 1px 1px 5px #c8c8c8;
    }

    .aboutus > * {
        min-width: 0 !important;
    }

    .aboutus h2 {
        text-align: left !important;
    }

    .aboutus-link {
        position: relative !important;
        align-self: end !important;
        justify-self: end !important;
    }

    .text-media,
    .media-text {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
    }

    .text-media > *,
    .media-text > * {
        min-width: 0 !important;
    }

    .media-text > *:nth-child(1) {
        order: 2 !important;
    }

    .media-text > *:nth-child(2) {
        order: 1 !important;
    }

    .text-media .wp-block-cover,
    .media-text .wp-block-cover {
        width: 100% !important;
    }
}
header .container {
    max-width: 1280px;
    justify-content: space-between;
}
.hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 1.5rem;
    row-gap: 1rem;
    width: 100%;
    position: relative;
    padding: 60px 0;
    max-width: 1024px;
}

.content {
    max-width: 768px;
}

.socials {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
}
.cover {
    height: 100vh;
    margin-bottom: 60px;
}
.wp-block-cover__inner-container,
.wp-block-cover__inner-container .container {
    height: 100%;
}
.wp-block-cover__inner-container {
    display: flex;
  justify-content: center;
  align-items: center;
}
.wp-block-cover__inner-container .container {
    padding: 60px 24px;
}
.cover h2 {
    visibility: visible;
}
.aboutus {
    max-width: 1024px;
    position: relative;
    border-radius: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    background-color: #f4f4f4;
    padding: 24px;
    min-height: 250px;
    box-shadow: 1px 1px 5px #c8c8c8;
}


.aboutus > * {
    min-width: 0;
}
/* .aboutus::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #8C878760; 
    border-radius: 32px 0px 32px 0px;
} 
.aboutus h2, .aboutus div {
    z-index: 1;
}*/
.aboutus-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    align-self: end;
    justify-self: end;
}
.aboutus-link a {
    font-size: 24px;
}


.aboutus-link figure {
    margin: 0;
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.aboutus-link:hover figure {
    transform: translateX(6px);
}
.text-media,
.media-text {
    max-width: 1024px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.text-media > *,
.media-text > * {
    min-width: 0;
}

/* Stacked blocks: text first, then media (matches .text-media DOM order) */
.media-text > *:nth-child(1) {
    order: 2;
}

.media-text > *:nth-child(2) {
    order: 1;
}

.text-media .wp-block-cover,
.media-text .wp-block-cover {
    width: 100%;
}

.text-media .wp-block-cover {
    border-radius: 0px 32px 0px 32px;
  }
  .media-text .wp-block-cover {
    border-radius: 32px 0px 32px 0px;
  }
@media (min-width: 640px) {
}

@media (min-width: 768px) {
    .cover .wp-block-cover__inner-container {
        align-items: center;
    }

    .hero .content h2 {
        font-size: 64px;
    }

    .aboutus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .aboutus-link {
        position: absolute;
        bottom: 24px;
        right: 24px;
        align-self: auto;
        justify-self: auto;
    }

    .text-media,
    .media-text {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .media-text > *:nth-child(1),
    .media-text > *:nth-child(2) {
        order: unset;
    }
}

@media (min-width: 1024px) {
    .faq_answer_container {
        min-height: 628px;
    }
}

@media (min-width: 1280px) {
    .hero,
    .aboutus,
    .text-media,
    .media-text {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    header .container,
    .hero {
        max-width: 1536px;
    }
}

/* Contact Form 7 */
.wpcf7-response-output {
    border: none !important;
}

.wpcf7-spinner {
    display: none !important;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: Jost, ui-sans-serif, system-ui, sans-serif;
}

.wpcf7-form > p {
    margin: 0;
}

.wpcf7 .cf7-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
    margin: 0;
}

.wpcf7 .cf7-row .cf7-col {
    min-width: 0;
}

.wpcf7 .cf7-col p {
    margin: 0;
}

.wpcf7 .cf7-row .cf7-col .wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7 .cf7-row .cf7-col input[type="text"],
.wpcf7 .cf7-row .cf7-col input[type="email"],
.wpcf7 .cf7-row .cf7-col .wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    font-family: inherit;
    font-size: 24px;
    border: 1px solid #bababa;
    outline: none;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    padding: 0.75rem 1rem;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="text"]:focus-visible,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="email"]:focus-visible,
.wpcf7-form input.wpcf7-text:focus,
.wpcf7-form input.wpcf7-text:focus-visible,
.wpcf7-form input.wpcf7-email:focus,
.wpcf7-form input.wpcf7-email:focus-visible,
.wpcf7 .cf7-row input[type="text"]:focus,
.wpcf7 .cf7-row input[type="text"]:focus-visible,
.wpcf7 .cf7-row input[type="email"]:focus,
.wpcf7 .cf7-row input[type="email"]:focus-visible,
.wpcf7-form textarea:focus,
.wpcf7-form textarea:focus-visible {
    border-color: #000 !important;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #8d8d8d;
    font-size: 16px;
    opacity: 1;
}

.wpcf7-form textarea,
.wpcf7 textarea {
    resize: none;
    max-height: 150px;
    overflow-y: auto;
}

.wpcf7-form p:has(input[type="submit"]),
.wpcf7-form p:has(button[type="submit"]),
.wpcf7-form p:has(.wpcf7-submit) {
    display: flex;
    justify-content: flex-end;
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wpcf7-form .wpcf7-submit {
    width: auto;
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    box-sizing: border-box;
    border-radius: 16px;
    font-family: inherit;
    font-size: 24px;
    color: #8d8d8d;
    background: #f4f4f4;
    border: 1px solid #bababa;
    outline: none;
}

.wpcf7-form input[type="submit"]:focus,
.wpcf7-form input[type="submit"]:focus-visible,
.wpcf7-form button[type="submit"]:focus,
.wpcf7-form button[type="submit"]:focus-visible,
.wpcf7-form .wpcf7-submit:focus,
.wpcf7-form .wpcf7-submit:focus-visible {
    border-color: #000;
}

@media (max-width: 767px) {
    .wpcf7 .cf7-row {
        grid-template-columns: 1fr;
    }
}
.list div figure {
  flex-shrink: 0 !important;
}

/*	Animations	
#meist {
  position: relative;
  background: radial-gradient(circle at 20% 30%, rgba(66,163,154,0.18) 0%, transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(212,131,137,0.18) 0%, transparent 60%);
  background-size: 200% 200%;
  animation: blobs 35s ease infinite;
}

@keyframes blobs {
  0% {
    background-position: 0% 0%, 100% 100%;
  }
  25% {
    background-position: 10% 30%, 90% 80%;
  }
  50% {
    background-position: 20% 10%, 80% 60%;
  }
  75% {
    background-position: 15% 25%, 85% 70%;
  }
  100% {
    background-position: 0% 0%, 100% 100%;
  }
}*/