/* ===================================================
   1. GLOBAL RESET & BASE STYLES
   =================================================== */
* {
    /* Box Model */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Typography */
    font-size: 100%;
}

body {
    /* Layout */
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Typography */
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #222;

    /* Visual */
    -webkit-font-smoothing: antialiased;
}


/* ===================================================
   2. TYPOGRAPHY & MEDIA
   =================================================== */
h1,
h2,
h3 {
    /* Typography */
    font-weight: 400;
}

h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
h2 { font-size: 2rem;   margin-bottom: 0.5rem; }
h3 { font-size: 1.75rem; margin-bottom: 0.5rem; }

p {
    /* Box Model */
    margin-bottom: 0.5rem;
}

h1.page-title {
    /* Layout */
    text-align: center;

    /* Typography */
    font-size: 2.5rem;

    /* Box Model */
    margin-bottom: 0;
}

img,
video {
    /* Layout */
    display: block;

    /* Box Model */
    max-width: 100%;
    height: auto;
}

/* Global link styles */
a {
    /* Typography */
    color: #333;

    /* Visual */
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;

    /* Interaction */
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:hover {
    /* Typography */
    color: #500;

    /* Visual */
    text-decoration: none;
}

a:focus-visible {
    /* Visual */
    outline: 2px solid #800;
    outline-offset: 2px;
}

a:active {
    /* Typography */
    color: #300;
}


/* ===================================================
   3. LAYOUT CONTAINERS & STRUCTURE
   =================================================== */
main {
    /* Layout */
    flex: 1;
    width: 100%;
}

/* Responsive grid */
.parent {
    /* Layout */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    /* Box Model */
    gap: 1rem;
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
}

.image-container {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Box Model */
    max-width: 1440px;
    margin: 0 auto;
    padding: 1rem 2vw;
    gap: 1.5rem;
}

figure {
    /* Layout */
    display: table;

    /* Box Model */
    margin: 0 auto 1rem;
    max-width: 1000px;
}

figure a {
    /* Typography */
    color: black;
}

figure a:hover {
    /* Typography */
    color: maroon;

    /* Visual */
    text-decoration: none;
}

figure img {
    /* Layout */
    display: block;

    /* Box Model */
    width: auto;
    max-width: 100%;
    height: auto;
    border: 2px solid black;
}

figcaption {
    /* Layout */
    display: table-caption;
    caption-side: bottom;
    text-align: center;

    /* Typography */
    font-size: 1.4rem;
    line-height: 1.4;
    color: #666;

    /* Box Model */
    margin-top: 1rem;
}

ol {
    /* Layout */
    list-style-position: inside;

    /* Box Model */
    width: 50%;
    margin: 0 auto;
    padding-left: 1.25rem;
}

ol li {
    /* Box Model */
    margin-bottom: 1.5rem;
}

ol li p {
    /* Box Model */
    margin-top: 0.3rem;
}

.inner-text-wrap {
    /* Box Model */
    max-width: 950px;
    margin: 0 auto;
    padding: 0 1rem;
}


/* ===================================================
   4. HEADER & NAVIGATION
   =================================================== */
.site-header {
    /* Layout */
    display: flex;
    align-items: center;

    /* Box Model */
    max-width: 1440px;
    margin: 0 auto 3rem;
    padding: 2rem 5vw 3rem;
    gap: 2rem;

    /* Visual */
    border-bottom: 2px solid #ddd;
}

.site-header a {
    /* Typography */
    color: inherit;

    /* Visual */
    text-decoration: none;
}

.site-header a:hover {
    /* Typography */
    color: #800;
}

.logo, .small-logo {
    /* Box Model */
	border: 1px solid black;
    max-height: 120px;
}



.nav-menu ul {
    /* Layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    /* Box Model */
    list-style: none;
    margin: 0 auto;
    max-width: 90%;
    gap: 1.5rem;
}

.nav-menu a {
    /* Typography */
    font-size: 1.6rem;
    color: #333;

    /* Visual */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.nav-menu a:hover {
    /* Typography */
    color: #800;

    /* Visual */
    text-decoration: none;
}


/* ===================================================
   5. FOOTER
   =================================================== */
footer {
    /* Layout */
    text-align: center;

    /* Box Model */
    width: 100%;
    padding: 2rem 1rem;
}

footer p {
    /* Box Model */
    max-width: 90%;
    margin: 0 auto;
}

.nav-menu-footer ul {
    /* Layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    /* Box Model */
    list-style: none;
    width: 100%;
    max-width: 700px; /* Caps width on large screens */
    margin: 0 auto 2rem;
    gap: 0.7rem;
}

.nav-menu-footer a {
    /* Typography */
    font-size: 1.3rem;
    color: #333;

    /* Box Model */
    margin: 0 0.2em;

    /* Visual */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.nav-menu-footer a:hover {
    /* Typography */
    color: #800;

    /* Visual */
    text-decoration: none;
}

.small-logo {
    /* Box Model */
    max-width: 60%;
}

/* ==========================================================================
	CONTACT FORM
   ========================================================================== */

.contact-form {
    margin: 1em auto;
    max-width: 500px;
	padding: 10px;
    width: 50%;
}

input,
textarea {
	font-family: sans-serif;
    font-size: 1.1rem;
    padding: 10px;
    width: 100%;
}

label {
    display: block;
    margin-top: 1em
}

/* Base Button Style */
.my-button {
  background-color: #333;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.1em;
  color: white;              
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease; 
}

/* Hover State */
.my-button:hover {
	background-color: #777;
  }

.hidden{
	display: none;
}

/* ===================================================
   6. UTILITIES & PROTECTION
   =================================================== */
.center-something {
    /* Layout */
    display: flex;
    justify-content: center;

    /* Box Model */
    max-width: 90%;
    margin: 0 auto 1rem;
    padding: 1rem 0;
}

.small-text {
    /* Typography */
    font-size: 1.1rem;

    /* Box Model */
    margin-bottom: 1rem;
}

.img-protect {
    /* Layout */
    position: relative;
}

.img-protect::after {
    /* Layout */
    position: absolute;
    inset: 0;

    /* Box Model */
    content: "";

    /* Visual */
    z-index: 10;
}

.img-protect img {
    /* Layout */
    width: 100%;
    height: auto;

    /* Interaction */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


/* ===================================================
   7. RESPONSIVE DESIGN (MOBILE)
   =================================================== */
@media (max-width: 768px) {
    .site-header {
        /* Layout */
        flex-direction: column;
        text-align: center;

        /* Box Model */
        padding: 2rem 1rem;
        margin-bottom: 1.5rem;
    }

    .nav-menu ul {
        /* Layout */
        justify-content: center;

        /* Box Model */
        max-width: 100%;
    }

    body {
        /* Typography */
        font-size: 1rem;
    }

    ol {
        /* Box Model */
        width: 90%;
    }

    .logo {
        /* Box Model */
        max-height: 80px;
    }

    .small-logo {
        display: none;
    }

    .nav-menu a,
    .nav-menu-footer a,
    p,
    .site-title {
        font-size: 1rem;
    }

    h1.page-title {
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 0;
    }
}