/*
 * Roberto Laiptai – Elementor widgets.
 * 1:1 with the source SEO pages, but every rule is scoped to `.rl-page`
 * so the widget renders identically without leaking styles into the theme.
 */

:root{
  --brown-900:#2e2008;
  --brown-800:#3b2a10;
  --brown-700:#4a3413;
  --brown-acc:#6b4c1c;
  --tan:#c08e52;
  --tan-soft:#d8b285;
  --cream:#f0efe8;
  --white:#ffffff;
  --text:#4a4a45;
  --heading:#503a14;
}

.rl-page,.rl-page *{margin:0;padding:0;box-sizing:border-box}
.rl-page{font-family:'Source Sans 3',sans-serif;font-size:17px;line-height:1.7;color:var(--text);background:var(--cream)}
.rl-page h1,.rl-page h2,.rl-page h3{font-family:'Playfair Display',serif;color:var(--heading);line-height:1.25}
.rl-page a{color:var(--brown-acc)}
.rl-page .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* Hero */
.rl-page .hero{padding:96px 24px 104px;text-align:center;color:#fff}
.rl-page .hero h1{color:#fff;font-size:clamp(30px,4.5vw,46px);max-width:860px;margin:0 auto 18px}
.rl-page .hero p{max-width:680px;margin:0 auto;color:#e8dfd0;font-size:18px}

/* Per-page hero background (matches each source page) */
.rl-page--moletai .hero{background:linear-gradient(rgba(46,32,8,.78),rgba(46,32,8,.78)),radial-gradient(circle at 75% 75%, #6b4c1c, #2e2008 70%)}
.rl-page--vilnius .hero{background:linear-gradient(rgba(46,32,8,.78),rgba(46,32,8,.78)),radial-gradient(circle at 25% 70%, #6b4c1c, #2e2008 70%)}
.rl-page--laiptu-gamyba .hero{background:linear-gradient(rgba(46,32,8,.78),rgba(46,32,8,.78)),radial-gradient(circle at 30% 20%, #6b4c1c, #2e2008 70%)}
.rl-page--laiptu-irengimas .hero{background:linear-gradient(rgba(46,32,8,.78),rgba(46,32,8,.78)),radial-gradient(circle at 70% 30%, #6b4c1c, #2e2008 70%)}
.rl-page--mediniai-laiptai .hero{background:linear-gradient(rgba(46,32,8,.78),rgba(46,32,8,.78)),radial-gradient(circle at 50% 80%, #6b4c1c, #2e2008 70%)}

/* Service/area pages use a slightly narrower hero heading */
.rl-page--laiptu-gamyba .hero h1,
.rl-page--laiptu-irengimas .hero h1,
.rl-page--mediniai-laiptai .hero h1{max-width:820px}

/* Sections */
.rl-page section{padding:70px 0}
.rl-page .kicker{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--tan);font-weight:700;margin-bottom:10px}
.rl-page h2{font-size:clamp(24px,3vw,32px);margin-bottom:18px}
.rl-page h3{font-size:20px;margin:26px 0 10px}
.rl-page p+p{margin-top:14px}
.rl-page .lead{font-size:18.5px}
.rl-page ul.list{margin:14px 0 0 22px}
.rl-page ul.list li{margin-bottom:8px}
.rl-page .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

/* Rich-text (Elementor WYSIWYG) blocks – keep the source page styling
   regardless of which tags/classes the editor outputs. */
.rl-page .rl-rich h3{font-family:'Playfair Display',serif;color:var(--heading);line-height:1.25;font-size:20px;margin:26px 0 10px}
.rl-page .rl-rich h3:first-child{margin-top:0}
.rl-page .rl-rich p{margin:0}
.rl-page .rl-rich p+p{margin-top:14px}
.rl-page .rl-rich ul,.rl-page .rl-rich ol{margin:14px 0 0 22px}
.rl-page .rl-rich li{margin-bottom:8px}
.rl-page .rl-rich a{color:var(--brown-acc)}

.rl-page .band{background:var(--white);border-top:1px solid #e3e0d4;border-bottom:1px solid #e3e0d4}

/* Steps (gamyba / irengimas) */
.rl-page .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.rl-page .step{background:var(--white);border:1px solid #e6e2d5;padding:26px 22px;position:relative}
.rl-page .step b{display:block;font-family:'Playfair Display',serif;font-size:34px;color:var(--tan);margin-bottom:8px}
.rl-page .step h3{margin:0 0 8px;font-size:18px}
.rl-page .step p{font-size:15.5px}

/* Wood types (mediniai-laiptai) */
.rl-page .wood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.rl-page .wood{background:var(--white);border:1px solid #e6e2d5;border-top:4px solid var(--tan);padding:28px 24px}
.rl-page .wood h3{margin:0 0 10px}
.rl-page .wood p{font-size:15.5px}

/* FAQ */
.rl-page .faq-item{background:var(--white);border:1px solid #e6e2d5;margin-bottom:12px}
.rl-page .faq-q{width:100%;text-align:left;background:none;border:0;padding:18px 54px 18px 22px;font-family:'Playfair Display',serif;font-size:18px;color:var(--heading);cursor:pointer;position:relative}
.rl-page .faq-q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--tan);transition:transform .25s}
.rl-page .faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.rl-page .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.rl-page .faq-a p{padding:0 22px 18px;font-size:16px}

/* Link cards */
.rl-page .link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px}
.rl-page .link-card{display:block;background:var(--white);border:1px solid #e6e2d5;border-left:4px solid var(--tan);padding:18px 20px;text-decoration:none;color:var(--heading);font-family:'Playfair Display',serif;font-size:18px;transition:transform .2s, box-shadow .2s}
.rl-page .link-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(60,42,16,.12)}
.rl-page .link-card small{display:block;font-family:'Source Sans 3',sans-serif;color:var(--text);font-size:14px;margin-top:4px}

/* Areas (moletai / vilnius) */
.rl-page .areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rl-page .areas span{background:var(--white);border:1px solid #e0dccc;padding:8px 16px;font-size:15px;color:var(--brown-acc)}

/* CTA */
.rl-page .cta{background:var(--tan);text-align:center;padding:64px 24px;color:#fff}
.rl-page .cta h2{color:#fff;margin-bottom:14px}
.rl-page .cta p{max-width:560px;margin:0 auto 26px;color:#fdf6ec}
.rl-page .btn{display:inline-block;background:var(--brown-800);color:#fff;text-decoration:none;padding:14px 34px;letter-spacing:1.5px;text-transform:uppercase;font-size:14px;font-weight:700;transition:background .2s}
.rl-page .btn:hover{background:var(--brown-900)}

/* Reveal-on-scroll animation */
.rl-page .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.rl-page .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:920px){.rl-page .steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .rl-page .two-col{grid-template-columns:1fr}
  .rl-page .wood-grid{grid-template-columns:1fr}
}
@media(max-width:540px){.rl-page .steps{grid-template-columns:1fr}}