/* =========================================================
   1. FONT IMPORTS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Inter:wght@400;700&family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');


/* =========================================================
   2. GLOBAL RESET
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    line-height: 1.6;
}


/* =========================================================
   3. BASE STYLES
   ========================================================= */
body {
    background-color: #0a1929;
    color: #b0c4de;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    color: #e3f2fd;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
}

#intro-title {
    color: #e3f2fd;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
}

a {
    color: #64b5f6;
    text-decoration: none;
}


/* =========================================================
   4. GLOBAL LAYOUT
   Header, Nav, Main, Footer
   ========================================================= */

/* Header */
header {
    padding: 1rem 0;
}

/* Navigation */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

nav a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid #5e8fb7;
    border-radius: 4px;
    color: #5e8fb7;
    font-weight: 600;
    text-align: center;
    width: 140px;
}

nav a:hover {
    background-color: #42a5f5;
    color: #0a1929;
    box-shadow: 0 0 8px rgba(66, 165, 245, 0.5);
}

/* Main content */
main {
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}

main section {
    margin: .25rem 0;
}

/* Feature list on homepage */
section[aria-labelledby="site-heading"] ul {
    list-style-position: inside;
    padding-left: 0;
}

section[aria-labelledby="site-heading"] ul li {
    display: block;
    text-decoration: underline;
    margin: 0.4rem 0;
}

section[aria-labelledby="site-heading"] ul li:hover {
    font-style: italic;
    cursor: pointer;
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
}


/* =========================================================
   5. CONTACT PAGE COMPONENTS
   ========================================================= */

/* Contact section spacing */
section[aria-labelledby="contact-heading"] {
    margin-top: 0;
    padding: 0;
}

#contact-heading {
    margin-bottom: 0.5rem;
}

section[aria-labelledby="contact-heading"] p {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

/* Form layout */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

/* Honeypot field hidden */
input[name="website"] {
    display: none !important;
}

/* Label spacing */
form label {
    margin: 0.2rem 0;
}

form label[for="message"] {
    margin-top: 0.2rem;
    margin-bottom: 0.25rem;
}

/* Inputs and textareas */
form input,
form textarea {
    margin: 0;
    width: 80%;
    max-width: 400px;
}

input[type="text"],
input[type="email"],
textarea {
    background-color: #1a2332;
    color: #b0c4de;
    border: 1px solid #5e8fb7;
    padding: 8px;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
}

input::placeholder,
textarea::placeholder {
    color: #7a9ab8;
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 5px #5e8fb7;
    border-color: #64b5f6;
}

/* Textarea height */
form textarea {
    height: 150px;
}

/* Submit button */
button,
input[type="submit"] {
    background-color: #1a2332;
    color: #5e8fb7;
    border: 1px solid #5e8fb7;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

button:hover,
input[type="submit"]:hover {
    background-color: #2a3342;
    box-shadow: 0 0 5px #5e8fb7;
}

/* reCAPTCHA */
.g-recaptcha {
    transform: scale(0.9);
    transform-origin: center;
}

button[type="submit"] {
    margin-top: 0.4rem;
}


/* =========================================================
   6. BLOG PAGE COMPONENTS
   ========================================================= */

.blog-container {
    text-align: center;
    padding: 0px 20px;
}

.blog-title {
    font-size: 40px;
    margin-bottom: 40px;
    color: #64b5f6;
}

.blog-categories {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* Blog category cards */
.category-card {
    width: 90%;
    max-width: 600px;
    border: 2px solid #5e8fb7;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease;
}

.category-card:hover {
    transform: scale(1.02);
}

.blog-header-image {
    width: 100%;
    max-width: 1100px;
    height: 220px;
    object-fit: contain;
    /* margin: 0 auto 40px auto; */
    display: block;
    /* border: 2px solid #00ff66; */
}

.blog-box {
    display: block;
    border: 2px solid #5e8fb7;
    padding: 30px;
    /* margin: 10px 0; */
    text-align: center;
    text-decoration: none;
    color: #5e8fb7;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.blog-box:hover {
    background-color: #1a2332;
    transform: scale(1.02);
}

.post-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

.post-container h1 {
    text-align: center;
    margin-bottom: 10px;
}

.date {
    text-align: center;
    margin-bottom: 30px;
    color: #7a9ab8;
}

.post-image {
    width: 100%;
    margin: 20px 0;
    border: 1px solid #5e8fb7;
}

.blog-search {
    width: 80%;
    max-width: 400px;
    padding: 10px;
    margin-bottom: 30px;
    border: 1px solid #5e8fb7;
    background-color: #1a2332;
    color: #b0c4de;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
}

.post-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
}

.post-item {
    display: flex;
    justify-content: space-between;
    border: 1px solid #5e8fb7;
    padding: 12px 16px;
    margin-bottom: 15px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.post-item:hover {
    background-color: #1a2332;
}

.post-item a {
    color: #5e8fb7;
    text-decoration: none;
    font-weight: bold;
}

.post-date {
    color: #7a9ab8;
    font-size: 0.9rem;
}


/* =========================================================
   7. MEDIA QUERIES
   ========================================================= */

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}
/* Blog post spacing */
.post-container h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.post-container h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.post-container p {
    margin-bottom: 1rem;
}

.post-container ul,
.post-container ol {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.post-container ul li {
    display: list-item;
    margin-bottom: 0.5rem;
}

.post-container ul li a {
    display: inline;
}

.post-container pre {
    margin: 1.5rem 0;
}