/* 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; }

@media (max-width: 575.98px) {
    .header-3 .header-main { flex-wrap: nowrap; }
    .header-3 .sticky-logo img { width: 160px; height: auto; }
    .header-3 .header-right { flex-shrink: 0; gap: 10px; }
    .header-3 .header__account { margin-right: 0 !important; }
    .offcanvas__logo img { width: 180px; height: auto; }
}

.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%; }

/* Header main-menu overflow (RESOLVED differently than the two attempts
   below this comment used to try): main.css lays the desktop nav's items out
   as plain display:inline-block <li>s with a 30px gap each, sized for fewer
   items than this site grew to (9 top-level items). Squeezing spacing/font
   down and/or falling back to a horizontal scrollbar (both tried here
   earlier) either still overflowed at real laptop widths or looked worse
   than the wrap it was meant to fix. Fixed properly instead by moving
   "Bookmarking List" and "Emoji Info" out of includes/header.php's top nav
   entirely into the always-visible "Quick Links" section of the offcanvas
   sidebar - 7 items fit the theme's original, untouched spacing comfortably,
   so no CSS override is needed here at all. Kept this comment as a marker in
   case the nav grows again later and this needs revisiting.) */

.offcanvas-quick-links a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.offcanvas-quick-links a:hover { color: var(--theme, #2563eb); }
.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); }