/* ==========================================================================
   GIGI INTERIOR – CUSTOM STYLESHEET
   Load this AFTER the theme's own stylesheets.

   Contents
   01  Font & design tokens
   02  Base typography
   03  Headings
   04  Layout & sections
   05  Header & navigation
   06  Breadcrumb
   07  Slider & banners
   08  Content (about, services, teasers, FAQ, sidebar)
   09  Buttons
   10  Forms
   11  Testimonials
   12  Footer
   13  Focus visibility
   14  Theme fixes
   ========================================================================== */


/* ==========================================================================
   01  FONT & DESIGN TOKENS
   @import only works at the very top of a stylesheet.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --gigi-font:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --gigi-black: #000000;
  --gigi-white: #ffffff;
  --gigi-ink:   #1a1a1a;   /* testimonial text */
  --gigi-grey:  #666666;   /* placeholders */
  --gigi-taupe: #b8b2ac;   /* active carousel dot */
  --gigi-beige: #efe5da;   /* tint regions */
}

.field--name-field-mt-srv-subheader-body p {
  font-size: 16px;
  padding-bottom: 20px !important;
}

/* ==========================================================================
   02  BASE TYPOGRAPHY (Wix "font_8")
   ========================================================================== */

html body,
body p,
body li,
body td,
body th,
body blockquote,
body label,
body input,
body select,
body textarea {
  font-family: var(--gigi-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3em;
  letter-spacing: 0;
  color: var(--gigi-black);
}

/* Paragraphs in the original read as 14px with generous spacing */
body p {
  line-height: 1.5em;
}

body a {
  font-family: var(--gigi-font);
  color: var(--gigi-black);
}


/* ==========================================================================
   03  HEADINGS
   ========================================================================== */

/* H1 (Wix "font_0") */
body h1,
body h1 a {
  font-family: var(--gigi-font);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1em;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gigi-black);
}

/* H2 (Wix "font_2"): section headings like "GOT QUESTIONS? GET IN TOUCH" */
body h2,
body h2 a,
html body h2.title,
html body h2.title a,
html body .title h2,
html body .title h2 a {
  font-family: var(--gigi-font);
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.1em;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gigi-black);
}

/* H3–H6: the original uses H2-style card/feature titles ("THE DESIGN PROCESS"),
   so these follow H2 rather than the theme's 60px H3. */
body h3, body h3 a,
body h4, body h4 a,
body h5, body h5 a,
body h6, body h6 a {
  font-family: var(--gigi-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1em;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gigi-black);
}


/* ==========================================================================
   04  LAYOUT & SECTIONS
   ========================================================================== */

/* ---------- Width concept ---------- */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }

  .header-container .container,
  .footer-container .container {
    max-width: 100%;
  }
}

/* ---------- Full-width images ---------- */
.container-fluid .field--mt-bg-image-block {
  margin: 0 -15px !important;
}

.container-fluid .view-mt-slideshow-full-width,
.container-fluid .view-mt-slideshow-fullscreen {
  margin-left: -15px !important;
  margin-right: -15px !important;
}

.background-image {
  background-size: cover;
}

/* ---------- Section spacing ---------- */
.content-top__section {
  padding: 30px 0;
}

.main-content__section,
.sidebar__section {
  padding: 30px 0 70px;
}

/* ---------- Region colours ---------- */
.region--tint-background {
  background-color: var(--gigi-beige);
}


/* ==========================================================================
   05  HEADER & NAVIGATION
   ========================================================================== */

/* ---------- Transparent header on the front page (desktop) ---------- */
@media (min-width: 992px) {
  .path-frontpage .header-container {
    position: absolute;
    width: 100%;
    z-index: 22;
  }

  .path-frontpage .header {
    background-color: transparent;
  }
}

/* ---------- Mobile menu toggle ---------- */
@media (max-width: 991px) {
  .header-container .header-second .sf-accordion-toggle {
    margin-top: -50px;
  }
}

/* ---------- Main navigation (Wix menu: 12px bold) ---------- */
.header-container ul.menu > li > a,
.header-container ul.menu > li > span {
  font-weight: 700;
  font-size: 12px;
}

body header nav a,
body header .menu a,
body nav[role="navigation"] a,
.block-system-breadcrumb-block .breadcrumb__item,
body .main-menu a,
body .sf-menu a {
  font-family: var(--gigi-font);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3em;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gigi-black) !important;
}


/* ==========================================================================
   06  BREADCRUMB
   (Typography is set with the navigation in section 05.)
   ========================================================================== */

.container-fluid .breadcrumb .breadcrumb__items {
  text-align: right;
}

@media (min-width: 1200px) {
  .container-fluid .breadcrumb .breadcrumb__items {
    width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}


/* ==========================================================================
   07  SLIDER & BANNERS
   ========================================================================== */

/* ---------- Revolution slider: centre all layers ---------- */
.tp-parallax-wrap {
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: translateY(-50%);
  text-align: center;
}

.tp-parallax-wrap .tp-loop-wrap,
.tp-parallax-wrap .tp-mask-wrap {
  position: relative !important;
  left: auto !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto !important;
}

.tp-parallax-wrap .tp-caption {
  position: relative !important;
  left: auto !important;
  text-align: center !important;
}

.tp-caption img {
  max-width: 100% !important;
  height: auto !important;
}

/* Slider caption style "medium" */
.medium {
  font-size: 16px;
  font-weight: 500;
}

/* Remove the dark overlay on the front-page fullscreen slideshow */
#block-baseplus-views-block-mt-posts-slideshow-full-screen-block-1 .transparent-background {
  background-color: rgba(0, 0, 0, 0) !important;
}

/* ---------- Background-image banners (all) ---------- */
.banner__section .background-image-block__section {
  padding: 0;
}

/* Full-height banners */
#block-baseplus-bacjkground1front .background-image-block__section,
#block-baseplus-bannerabout .background-image-block__section,
#block-baseplus-bannerservices-2 .background-image-block__section,
#block-baseplus-bannerdesignprocess .background-image-block__section
{
  height: 100vh;
}

/* ---------- Front-page banner: full height, content centred ---------- */
#block-baseplus-backgroundimagefrontbanner .background-image-block__section {
  position: relative;
  height: 100vh;    /* fallback */
  height: 100dvh;   /* ignores mobile browser bars where supported */
}

#block-baseplus-backgroundimagefrontbanner .background-image-block__section > .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#block-baseplus-backgroundimagefrontbanner .background-image-block__section .text-center img {
  max-width: 100%;
  height: auto !important;
}

/* ---------- Services banner: right-side white gradient ---------- */
/* Turns the existing overlay into the gradient */
#block-baseplus-bannerservices .background-image-overlay {
  opacity: 1 !important; /* overrides inline opacity: 0.15 */
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.35) 25%,
    rgba(255, 255, 255, 0) 45%
  ) !important;
}

/* Keep the breadcrumb above the overlay */
#block-baseplus-bannerservices .background-image-block__section > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Soft light halo helps dark text on the texture */
#block-baseplus-bannerservices .breadcrumb {
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Narrow screens: extend the gradient further left */
@media (max-width: 767px) {
  #block-baseplus-bannerservices .background-image-overlay {
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.3) 60%,
      rgba(255, 255, 255, 0) 90%
    ) !important;
  }
}


/* ==========================================================================
   08  CONTENT (ABOUT, SERVICES, TEASERS, FAQ, SIDEBAR)
   ========================================================================== */

/* ---------- About: highlight paragraphs ---------- */
.paragraph--type--mt-highlight.paragraph--view-mode--mt-teaser,
.paragraph--type--mt-highlight.paragraph--view-mode--default {
  padding: 0 0 4.5em;
}

/* ---------- Service pages ---------- */
@media (min-width: 576px) {
  .page-node-type-mt-service .page-title {
    font-size: 30px;
  }
}

/* Disabled – kept for reference
@media (min-width: 992px) {
  .page-node-type-mt-service .main-content__section,
  .page-node-type-mt-service .sidebar__section {
    padding-top: 20px;
  }
}
*/

/* ---------- Teaser tiles & cards ---------- */
.node--view-mode-mt-teaser-tile .node__title {
  line-height: 1;
}

.node--view-mode-mt-teaser-tile.region--default-background,
.node--view-mode-mt-featured-teaser--card {
  box-shadow: none;
}

/* ---------- Design process: package cards styled like the service tiles ----------
   Same look as the services section, on the beige tint background:
   no white card, no shadow, H2-sized titles. The view keeps its 2 columns. */
.node--type-mt-product,
.node--type-mt-product:hover,
.node--type-mt-product.region--white-background,
.node--type-mt-product.region--default-background {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.node--type-mt-product .node__title,
.node--type-mt-product .node__title a {
  font-size: 20px;
  line-height: 1.1em;
}

.node--type-mt-product .node__title {
  margin: 0 0 8px;
}

/* ---------- Text content: centred lists ----------
   Bullets sit next to centred text instead of at the far left. */
.mt-text-content .text-center ul {
  list-style-position: inside;
  padding-left: 0;
}

/* ---------- FAQ page (node 106): accordion ----------
   Only a bottom divider between questions, no side or top borders. */
.page-node-106 details, .page-node-type-mt-service details {
  margin: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.page-node-106 summary, .page-node-type-mt-service summary {
  padding: 0.5em;
}

.page-node-106 h3 {
  margin: 30px 0 10px !important;
}

/* ---------- Sidebar blocks: no decorative line before the title ---------- */
.sidebar__section h2::before,
.sidebar__section h2::after,
.sidebar__section .title::before,
.sidebar__section .title::after {
  content: none !important;
  display: none !important;
}

/* Remove the space the line used to take */
.sidebar__section h2,
.sidebar__section .title {
  padding-left: 0 !important;
}


/* ==========================================================================
   09  BUTTONS
   One section for every button on the site: menu CTA, slider, content
   sections, "Read more" links, contact form submit.
   Normal:               transparent background, black text, 1px black border
   Hover / keyboard focus: black background, white text, black border
   Never rounded.
   !important is deliberate: the theme's region rules (.region--*-background)
   and the slider's inline styles would otherwise win.
   ========================================================================== */

/* ---------- Normal state ---------- */
a.mt-button,
.mt-button > a,
input.mt-button,
button.mt-button,
.button,
a.button,
.btn,
a.btn,
.more-link a,
a.mt-link-stylable,
.menu.cta-active > li:last-child > a,
.tp-caption a.mt-button,
.tp-caption .mt-button > a,
.tp-caption .rev-btn,
.tp-caption .button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"],
button.form-submit,
.webform-button--submit {
  font-family: var(--gigi-font) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1.2em !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--gigi-black) !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--gigi-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---------- Hover / focus state ---------- */
a.mt-button:hover,                         a.mt-button:focus-visible,
.mt-button > a:hover,                      .mt-button > a:focus-visible,
input.mt-button:hover,                     input.mt-button:focus-visible,
button.mt-button:hover,                    button.mt-button:focus-visible,
.button:hover,                             .button:focus-visible,
a.button:hover,                            a.button:focus-visible,
.btn:hover,                                .btn:focus-visible,
a.btn:hover,                               a.btn:focus-visible,
.more-link a:hover,                        .more-link a:focus-visible,
a.mt-link-stylable:hover,                  a.mt-link-stylable:focus-visible,
.menu.cta-active > li:last-child > a:hover, .menu.cta-active > li:last-child > a:focus-visible,
.tp-caption a.mt-button:hover,             .tp-caption a.mt-button:focus-visible,
.tp-caption .mt-button > a:hover,          .tp-caption .mt-button > a:focus-visible,
.tp-caption .rev-btn:hover,                .tp-caption .rev-btn:focus-visible,
.tp-caption .button:hover,                 .tp-caption .button:focus-visible,
input[type="submit"]:hover,                input[type="submit"]:focus-visible,
input[type="button"]:hover,                input[type="button"]:focus-visible,
input[type="reset"]:hover,                 input[type="reset"]:focus-visible,
button[type="submit"]:hover,               button[type="submit"]:focus-visible,
button.form-submit:hover,                  button.form-submit:focus-visible,
.webform-button--submit:hover,             .webform-button--submit:focus-visible {
  color: var(--gigi-white) !important;
  background: var(--gigi-black) !important;
  border-color: var(--gigi-black) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ---------- Switch off the theme's hover overlay ----------
   The theme draws its hover with a rounded, semi-transparent ::before/::after
   layer. That layer turns the black hover grey and shows rounded corners. */
a.mt-button::before,                  a.mt-button::after,
.mt-button::before,                   .mt-button::after,
.mt-button > a::before,               .mt-button > a::after,
.button::before,                      .button::after,
.btn::before,                         .btn::after,
.more-link a::before,                 .more-link a::after,
a.mt-link-stylable::before,           a.mt-link-stylable::after,
.menu.cta-active > li:last-child > a::before,
.menu.cta-active > li:last-child > a::after,
.tp-caption .rev-btn::before,         .tp-caption .rev-btn::after,
.webform-button--submit::before,      .webform-button--submit::after {
  content: none !important;
  display: none !important;
}

/* Keep a surrounding .mt-button wrapper neutral */
div.mt-button,       span.mt-button,
div.mt-button:hover, span.mt-button:hover {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- Size & spacing ---------- */
/* "Read more" links: sized like the LEARN MORE button */
a.mt-link-stylable {
  display: inline-block !important;
  padding: 16px 40px !important;
}

/* Kept from the old outline-button rule */
.region--bright-background a.mt-button,
.region--bright-background .mt-button > a {
  margin-top: 20px;
}


/* ==========================================================================
   10  FORMS (Wix form: 12px labels and inputs, 1px black boxes)
   ========================================================================== */

body form label {
  font-size: 12px;
  line-height: 15px;
}

body form input[type="text"],
body form input[type="email"],
body form input[type="tel"],
body form textarea,
body form select {
  font-size: 12px;
  line-height: 15px;
  background: transparent;
  border: 1px solid var(--gigi-black);
  border-radius: 0;
}

body form input::placeholder,
body form textarea::placeholder {
  color: var(--gigi-grey);
}


/* ==========================================================================
   11  TESTIMONIALS
   ========================================================================== */

/* ---------- General ---------- */
body blockquote,
body .testimonial p {
  font-size: 14px;
  line-height: 1.5em;
}

.node--view-mode-mt-featured-teaser-2 .quote-icon::after {
  color: var(--gigi-black);
}

/* ---------- Carousel (#content-bottom-highlighted) ---------- */

/* Remove the white card background */
#content-bottom-highlighted .owl-item,
#content-bottom-highlighted .mt-carousel-item,
#content-bottom-highlighted .node--type-mt-testimonial,
#content-bottom-highlighted .mt-featured-teaser-wrapper,
#content-bottom-highlighted .featured-teaser-content,
#content-bottom-highlighted .featured-teaser-footer {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Text & alignment */
#content-bottom-highlighted .featured-teaser-content {
  max-width: 862px;
  margin: 0 auto;
  text-align: center;
}

#content-bottom-highlighted .field--name-field-mt-tst-body,
#content-bottom-highlighted .field--name-field-mt-tst-body p {
  font-family: var(--gigi-font);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 26px;
  color: var(--gigi-ink);
  text-align: center;
}

#content-bottom-highlighted .field--name-field-mt-tst-body p {
  margin: 0 0 26px;
}

#content-bottom-highlighted .field--name-field-mt-tst-body p:last-child {
  margin-bottom: 0;
}

#content-bottom-highlighted .featured-teaser-footer {
  margin-top: 27px;
  text-align: center;
}

#content-bottom-highlighted .featured-teaser-footer .node__title,
#content-bottom-highlighted .featured-teaser-footer .node__title a {
  margin: 0;
  font-family: var(--gigi-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--gigi-ink);
  text-decoration: none;
}

/* Arrows: keep the theme's positions, swap the icon for thin chevrons */
#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-prev,
#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-next {
  width: 27px !important;
  height: 52px !important;
  padding: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 27px 52px !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  cursor: pointer;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-prev::before,
#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-prev::after,
#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-next::before,
#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-next::after {
  display: none !important;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 52'%3E%3Cpolyline points='25.5,1 1.5,26 25.5,51' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") !important;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 52'%3E%3Cpolyline points='1.5,1 25.5,26 1.5,51' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") !important;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-prev:hover,
#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .owl-next:hover {
  opacity: 0.6;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-nav .disabled {
  opacity: 0.25;
  cursor: default;
}

/* Dots: replace the theme's outline rings and gold active state */
#content-bottom-highlighted .mt-carousel-testimonials .owl-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin: 95px 0 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: 0;
  cursor: pointer;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot::before,
#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot::after,
#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot span::before,
#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot span::after {
  display: none !important;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot span {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
  background: var(--gigi-black) !important;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot.active span,
#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot:hover span {
  background: var(--gigi-taupe) !important;
}

#content-bottom-highlighted .mt-carousel-testimonials .owl-dots .owl-dot:focus-visible span {
  outline: 1px solid var(--gigi-black) !important;
  outline-offset: 3px;
}

/* Smaller screens */
@media (max-width: 767px) {
  #content-bottom-highlighted .field--name-field-mt-tst-body,
  #content-bottom-highlighted .field--name-field-mt-tst-body p,
  #content-bottom-highlighted .featured-teaser-footer .node__title,
  #content-bottom-highlighted .featured-teaser-footer .node__title a {
    font-size: 15px;
    line-height: 24px;
  }

  #content-bottom-highlighted .mt-carousel-testimonials .owl-dots {
    margin-top: 50px !important;
  }
}


/* ==========================================================================
   12  FOOTER (Wix footer: 14px / 1.7em, 0.02em tracking)
   ========================================================================== */

body footer,
body footer li,
body footer a {
  font-size: 14px;
  line-height: 1.7em;
  letter-spacing: 0.02em;
  color: var(--gigi-black) !important;
  padding: 0 0 8px 0 !important;
}

/* Column headings ("Services", "Products", "Company") */
body footer h2,
body footer h3,
body footer h4 {
  font-size: 14px;
}

.footer__section h4.title,
.footer__section h2.title,
.footer__section nav > h2,
.footer__section .block-search > h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Branding logo */
#block-baseplus-gigifooterbranding img {
  width: 250px;
}


/* ==========================================================================
   13  FOCUS VISIBILITY
   ========================================================================== */

body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible {
  outline: 2px solid var(--gigi-black);
  outline-offset: 2px;
}


/* ==========================================================================
   14  THEME FIXES
   ========================================================================== */

.ui-dialog .ui-dialog-titlebar {
  background-color: var(--mt-color-tint);
  border-color: var(--mt-color-tint);
}