/* Simple responsive styles for Cobra Lanes */
:root{
  --accent:#c62828;
  --dark:#222;
  --muted:#666;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;color:var(--dark);line-height:1.5;margin:0;background:#fff}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:#fff;border-bottom:1px solid #eee}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{height:70px}
.nav a{margin-left:1rem;color:var(--dark);text-decoration:none;font-weight:600}
.hero{position:relative;margin-top:1rem}
.hero-img{width:100%;height:auto;border-radius:6px}
.hero-text{position:absolute;left:2rem;top:2rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hero-text h1{margin:0;font-size:2.2rem;background:rgba(0,0,0,.4);display:inline-block;padding:.2rem .6rem;border-radius:4px}
.hero-text .tag{margin:.4rem 0;background:rgba(0,0,0,.35);display:inline-block;padding:.2rem .6rem;border-radius:4px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.5rem .9rem;border-radius:6px;text-decoration:none}
.about{margin:1.5rem 0}
.about ul{padding-left:1.25rem}
.fb-and-contact{display:grid;grid-template-columns:1fr 320px;gap:1rem;margin:1.5rem 0}
.contact{border-left:4px solid var(--accent);padding:1rem}

/* Make the fb area a two-column grid on wider screens, single column on small screens */
.fb{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1rem;align-items:start}
.fb .about-img{width:100%;height:100%;object-fit:cover;grid-column:1 / 2;grid-row:1 / 3;border-radius:6px}
.fb p{margin:0}
.fb p .btn{display:inline-block}
.fb .btn{grid-column:1 / -1}
.site-footer{background:#f8f8f8;border-top:1px solid #eee;padding:1rem 0;margin-top:2rem}
.muted{color:var(--muted)}
.menu-gallery{display:block;gap:1rem}
.menu-gallery figure{margin-bottom:1rem}
.menu-gallery img{width:100%;height:auto;border-radius:6px;display:block}

/* Zoom overlay for menu images */
.zoom-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s ease}
.zoom-overlay.open{opacity:1;pointer-events:auto}
.zoom-viewport{position:relative;max-width:95vw;max-height:95vh;overflow:hidden;touch-action:none}
.zoom-viewport img{display:block;max-width:none;will-change:transform;transform-origin:0 0;cursor:grab}
.zoom-viewport img.dragging{cursor:grabbing}
.zoom-close{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.5);color:#fff;border:0;padding:.4rem .6rem;border-radius:6px;font-size:1rem}
.zoom-hint{position:absolute;left:8px;top:10px;color:rgba(255,255,255,.85);font-size:0.9rem}

/* Article page styles */
.article--page{padding:1rem 0}
.article__header{margin-bottom:1rem}
.article__headline{font-size:1.8rem;margin:0 0 .25rem;color:var(--dark)}
.article__byline{margin:0 0 .5rem;color:var(--muted);font-size:0.95rem}

.article__grid{display:grid;grid-template-columns:1fr 300px;gap:1.25rem;align-items:start}
.article__main{background:transparent}
.article__main p{margin:0 0 1rem}

/* Allow a wrapping layout when we use a floating sidebar */
.article__grid--wrap{display:block}

.article__featured{margin:0 0 1rem}
.article__featured-img{width:100%;height:auto;border-radius:6px;display:block}
.article__photo-credit{font-size:0.9rem;color:var(--muted);margin-top:.25rem}

/* Floating credit box to the right so text wraps */
.article__sidebar{float:right;width:260px;margin:0 0 1rem 1rem}
.credit-box{border:1px solid #eee;padding:1rem;border-radius:6px;background:#fafafa;text-align:center}
.credit-box__logo{max-width:100%;height:auto;margin-bottom:.75rem}
.credit-box__text{font-size:0.95rem;color:var(--dark);margin-bottom:.75rem}

/* Clear floats at the end of article */
.article--page:after{content:"";display:block;clear:both}

@media (max-width:800px){
  .article__grid{grid-template-columns:1fr}
  .article__header{padding:0 0 .5rem}
  .article__headline{font-size:1.5rem}
}

/* Map section styles */
.map-section{margin:1.5rem 0}
.map{position:relative;overflow:hidden;padding-bottom:56.25%;height:0}
.map iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.about-img{width:100%;height:auto;border-radius:6px;margin:1rem 0}

.somestimes-slate{background-color:#2F4F4F;padding-bottom:1rem;color:#fff}

@media (max-width:800px){
  .somestimes-slate{background-color:#FFF;padding-bottom:1rem;color:#000}
  .site-header .container{flex-direction:column;align-items:flex-start}
  .nav{margin-top:.5rem}
  .fb-and-contact{grid-template-columns:1fr}
  .fb{grid-template-columns:1fr}
  .hero-text{position:static;color:var(--dark);text-shadow:none;margin-top:-4rem}
}


.two-col-section { display:flex; gap:1.5rem; align-items:flex-start; margin:2rem 0; }
.two-col-section .col-main { flex:2; min-width:0; }
.two-col-section .col-side { flex:1; min-width:0; }
.two-col-section img { max-width:100%; height:auto; display:block; }
@media (max-width:700px) { .two-col-section { flex-direction:column; } }