:root{
  --bg:#0b0c10;--panel:#12141b;--text:#e9edf5;--muted:#a9b2c3;
  --accent:#5eead4;--line:#1f2430;--radius:16px
}
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg);color:var(--text);line-height:1.6
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:auto;padding:0 20px}

/* HEADER */
header{
  position:sticky;top:0;
  background:rgba(139,0, 0, 0.92);
  border-bottom:1px solid var(--line);
  z-index:10
}
.header-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0
}
nav a{margin-left:14px;color:var(--muted)}
nav a[aria-current="page"]{color:var(--text)}

/* CTA BUTTON */
header nav a.cta-call{
  background:#2563eb;
  color:#ffffff;
  padding:10px 18px;
  border-radius:14px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:20px;
  box-shadow:0 6px 16px rgba(37,99,235,.35);
}
header nav a.cta-call:hover{
  background:#1d4ed8;
}

/* HERO */
/* HERO */
.hero{
  padding:70px 0 50px;
  min-height:420px;
  position:relative;
  overflow:hidden;
  
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:url("/barber/images/abc.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  transform:translateX(-30%);
  animation:heroImageSlide 1.2s ease-out forwards;

  z-index:0;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.30);
  z-index:1;
}

.hero .container{
  position:relative;
  z-index:2;
  color:#fff;
}

.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px}
h1{font-size:42px;line-height:1.1;margin:0 0 10px}
h2{margin:0 0 14px}
.lead{color:var(--muted);max-width:520px}
.buttons a{
  display:inline-block;margin-right:10px;margin-top:15px;
  padding:14px 18px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line)
}
.buttons a.primary{
  background:linear-gradient(135deg,#5eead4,#60a5fa);
  color:#000;font-weight:700;border:0
}

.placeholder,.photo{
  background:linear-gradient(135deg,#1f2937,#020617);
  border-radius:20px;min-height:260px;
  display:flex;align-items:center;justify-content:center;color:var(--muted)
}

section{padding:50px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--panel);padding:20px;
  border-radius:var(--radius);border:1px solid var(--line)
}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact div{
  background:var(--panel);padding:18px;
  border-radius:var(--radius);border:1px solid var(--line)
}

.contact-form{
  margin: 0 auto;
}

.table-wrap{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden
}
table{width:100%;border-collapse:collapse}
th,td{padding:16px;border-bottom:1px solid var(--line)}
th{text-align:left;color:var(--muted)}
td:last-child{text-align:right;font-weight:700}

.values{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;max-width:900px;margin:auto
}
.values div{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;text-align:center
}

.cta-box{
  margin:50px auto 0;padding:30px;
  border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(94,234,212,.15),rgba(96,165,250,.15));
  text-align:center;max-width:700px
}

footer{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:14px}

@media(max-width:800px){
  .hero-grid{grid-template-columns:1fr}
  .cards,.contact,.values{grid-template-columns:1fr}
}

/* GOLD PRICES */
table td:last-child{
  color:#d4af37;      /* złoty */
  font-weight:800;
}

/* HERO PHOTO – ONLY IMAGE */
.photo{
  height:auto;          /* brak wymuszonej wysokości */
  background:none;      /* brak tła */
  border:none;          /* brak ramki */
  display:flex;
  align-items:center;
  justify-content:center;
}

.photo img{
  width:220px;          /* rozmiar zdjęcia */
  height:220px;
  object-fit:cover;

  border-radius:50%;
  border:5px solid #d4af37;   /* złota ramka */
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:18px;
}

.logo img{
  height:90px;   /* kontrolujesz tu wielkość logo */
  width:auto;
  display:block;
}

.logo{
  margin-left:100px;
}

@keyframes heroImageSlide{
  from{
    transform:translateX(-30%);
  }
  to{
    transform:translateX(0);
  }
}

.contact-form{
  max-width:480px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-form input,
.contact-form textarea{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  font-size:15px;
}

.contact-form textarea{
  min-height:120px;
  resize:vertical;
}

.contact-form button{
  margin-top:10px;
  padding:14px;
  border-radius:14px;
  border:0;
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(135deg,#5eead4,#60a5fa);
  color:#000;
}

/* ===== HEADER NAV ===== */
.nav{
  position:relative;
}

.menu{
  display:flex;
  gap:14px;
  align-items:center;
}

/* Hamburger */
.menu-toggle{
  display:none;
  font-size:28px;
  background:none;
  border:0;
  color:var(--text);
  cursor:pointer;
}

@media (max-width:1024px){

  header nav a.cta-call{
    display:none;
  }

  .header-inner{
    position:relative;
  }

  .logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    margin-left:0;
  }

  @media (max-width:1024px){

  .nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
  }

  /* reszta zostaje BEZ ZMIAN */
}

  .menu-toggle{
    display:block;
    margin-left:auto;
    margin-right:35px;
  }

  .menu{
    position:absolute;
    top:30px;
    right:0;
    flex-direction:column;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    min-width:200px;
    display:none;
  }

  .menu.open{
    display:flex;
  }
}











/* ===== SUBMENU ITEM ===== */
/* KLUCZ: kasujemy margin-left z "nav a" tylko dla dropdownu */
.menu .submenu a{
  margin-left:0 !important;   /* 🔥 to naprawia lewy pasek */
  display:block;
  width:100%;
  padding:14px 18px;
  border-radius:0;            /* wypełnia cały box */
  color:var(--text);
  transition:background .2s ease, color .2s ease;
}

.menu .submenu a:hover{
  background:linear-gradient(
    135deg,
    rgba(212,175,55,.38),
    rgba(212,175,55,.22)
  );
  color:#f5d77a;
}

/* ===== MOBILE MENU FIX – FINAL ===== */
@media (max-width:1024px){

  /* reset desktopowego odstępu linków */
  nav a{
    margin-left:0;
  }

  /* menu jako czysta kolumna */
  .menu{
    padding:12px;
    gap:6px;
  }

  .menu a{
    padding:12px 14px;
    width:100%;
    text-align:left;
  }

 

}


@media (max-width:1024px){
  /* w kolumnie nie centruj itemów */
  .menu{
    align-items:stretch;
  }


.menu-toggle{
  width:20px;
  height:16px;
  position:relative; /* 🔑 KLUCZ */
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
}

.menu-toggle span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}

.menu-toggle.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2){
  opacity:0;
}

.menu-toggle.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}


.menu-toggle span:nth-child(1){
  top:0;
}

.menu-toggle span:nth-child(2){
  top:7px;
}

.menu-toggle span:nth-child(3){
  bottom:0;
}

/* ===== FOOTER – DESKTOP (BAZA) ===== */

.site-footer {
  margin-top: 80px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* lewa */
.footer-left {
  font-size: 14px;
  opacity: 0.7;
}

/* środek – menu */
.footer-nav {
  display: flex;
  gap: 20px;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

/* prawa – kontakt */
.footer-contact {
  text-align: right;
  font-size: 14px;
}

/* ===== FOOTER – MOBILE ===== */

@media (max-width: 768px) {

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 12px;
  }

  .footer-contact {
    text-align: center;
  }

}




}



/* === DROPDOWN ARROW – CLEAN === */
.dropdown-arrow {
  margin-left: 6px;
  font-size: 11px;
  color: #fff;

  background: none;
  border: none;
  padding: 0;
  box-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  pointer-events: none; /* 🔑 KLUCZ */
  transition: transform 0.2s ease;
}

/* ===== FIX: remove white box around About dropdown arrow ===== */


.dropdown-arrow {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ===== HARD FIX: remove hover box from About (has submenu) ===== */

.menu > .has-submenu > a {
  background: none !important;
}

.menu > .has-submenu > a:hover {
  background: none !important;
}

.dropdown-arrow {
  pointer-events: none;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.menu > .has-submenu > a {
  justify-content: flex-start;
}

/* ===== KILL BROWSER FOCUS / HIGHLIGHT ===== */

.menu a:focus,
.menu a:focus-visible,
.menu a:active {
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

.menu a::-moz-focus-inner {
  border: 0;
}

/* ===== FINAL FIX: remove browser focus box ===== */
.menu a:focus,
.menu a:focus-visible,
.menu a:active {
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

.menu a::-moz-focus-inner {
  border: 0;
}



.dropdown-arrow {
  font-size: 11px;
  opacity: .7;
  pointer-events: none;
  transition: transform .2s ease;
}



/* === FOOTER DESKTOP FIX === */
@media (min-width: 769px) {
  .footer-inner {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .footer-contact {
    text-align: right;
    margin-left: auto;
    margin-top: -20px;
  }
}

.footer-item {
  color: #dc2626;
}




.has-submenu {
  position: relative;
}

/* SUBMENU - domyślnie ukryte */
.submenu {
  display: none;
  flex-direction: column;
}

/* DESKTOP - hover */
@media (min-width: 1025px) {
  .has-submenu:hover .submenu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    min-width: 180px;
    padding: 8px 0;
    z-index: 100;
  }
}

/* MOBILE - click */
@media (max-width: 1024px) {
  .has-submenu.open .submenu {
    display: flex;
    padding-left: 12px;
  }
}

/* STRZAŁKA */
.dropdown-arrow {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.7;
}


/* === RESET BUTTON (About) === */
.menu-link.submenu-toggle {
  all: unset;                 /* 💣 zabija WSZYSTKIE style buttona */
  display: inline-flex;        /* jak link */
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;

  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* hover jak normalne linki */
.menu-link.submenu-toggle:hover {
  background: rgba(255,255,255,0.05);
}

/* KILL focus / active box */
.menu-link.submenu-toggle:focus,
.menu-link.submenu-toggle:active {
  outline: none;
  box-shadow: none;
  background: none;
}

/* === DESKTOP ONLY – FINAL === */
@media (min-width: 1025px) {

  .menu {
    display: flex;
    align-items: center;
    gap: 16px; /* <-- TU JEST KLUCZ */
  }

  .menu > a,
  .menu > .has-submenu {
    display: inline-flex;
    align-items: center;
  }

  .menu .menu-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }

  .menu > * {
    margin-left: 0 !important;
  }
}

/* === DESKTOP MENU BUTTONS STYLE === */
@media (min-width: 1025px) {

  .menu > a,
  .menu .menu-link {
    border: 2px solid #d4af37; /* złoto */
    background-color: #7a1f1f; /* bordowy */
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: 
      background-color 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease;
  }

}

@media (min-width: 1025px) {

  .menu > a:hover,
  .menu .menu-link:hover {
    background-color: #c0c0c0; /* srebro */
    border-color: #c0c0c0;
    color: #000;
  }

}

@media (min-width: 1025px) {

  .menu .dropdown-arrow {
    margin-left: 6px;
    font-size: 0.7em;
    transition: transform 0.25s ease;
  }

  .has-submenu.open .dropdown-arrow {
    transform: rotate(180deg);
  }

}

@media (min-width: 1025px) {

  .menu > a:hover,
  .menu .menu-link:hover {
    box-shadow: 0 0 10px rgba(192,192,192,0.6);
  }

}

/* === MOBILE MENU SEPARATORS === */
@media (max-width: 1024px) {

  .menu {
    padding: 8px;
  }

  .menu > a,
  .menu .menu-link {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;

    border: 1px solid rgba(192, 192, 192, 0.5); /* srebro */
    border-radius: 8px;

    background: transparent;
    color: #fff;
  }

  /* hover / tap feedback */
  .menu > a:hover,
  .menu .menu-link:hover {
    background: rgba(192, 192, 192, 0.1);
  }

}

@media (max-width: 1024px) {
  .menu > a:active,
  .menu .menu-link:active {
    box-shadow: 0 0 8px rgba(192,192,192,0.4);
  }
}

/* === MOBILE SUBMENU FRAMES === */
@media (max-width: 1024px) {

  /* kontener submenu */
  .menu .submenu {
    margin-top: 6px;
    padding-left: 6px;
  }

  /* elementy submenu */
  .menu .submenu a {
    display: block;
    padding: 10px 14px;
    margin-bottom: 6px;

    border: 1px solid rgba(192, 192, 192, 0.35); /* delikatniejsze srebro */
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.02);
    color: #ddd;
    font-size: 0.95em;
  }

  /* hover / tap */
  .menu .submenu a:hover {
    background: rgba(192, 192, 192, 0.12);
  }

}

@media (max-width: 1024px) {
  .menu .submenu a {
    border-left: 2px solid rgba(192,192,192,0.6);
  }
}

@media (max-width: 1024px) {

  .menu > a,
  .menu .menu-link {
    box-sizing: border-box;
    width: 100%;
  }

}

@media (max-width: 800px) {
  .values {
    max-width: 100%;
  }

  .values div {
    width: 50%;
    margin: 0 auto;
  }
}


/* === SAND BACKGROUND EFFECT === */
.sand-section {
  position: relative;
  overflow: hidden;
}

/* piach */
.sand-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("/barber/images/sand.png"); /* tekstura piachu */
  background-repeat: repeat;
  background-size: 600px 600px;

  opacity: 0.25;
  filter: blur(1px);

  animation: sandMove 40s linear infinite;
  z-index: 0;
}

/* treść nad piachem */
.sand-section > * {
  position: relative;
  z-index: 1;
}

/* animacja */
@keyframes sandMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 600px 0;
  }
}