/*
 * Kode Kreatif / Daniels Creative V3.2 — Layout parity hotfix.
 * SOURCE OF TRUTH: original reference bootstrap.min.css + style.css + imported main.css.
 * All original grid widths, paddings, margins, and image aspect ratios remain authoritative.
 * Deliberately do not add min-heights or aspect ratios to portfolio/services/blog.
 * Scoped additions below only affect CMS-only components and accessibility.
 */

/* The site is one-page and reference ScrollIt supplies its own scroll animation. */
html { scroll-behavior: auto; }

/* Unusually long admin-edited strings should not introduce horizontal scrollbars. */
body { overflow-x: hidden; }
.services .item p, .contact .info p { overflow-wrap: anywhere; }

/* Keep image overlay above the media as in the original template. */
.portfolio .item-img-overlay { z-index: 2; }

/* Keyboard filter accessibility without changing its default geometry. */
.portfolio .filtering span { cursor: pointer; }
.portfolio .filtering span:focus-visible { outline: 2px solid #333; outline-offset: 4px; }

/* The original main.css styles .blog .post-img as a DIV.
   CMS uses a link with the same class, which must remain a block box. */
.blog .pitem .post-img { display: block; }

/* Contact: Laravel-specific loading and bot protection, no layout shift. */
.kk-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.kk-submit { border: 1px solid #1c1c1c; cursor: pointer; font-family: inherit; }
.kk-submit:disabled { cursor: wait; opacity: .65; }
.contact .form input:focus, .contact .form textarea:focus { outline: 2px solid #bbb !important; outline-offset: 1px; }
.loading { pointer-events: none; }

/* Blog-detail page is an extension, not part of the original one-page reference. */
.kk-article-header { background: #f7f7f7; padding: 90px 0 70px; text-align: center; }
.kk-article-header h1 { font-size: clamp(28px, 3vw, 43px); font-weight: 800; line-height: 1.3; margin: 10px 0 18px; }
.kk-article-header .kk-tag { display: inline-block; font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #777; }
.kk-article { max-width: 900px; padding-top: 65px; padding-bottom: 90px; }
.kk-article .kk-cover { width: 100%; max-height: 500px; object-fit: cover; margin-bottom: 35px; }
.kk-article .kk-lead { font-size: 19px; font-weight: 500; margin-bottom: 25px; color: #555; }
.kk-article .kk-text { white-space: pre-line; line-height: 1.9; font-size: 15px; color: #555; }
.kk-article .kk-back { display: inline-block; margin-top: 35px; padding: 12px 25px; background: #1c1c1c; color: #fff; border-radius: 3px; }
.kk-article .kk-back:hover { background: #fff; color: #1c1c1c; box-shadow: inset 0 0 0 1px #1c1c1c; }

/* Mobile: let the ORIGINAL style.css media queries control spacing,
   including navbar margins and .hero-img bottom margin (80px <=991px). */
@media (max-width: 767px) {
  .navbar-default .navbar-collapse { max-height: 80vh; overflow-y: auto; }
  .kk-article-header { padding: 65px 15px 55px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .skills-progress span, .blog .pitem img, .portfolio .item-img-overlay { transition: none !important; }
}

/* Article formatting only, no changes to Daniels one-page spacing. */
.kk-article-body{overflow-wrap:anywhere;white-space:normal}
.kk-article-body p{margin:0 0 1.25em;line-height:1.9}
.kk-article-body h2{font-size:26px;font-weight:700;line-height:1.4;margin:1.6em 0 .6em}
.kk-article-body h3{font-size:21px;font-weight:700;line-height:1.45;margin:1.4em 0 .6em}
.kk-article-body ul,.kk-article-body ol{padding-left:2em;margin:0 0 1.2em}
.kk-article-body li{line-height:1.85;margin-bottom:.4em;list-style:inherit}
.kk-article-body ul li{list-style:disc}
.kk-article-body ol li{list-style:decimal}
.kk-article-body a{color:#2668c9;text-decoration:underline}
.kk-article-body blockquote{border-left:4px solid #bbb;padding:12px 20px;margin:20px 0;background:#f8f8f8}
.kk-article-body pre{background:#20232a;color:#f8f8f8;padding:18px;overflow-x:auto;border-radius:8px}
.kk-article-body code{font-family:monospace}
.kk-article-body .ql-align-center{text-align:center}
.kk-article-body .ql-align-right{text-align:right}
.kk-article-body .ql-align-justify{text-align:justify}

.kk-article-body ol li[data-list="bullet"]{list-style:disc}
.kk-article-body li.ql-indent-1{margin-left:1.5em}
.kk-article-body li.ql-indent-2{margin-left:3em}
.kk-article-body li.ql-indent-3{margin-left:4.5em}
.kk-article-body li.ql-indent-4{margin-left:6em}
.kk-article-body li.ql-indent-5{margin-left:7.5em}
.kk-article-body li.ql-indent-6{margin-left:9em}
.kk-article-body li.ql-indent-7{margin-left:10.5em}
.kk-article-body li.ql-indent-8{margin-left:12em}