/* Salon La Strega: shared tokens, header, footer and buttons for every page */
/* logo script font, self-hosted with font-display:block so the logo never flashes in a fallback font */
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/allura-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/allura-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bar:#171c22; --stone:#7A6C64; --stone-2:#9A8B82; --mist:#F2EDE8; --paper:#FBF8F5; --cream:#F6EEE6;
  --ink:#2B2522; --mute:#776C66; --copper:#C2602A; --red:#E30000;
  --serif:'Jost',system-ui,sans-serif; --script:'Allura',cursive; --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font:400 16px/1.7 var(--sans)}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* header: transparent over the hero, turns solid once the page scrolls */
header{position:fixed;top:0;left:0;right:0;z-index:20;color:#fff;
  background:rgba(23,28,34,.42);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.14);text-shadow:0 1px 8px rgba(0,0,0,.35);transition:background .35s,border-color .35s}
header.scrolled{background:rgba(23,28,34,.92);border-bottom-color:rgba(255,255,255,.06)}
header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:88px;transition:height .35s}
header.scrolled .wrap{height:66px}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;white-space:nowrap;justify-self:center}
.logo span{font:400 42px/1 var(--script);color:#fff;transition:font-size .35s}
/* tagline: a touch larger and a slightly lighter red so it stays readable on the dark bar (AA contrast) */
.logo small{margin:3px 0 0;padding-top:3px;font:600 11px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#FF3B3B;transition:opacity .3s,max-height .3s;max-height:20px;overflow:hidden}
header.scrolled .logo span{font-size:34px}
header.scrolled .logo small{opacity:0;max-height:0}
nav ul{display:flex;gap:30px;list-style:none;padding:0}
nav a{position:relative;display:block;padding:10px 0;font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff;transition:text-shadow .3s}
/* hover: red line grows from the centre outwards under the label */
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
nav a.shop{display:flex;align-items:center;gap:7px}
nav a.shop svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:-2px}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
.nav-l{justify-self:end;margin-right:12px}
.right{display:flex;align-items:center;justify-self:stretch;margin-left:12px}
.tools{display:flex;align-items:center;gap:18px;margin-left:auto}
.mobile-nav{display:none}
.book{display:inline-flex;align-items:center;white-space:nowrap;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:15px 24px;background:linear-gradient(#A30000,#A30000) center/0% 100% no-repeat,var(--red);color:#fff;border-radius:2px;box-shadow:0 6px 18px rgba(227,0,0,.3);text-shadow:none;transition:background-size .45s cubic-bezier(.2,.7,.2,1),transform .3s,box-shadow .3s}
.book:hover,.book:focus-visible{background-size:100% 100%,auto;transform:translateY(-2px);box-shadow:0 12px 26px rgba(227,0,0,.4)}
.burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;right:11px;height:1.5px;background:#fff;content:"";transition:transform .3s,opacity .3s}
.burger span{top:50%}
.burger span::before{left:0;right:0;top:-6px}
.burger span::after{left:0;right:0;top:6px}
header.open .burger span{background:transparent}
header.open .burger span::before{transform:translateY(6px) rotate(45deg)}
header.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
section[id]{scroll-margin-top:66px}

@media (max-width:1240px){nav ul{gap:20px}nav a{letter-spacing:.1em}}
@media (max-width:1180px){nav ul{gap:16px}}


/* "Služby" submenu */
nav .has-sub{position:relative}
nav .has-sub>a{display:flex;align-items:center;gap:6px}
nav .has-sub>a svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s}
nav .sub{display:block;position:absolute;top:100%;left:-20px;min-width:220px;padding:10px 0;margin-top:14px;background:rgba(23,28,34,.97);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s,visibility .25s}
nav .sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
nav .has-sub:hover .sub,nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
nav .has-sub:hover>a svg,nav .has-sub:focus-within>a svg{transform:rotate(180deg)}
nav .sub a{padding:13px 20px;font-size:12px;letter-spacing:.12em;text-shadow:none}
nav .sub a::after{display:none}
nav .sub a:hover,nav .sub a[aria-current]{color:var(--red);background:rgba(255,255,255,.04)}
nav a[aria-current]::after{transform:scaleX(1)}
/* keep the Služby underline while its submenu is open */
nav .has-sub:hover>a::after,nav .has-sub:focus-within>a::after{transform:scaleX(1)}
.mobile-nav .sub-m a{padding-left:18px;font-size:12px;color:#D9CEC7}

.btn{display:inline-block;align-self:flex-start;background-color:var(--bar);background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-position:center;background-size:0% 100%;color:#fff;padding:14px 26px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .3s,transform .3s,box-shadow .3s}
.btn:hover,.btn:focus-visible{background-size:100% 100%;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(227,0,0,.3)}

/* footer: copyright + GDPR left, Facebook centre, author credit right */
footer{background:var(--bar);color:#A89D96;font-size:13px;border-top:1px solid rgba(255,255,255,.06)}
footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 32px;padding-top:26px;padding-bottom:26px}
footer a{color:#A89D96;text-decoration:none;transition:color .25s}
footer .f-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
footer .f-l a{position:relative;padding-left:22px}
footer .f-l a::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#4A535D}
footer .fb{display:inline-flex;align-items:center;gap:8px}
footer .fb svg{width:28px;height:28px;padding:6px;border:1px solid #38424D;border-radius:50%;fill:currentColor;transition:border-color .25s,background .25s}
footer .fb:hover svg{border-color:var(--red);background:var(--red);color:#fff}
footer a:hover,footer a[aria-current]{color:#fff}
footer .made{justify-self:end;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7E8790}
/* lighter brand red so the credit stays readable (AA) on the dark bar */
footer .made b{margin-left:4px;font-weight:600;color:#FF3B3B;transition:color .25s}
footer .made:hover b{color:#fff}
@media (max-width:860px){
  footer .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  footer .f-l{flex-direction:column;gap:8px}
  footer .f-l a{padding-left:0}
  footer .f-l a::before{display:none}
  footer .made{justify-self:center}
}

/* subpage head */
header.solid{background:rgba(23,28,34,.97);border-bottom-color:rgba(255,255,255,.06)}
.page-head{background:var(--bar);color:#fff;padding:160px 0 72px}
.crumb{font:500 12px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#B2A69F;margin-bottom:22px}
.crumb a{color:#B2A69F;text-decoration:none;transition:color .25s}
.crumb a:hover{color:var(--red)}
.page-head h1{font:500 clamp(30px,4vw,52px)/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;max-width:20em}
.page-head h1::after{content:"";display:block;width:48px;height:2px;margin-top:24px;background:var(--red)}
.page-head .lead{margin-top:22px;color:#D9CEC7;max-width:40em;font-size:17px}
.page-head .meta{margin-top:8px;font-size:14px;color:#B2A69F}
/* page head with a photo on the right that melts into the dark bar */
.page-head.has-ph{position:relative;overflow:hidden;padding-bottom:96px}
.page-head.has-ph .wrap{position:relative;z-index:1}
.ph-bg{position:absolute;top:0;right:0;width:64%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.62);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 70%)}
.page-head.has-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,28,34,.75),transparent 40%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .ph-bg{animation:ph-in 9s cubic-bezier(.2,.6,.3,1) both}
  @keyframes ph-in{from{transform:scale(1.1);opacity:0}12%{opacity:1}to{transform:scale(1)}}
}

/* header switches to logo + burger before the links run out of room */
@media (max-width:1100px){
  header .wrap{grid-template-columns:1fr auto;height:72px}
  header.scrolled .wrap{height:62px}
  .logo span{font-size:32px}
  .logo small{font-size:9px;letter-spacing:.2em}
  header.scrolled .logo span{font-size:30px}
  .burger{display:block}
  .nav-l,.nav-r{display:none}
  .logo{justify-self:start;align-items:flex-start;grid-column:1}
  .logo small{margin-left:3px}
  .right{grid-column:2;margin-left:0}
  .mobile-nav{display:block;position:absolute;top:100%;left:0;right:0;background:rgba(23,28,34,.97);max-height:0;overflow:hidden;transition:max-height .4s ease}
  header.open .mobile-nav{max-height:420px}
  header.open{background:rgba(23,28,34,.97)}
  .mobile-nav ul{flex-direction:column;gap:0;padding:8px 16px 20px}
  .mobile-nav a{padding:16px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-nav a::after{display:none}
  .mobile-nav a:hover{color:var(--red)}
}
@media (max-width:980px){
  .wrap{padding:0 16px}
  .book{padding:11px 12px;font-size:11px;letter-spacing:.1em}
  .tools{gap:10px}
  header .wrap{gap:12px}
  .page-head{padding:124px 0 52px}
  .page-head.has-ph{padding-bottom:64px}
  .ph-bg{width:100%;filter:saturate(.9) brightness(.42);-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 60%);mask-image:linear-gradient(0deg,transparent 0%,#000 60%)}
}
@media (max-width:360px){.book{display:none}}
@media (prefers-reduced-motion:reduce){.btn,.book{transition:none}.btn:hover,.book:hover{transform:none}}

/* page-to-page smoothness */
/* keep the scrollbar's space reserved so pages of different length never shift sideways */
html{scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* cross-document view transitions: the page cross-fades with a slight rise, the header stays put */
  @view-transition{navigation:auto}
  header{view-transition-name:site-header}
  ::view-transition-old(root){animation:.28s cubic-bezier(.4,0,1,1) both vt-out}
  ::view-transition-new(root){animation:.45s cubic-bezier(.2,.7,.2,1) .06s both vt-in}
  ::view-transition-group(site-header){animation-duration:.35s}
  @keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}