/* magstick.pl — tokeny + layout wspólny (header/footer/komponenty).
   Przeniesione z base.html (redesign 30.08.2026) — wartości tokenów bez
   zmian względem tego, co już było na produkcji (--cut/--pole/--signal/
   --etykieta/--pinka), zgodnie z decyzją "kolory ścieżek = twardy wymóg". */
:root{
  --liner:#F3EFE7; --liner-2:#EAE4D8; --liner-3:#FFFDF8;
  --rule:#D9D2C4; --rule-soft:#E4DED2;
  --ink:#14161B; --ink-70:#4A4E58; --ink-45:#7C818C;
  --cut:#FF2D95; --pole:#0E8AA8; --signal:#F4502B;
  --etykieta:#B8860B; --pinka:#7B4FE0;
  --accent:var(--cut); --accent-ink:#7A0D45; --accent-wash:#FFF0F7;
  --r:14px;
  --page-max:1180px;
  --page-pad:1.25rem;
  --display:"Bricolage Grotesque","Arial Narrow",sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --bg:var(--liner); --line:var(--rule);
}
body[data-line="magnesy"]{ --accent:var(--pole); --accent-ink:#05485A; --accent-wash:#E8F6FA; }
body[data-line="etykiety"]{ --accent:var(--etykieta); --accent-ink:#6B4A04; --accent-wash:#FBF3DF; }
body[data-line="przypinki"]{ --accent:var(--pinka); --accent-ink:#3B2778; --accent-wash:#F1ECFD; }

*{box-sizing:border-box}
body{font-family:var(--body);margin:0;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
main{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
body:not([data-line]) main{padding-top:.9rem}
main.wide{max-width:1180px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .6rem}
p{margin:0 0 1rem}
a{color:inherit}
.lead{color:var(--ink-70);font-size:1.1rem;max-width:42rem}
.flash{max-width:1180px;margin:1rem auto 0;background:var(--liner-3);border:1px solid var(--rule);border-left:4px solid var(--signal);padding:.6rem 1rem;border-radius:6px}

/* ---------- header ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  column-gap:1.5rem;min-height:92px;
  padding:0 max(var(--page-pad), calc(50% - var(--page-max) / 2 + var(--page-pad)));
  background:var(--liner-3);border-bottom:1px solid var(--rule-soft);
  position:sticky;top:0;z-index:30;overflow:visible}
.site-header .nav-toggle{grid-column:1;grid-row:1;justify-self:start;position:relative;z-index:5}
.site-header .path-nav{grid-column:1;grid-row:1;justify-self:start;position:relative;z-index:5}
.site-header .logo{grid-column:2;grid-row:1;justify-self:center}
.site-header .header-actions{grid-column:3;grid-row:1;justify-self:end;position:relative;z-index:5}
.logo{display:flex;align-items:center;gap:1.25rem;text-decoration:none;line-height:1;
  position:relative;z-index:4;height:92px;width:max-content}
.logo-mark{display:block;width:auto;height:110px;margin-bottom:-32px;
  filter:drop-shadow(0 8px 14px rgba(20,22,27,.16))}
.logo-word{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:1.885rem;line-height:1;white-space:nowrap}
.lw-mag,.lw-pl{color:var(--ink)}
.lw-stick{color:#FF6600}
.path-nav{display:flex;align-items:center;flex-wrap:nowrap;font-size:.98rem;font-weight:700}
.path-nav a{text-decoration:none;color:var(--ink)}
.path-nav a:not(:first-child)::before,.header-actions > a:not(:first-child)::before,
.header-actions > form::before{content:"|";margin:0 .7rem;color:#C9C2B4;font-weight:400}
.path-nav a.is-active{color:var(--ink)}
.site-header--kreator{grid-template-columns:auto 1fr auto;min-height:64px;overflow:hidden;
  padding:0 1.6rem}
.site-header--kreator .logo{grid-column:1;justify-self:start;position:relative;left:auto;transform:none;height:auto;width:auto}
.site-header--kreator .path-nav--kreator{grid-column:2;justify-self:center;position:static;transform:none}
.site-header--kreator .header-actions{grid-column:3;justify-self:end}
.site-header--kreator .logo-mark{height:36px;margin-bottom:0;filter:none}
.site-header--kreator .logo-word{font-size:1.5rem}
.path-nav--kreator{align-items:center;gap:.45rem;justify-content:center}
.path-nav--kreator a:not(:first-child)::before{content:none;margin:0}
.path-tab{border:1.5px solid transparent;border-radius:999px;padding:.42rem 1.05rem;
  font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transform:none;box-shadow:none;color:#fff}
.path-tab:hover{transform:none}
.path-tab.nav-naklejki{background:var(--cut);border-color:var(--cut);color:#fff}
.path-tab.nav-magnesy{background:var(--pole);border-color:var(--pole);color:#fff}
.path-tab.nav-etykiety{background:var(--etykieta);border-color:var(--etykieta);color:#fff}
.path-tab.is-on{box-shadow:0 0 0 2px var(--liner-3),0 0 0 3.5px var(--ink)}
.path-badge{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--rule);padding:.4rem .75rem;border-radius:999px}
.header-actions{display:flex;align-items:center;flex-wrap:nowrap;font-size:.98rem;font-weight:700;margin-left:0}
.header-actions a{text-decoration:none;color:var(--ink)}
.header-actions a:hover,.path-nav a:hover{color:var(--ink)}
.header-logout{background:none;border:0;color:var(--ink);padding:0;font:inherit;font-weight:700;border-radius:0}
.header-logout:hover{transform:none;color:var(--ink)}
.header-user{color:var(--ink-45);font-size:.9rem}

.auth-panel{max-width:26rem;margin:2rem auto 3rem}
.auth-tabs{display:flex;gap:0;margin-bottom:1.4rem;border-bottom:1px solid var(--rule)}
.auth-tabs a{text-decoration:none;color:var(--ink-45);padding:.7rem 1rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.auth-tabs a.is-active{color:var(--ink);border-bottom-color:var(--cut);font-weight:600}
.auth-google{display:inline-block}
.auth-or{margin:.4rem 0 1rem}

/* ---------- podmenu konta (zakładki) ---------- */
.account-nav{margin:0 0 1.25rem;border-bottom:1px solid var(--rule)}
.account-nav-scroll{display:flex;align-items:stretch;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:0}
.account-nav a,.account-nav-logout{flex:none;text-decoration:none;color:var(--ink-45);
  padding:.7rem .85rem;border-bottom:2px solid transparent;margin-bottom:-1px;
  font-size:.95rem;font-weight:500;white-space:nowrap}
.account-nav a:hover{color:var(--ink)}
.account-nav a.is-active{color:var(--ink);border-bottom-color:var(--cut);font-weight:600}
.account-nav-logout{display:inline;margin:0;padding:0}
.account-nav-logout-btn{background:none;border:0;color:var(--ink-45);padding:.7rem .85rem;
  border-bottom:2px solid transparent;margin-bottom:-1px;font:inherit;font-size:.95rem;
  font-weight:500;border-radius:0;cursor:pointer;white-space:nowrap}
.account-nav-logout-btn:hover{transform:none;color:var(--ink)}
@media (max-width:560px){
  .account-nav a,.account-nav-logout-btn{padding:.65rem .7rem;font-size:.88rem}
}

.nav-toggle{display:none;background:none;border:1.5px solid var(--rule);color:var(--ink);
  padding:.4rem .7rem;border-radius:10px;font-size:1.2rem;line-height:1;cursor:pointer;transform:none}
.mobile-nav{display:none;flex-direction:column;background:var(--liner-3);border-bottom:1px solid var(--rule-soft)}
.mobile-nav a{padding:.9rem 1.25rem;color:var(--ink);text-decoration:none;border-top:1px solid var(--rule-soft);font-size:1.05rem;font-weight:700}
.mobile-nav a:first-child{border-top:0}
.mobile-nav[hidden]{display:none}

@media (max-width:1100px){
  .logo-mark{height:90px;margin-bottom:-24px}
  .logo-word{font-size:1.69rem}
  .path-nav a:not(:first-child)::before,.header-actions > a:not(:first-child)::before,
  .header-actions > form::before{margin:0 .45rem}
}
@media (max-width:900px){
  .path-nav{display:none}
  .path-nav.path-nav--kreator{display:flex;gap:.4rem;font-size:.88rem}
  .nav-toggle{display:inline-block}
  .mobile-nav:not([hidden]){display:flex}
  .site-header{grid-template-columns:auto 1fr auto;min-height:72px}
  .logo{height:72px}
  .header-actions{flex-wrap:nowrap;font-size:.88rem;gap:.85rem}
  .header-actions a[href$="/kontakt"],.header-actions a[href$="/blog"]{display:none}
  .header-actions > a:not(:first-child)::before{content:none;margin:0}
  .logo-mark{height:72px;margin-bottom:-16px}
  .logo-word{font-size:1.5rem}
  .site-header--kreator{grid-template-columns:auto 1fr auto;overflow:hidden}
  .site-header--kreator .logo-mark{height:28px;margin-bottom:0}
  .site-header--kreator .logo-word{font-size:1.3rem}
  .path-tab{padding:.35rem .8rem}
}

/* ---------- buttons / forms (wspólne dla wszystkich stron) ---------- */
button,.btn{background:var(--signal);color:#fff;border:0;padding:.65rem 1.25rem;border-radius:999px;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:1rem;text-decoration:none;display:inline-block;transition:transform .14s ease}
button[hidden],.btn[hidden]{display:none !important}
button:hover,.btn:hover{transform:translateY(-1px)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button.secondary,.btn.secondary{background:none;border:1.5px solid var(--rule);color:var(--ink)}
button.line,.btn.line{background:var(--accent)}
table{width:100%;border-collapse:collapse;background:var(--liner-3)}
th,td{padding:.5rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-45)}
input,select,textarea{padding:.55rem .65rem;border:1.5px solid var(--rule);border-radius:10px;font:inherit;
  width:100%;max-width:24rem;background:var(--liner-3);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb, var(--accent) 30%, transparent);outline-offset:1px;border-color:var(--accent)}
form.inline{display:inline}
label{display:block;margin:.6rem 0 .2rem;font-weight:500}
.address-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem;align-items:start}
.address-form-grid .field{min-width:0}
.address-form-grid .field input{max-width:none}
.address-form-grid .field-full{grid-column:1 / -1}
@media (max-width:640px){.address-form-grid{grid-template-columns:1fr}}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-45);font-size:.9rem}

.card{position:relative;background:var(--liner-3);border:1px solid var(--rule);border-radius:var(--r);padding:1.1rem;margin-bottom:1rem}
.card::after{content:"";position:absolute;inset:6px;border:2px dashed var(--accent);border-radius:calc(var(--r) - 4px);opacity:.35;pointer-events:none}
.card > *{position:relative}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;background:var(--accent-wash);color:var(--accent-ink);font-family:var(--mono);font-size:.78rem}

/* chip pigułka JetBrains Mono, do rzędów faktów (hero, sekcja zaufania) */
.chip-row{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;background:var(--liner-3);
  color:var(--ink-70);border:1px solid var(--rule-soft);padding:.5rem .8rem;border-radius:999px;white-space:nowrap}
.chip.chip-accent{background:var(--accent-wash);color:var(--accent-ink);border-color:var(--accent)}

/* akordeon FAQ, oparty o <details>/<summary>, bez JS */
.faq-item{border-top:1px solid var(--rule-soft)}
.faq-item:last-child{border-bottom:1px solid var(--rule-soft)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-size:1.15rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--ink-45);font-family:var(--mono);font-size:1.3rem;flex:none}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{padding-bottom:1.1rem;color:var(--ink-70);max-width:44rem}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#C9C4BA;margin-top:3rem;padding:3rem 1.25rem 2rem}
.site-footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1.5fr;gap:2.5rem}
.site-footer-grid h3,.site-footer-grid .footer-heading{color:#FFFDF8;font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .8rem}
.footer-col{display:flex;flex-direction:column;gap:.6rem;font-size:.92rem;line-height:1.6}
.footer-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#FFFDF8 !important;
  font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .4rem}
.footer-brand img{width:40px;height:40px;object-fit:contain}
.footer-col .footer-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7C818C;margin-bottom:.2rem}
.footer-col a{color:#C9C4BA;text-decoration:none}
.footer-col a:hover{text-decoration:underline}
.footer-col .footer-pitch{margin:0 0 .4rem;max-width:22rem;line-height:1.55}
.services-block .seo-link{color:#FFFDF8;text-decoration:underline}
.site-footer .footer-legal{max-width:1180px;margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid #34373E;
  font-family:var(--mono);font-size:.78rem;color:#7C818C;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem}
.site-footer .footer-legal a{color:#C9C4BA;text-decoration:none}
.site-footer .footer-legal a:hover{text-decoration:underline}

.legal-doc{max-width:42rem;padding:2rem 0 3rem}
.legal-doc h2{margin:1.8rem 0 .7rem;font-size:1.25rem}
.legal-doc ol,.legal-doc ul{padding-left:1.25rem;margin:0 0 1rem}
.legal-doc li{margin:.35rem 0}
.legal-doc table{margin:1rem 0;font-size:.95rem}
.legal-doc th{width:8rem;color:var(--ink-45);font-weight:500}
.guide-list{list-style:none;padding:0;margin:1.6rem 0 0}
.guide-list li{border-top:1px solid var(--rule-soft);padding:1.15rem 0}
.guide-list a{text-decoration:none;color:inherit;display:block}
.guide-list h2{font-size:1.2rem;margin:0 0 .35rem}
.guide-list p{margin:0 0 .4rem;color:var(--ink-70)}
.legal-doc .btn{margin:.2rem .4rem .2rem 0}

.contact-form{max-width:36rem}
.contact-form input,.contact-form textarea{max-width:36rem}
.contact-form textarea{min-height:10rem;resize:vertical}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.contact-form-row input{max-width:none}
.contact-form--project{max-width:none}
.contact-form--project input,.contact-form--project textarea{max-width:none;width:100%}
.contact-form--project button{width:100%}
.contact-form--project input[type=file]{padding:.45rem .5rem}
.contact-form-note{margin-top:.4rem}
.contact-hp{position:absolute;left:-9999px;height:0;overflow:hidden}

.project-page{max-width:1040px;margin:1.4rem auto 3.5rem}
.project-hero{max-width:40rem;margin:0 0 1.8rem}
.project-kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .55rem}
.project-hero h1{font-size:clamp(1.85rem,4vw,2.55rem);letter-spacing:-.035em;margin-bottom:.7rem}
.project-hero .lead{margin-bottom:.9rem}
.project-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:2rem;align-items:start}
.project-copy p{color:var(--ink-70)}
.project-copy a{border-bottom:1.5px solid var(--cut)}
.project-form-wrap{background:var(--liner-3);border:1px solid var(--rule);border-left:6px solid var(--cut);
  border-radius:14px;padding:1.25rem 1.35rem 1.15rem}
.project-form-wrap h2{font-size:1.35rem;margin-bottom:.35rem}
.project-flow{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.project-flow li{background:var(--liner-3);border:1px solid var(--rule-soft);border-radius:14px;padding:1.05rem 1.1rem}
.project-flow .mono{display:block;color:var(--cut);font-size:.82rem;letter-spacing:.1em;margin-bottom:.45rem}
.project-flow strong{display:block;font-family:var(--display);font-size:1.12rem;margin-bottom:.3rem}
.project-flow p{margin:0;color:var(--ink-70);font-size:.95rem}
@media (max-width:860px){
  .project-layout,.project-flow,.contact-form-row{grid-template-columns:1fr}
  .project-layout{gap:1.4rem}
}
.legal-rev{margin-top:2rem}

.cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:.85rem 1.25rem;background:var(--ink);color:#C9C4BA;border-top:1px solid #34373E;
  font-size:.92rem}
.cookie-bar[hidden]{display:none !important}
.cookie-bar p{margin:0;max-width:52rem}
.cookie-bar a{color:#FFFDF8}
.cookie-bar button{flex:none}
.cookie-bar button.secondary{color:#FFFDF8;border-color:#C9C4BA;background:transparent}
.cookie-bar button.secondary:hover{background:rgba(255,253,248,.12);transform:none}
.cookie-bar-actions{display:flex;flex-wrap:wrap;gap:.5rem}
body[data-line] .cookie-bar{position:relative;bottom:auto;inset:auto}

@media (max-width:900px){
  .site-footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:560px){
  .site-footer-grid{grid-template-columns:1fr}
  .site-header{padding:.8rem 1rem}
}

/* sekcje ogólnego użytku (strona główna, strony treściowe) */
.section{padding:3rem 0}
.section-tight{padding:1.5rem 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.section-dark{background:var(--ink);color:#C9C4BA;border-radius:20px}