/*
  HERMES - Zarządzanie Apartamentami
  Author: PixelShark.eu
*/

/* ZMIENNE */
:root{
  --bg-color:#FFFFFF;
  --bg-color-alt:#1A202C;
  --text-color:#1A202C;
  --text-color-light:#F8F9FA;
  --accent-color:#C09553;
  --line-color:#d9d3c9;
  --font-body:'Montserrat',sans-serif;

  --header-blur:10px;
  --header-tint: rgba(255,255,255,.92); /* Zwiększona czytelność tła */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background-color:var(--bg-color);
  color:var(--text-color);
  line-height:1.6;
  overflow-x:hidden;
  cursor:auto; /* systemowy kursor */
}
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
h1,h2,h3,h4,h5,h6{font-family:var(--font-body);font-weight:700}

/* (Wyłączone) kółko kursora – jeśli zostało w HTML, ukryj */
.cursor{display:none !important}

/* PRELOADER */
#preloader{
  position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:10000;
  background-color:var(--bg-color-alt);
}
.preloader-svg{transform:rotate(-90deg)}
.preloader-circle-bg{fill:none;stroke:#2a3342;stroke-width:5}
.preloader-circle{fill:none;stroke:var(--accent-color);stroke-width:5;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:draw 2s ease-in-out forwards}
.preloader-text{fill:var(--text-color-light);font-family:var(--font-body);font-weight:700;font-size:40px;text-anchor:middle;transform-origin:center;transform:rotate(90deg);opacity:0;animation:fadeIn 1s ease-in forwards .5s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

/* ==================== HEADER / NAV ==================== */
.site-header{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:9000;
  background:transparent;
  transition: background .3s ease, border-color .3s ease;
}
.nav-bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:64px;
}
.brand{display:none !important}

.nav-center{
  grid-column: 2 / 3;
  justify-self: center;
  position:relative;
  display:flex; gap: 2.5rem; /* Zwiększony odstęp */
  justify-content:center; align-items:center;
}
.nav-link{
  text-decoration:none; font-weight:500; letter-spacing:.04em;
  color:#fff; opacity:.95; position:relative; transition:opacity .2s ease, color .2s ease;
}
.nav-link:hover{opacity:1}
/* Usunięto .nav-link.is-active::after - teraz linia jest kontrolowana przez JS dla spójności */

/* Hamburger po prawej */
.nav-toggle{
  justify-self:end;
  width:42px; height:36px; display:none; place-items:center; border:none; background:transparent;
  grid-column: 3 / 4;
  z-index: 9001; /* Zawsze nad tłem menu mobilnego */
}
.nav-toggle .nav-toggle-bar{
  display:block; width:28px; height:2px; background:#fff; margin:6px 0; transition:transform .3s ease, opacity .3s ease, background .2s ease;
}
body.nav-open #navToggle[aria-expanded="true"] .nav-toggle-bar{transform-origin: center;}
body.nav-open #navToggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open #navToggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
body.nav-open #navToggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Tło headera po scrollu LUB na ciemnej sekcji */
.site-header.scrolled,
body.on-dark .site-header {
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  background: var(--header-tint);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header.scrolled .nav-link,
body.on-dark .site-header .nav-link {
  color:var(--text-color);
}
.site-header.scrolled .nav-toggle .nav-toggle-bar,
body.on-dark .site-header .nav-toggle .nav-toggle-bar {
  background:var(--text-color);
}
body.nav-open .site-header.scrolled .nav-toggle .nav-toggle-bar,
body.nav-open body.on-dark .site-header .nav-toggle .nav-toggle-bar {
    background: #fff; /* X jest zawsze biały, gdy menu jest otwarte */
}

/* ==================== MOBILE MENU ==================== */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 8997;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s .4s;
}
body.nav-open .mobile-nav-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease;
}

.mobile-nav{
  position:fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background:var(--bg-color-alt);
  transform:translateX(100%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  z-index:8998;
  display:flex;
  padding: 80px 1.5rem 2rem;
}
body.nav-open .mobile-nav{
  transform:translateX(0);
}

.mobile-nav-inner{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.mobile-link{
  display:block; padding:1rem 1.25rem; border-radius:8px; text-decoration:none; color:var(--text-color-light);
  font-size:1.25rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}
.mobile-extra{margin-top:1rem; padding-top:1rem; border-top:1px dashed rgba(255,255,255,.15)}
.mobile-policy{color:#cbd5e0; text-decoration:none; font-size:.95rem}

/* ==================== HERO ==================== */
#hero{
  height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;position:relative;overflow:hidden;
  background:url('hero.webp') center center/cover no-repeat;
}
#hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:0}
.hero-content{position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden}
.hero-title{font-size:clamp(4rem,12vw,6rem);letter-spacing:5px;font-weight:700;line-height:1;-webkit-user-select:none;user-select:none}
.hero-separator{width:0;height:2px;background-color:var(--line-color);display:block;margin:1rem 0}
.hero-subtitle{font-weight:500;letter-spacing:.3rem;text-transform:uppercase;line-height:1.1;white-space:nowrap;display:inline-block;transform-origin:center;-webkit-user-select:none;user-select:none}
.hero-cta{margin-top:1.75rem}
.cta-button--hero{background:transparent;color:#fff;border:2px solid #fff;text-decoration:none;display:inline-block}

/* Strzałka */
.scroll-down-arrow{position:absolute;bottom:2rem;font-size:2rem;color:#fff;text-decoration:none;animation:bounce 2s infinite;z-index:1}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-15px)}60%{transform:translateY(-8px)}}

/* ==================== SEKCJE ==================== */
.content-section{padding:8rem 0;position:relative}
.bg-alt{background-color:var(--bg-color-alt);color:var(--text-color-light)}
.bg-alt h2{color:var(--text-color-light)}
.section-subtitle{
  font-size:1.2rem;
  color:#aaa;
  margin-bottom:4rem;
  max-width:600px;
  font-weight:300;
  margin-left: auto;
  margin-right: auto;
}

/* O nas */
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.image-content{height:500px;border-radius:5px;background:url('onas.webp') center center/cover no-repeat, #eee}

/* FALE */
.cityscape-separator{background-color:var(--bg-color);line-height:0;color:var(--bg-color-alt);overflow:hidden;position:relative}
.cityscape-separator.flipped{background-color:var(--bg-color-alt);color:var(--bg-color);transform:rotate(180deg)}
.cityscape-separator.mirror-x{transform:rotate(180deg)}
.cityscape-separator .shape-fill{fill:currentColor}
.cityscape-separator svg{display:block;width:100%;height:150px}
.cityscape-separator.tight{margin-top:-2px;margin-bottom:-2px}

/* Mobile – przycinanie fal */
@media (max-width: 991px){
  .cityscape-separator{overflow:hidden}
  .cityscape-separator svg{width:1200px;height:150px;position:relative;left:50%;transform:translateX(-50%)}
}

/* ==================== OFERTA ==================== */
#offer.compact{padding-top:6rem;padding-bottom:6rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.service-card{padding:2.5rem;border-radius:5px;transition:transform .3s ease,box-shadow .3s ease;background-color:#2a3342;box-shadow:0 5px 15px rgba(0,0,0,.2)}
.service-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(0,0,0,.3)}
.service-card h3{font-size:1.8rem;margin-bottom:1rem;color:var(--text-color-light)}
.service-card h3::after{content:'';display:block;width:40px;height:2px;background:var(--accent-color);margin-top:1rem}
.service-card p{font-weight:300}

/* ==================== DLACZEGO MY ==================== */
.why-head{text-align:center}
.why-grid{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.why-card{
  border:1px solid #eee;
  border-radius:12px;
  padding:2rem;
  background:#fff;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  box-shadow:0 3px 12px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.why-card:hover{transform:translateY(-8px);box-shadow:0 14px 38px rgba(0,0,0,.12);border-color:#e7e2d9}
.why-card h3{margin:1rem 0 0.5rem}
.why-card p{color:#333; flex-grow: 1;}
.why-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(192,149,83,.18), rgba(192,149,83,.08));
  border:1px solid rgba(192,149,83,.35);
  font-size:1.1rem;
  color:#8a6a36;
  margin-bottom: 0.5rem;
}

/* ==================== KONTAKT ==================== */
#contact{background-color:var(--bg-color)}
#contact h2{text-align:center;margin-bottom:2rem}
.contact-wrap{max-width:1100px}
.contact-grid{margin-top:1rem;display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:start;width:100%}
#contact-form{width:100%}
.form-group{position:relative;margin-bottom:1.6rem}
.form-group input,.form-group textarea{width:100%;padding:10px;border:none;border-bottom:2px solid #ccc;background-color:transparent;font-family:var(--font-body);font-size:1rem;color:var(--text-color);outline:none}
.form-group label{position:absolute;top:10px;left:10px;color:#999;transition:all .3s ease;pointer-events:none}
.form-group input:focus ~ label,
.form-group input:valid ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:valid ~ label{top:-20px;font-size:.8rem;color:var(--accent-color)}
.form-group input:focus,.form-group textarea:focus{border-bottom-color:var(--accent-color)}
.consents{display:grid;gap:.75rem;margin:1rem 0 1.5rem}
.checkbox{display:flex;gap:.6rem;align-items:flex-start;line-height:1.4}
.checkbox input[type="checkbox"]{margin-top:.2rem;accent-color:var(--accent-color)}
.checkbox a{color:inherit}
.cta-button{background-color:var(--text-color);color:var(--bg-color);padding:1rem 2rem;border:none;border-radius:5px;font-size:1rem;font-weight:500;cursor:pointer;transition:opacity .3s ease;text-transform:uppercase;letter-spacing:1px}
.cta-button:hover{opacity:.85}

/* Dane firmy */
.contact-details{background:#f7f7f7;border:1px solid #eee;border-radius:10px;padding:2rem}
.contact-details h3{margin-bottom:1rem}
.contact-details ul{list-style:none;display:grid;gap:.5rem}
.contact-details a{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
.contact-details a:hover{border-bottom-color:currentColor}
.contact-badges{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.contact-badges span{display:inline-block;border:1px solid #ddd;border-radius:999px;padding:.35rem .7rem;font-size:.8rem;background:#fff}

/* ==================== STOPKA ==================== */
#main-footer{padding:2rem 0;color:#9ab; background-color: var(--bg-color-alt);}
.footer-grid{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.footer-copyright, .footer-meta{
  font-size: .9rem;
  color: #a0aec0;
}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.footer-links a, .footer-meta a{
  color:#cbd5e0;
  text-decoration:none;
  border-bottom:1px dashed transparent;
  transition: border-color .2s;
}
.footer-links a:hover, .footer-meta a:hover{border-bottom-color:currentColor}
.footer-brand{display:none}
.footer-meta p a { color: #cbd5e0 !important; }

/* ==================== RESPONSYWNOŚĆ ==================== */
@media (max-width: 1100px){
  .contact-wrap{max-width:100%}
}
@media (max-width: 992px){
  .two-columns{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:2rem}
}
@media (max-width: 920px){
  .nav-center{display:none}
  .nav-toggle{
    display:grid;
    justify-self: center;
    grid-column: 2 / 3;
  }
}
@media (max-width: 768px){
  .content-section{padding:4rem 0}
  .footer-grid{
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .footer-links { order: 1; }
  .footer-meta { order: 2; }
  .footer-copyright { order: 3; }
}
/* --- HERMES: typografia stron informacyjnych (nagłówki, listy, linki) --- */

/* Kontener treści (jeśli używasz .page-article w page.php) */
.page-article {
  max-width: 920px;
  font-size: clamp(16px, 1.1vw + 12px, 18px);
  line-height: 1.7;
  color: rgba(0,0,0,.65);
}
.page-article p { margin: 0 0 1.1em; }

/* Nagłówki Gutenberg: <h3 class="wp-block-heading"> */
.page-article h3.wp-block-heading {
  position: relative;
  margin: 1.8em 0 .9em;
  font-size: clamp(18px, 1.2vw + 14px, 22px);
  line-height: 1.35;
  font-weight: 700;
  color: #111827;
  padding: 12px 16px 12px 18px;
  background: linear-gradient(to right, rgba(26,32,44,.06), rgba(26,32,44,.02));
  border-left: 4px solid var(--accent-color, #3B82F6);
  border-radius: 10px;
}
.page-article h3.wp-block-heading + p,
.page-article h3.wp-block-heading + ul,
.page-article h3.wp-block-heading + ol { margin-top: .6em; }

/* Linki */
.page-article a {
  color: var(--link-color, var(--accent-color, #3B82F6));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
  transition: color .2s ease, text-decoration-color .2s ease;
  word-break: break-word;
}
.page-article a:hover,
.page-article a:focus-visible {
  color: var(--link-hover, #1d4ed8);
  text-decoration-color: var(--link-hover, #1d4ed8);
}
.page-article a[href^="mailto:"],
.page-article a[href^="tel:"] { font-weight: 600; }

/* Listy UL/OL (Gutenberg: .wp-block-list) */
.page-article ul.wp-block-list,
.page-article ol.wp-block-list {
  margin: .6em 0 1.2em;
  padding-left: 0;
  list-style: none;
}
.page-article ul.wp-block-list > li,
.page-article ol.wp-block-list > li {
  position: relative;
  margin: 0 0 .6em;
  padding-left: 1.7em;
  color: rgba(0,0,0,.65);
}

/* Punktory UL – kropka z akcentem */
.page-article ul.wp-block-list > li::before {
  content: "";
  position: absolute;
  left: .2em; top: .72em;
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--accent-color, #3B82F6);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

/* Numeracja OL – badge z numerem */
.page-article ol.wp-block-list { counter-reset: legal-ol; }
.page-article ol.wp-block-list > li { counter-increment: legal-ol; }
.page-article ol.wp-block-list > li::before {
  content: counter(legal-ol);
  position: absolute;
  left: 0; top: .26em;
  min-width: 1.35em; height: 1.35em; line-height: 1.35em;
  border-radius: 999px; font-size: .85em; text-align: center;
  color: #fff; background: var(--accent-color, #3B82F6);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

/* Zagnieżdżenia list */
.page-article li > ul,
.page-article li > ol { margin-top: .45em; }
.page-article li > ul > li::before { background: #a5b4fc; box-shadow: none; }
.page-article li > ol { counter-reset: legal-ol-nested; }
.page-article li > ol > li { counter-increment: legal-ol-nested; }
.page-article li > ol > li::before {
  content: counters(legal-ol-nested, ".") ".";
  background: #4b5563; box-shadow: none;
}

/* Wzmocnienia i cytaty */
.page-article strong { color: #111827; font-weight: 700; }
.page-article em { font-style: italic; }
.page-article blockquote {
  margin: 1.2em 0; padding: .8em 1.1em;
  background: #f9fafb;
  border-left: 4px solid var(--accent-color, #3B82F6);
  border-radius: 8px;
  color: rgba(0,0,0,.65);
}
.page-article blockquote p:last-child { margin-bottom: 0; }

/* Tabele */
.page-article table {
  width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .98em;
}
.page-article th, .page-article td {
  border: 1px solid rgba(0,0,0,.08);
  padding: .65em .7em; text-align: left;
}
.page-article thead th {
  background: #f7f8fa; color: #111827; font-weight: 700;
}

/* Odstępy krańcowe */
.page-article > *:first-child { margin-top: 0; }
.page-article > *:last-child { margin-bottom: 0; }

/* Mobile drobiazgi */
@media (max-width: 640px){
  .page-article h3.wp-block-heading { padding: 10px 12px 10px 14px; }
  .page-article ul.wp-block-list > li,
  .page-article ol.wp-block-list > li { padding-left: 1.5em; }
  .page-article ol.wp-block-list > li::before { top: .22em; }
}