/* ========================================
   REUSABLE HEADER CLASSES
   Colors: LightSeaGreen, LightSkyBlue, MintCream, Moccasin, SeaGreen
   Nav Links: 1-6 positioned top right
   ======================================== */

/* Base header styling - applies to all headers */
[class*="-header-"] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 15px 30px;
    height: 70px;
    box-sizing: border-box;
}

/* Logo positioning - far left (column 1) */
[class*="-header-"] .logo {
    grid-column: 1;
}

/* Title positioning - next to logo (column 2) */
[class*="-header-"] .title {
    grid-column: 2;
    font-size: 24px;
    font-weight: bold;
}

/* Nav container - positioned right (column 3) */
[class*="-header-"] nav {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-self: end;
}

/* Nav link base styling */
[class*="-header-"] nav a {
    text-decoration: none;
    padding: 8px 12px;
    transition: opacity 0.3s;
}

[class*="-header-"] nav a:hover {
    opacity: 0.7;
}

/* ========================================
   LIGHTSEAGREEN HEADERS (#20B2AA)
   ======================================== */

.lightseagreen-header-1,
.lightseagreen-header-2,
.lightseagreen-header-3,
.lightseagreen-header-4,
.lightseagreen-header-5,
.lightseagreen-header-6 {
    background-color: LightSeaGreen;
}

.lightseagreen-header-1 nav a,
.lightseagreen-header-2 nav a,
.lightseagreen-header-3 nav a,
.lightseagreen-header-4 nav a,
.lightseagreen-header-5 nav a,
.lightseagreen-header-6 nav a {
    /*change nav link color here*/
    color: white;
    /*change nav link color here*/
}

/*change nav link spacing here*/
.lightseagreen-header-1 nav a {
    margin-left: 40px;
}

.lightseagreen-header-2 nav a {
    margin-left: 35px;
}

.lightseagreen-header-3 nav a {
    margin-left: 30px;
}
/*change nav link spacing here*/

.lightseagreen-header-4 nav a {
    margin-left: 20px;
}

.lightseagreen-header-5 nav a {
    margin-left: 18px;
}

.lightseagreen-header-6 nav a {
    margin-left: 15px;
}

/* ========================================
   LIGHTSKYBLUE HEADERS (#87CEEB)
   ======================================== */

.lightskyblue-header-1,
.lightskyblue-header-2,
.lightskyblue-header-3,
.lightskyblue-header-4,
.lightskyblue-header-5,
.lightskyblue-header-6 {
    background-color: LightSkyBlue;
}

.lightskyblue-header-1 nav a,
.lightskyblue-header-2 nav a,
.lightskyblue-header-3 nav a,
.lightskyblue-header-4 nav a,
.lightskyblue-header-5 nav a,
.lightskyblue-header-6 nav a {
    /*change nav link color here*/
    color: #1a1a1a;
    /*change nav link color here*/
}

/*change nav link spacing here*/
.lightskyblue-header-1 nav a {
    margin-left: 40px;
}

.lightskyblue-header-2 nav a {
    margin-left: 35px;
}

.lightskyblue-header-3 nav a {
    margin-left: 30px;
}
/*change nav link spacing here*/

.lightskyblue-header-4 nav a {
    margin-left: 20px;
}

.lightskyblue-header-5 nav a {
    margin-left: 18px;
}

.lightskyblue-header-6 nav a {
    margin-left: 15px;
}

/* ========================================
   MINTCREAM HEADERS (#F5FFFA)
   ======================================== */

.mintcream-header-1,
.mintcream-header-2,
.mintcream-header-3,
.mintcream-header-4,
.mintcream-header-5,
.mintcream-header-6 {
    background-color: MintCream;
}

.mintcream-header-1 nav a,
.mintcream-header-2 nav a,
.mintcream-header-3 nav a,
.mintcream-header-4 nav a,
.mintcream-header-5 nav a,
.mintcream-header-6 nav a {
    /*change nav link color here*/
    color: #1a1a1a;
    /*change nav link color here*/
}

/*change nav link spacing here*/
.mintcream-header-1 nav a {
    margin-left: 40px;
}

.mintcream-header-2 nav a {
    margin-left: 35px;
}

.mintcream-header-3 nav a {
    margin-left: 30px;
}
/*change nav link spacing here*/

.mintcream-header-4 nav a {
    margin-left: 20px;
}

.mintcream-header-5 nav a {
    margin-left: 18px;
}

.mintcream-header-6 nav a {
    margin-left: 15px;
}

/* ========================================
   MOCCASIN HEADERS (#FFE4B5)
   ======================================== */

.moccasin-header-1,
.moccasin-header-2,
.moccasin-header-3,
.moccasin-header-4,
.moccasin-header-5,
.moccasin-header-6 {
    background-color: Moccasin;
}

.moccasin-header-1 nav a,
.moccasin-header-2 nav a,
.moccasin-header-3 nav a,
.moccasin-header-4 nav a,
.moccasin-header-5 nav a,
.moccasin-header-6 nav a {
    /*change nav link color here*/
    color: #1a1a1a;
    /*change nav link color here*/
}

/*change nav link spacing here*/
.moccasin-header-1 nav a {
    margin-left: 40px;
}

.moccasin-header-2 nav a {
    margin-left: 35px;
}

.moccasin-header-3 nav a {
    margin-left: 30px;
}
/*change nav link spacing here*/

.moccasin-header-4 nav a {
    margin-left: 20px;
}

.moccasin-header-5 nav a {
    margin-left: 18px;
}

.moccasin-header-6 nav a {
    margin-left: 15px;
}

/* ========================================
   SEAGREEN HEADERS (#2E8B57)
   ======================================== */

.seagreen-header-1,
.seagreen-header-2,
.seagreen-header-3,
.seagreen-header-4,
.seagreen-header-5,
.seagreen-header-6 {
    background-color: SeaGreen;
}

.seagreen-header-1 nav a,
.seagreen-header-2 nav a,
.seagreen-header-3 nav a,
.seagreen-header-4 nav a,
.seagreen-header-5 nav a,
.seagreen-header-6 nav a {
    /*change nav link color here*/
    color: white;
    /*change nav link color here*/
}

/*change nav link spacing here*/
.seagreen-header-1 nav a {
    margin-left: 40px;
}

.seagreen-header-2 nav a {
    margin-left: 35px;
}

.seagreen-header-3 nav a {
    margin-left: 30px;
}
/*change nav link spacing here*/

.seagreen-header-4 nav a {
    margin-left: 20px;
}

.seagreen-header-5 nav a {
    margin-left: 18px;
}

.seagreen-header-6 nav a {
    margin-left: 15px;
}