#page-head-simple{
    height: 40vh;
    width:100%;
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: flex-end;    /* title sits near the bottom, not dead-center */
    position: relative;
    /*overflow: hidden;*/
    box-shadow: var(--shadowSoft);
}

/* Bottom-weighted: fully transparent at the top, darkening toward the
   bottom where the title sits — reads better over a wider range of
   photos than a flat, evenly-applied tint, and keeps the title legible
   regardless of what's directly behind it. */
#page-head-simple::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(var(--highlight2Faint), 0.85), rgba(var(--highlight2Faint), 0) 70%);
    z-index: 1;
}

#page-head-simple h1{
    text-align: center;
    font-size: var(--fontLargest);
    font-weight: var(--fontWeightBold);
    
    position: relative; 
    z-index: 2;
    color: rgb(var(--background));
    font-family: HighlightFont;
    padding-bottom: var(--paddingLarge);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ---------- Compact variant — pure utility/auth pages (sign-in, create
   account, password reset) don't need the same visual weight as a real
   content page like the attraction hero. Shorter, lighter title. ---------- */

#page-head-simple.page-head-compact {
    height: 22vh;
    min-height: 160px;
}

#page-head-simple.page-head-compact h1 {
    font-size: var(--fontLargest);
    padding-bottom: var(--paddingMinimum);
}

/* ==========================================================================
   Homepage hero header — index.php only. A bigger, bolder version of the
   simple header above (more height, a real photo background rather than
   a flat gradient), but kept visually simple: one title, one search box,
   nothing else competing for attention.
   ========================================================================== */

#page-head-home {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 65vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--paddingLarge);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: var(--shadowSoft);
}

/* Darkens the background photo so the white title stays readable
   regardless of what image is used */
#page-head-home::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

#page-head-home h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 var(--paddingLarge) 0;
    font-size: var(--fontLargest);
    font-weight: var(--fontWeightBold);
    font-family: HighlightFont;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* The "box" that separates the search bar from the background photo */
.page-head-home-search-box {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 700px;
    padding: var(--paddingSmall);
    background: rgb(var(--backgroundFaint));
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadowStrong);
}

/* ---------- Phone display ---------- */
@media only screen and (max-width: 480px) {

    #page-head-home {
        min-height: 55vh;
        padding: var(--paddingSmall);
    }

    #page-head-home h1 {
        font-size: var(--fontLarge);
    }

}