/* Styly webu oosm.digital. Většina vzhledu je inline v šablonách 1:1 podle
   návrhu v2; tady jsou globální pravidla z <helmet> návrhu, stavy po najetí
   myší (návrh: style-hover) a stavy, které přepíná web.js. */
html, body { margin: 0; padding: 0; background: #141414; }
* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
a { color: #FF00FF; text-decoration: none; }
a:hover { color: #FF5CFF; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
input, textarea, select, button { font-family: inherit; }
input:focus, textarea:focus { outline: 2px solid #FF00FF; outline-offset: 2px; }
::placeholder { color: #6B6F76; }
[data-logo]:hover { background: #FFFFFF !important; }
[data-logo]:hover img[data-white] { opacity: 0; }
[data-logo]:hover [data-color] { opacity: 1; }
[data-logo] img[data-white] { transition: opacity .25s ease; }
[data-logo] [data-color] { opacity: 0; transition: opacity .25s ease; }
[data-plus] [data-tip] { opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease; }
[data-plus][data-hint="1"] [data-tip] { opacity: 1; transform: translate(-50%, 0); }
@media (pointer: coarse) { [data-plus]:hover [data-tip] { opacity: 1; transform: translate(-50%, 0); } }
@keyframes oosmRing { 0% { box-shadow: 0 0 0 0 rgba(255,0,255,.75); } 100% { box-shadow: 0 0 0 16px rgba(255,0,255,0); } }
@keyframes oosmO {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r0)) skewX(var(--sk)) scale(.15); }
  14%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r1)) skewX(var(--sk)) scale(1.12); }
  24%  { transform: translate(-50%, -50%) rotate(var(--r2)) skewX(var(--sk)) scale(.96); }
  72%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r2)) skewX(var(--sk)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 26px)) rotate(var(--r1)) skewX(var(--sk)) scale(.9); }
}
@keyframes oosmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes oosmWordIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes oosmPulse {
  0%   { transform: scale(1);    opacity: .38; }
  50%  { transform: scale(1.09); opacity: .52; }
  100% { transform: scale(1);    opacity: .38; }
}

/* Kotvy pod lepkavou hlavičkou (návrh odsazoval o 70 px skriptem). */
[id] { scroll-margin-top: 70px; }

/* Stavy po najetí myší (style-hover / style-focus z návrhu). */
.hv1:hover{color:#FFFFFF !important}
.hv2:hover{background:#FFFFFF !important;color:#141414 !important}
.hv3:hover{border-color:#FFFFFF !important}
.hv4:hover{color:#FF00FF !important}
.hv5:hover{border-color:#FF00FF !important;color:#FF00FF !important}
.hv6:hover{background:#FF5CFF !important}
.hv7:hover{filter:grayscale(0) !important}
.hv8:hover{border-top-color:#FFFFFF !important}
.hv9:hover{border-color:rgba(255,0,255,.55) !important}
.hv10:hover{background:rgba(255,0,255,.9) !important;border-color:rgba(255,0,255,.9) !important;color:#141414 !important}
.hv11:hover{background:rgba(255,0,255,.9) !important;color:#141414 !important}
.hv12:hover{background:#FF00FF !important;color:#141414 !important}
.fc1:focus{border-bottom-color:#FF00FF !important;outline:none !important}
.hv13:hover{background:rgba(255,0,255,.32) !important}
.hv14:hover{border-color:rgba(255,0,255,.6) !important}

/* Tlačítka služeb na titulce: tři stavy z návrhu (isOff / isHint / isOn). */
.sluzba-btn { padding: 10px 16px; background: transparent; border: 1px solid rgba(255,255,255,.28); color: #FFFFFF; font-size: 14.5px; font-weight: 500; cursor: pointer; font-family: inherit; }
.sluzba-btn:hover { border-color: #FF00FF; color: #FF00FF; }
[data-hint="1"] > .sluzba-btn { border-color: #FF00FF; color: #FF00FF; font-weight: 600; animation: oosmRing 1.1s ease-out 3; }
.sluzba-btn[data-sel] { background: #FF00FF; border-color: #FF00FF; color: #FFFFFF; font-weight: 700; animation: none; }
.sluzba-btn[data-sel]:hover { background: #FF5CFF; color: #FFFFFF; }
.sluzba-btn .zap { display: none; }
.sluzba-btn[data-sel] .zap { display: inline; }
.sluzba-btn[data-sel] .vyp { display: none; }
[data-plus].vybrano [data-tip] { display: none; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Text článku blogu (rich text). */
.clanek-text p, .clanek-text li { color: #C3C6CC; font-size: 17px; line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
.clanek-text p { margin: 0; }
.clanek-text ul, .clanek-text ol { margin: 0; padding-left: 1.2em; max-width: 68ch; }
.clanek-text a { color: #FF00FF; text-decoration: underline; }

/* ── Z produkce (app.dc.html 2026-11-12): plovoucí sociální sítě, mobilní menu ── */
.hv15:hover { background: #FF00FF !important; border-color: #FF00FF !important; }
img { max-width: 100%; }
[data-m="soclbl"] { display: none; }
html, body { overflow-x: clip; }
@media (max-width: 960px) {
  header[data-m="hdr"] { flex-wrap: wrap; padding: 10px 20px !important; gap: 0 12px !important; }
  header[data-m="hdr"] > a img { height: 34px !important; }
  [data-m="burger"] { display: flex !important; }
  header[data-m="hdr"] [data-m="nav"] { display: none !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 10px 0 16px; font-size: 18px !important; }
  header[data-m="hdr"][data-open="1"] [data-m="nav"] { display: flex !important; max-height: calc(100vh - 70px); overflow-y: auto; }
  header[data-m="hdr"] [data-m="nav"] a { padding: 15px 2px !important; border-bottom: 1px solid rgba(255,255,255,.09); color: #FFFFFF !important; }
  header[data-m="hdr"] [data-m="nav"] [data-m="soclbl"] { display: inline; }
  header[data-m="hdr"] [data-m="nav"] a:last-child { margin-top: 16px; border-bottom: 0; text-align: center; padding: 16px 20px !important; }
}
/* Selektory podle inline stylů: produkce je má z Reactu s mezerou
   („padding: 96px"), šablony bez ní („padding:96px"). */
@media (max-width: 700px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding:128px"], section[style*="padding:96px"] { padding-top: 72px !important; }
  section#top { padding-top: 56px !important; }
  #top h1 { margin-bottom: 32px !important; font-size: clamp(44px, 13vw, 64px) !important; }
  [data-m="cta"] { justify-content: stretch !important; }
  [data-m="cta"] a { flex: 1 1 100%; text-align: center; padding: 16px 20px !important; }
  [data-m="stats"] { grid-template-columns: 1fr 1fr !important; }
  [data-m="stats"] > div { padding: 22px 12px 22px 0 !important; }
  [data-m="brands"] { grid-template-columns: 1fr 1fr !important; gap: 4px !important; padding-top: 16px !important; }
  [data-m="brands"] a { height: 112px !important; }
  [data-m="brands"] a > span { inset: 24px 18px !important; }
  [data-m="team"] { grid-template-columns: 1fr 1fr !important; gap: 24px 14px !important; }
  [data-m="team"] a { gap: 10px !important; }
  [data-m="team"] a div[style*="font-size:20px"] { font-size: 16px !important; }
  [data-m="team"] a div[style*="font-size:13px"] { font-size: 11px !important; }
  input, textarea, select { font-size: 16px !important; }
  [data-m="socfloat"] { top: auto !important; bottom: 16px; transform: none !important; right: 12px !important; }
  [data-m="socfloat"] a { width: 40px !important; height: 40px !important; }
}