/*
Theme Name: Unplugged Custom
Theme URI: https://unplugged.com.hr/
Description: Customna lokalna tema za Bar & Grill Unplugged.
Version: 0.1.3
Author: Unplugged
Text Domain: unplugged-custom
*/
:root { --bg:#030303; --panel:#080808; --panel-soft:#111; --text:#f1f1f1; --muted:#b4b4b4; --line:#2a2a2a; --accent:#c59d5f; --accent-soft:#e4c588; --max:1480px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; line-height:1.55; }
a { color:inherit; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent-soft); outline-offset:3px; }
.site-header { background:#080808; border-bottom:1px solid var(--line); }
.header-inner { max-width:var(--max); min-height:170px; margin:0 auto; padding:20px 28px; display:grid; grid-template-columns:260px 1fr 220px; align-items:center; gap:24px; }
.brand-logo { max-width:250px; max-height:130px; width:auto; height:auto; object-fit:contain; }
.solar-logo { max-width:210px; max-height:80px; width:auto; height:auto; object-fit:contain; justify-self:end; }
.header-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.button { display:inline-block; padding:10px 18px; border:1px solid var(--accent); border-radius:4px; background:var(--accent); color:#101010; font-weight:700; text-decoration:none; letter-spacing:.02em; cursor:pointer; }
.button:hover { background:var(--accent-soft); }
.button-secondary { background:transparent; color:var(--text); }
.site-shell { max-width:var(--max); min-height:700px; margin:0 auto; display:grid; grid-template-columns:200px minmax(0,1fr) 180px; }
.side-nav,.partner-rail { background:#050505; padding:28px 18px; }
.side-nav { position:sticky; top:0; align-self:start; height:100vh; max-height:100vh; overflow-y:auto; z-index:20; }
.side-nav { border-right:1px solid var(--line); }
.side-nav ul { list-style:none; padding:0; margin:0; }
.side-nav li { margin:0 0 8px; }
.side-nav a { display:block; padding:10px 12px; border-radius:4px; color:#e5e5e5; text-decoration:none; font-weight:700; }
.side-nav a:hover { background:var(--panel-soft); color:var(--accent-soft); }
.content { min-width:0; padding:34px clamp(20px,4vw,58px) 70px; background:var(--bg); }
.hero-image { max-width:820px; margin:0 auto 38px; }
.hero-image img { display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.section-heading { margin:0 0 26px; text-align:center; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:.02em; }
.menu-section { max-width:920px; margin:0 auto 54px; scroll-margin-top:20px; }
.menu-section h2 { display:inline-block; margin:0 0 18px; padding-bottom:7px; border-bottom:2px solid var(--accent); font-size:clamp(1.35rem,2.5vw,2rem); }
.menu-item { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px dotted #303030; }
.item-number { min-width:32px; color:#858585; text-align:right; }
.item-info { flex:1; min-width:0; }
.item-name { display:block; color:#e4e4e4; font-weight:700; }
.item-description { display:block; margin-top:3px; color:#888; font-size:.92rem; font-style:italic; }
.item-price { color:#fff; font-weight:700; white-space:nowrap; }
.price-note { margin:-8px auto 30px; max-width:920px; color:var(--muted); text-align:center; }
.static-section { max-width:920px; margin:0 auto 54px; scroll-margin-top:20px; }
.static-section p { color:#d1d1d1; text-align:center; }
.social-links { display:flex; justify-content:center; gap:24px; margin-top:20px; }
.partner-rail { border-left:1px solid var(--line); }
.partner-rail-inner { display:flex; position:sticky; top:20px; flex-direction:column; align-items:center; gap:42px; }
.partner-rail img { display:block; max-width:140px; max-height:66px; width:auto; height:auto; object-fit:contain; }
.partner-rail img.ham { max-width:120px; max-height:80px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.gallery-grid a { display:block; line-height:0; }
.gallery-grid img { display:block; width:100%; height:220px; aspect-ratio:1; object-fit:cover; border:1px solid #333; border-radius:4px; }
.map-placeholder { padding:30px; border:1px solid var(--line); background:#0c0c0c; text-align:center; }
.map-placeholder p { margin:0 0 18px; }
.map-placeholder iframe { display:block; width:100%; min-height:420px; height:420px; border:0; }
.site-footer { padding:32px 20px; border-top:1px solid var(--line); background:#080808; color:var(--muted); text-align:center; }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:16px 24px; margin-bottom:14px; }
.footer-links a { color:var(--muted); }
.footer-links a:hover { color:var(--accent-soft); }
.legal-content { max-width:900px; margin:0 auto; }
.legal-content h1 { text-align:center; }
.legal-content h2 { margin-top:2rem; color:var(--accent-soft); }
.legal-content p,.legal-content li { color:#d1d1d1; }
.csv-card { max-width:920px; margin:0 auto 40px; padding:22px; border:1px solid var(--line); background:#0b0b0b; }
@media (max-width:1050px) { .header-inner { grid-template-columns:1fr; justify-items:center; min-height:0; } .solar-logo { justify-self:center; } .site-shell { grid-template-columns:1fr; } .side-nav { position:sticky; top:0; height:auto; max-height:none; overflow:visible; border-right:0; border-bottom:1px solid var(--line); padding:5px 12px; } .side-nav ul { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 6px; position:static; } .side-nav li { margin:0; } .side-nav a { padding:9px 10px; font-size:.92rem; } .partner-rail { border-left:0; border-top:1px solid var(--line); } .partner-rail-inner { position:static; flex-direction:row; justify-content:center; flex-wrap:wrap; gap:28px; } }
@media (max-width:620px) { .header-inner { padding:14px 14px 18px; gap:12px; } .brand-logo { max-width:220px; max-height:90px; } .solar-logo { max-width:160px; max-height:55px; } .content { padding:24px 15px 48px; } .hero-image { margin-bottom:28px; } .menu-item { gap:7px; } .item-number { min-width:24px; font-size:.88rem; } .item-name { font-size:.96rem; } .item-price { font-size:.95rem; } .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .gallery-grid img { height:160px; } .map-placeholder iframe { min-height:320px; height:320px; } }