/* Site styles (added hero and accessibility styles) */

/* Nav bar styles */
nav.navbar {
    background-color: #ffffff;
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Hero section styles */
.hero {
    display:block;
    max-width:1200px;
    margin: 1rem auto;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.hero img, .hero svg {
    width:100%;
    height:auto;
    display:block;
}
.hero .hero-caption {
    position:absolute;
    left: 2rem;
    bottom: 2rem;
    color: #fff;
    background: rgba(0,0,0,0.35);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
}
@media (max-width:600px){
    .hero .hero-caption{ left:1rem; right:1rem; font-size:0.9rem }
}

/* Skip-link visible on focus for accessibility */
.skip-link {
    position:absolute;
    left:-999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.skip-link:focus, .skip-link:focus-visible {
    position:static;
    left:auto;
    width:auto;
    height:auto;
    padding:0.5rem 1rem;
    background:#fff;
    color:#0a3d62;
    border-radius:4px;
    z-index:9999;
    margin: 0.5rem;
}

/* Basic reset for lists in nav */
nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1rem }

/* Bio section */
.bio-row { display:flex; gap:1rem; align-items:flex-start; margin:1rem 0 }
.bio-photo { width:140px; height:140px; object-fit:cover; border-radius:8px }
.bio-copy h3 { margin:0 0 0.5rem 0 }
@media (max-width:700px){ .bio-row{ flex-direction:column; align-items:center } .bio-photo{ width:200px; height:200px } }

/* Social links styling */
.social-links { margin:0.5rem 0; font-size:0.95rem }
.social-links a { color: #0a3d62; text-decoration:underline }

/* Social icon sizing */
.social-icon { width:1em; height:1em; vertical-align:middle; margin-right:0.35rem }

/* Projects gallery */
.gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; margin:1rem 0 }
.gallery figure { margin:0; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.08) }
.gallery img { width:100%; height:225px; object-fit:cover; display:block }
.gallery figcaption { padding:0.5rem 0.75rem; font-size:0.95rem }

.brian-contact-card img {width:300px; height:200px; display:block; margin:1rem auto}
.qrcode img { width:200px; height:200px; display:block; margin:1rem auto }

/* Contact form styles */
#contact-form { max-width:760px; margin:1rem auto; padding:1rem }
#contact-form form { display:flex; flex-direction:column; gap:0.5rem }
#contact-form label { font-weight:600 }
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea { padding:0.6rem; border:1px solid #ddd; border-radius:6px; font-size:1rem }
#contact-form button { background:#0a3d62; color:#fff; border:none; padding:0.75rem 1rem; border-radius:6px; cursor:pointer }
#contact-form button:hover{ opacity:0.95 }

@media (max-width:600px){
    #contact-form { padding:0.5rem }
}

/* Honeypot (hidden field for spam bots) */
.hp-field { position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden }
.hp-field input { pointer-events: none }