/* Green Walls - ajustari pentru Joomla 5/6 peste CSS-ul mostenit din rt_kirigami.
   Aici punem doar ce inlocuieste comportamentul MooTools/Gantry. */

/* ---------- Titlu articol individual ----------
   CSS-ul vechi (template.css) coloreaza cu bara verde titlurile din ".item-page h2",
   dar Joomla 5 randeaza titlul paginii de articol individual ca <h1> (in .page-header),
   nu <h2> - vechiul selector nu se mai potriveste. Pe lista de articole (.blog h2)
   selectorul vechi tot functioneaza (Joomla 5 pastreaza clasa "blog"), aici completam
   doar cazul lipsa. */
.item-page .page-header h1,
.com-wrapper .page-header h1,
.blog .page-header h1 {
    position: relative;
    margin: 0 -20px 15px -20px;
    padding: 0 20px;
    color: #76a226;
}
.item-page .page-header h1:before,
.com-wrapper .page-header h1:before,
.blog .page-header h1:before {
    position: absolute;
    content: '';
    width: 5px;
    height: 22px;
    left: 0;
    top: 3px;
    background-color: #76a226;
}

/* ---------- Poze in lista de blog si in articole: fara poze mai inalte decat ecranul ---------- */
.com-content-category-blog__item figure.item-image {
    float: none;
    width: 100%;
    margin: 0 0 15px;
}
.com-content-category-blog__item img {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 480px;
    margin: 0 auto;
    border-radius: 8px;
    display: block;
}
.com-content-article__body > p > img,
.com-content-article__body > img {
    width: auto !important;
    max-width: 100%;
    max-height: 80vh;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 767px) {
    .com-content-category-blog__item img { max-height: 420px; }
}

/* ---------- Articole recomandate (fostul modul de sidebar, mutat la finalul blogului) ---------- */
.mod-articlescategory.category-module.mod-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mod-articlescategory.category-module.mod-list > li {
    flex: 1 1 200px;
    background: #f4f6f1;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    padding: 16px 18px;
}
.mod-articlescategory.category-module.mod-list > li > a.mod-articles-category-title {
    display: block;
    color: #313439;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.mod-articlescategory.category-module.mod-list > li > a.mod-articles-category-title:hover {
    color: #76a226;
}
@media (max-width: 600px) {
    .mod-articlescategory.category-module.mod-list { flex-direction: column; }
}

/* ---------- Meniu dropdown (inlocuieste fusion.js) ---------- */
.menutop li.parent { position: relative; }

/* containerul e ancorat sub elementul de meniu; submeniul apare la hover (clasa gw-open pusa din JS) */
.menutop li.parent > .fusion-js-container {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    overflow: visible;
    z-index: 600000;
}
.menutop li.parent > .fusion-js-container > .fusion-js-subs {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
}
.menutop li.parent.gw-open > .fusion-js-container > .fusion-js-subs { display: block; }
.menutop .fusion-js-subs .fusion-submenu-wrapper { left: 0; display: flow-root; position: relative; }
.menutop .fusion-js-subs .fusion-submenu-wrapper > ul { float: none; margin: 0; padding: 0; }
.menutop li.parent > .fusion-js-container { top: calc(100% - 14px); }

/* FAQ e ultimul item de pe primul rand al meniului, lipit de marginea dreapta -
   submeniul lui, care se deschide normal spre dreapta, iesea din pagina. Il deschidem spre stanga. */
.menutop li.item118.parent > .fusion-js-container {
    left: auto;
    right: 0;
    width: 180px;
}

/* Nivelul 3 se deschide lateral */
.menutop .fusion-submenu-wrapper li.parent > .fusion-submenu-wrapper { position: absolute; left: 100%; top: 0; display: none; }
.menutop .fusion-submenu-wrapper li.parent.gw-open > .fusion-submenu-wrapper { display: block; }

/* ---------- Meniu mobil: buton "Meniu" + panou cu meniul complet ----------
   Pe ecrane mici ascundem lista <select> veche si afisam meniul principal ca panou vertical,
   deschis din butonul .gw-burger (creat din greenwalls.js). Submeniurile se deschid din .gw-subtoggle. */
.rt-menu-mobile { display: none !important; }
.gw-burger, .gw-subtoggle { display: none; }
@media only screen and (max-width: 767px) {
    #rt-header .rt-grid-9 { text-align: center; }
    .gw-burger {
        display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 16px; padding: 11px 20px;
        border: 1px solid #cfd8c4; border-radius: 24px; background: #fff; color: #2e3a2b;
        font: bold 15px/1 Helvetica, Arial, sans-serif; cursor: pointer;
    }
    .gw-burger-icon { position: relative; display: inline-block; width: 18px; height: 2px; background: currentColor; }
    .gw-burger-icon::before, .gw-burger-icon::after {
        content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s ease;
    }
    .gw-burger-icon::before { top: -6px; }
    .gw-burger-icon::after { top: 6px; }
    body.gw-nav-open .gw-burger-icon { background: transparent; }
    body.gw-nav-open .gw-burger-icon::before { transform: translateY(6px) rotate(45deg); }
    body.gw-nav-open .gw-burger-icon::after { transform: translateY(-6px) rotate(-45deg); }

    #rt-header .rt-menubar { display: none; text-align: left; }
    body.gw-nav-open #rt-header .rt-menubar { display: block; margin: 0 0 12px; border-top: 1px solid #e5eadf; }
    /* mediaqueries.css ascunde meniul pe mobil (absolut, invizibil, mutat in afara ecranului) */
    body.gw-nav-open #rt-header .rt-menubar {
        position: static !important; visibility: visible !important; top: auto !important; left: auto !important;
        width: auto !important; height: auto !important; overflow: visible !important;
    }
    #rt-header .rt-menubar ul,
    #rt-header .rt-menubar li { float: none !important; width: auto !important; margin: 0; padding: 0; list-style: none; }
    #rt-header .rt-menubar ul.menutop { display: block; }
    #rt-header .rt-menubar ul.menutop > li { display: block; position: relative; border-bottom: 1px solid #eef1ea; }
    #rt-header .rt-menubar .item,
    #rt-header .rt-menubar .item span { display: block; float: none; height: auto; margin: 0; padding: 0; background: none; line-height: 1.35; }
    #rt-header .rt-menubar ul.menutop > li > .item { padding: 13px 58px 13px 16px; font-size: 16px; }
    #rt-header .rt-menubar .daddyicon { display: none !important; }
    #rt-header .rt-menubar li.parent > .fusion-js-container {
        display: none !important; position: static !important; height: auto !important; width: auto !important; top: auto !important;
        float: none !important; clear: both; /* containerul are si clasa menutop, care il facea float:right */
    }
    #rt-header .rt-menubar li.parent.gw-sub-open > .fusion-js-container { display: block !important; }
    #rt-header .rt-menubar .fusion-js-subs,
    #rt-header .rt-menubar .fusion-submenu-wrapper,
    #rt-header .rt-menubar .fusion-submenu-wrapper > ul {
        display: block !important; position: static !important; width: auto !important;
        box-shadow: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; background: #f6f8f3 !important;
    }
    #rt-header .rt-menubar .fusion-submenu-wrapper li { border-top: 1px solid #e9ede4; }
    #rt-header .rt-menubar .fusion-submenu-wrapper li > .item { padding: 11px 16px 11px 30px; font-size: 15px; }
    #rt-header .rt-menubar .item span { font-size: inherit; }
    .gw-subtoggle {
        display: block; position: absolute; right: 0; top: 0; width: 52px; height: 45px;
        border: 0; border-left: 1px solid #eef1ea; background: none; cursor: pointer;
    }
    .gw-subtoggle::before {
        content: ""; display: block; margin: -4px auto 0; width: 9px; height: 9px;
        border-right: 2px solid #5b6b53; border-bottom: 2px solid #5b6b53; transform: rotate(45deg); transition: transform .2s ease;
    }
    li.gw-sub-open > .gw-subtoggle::before { margin-top: 4px; transform: rotate(-135deg); }
}

/* ---------- Breadcrumb (markup nou Joomla 5: ol.breadcrumb) ---------- */
ol.breadcrumb { list-style: none; margin: 0; padding: 0; }
ol.breadcrumb > li { display: inline-block; float: none; margin: 0; padding: 0; }
ol.breadcrumb > li.mod-breadcrumbs__divider { margin-right: 6px; }
ol.breadcrumb > li.breadcrumb-item + li.breadcrumb-item::before { content: "/"; padding: 0 8px; opacity: .6; }
ol.breadcrumb > li.mod-breadcrumbs__divider + li.breadcrumb-item::before { content: none; }
ol.breadcrumb .icon-location { font-size: 12px; opacity: .75; }

/* ---------- Accordion "Social Media" (inlocuieste RokSprocket Lists) ---------- */
.gw-social-accordion .sprocket-lists-container { list-style: none; margin: 0; padding: 0; }
.gw-social-accordion .sprocket-lists-container > li { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.08); }
.gw-social-accordion .sprocket-lists-container > li:first-child { border-top: none; }
.gw-social-accordion .sprocket-lists-title { cursor: pointer; margin: 0; }
.gw-social-accordion .sprocket-lists-item { display: none; }
.gw-social-accordion li.active > .sprocket-lists-item { display: block; }
.gw-social-accordion .sprocket-padding { padding: 6px 0 12px; }

/* ---------- Banner cookie consent ---------- */
#gw-cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999998;
    background: #333439;
    color: #e8ece2;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
    font-size: 14px;
    line-height: 1.5;
    transform: translateY(100%);
    transition: transform .3s ease;
}
#gw-cookie-banner.gw-cookie-visible { transform: translateY(0); }
.gw-cookie-text { flex: 1 1 420px; max-width: 720px; }
.gw-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gw-cookie-btn { border-radius: 24px; padding: 9px 20px; font-size: 14px; font-weight: bold; cursor: pointer; border: 2px solid #76a226; white-space: nowrap; }
.gw-cookie-btn-accept { background: #76a226; color: #fff; }
.gw-cookie-btn-accept:hover { background: #85b72b; }
.gw-cookie-btn-ghost { background: transparent; color: #e8ece2; }
.gw-cookie-btn-ghost:hover { background: rgba(255,255,255,.08); }
@media (max-width: 600px) { #gw-cookie-banner { justify-content: flex-start; } .gw-cookie-actions { width: 100%; } .gw-cookie-btn { flex: 1 1 0; text-align: center; } }

/* ---------- Antet aerisit (inlocuieste bara neagra + iconite sociale flotante) ---------- */
#rt-header {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.logo-block { padding: 26px 5px; position: relative; }
#rt-logo { width: 190px; height: 82px; }
#rt-header .menutop .item,
.menutop .item {
    color: #40433f;
    text-shadow: none;
}
#rt-header .menutop.fusion-js-container ul li > .fusion-modules.item:hover,
#rt-header .menutop .item:hover,
#rt-header .menutop li.f-mainparent-itemfocus .item,
#rt-header .menutop > li.active .item {
    color: #76a226;
}
/* ---------- Retele sociale in footer (langa "Date de contact") ---------- */
.rt-footer-social {
    display: flex;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0 20px;
}
.rt-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #cfd6c2;
    transition: background-color .15s ease, color .15s ease;
}
.rt-footer-social a:hover {
    background: #76a226;
    color: #fff;
}

/* ---------- Hero image (homepage, imediat sub antet) ---------- */
.gw-hero { margin: 0 0 20px; border-radius: 10px; overflow: hidden; }
.gw-hero img { display: block; width: 100%; height: 420px; object-fit: cover; }
@media only screen and (max-width: 767px) {
    .gw-hero img { height: 220px; }
}

/* ---------- Varietate vizuala pentru cutiile/cardurile din continutul articolelor ----------
   Multe pagini (Muschi, Licheni, Servicii Intretinere, FAQ) repeta aceeasi cutie alba cu bordura
   gri (`border: 1px solid #e0e8e0`, scrisa direct in continutul articolului) de zeci de ori -
   arata monoton/"depasit". Adaugam un accent verde sus + umbra discreta, ca sa semene cu stilul
   cardurilor "Solutiile noastre" de pe homepage, fara sa umblam la continutul articolelor. */
.item-page [style*="border: 1px solid #e0e8e0"] {
    border-top: 3px solid #76a226 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05) !important;
}
.item-page [style*="border: 1px solid #d0e4c0"] {
    border-top: 3px solid #76a226 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05) !important;
}

/* ---------- Titlu principal (inlocuieste stilul demo italic "promo1 ribbon") ---------- */
.gw-hero-title {
    display: inline-block;
    font-family: inherit;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .2px;
    color: #313439;
    font-size: clamp(22px, 4vw, 34px);
    line-height: 1.3;
    margin: 0;
}

/* ---------- Bula de chat (/assets/greenwalls-chat.js) - compacta pe mobil ---------- */
@media (max-width: 480px) {
    /* closed: the widget stretches left:12px..right:12px and would swallow taps on the "back to top" button */
    .gwc:not(.gwc--open) { right: auto; }
    .gwc-toggle {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
    }
    .gwc-toggle span { display: none; }
    .gwc-toggle::before {
        content: "";
        width: 24px;
        height: 24px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.9-.9L3 20.5l1.5-4.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/* ---------- Sigle clienti (homepage, sub "De ce sa alegi Green Walls") - carusel continuu ---------- */
.gw-clients-strip { text-align: center; padding: 30px 0 10px; }
.gw-clients-strip__label { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #8a8f85; margin: 0 0 18px; }
.gw-clients-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent);
}
.gw-clients-marquee__track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: gw-clients-marquee 60s linear infinite;
}
.gw-clients-marquee:hover .gw-clients-marquee__track { animation-play-state: paused; }
.gw-clients-marquee__track img {
    max-height: 42px;
    max-width: 120px;
    width: auto;
    height: auto;
    flex-shrink: 0;
    filter: grayscale(100%) opacity(.65);
    transition: filter .2s ease, opacity .2s ease;
}
.gw-clients-marquee__track img:hover { filter: grayscale(0%) opacity(1); }
@keyframes gw-clients-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .gw-clients-marquee__track { animation: none; }
}
@media (max-width: 600px) {
    .gw-clients-marquee__track { gap: 28px; }
    .gw-clients-marquee__track img { max-height: 32px; max-width: 90px; }
}

/* ---------- Diverse ---------- */
.clear { clear: both; }
.rt-totop { cursor: pointer; }

/* ---------- Text si titluri in paginile de articol ----------
   gantry-core.css pune textul la 12px, iar joomla-core.css face h2 = 2.5em (30px),
   mai mare decat titlul paginii (h1). Aliniem continutul articolelor la stilul
   folosit inline pe homepage: text 16px / 1.8, h2 22px verde inchis cu linie
   verde deschis dedesubt, subtitluri verde inchis. Stilurile inline raman prioritare. */
.item-page .com-content-article__body { font-size: 16px; line-height: 1.8; }
.component-content .item-page .com-content-article__body h2,
.item-page .com-content-article__body h2 {
  font-size: 22px; line-height: 1.3; color: #1a2e1c;
  margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid #c8e6c9;
}
.item-page .com-content-article__body h3 { font-size: 18px; line-height: 1.4; color: #1a2e1c; margin: 1.5em 0 .5em; }
.item-page .com-content-article__body h4 { font-size: 16px; line-height: 1.4; color: #1a2e1c; }
/* Lungime de rand ~95-100 caractere pentru paragrafe si liste; titlurile, casetele,
   tabelele si pozele raman pe toata latimea. */
.item-page .com-content-article__body > p:not(:has(img)),
.item-page .com-content-article__body > ul,
.item-page .com-content-article__body > ol { max-width: 820px; }
@media (max-width: 767px) {
  .item-page .com-content-article__body { font-size: 15px; }
  .component-content .item-page .com-content-article__body h2,
  .item-page .com-content-article__body h2 { font-size: 20px; }
  .item-page .com-content-article__body h3 { font-size: 17px; }
}

/* ---------- Contact rapid pe telefon (Suna / WhatsApp) ----------
   Doar pe ecrane mici, fix in dreapta jos. Chatul "Ai o intrebare?" sta in stanga jos
   pe mobil, iar bannerul de cookie-uri are z-index mai mare si le acopera cat e deschis. */
.gw-mobile-cta { display: none; }
@media (max-width: 767px) {
  .gw-mobile-cta { display: flex; gap: 8px; position: fixed; right: 12px; bottom: 12px; z-index: 99990; }
  .gw-mcta {
    display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 22px;
    font-size: 15px; font-weight: bold; color: #fff !important; text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
  }
  .gw-mcta-call { background: #2e6b3e; }
  .gw-mcta-wa { background: #1f9d55; }
  /* spatiu la finalul paginii ca butoanele sa nu acopere subsolul */
  #rt-copyright { padding-bottom: 64px; }
}

/* ---------- Subsol: date firma si linkuri legale ---------- */
.gw-firma, .gw-legal { font-size: 13px; line-height: 1.6; opacity: .85; margin-top: 8px; }
.gw-cookie-link { color: #b9d98a; text-decoration: underline; }

/* ---------- Antet pe un singur rand (ecrane de la 1200px) ----------
   Logo-ul are 190px, dar coloana lui avea 300px; restul spatiului il dam meniului,
   iar textul meniului e putin mai mic, ca toate cele 10 elemente sa incapa pe un rand. */
@media only screen and (min-width: 1200px) {
    #rt-header .rt-grid-3 { width: 210px !important; max-width: 210px !important; }
    #rt-header .rt-grid-9 { width: 990px !important; max-width: 990px !important; }
    #rt-header ul.menutop > li { margin-right: 2px !important; }
    #rt-header ul.menutop > li > .item > span { padding-left: 9px !important; padding-right: 9px !important; font-size: 15px !important; }
}

/* Legenda de sub pozele din articole (span dupa img): centrata sub poza */
.com-content-article__body img + span {
  display: block;
  text-align: center;
}