/* --- KEEP HEADER CLEAN AND WHITE --- */
.site-header,
.site-header .container,
.site-header .site-branding {
    background: #ffffff !important;
}

/* --- LILY GRADIENT ON TOP SKINNY BAR ONLY --- */
.top-bar,
.top-header,
.site-top-bar,
.site-top-header,
.header-top,
.header-top-bar {
    background: linear-gradient(90deg, #F06AA6, #4CC7C3, #C7E76B, #A8A4F1) !important;
}

/* --- TOP BAR TEXT WHITE FOR VISIBILITY --- */
.top-bar a,
.top-bar span {
    color: #ffffff !important;
}

/* --- ADD A LILY-GRADIENT STRIP AT THE VERY TOP OF THE HEADER --- */
.site-header {
    position: relative;
    padding-top: 32px; /* space under the strip so logo doesn't touch it */
}

.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px; /* thickness of the strip */
    background: linear-gradient(90deg, #F06AA6, #4CC7C3, #C7E76B, #A8A4F1);
}

/* --- GRADIENT TEXT FOR THE SITE TITLE --- */
.site-title a {
    background: linear-gradient(90deg, #F06AA6, #4CC7C3, #C7E76B, #A8A4F1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700 !important;
}

/* --- TAGLINE COLOR TO MATCH AM NAVY --- */
.site-description {
    color: #0A2F5A !important;
    font-weight: 500;
}

/* --- MENU TEXT COLOR TO MATCH AM NAVY --- */
#site-navigation a,
.main-navigation a,
nav a,
.menu a {
    color: #0A2F5A !important;
}

/* --- MENU HOVER COLOR (LILY PINK) --- */
#site-navigation a:hover,
.main-navigation a:hover,
.menu a:hover {
    color: #F06AA6 !important;
}

/* --- ABOUT ME PHOTO: SMALL ROUND CIRCLE --- */
/* Use either .about-photo img (if you added that class) or .about-section img (theme default).
   Styling both so you're covered. */

.about-photo img,
.about-section img {
    width: 140px;           /* make smaller/larger: 120–180px works well */
    height: 140px;          /* must match width for perfect circle */
    object-fit: cover;      /* crop nicely inside the circle */
    border-radius: 50%;     /* makes it round */
    display: block;
    margin: 0 auto 16px auto;        /* centers the photo */
    border: 3px solid #ffffff;       /* clean white border */
    box-shadow: 0 3px 12px rgba(0,0,0,0.10); /* soft shadow */
}