/* custom.css - small additions for the PHP build (kept separate from the
   theme's main.css so that file can stay a byte-for-byte copy of the
   Next.js version's public/assets/css/main.css). */

.offcanvas__info { position: fixed; top: 0; right: -400px; width: 350px; max-width: 90%; height: 100%; background: #fff; z-index: 9999; transition: right .35s ease; overflow-y: auto; padding: 30px; }
.offcanvas__info.info-open { right: 0; }
.offcanvas__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
.offcanvas__overlay.overlay-open { opacity: 1; visibility: visible; }
.offcanvas__close button { background: none; border: none; font-size: 20px; cursor: pointer; }
.sidebar__toggle { cursor: pointer; }

.tool-widget-frame { width: 100%; min-height: 420px; }
.tool-widget-frame textarea.form-control { min-height: 160px; }

.related-tools-empty { text-align: center; padding: 40px 0; color: #6c757d; }

/* Bootstrap's .row is display:flex + flex-wrap:wrap, but flex items don't
   reset min-width by default - a wide child (a <table>, a <pre>/<code>
   block, an iframe) can force its column wider than its assigned fraction,
   wrapping the next column (e.g. the sidebar) onto a new line below instead
   of sitting beside it. Reset min-width on every main+sidebar layout column
   site-wide so wide content scrolls/overflows within its own column instead
   of breaking the two-column layout. */
.news-area .row > [class*="col-"] { min-width: 0 !important; max-width: 100%; }

/* Flexbox's default align-items:stretch makes the sidebar column match the
   main column's full height whenever the main content is much taller (e.g.
   a 100+ row table) - the sidebar widgets end up anchored inside that tall,
   mostly-empty stretched box instead of forming a normal top-aligned column
   next to the content. Force both columns to size to their own content. */
.news-area .row { align-items: flex-start !important; }

/* Sticky sidebar (tool/color/emoji/AI/prompts/blog/bookmarking detail,
   category and index pages all share the .main-sidebar wrapper). The
   flex-start rule above is still needed for the wide-content fix, but it
   also shrinks the sidebar's own column to the sidebar's own height, which
   leaves position:sticky no room to actually stick - so the column that
   actually wraps .main-sidebar (found via :has(), NOT every .col-lg-4 in
   a .news-area .row - some pages, e.g. ai/detail.php's hero image column,
   reuse col-lg-4 for something else in the same row) is stretched back to
   match the (often taller) content column. .main-sidebar itself has no
   background/border of its own (only its nested .single-sidebar-widget
   blocks do), so re-stretching just this one column's invisible box
   doesn't bring back the visible "stretched empty box" look the flex-start
   fix above was solving. */
.news-area .row > [class*="col-"]:has(.main-sidebar) { align-self: stretch; }
.main-sidebar { position: -webkit-sticky; position: sticky; top: 30px; }

/* Belt-and-suspenders: whatever forces a wide column (a table, a long
   unbroken code string, etc.), make sure IT scrolls internally rather than
   the column growing - this is the actual overflow container, independent
   of the flex min-width fix above. */
.news-area .row [class*="col-"] table { max-width: 100%; }
.news-area .row [class*="col-"] .table-responsive { overflow-x: auto; max-width: 100%; }

/* Sidebar "Subscribe Now" pill form (render_sidebar_subscribe_widget()) */
.newsletter-form { display: flex; align-items: stretch; border: 1px solid #e5e7eb; border-radius: 50px; overflow: hidden; background: #fff; }
.newsletter-form .nf-icon { display: flex; align-items: center; justify-content: center; width: 46px; flex-shrink: 0; color: #9ca3af; background: #f3f4f6; font-size: 15px; }
.newsletter-form input[type="email"] { border: none; outline: none; flex: 1 1 auto; min-width: 0; padding: 0 12px; font-size: 14px; color: #111827; background: transparent; }
.newsletter-form input[type="email"]::placeholder { color: #9ca3af; }
.newsletter-form button[type="submit"] { border: none; background: var(--theme, #2563eb); color: #fff; font-weight: 600; padding: 0 22px; white-space: nowrap; cursor: pointer; font-size: 14px; }
.newsletter-form button[type="submit"]:hover { filter: brightness(1.08); }