/* /css/style.css — lżejsza typografia (Inter), delikatniejszy kolor tekstu, drobne korekty wag */

/* KOLORY, VARS */
:root{
  --orange-1:#FFA500;
  --orange-2:#FF8C00;
  --cream:#DEB887;
  --text:#1f2937;   /* delikatniejsza, mniej „ostra” czerń */
  --muted:#636b74;
  --border:#e9e9e9;
  --shadow:0 8px 24px rgba(0,0,0,.08);

  --nav-fs: 0.95rem;
  --nav-pad-y: 8px;
  --nav-pad-x: 12px;
  --nav-gap: 4px;
  --logo-w: 190px;
  --logo-h: 64px;

  /* czasy */
  --intro-1: .5s;
  --intro-2: .6s;
  --intro-3: .7s;

  /* animacje „po odświeżeniu” */
  --reveal-duration: .5s;
  --reveal-stagger: 60ms; /* odstęp między kolejnymi elementami */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* profesjonalny, nowoczesny stack */
  font-family: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans",
               "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  font-weight:400;
}

/* preferencje dostępności */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* === HEADER / NAV === */
.top-accent{height:6px; background:linear-gradient(90deg,var(--orange-1),var(--orange-2))}
.site-header{background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1000}
.header-container{max-width:1200px; margin:0 auto; padding:0 16px 10px}

.auth-bar{display:flex; align-items:center; justify-content:flex-end; padding:8px 0 6px; gap:8px; min-height:36px}
.auth-actions{display:flex; align-items:center; gap:8px}
.auth-greeting{cursor:default; font-weight:500}
.nav-strong{font-weight:600}

.brand-and-nav{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:8px 0 8px; border-top:1px solid var(--border)
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo-link{display:inline-flex; align-items:center}
.logo-img{width:var(--logo-w); height:var(--logo-h); object-fit:contain; transition:transform .25s ease}
.logo-img:hover{transform:scale(1.03)}
.brand-text{min-width:0}
.brand-title{margin:0; font-weight:600; letter-spacing:.2px; font-size:1.06rem; color:var(--text)}
.brand-subtitle{margin:1px 0 0; font-size:.85rem; color:var(--muted); font-weight:400}

.nav-bar{justify-self:start; background:#fff}
.nav-toggle{display:none; background:transparent; border:none; font-size:1.5rem; cursor:pointer; justify-self:end}
.nav-nowrap{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.nav-nowrap::-webkit-scrollbar{height:8px}
.nav-nowrap::-webkit-scrollbar-thumb{background:#ddd; border-radius:8px}
.nav-nowrap:hover::-webkit-scrollbar-thumb{background:#ccc}
.nav-list{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--nav-gap); flex-wrap:nowrap; white-space:nowrap}

.nav-link, .btn-primary, .btn-ghost{
  display:inline-block; text-decoration:none; cursor:pointer; padding:var(--nav-pad-y) var(--nav-pad-x);
  border-radius:10px; transition:background-color .2s ease, box-shadow .2s ease, filter .2s ease; /* brak transform */
  position:relative; font-size:var(--nav-fs); line-height:1.2;
}
.nav-link{color:var(--text); background:#fff; border:1px solid transparent; font-weight:500}
.nav-link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:1px; border-radius:1px;
  background:linear-gradient(90deg,var(--orange-1),var(--orange-2)); transform:scaleX(0); transform-origin:left; transition:transform .22s ease
}
.nav-link:hover{border-color:var(--border); background:#fafafa}
.nav-link:hover::after{transform:scaleX(1)}
.nav-muted{color:#555}

.btn-primary{color:#fff; background:linear-gradient(135deg,var(--orange-1),var(--orange-2)); box-shadow:var(--shadow); border:0; font-weight:600}
.btn-primary:hover{filter:brightness(1.03); box-shadow:0 10px 26px rgba(255,165,0,.22)} /* bez przesunięcia */
.btn-ghost{color:var(--orange-2); border:2px solid var(--orange-2); background:#fff; font-weight:600}
.btn-ghost:hover{background:rgba(255,140,0,.06)}

/* === HERO / MAIN === */
.hero{padding:34px 16px}
.hero-content{
  max-width:1000px; margin:0 auto; background:linear-gradient(145deg,var(--cream),#f5f5dc);
  border-radius:18px; padding:28px; box-shadow:var(--shadow)
}
.hero h2{margin:0 0 8px; font-size:1.8rem; color:var(--text); font-weight:600}
.hero p{margin:0 0 16px; color:#444; font-weight:400}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}

main{max-width:1200px; margin:18px auto; padding:0 16px}
.section{margin:30px 0}
.section > h2{
  margin:0 0 16px; font-size:1.6rem; font-weight:600; color:var(--orange-2);
  padding-bottom:8px; border-bottom:3px solid var(--orange-1); position:relative
}
.section > h2::after{
  content:""; position:absolute; left:0; bottom:-3px; width:54px; height:3px;
  background:linear-gradient(90deg,var(--orange-1),var(--orange-2)); border-radius:2px
}

/* Search */
#search{
  width:100%; max-width:520px; background:#fff; border:2px solid var(--cream); border-radius:12px;
  padding:12px 14px; font-size:1rem; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; color:var(--text)
}
#search:focus{outline:none; border-color:var(--orange-2); box-shadow:0 0 0 4px rgba(255,140,0,.12)}

/* Cards */
#dogs-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-bottom:26px
}
.dog-card{
  background:linear-gradient(145deg,var(--cream),#f5f5dc);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .25s ease, opacity .25s ease; position:relative
}
.dog-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--orange-1),var(--orange-2)); opacity:0; transition:opacity .2s ease
}
.dog-card:hover{ /* bez przesunięcia */
  box-shadow:0 14px 36px rgba(255,165,0,.18);
}
.dog-card:hover::before{opacity:1}
.dog-card img{width:100%; height:210px; object-fit:cover; display:block}
.dog-card h3{margin:12px 12px 6px; font-size:1.15rem; color:var(--orange-2); font-weight:600}
.dog-card p{margin:0 12px 12px; color:#444}
.dog-card a{display:block; text-align:center; padding:12px; font-weight:600; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,var(--orange-1),var(--orange-2))}

/* Paginacja */
.pagination{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:18px 0 0}
.pagination a{
  text-decoration:none; padding:9px 12px; border-radius:10px; color:#fff; background:linear-gradient(135deg,var(--orange-1),var(--orange-2));
  font-weight:600; transition:box-shadow .18s ease, filter .18s ease; box-shadow:0 6px 18px rgba(255,165,0,.2)
}
.pagination a:hover{ /* bez przesunięcia */
  box-shadow:0 8px 22px rgba(255,165,0,.25); filter:brightness(1.03);
}


form h3{margin:0 0 6px; font-weight:600; color:var(--text)}
label{display:block; margin:14px 0 6px; font-weight:500; color:var(--orange-2)}
input, textarea, select{
  width:100%; padding:12px; border-radius:12px; border:2px solid #d4af37; background:#fff; font-size:1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; color:var(--text)
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--orange-2); box-shadow:0 0 0 4px rgba(255,140,0,.12)}


/* Statystyki */
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.stat-card{background:linear-gradient(145deg,var(--cream),#f5f5dc); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.stat-card h3{margin:0 0 4px; color:var(--text); font-weight:600}
.stat-card .stat{font-size:1.8rem; font-weight:700; color:var(--orange-2); margin:0 0 6px}
.stat-card .link{color:var(--orange-2); font-weight:600; text-decoration:none}
.stat-card .link:hover{text-decoration:underline}

/* Mapa */
#map{
  min-height:320px; border:2px solid var(--cream); border-radius:16px; background:#f8f8f8; box-shadow:0 6px 18px rgba(222,184,135,.25);
  display:grid; place-items:center
}
.map-empty{color:#444; text-align:center; padding:20px}

/* Komunikaty */
.error{color:#b42318; background:rgba(180,35,24,.08); border-left:5px solid #b42318; padding:12px; border-radius:10px}
.success{color:#1f7a34; background:rgba(31,122,52,.08); border-left:5px solid #1f7a34; padding:12px; border-radius:10px}

/* === FOOTER === */
.site-footer{margin-top:40px; background:linear-gradient(135deg,#2c3e50,#34495e); color:#ecf0f1}
.footer-content{
  max-width:1200px; margin:0 auto; padding:30px 16px; display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.footer-section h3{margin:0 0 10px; color:var(--orange-1); font-weight:600}
.footer-section p{margin:0}
.footer-section ul{list-style:none; padding:0; margin:0}
.footer-section li{margin:8px 0}
.footer-section a{color:#bdc3c7; text-decoration:none}
.footer-section a:hover{color:#f0ad4e}
.footer-bottom{text-align:center; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); color:#bdc3c7}

/* === KEYFRAMES + reveal === */
@keyframes fadeUp { from {opacity:0; transform:translateY(12px)} to {opacity:1; transform:translateY(0)} }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes revealUp { from {opacity:0; transform:translateY(10px)} to {opacity:1; transform:none} }

/* startowy stan – dopóki JS nie doda .in */
html.anim-load .reveal{
  opacity:0;
  transform:translateY(8px);
  will-change: opacity, transform;
}

/* wejście elementu */
html.anim-load .reveal.in{
  animation: revealUp var(--reveal-duration) ease-out both;
  animation-delay: var(--reveal-delay, 0s);
}

/* intro dla kluczowych bloków */
html.anim-load .site-header { animation: fadeIn var(--intro-1) ease-out both }
html.anim-load .hero .hero-content { animation: fadeUp var(--intro-2) ease-out both }
html.anim-load main .section { animation: fadeUp var(--intro-3) ease-out both }

/* === RESPONSYWNOŚĆ === */
@media (max-width: 1024px){
  :root{ --nav-fs: .9rem; --nav-pad-y: 7px; --nav-pad-x: 10px; --logo-w:170px; --logo-h:58px }
  .brand-title{font-size:1rem}
  .brand-subtitle{font-size:.8rem}
}
@media (max-width: 880px){
  .nav-toggle{display:inline-block}
  .brand-and-nav{position:relative; grid-template-columns:auto auto 1fr}
  .nav-bar{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
    display:none; max-width:100%; z-index:1001
  }
  .nav-bar.active{display:block}
  .nav-list{flex-direction:column; align-items:stretch; padding:10px; white-space:normal}
  .header-container{padding-bottom:16px}
  .auth-bar{padding:8px 0}
}

/* ukrycie tylko-wizualne */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}