/* =========================================================
   PHU ROGAL — custom.css
   Design tokens + component styling on top of UIkit 3
   ========================================================= */

:root{
  --c-green-dark:   #4b953c;
  --c-green-light:  #87bc3a;
  --c-gray:         #bfb6b1;
  --c-ink:          #202a1c;
  --c-ink-soft:     #4d564a;
  --c-paper:        #ffffff;
  --c-paper-soft:   #f6f5f2;
  --c-border:       #e4e1da;

  --font-head: 'Oswald', Arial, sans-serif;
  --font-body: 'Work Sans', Arial, sans-serif;

  --nav-height: 84px;
  --radius: 6px;
  --shadow-soft: 0 10px 30px rgba(32, 42, 28, 0.08);
  --shadow-card: 0 14px 34px rgba(32, 42, 28, 0.14);
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

body{
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,
.section-title{
  font-family: var(--font-head);
  font-weight:600;
  letter-spacing:.2px;
  color: var(--c-ink);
}

a{ color: var(--c-green-dark); }
a:hover{ color: var(--c-green-light); }

::selection{ background: var(--c-green-light); color:#fff; }

/* Sections need to clear the sticky nav when jumped-to */
section[id]{
  scroll-margin-top: var(--nav-height);
}

.uk-container{ max-width:1200px; }

/* ---------- Section headings ---------- */
.section-heading{
  margin-bottom: 44px;
}
.section-heading .section-title{
  font-size: 2.1rem;
  line-height:1.15;
  margin:0 0 12px;
  position:relative;
  display:inline-block;
  padding-bottom:16px;
}
.section-heading .section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:56px; height:4px;
  background: linear-gradient(90deg, var(--c-green-dark), var(--c-green-light));
  border-radius:4px;
}
.section-heading p{
  color: var(--c-ink-soft);
  max-width:640px;
  font-size:1.05rem;
  margin:0;
}
.section-heading.uk-text-center .section-title::after{
  left:50%; transform:translateX(-50%);
}
.section-heading.uk-text-center p{ margin-left:auto; margin-right:auto; }

.bg-soft{ background: var(--c-paper-soft); }

/* =========================================================
   NAVBAR
   ========================================================= */
.site-nav{
  background: var(--c-paper);
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-nav.nav-scrolled{
  box-shadow: var(--shadow-soft);
  border-bottom-color: var(--c-border);
}
.site-nav .uk-navbar-container{ background:transparent !important; }

.nav-logo img{
  height:44px;
  width:auto;
  display:block;
}

.nav-links > li > a{
  font-family: var(--font-head);
  font-size:0.98rem;
  font-weight:500;
  letter-spacing:.3px;
  color: var(--c-ink);
  padding:8px 0;
  margin:0 18px;
  position:relative;
  transition:color .2s ease;
}
.nav-links > li > a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background: var(--c-green-dark);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-links > li > a:hover,
.nav-links > li.uk-active > a{
  color: var(--c-green-dark);
}
.nav-links > li > a:hover::after,
.nav-links > li.uk-active > a::after{
  transform:scaleX(1);
}

.nav-phone{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-head);
  font-weight:500;
  color: var(--c-ink);
  white-space:nowrap;
}
.nav-phone .nav-phone-icon{
  width:38px; height:38px;
  border-radius:50%;
  background: var(--c-green-dark);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.nav-phone small{
  display:block;
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size:.72rem;
  font-weight:400;
}

.nav-toggle-icon{
  font-size:22px;
  color: var(--c-ink);
}

/* =========================================================
   HERO / SLIDESHOW
   ========================================================= */
.hero{
  position:relative;
}
.hero .uk-slideshow-items{
  height:78vh;
  min-height:460px;
  max-height:720px;
}
.hero-slide{
  width:100%; height:100%;
  background-size:cover;
  background-position:center;
}
.hero-slide-1{ background-image:url('../img/hero-1.jpg'); }
.hero-slide-2{ background-image:url('../img/hero-2.jpg'); }
.hero-slide-3{ background-image:url('../img/hero-3.jpg'); }

.hero-tint{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,28,17,.55) 0%, rgba(20,28,17,.25) 35%, rgba(20,28,17,.75) 100%);
}
.hero-content{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 0 0 64px;
  color:#fff;
}
.hero-content .hero-eyebrow{
  color: var(--c-green-light);
  font-family: var(--font-head);
  font-weight:500;
  font-size:1.05rem;
  margin:0 0 10px;
}
.hero-content h1{
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.08;
  color:#fff;
  margin:0 0 18px;
  max-width:820px;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.hero-content p{
  font-size:1.08rem;
  max-width:560px;
  color: rgba(255,255,255,.92);
  margin:0 0 30px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.btn-primary{
  background: var(--c-green-dark);
  color:#fff !important;
  border:none;
  font-family: var(--font-head);
  font-weight:500;
  letter-spacing:.3px;
  padding:0 30px;
  height:52px;
  line-height:52px;
  border-radius: var(--radius);
  transition: background .2s ease, transform .2s ease;
}
.btn-primary:hover{
  background: var(--c-green-light);
  transform: translateY(-2px);
}
.btn-ghost{
  background: rgba(255,255,255,.08);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.65);
  font-family: var(--font-head);
  font-weight:500;
  letter-spacing:.3px;
  padding:0 30px;
  height:52px;
  line-height:52px;
  border-radius: var(--radius);
  backdrop-filter: blur(2px);
  transition: background .2s ease, transform .2s ease;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.2);
  color:#fff !important;
  transform: translateY(-2px);
}

.hero .uk-dotnav > * > *{
  border-color: rgba(255,255,255,.7);
}
.hero .uk-dotnav > .uk-active > *{
  background-color: var(--c-green-light);
  border-color: var(--c-green-light);
}

/* =========================================================
   USŁUGI — service cards
   ========================================================= */
.service-card{
  background: var(--c-paper);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(32,42,28,.18);
}
.service-card .service-media{
  position:relative;
  height:230px;
  overflow:hidden;
}
.service-card .service-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.service-card:hover .service-media img{
  transform: scale(1.06);
}
.service-card .service-icon{
  position:absolute;
  right:24px;
  top:230px;
  transform:translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  background: var(--c-green-dark);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  box-shadow: 0 8px 18px rgba(75,149,60,.4);
  z-index:2;
}
.service-card .service-body{
  padding:40px 28px 28px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.service-card h3{
  font-size:1.4rem;
  margin:0 0 14px;
}
.service-card ul{
  list-style:none;
  margin:0; padding:0;
  flex:1;
}
.service-card ul li{
  position:relative;
  padding:8px 0 8px 30px;
  color: var(--c-ink-soft);
  border-top:1px solid var(--c-border);
  font-size:.98rem;
}
.service-card ul li:first-child{ border-top:none; }
.service-card ul li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color: var(--c-green-dark);
  position:absolute;
  left:2px; top:9px;
  font-size:.78rem;
}

/* =========================================================
   O NAS
   ========================================================= */
.about-media{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-card);
}
.about-media img{ width:100%; display:block; }
.about-badge{
  position:absolute;
  left:24px; bottom:24px;
  background: var(--c-paper);
  border-radius: var(--radius);
  padding:18px 24px;
  box-shadow: var(--shadow-card);
  font-family: var(--font-head);
}
.about-badge .num{
  font-size:2rem;
  color: var(--c-green-dark);
  font-weight:600;
  line-height:1;
  display:block;
}
.about-badge .lbl{
  font-family: var(--font-body);
  font-size:.82rem;
  color: var(--c-ink-soft);
}

.about-text p{
  color: var(--c-ink-soft);
  font-size:1.03rem;
  line-height:1.75;
}

.feature-list{
  list-style:none;
  margin:30px 0 0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.95rem;
  color: var(--c-ink);
}
.feature-list .f-icon{
  flex:none;
  width:42px; height:42px;
  border-radius:50%;
  background: var(--c-paper-soft);
  border:1px solid var(--c-border);
  color: var(--c-green-dark);
  display:flex; align-items:center; justify-content:center;
}
.feature-list .f-icon i{
  font-size:1.15rem;
  line-height:1;
}

/* =========================================================
   GALERIA
   ========================================================= */
.gallery-item{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .5s ease;
}
.gallery-item .gallery-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(75,149,60,0) 45%, rgba(20,28,17,.65) 100%);
  opacity:0;
  transition: opacity .3s ease;
  display:flex;
  align-items:flex-end;
  padding:16px;
}
.gallery-item .gallery-overlay .fa-expand{
  color:#fff;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.6);
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-left:auto;
}
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item:hover .gallery-overlay{ opacity:1; }

/* =========================================================
   KONTAKT
   ========================================================= */
.contact-panel{
  background: var(--c-ink);
  background: linear-gradient(160deg, #223019 0%, #33461f 100%);
  color:#fff;
  border-radius: var(--radius);
  padding:44px;
  height:100%;
}
.contact-panel h3{ color:#fff; font-size:1.5rem; margin-bottom:26px; }
.contact-list{ list-style:none; margin:0 0 30px; padding:0; }
.contact-list li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.contact-list li:first-child{ border-top:none; }
.contact-list .c-icon{
  flex:none;
  width:42px; height:42px;
  border-radius:50%;
  background: rgba(255,255,255,.1);
  color: var(--c-green-light);
  display:flex; align-items:center; justify-content:center;
}
.contact-list .c-label{
  display:block;
  font-size:.76rem;
  text-transform:none;
  color: rgba(255,255,255,.6);
  margin-bottom:2px;
}
.contact-list a{ color:#fff; }
.contact-list a:hover{ color: var(--c-green-light); }

.social-row{ display:flex; gap:12px; }
.social-row a{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff !important;
  transition: background .2s ease, border-color .2s ease;
}
.social-row a:hover{ background: var(--c-green-dark); border-color: var(--c-green-dark); }

.contact-form{
  background: var(--c-paper);
  border-radius: var(--radius);
  padding:44px;
  height:100%;
  box-shadow: var(--shadow-card);
}
.contact-form h3{ font-size:1.5rem; margin-bottom:8px; }
.contact-form > p{ color: var(--c-ink-soft); margin-bottom:26px; }

.input-icon{ position:relative; margin-bottom:18px; }
.input-icon i{
  position:absolute;
  left:16px; top:50%;
  transform:translateY(-50%);
  color: var(--c-gray);
  font-size:.95rem;
}
.input-icon textarea ~ i{ top:22px; transform:none; }
.input-icon .uk-input,
.input-icon .uk-textarea{
  padding-left:44px;
  border:1px solid var(--c-border);
  background: var(--c-paper-soft);
  border-radius: var(--radius);
}
.input-icon .uk-input:focus,
.input-icon .uk-textarea:focus{
  border-color: var(--c-green-dark);
  background:#fff;
}
.honey{ position:absolute; left:-9999px; top:-9999px; }

.form-note{ font-size:.82rem; color: var(--c-ink-soft); margin-top:10px; }

/* Map */
.map-wrap{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  line-height:0;
}
.map-wrap iframe{ filter: grayscale(15%) contrast(1.02); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--c-ink);
  color: rgba(255,255,255,.75);
  padding:22px 0;
  font-size:.88rem;
}
.site-footer a{ color: rgba(255,255,255,.9); }
.site-footer a:hover{ color: var(--c-green-light); }

/* Back to top */
.uk-totop{
  color:#fff;
  background: var(--c-green-dark);
  width:46px; height:46px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(75,149,60,.45);
  opacity:0;
  visibility:hidden;
  transform: translateY(12px);
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease, visibility 0s linear .25s;
}
.uk-totop.is-visible{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  pointer-events:auto;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.uk-totop:hover{ background: var(--c-green-light); color:#fff; transform: translateY(-3px); }

/* =========================================================
   MOBILE OFFCANVAS MENU
   (UIkit's offcanvas defaults to a dark theme with white text;
   we run it on a white background, so colors need overriding)
   ========================================================= */
.uk-offcanvas-bar{
  background: var(--c-paper) !important;
  color: var(--c-ink) !important;
}
.uk-offcanvas-bar .uk-nav-default > li > a{
  color: var(--c-ink) !important;
}
.uk-offcanvas-bar .uk-nav-default > li > a:hover{
  color: var(--c-green-dark) !important;
}
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a{
  color: var(--c-green-dark) !important;
}
.uk-offcanvas-close{
  color: var(--c-ink) !important;
}
.uk-offcanvas-close:hover{
  color: var(--c-green-dark) !important;
}

@media (max-width: 959px){
  .feature-list{ grid-template-columns:1fr; }
  .hero-content{ padding-bottom:40px; }
  .contact-panel, .contact-form{ padding:30px; }
}
@media (max-width: 639px){
  .nav-logo img{ height:36px; }
  .hero .uk-slideshow-items{ height:88vh; }
  .about-badge{ left:14px; bottom:14px; padding:12px 16px; }
  .about-badge .num{ font-size:1.5rem; }
  .hero-slide-1{ background-image:url('../img/hero-1-mobile.jpg'); }
  .hero-slide-2{ background-image:url('../img/hero-2-mobile.jpg'); }
  .hero-slide-3{ background-image:url('../img/hero-3-mobile.jpg'); }
}
/* =========================================================
   POWIADOMIENIA (UIkit notification) — formularz kontaktowy
   ========================================================= */
.uk-notification{
  width:min(420px, calc(100vw - 32px));
  margin-top:calc(var(--nav-height) + 8px);
}
.uk-notification .uk-notification-message{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 44px 16px 16px;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:.96rem;
  line-height:1.45;
  border-radius:var(--radius);
  border-left:5px solid var(--c-green-dark);
  box-shadow:0 18px 40px rgba(32,42,28,.22);
}
.uk-notification .uk-notification-message-success{
  border-left-color:var(--c-green-dark);
  color:var(--c-ink);
}
.uk-notification .uk-notification-message-danger{
  border-left-color:#c0392b;
  color:var(--c-ink);
}
.uk-notification .uk-notification-close{
  display:none !important;
}
.uk-notification .uk-notification-message{
  cursor:pointer;
  padding-right:16px;
}

.notif-icon{
  flex:none;
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:.95rem;
}
.notif-icon.is-ok{ background:var(--c-green-dark); }
.notif-icon.is-err{ background:#c0392b; }