/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Motyw potomny dla MR Serwis - odwzorowanie strony mrserwiskosakowo.pl
Author: MR Serwis
Template: hello-elementor
Version: 2.6.0
Text Domain: hello-elementor-child
*/

:root{
  --mrs-orange:#FD9C32;
  --mrs-green:#446D36;
  --mrs-green-bar:#446C36;
  --mrs-dark:#002900;
  --mrs-yellow:#ECC006;
}

html, body{ background-color: var(--mrs-orange); }

body, button, input, select, textarea,
.elementor-widget-text-editor, .elementor-widget-heading .elementor-heading-title{
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- tresc redakcyjna (bloki text-editor z oryginalu) ---- */
.mrs-rich h1, .mrs-rich h2, .mrs-rich h3, .mrs-rich h4{
  color: var(--mrs-green);
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.15;
}
.mrs-rich h2{ font-size: 48px; line-height: 54px; }
.mrs-rich h3{ font-size: 34px; line-height: 38px; }
.mrs-rich p{ margin: 0 0 18px; }
.mrs-rich ul{ margin: 0 0 18px; padding-left: 30px; list-style: disc; }
.mrs-rich li{ margin-bottom: 6px; }
.mrs-rich a{ color: var(--mrs-dark); }

@media (max-width: 1024px){
  .mrs-rich h2{ font-size: 36px; line-height: 42px; }
  .mrs-rich h3{ font-size: 27px; line-height: 32px; }
}
@media (max-width: 767px){
  .mrs-rich h2{ font-size: 27px; line-height: 33px; }
  .mrs-rich h3{ font-size: 22px; line-height: 28px; }
  .mrs-rich ul{ padding-left: 22px; }
}

/* ---- naglowek ---- */
.mrs-topbar{ background: var(--mrs-green-bar); }
.mrs-phone a, .mrs-phone .elementor-button{
  background: var(--mrs-orange) !important;
  color:#fff !important;
  font-weight:900;
}
.mrs-menu .elementor-nav-menu a,
.mrs-menu .hfe-nav-menu a{
  color:#fff !important;
  font-weight:700;
  font-size:16px;
}
.mrs-menu .elementor-nav-menu a:hover,
.mrs-menu .hfe-nav-menu a:hover{ color: var(--mrs-yellow) !important; }

/* ---- stopka ---- */
.mrs-footer{ background: var(--mrs-green-bar); }
.mrs-contact, .mrs-contact p{
  color: var(--mrs-yellow) !important;
  font-weight:900;
  text-decoration:none;
}

/* ---- formularz kontaktowy ---- */
.wpforms-container .wpforms-field-label{ font-weight:700; color: var(--mrs-dark); }
.wpforms-container input[type=text], .wpforms-container input[type=email],
.wpforms-container input[type=tel], .wpforms-container textarea{
  border:1px solid #CCCCCC !important; border-radius:4px !important; padding:10px 12px !important;
}
.wpforms-container .wpforms-submit{
  background: var(--mrs-green) !important; color:#fff !important;
  font-weight:900 !important; font-size:20px !important;
  border:none !important; border-radius:4px !important; padding:12px 34px !important;
  cursor:pointer;
}
.wpforms-container .wpforms-submit:hover{ background: var(--mrs-dark) !important; }
.wpforms-container .wpforms-field-checkbox label{ font-size:12px; line-height:18px; font-weight:400; }

/* obrazy nie wychodza poza kontener */
.elementor-widget-image img{ max-width:100%; height:auto; }
/* ---- szerokosci przyciskow jak w oryginale ---- */
.mrs-btn-245 .elementor-button{ min-width:245px; justify-content:center; }
.mrs-btn-330 .elementor-button{ min-width:330px; justify-content:center; }
.mrs-btn-413 .elementor-button{ min-width:413px; justify-content:center; }
@media (max-width:767px){
  .mrs-btn-245 .elementor-button,
  .mrs-btn-330 .elementor-button,
  .mrs-btn-413 .elementor-button{ min-width:0; width:100%; }
}

/* ---- zdjecie hero: kadr 527x618 jak w oryginale ---- */
.mrs-hero-img img{
  width:527px; height:618px; max-width:100%;
  object-fit:cover; object-position:center top;
  display:block; margin-left:auto;
}
@media (max-width:1024px){ .mrs-hero-img img{ height:460px; } }
@media (max-width:767px){ .mrs-hero-img img{ height:360px; width:100%; margin:0 auto; object-position:center 20%; } }

/* ---- ikona telefonu w stopce ---- */
.mrs-phone-icon svg{ width:100px; height:100px; display:block; }
@media (max-width:767px){ .mrs-phone-icon svg{ width:64px; height:64px; margin:0 auto; } }

/* ---- naglowek: przycisk telefonu na pelna wysokosc paska ---- */
.mrs-phone .elementor-button{ border-radius:0; height:100%; display:flex; align-items:center; }
.mrs-topbar{ overflow:hidden; }
/* ---- stopka: kontakt zawsze zolty (poprawka koloru linku) ---- */
.mrs-contact, .mrs-contact p{
  color:#ECC006 !important;
  font-weight:700 !important;
  text-decoration:none !important;
}
.mrs-contact a:hover{ opacity:.85; }

/* ---- zageszczenie rytmu pionowego (blizej oryginalu) ---- */
.mrs-rich p:last-child, .mrs-rich ul:last-child{ margin-bottom:0; }
/* ================= MOBILE ================= */
html, body{ overflow-x:hidden; max-width:100%; }

@media (max-width:767px){
  /* pasek telefonu: waski pas na pelna szerokosc, jak w oryginale (h~46, 18px) */
  .mrs-topbar, .mrs-phone{ }
  .mrs-phone .elementor-button{
    width:100%;
    padding:11px 10px !important;
    font-size:18px !important;
    line-height:24px !important;
    white-space:nowrap;
  }
  .mrs-phone .elementor-widget-container{ width:100%; }

  /* menu mobilne nie moze wystawac poza ekran */
  .hfe-nav-menu__toggle, .hfe-nav-menu-icon{ margin-left:auto; }
  .hfe-menu-toggle.sub-arrow{ right:0 !important; }
  .hfe-nav-menu, .hfe-nav-menu__layout-horizontal{ max-width:100%; }

  /* obrazy sekcji EKO na pelna szerokosc */
  .elementor-widget-image img{ width:100%; height:auto; }
}
@media (max-width:767px){
  /* naglowek: logo + hamburger w jednym rzedzie, pasek telefonu pod spodem (jak w oryginale) */
  .mrs-topbar{ flex-wrap:wrap !important; padding:0 !important; }
  .mrs-topbar > .e-con{ padding-top:6px; padding-bottom:6px; }
  .mrs-topbar > .e-con:nth-child(1){ width:60% !important; padding-left:14px; }
  .mrs-topbar > .e-con:nth-child(2){ width:40% !important; padding-right:14px; }
  .mrs-topbar > .e-con:nth-child(3){
    width:100% !important; order:3; padding:0 !important;
  }
  .mrs-phone .elementor-widget-container,
  .mrs-phone .elementor-button-wrapper{ width:100%; }
  .mrs-phone .elementor-button{
    width:100%; display:flex; justify-content:center; border-radius:0;
  }
}
@media (max-width:767px){
  /* naglowek mobilny: logo + hamburger, pasek telefonu pelnej szerokosci pod spodem */
  .mrs-topbar{ flex-wrap:wrap !important; padding:0 !important; row-gap:0 !important; }
  .mrs-hdr-logo{ width:62% !important; padding:8px 0 8px 14px !important; }
  .mrs-hdr-menu{ width:38% !important; padding:8px 14px 8px 0 !important; }
  .mrs-hdr-phone{ width:100% !important; order:3; padding:0 !important; }
  .mrs-hdr-phone .elementor-widget-container,
  .mrs-hdr-phone .elementor-button-wrapper{ width:100%; }
  .mrs-phone .elementor-button{
    width:100%; display:flex; justify-content:center; border-radius:0;
    padding:11px 8px !important; font-size:18px !important; white-space:nowrap;
  }
}
@media (max-width:767px){
  /* logo i hamburger w jednym rzedzie (bez zawijania przez gap) */
  .mrs-topbar{ gap:0 !important; column-gap:0 !important; row-gap:0 !important; }
  .mrs-hdr-logo{ width:60% !important; }
  .mrs-hdr-menu{ width:40% !important; align-items:flex-end !important; }
  .mrs-hdr-menu .elementor-widget-container{ display:flex; justify-content:flex-end; width:100%; }
  .mrs-hdr-menu .hfe-nav-menu__toggle{ margin-left:auto; margin-right:0; }
}
@media (max-width:767px){
  /* naglowek boxed -> wewnetrzny .e-con-inner musi byc rzedem */
  .mrs-topbar > .e-con-inner{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:0 !important;
    padding:0 !important;
  }
  .mrs-topbar .mrs-hdr-logo{ width:60% !important; padding:8px 0 8px 14px !important; }
  .mrs-topbar .mrs-hdr-menu{
    width:40% !important;
    padding:8px 14px 8px 0 !important;
    align-items:flex-end !important;
  }
  .mrs-topbar .mrs-hdr-phone{ width:100% !important; order:3; padding:0 !important; }
  .mrs-hdr-menu .elementor-widget-container{ display:flex; justify-content:flex-end; width:100%; }

  /* stopka boxed -> kolumna wysrodkowana */
  .mrs-footer > .e-con-inner{ gap:18px !important; }
}
/* ============ DOPASOWANIE 1:1 DO ORYGINALU (desktop >=1025px) ============ */
@media (min-width:1025px){
  /* --- naglowek: logo 0, menu 410px, telefon wystaje 49px poza tresc --- */
  .mrs-topbar > .e-con-inner{ flex-wrap:nowrap !important; gap:0 !important; }
  .mrs-topbar .mrs-hdr-logo{ flex:0 0 410px !important; width:410px !important;
    justify-content:flex-start !important; }
  .mrs-topbar .mrs-hdr-menu{ flex:0 0 372px !important; width:372px !important;
    justify-content:flex-start !important; }
  .mrs-topbar .mrs-hdr-phone{ flex:1 1 auto !important; width:auto !important;
    justify-content:flex-end !important; margin-right:-49px; }
  .mrs-phone .elementor-button{ height:74px; display:flex; align-items:center; }

  /* --- hero: zdjecie pracownika siega prawej krawedzi ekranu (jak w oryginale) --- */
  .mrs-hero-img{ margin-right:calc((1100px - 100vw) / 2); }
  .mrs-hero-img img{ width:527px !important; max-width:none !important;
    height:618px !important; object-fit:cover; object-position:center top;
    margin-left:auto; margin-right:0; display:block; }

  /* --- hero: przyciski o stalej szerokosci, odstep 49px --- */
  .mrs-hero-btns{ justify-content:flex-start !important; }
  .mrs-btn-cell{ flex:0 0 245px !important; width:245px !important; }

  /* --- sekcja srodkowa: przycisk wyrownany do prawej krawedzi kolumny tekstu --- */
  .mrs-mid-btn{ justify-content:flex-start !important; }
  .mrs-mid-btn .elementor-widget-button{ width:100%; }
  .mrs-mid-btn .elementor-button-wrapper{ text-align:left; padding-left:379px; }

  /* --- zdjecie Mercedesa lekko wystaje w prawo (jak w oryginale) --- */
  .mrs-mid-img{ margin-right:-50px; }
  .mrs-mid-img img{ width:508px !important; max-width:none !important; }
}
/* --- hero: zdjecie pracownika absolutnie przy prawej krawedzi (jak oryginal) --- */
@media (min-width:1025px){
  .mrs-hero{ position:relative; overflow:hidden; }
  .mrs-hero > .e-con-inner{ position:static; }
  .mrs-hero .mrs-hero-text{ position:relative; z-index:2; }
  .mrs-hero-img{ position:absolute !important; right:0; bottom:0; margin:0 !important;
    width:527px; z-index:1; }
  .mrs-hero-img img{ width:527px !important; max-width:none !important;
    height:618px !important; object-fit:cover; object-position:center top;
    margin:0 !important; display:block; }
  .mrs-hero-sub p{ margin-top:0; }
}
/* ================= NAGLOWEK EKONOMICZNIE (dwukolorowy, jak oryginal) ================= */
.mrs-eko p{ margin:0; text-align:center; font-weight:700; }
.mrs-eko .mrs-eko1{ font-size:65px; line-height:78px; }
.mrs-eko .mrs-eko2{ font-size:55px; line-height:66px; }
@media (max-width:1024px){
  .mrs-eko .mrs-eko1, .mrs-eko .mrs-eko2{ font-size:45px; line-height:54px; }
}
@media (max-width:767px){
  .mrs-eko .mrs-eko1, .mrs-eko .mrs-eko2{ font-size:35px; line-height:42px; }
}

/* ================= STRONA KONTAKT ================= */
.mrs-kontakt-wrap > .e-con-inner{ padding:0 !important; }
.mrs-kontakt-dane p{ margin:0; }
.mrs-kontakt-dane a{ color:#FFFFFF !important; text-decoration:none; display:inline-block; }
.mrs-kontakt-dane a:hover{ color:#ECC006 !important; }

/* ikony przy telefonie i mailu (biale, jak w oryginale) */
.mrs-ico{ position:relative; padding-left:52px; }
.mrs-ico::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:34px; height:34px; background-repeat:no-repeat; background-position:center;
  background-size:contain;
}
.mrs-ico-tel::before{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 1.7z'/%3E%3C/svg%3E");
}
.mrs-ico-mail::before{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4.2-8 4.8-8-4.8V6l8 4.8L20 6v2.2z'/%3E%3C/svg%3E");
}

/* formularz na zielonym panelu: biale pola bez etykiet, pomaranczowy przycisk */
.mrs-kontakt-form .wpforms-container{ margin:0; }
.mrs-kontakt-form .wpforms-field{ padding:0 0 16px 0; }
.mrs-kontakt-form .wpforms-field-label{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap;
}
.mrs-kontakt-form input[type=text],
.mrs-kontakt-form input[type=email],
.mrs-kontakt-form input[type=tel],
.mrs-kontakt-form textarea{
  width:100% !important; max-width:100% !important;
  background:#fff !important; border:0 !important; border-radius:4px !important;
  padding:14px 16px !important; font-size:16px !important; color:#000 !important;
  box-shadow:none !important;
}
.mrs-kontakt-form textarea{ min-height:130px !important; resize:vertical; }
.mrs-kontakt-form ::placeholder{ color:#8a8a8a; opacity:1; }
.mrs-kontakt-form .wpforms-field-checkbox label,
.mrs-kontakt-form .wpforms-field-checkbox .wpforms-field-label-inline{
  color:#fff !important; font-size:11px !important; line-height:16px !important; font-weight:400 !important;
}
.mrs-kontakt-form .wpforms-submit{
  background:#FD9C32 !important; color:#fff !important;
  font-weight:700 !important; font-size:18px !important;
  border:0 !important; border-radius:4px !important;
  padding:13px 46px !important; cursor:pointer;
}
.mrs-kontakt-form .wpforms-submit:hover{ background:#e8892a !important; }
.mrs-kontakt-form .wpforms-required-label{ color:#ECC006 !important; }

/* dwie kolumny pol (Imie / Numer telefonu) obok siebie - jak w oryginale */
@media (min-width:768px){
  .mrs-kontakt-form .wpforms-form{ display:flex; flex-wrap:wrap; gap:0 16px; }
  .mrs-kontakt-form .wpforms-form > .wpforms-field-container{ display:contents; }
  .mrs-kontakt-form .wpforms-field-container > div:nth-child(1),
  .mrs-kontakt-form .wpforms-field-container > div:nth-child(2){ flex:0 0 calc(50% - 8px); }
  .mrs-kontakt-form .wpforms-field-container > div:nth-child(n+3){ flex:0 0 100%; }
  .mrs-kontakt-form .wpforms-submit-container{ flex:0 0 100%; }
}

/* stopka: 'Szybki kontakt:' zolty, numer telefonu bialy (jak w oryginale) */
.mrs-contact a, .mrs-contact a:visited{ color:#FFFFFF !important; text-decoration:none; }
.mrs-contact a:hover{ color:#ECC006 !important; }

/* ================= ROZWIJANE MENU "OFERTA" (jak w oryginale) ================= */
.mrs-menu .sub-menu{ background:#F7F7F7 !important; border:0 !important; padding:0 !important; }
.mrs-menu .sub-menu li{ background:#F7F7F7 !important; }
.mrs-menu .sub-menu a,
.mrs-menu a.hfe-sub-menu-item{
  color:#000000 !important;
  background:#F7F7F7 !important;
  font-size:16px !important;
  font-weight:700 !important;
  padding:10px 20px !important;
  min-height:47px;
  display:flex; align-items:center;
}
.mrs-menu .sub-menu a:hover,
.mrs-menu a.hfe-sub-menu-item:hover{
  color:#446D36 !important;
  background:#EDEDED !important;
}
@media (max-width:767px){
  /* w menu mobilnym (rozwijanym) zostawiamy czytelny kontrast */
  .mrs-menu .sub-menu a, .mrs-menu a.hfe-sub-menu-item{ min-height:0; padding:9px 20px !important; }
}

/* hero: kontenery wewnetrzne nie moga tworzyc kontekstu pozycjonowania,
   zeby zdjecie kotwiczylo sie do calego pasa (jak w oryginale) */
@media (min-width:1025px){
  .mrs-hero .e-con:not(.mrs-hero-text){ position:static !important; }
  .mrs-hero .mrs-hero-text{ position:relative !important; z-index:2; }
  .mrs-hero-img{ position:absolute !important; right:0 !important; bottom:0 !important;
    top:auto !important; left:auto !important; margin:0 !important; width:527px !important; z-index:1; }
}