/* ComfyUI guides extend Automate's existing article and resource surfaces. */
.guide-hero { padding: 128px 0 56px; }
.guide-hero .hero-title { max-width: 1000px; margin-inline: auto; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.16; text-wrap: balance; }
.guide-hero .hero-subtitle { max-width: 78ch; margin: 24px auto; }
.guide-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin-top: 28px; }
.guide-secondary { color: #ffac47; text-decoration: underline; text-underline-offset: 4px; }
.comfy-guide { max-width: 960px; margin: 0 auto; padding: 48px 24px 64px; color: #222; background: #fff; font-size: 1.05rem; line-height: 1.8; overflow-wrap: anywhere; }
.comfy-guide p, .comfy-guide ul, .comfy-guide ol { margin: 0 0 24px; }
.comfy-guide ul, .comfy-guide ol { padding-left: 1.5em; }
.comfy-guide li { margin-bottom: 8px; }
.comfy-guide h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.3; color: #020035; margin: 48px 0 20px; text-align: left; scroll-margin-top: 100px; }
.comfy-guide h3 { font-size: 1.25rem; color: #020035; line-height: 1.4; margin: 32px 0 16px; }
.comfy-guide a, .comfy-resource-index a { color: #a84300; text-decoration: underline; text-underline-offset: 3px; }
.comfy-guide a:hover, .comfy-resource-index a:hover { color: #020035; }
.comfy-guide figure { margin: 32px 0; }
.comfy-guide img, .comfy-guide video { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; }
.comfy-guide audio { max-width: 100%; width: 100%; }
.comfy-guide figcaption { font-size: .9rem; color: #50505b; margin-top: 12px; line-height: 1.6; }
.comfy-guide .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comfy-guide table { border-collapse: collapse; width: 100%; min-width: 580px; font-size: .95rem; line-height: 1.6; }
.comfy-guide th, .comfy-guide td { padding: 12px 16px; text-align: left; vertical-align: top; border: 1px solid #d8d8e1; }
.comfy-guide th { background: #020035; color: #fff; }
.comfy-guide tr:nth-child(even) td { background: #f6f6f9; }
.comfy-guide pre { max-width: 100%; overflow-x: auto; padding: 20px; border-radius: 8px; background: #f2f2f6; font-size: .9rem; line-height: 1.65; white-space: pre-wrap; }
.comfy-guide code { font-size: .9em; }
.comfy-guide details { padding: 16px 20px; border: 1px solid #d8d8e1; border-radius: 8px; margin: 24px 0; }
.comfy-guide summary { cursor: pointer; font-weight: 700; color: #020035; }
.comfy-guide details[open] summary { margin-bottom: 16px; }
.guide-breadcrumb { font-size: .9rem; margin-bottom: 32px; }
.guide-next { margin-top: 48px; padding-top: 12px; border-top: 1px solid #d8d8e1; }
.comfy-resource-index { max-width: 1100px; margin: 48px auto; padding: 32px 24px; color: #222; background: #fff; }
.comfy-resource-index h2 { color: #020035; font-size: 2rem; margin-bottom: 20px; }
.comfy-resource-index h3 { color: #020035; font-size: 1.4rem; margin: 32px 0 20px; }
.comfy-resource-index p { line-height: 1.7; margin-bottom: 20px; }
.comfy-guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; padding: 0; list-style: none; }
.comfy-guide-list li { padding: 20px 0; border-bottom: 1px solid #dedee6; }
.comfy-guide-list a { font-weight: 700; font-size: 1.05rem; }
.comfy-guide-list p { font-size: .95rem; margin: 10px 0 0; }
.guide-skip { position: absolute; top: -100px; left: 16px; z-index: 10000; background: #020035; color: #fff; padding: 12px; }
.guide-skip:focus { top: 8px; }
.comfy-guide ::selection { color: #020035; background: #ffce9d; }
.comfy-guide :focus-visible, .guide-actions :focus-visible, .comfy-resource-index :focus-visible { outline: 3px solid #b84d00; outline-offset: 4px; }
@media(max-width: 700px) {
 .guide-hero { padding: 112px 0 40px; }
 .guide-actions { gap: 16px; }
 .comfy-guide { padding: 32px 20px 48px; font-size: 1rem; }
 .comfy-guide-list { grid-template-columns: 1fr; }
 .comfy-resource-index { margin: 24px auto; padding: 24px 16px; }
}