/*
Theme Name: Hauser
Theme URI: https://kossakproject.pl
Author: KOSSAK PROJECT
Author URI: https://kossakproject.pl
Description: Motyw dla kliniki medycyny estetycznej i makijazu permanentnego. Globalny naglowek, stopka, plywajace social media oraz spojna identyfikacja wizualna. Kompatybilny z Elementorem.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hauser
*/

:root{
  --ink:#380E0F; --white:#FFFFFF; --cream:#EFECE8; --bone:#EDEBEA; --taupe:#C1BEB9;
  --hair:rgba(56,14,15,.18); --hair-w:rgba(255,255,255,.6);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,Helvetica,Arial,sans-serif;
}

html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.6}
.site-header,.site-header *,.site-footer,.site-footer *,.hc-social,.hc-social *{box-sizing:border-box}
.site-header ul,.site-footer ul{margin:0;padding:0;list-style:none}
.site-header a,.site-footer a,.hc-social a{color:inherit;text-decoration:none}
.site-header img,.site-footer img{display:block;max-width:100%;height:auto}
.site-header button{color:var(--cream);background:none;border:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}

/* ─── BELKA MENU (transparentna, wysrodkowana, bez logo; czerwona po scrollu) ─── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:background .45s ease;font-family:var(--sans)}
.site-header::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0));opacity:1;transition:opacity .45s ease;pointer-events:none}
.site-header.scrolled{background:var(--ink)}
.site-header.scrolled::before{opacity:0}
body:not(.home) .site-header{background:var(--ink)}
body:not(.home) .site-header::before{opacity:0}
body:not(.home){padding-top:58px}
.site-header .in{width:100%;padding:17px clamp(16px,3vw,48px);display:flex;align-items:center;justify-content:center;position:relative}
.site-header .nav ul{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.6vw,40px)}
.site-header .nav a{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;position:relative;padding:4px 0;display:inline-block;color:var(--cream)}
.site-header .nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--cream);transition:width .45s cubic-bezier(.22,1,.36,1)}
.site-header .nav a:hover::after,.site-header .nav .current-menu-item>a::after,.site-header .nav .current_page_item>a::after{width:100%}
.site-header .burger{display:none;position:absolute;right:clamp(16px,3vw,48px);top:50%;transform:translateY(-50%);flex-direction:column;gap:5px;padding:6px}
.site-header .burger span{width:24px;height:1px;background:var(--cream);display:block;transition:.35s}

/* ─── PLYWAJACE SOCIAL MEDIA ─── */
.hc-social{position:fixed;right:clamp(10px,1.4vw,20px);top:50%;transform:translateY(-50%);z-index:1400;display:flex;flex-direction:column;gap:10px;padding:9px;background:var(--ink);border-radius:100px;box-shadow:0 10px 30px rgba(56,14,15,.25)}
.hc-social a{width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.35s;border:1px solid rgba(56,14,15,.12)}
.hc-social a:hover{background:var(--white);transform:scale(1.07)}
.hc-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ─── STOPKA ─── */
.site-footer{background:var(--ink);color:var(--cream);font-family:var(--sans);padding:clamp(46px,5vw,74px) 0 0}
.site-footer .wrap{width:100%;padding:0 clamp(16px,3vw,48px)}
.site-footer .top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(22px,4vw,50px);padding-bottom:clamp(36px,4.5vw,64px)}
.site-footer .contact p{font-size:9px;letter-spacing:.10em;text-transform:uppercase;font-weight:600;line-height:2.4}
.site-footer .contact a:hover{opacity:.85}
.site-footer .soc{display:flex;gap:14px;margin-top:16px}
.site-footer .soc a{width:32px;height:32px;border:1px solid var(--hair-w);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.35s}
.site-footer .soc a:hover{background:rgba(255,255,255,.12)}
.site-footer .soc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.site-footer .col{padding-left:24px;border-left:1px solid var(--hair-w)}
.site-footer .col a{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;line-height:2.5;opacity:.92}
.site-footer .col a:hover{opacity:1}
.site-footer .word{line-height:0}
.site-footer .word span{display:block;font-family:var(--serif);font-weight:300;color:var(--cream);font-size:clamp(2.4rem,12vw,9rem);line-height:.82;letter-spacing:.02em;white-space:nowrap}
.site-footer .word img{height:clamp(54px,8vw,120px);width:auto;max-width:100%}
.site-footer .barb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--hair-w);margin-top:12px;padding:20px 0 34px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;line-height:1.6}
.site-footer .barb .r{display:flex;gap:30px}

.site-main{min-height:40vh}

@media(max-width:860px){
  .site-header .nav{position:fixed;inset:0;background:var(--ink);z-index:1300;transform:translateX(100%);transition:transform .5s cubic-bezier(.76,0,.24,1);display:flex;align-items:center;justify-content:center}
  .site-header .nav ul{flex-direction:column;gap:26px}
  .site-header.open .nav{transform:translateX(0)}
  .site-header .nav a{font-size:15px}
  .site-header .burger{display:flex}
  .site-header.open .burger span{background:var(--cream)}
  .site-header.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .site-header.open .burger span:nth-child(2){opacity:0}
  .site-header.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hc-social{right:8px;gap:8px;padding:7px}
  .hc-social a{width:34px;height:34px}.hc-social svg{width:14px;height:14px}
  .site-footer .top{grid-template-columns:1fr}
  .site-footer .col{padding-left:0;border-left:0;border-top:1px solid var(--hair-w);padding-top:18px}
}