:root {
    --primary-color: #72afff;
    --secondary-color: #1e80ff;
}

* {
    font-family: 'Asap', sans-serif;
}

html {
    border-top: 10px solid var(--primary-color);
}

body {
    width: 100%;
    margin: 0;
}

main {
    width: 100%;
    padding-left: 20px;   /* space on the left */
    padding-right: 20px;  /* space on the right */
}

/* === NAVIGATION BAR === */
nav {
    display: flex;
    justify-content: space-between; /* logo left, nav links on right */
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 1em 0;
    width: 100%; /* make nav stretch across the viewport */
    box-sizing: border-box; /* include padding in width */
    padding-left: 20px;   /* space on the left */
    padding-right: 20px;  /* space on the right */
}

/* Logo styling */
.logo a {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--secondary-color);
    text-decoration: none;
}

/* Nav list layout */
nav ul {
    display: flex;               /* horizontal layout for links */
    flex-direction: row;
    gap: 1.5em;                  /* space between each link */
    list-style: none;            /* remove bullets */
    margin: 0;
    padding: 0;
    margin-left: auto;    /* push links to the right */
}

/* Nav links styling */
nav li a {
    text-decoration: none;
    color: var(--secondary-color);
    font-weight: 500;
    padding-bottom: 0.25em;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

nav li a:hover,
nav li a:focus {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    background-color: transparent; /* prevent blue background override */
}

/* Responsive (mobile view): stack links vertically under logo */
@media (max-width: 600px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75em;
    }

    nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }
}

/* CTA Button */
.cta-button {
  display: inline-block;
  background: var(--secondary-color);
  color: #fff;
  padding: 0.75em 1.5em;
  border-radius: 0.5em;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: var(--primary-color);
}



/* Generic links outside nav */
a {
    color: var(--secondary-color);
    text-decoration: none;
}

a:hover, a:focus {
    background-color: var(--secondary-color);
    color: white;
}

/* Photo grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1em;
    list-style: none;
    padding: 0;
}

.photo-grid img {
    width: 100%;       /* responsive width */
    height: auto;      /* preserve aspect ratio */
    border-radius: 1em;
    object-fit: cover; /* ensures image covers container nicely */
}

/* Footer */
footer {
  /*8  margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #ccc; */
    text-align: center;
}

/* Blog posts */
.blog-posts {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.blog-posts li {
    margin-bottom: 1em;
}

/* Optional content wrapper */
.content {
    margin-top: 1em;
}