/* =========================================================
   GLOBAL HEADER + NAVIGATION (Desktop + Mobile)
   ========================================================= */

body {
    font-family: "Times New Roman", serif;
}

/* ---------- GOLD TOP BOX ---------- */

.top {
    width: 80%;                 /* desktop: same as main content */
    margin: 0 auto 1em auto;
    border: 5px ridge goldenrod;
    border-radius: 10px;
    background-color: #9cc5e3;

    position: relative;
}

/* show desktop header by default */
.top-desktop { display: block; }
.top-mobile  { display: none; }

/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.nav-bar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0.3rem clamp(0.5rem, 3vw, 1.5rem) 0.1rem;
}

.main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(1rem, 4vw, 2.7rem);
}

.main-nav a {
    text-decoration: none;
    color: #000;
    font-size: clamp(1.1rem, 1.4vw, 1.6rem);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
}

.main-nav a:hover {
    background-color: #7ccd7c;
}

.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* badges under desktop items */
.nav-badge {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background-color: #8ddc71;
    white-space: nowrap;
}

.nav-badge-red {
    background-color: #ffb1b1;
}

/* dropdown & info panels */
.dropdown-panel,
.info-panel {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    z-index: 20;
}

/* dropdowns (Home / Contact / Community) */
.dropdown-panel {
    top: 45%;
    min-width: 10rem;
    padding: 0.3rem 0;
    text-align: center;
}

.dropdown-panel a {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    color: #000;
    white-space: nowrap;
}

.dropdown-panel a:hover {
    background-color: #f0f0f0;
}

/* info panels (Hall Bookings / Events) */
.info-panel {
    top: 38%;
    min-width: 14rem;
    max-width: 18rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.3;
    white-space: normal;
}

.info-panel strong {
    display: block;
    background: #ffe7c1;
    padding: 0.4rem;
    margin: -0.45rem -0.6rem 0.3rem;
    border-radius: 6px 6px 0 0;
}

/* triggers */
.nav-item.has-dropdown:hover .dropdown-panel { display: block; }
.nav-item.has-info:hover     .info-panel     { display: block; }

/* =========================================================
   DESKTOP LOWER ROW (social + logo + account)
   ========================================================= */

.top-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 0.3rem 1rem 1rem;
    flex-wrap: wrap;
}

.social-row {
    flex: 0;
    white-space: nowrap;
    font-size: 1vw;
}

.fb-logo {
    height: 14px;
    width: auto;
    vertical-align: middle;
    margin-left: 0.2rem;
    padding-bottom: 0.5em;
}

.logo-row {
    flex: 0;
    text-align: center;
}

.main-logo {
    max-width: 42vw;
    height: auto;
}

.account-area {
    flex: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.account-area .acc-line {
    margin: 0;
    font-size: 1vw;
    white-space: nowrap;
}

.account-link {
    text-decoration: none;
    color: blue;
}

/* lychgate image (desktop only) */
.lychgate-wrap { text-align: center; }

.lychgate-img {
    width: 5vw;
    height: auto;
    padding-left: 1vw;
}

/* =========================================================
   MOBILE HEADER (blue bar)
   ========================================================= */

.top-mobile {
    padding: 0.4rem 0.6rem 0.7rem;
}

.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* left: "Follow us on" + fb */
.mobile-social {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 400;      /* normal weight */
    text-align: left;
    padding-top: 1.5em;
}

/* centre: decorative title ❧ Sutton-on-the-Hill ❧ */
.mobile-title {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.mobile-title::before,
.mobile-title::after {
    content: "❧";
    font-size: 1.2rem;
    margin: 0 0.25rem;
}

/* hamburger button (sits just left of title in your HTML) */
.mobile-menu-button {
    border: none;
    background: #1abc9c;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    cursor: pointer;
    margin: 0 0.4rem;
    margin-top: 1em;
    margin-left: 1em;
}

.mobile-menu-button img {
    height: 26px;
    width: auto;
}

/* right: Sign in / Register etc. */
.mobile-header-account {
    flex: 1;
    text-align: right;
    padding-right: 0.2rem;
    padding-top:1em;
}

.mobile-header-account .acc-line {
    margin: 0;
    font-size: 0.95rem;   /* same as .mobile-social */
    font-weight: 400;      /* normal weight */
}


.mobile-header-account .account-link {
    display: inline-block;

}
.mobile-logo-row {
    display: flex;
    justify-content: center;
    margin-top: 0.4rem;
    margin-bottom: 0.3rem;
}

.mobile-logo-row img {
    max-width: 19rem;
    height: auto;
    padding-top:0.7em;
}
/* =========================================================
   MOBILE MENU (collapsible)
   ========================================================= */

.mobile-menu {
    display: none;
    margin-top: 0.6rem;
}

.mobile-menu.open {
    display: block;
}

.mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0.1rem auto 0 auto;
    width: 75%;               /* inset pattern on mobile */
}

.mobile-nav li {
    background: #fff;
    margin-bottom: 0.3rem;
    border-radius: 8px;
    text-align: center;
    padding: 0.4rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}

.mobile-nav a {
    text-decoration: none;
    color: #000;
}

/* Hall Bookings / Events with badges */
.mobile-with-badge .nav-badge {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    white-space: normal;   /* allow wrapping */
    line-height: 1.2;
}

/* items with submenus */
.mobile-has-sub {
    padding: 0;
}

.mobile-sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-sub-header a {
    flex: 1;
    text-align: center;
}

/* + / − toggle */
.mobile-sub-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

/* subnav list */
.mobile-subnav {
    list-style: none;
    padding-bottom: 0.3rem;
    display: none;
    padding-left: 0;
    margin: 0 auto;
    width: 75%;
}

.mobile-has-sub.open > .mobile-subnav {
    display: block;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

@media (max-width: 1150px) {
    .top {
        width: 80%;    /* slightly inset on mobile vs main content */
    }

    .top-desktop { display: none; }
    .top-mobile  { display: block; }

    .lychgate-img { display: none; }   /* no lychgate in tiny header */
    .mobile-header-account .acc-line {
        font-size: 0.85rem !important;
        font-weight: 400;
        line-height: 1.1;
    }

    .mobile-header-account .account-link {
        font-size: 0.85rem !important;
    }
}

@media (min-width: 1150px) {
    .top {
        padding-top: 0.3em;
    }
}