/* World Time Sync — City Pages Shared CSS */
/* Loaded on all city pages to avoid inline duplication */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1a1a2e;background:#f5f7fa;min-height:100vh}
.container{max-width:800px;margin:0 auto;padding:16px}
h1{font-size:clamp(1.3rem,4vw,1.8rem);margin:16px 0 8px;color:#1a1a2e;line-height:1.3}
h2{font-size:clamp(1.1rem,3vw,1.3rem);margin:20px 0 8px;color:#16213e;line-height:1.3}
h3{font-size:clamp(1rem,2.5vw,1.1rem);margin:16px 0 6px;color:#0f3460}
.skip-link{position:absolute;top:-40px;left:0;background:#667eea;color:#fff;padding:8px 16px;z-index:100;text-decoration:none;border-radius:0 0 4px 0}
.skip-link:focus{top:0}
.breadcrumb{margin-bottom:12px;font-size:0.85rem;color:#555}
.breadcrumb a{color:#667eea;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.current-time-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:clamp(20px,5vw,30px);border-radius:12px;margin:16px 0;text-align:center}
.current-time-card h2{color:#fff;margin-top:0;font-size:clamp(1rem,2.5vw,1.2rem)}
.live-time{font-size:clamp(1.5rem,6vw,2.5rem);font-weight:700;margin:10px 0;font-variant-numeric:tabular-nums;line-height:1.2}
.time-details{opacity:0.9;margin-top:8px;font-size:0.9rem}
.time-details span{display:inline-block;margin:0 8px}
.city-info{background:#fff;padding:clamp(16px,4vw,20px);border-radius:8px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.city-info ul{padding-left:20px;margin:8px 0}
.city-info li{margin:4px 0}
.faq-section{background:#fff;padding:clamp(16px,4vw,20px);border-radius:8px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.faq-section h3{margin-top:12px;margin-bottom:4px}
.faq-section p{margin-bottom:8px;color:#333}
.seo-footer{text-align:center;padding:20px;margin-top:24px;border-top:1px solid #ccc;color:#555;font-size:0.85rem}
.seo-footer a{margin:0 8px;color:#667eea;text-decoration:none}
.seo-footer a:hover{text-decoration:underline}
.seo-footer p{margin-top:8px;font-size:0.75rem;color:#777}
a{color:#667eea}
.related-cities{background:#fff;padding:clamp(16px,4vw,20px);border-radius:8px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.related-cities h2{margin-top:0;margin-bottom:8px}
.related-cities ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.related-cities li{padding:4px 0}
.related-cities a{color:#667eea;text-decoration:none;font-weight:500}
.related-cities a:hover{text-decoration:underline}
.tz-offset{color:#888;font-size:0.85rem}
.sunrise-block{background:#fff;padding:clamp(16px,4vw,20px);border-radius:8px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.sunrise-block h2{margin-top:0;margin-bottom:12px;font-size:1.1rem}
.sunrise-data{display:flex;gap:20px;flex-wrap:wrap}
.sun-item{display:flex;flex-direction:column;align-items:center;min-width:80px}
.sun-icon{font-size:1.5rem;margin-bottom:4px}
.sun-label{font-size:0.7rem;color:#888;text-transform:uppercase;letter-spacing:0.5px}
.sun-time{font-size:1.2rem;font-weight:600;color:#333;font-variant-numeric:tabular-nums}
.sun-note{font-size:0.75rem;color:#999}
.sunrise-loading{color:#999;font-size:0.85rem}
@media(max-width:600px){.container{padding:12px}.live-time{font-size:1.8rem}.related-cities ul{grid-template-columns:1fr}.sunrise-data{gap:12px}.sun-item{min-width:60px}.sun-time{font-size:1rem}}
.minute-progress{width:100%;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;margin-top:10px;overflow:hidden}
.minute-progress-bar{height:100%;background:rgba(255,255,255,0.8);border-radius:2px;transition:width 1s linear}
.copy-time-btn{display:inline-block;margin-top:10px;padding:6px 16px;background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:6px;cursor:pointer;font-size:0.85rem;transition:background 0.2s}
.copy-time-btn:hover{background:rgba(255,255,255,0.25)}
.copy-time-btn:active{background:rgba(255,255,255,0.35)}
.lsi-block{background:#fff;padding:clamp(16px,4vw,24px);border-radius:8px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.lsi-block h2{margin-top:0;color:#16213e;font-size:clamp(1.1rem,3vw,1.3rem)}
.lsi-block p{color:#333;line-height:1.7;margin:8px 0}
.lsi-block ul{padding-left:20px;margin:8px 0}
.lsi-block li{margin:4px 0;color:#333}
.lsi-block a{color:#667eea;text-decoration:none}
.lsi-block a:hover{text-decoration:underline}