/* Sprint L4: blog detail page (/blog/<slug>/, /en/blog/<slug>/; App_Code/LuviBlogArticle.cs), linked from the page head
   after main.css (same method as luvi-contact.css; masters unchanged). Structure follows the penilprotezi.com.tr article
   template; look comes from the Luvi theme only:
   - breadcrumb = the product page breadcrumb (.luvi-product-breadcrumb, main.css);
   - dates = the post meta labels (.post_meta .meta_label, main.css);
   - table of contents = the blog list sidebar list (.sidebar_widget .category_list_block, main.css);
   - channel block = the article body typography (.blog-detail-content h2/h3/p, main.css) and the related cards'
     "İçeriği İncele →" link (.xb-item--det-btn: values copied from main.css .blog-details_item .xb-item--det-btn,
     without text-transform, as .luvi-product-card does, so e-mail and phone texts stay as written);
   - colours: theme values only (#464646, #b38a5c, #765b3d); no new fonts.
   Article body typography (18px / 1.85, h2 32px with 42/18px margins, p 24px) is already equal to the penil article and
   is not changed; prose width = the container, as on penil. Spacing and layout only. */

/* Breadcrumb and dates */
.luvi-blog-detail .luvi-product-breadcrumb{margin-bottom:28px}
.luvi-blog-detail .luvi-blog-dates{flex-wrap:wrap;gap:8px 32px;margin:-6px 0 32px;font-size:16px}

/* Table of contents (>= 3 body H2), inserted in the body right before the first H2 */
.luvi-blog-detail .luvi-blog-toc{margin:8px 0 44px}
.luvi-blog-detail .luvi-blog-toc .sidebar_widget_title{margin-bottom:12px}
.luvi-blog-detail .blog-detail-content .luvi-blog-toc .category_list_block{margin:0;padding:0}
.luvi-blog-detail .luvi-blog-toc .category_list_block li{margin:0}
.luvi-blog-detail .luvi-blog-toc .category_list_block a{padding:10px 0 12px;font-size:18px;line-height:1.45;justify-content:flex-start;text-decoration:none}
.luvi-blog-detail .blog-detail-content h2[id]{scroll-margin-top:120px}

/* Order: article > FAQ > divider > channel block > divider > related cards. Without a FAQ the divider keeps the former
   48px under the text (the article block's 80px bottom padding is dropped only then). */
.luvi-blog-detail .item_details_content:has(+ .luvi-blog-end-divider){padding-bottom:0}
.luvi-blog-detail .luvi-blog-end{padding:35px 0 0}
.luvi-blog-detail .luvi-blog-end #luvi-blog-end-title{margin-top:0}
.luvi-blog-detail .luvi-blog-end p:last-child{margin-bottom:0}
.luvi-blog-detail .luvi-blog-end__channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:42px}
.luvi-blog-detail .luvi-blog-end__channel{display:flex;flex-direction:column}
.luvi-blog-detail .luvi-blog-end__channel h3{margin-top:0}
.luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn{position:relative;display:inline-flex;align-self:flex-start;align-items:center;gap:15px;margin-top:auto;padding-bottom:5px;font-weight:700;font-size:18px;line-height:12px;letter-spacing:-0.02em;color:#464646;text-decoration:none;overflow-wrap:anywhere;transition:.3s}
.luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn i{transition:.3s}
.luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn::before{position:absolute;content:'';bottom:0;left:0;height:2px;width:100%;background:#464646;transition:.3s}
.luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn:hover{color:#b38a5c}
.luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn:hover i{transform:translateX(5px)}
.luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn:hover::before{background:#b38a5c}
/* Symmetric: last action line -> divider 51px (16px hr margin + 35px block padding above the heading); divider -> related
   heading 48px (= article text -> first divider). */
.luvi-blog-detail .luvi-blog-end + .luvi-blog-end-divider{margin:51px 0 48px}

/* Keyboard focus of the new links: theme brown (#765b3d, 6.3:1 on white) instead of the light ring (#c99a5b, 2.5:1) */
.luvi-blog-detail .luvi-product-breadcrumb a:focus-visible,
.luvi-blog-detail .luvi-blog-toc a:focus-visible,
.luvi-blog-detail .luvi-blog-end a:focus-visible{outline:3px solid #765b3d;outline-offset:3px}

/* Sprint L4-ek (owner decision 4, L4-A): article body links = the Luvi text link already on this page (breadcrumb:
   #765b3d, underlined, 4px offset; 6.3:1 on white, 5.84:1 on the #f6f6f8 end of the section ground) instead of the
   Bootstrap #0d6efd without underline (4.17:1, told apart by colour only). Hover and keyboard focus stay the theme's:
   a:hover {color: inherit} (body text colour, still underlined) and the 3px #c99a5b ring of luvi-a11y-compat.css.
   The table of contents, channel block, breadcrumb and related cards are outside these selectors. */
.luvi-blog-detail .item_details_content > .blog-detail-content a:not(.luvi-blog-toc a){text-decoration:underline;text-underline-offset:4px}
.luvi-blog-detail .item_details_content > .blog-detail-content a:not(.luvi-blog-toc a):not(:hover){color:#765b3d}

@media (max-width:991.98px){
  .luvi-blog-detail .luvi-blog-end__channels{grid-template-columns:1fr;gap:42px}
}
/* Phones: 44px touch height by padding; the link underline keeps its 3px distance to the text */
@media (max-width:767.98px){
  .luvi-blog-detail .luvi-product-breadcrumb{margin-bottom:12px}
  .luvi-blog-detail .luvi-product-breadcrumb a{display:inline-block;padding:12px 0}
  .luvi-blog-detail .luvi-blog-dates{font-size:15px}
  .luvi-blog-detail .luvi-blog-toc .category_list_block a{font-size:17px}
  .luvi-blog-detail .luvi-blog-end{padding-top:25px}
  .luvi-blog-detail .luvi-blog-end + .luvi-blog-end-divider{margin:41px 0 40px}
  .luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn{padding:22px 0 10px}
  .luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn::before{bottom:5px}
}
@media (prefers-reduced-motion:reduce){
  .luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn,
  .luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn i,
  .luvi-blog-detail .luvi-blog-end__channel .xb-item--det-btn::before{transition:none}
}