/* Minimal Photography Theme - site.css */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#E9E9E9;
  --muted-2:#CFCFCF;
  --accent:#8D8D8D;
  --max-width:1200px;
}

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

a{color:inherit;text-decoration:none}

.shell{min-height:100vh;display:flex;flex-direction:column}

/* Header */
.topbar{border-bottom:1px solid var(--muted);background:transparent}
.brand{display:flex;align-items:center;gap:20px}
.brand-logo{height:48px;width:auto;display:block}
.brand-divider{width:2px;height:56px;background:var(--muted-2);border-radius:2px}
.brand-text{color:var(--accent);font-weight:700;font-size:20px;letter-spacing:0.2px}

/* Ensure clicking/focusing the brand link does not add a visible border on the logo image */
.brand-logo{border:0;outline:0}
.brand:focus .brand-logo,
.brand:active .brand-logo,
.brand:focus-visible .brand-logo{
  border:0;outline:0;box-shadow:none}

/* Keep focus ring on the link container instead of the image for accessibility (subtle) */
.brand:focus{outline:none}
.brand:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,0.06);border-radius:4px}

nav{margin-left:auto}
/* NavLink styles: remove text-decoration on normal, hover and active states */
.nav-link{display:inline-block;padding:10px 6px;color:var(--accent);font-size:14px;border-radius:4px;text-decoration:none}
.nav-link:hover, .nav-link:focus, .nav-link.active{color:var(--text);background:transparent;text-decoration:none}

/* Main container */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    padding: 0 10px;
}
.container{max-width:var(--max-width);margin:0 auto;padding:48px 20px}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:24px;padding-bottom:24px}
.hero .eyebrow{color:var(--accent);font-weight:600;letter-spacing:1px}
.hero h1{font-size:48px;margin:0;color:var(--text)}
.hero .lede{color:var(--accent);max-width:60ch}

/* Cards simple layout (leave existing styles but ensure spacing) */
.cards{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
.card{background:transparent;border:1px solid var(--muted);padding:16px;border-radius:6px;min-width:160px}
.card strong{display:block;margin-bottom:8px}

/* Photo form and list */
.photo-form{display:flex;gap:8px;align-items:center;margin-bottom:18px}
.photo-form input{padding:8px 10px;border:1px solid var(--muted);border-radius:6px}
.photo-form button{padding:8px 12px;border-radius:6px;border:none;background:var(--text);color:#fff}

.photo-list{list-style:none;padding:0;margin:0}
.photo-list li{padding:8px 0;border-bottom:1px solid var(--muted);color:var(--accent)}

/* Gallery utility (for future image grid) */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gallery img{width:100%;height:320px;object-fit:cover;border-radius:4px;display:block;transition:transform .24s ease,box-shadow .24s ease}
.gallery img:hover{transform:scale(1.02)}

/* Accessibility focus styles */
a:focus,img:focus{outline:3px solid rgba(0,0,0,0.06);outline-offset:2px}

/* Responsive tweaks */
@media (max-width:640px){
  .brand-text{display:none}
  .brand-divider{display:none}
  .brand-logo{height:40px}
  .hero h1{font-size:32px}
}

/* Utility */
.text-muted{color:var(--accent)}

/* Ensure file inputs hidden globally if component CSS doesn't apply */
input[type="file"].drop-zone-input,
input[type="file"].replacement-input-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}

input[type="file"].drop-zone-input::file-selector-button,
input[type="file"].drop-zone-input::-webkit-file-upload-button,
input[type="file"].replacement-input-hidden::file-selector-button,
input[type="file"].replacement-input-hidden::-webkit-file-upload-button {
    display: none !important;
}