/* DUSTY DISCS MASTER STYLESHEET
   Version: 1.0.3 | Article, Navigation & Dusty Engine Unified
*/

:root { 
    --oracle-black: #3d2b1f; 
    --oracle-white: #ffffff; 
    --border-color: #cccccc; 
    --text-gray: #666666; 
    --box-height: 44px; 
    --article-width: 95%; 
}

html, body { 
    margin: 0; padding: 0; width: 100%; overflow-x: hidden; 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    background-color: #f4f1ea; 
}

/* --- HEADER & BRANDING --- */
header { padding: 10px 4%; display: flex; align-items: center; justify-content: space-between; background: var(--oracle-white); border-bottom: 1px solid #f0f0f0; gap: 15px; box-sizing: border-box; }

.logo-wrapper { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; margin-top: 14px; }

.hound-button {
  transition: transform 0.2s ease-in-out; /* Smooths the movement */
  cursor: pointer; margin-right: -18px;
}

.hound-button:hover {
  transform: scale(1.04); /* Grows the button by 8% */
}

.version-tray { font-size: 9px; color: #999; }
.search-cluster { display: flex; align-items: center; flex-grow: 1; justify-content: flex-end; max-width: 600px; box-sizing: border-box; }

.hound-button { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; transition: transform 0.2s ease; outline: none; -webkit-tap-highlight-color: transparent; }
.hound-icon { height: 65px; width: auto; flex-shrink: 0; mix-blend-mode: multiply; }

/* --- NAVIGATION & SEARCH --- */
nav.black-bar { background: #3d2b1f; color: #fdfaf0; padding: 0 1%; display: flex; flex-wrap: nowrap; gap: 10px; position: sticky; top: 0; z-index: 100; font-family: 'Inter', sans-serif; box-sizing: border-box; align-items: center; justify-content: space-between; min-height: 28px; border-bottom: 1px solid #261a12; }
.nav-links-wrapper { display: flex; flex-wrap: nowrap; gap: 0px; align-items: center; flex: 0 1 auto; overflow: visible; margin-left: 35px; }
.nav-search-wrapper { margin-left: auto; width: 220px; min-width: 100px; height: 30px; background: #2b1a12; border-radius: 4px; display: flex; align-items: center; position: relative; border: 1px solid #4a3728; flex: 1 1 220px; max-width: 250px; }
.nav-search-input { background: transparent; border: none; color: #fdfaf0; padding: 0 32px 0 10px; font-size: 15px; width: 100%; outline: none; box-sizing: border-box; height: 100%; }

.nav-search-btn { 
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fdfaf0' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat center; 
    border: none; cursor: pointer; opacity: 0.9; 
}

#search-suggestions, #search-results-dropdown { 
    position: absolute; top: 100%; left: 0; width: 100%; 
    background: #ffffff; border: 1px solid #cccccc; border-top: none; 
    z-index: 2000; display: none; box-shadow: 0 8px 16px rgba(0,0,0,0.15); 
    border-radius: 0 0 4px 4px; max-height: 400px; overflow-y: auto; 
}

.suggestion-item, #search-results-dropdown a { 
    padding: 8px 14px; color: #000000; font-size: 12px; 
    cursor: pointer; border-bottom: 1px solid #eeeeee; text-decoration: none; display: block;
}

/* --- DROPDOWN SYSTEM --- */
.nav-item { padding: 9px 9px; font-size: 14.5px; font-weight: 400; letter-spacing: .7px; cursor: pointer; position: relative; border-radius: 8px; transition: background 0.2s; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav-item:hover { background: #4a3728; }
.dropdown-content { visibility: hidden; opacity: 0; position: absolute; background-color: #2b1a12; min-width: 160px; width: auto; white-space: nowrap; z-index: 1000; top: 100%; left: 0; border-top: 1px solid #4a3728; transition: opacity 0.2s; box-shadow: 0 8px 16px rgba(0,0,0,0.3); border-radius: 0 0 4px 4px; }
.nav-item:hover .dropdown-content { visibility: visible; opacity: 1; }
.sub-trigger { position: relative; }
.sub-label { color: #fdfaf0 !important; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid #3d2b1f; padding: 10px 18px; font-size: 10px; display: flex; justify-content: space-between; align-items: center; gap: 15px; cursor: default; }
.push-out-menu { visibility: hidden; opacity: 0; position: absolute; top: 0; background-color: #1f140d; min-width: 200px; width: auto; white-space: nowrap; transition: opacity 0.2s; box-shadow: 0 8px 16px rgba(0,0,0,0.3); z-index: 1100; column-count: 2; column-gap: 0; column-rule: 1px solid #3d2b1f; }
.push-out-menu a, .dropdown-content a { display: block; background-color: #1f140d !important; border-bottom: 1px solid #3d2b1f; text-decoration: none; color: #fdfaf0; padding: 10px 18px; font-size: 10px; }
.dropdown-content a:hover, .push-out-menu a:hover { background-color: #5c4434 !important; }
.sub-trigger:hover .push-out-menu { visibility: visible; opacity: 1; }

/* --- ARTICLE ENGINE --- */
.wrapper-art { width: var(--article-width); margin: 0 auto; padding: 0px 5%; background-color: #f4f1ea; color: #1a1a1a; font-family: 'Georgia', serif; box-sizing: border-box; }
.wrapper-art a { color: #8b0000; text-decoration: underline; }
.header-art { display: flex; align-items: center; gap: 30px; border-bottom: 2px solid #1a1a1a; padding: 25px 0; margin-bottom: 30px; }
.plate-art { flex: 0 0 180px; width: 180px; mix-blend-mode: multiply; display: block; }
.meta-art { font-family: 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 4px; font-size: 11px; font-weight: 800; display: block; margin-bottom: 5px; border-bottom: 1px solid #1a1a1a; padding-bottom: 5px; }
.title-art { font-size: 45px; font-weight: 900; text-transform: uppercase; margin: 0; letter-spacing: -2px; line-height: 1.0; overflow-wrap: break-word; }
.cols-art { column-count: 2; column-gap: 40px; column-rule: 1px solid #d1cdbc; text-align: justify; }
.cols-art p, .cols-art li { font-size: 19px; line-height: 1.7; margin-bottom: 20px; }
.drop-art { float: left; font-size: 75px; line-height: 35px; padding-top: 17px; padding-right: 7px; padding-bottom: 0px; font-weight: 900; }
.sub-art { font-family: 'Arial Black', sans-serif; font-size: 15px; text-transform: uppercase; border-bottom: 2px solid #1a1a1a; margin: 25px 0 10px 0; break-inside: avoid; }

/* --- TEASERS & PLATES --- */
.teaser-box { background: #e9e5d9; border: 1px solid #1a1a1a; padding: 20px; margin-bottom: 30px; display: flex; gap: 20px; align-items: flex-start; }
.teaser-image { flex: 0 0 120px; width: 120px; border: 1px solid #000; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.plate-frame-art { margin: 20px 0; break-inside: avoid; display: block; width: 100%; }
.plate-frame-art img { width: 100%; height: auto; display: block; border: 1px solid #000; margin-bottom: 8px; filter: grayscale(1) contrast(1.5); mix-blend-mode: multiply; }
.plate-frame-art span { font-family: 'Arial Narrow', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #444; display: block; line-height: 1.2; }

/* --- FOOTER --- */
footer.oracle-footer { background: #f4f1ea; border-top: 1px solid #1a1a1a; padding: 10px 7.8%; font-family: 'Arial Narrow', sans-serif; display: flex; justify-content: space-between; gap: 40px; color: #333; margin-top: 60px; box-sizing: border-box; }
.footer-col { flex: 1; }
.footer-col h4 { text-transform: uppercase; font-size: 12px; letter-spacing: 2px; margin-bottom: 15px; border-bottom: 1px solid #d1cdbc; padding-bottom: 5px; }
.footer-col p, .footer-col a { font-size: 11px; line-height: 1.6; text-decoration: none; color: #333; display: block; }

/* --- DUSTY ENGINE ROOM (SEARCH INTERFACE) --- */
#dusty-engine-room { text-align:center; font-family:'Segoe UI', Tahoma, sans-serif; padding-bottom: 50px; }
.main-flex-wrapper { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:30px; padding:20px; max-width:1200px; margin:0 auto; }
.container { position:relative; max-width:550px; width:100%; padding:30px; border-radius:16px; background:#E3DCD0; box-shadow:0 25px 50px rgba(0,0,0,0.18); box-sizing:border-box; border:1.5px solid rgba(0,0,0,0.15); margin:20px 0; text-align:left; flex:1 1 500px; }
.info-sidebar { font-family:'Segoe UI', Tahoma, sans-serif; min-width:390px; padding:25px; border-radius:16px; background:#F6F4EC; box-shadow:0 10px 30px rgba(0,0,0,0.1); border:1.5px solid rgba(0,0,0,0.1); border-left:6px solid #b8860b; margin:20px 0; text-align:left; flex:1 1 300px; box-sizing:border-box; color:#444; line-height:1.7; }
.info-sidebar h3 { color:#633102; margin-top:0; font-size:1.4rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:15px; }
.version-tag { position:absolute; top:15px; right:20px; font-size:0.7rem; color:#888; font-weight:bold; display:flex; align-items:center; z-index:100; }
#status-dot { width:6px; height:6px; background:#ffd700; border-radius:50%; margin-right:5px; opacity:0.6; }
.dot-pulsing { animation:pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100% { opacity:0.6; } 50% { opacity:0.2; } }
#dusty-engine-room h1 { color:#633102; font-size:41px; font-weight:800; margin:0; }
#dusty-engine-room h2 { color:#444; font-weight:600; margin:5px 0 30px 0; font-size:1.5rem; }
.input-group { display:flex; flex-direction:column; gap:8px; align-items:center; position:relative; z-index:100; }
#dusty-engine-room input { width:52%; padding:3px 3px; border-radius:9px; border:1px solid rgba(0,0,0,0.1); font-size:1.3rem; text-transform:uppercase; text-align:center; background:#f9f9f9; box-shadow:inset 2px 2px 2px rgba(0,0,0,0.05), 4px 4px 10px rgba(0,0,0,0.1); margin:5px auto; }
#brand-search { width:52%; display:none; border:2px solid #d2b48c; padding:5px; border-radius:9px; }
#custom-brand-results { position:absolute; top:100%; width:60%; background:#fff; border:2px solid #d2b48c; border-top:none; border-radius:0 0 12px 12px; max-height:250px; overflow-y:auto; display:none; z-index:999; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.brand-option { padding:12px; cursor:pointer; font-weight:800; text-transform:uppercase; border-bottom:1px solid #f9f9f9; color:#333; }
.brand-option:hover { background:#f7faf7; color:#b8860b; }
#default-state { display:flex; align-items:flex-start; justify-content:center; padding:20px 0; position:relative; }
#leader-img { width:55%; max-width:280px; height:auto; margin-right:-15px; z-index:1; }
#default-state::after { content:''; position:absolute; left:53.8%; top:112px; width:20px; height:20px; background:#EFEAE2; border-left:2.5px solid #d2b48c; border-bottom:2.5px solid #d2b48c; transform:rotate(45deg); z-index:10; }
.speech-bubble { position: relative; z-index: 2; width: calc(55% - 32px); background: #EFEAE2; border: 2.5px solid #d2b48c; border-radius: 30px; padding: 20px 15px 10px 15px; font-size: 1rem; font-weight: 510; color: #5d4037; line-height: 1.4; box-shadow: 5px 5px 15px rgba(0,0,0,0.08); text-align: center; min-height: 110px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: 20px; box-sizing: border-box; scrollbar-width: thin; margin-top: 20px; }
#result-content { display:none; padding-bottom:20px; border-radius:12px; border:2px solid #eee; background:#fff; }
.result-header { display: flex; align-items: center; justify-content: flex-start; padding: 25px 25px; gap: -10px; }
#era-symbol { width: 130px; height: auto; }
#res-year { font-size:3.6rem; font-weight:800; line-height:1.0; margin:0; letter-spacing:-2px; -webkit-text-stroke:0.5px #000; }
#res-note { font-size:1.05rem; padding:20px 30px; line-height:1.5; border-top:1px solid rgba(0,0,0,0.05); }
.sidebar-header { display:flex; align-items:center; gap:20px; margin-bottom:25px; flex-shrink:0; }
.deco-frame { flex:0 0 190px; height:140px; background-image:url('images/flashback_frame.png'); background-size:100% 100%; background-repeat:no-repeat; background-position:center; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; padding:0; image-rendering:-webkit-optimize-contrast; }
#deco-year { font-size:54px; font-weight:bold; color:#9c824a; margin:0 0 5px 0; line-height:0.8; font-family:'Georgia',serif; }
.news-flash-label { font-size:16px; color:#9c824a; margin:0; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family:sans-serif; }
.intro-text { font-size:1.35em; line-height:1.2; color:#6b5e4c; font-weight:bold; text-align:left; flex:1; }
.history-block { display: flex; align-items: flex-start; gap: 14px; background: #f7f3eb; padding: 18px; border-radius: 18px; margin-bottom: 15px; border: 1px solid #e8e2d6; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); flex-shrink: 0; }
.history-block p { margin:0; font-size:1.2em; line-height:1.4; color:#4a4136; flex:1; word-wrap:break-word; font-family:'Times New Roman', Times, serif; }
.match-row { display:flex; align-items:center; gap:15px; width:85%; padding:6px 18px; border-radius:12px; cursor:pointer; border:1.5px solid #eee; background:#fff; margin-bottom:6px; }
.color-swash { width:28px; height:28px; border-radius:50%; border:2px solid #ddd; flex-shrink:0; }

/* --- DUSTY TRIO ALIGNMENT --- */
.dusty-trio-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 15px; width: 100%; margin-bottom: 25px; }
.engine-hound, .engine-phonograph { height: 110px !important; width: auto; mix-blend-mode: multiply; }

/* --- RESPONSIVE --- */
@media (max-width: 820px) { 
    .cols-art { column-count: 1; } 
    .header-art { flex-direction: column; text-align: center; } 
    .title-art { font-size: 26px; } 
    footer.oracle-footer { flex-direction: column; }
    .info-sidebar { width:92%; flex:1 1 auto; max-width:550px; margin:10px auto; } 
}