/* ==========================================================================
   Urban Lotus — Main stylesheet (loaded async, non-render-blocking)
   Everything that isn't above-the-fold critical lives here.
   ========================================================================== */

/* Section scaffolding ----------------------------------------------------- */
.site-main { display: block; }
.section-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1.5rem; }
.empty-state { color: var(--ul-muted); padding: 3rem 0; text-align: center; }

.breadcrumbs { border-bottom: 1px solid var(--ul-line); background: var(--ul-canvas); }
.breadcrumbs__inner { max-width: var(--ul-wrap-wide); margin-inline: auto; padding: .75rem var(--ul-gutter); font-size: .85rem; color: var(--ul-muted); }
.breadcrumbs a { color: var(--ul-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ul-forest); }
.breadcrumbs__sep { margin-inline: .5rem; color: var(--ul-sage); }
.breadcrumbs [aria-current="page"] { color: var(--ul-ink); }

/* Topic silos (front page) ------------------------------------------------ */
.silos { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.silo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.silo-card {
	display: flex; flex-direction: column; gap: .35rem;
	padding: 1.5rem; border-radius: var(--ul-radius); text-decoration: none;
	background: var(--ul-white); border: 1px solid var(--ul-line);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.silo-card:hover { transform: translateY(-3px); box-shadow: var(--ul-shadow); border-color: var(--ul-sage); }
.silo-card__name { font-family: var(--ul-font-display); font-size: 1.2rem; color: var(--ul-forest); font-weight: 560; }
.silo-card__count { font-size: .85rem; color: var(--ul-muted); }

.front-content { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.latest { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* Post grid + cards ------------------------------------------------------- */
.listing-header { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.25rem, 1rem + 1vw, 2rem); }
.listing-header__title { font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem); }
.listing-header__desc { margin-top: .75rem; color: var(--ul-muted); max-width: 60ch; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.25rem, 1rem + 1vw, 2rem); padding-bottom: 1rem; }

.post-card { display: flex; flex-direction: column; border-radius: var(--ul-radius); overflow: hidden; background: var(--ul-white); border: 1px solid var(--ul-line); transition: transform .18s ease, box-shadow .18s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--ul-shadow); }
.post-card__media { display: block; aspect-ratio: 3 / 2; background: var(--ul-sand); overflow: hidden; }
.post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__img { transform: scale(1.04); }
.post-card__placeholder { display: grid; place-items: center; height: 100%; font-size: 2.5rem; color: var(--ul-sage); }
.post-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__cat { align-self: flex-start; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ul-leaf); text-decoration: none; }
.post-card__title { font-size: 1.2rem; line-height: 1.25; }
.post-card__title a { color: var(--ul-forest); text-decoration: none; }
.post-card__title a:hover { color: var(--ul-leaf); }
.post-card__excerpt { color: var(--ul-muted); font-size: .95rem; flex: 1; }

.post-meta { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ul-muted); }
.post-meta__sep { color: var(--ul-sage); }

/* Single ------------------------------------------------------------------ */
.single__header, .page-single__header { padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem) 1rem; }
.single__cat { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ul-leaf); text-decoration: none; }
.single__title, .page-single__title { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); margin-block: .5rem .85rem; }
.single__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; color: var(--ul-muted); }
.byline { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ul-ink); font-weight: 500; }
.byline__avatar { border-radius: 50%; }

.single__featured, .page-single__featured { max-width: var(--ul-wrap-wide); margin: 1.5rem auto 2.5rem; padding-inline: var(--ul-gutter); }
.single__featured-img { width: 100%; border-radius: var(--ul-radius); }
.single__featured-caption, .image-credit { font-size: .8rem; color: var(--ul-muted); margin-top: .5rem; }
.image-credit a { color: var(--ul-muted); }

/* Long-form content typography ------------------------------------------- */
.entry-content { font-size: 1.12rem; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.1rem); margin-top: 2.2em; }
.entry-content h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); margin-top: 1.8em; }
.entry-content a { color: var(--ul-leaf); text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .4em; }
.entry-content blockquote {
	border-left: 3px solid var(--ul-sage); padding-left: 1.25rem; font-family: var(--ul-font-display);
	font-size: 1.3rem; color: var(--ul-forest); font-style: italic;
}
.entry-content img { border-radius: var(--ul-radius); }
.entry-content figure { margin-block: 2em; }
.entry-content figcaption { font-size: .85rem; color: var(--ul-muted); margin-top: .5rem; text-align: center; }
.entry-content :where(table) { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content :where(th, td) { padding: .75rem; border-bottom: 1px solid var(--ul-line); text-align: left; }

.single__footer { padding-block: 2rem 1rem; }
.single__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.single__tags a { font-size: .82rem; background: var(--ul-sand); color: var(--ul-muted); padding: .35em .9em; border-radius: 999px; text-decoration: none; }
.single__tags a:hover { background: var(--ul-sage); color: var(--ul-ink); }

/* Author E-E-A-T box ------------------------------------------------------ */
.author-box { display: flex; gap: 1.25rem; padding: 1.5rem; background: var(--ul-sand); border-radius: var(--ul-radius); }
.author-box__avatar { border-radius: 50%; flex-shrink: 0; }
.author-box__kicker { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ul-muted); }
.author-box__name { font-family: var(--ul-font-display); font-size: 1.2rem; }
.author-box__name a { color: var(--ul-forest); text-decoration: none; }
.author-box__bio { color: var(--ul-muted); font-size: .95rem; margin-top: .35rem; }

.related { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); border-top: 1px solid var(--ul-line); margin-top: 2rem; }

/* Pagination -------------------------------------------------------------- */
.pagination, .comments .navigation { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .5rem;
	border-radius: 10px; border: 1px solid var(--ul-line); text-decoration: none; color: var(--ul-ink);
}
.pagination .page-numbers.current { background: var(--ul-forest); color: #fff; border-color: var(--ul-forest); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--ul-sage); }

/* Search + 404 ------------------------------------------------------------ */
.search-form { display: flex; gap: .5rem; max-width: 480px; }
.search-form__field {
	flex: 1; padding: .75em 1em; border: 1.5px solid var(--ul-line); border-radius: 999px;
	font: inherit; background: var(--ul-white); color: var(--ul-ink);
}
.search-form__field:focus { outline: none; border-color: var(--ul-leaf); }
.search-form__submit { background: var(--ul-forest); color: #fff; border: 0; border-radius: 999px; padding: .75em 1.5em; font-weight: 600; cursor: pointer; }
.search-form__submit:hover { background: var(--ul-leaf); }

.error-404 { text-align: center; padding-block: clamp(3rem, 2rem + 5vw, 6rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.error-404__code { font-family: var(--ul-font-display); font-size: clamp(4rem, 3rem + 8vw, 8rem); color: var(--ul-sage); line-height: 1; }
.error-404__lede { color: var(--ul-muted); max-width: 40ch; }
.error-404 .search-form { margin-block: 1rem; }

/* Comments ---------------------------------------------------------------- */
.comments { padding-block: 2.5rem; border-top: 1px solid var(--ul-line); margin-top: 2rem; }
.comments__title { font-size: 1.4rem; margin-bottom: 1.5rem; }
.comments__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.comment-body { background: var(--ul-white); border: 1px solid var(--ul-line); border-radius: var(--ul-radius); padding: 1.25rem; }
.comment-respond { margin-top: 2rem; }
.comment-form input:not([type=submit]), .comment-form textarea {
	width: 100%; padding: .75em 1em; border: 1.5px solid var(--ul-line); border-radius: 10px; font: inherit; margin-top: .35rem; background: var(--ul-white);
}
.comment-form label { font-size: .9rem; font-weight: 500; display: block; margin-top: 1rem; }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--ul-forest); color: color-mix(in srgb, #fff 82%, transparent); margin-top: 3rem; }
.site-footer a { color: color-mix(in srgb, #fff 88%, transparent); }
.site-footer a:hover { color: #fff; }
.site-footer__cols { max-width: var(--ul-wrap-wide); margin-inline: auto; padding: clamp(2.5rem, 2rem + 3vw, 4rem) var(--ul-gutter); display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
.site-footer .site-logo-text, .site-footer .site-logo-text__name { color: #fff; }
.site-footer__brand { text-align: center; display: flex; flex-direction: column; align-items: center; }
.site-footer__logo { display: inline-block; }
.site-footer__logo img { height: 116px; width: auto; display: block; margin: 0 auto; }
.site-footer__tagline { color: color-mix(in srgb, #fff 70%, transparent); font-size: .95rem; margin: 1rem auto 0; max-width: 34ch; }
.footer-widget__title { font-size: 1rem; color: #fff; margin-bottom: .75rem; font-family: var(--ul-font-body); font-weight: 600; }
.footer-widget ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.site-footer__bar { border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); }
.site-footer__bar > * { max-width: var(--ul-wrap-wide); margin-inline: auto; }
.site-footer__bar { padding: 1.25rem 0; }
.footer-nav { padding-inline: var(--ul-gutter); }
.footer-menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0 var(--ul-gutter); font-size: .9rem; }
.site-footer__legal { padding-inline: var(--ul-gutter); margin-top: .75rem; font-size: .82rem; color: color-mix(in srgb, #fff 62%, transparent); }
.site-footer__disclosure { display: block; margin-top: .25rem; }

@media (max-width: 900px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   Block patterns (affiliate / SEO components)
   ========================================================================== */

/* Comparison table */
.ul-comparison { overflow-x: auto; border: 1px solid var(--ul-line); border-radius: var(--ul-radius); margin-block: 2em; }
.ul-comparison table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ul-comparison th, .ul-comparison td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--ul-line); vertical-align: top; }
.ul-comparison thead th { background: var(--ul-sand); font-family: var(--ul-font-body); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ul-muted); }
.ul-comparison tbody tr:last-child td { border-bottom: 0; }
.ul-comparison .ul-pick { background: color-mix(in srgb, var(--ul-sage) 18%, transparent); }
.ul-comparison .ul-product-name { font-weight: 600; color: var(--ul-forest); }

/* Pros / cons */
.ul-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block: 2em; }
.ul-proscons__col { border-radius: var(--ul-radius); padding: 1.5rem; border: 1px solid var(--ul-line); }
.ul-proscons__pros { background: color-mix(in srgb, var(--ul-sage) 14%, var(--ul-white)); }
.ul-proscons__cons { background: color-mix(in srgb, var(--ul-muted) 8%, var(--ul-white)); }
.ul-proscons h3 { font-size: 1.1rem; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.ul-proscons ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .98rem; }
.ul-proscons li { padding-left: 1.6em; position: relative; }
.ul-proscons__pros li::before { content: "✓"; position: absolute; left: 0; color: var(--ul-leaf); font-weight: 700; }
.ul-proscons__cons li::before { content: "—"; position: absolute; left: 0; color: var(--ul-muted); font-weight: 700; }
@media (max-width: 560px) { .ul-proscons { grid-template-columns: 1fr; } }

/* "Best pick" / CTA card */
.ul-pickcard {
	display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center;
	padding: 1.5rem; border: 1px solid var(--ul-line); border-radius: var(--ul-radius);
	background: var(--ul-white); box-shadow: var(--ul-shadow); margin-block: 2em;
}
.ul-pickcard__media img { width: 120px; height: 120px; object-fit: contain; border-radius: 10px; background: var(--ul-sand); }
.ul-pickcard__badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ul-leaf); margin-bottom: .35rem; }
.ul-pickcard__title { font-size: 1.3rem; margin-bottom: .35rem; }
.ul-pickcard__desc { color: var(--ul-muted); font-size: .95rem; }
.ul-pickcard__cta .btn { white-space: nowrap; }
@media (max-width: 600px) { .ul-pickcard { grid-template-columns: 1fr; text-align: center; } .ul-pickcard__media img { margin-inline: auto; } }

/* Key takeaways */
.ul-takeaways { background: var(--ul-sand); border-radius: var(--ul-radius); padding: 1.75rem; margin-block: 2em; border-left: 4px solid var(--ul-leaf); }
.ul-takeaways h3 { font-size: 1.15rem; margin-bottom: .75rem; }
.ul-takeaways ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: .5rem; }

/* FAQ accordion (native <details>) */
.ul-faq { margin-block: 2em; display: flex; flex-direction: column; gap: .75rem; }
.ul-faq details { border: 1px solid var(--ul-line); border-radius: var(--ul-radius); background: var(--ul-white); overflow: hidden; }
.ul-faq summary { cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 600; color: var(--ul-forest); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ul-faq summary::-webkit-details-marker { display: none; }
.ul-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--ul-leaf); transition: transform .2s ease; }
.ul-faq details[open] summary::after { transform: rotate(45deg); }
.ul-faq details > *:not(summary) { padding: 0 1.25rem 1.25rem; color: var(--ul-muted); }

/* Lead capture */
.ul-leadform { background: linear-gradient(135deg, var(--ul-forest), var(--ul-leaf)); color: #fff; border-radius: var(--ul-radius); padding: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem); margin-block: 2.5em; text-align: center; }
.ul-leadform h3 { color: #fff; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .5rem; }
.ul-leadform p { color: color-mix(in srgb, #fff 82%, transparent); max-width: 46ch; margin: 0 auto 1.5rem; }
.ul-leadform form { display: flex; gap: .5rem; max-width: 460px; margin-inline: auto; flex-wrap: wrap; }
.ul-leadform input { flex: 1; min-width: 200px; padding: .85em 1.1em; border-radius: 999px; border: 0; font: inherit; }
.ul-leadform .btn { background: var(--ul-lime); color: var(--ul-ink); }
.ul-leadform .btn:hover { background: #fff; }

/* Affiliate disclosure inline note */
.ul-disclosure { font-size: .82rem; color: var(--ul-muted); background: var(--ul-sand); border-radius: 10px; padding: .75rem 1rem; margin-block: 1.5em; }

/* Print friendliness */
@media print { .site-header, .site-footer, .related, .comments, .ul-leadform { display: none; } }

/* ===== Home page sections (InsectOut-style) ===== */
.section-title--center { text-align: center; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-head .section-title { margin-bottom: 0; }
.section-head__link { font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--ul-leaf); }
.section-head__link:hover { color: var(--ul-forest); }

.home-why { padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
.feature-card { background: var(--ul-white); border: 1px solid var(--ul-line); border-radius: var(--ul-radius); padding: 1.85rem; text-align: center; }
.feature-card__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ul-sand); color: var(--ul-leaf); font-size: 1.6rem; margin-bottom: 1rem; }
.feature-card h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.feature-card p { color: var(--ul-muted); font-size: .97rem; }

.home-picks, .home-latest { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.home-silos { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); background: var(--ul-sand); }

.home-cta { background: linear-gradient(135deg, var(--ul-forest), var(--ul-leaf)); color: #fff; margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }
.home-cta__inner { max-width: 760px; margin-inline: auto; padding: clamp(3rem, 2.5rem + 4vw, 5rem) var(--ul-gutter); text-align: center; }
.home-cta__title { color: #fff; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); margin-bottom: .6rem; }
.home-cta__lede { color: rgba(255,255,255,.88); max-width: 48ch; margin: 0 auto 1.75rem; }
.home-cta__form { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 640px; margin: 0 auto; }
.home-cta__form input { flex: 1; min-width: 180px; padding: .85em 1.1em; border-radius: 999px; border: 0; font: inherit; background: #fff; color: var(--ul-ink); }
.home-cta__note { margin-top: 1.25rem; font-size: .9rem; color: rgba(255,255,255,.82); }
.home-cta__note a { color: #fff; text-decoration: underline; }