/* ===== Homepage Specific Styles ===== */
#logo-container {
    margin-top: 0px;                 /* space above logo */
    margin-bottom: 0;                 /* space below logo */
}

#logo-container #logo {
    font-size: 2.2rem !important;
    line-height: 1.8 !important;
    margin-top: -10px;   /* moves logo up */
    margin-bottom: 50px; /* keeps space below unchanged */
}


/* Navbar layout (flex to keep links inline) */
#header .container {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;                  /* keeps navbar responsive */
}

#nav {
    display: flex;
    gap: 10px;                        /* space between links */
}

#nav a {
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Tip of the Month */
#banner h2 {
    color: #ffffc0;                   /* pale yellow */
    font-size: 1.2rem;
    margin: 10px 0 0 0;               /* space above/below */
    padding: 10px 0;
}

#banner p#tip-text {
    margin: 0;
    color: #fff;                       /* text color for contrast */
}

/* SEO <h1> styled to blend with body text */
#seo-h1 {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    color: #779c68;                   /* soft green */
    font-family: Verdana, sans-serif;
    text-transform: none;
}

/* Optional: visually hidden class if ever needed */
.sr-only {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    font-size: 1px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* ===== Homepage Safe Tweaks ===== */
/* Use these values as a reference — changing them is safe and won’t break the layout */

/* Logo size and spacing */
#logo-container #logo {
    /* Adjust visual size: larger = pushes logo down, smaller = tighter header */
    font-size: 2rem !important;
}

#logo-container {
    /* Space above logo — safe to increase or decrease */
    margin-top: 50px;
}

/* Navbar spacing */
#nav {
    /* Gap between links — safe to adjust */
    gap: 10px;
}

#nav a {
    /* Link font size — safe to tweak if needed */
    font-size: 0.9rem;
}

/* Tip of the Month */
#banner h2 {
    /* Font size and spacing — adjust for emphasis without affecting layout */
    font-size: 1.2rem;
    margin: 10px 0 0 0;
    padding: 10px 0;
}

/* SEO <h1> (visible on page) */
#seo-h1 {
    /* Adjust size/color to blend naturally — safe to tweak */
    font-size: 1rem;
    color: #779c68;
}