/* qd.ua — доповнення до Tailwind (CDN): поля форм, тексти статей, FAQ. Кольори — як у tailwind.config теми. */

:root { --qd-pink: #fd3774; --qd-red: #ff004f; --qd-light: #ff6a98; --qd-pastel: #ff92b3; }

::selection { background: var(--qd-pink); color: #000; }
:focus-visible { outline: 2px solid var(--qd-pastel); outline-offset: 3px; }
html { scroll-padding-top: 6rem; }

/* Поля форми заявки */
.lead-input {
  width: 100%;
  min-width: 0;
  background: #000;
  border: 1px solid rgba(253, 55, 116, .55);
  color: #ffe4e6;
  padding: 1rem;
  font: inherit;
  font-size: .9375rem;
  border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
}
.lead-input::placeholder { color: rgba(253, 55, 116, .35); }
.lead-input:hover { border-color: var(--qd-pink); }
.lead-input:focus { outline: none; border-color: var(--qd-pastel); box-shadow: 0 0 0 1px var(--qd-pastel); }
.lead-input[aria-invalid="true"] { border-color: var(--qd-red); box-shadow: 0 0 0 1px var(--qd-red); }
select.lead-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fd3774'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; padding-right: 3rem;
}
select.lead-input option { background: #000; color: #ffe4e6; }
textarea.lead-input { resize: vertical; min-height: 7rem; }

/* iPhone і iPad збільшують сторінку, якщо в полі шрифт менший за 16px: на сенсорних екранах — 16px */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}

/* Відкрите вікно заявки — сторінка під ним не прокручується */
body.modal-open { overflow: hidden; }

/* FAQ на <details> */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-plus { transition: transform .25s; }
.faq details[open] summary .faq-plus { transform: rotate(45deg); color: var(--qd-red); }

/* Текст статті блогу */
.post-body { font-size: 1rem; line-height: 1.85; color: rgba(255, 228, 230, .9); }
@media (min-width: 768px) { .post-body { font-size: 1.0625rem; } }
.post-body > * + * { margin-top: 1.25em; }
.post-body h2 { margin-top: 2.6em; font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 1.6em; line-height: 1.2; color: #fff; text-transform: none; }
.post-body h2::before { content: "#"; color: var(--qd-pink); margin-right: .35em; font-family: ui-monospace, monospace; font-weight: 400; }
.post-body h3 { margin-top: 2em; font-weight: 700; font-size: 1.2em; color: var(--qd-pastel); }
.post-body a { color: var(--qd-pastel); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 146, 179, .45); }
.post-body a:hover { color: var(--qd-pink); text-decoration-color: var(--qd-pink); }
.post-body strong { color: #fff; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body ul { list-style: none; padding-left: 0; }
.post-body ul > li { position: relative; padding-left: 1.6em; }
.post-body ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6em; height: .6em; background: var(--qd-pink); border-radius: 50% 50% 0 50%; }
.post-body ol { list-style: decimal-leading-zero; }
.post-body ol > li::marker { color: var(--qd-pink); }
.post-body li + li { margin-top: .5em; }
.post-body blockquote { border-left: 3px solid var(--qd-pink); background: rgba(255, 255, 255, .04); padding: 1.1em 1.4em; color: #fff; }
.post-body blockquote p { margin: 0; }
.post-body code { background: rgba(253, 55, 116, .12); color: var(--qd-pastel); padding: .15em .4em; font-size: .9em; }
.post-body pre { background: #0b0b0b; border: 1px solid rgba(253, 55, 116, .2); padding: 1.2em; overflow-x: auto; }
.post-body pre code { background: none; padding: 0; color: #ffe4e6; }
.post-body hr { border: 0; height: 1px; background: rgba(253, 55, 116, .25); margin: 3em 0; }
.post-body img { width: 100%; height: auto; }
.post-body table { width: 100%; border-collapse: collapse; font-size: .9em; display: block; overflow-x: auto; }
.post-body th { text-align: left; color: var(--qd-pink); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: .8em; }
.post-body th, .post-body td { border-bottom: 1px solid rgba(253, 55, 116, .2); padding: .8em 1em .8em 0; vertical-align: top; }

/* Зміст статті (будує script.js з заголовків h2) */
.toc a { display: block; padding: .45rem 0 .45rem 1rem; border-left: 1px solid rgba(253, 55, 116, .2); opacity: .7; transition: all .2s; }
.toc a:hover, .toc a.is-active { opacity: 1; color: var(--qd-pink); border-left-color: var(--qd-pink); }

/* Картка роботи: знизу — градієнт кольору нижнього краю фото, до середини прозорий (колір визначає script.js) */
.card-tint { --tint: 10 10 10; }
.card-tint__fade { background: linear-gradient(to top, rgb(var(--tint)) 0%, rgb(var(--tint) / .94) 28%, rgb(var(--tint) / .6) 55%, rgb(var(--tint) / 0) 100%); transition: background .4s; }
.card-tint__text { color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.card-tint[data-tone="light"] .card-tint__text { color: #111; text-shadow: none; }
.card-tint[data-tone="light"] .card-tint__url { color: #111; opacity: .7; }
.card-tint[data-tone="light"] .card-tint__text > span:first-child { color: #000; }

/* Скриншоти сайту на сторінці проєкту: «вікно браузера», прогортання при наведенні, перегляд повністю */
.shot-frame { aspect-ratio: 16 / 10; }
.shot-img { object-position: 50% 0; transition: object-position 7s cubic-bezier(.45, 0, .55, 1); }
.shot button:hover .shot-img, .shot button:focus-visible .shot-img, button.shot:hover .shot-img, button.shot:focus-visible .shot-img { object-position: 50% 100%; transition-duration: 9s; }
@media (min-width: 768px) {
  .shots > .shot:first-child, .shots > .shot:last-child:nth-child(even) { grid-column: span 2; }
  .shots > .shot:first-child .shot-frame, .shots > .shot:last-child:nth-child(even) .shot-frame { aspect-ratio: 16 / 8; }
}
.shot-viewer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #000; }
.shot-viewer[hidden] { display: none; }
.shot-viewer__bar { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid rgba(253, 55, 116, .2); }
.shot-viewer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1rem 4rem; }
.shot-viewer__scroll img { display: block; width: 100%; max-width: 1280px; height: auto; margin: 0 auto; box-shadow: 0 0 0 1px rgba(253, 55, 116, .25); }
.shot-viewer button { color: var(--qd-pastel); padding: .5rem .75rem; border: 1px solid rgba(253, 55, 116, .4); }
.shot-viewer button:hover { color: #000; background: var(--qd-pink); }
.shot-viewer button[disabled] { opacity: .3; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Кольори з адмінки: «Колір тексту на обкладинці» (--ct) і «Колір адреси сайту» (--cu) — сильніші за авто-тон */
.card-tint__text[style*="--ct"] { color: var(--ct); text-shadow: none; }
.card-tint .card-tint__text[style*="--ct"] > span:not(.card-tint__url) { color: var(--ct); }
.card-tint .card-tint__url[style*="--cu"] { color: var(--cu); opacity: 1; }
/* Проєкти шаховим порядком: сітка 10 колонок, рядки 10vw (розкладку ставить script.js) */
.is-checker { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; grid-auto-rows: 10vw; }
.is-checker > a, .is-checker .card-box { height: 100%; }
.is-checker .card-img { aspect-ratio: auto; height: 100%; }
/* Технології: білі логотипи, кольорові — при наведенні */
.tech-logo { filter: brightness(0) invert(1); transition: filter .3s, transform .3s; }
@media (hover: hover) and (pointer: fine) { .tech-cell:hover .tech-logo { filter: none; } }