/* ============================================================
   MechBunny 2026 — Ribbon-fold CSS
   Moved from inline <style> in widget.header_scripts.php.
   Loaded via <link> after css/custom.css so it is cached separately
   and only invalidated when this file changes.
   ============================================================ */

/* Card ribbon — left fold corner */
.ribbon-fold-left { position: relative; }
.ribbon-fold-left::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 0;
    border-top: 6px solid rgba(0,0,0,0.8);
    border-left: 6px solid transparent;
}

/* Card ribbon — right fold corner */
.ribbon-fold-right { position: relative; }
.ribbon-fold-right::after {
    content: '';
    position: absolute;
    right: 0; bottom: -6px;
    width: 0; height: 0;
    border-top: 6px solid rgba(0,0,0,0.8);
    border-right: 6px solid transparent;
}

/* Nav ribbon — left fold corner */
.nav-ribbon-fold-left { position: relative; }
.nav-ribbon-fold-left::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 0;
    border-top: 6px solid rgba(0,0,0,0.8);
    border-left: 6px solid transparent;
}

/* Nav ribbon — right fold corner */
.nav-ribbon-fold-right { position: relative; }
.nav-ribbon-fold-right::after {
    content: '';
    position: absolute;
    right: 0; bottom: -6px;
    width: 0; height: 0;
    border-top: 6px solid rgba(0,0,0,0.8);
    border-right: 6px solid transparent;
}

/* ============================================================
   NEW-THEME INPUT RESET (loaded LAST — wins the cascade)
   The inherited style.css ships a Bootstrap-era .form-control rule:
       input[type=text] { background:#161616; color:#fff; height:34px; border:0 }
   Its element+attribute specificity (0,1,1) BEATS Tailwind utility classes
   (0,1,0), so it forced every search/login/signup field into a short dark bar
   with invisible white text and no border. Re-state the brutalist input design
   here at equal specificity; because ribbon.css loads after style.css, these
   win. This is the single fix for: invisible search text, and the login/signup
   forms rendering unstyled.
   ============================================================ */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=url], input[type=date],
textarea, select {
    background-color: #f9fafb;       /* gray-50 */
    color: #000000;
    height: auto;
    line-height: 1.4;
    border: 4px solid #000000;
    border-radius: 0;
    padding: 0.7rem 1.1rem;
    font-weight: 900;
    box-shadow: none;
}
input[type=text]::placeholder, input[type=email]::placeholder,
input[type=password]::placeholder, input[type=search]::placeholder,
textarea::placeholder { color: #9ca3af; opacity: 1; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=number]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #ea580c;           /* orange-600 */
}
/* Search field keeps its hard brutalist drop shadow */
#searchInput { box-shadow: 6px 6px 0 0 rgba(0,0,0,1); }
#searchInput:focus { box-shadow: 6px 6px 0 0 rgba(234,88,12,0.4); }

/* ============================================================
   CMS / STATIC PAGE BODY (.vm-cms)
   Privacy, Terms, Removal, Advertise, About — KVS emits raw HTML for these.
   Style it to match the brutalist theme so they aren't bland walls of text.
   Scoped class selectors (.vm-cms x) outrank the legacy element rules in
   style.css/custom.css, so these win without !important.
   ============================================================ */
.vm-cms { color: #374151; font-size: 0.95rem; line-height: 1.75; font-weight: 500; }
.vm-cms h1, .vm-cms h2, .vm-cms h3, .vm-cms h4, .vm-cms h5, .vm-cms h6 {
    font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
    color: #000; margin: 1.75rem 0 0.75rem; line-height: 1.15;
}
.vm-cms h1 { font-size: 1.6rem; } .vm-cms h2 { font-size: 1.3rem; }
.vm-cms h3 { font-size: 1.1rem; } .vm-cms h4 { font-size: 1rem; }
.vm-cms h2, .vm-cms h3 { border-bottom: 3px solid #ea580c; padding-bottom: 0.3rem; }
.vm-cms p { margin: 0 0 1rem; }
.vm-cms a { color: #ea580c; font-weight: 700; text-decoration: underline; }
.vm-cms a:hover { color: #000; }
.vm-cms ul, .vm-cms ol { margin: 0 0 1rem 1.4rem; }
.vm-cms ul { list-style: disc; } .vm-cms ol { list-style: decimal; }
.vm-cms li { margin-bottom: 0.4rem; }
.vm-cms strong, .vm-cms b { font-weight: 900; color: #000; }
.vm-cms hr { border: 0; border-top: 4px solid #000; margin: 1.75rem 0; }
.vm-cms blockquote { border-left: 6px solid #ea580c; padding-left: 1rem; margin: 1rem 0; color: #111827; }
.vm-cms table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.vm-cms th, .vm-cms td { border: 2px solid #000; padding: 0.5rem 0.75rem; text-align: left; }
.vm-cms th { background: #f3f4f6; font-weight: 900; text-transform: uppercase; font-size: 0.8rem; }

/* ============================================================
   NOTIFICATION / MESSAGE BOXES (.notification info|success|error)
   KVS emits these for login/signup/contact/upload prompts. The legacy
   style.css/custom.css rendered them as washed-out blue bars. Restyle to the
   brutalist look. Same-or-higher specificity + later load order wins.
   ============================================================ */
#vm-notifications .notification, .notification {
    border: 4px solid #000000 !important;
    background: #ffffff !important;
    color: #111827 !important;
    border-radius: 0 !important;
    padding: 0.85rem 1.2rem;
    margin: 0 0 1rem;
    font-weight: 900;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    box-shadow: 4px 4px 0 0 rgba(0,0,0,1);
    border-left-width: 10px !important;
}
#vm-notifications .notification a, .notification a { color: #ea580c !important; text-decoration: underline; }
#vm-notifications .notification a:hover, .notification a:hover { color: #000000 !important; }
#vm-notifications .notification.info, .notification.info { border-left-color: #ea580c !important; }
#vm-notifications .notification.success, .notification.success { border-left-color: #16a34a !important; }
#vm-notifications .notification.error, .notification.error,
#vm-notifications .notification.danger, .notification.danger { border-left-color: #dc2626 !important; }