/* styles.css
   Responsive, accessible styling 
*/

:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#666;
  --accent:#0b6;
  --max-width:1100px;
  --container-padding:1rem;
  --focus: 3px solid #ffbf47;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:calc(var(--container-padding) * 1.25);
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  background:#000;
  color:#fff;
  padding:.5rem .75rem;
  z-index:1000;
}

/* Header and nav */
.site-header{
  border-bottom:1px solid #e6e6e6;
  background:#fff;
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem}
.site-title{font-size:1rem;margin:0}
.site-title a{color:var(--text);text-decoration:none;font-weight:700}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;align-items:center}
.site-nav a{display:inline-block;padding:.5rem .75rem;color:var(--text);text-decoration:none;border-radius:4px}
.site-nav a:focus{outline:var(--focus);}

/* Hero */
.hero{background:linear-gradient(180deg, #f7f7f7 0%, #fff 100%);padding:2.5rem 0}
.hero-inner{display:grid;gap:1rem;align-items:start}
.hero-title{margin:0;font-size:1.75rem}
.hero-sub{margin:0;color:var(--muted)}

/* Buttons */
.btn{display:inline-block;padding:.5rem .75rem;border-radius:6px;background:#f1f1f1;color:var(--text);text-decoration:none}
.btn:focus{outline:var(--focus)}
.btn.primary{background:var(--accent);color:#fff}

/* Gallery */
.gallery-preview{padding:2rem 0}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin-top:1rem;
}
.gallery-item{background:#fafafa;padding:.5rem;border-radius:6px}
.gallery-item h4{margin:.5rem 0 0;font-size:1rem}
.gallery-item .credit{color:var(--muted);font-size:.875rem}

.gallery-image{
  width:100%;
  height:auto;
  display:block;
  background:#ddd url('') center/cover no-repeat; 
  border-radius:4px;
  border:1px solid #e0e0e0;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* Contact form */
.contact-page{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:2rem 0}
form input[type="text"], form input[type="email"], form textarea{
  width:100%;
  padding:.5rem;
  border:1px solid #ccc;
  border-radius:4px;
}
label{display:block;margin:.5rem 0 .25rem;font-weight:600}
.checkbox{display:block;margin:.75rem 0}
.form-actions{margin-top:1rem}
button.btn{border:none;cursor:pointer}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:1rem 0;background:#fff;color:var(--muted)}

/* Responsive quirks */
@media (min-width:700px){
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
  .hero-inner{grid-template-columns:1fr 1fr;align-items:center;gap:2rem}
  .contact-page{grid-template-columns:2fr 1fr;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Focus-visible fallback for accessibility */
:focus{outline:var(--focus);outline-offset:2px}